Design: Envelope back with distinct V-flap closure, top-left sender address only, and completely sealed interior
This commit is contained in:
kobold-ai
+165
-165
@@ -1,165 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
|
||||
<title>{% block title %}Magisches Harry-Potter-Escape-Quiz{% endblock %}</title>
|
||||
<link rel="icon" href="/static/favicon.ico">
|
||||
<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=Caveat:wght@500;700&family=Marck+Script&family=MedievalSharp&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=2.7">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<audio id="bgm" src="/static/audio/music.mp3" loop preload="auto"></audio>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="header-inner">
|
||||
<a href="/" class="brand-link">
|
||||
<span class="brand-sparkle">⚡</span>
|
||||
<span class="brand-title">Hogwarts Quiz</span>
|
||||
</a>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="lang-switch-group" role="group" aria-label="Sprachauswahl / Language">
|
||||
<button type="button" id="langDe" class="lang-btn active" onclick="setLanguage('de')" title="Deutsch">🇩🇪 DE</button>
|
||||
<button type="button" id="langEn" class="lang-btn" onclick="setLanguage('en')" title="English">🇬🇧 EN</button>
|
||||
</div>
|
||||
|
||||
<button id="audioToggle" class="audio-btn" title="Musik an/aus" onclick="toggleAudio()">
|
||||
<span id="audioIcon">🔇</span>
|
||||
<span id="audioText" class="audio-label">Musik: Aus</span>
|
||||
</button>
|
||||
|
||||
<button id="menuToggle" class="menu-toggle-btn" aria-label="Menü öffnen" onclick="toggleMobileMenu()">
|
||||
<span id="menuIcon">☰</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav id="navLinks" class="nav-links">
|
||||
<a href="/" class="nav-link" id="navQuiz" onclick="closeMobileMenu()">✨ Zum Quiz</a>
|
||||
<a href="/bestenliste" class="nav-link" id="navLeaderboard" onclick="closeMobileMenu()">🏆 Bestenliste</a>
|
||||
<a href="/vorschlag" class="nav-link" id="navSuggest" onclick="closeMobileMenu()">✍️ Frage einreichen</a>
|
||||
<a href="/admin" class="nav-link" id="navAdmin" onclick="closeMobileMenu()">🔒 Admin-Cockpit</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<p id="footerText">⚡ Magisches Hogwarts-Escape-Quiz · Betrieben mit Liebe & Zauberkraft ⚡</p>
|
||||
<div class="footer-links">
|
||||
<a href="/impressum" class="footer-link" id="footerImpressum">⚖️ Impressum</a>
|
||||
<span class="footer-sep">·</span>
|
||||
<a href="/datenschutz" class="footer-link" id="footerDatenschutz">🛡️ Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const bgm = document.getElementById("bgm");
|
||||
const audioIcon = document.getElementById("audioIcon");
|
||||
const audioText = document.getElementById("audioText");
|
||||
const navLinks = document.getElementById("navLinks");
|
||||
const menuIcon = document.getElementById("menuIcon");
|
||||
|
||||
let currentLang = localStorage.getItem("quiz_lang") || "de";
|
||||
|
||||
function setLanguage(lang) {
|
||||
currentLang = (lang === "en") ? "en" : "de";
|
||||
localStorage.setItem("quiz_lang", currentLang);
|
||||
document.documentElement.lang = currentLang;
|
||||
updateLanguageUI();
|
||||
if (typeof onLanguageChange === "function") {
|
||||
onLanguageChange(currentLang);
|
||||
}
|
||||
}
|
||||
|
||||
function updateLanguageUI() {
|
||||
const isDe = currentLang === "de";
|
||||
const deBtn = document.getElementById("langDe");
|
||||
const enBtn = document.getElementById("langEn");
|
||||
if (deBtn && enBtn) {
|
||||
deBtn.classList.toggle("active", isDe);
|
||||
enBtn.classList.toggle("active", !isDe);
|
||||
}
|
||||
|
||||
const navQuiz = document.getElementById("navQuiz");
|
||||
const navLeaderboard = document.getElementById("navLeaderboard");
|
||||
const navSuggest = document.getElementById("navSuggest");
|
||||
const navAdmin = document.getElementById("navAdmin");
|
||||
const footerText = document.getElementById("footerText");
|
||||
const footerImpressum = document.getElementById("footerImpressum");
|
||||
const footerDatenschutz = document.getElementById("footerDatenschutz");
|
||||
|
||||
if (navQuiz) navQuiz.innerText = isDe ? "✨ Zum Quiz" : "✨ To Quiz";
|
||||
if (navLeaderboard) navLeaderboard.innerText = isDe ? "🏆 Bestenliste" : "🏆 Leaderboard";
|
||||
if (navSuggest) navSuggest.innerText = isDe ? "✍️ Frage einreichen" : "✍️ Submit Question";
|
||||
if (navAdmin) navAdmin.innerText = isDe ? "🔒 Admin-Cockpit" : "🔒 Admin Cockpit";
|
||||
if (footerText) {
|
||||
footerText.innerText = isDe
|
||||
? "⚡ Magisches Hogwarts-Escape-Quiz · Betrieben mit Liebe & Zauberkraft ⚡"
|
||||
: "⚡ Magical Hogwarts Escape Quiz · Powered by Love & Wizardry ⚡";
|
||||
}
|
||||
if (footerImpressum) footerImpressum.innerText = isDe ? "⚖️ Impressum" : "⚖️ Legal Notice";
|
||||
if (footerDatenschutz) footerDatenschutz.innerText = isDe ? "🛡️ Datenschutz" : "🛡️ Privacy Policy";
|
||||
if (audioText) {
|
||||
const isPlaying = bgm && !bgm.paused;
|
||||
if (isDe) {
|
||||
audioText.innerText = isPlaying ? "Musik: An" : "Musik: Aus";
|
||||
} else {
|
||||
audioText.innerText = isPlaying ? "Music: On" : "Music: Off";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAudio() {
|
||||
const isDe = currentLang === "de";
|
||||
if (bgm.paused) {
|
||||
bgm.play().then(() => {
|
||||
audioIcon.innerText = "🔊";
|
||||
audioText.innerText = isDe ? "Musik: An" : "Music: On";
|
||||
localStorage.setItem("bgm_enabled", "true");
|
||||
}).catch(err => {
|
||||
console.log("Audio play blocked:", err);
|
||||
});
|
||||
} else {
|
||||
bgm.pause();
|
||||
audioIcon.innerText = "🔇";
|
||||
audioText.innerText = isDe ? "Musik: Aus" : "Music: Off";
|
||||
localStorage.setItem("bgm_enabled", "false");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleMobileMenu() {
|
||||
const isOpen = navLinks.classList.toggle("nav-open");
|
||||
menuIcon.innerText = isOpen ? "✕" : "☰";
|
||||
}
|
||||
|
||||
function closeMobileMenu() {
|
||||
navLinks.classList.remove("nav-open");
|
||||
menuIcon.innerText = "☰";
|
||||
}
|
||||
|
||||
// Auto-resume audio if previously enabled
|
||||
document.addEventListener("click", function initAudioOnInteraction() {
|
||||
if (localStorage.getItem("bgm_enabled") === "true" && bgm.paused) {
|
||||
bgm.play().then(() => {
|
||||
audioIcon.innerText = "🔊";
|
||||
audioText.innerText = (currentLang === "de") ? "Musik: An" : "Music: On";
|
||||
}).catch(() => {});
|
||||
}
|
||||
document.removeEventListener("click", initAudioOnInteraction);
|
||||
}, { once: true });
|
||||
|
||||
// Initialize UI on load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
updateLanguageUI();
|
||||
});
|
||||
</script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
|
||||
<title>{% block title %}Magisches Harry-Potter-Escape-Quiz{% endblock %}</title>
|
||||
<link rel="icon" href="/static/favicon.ico">
|
||||
<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=Caveat:wght@500;700&family=Marck+Script&family=MedievalSharp&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=2.8">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<audio id="bgm" src="/static/audio/music.mp3" loop preload="auto"></audio>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="header-inner">
|
||||
<a href="/" class="brand-link">
|
||||
<span class="brand-sparkle">⚡</span>
|
||||
<span class="brand-title">Hogwarts Quiz</span>
|
||||
</a>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="lang-switch-group" role="group" aria-label="Sprachauswahl / Language">
|
||||
<button type="button" id="langDe" class="lang-btn active" onclick="setLanguage('de')" title="Deutsch">🇩🇪 DE</button>
|
||||
<button type="button" id="langEn" class="lang-btn" onclick="setLanguage('en')" title="English">🇬🇧 EN</button>
|
||||
</div>
|
||||
|
||||
<button id="audioToggle" class="audio-btn" title="Musik an/aus" onclick="toggleAudio()">
|
||||
<span id="audioIcon">🔇</span>
|
||||
<span id="audioText" class="audio-label">Musik: Aus</span>
|
||||
</button>
|
||||
|
||||
<button id="menuToggle" class="menu-toggle-btn" aria-label="Menü öffnen" onclick="toggleMobileMenu()">
|
||||
<span id="menuIcon">☰</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav id="navLinks" class="nav-links">
|
||||
<a href="/" class="nav-link" id="navQuiz" onclick="closeMobileMenu()">✨ Zum Quiz</a>
|
||||
<a href="/bestenliste" class="nav-link" id="navLeaderboard" onclick="closeMobileMenu()">🏆 Bestenliste</a>
|
||||
<a href="/vorschlag" class="nav-link" id="navSuggest" onclick="closeMobileMenu()">✍️ Frage einreichen</a>
|
||||
<a href="/admin" class="nav-link" id="navAdmin" onclick="closeMobileMenu()">🔒 Admin-Cockpit</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<p id="footerText">⚡ Magisches Hogwarts-Escape-Quiz · Betrieben mit Liebe & Zauberkraft ⚡</p>
|
||||
<div class="footer-links">
|
||||
<a href="/impressum" class="footer-link" id="footerImpressum">⚖️ Impressum</a>
|
||||
<span class="footer-sep">·</span>
|
||||
<a href="/datenschutz" class="footer-link" id="footerDatenschutz">🛡️ Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const bgm = document.getElementById("bgm");
|
||||
const audioIcon = document.getElementById("audioIcon");
|
||||
const audioText = document.getElementById("audioText");
|
||||
const navLinks = document.getElementById("navLinks");
|
||||
const menuIcon = document.getElementById("menuIcon");
|
||||
|
||||
let currentLang = localStorage.getItem("quiz_lang") || "de";
|
||||
|
||||
function setLanguage(lang) {
|
||||
currentLang = (lang === "en") ? "en" : "de";
|
||||
localStorage.setItem("quiz_lang", currentLang);
|
||||
document.documentElement.lang = currentLang;
|
||||
updateLanguageUI();
|
||||
if (typeof onLanguageChange === "function") {
|
||||
onLanguageChange(currentLang);
|
||||
}
|
||||
}
|
||||
|
||||
function updateLanguageUI() {
|
||||
const isDe = currentLang === "de";
|
||||
const deBtn = document.getElementById("langDe");
|
||||
const enBtn = document.getElementById("langEn");
|
||||
if (deBtn && enBtn) {
|
||||
deBtn.classList.toggle("active", isDe);
|
||||
enBtn.classList.toggle("active", !isDe);
|
||||
}
|
||||
|
||||
const navQuiz = document.getElementById("navQuiz");
|
||||
const navLeaderboard = document.getElementById("navLeaderboard");
|
||||
const navSuggest = document.getElementById("navSuggest");
|
||||
const navAdmin = document.getElementById("navAdmin");
|
||||
const footerText = document.getElementById("footerText");
|
||||
const footerImpressum = document.getElementById("footerImpressum");
|
||||
const footerDatenschutz = document.getElementById("footerDatenschutz");
|
||||
|
||||
if (navQuiz) navQuiz.innerText = isDe ? "✨ Zum Quiz" : "✨ To Quiz";
|
||||
if (navLeaderboard) navLeaderboard.innerText = isDe ? "🏆 Bestenliste" : "🏆 Leaderboard";
|
||||
if (navSuggest) navSuggest.innerText = isDe ? "✍️ Frage einreichen" : "✍️ Submit Question";
|
||||
if (navAdmin) navAdmin.innerText = isDe ? "🔒 Admin-Cockpit" : "🔒 Admin Cockpit";
|
||||
if (footerText) {
|
||||
footerText.innerText = isDe
|
||||
? "⚡ Magisches Hogwarts-Escape-Quiz · Betrieben mit Liebe & Zauberkraft ⚡"
|
||||
: "⚡ Magical Hogwarts Escape Quiz · Powered by Love & Wizardry ⚡";
|
||||
}
|
||||
if (footerImpressum) footerImpressum.innerText = isDe ? "⚖️ Impressum" : "⚖️ Legal Notice";
|
||||
if (footerDatenschutz) footerDatenschutz.innerText = isDe ? "🛡️ Datenschutz" : "🛡️ Privacy Policy";
|
||||
if (audioText) {
|
||||
const isPlaying = bgm && !bgm.paused;
|
||||
if (isDe) {
|
||||
audioText.innerText = isPlaying ? "Musik: An" : "Musik: Aus";
|
||||
} else {
|
||||
audioText.innerText = isPlaying ? "Music: On" : "Music: Off";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAudio() {
|
||||
const isDe = currentLang === "de";
|
||||
if (bgm.paused) {
|
||||
bgm.play().then(() => {
|
||||
audioIcon.innerText = "🔊";
|
||||
audioText.innerText = isDe ? "Musik: An" : "Music: On";
|
||||
localStorage.setItem("bgm_enabled", "true");
|
||||
}).catch(err => {
|
||||
console.log("Audio play blocked:", err);
|
||||
});
|
||||
} else {
|
||||
bgm.pause();
|
||||
audioIcon.innerText = "🔇";
|
||||
audioText.innerText = isDe ? "Musik: Aus" : "Music: Off";
|
||||
localStorage.setItem("bgm_enabled", "false");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleMobileMenu() {
|
||||
const isOpen = navLinks.classList.toggle("nav-open");
|
||||
menuIcon.innerText = isOpen ? "✕" : "☰";
|
||||
}
|
||||
|
||||
function closeMobileMenu() {
|
||||
navLinks.classList.remove("nav-open");
|
||||
menuIcon.innerText = "☰";
|
||||
}
|
||||
|
||||
// Auto-resume audio if previously enabled
|
||||
document.addEventListener("click", function initAudioOnInteraction() {
|
||||
if (localStorage.getItem("bgm_enabled") === "true" && bgm.paused) {
|
||||
bgm.play().then(() => {
|
||||
audioIcon.innerText = "🔊";
|
||||
audioText.innerText = (currentLang === "de") ? "Musik: An" : "Music: On";
|
||||
}).catch(() => {});
|
||||
}
|
||||
document.removeEventListener("click", initAudioOnInteraction);
|
||||
}, { once: true });
|
||||
|
||||
// Initialize UI on load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
updateLanguageUI();
|
||||
});
|
||||
</script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user