142 lines
8.4 KiB
HTML
142 lines
8.4 KiB
HTML
<!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>© 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">×</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">×</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>
|