Auto-Commit: 2026-06-21 14:51:15
This commit is contained in:
@@ -14,6 +14,54 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
}
|
||||
|
||||
// --- Tablet Mockup Interactive Demo ---
|
||||
const captureBtn = document.getElementById('demo-capture-btn');
|
||||
const screenWelcome = document.getElementById('demo-screen-welcome');
|
||||
const screenCountdown = document.getElementById('demo-screen-countdown');
|
||||
const screenPreview = document.getElementById('demo-screen-preview');
|
||||
const timerDisplay = document.getElementById('demo-timer');
|
||||
const flashOverlay = document.getElementById('demo-flash');
|
||||
|
||||
const btnPrint = document.getElementById('demo-btn-print');
|
||||
const btnReset = document.getElementById('demo-btn-reset');
|
||||
|
||||
if (captureBtn && screenWelcome && screenCountdown && screenPreview && timerDisplay && flashOverlay) {
|
||||
captureBtn.addEventListener('click', () => {
|
||||
// Step 1: Switch screen to countdown
|
||||
screenWelcome.style.display = 'none';
|
||||
screenCountdown.style.display = 'flex';
|
||||
|
||||
// Step 2: 3-second countdown countdown
|
||||
let timeLeft = 3;
|
||||
timerDisplay.textContent = timeLeft;
|
||||
|
||||
const timerInterval = setInterval(() => {
|
||||
timeLeft--;
|
||||
if (timeLeft > 0) {
|
||||
timerDisplay.textContent = timeLeft;
|
||||
} else {
|
||||
clearInterval(timerInterval);
|
||||
// Step 3: Trigger Camera Flash overlay
|
||||
flashOverlay.classList.add('flash-active');
|
||||
|
||||
setTimeout(() => {
|
||||
flashOverlay.classList.remove('flash-active');
|
||||
// Step 4: Transition to captured photo preview screen
|
||||
screenCountdown.style.display = 'none';
|
||||
screenPreview.style.display = 'flex';
|
||||
}, 400);
|
||||
}
|
||||
}, 800);
|
||||
});
|
||||
}
|
||||
|
||||
if (btnReset && screenWelcome && screenPreview) {
|
||||
btnReset.addEventListener('click', () => {
|
||||
screenPreview.style.display = 'none';
|
||||
screenWelcome.style.display = 'flex';
|
||||
});
|
||||
}
|
||||
|
||||
// --- Accordion FAQ ---
|
||||
const accordionHeaders = document.querySelectorAll('.accordion-header');
|
||||
|
||||
@@ -91,6 +139,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
localStorage.setItem('schnappix_upvoted_ids', JSON.stringify(upvotedIds));
|
||||
};
|
||||
|
||||
// Admin State
|
||||
let isAdmin = sessionStorage.getItem('schnappix_is_admin') === 'true';
|
||||
|
||||
const renderFeedback = (filter = 'all') => {
|
||||
if (!feedbackList) return;
|
||||
feedbackList.innerHTML = '';
|
||||
@@ -115,11 +166,17 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
categoryLabel = 'Lob';
|
||||
}
|
||||
|
||||
// Show delete button if user is admin
|
||||
const deleteBtnHtml = isAdmin
|
||||
? `<button class="fb-admin-delete-btn" data-id="${item.id}" title="Eintrag löschen"><i class="fa-solid fa-trash"></i> Löschen</button>`
|
||||
: '';
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="fb-card-content">
|
||||
<div class="fb-meta">
|
||||
<span class="fb-tag ${item.type}">${badgeIcon} ${categoryLabel}</span>
|
||||
<span class="fb-author">von ${escapeHtml(item.author)}</span>
|
||||
${deleteBtnHtml}
|
||||
</div>
|
||||
<h4>${escapeHtml(item.title)}</h4>
|
||||
<p>${escapeHtml(item.text)}</p>
|
||||
@@ -136,6 +193,22 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
|
||||
setupUpvoteButtons();
|
||||
setupAdminDeleteButtons();
|
||||
};
|
||||
|
||||
const setupAdminDeleteButtons = () => {
|
||||
if (!isAdmin) return;
|
||||
const deleteButtons = document.querySelectorAll('.fb-admin-delete-btn');
|
||||
deleteButtons.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const id = btn.getAttribute('data-id');
|
||||
if (confirm('Möchten Sie diesen Eintrag wirklich permanent löschen?')) {
|
||||
feedbackData = feedbackData.filter(item => item.id !== id);
|
||||
saveToLocalStorage();
|
||||
renderFeedback(getActiveFilter());
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const escapeHtml = (str) => {
|
||||
@@ -224,25 +297,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const modals = document.querySelectorAll('.modal-overlay');
|
||||
const closeButtons = document.querySelectorAll('.modal-close');
|
||||
|
||||
modalTriggers.forEach(trigger => {
|
||||
trigger.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const targetId = trigger.getAttribute('href').substring(1);
|
||||
const targetModal = document.getElementById(targetId);
|
||||
if (targetModal) {
|
||||
targetModal.classList.add('open');
|
||||
document.body.style.overflow = 'hidden'; // Stop scrolling background
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// --- Modal close helpers for admin modals ---
|
||||
const closeModal = (modal) => {
|
||||
modal.classList.remove('open');
|
||||
// Only restore scroll if no other modals are open
|
||||
const anyOpen = Array.from(modals).some(m => m.classList.contains('open'));
|
||||
if (!anyOpen) {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
|
||||
closeButtons.forEach(btn => {
|
||||
@@ -253,7 +311,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
|
||||
modals.forEach(modal => {
|
||||
// Close modal when clicking outside of the content block
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) {
|
||||
closeModal(modal);
|
||||
@@ -261,7 +318,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
});
|
||||
|
||||
// Close modal on Escape key press
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
modals.forEach(modal => {
|
||||
@@ -270,6 +326,100 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
});
|
||||
|
||||
// --- Admin Panel Modals & Operations ---
|
||||
const adminTrigger = document.getElementById('admin-login-trigger');
|
||||
const adminLoginModal = document.getElementById('admin-login-modal');
|
||||
const adminPanelModal = document.getElementById('admin-panel-modal');
|
||||
const adminLoginForm = document.getElementById('admin-login-form');
|
||||
const adminPasswordInput = document.getElementById('admin-password');
|
||||
const adminLoginError = document.getElementById('admin-login-error');
|
||||
|
||||
const adminLogoutBtn = document.getElementById('admin-logout-btn');
|
||||
const adminExportBtn = document.getElementById('admin-export-btn');
|
||||
const exportContainer = document.getElementById('export-container');
|
||||
const exportTextarea = document.getElementById('export-textarea');
|
||||
|
||||
if (adminTrigger) {
|
||||
adminTrigger.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (isAdmin) {
|
||||
adminPanelModal.classList.add('open');
|
||||
} else {
|
||||
adminLoginModal.classList.add('open');
|
||||
adminPasswordInput.focus();
|
||||
}
|
||||
document.body.style.overflow = 'hidden';
|
||||
});
|
||||
}
|
||||
|
||||
if (adminLoginForm) {
|
||||
adminLoginForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const password = adminPasswordInput.value;
|
||||
// Admin password matching the default app settings: "1234"
|
||||
if (password === '1234') {
|
||||
isAdmin = true;
|
||||
sessionStorage.setItem('schnappix_is_admin', 'true');
|
||||
adminPasswordInput.value = '';
|
||||
adminLoginError.style.display = 'none';
|
||||
|
||||
// Switch Modals
|
||||
adminLoginModal.classList.remove('open');
|
||||
adminPanelModal.classList.add('open');
|
||||
|
||||
// Re-render to show trash cans
|
||||
renderFeedback(getActiveFilter());
|
||||
} else {
|
||||
adminLoginError.style.display = 'block';
|
||||
adminPasswordInput.value = '';
|
||||
adminPasswordInput.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (adminLogoutBtn) {
|
||||
adminLogoutBtn.addEventListener('click', () => {
|
||||
isAdmin = false;
|
||||
sessionStorage.removeItem('schnappix_is_admin');
|
||||
adminPanelModal.classList.remove('open');
|
||||
document.body.style.overflow = '';
|
||||
|
||||
// Hide export code if visible
|
||||
if (exportContainer) exportContainer.style.display = 'none';
|
||||
|
||||
// Re-render to hide trash cans
|
||||
renderFeedback(getActiveFilter());
|
||||
});
|
||||
}
|
||||
|
||||
if (adminExportBtn && exportContainer && exportTextarea) {
|
||||
adminExportBtn.addEventListener('click', () => {
|
||||
// Strip out own custom elements or internal helper flags if necessary
|
||||
const cleanFeedback = feedbackData.map(item => ({
|
||||
id: item.id,
|
||||
author: item.author,
|
||||
type: item.type,
|
||||
title: item.title,
|
||||
text: item.text,
|
||||
upvotes: item.upvotes,
|
||||
voted: false
|
||||
}));
|
||||
|
||||
exportTextarea.value = JSON.stringify(cleanFeedback, null, 4);
|
||||
exportContainer.style.display = 'block';
|
||||
exportTextarea.select();
|
||||
});
|
||||
}
|
||||
|
||||
// Modal Close overrides to reset error states
|
||||
const allCloseButtons = document.querySelectorAll('.modal-close');
|
||||
allCloseButtons.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
if (adminLoginError) adminLoginError.style.display = 'none';
|
||||
if (exportContainer) exportContainer.style.display = 'none';
|
||||
});
|
||||
});
|
||||
|
||||
// Initial render
|
||||
renderFeedback();
|
||||
});
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Schnappix - Datenschutzerklärung</title>
|
||||
<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="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>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content Section -->
|
||||
<section style="padding: 160px 0 100px;">
|
||||
<div class="container" style="max-width: 800px;">
|
||||
<div class="glass" style="padding: 40px; border-radius: 20px;">
|
||||
<h1 class="text-gradient" style="font-family: var(--font-titles); font-size: 36px; margin-bottom: 24px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px;">Datenschutzerklärung</h1>
|
||||
|
||||
<div class="modal-scroll-area" style="overflow-y: visible; max-height: none;">
|
||||
<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>
|
||||
</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 Modals -->
|
||||
<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>
|
||||
|
||||
<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. 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;">
|
||||
<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>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Schnappix - Häufig gestellte Fragen (FAQ)</title>
|
||||
<meta name="description" content="Antworten auf Fragen zum Kiosk-Modus, IPP-Drucker-Einrichtung, Fotorahmen-Konfiguration und Foto-Speicherung.">
|
||||
<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="faq.html" class="active-nav">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>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Page Title -->
|
||||
<div style="padding: 140px 0 20px;">
|
||||
<div class="container">
|
||||
<h1 class="section-title" style="margin-bottom: 20px;">Häufig gestellte <span class="text-gradient">Fragen</span></h1>
|
||||
<p style="text-align: center; color: var(--text-muted); max-width: 600px; margin: 0 auto 40px;">Alles Wissenswerte zur Einrichtung, Hardware-Kompatibilität und Anpassung der Photobooth App.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ Accordion Section -->
|
||||
<section class="faq-section" style="padding-top: 20px;">
|
||||
<div class="container faq-container">
|
||||
<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>
|
||||
|
||||
<!-- 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 Modals -->
|
||||
<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>
|
||||
|
||||
<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. 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;">
|
||||
<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>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+127
@@ -0,0 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Schnappix - Features & Funktionen</title>
|
||||
<meta name="description" content="Alle Details über den Kiosk-Modus, USB-Kamera Support, IPP-Drucker-Support und den Sticker-Editor in Schnappix.">
|
||||
<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" class="active-nav">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>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Page Title -->
|
||||
<div style="padding: 140px 0 20px;">
|
||||
<div class="container">
|
||||
<h1 class="section-title" style="margin-bottom: 20px;">Unsere <span class="text-gradient">Features</span></h1>
|
||||
<p style="text-align: center; color: var(--text-muted); max-width: 600px; margin: 0 auto 40px;">Entdecke die geballte Funktionsvielfalt, die Schnappix zur optimalen Fotobox-App macht.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Features Content Section -->
|
||||
<section class="features-section" style="border-top: none; padding-top: 20px;">
|
||||
<div class="container">
|
||||
<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>
|
||||
|
||||
<!-- 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 Modals -->
|
||||
<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>
|
||||
|
||||
<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. 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;">
|
||||
<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>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+139
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Schnappix - Feedback Hub</title>
|
||||
<meta name="description" content="Hinterlasse Feedback, melde Fehler oder stimme über neue Features für Schnappix ab.">
|
||||
<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="faq.html">FAQ</a>
|
||||
<a href="feedback.html" class="active-nav">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>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Page Title -->
|
||||
<div style="padding: 140px 0 20px;">
|
||||
<div class="container">
|
||||
<h1 class="section-title" style="margin-bottom: 20px;">Feedback & <span class="text-gradient">Ideen</span></h1>
|
||||
<p style="text-align: center; color: var(--text-muted); max-width: 600px; margin: 0 auto 40px;">Deine Meinung hilft uns, Schnappix noch besser zu machen. Hinterlasse Feedback oder stimme für Ideen ab!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feedback Hub Content Section -->
|
||||
<section class="feedback-section" style="border-top: none; padding-top: 20px;">
|
||||
<div class="container">
|
||||
<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 -->
|
||||
<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 Modals -->
|
||||
<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>
|
||||
|
||||
<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. 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;">
|
||||
<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>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+106
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Schnappix - Impressum</title>
|
||||
<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="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" class="active-nav">Impressum</a>
|
||||
</nav>
|
||||
<button class="menu-toggle" aria-label="Menu öffnen">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content Section -->
|
||||
<section style="padding: 160px 0 100px;">
|
||||
<div class="container" style="max-width: 800px;">
|
||||
<div class="glass" style="padding: 40px; border-radius: 20px;">
|
||||
<h1 class="text-gradient" style="font-family: var(--font-titles); font-size: 36px; margin-bottom: 24px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px;">Impressum</h1>
|
||||
|
||||
<h3 style="margin-top: 20px; font-size: 18px;">Angaben gemäß § 5 TMG</h3>
|
||||
<p style="color: var(--text-muted); margin-bottom: 15px;">Jannik [Nachname]<br>
|
||||
[Straße und Hausnummer]<br>
|
||||
[PLZ und Ort]</p>
|
||||
|
||||
<h3 style="margin-top: 20px; font-size: 18px;">Kontakt</h3>
|
||||
<p style="color: var(--text-muted); margin-bottom: 15px;">E-Mail: info@schnappix.de<br>
|
||||
Telefon: [Telefonnummer - optional]</p>
|
||||
|
||||
<h3 style="margin-top: 20px; font-size: 18px;">Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h3>
|
||||
<p style="color: var(--text-muted); margin-bottom: 15px;">Jannik [Nachname]<br>
|
||||
[Adresse wie oben]</p>
|
||||
|
||||
<h3 style="margin-top: 20px; font-size: 18px;">Streitschlichtung</h3>
|
||||
<p style="color: var(--text-muted); margin-bottom: 15px;">Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: <a href="https://ec.europa.eu/consumers/odr" target="_blank" rel="noopener" style="color: var(--accent-color);">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>
|
||||
</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 Modals -->
|
||||
<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>
|
||||
|
||||
<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. 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;">
|
||||
<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>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+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>
|
||||
|
||||
@@ -1,11 +1,51 @@
|
||||
/*
|
||||
SCHNAPPIX Synthwave Neon CSS Stylesheet
|
||||
Matching THEME from App:
|
||||
- Deep background: #050510 (with linear gradients)
|
||||
- Magenta glow (primary): #ff2bd6
|
||||
- Cyan glow (accent): #28dfff
|
||||
- Mid Purple: #a033ff
|
||||
*/
|
||||
/* View Transition API configurations for cross-page animations */
|
||||
@view-transition {
|
||||
navigation: auto;
|
||||
}
|
||||
|
||||
/* Page Transition Animations */
|
||||
::view-transition-old(root) {
|
||||
animation: 280ms cubic-bezier(0.4, 0, 0.2, 1) both fade-out,
|
||||
280ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
::view-transition-new(root) {
|
||||
animation: 280ms cubic-bezier(0.4, 0, 0.2, 1) both fade-in,
|
||||
280ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
@keyframes slide-to-left {
|
||||
to {
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-from-right {
|
||||
from {
|
||||
transform: translateX(30px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Deactivate animations if user prefers reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
::view-transition-group(*),
|
||||
::view-transition-old(*),
|
||||
::view-transition-new(*) {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-color: #050510;
|
||||
@@ -98,7 +138,8 @@ body {
|
||||
transition: var(--transition-smooth);
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
.nav-links a:hover,
|
||||
.nav-links a.active-nav {
|
||||
color: var(--accent-color);
|
||||
text-shadow: 0 0 8px rgba(40, 223, 255, 0.5);
|
||||
}
|
||||
@@ -305,6 +346,103 @@ body {
|
||||
transition: var(--transition-smooth);
|
||||
}
|
||||
|
||||
.mockup-flash-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
opacity: 0;
|
||||
z-index: 99;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mockup-flash-overlay.flash-active {
|
||||
animation: cameraFlashEffect 0.8s ease-out;
|
||||
}
|
||||
|
||||
.demo-countdown-number {
|
||||
font-size: 72px;
|
||||
font-family: var(--font-titles);
|
||||
font-weight: 800;
|
||||
color: var(--primary-color);
|
||||
text-shadow: 0 0 20px rgba(255, 43, 214, 0.6);
|
||||
animation: countdownPulse 1s infinite alternate;
|
||||
}
|
||||
|
||||
.demo-photo-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.demo-collage-frame {
|
||||
background: #ffffff;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
|
||||
width: 160px;
|
||||
transform: rotate(-3deg);
|
||||
animation: collageIntro 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.demo-photo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.demo-photo-item {
|
||||
background: #111122;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.demo-photo-item.photo-1 {
|
||||
background: linear-gradient(45deg, #1f1235, #351a4a);
|
||||
border: 1px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.demo-photo-item.photo-2 {
|
||||
background: linear-gradient(45deg, #0d1f2d, #1b3644);
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
.demo-frame-footer {
|
||||
text-align: center;
|
||||
font-size: 8px;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
margin-top: 6px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
@keyframes cameraFlashEffect {
|
||||
0% { opacity: 1; }
|
||||
30% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes countdownPulse {
|
||||
0% { transform: scale(0.9); }
|
||||
100% { transform: scale(1.1); }
|
||||
}
|
||||
|
||||
@keyframes collageIntro {
|
||||
0% { transform: scale(0.5) rotate(-20deg); opacity: 0; }
|
||||
100% { transform: scale(1) rotate(-3deg); opacity: 1; }
|
||||
}
|
||||
|
||||
.app-circle-btn:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 25px rgba(160, 51, 255, 0.9);
|
||||
@@ -637,6 +775,21 @@ body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fb-admin-delete-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin-left: 15px;
|
||||
transition: var(--transition-smooth);
|
||||
}
|
||||
|
||||
.fb-admin-delete-btn:hover {
|
||||
color: var(--error-color, #ff4466);
|
||||
text-shadow: 0 0 8px rgba(255, 68, 102, 0.4);
|
||||
}
|
||||
|
||||
.fb-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user