Auto-Commit: 2026-06-21 14:51:15
This commit is contained in:
+65
-197
@@ -6,11 +6,9 @@
|
||||
<title>Schnappix - Die ultimative Photobooth App</title>
|
||||
<meta name="description" content="Schnappix ist eine Tablet-optimierte Photobooth-App mit Kiosk-Modus, Direktdruck, Filtern, Stickern und anpassbaren Rahmen für dein perfektes Event.">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<!-- Google Fonts: Outfit for titles, Inter for body -->
|
||||
<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">
|
||||
<!-- FontAwesome for neon-style icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
@@ -19,13 +17,14 @@
|
||||
<header class="main-header">
|
||||
<div class="container nav-container">
|
||||
<div class="logo">
|
||||
<span class="logo-glow">Schnappix</span>
|
||||
<a href="index.html" style="text-decoration: none;"><span class="logo-glow">Schnappix</span></a>
|
||||
</div>
|
||||
<nav class="nav-links">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
<a href="#feedback">Feedback Hub</a>
|
||||
<a href="#legal-imprint" class="legal-trigger">Impressum</a>
|
||||
<a href="features.html">Features</a>
|
||||
<a href="faq.html">FAQ</a>
|
||||
<a href="feedback.html">Feedback Hub</a>
|
||||
<a href="#" id="admin-login-trigger"><i class="fa-solid fa-user-gear"></i> Admin</a>
|
||||
<a href="impressum.html">Impressum</a>
|
||||
</nav>
|
||||
<button class="menu-toggle" aria-label="Menu öffnen">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
@@ -42,28 +41,57 @@
|
||||
<h1>Erstelle unvergessliche Momente mit <span class="text-gradient">Schnappix</span></h1>
|
||||
<p class="hero-lead">Die professionelle, Tablet-optimierte Photobooth-App für dein Event. Kiosk-Modus, Direktdruck, kreative Sticker und maßgeschneiderte Rahmen vereint in einem atemberaubenden Synthwave-Design.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#features" class="btn btn-primary">Features entdecken</a>
|
||||
<a href="#feedback" class="btn btn-secondary">Feedback abgeben</a>
|
||||
<a href="features.html" class="btn btn-primary">Features entdecken</a>
|
||||
<a href="feedback.html" class="btn btn-secondary">Feedback abgeben</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="mockup-container">
|
||||
<div class="tablet-mockup">
|
||||
<div class="tablet-mockup" id="demo-tablet">
|
||||
<div class="tablet-screen">
|
||||
<div class="app-mockup-content">
|
||||
<div class="mockup-flash-overlay" id="demo-flash"></div>
|
||||
<div class="app-mockup-content" id="demo-screen-welcome">
|
||||
<div class="app-header">
|
||||
<i class="fa-solid fa-camera-retro app-logo-icon"></i>
|
||||
<span class="app-title">Schnappix</span>
|
||||
</div>
|
||||
<div class="app-body">
|
||||
<div class="pulse-ring"></div>
|
||||
<div class="app-circle-btn">
|
||||
<div class="app-circle-btn" id="demo-capture-btn" title="Foto machen!">
|
||||
<i class="fa-solid fa-camera"></i>
|
||||
</div>
|
||||
<p class="app-welcome">Zeit für ein Erinnerungsfoto!</p>
|
||||
<p class="app-footer-text">Display tippen! • Lächeln! • Foto schnappen!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-mockup-content" id="demo-screen-countdown" style="display: none;">
|
||||
<div class="app-header">
|
||||
<i class="fa-solid fa-camera-retro app-logo-icon"></i>
|
||||
<span class="app-title">Schnappix</span>
|
||||
</div>
|
||||
<div class="app-body">
|
||||
<div class="demo-countdown-number" id="demo-timer">3</div>
|
||||
<p class="app-welcome">Lächeln!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-mockup-content" id="demo-screen-preview" style="display: none;">
|
||||
<div class="app-header">
|
||||
<i class="fa-solid fa-camera-retro app-logo-icon"></i>
|
||||
<span class="app-title">Dein Foto!</span>
|
||||
</div>
|
||||
<div class="app-body demo-photo-bg">
|
||||
<div class="demo-collage-frame">
|
||||
<div class="demo-photo-grid">
|
||||
<div class="demo-photo-item photo-1">📸 Smile!</div>
|
||||
<div class="demo-photo-item photo-2">✨ Party!</div>
|
||||
</div>
|
||||
<div class="demo-frame-footer">Schnappix Event 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; gap: 8px; margin-bottom: 5px;">
|
||||
<button class="btn btn-secondary" id="demo-btn-reset" style="padding: 6px 12px; font-size: 11px; border-radius: 6px;"><i class="fa-solid fa-rotate-left"></i> Neues Foto aufnehmen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -71,208 +99,48 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="features-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Geniale Features für <span class="text-gradient">dein Event</span></h2>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon"><i class="fa-solid fa-lock"></i></div>
|
||||
<h3>Echter Kiosk-Modus</h3>
|
||||
<p>Dank nativer Kotlin-Module sperrt die App das Tablet bombensicher für Gäste. Kein Verlassen der App ohne Admin-Code möglich.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon"><i class="fa-solid fa-print"></i></div>
|
||||
<h3>Direkter Netzwerkdruck</h3>
|
||||
<p>Integrierter IPP-Drucker-Support (z.B. Canon Selphy). Fotos werden direkt aus dem Vorschaubildschirm gedruckt.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon"><i class="fa-solid fa-wand-magic-sparkles"></i></div>
|
||||
<h3>Sticker & Emojis</h3>
|
||||
<p>Interaktiver Editor wie bei Social Media. Emojis, Datumsanzeige und Eventname frei verschieben, drehen und skalieren.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon"><i class="fa-solid fa-images"></i></div>
|
||||
<h3>Serienbild & Collagen</h3>
|
||||
<p>Nimm 1-5 Fotos hintereinander auf. Die App generiert automatisch eine wunderschöne Collage zum Drucken und Speichern.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon"><i class="fa-solid fa-image"></i></div>
|
||||
<h3>Individuelle Rahmen</h3>
|
||||
<p>Blende maßgeschneiderte, transparente PNG-Rahmen über die Aufnahmen. Perfekt für Geburtstage, Hochzeiten oder Firmenfeiern.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon"><i class="fa-solid fa-plug"></i></div>
|
||||
<h3>USB-Kamera Support</h3>
|
||||
<p>Nutze entweder die Frontkamera deines Tablets oder schließe eine externe USB-Kamera an für überragende Bildqualität.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section id="faq" class="faq-section">
|
||||
<div class="container faq-container">
|
||||
<h2 class="section-title">Häufig gestellte <span class="text-gradient">Fragen</span></h2>
|
||||
|
||||
<div class="accordion">
|
||||
<div class="accordion-item">
|
||||
<button class="accordion-header">
|
||||
<span>Wie aktiviere ich den Kiosk-Modus auf dem Tablet?</span>
|
||||
<i class="fa-solid fa-chevron-down"></i>
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<p>Damit der Kiosk-Modus (LockTask) ohne Bestätigungsdialoge funktioniert, muss die App als <strong>Device Owner</strong> festgelegt werden. Führe dazu folgenden ADB-Befehl aus:</p>
|
||||
<code>adb shell dpm set-device-owner de.orfel.schnappix/de.orfel.schnappix.KioskDeviceAdminReceiver</code>
|
||||
<p>Danach kannst du den Kiosk-Modus einfach im passwortgeschützten Admin-Bereich ein- und ausschalten.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<button class="accordion-header">
|
||||
<span>Wie füge ich eigene Fotorahmen hinzu?</span>
|
||||
<i class="fa-solid fa-chevron-down"></i>
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<p>Erstelle ein transparentes PNG im Format <strong>1500 x 1000 px</strong> (3:2 Querformat, max. 500 KB) und lege es im Ordner <code>assets/frames/</code> als <code>frame_name.png</code> ab. Trage das Template anschließend in <code>src/data/frames.ts</code> ein und führe einen neuen Build aus.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<button class="accordion-header">
|
||||
<span>Welche Drucker werden unterstützt?</span>
|
||||
<i class="fa-solid fa-chevron-down"></i>
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<p>Es werden alle Drucker unterstützt, die das <strong>IPP (Internet Printing Protocol)</strong> im lokalen Netzwerk unterstützen. Beliebte Fotodrucker wie der Canon CP1300 lassen sich direkt über ihre lokale IP-Adresse ansteuern.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<button class="accordion-header">
|
||||
<span>Wo werden die Fotos gespeichert?</span>
|
||||
<i class="fa-solid fa-chevron-down"></i>
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<p>Schnappix nutzt die moderne Android MediaStore API und speichert Collagen sowie Originale direkt in der Galerie deines Tablets unter den Ordnern:</p>
|
||||
<ul>
|
||||
<li><code>Schnappix - <EventName> - Collagen</code></li>
|
||||
<li><code>Schnappix - <EventName> - Originale</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Feedback Hub Section -->
|
||||
<section id="feedback" class="feedback-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Feedback & <span class="text-gradient">Ideen</span></h2>
|
||||
<p class="section-subtitle">Deine Meinung hilft uns, Schnappix noch besser zu machen. Hinterlasse Feedback oder stimme für Ideen ab!</p>
|
||||
|
||||
<div class="feedback-grid">
|
||||
<!-- Submit Form -->
|
||||
<div class="feedback-form-card glass">
|
||||
<h3>Neues Feedback einreichen</h3>
|
||||
<form id="feedback-form">
|
||||
<div class="form-group">
|
||||
<label for="fb-author">Dein Name</label>
|
||||
<input type="text" id="fb-author" placeholder="z.B. Alex" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="fb-type">Kategorie</label>
|
||||
<select id="fb-type">
|
||||
<option value="feature">✨ Wunsch-Feature</option>
|
||||
<option value="bug">🐛 Fehler melden</option>
|
||||
<option value="love">💖 Lob / Allgemein</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="fb-title">Titel</label>
|
||||
<input type="text" id="fb-title" placeholder="Kurzer, prägnanter Titel" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="fb-text">Beschreibung</label>
|
||||
<textarea id="fb-text" rows="4" placeholder="Beschreibe dein Feedback oder deine Idee..." required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-block">Absenden</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Feedback List -->
|
||||
<div class="feedback-list-container">
|
||||
<div class="list-header">
|
||||
<h3>Community Feedback</h3>
|
||||
<div class="list-filters">
|
||||
<button class="filter-btn active" data-filter="all">Alle</button>
|
||||
<button class="filter-btn" data-filter="feature">Features</button>
|
||||
<button class="filter-btn" data-filter="bug">Bugs</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="feedback-list" class="feedback-list">
|
||||
<!-- Dynamic items will load here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer & Legal triggers -->
|
||||
<footer class="main-footer">
|
||||
<div class="container footer-container">
|
||||
<p>© 2026 Schnappix. Alle Rechte vorbehalten.</p>
|
||||
<div class="footer-links">
|
||||
<a href="#legal-imprint" class="legal-trigger">Impressum</a>
|
||||
<a href="#legal-privacy" class="legal-trigger">Datenschutzerklärung</a>
|
||||
<a href="impressum.html">Impressum</a>
|
||||
<a href="datenschutz.html">Datenschutzerklärung</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Modals for German Legal Requirements -->
|
||||
<div id="legal-imprint" class="modal-overlay">
|
||||
<!-- 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>Impressum</h2>
|
||||
<div class="modal-scroll-area">
|
||||
<h3>Angaben gemäß § 5 TMG</h3>
|
||||
<p>Jannik [Nachname]<br>
|
||||
[Straße und Hausnummer]<br>
|
||||
[PLZ und Ort]</p>
|
||||
|
||||
<h3>Kontakt</h3>
|
||||
<p>E-Mail: info@schnappix.de<br>
|
||||
Telefon: [Telefonnummer - optional]</p>
|
||||
|
||||
<h3>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h3>
|
||||
<p>Jannik [Nachname]<br>
|
||||
[Adresse wie oben]</p>
|
||||
|
||||
<h3>Streitschlichtung</h3>
|
||||
<p>Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: <a href="https://ec.europa.eu/consumers/odr" target="_blank" rel="noopener">https://ec.europa.eu/consumers/odr</a>.<br>
|
||||
Unsere E-Mail-Adresse finden Sie oben im Impressum. Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div id="legal-privacy" class="modal-overlay">
|
||||
<!-- 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>Datenschutzerklärung</h2>
|
||||
<h2>Admin Panel</h2>
|
||||
<div class="modal-scroll-area">
|
||||
<h3>1. Datenschutz auf einen Blick</h3>
|
||||
<h4>Allgemeine Hinweise</h4>
|
||||
<p>Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.</p>
|
||||
|
||||
<h3>2. Datenerfassung auf unserer Website</h3>
|
||||
<h4>Cookies & Local Storage</h4>
|
||||
<p>Diese Webseite nutzt den lokalen Speicher (Local Storage) Ihres Browsers, um die von Ihnen geschriebenen Feedbacks sowie Ihre Stimmen (Upvotes) zu speichern. Dies geschieht ausschließlich auf Ihrem Endgerät und wird nicht an externe Server übertragen, es sei denn, Sie senden explizit ein Feedback ab.</p>
|
||||
|
||||
<h4>Server-Logfiles</h4>
|
||||
<p>Der Provider der Seiten erhebt und speichert automatisch Informationen in sogenannten Server-Logfiles, die Ihr Browser automatisch an uns übermittelt. Dies sind Browsertyp, Betriebssystem, Referrer URL, Hostname des zugreifenden Rechners und Uhrzeit der Serveranfrage. Diese Daten sind nicht bestimmten Personen zuzuordnen.</p>
|
||||
|
||||
<h3>3. Feedback Hub</h3>
|
||||
<p>Wenn Sie den Feedback Hub nutzen, werden Ihre Eingaben (Name, Titel, Text, Kategorie) gespeichert, um die Funktionalität der Feedback-Plattform bereitzustellen. Bitte geben Sie keine sensiblen personenbezogenen Daten im Freitextfeld an.</p>
|
||||
<p>Sie sind als Administrator angemeldet. Sie können nun Einträge im Feedback Hub löschen.</p>
|
||||
<div style="margin-top: 20px; display: flex; gap: 15px;">
|
||||
<button id="admin-logout-btn" class="btn btn-secondary">Abmelden</button>
|
||||
<button id="admin-export-btn" class="btn btn-primary">Einträge-Code exportieren</button>
|
||||
</div>
|
||||
<div id="export-container" style="display: none; margin-top: 20px;">
|
||||
<label style="color: var(--text-muted); font-size: 13px; display: block; margin-bottom: 8px;">Kopiere diesen Code und ersetze damit den <code>defaultFeedback</code> Block in <code>app.js</code>, um Änderungen dauerhaft für alle Besucher zu speichern:</label>
|
||||
<textarea id="export-textarea" rows="6" readonly style="width: 100%; font-family: monospace; font-size: 12px; background: rgba(5,5,16,0.8); border: 1px solid var(--border-color); color: var(--accent-color); padding: 10px; border-radius: 8px;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user