feat: Add app testing registration page

This commit is contained in:
2026-07-05 22:08:15 +02:00
parent 903f4cd1e9
commit 2e13e5d5d5
10 changed files with 235 additions and 0 deletions
+43
View File
@@ -363,6 +363,49 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
// --- Tester Registration Logic ---
const testerForm = document.getElementById('tester-form');
if (testerForm) {
testerForm.addEventListener('submit', async (e) => {
e.preventDefault();
const emailInput = document.getElementById('tester-email');
const submitBtn = document.getElementById('tester-submit-btn');
const successMsg = document.getElementById('tester-success-msg');
const errorMsg = document.getElementById('tester-error-msg');
submitBtn.disabled = true;
submitBtn.textContent = 'Wird gesendet...';
successMsg.style.display = 'none';
errorMsg.style.display = 'none';
try {
const response = await fetch('tester_backend.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: emailInput.value })
});
const result = await response.json();
if (result.success) {
successMsg.style.display = 'block';
testerForm.reset();
} else {
errorMsg.innerHTML = '<i class="fa-solid fa-triangle-exclamation"></i> ' + (result.error || 'Unbekannter Fehler');
errorMsg.style.display = 'block';
}
} catch (err) {
console.error(err);
errorMsg.innerHTML = '<i class="fa-solid fa-triangle-exclamation"></i> Netzwerkfehler. Bitte später erneut versuchen.';
errorMsg.style.display = 'block';
} finally {
submitBtn.disabled = false;
submitBtn.textContent = 'Als Tester anmelden';
}
});
}
// --- Modal Management for Impressum & Privacy ---
const modalTriggers = document.querySelectorAll('.legal-trigger');
const modals = document.querySelectorAll('.modal-overlay');
+1
View File
@@ -24,6 +24,7 @@
<a href="upload.html">Upload</a>
<a href="faq.html">FAQ</a>
<a href="feedback.html">Feedback Hub</a>
<a href="tester.html">App Testing</a>
<a href="#" id="admin-login-trigger"><i class="fa-solid fa-user-gear"></i> Admin</a>
</nav>
<button class="menu-toggle" aria-label="Menu öffnen">
+1
View File
@@ -25,6 +25,7 @@
<a href="upload.html">Upload</a>
<a href="faq.html" class="active-nav">FAQ</a>
<a href="feedback.html">Feedback Hub</a>
<a href="tester.html">App Testing</a>
<a href="#" id="admin-login-trigger"><i class="fa-solid fa-user-gear"></i> Admin</a>
</nav>
<button class="menu-toggle" aria-label="Menu öffnen">
+1
View File
@@ -25,6 +25,7 @@
<a href="upload.html">Upload</a>
<a href="faq.html">FAQ</a>
<a href="feedback.html">Feedback Hub</a>
<a href="tester.html">App Testing</a>
<a href="#" id="admin-login-trigger"><i class="fa-solid fa-user-gear"></i> Admin</a>
</nav>
<button class="menu-toggle" aria-label="Menu öffnen">
+1
View File
@@ -25,6 +25,7 @@
<a href="upload.html">Upload</a>
<a href="faq.html">FAQ</a>
<a href="feedback.html" class="active-nav">Feedback Hub</a>
<a href="tester.html">App Testing</a>
<a href="#" id="admin-login-trigger"><i class="fa-solid fa-user-gear"></i> Admin</a>
</nav>
<button class="menu-toggle" aria-label="Menu öffnen">
+1
View File
@@ -24,6 +24,7 @@
<a href="upload.html">Upload</a>
<a href="faq.html">FAQ</a>
<a href="feedback.html">Feedback Hub</a>
<a href="tester.html">App Testing</a>
<a href="#" id="admin-login-trigger"><i class="fa-solid fa-user-gear"></i> Admin</a>
</nav>
<button class="menu-toggle" aria-label="Menu öffnen">
+1
View File
@@ -25,6 +25,7 @@
<a href="upload.html">Upload</a>
<a href="faq.html">FAQ</a>
<a href="feedback.html">Feedback Hub</a>
<a href="tester.html">App Testing</a>
<a href="#" id="admin-login-trigger"><i class="fa-solid fa-user-gear"></i> Admin</a>
</nav>
<button class="menu-toggle" aria-label="Menu öffnen">
+141
View File
@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="icon" type="image/png" href="favicon.png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Schnappix - App Testing Anmeldung</title>
<meta name="description" content="Melde dich als App Tester für Schnappix an und hilf uns, die App für den Release vorzubereiten.">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@500;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<!-- Header Navigation -->
<header class="main-header">
<div class="container nav-container">
<div class="logo">
<a href="index.html" style="text-decoration: none;"><span class="logo-glow">Schnappix</span></a>
</div>
<nav class="nav-links">
<a href="features.html">Features</a>
<a href="upload.html">Upload</a>
<a href="faq.html">FAQ</a>
<a href="feedback.html">Feedback Hub</a>
<a href="tester.html" class="active-nav">App Testing</a>
<a href="#" id="admin-login-trigger"><i class="fa-solid fa-user-gear"></i> Admin</a>
</nav>
<button class="menu-toggle" aria-label="Menu öffnen">
<i class="fa-solid fa-bars"></i>
</button>
</div>
</header>
<!-- Page Title -->
<div style="padding: 140px 0 20px;">
<div class="container">
<h1 class="section-title" style="margin-bottom: 20px;">Werde <span class="text-gradient">App Tester</span></h1>
<p style="text-align: center; color: var(--text-muted); max-width: 600px; margin: 0 auto 40px;">Hilf uns beim finalen Feinschliff! Trage dich als Tester ein und erhalte exklusiven Vorabzugang zu Schnappix im Google Play Store.</p>
</div>
</div>
<!-- Tester Registration Section -->
<section class="feedback-section" style="border-top: none; padding-top: 20px; padding-bottom: 80px;">
<div class="container">
<div class="feedback-grid" style="grid-template-columns: 1fr; max-width: 800px; margin: 0 auto;">
<!-- Info Card -->
<div class="glass" style="padding: 30px; border-radius: 20px; border: 1px solid rgba(139, 92, 246, 0.3); margin-bottom: 30px; background: rgba(5, 5, 16, 0.6);">
<h3 style="color: var(--accent-color); margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
<i class="fa-solid fa-circle-info"></i> Wichtige Hinweise für Tester
</h3>
<ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; color: var(--text-muted);">
<li style="display: flex; gap: 15px; align-items: flex-start;">
<i class="fa-brands fa-google" style="color: #fff; font-size: 20px; margin-top: 2px;"></i>
<div>
<strong style="color: #fff; display: block; margin-bottom: 5px;">GoogleMail-Adresse erforderlich</strong>
Bitte gib unbedingt die GoogleMail (Gmail) Adresse an, welche fest mit deinem Android-Gerät und dem Google Play Store verknüpft ist. Nur so können wir dich für das Testing freischalten.
</div>
</li>
<li style="display: flex; gap: 15px; align-items: flex-start;">
<i class="fa-solid fa-calendar-check" style="color: #fff; font-size: 20px; margin-top: 2px;"></i>
<div>
<strong style="color: #fff; display: block; margin-bottom: 5px;">Mindestens 14 Tage installiert lassen</strong>
Aufgrund der Google Play Console Richtlinien müssen 20 Tester die App für mindestens 14 Tage durchgehend installiert behalten, damit wir die Freigabe für den öffentlichen Store (Production Access) erhalten. Bitte deinstalliere die App in dieser Zeit nicht!
</div>
</li>
</ul>
</div>
<!-- Submit Form -->
<div class="feedback-form-card glass">
<h3 style="margin-bottom: 20px;">Registrierung</h3>
<form id="tester-form">
<div class="form-group">
<label for="tester-email">Deine Google Play Store E-Mail Adresse</label>
<input type="email" id="tester-email" placeholder="deine.adresse@gmail.com" required>
</div>
<div class="form-group" style="display: flex; gap: 10px; align-items: flex-start;">
<input type="checkbox" id="tester-consent" required style="margin-top: 5px; accent-color: var(--accent-color);">
<label for="tester-consent" style="font-size: 13px; font-weight: normal; margin-bottom: 0;">Ich habe die Hinweise gelesen und werde die App nach der Installation für mindestens 14 Tage nicht deinstallieren.</label>
</div>
<div id="tester-success-msg" style="display: none; background: rgba(34, 197, 94, 0.2); color: #4ade80; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; border: 1px solid rgba(74, 222, 128, 0.3);">
<i class="fa-solid fa-check-circle"></i> Erfolgreich eingereicht! Nach erfolgreicher Prüfung senden wir dir eine Mail mit den Registrierungslinks.
</div>
<div id="tester-error-msg" style="display: none; background: rgba(2ef, 68, 102, 0.2); color: #ff4466; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; border: 1px solid rgba(255, 68, 102, 0.3);">
<i class="fa-solid fa-triangle-exclamation"></i> Es gab einen Fehler. Bitte versuche es später noch einmal.
</div>
<button type="submit" class="btn btn-primary btn-block" id="tester-submit-btn">Als Tester anmelden</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="main-footer">
<div class="container footer-container">
<p>&copy; 2026 Schnappix. Alle Rechte vorbehalten.</p>
<div class="footer-links">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutzerklärung</a>
</div>
</div>
</footer>
<!-- Admin Login Modal -->
<div id="admin-login-modal" class="modal-overlay">
<div class="modal-content glass">
<button class="modal-close" aria-label="Schließen">&times;</button>
<h2>Admin Login</h2>
<form id="admin-login-form">
<div class="form-group">
<label for="admin-password">Admin Passwort</label>
<input type="password" id="admin-password" placeholder="Passwort eingeben" required>
</div>
<div id="admin-login-error" style="color: #ff4466; font-size: 14px; margin-bottom: 15px; display: none;">Falsches Passwort!</div>
<button type="submit" class="btn btn-primary btn-block">Anmelden</button>
</form>
</div>
</div>
<!-- Admin Panel Control Modal (If Logged In) -->
<div id="admin-panel-modal" class="modal-overlay">
<div class="modal-content glass">
<button class="modal-close" aria-label="Schließen">&times;</button>
<h2>Admin Panel</h2>
<div class="modal-scroll-area">
<p>Sie sind als Administrator angemeldet.</p>
<div style="margin-top: 20px; display: flex; gap: 15px;">
<button id="admin-logout-btn" class="btn btn-secondary">Abmelden</button>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
+44
View File
@@ -0,0 +1,44 @@
<?php
error_reporting(0);
header('Content-Type: application/json');
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$inputJSON = file_get_contents('php://input');
$input = json_decode($inputJSON, true);
if (!$input || empty($input['email'])) {
http_response_code(400);
echo json_encode(['error' => 'Ungültige Eingabe']);
exit;
}
$email = filter_var($input['email'], FILTER_SANITIZE_EMAIL);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
http_response_code(400);
echo json_encode(['error' => 'Ungültige E-Mail Adresse']);
exit;
}
// Send notification to Ntfy
$ntfyUrl = 'https://ntfy.orfel.de/Schnappix-App-Testing';
$message = "Eine neue Anfrage für das Schnappix App Testing ist eingegangen!\n\nE-Mail: $email\n\nBitte prüfen und ggf. die Registrierungslinks via E-Mail versenden.";
$ch = curl_init($ntfyUrl);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $message);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'Title: Neue Tester-Anmeldung',
'Tags: mobile_phone,warning,bust_in_silhouette',
'Click: mailto:' . $email . '?subject=Schnappix%20App%20Testing%20-%20Einladung&body=Hallo,%0A%0Avielen%20Dank%20f%C3%BCr%20dein%20Interesse%20als%20Tester!%20Hier%20sind%20die%20Links:%0A'
]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
curl_exec($ch);
curl_close($ch);
echo json_encode(['success' => true]);
exit;
}
http_response_code(405);
echo json_encode(['error' => 'Method not allowed']);
+1
View File
@@ -159,6 +159,7 @@
<a href="upload.html" class="active-nav">Upload</a>
<a href="faq.html">FAQ</a>
<a href="feedback.html">Feedback Hub</a>
<a href="tester.html">App Testing</a>
<a href="#" id="admin-login-trigger"><i class="fa-solid fa-user-gear"></i> Admin</a>
</nav>
<button class="menu-toggle" aria-label="Menu öffnen">