kobold-ai
96 lines
3.6 KiB
HTML
Executable File
96 lines
3.6 KiB
HTML
Executable File
<!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="stylesheet" href="/static/css/style.css">
|
|
{% 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">
|
|
<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" onclick="closeMobileMenu()">✨ Zum Quiz</a>
|
|
<a href="/vorschlag" class="nav-link" onclick="closeMobileMenu()">✍️ Frage einreichen</a>
|
|
<a href="/admin" class="nav-link" onclick="closeMobileMenu()">🔒 Admin-Cockpit</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<p>⚡ Magisches Hogwarts-Escape-Quiz · Betrieben mit Liebe & Zauberkraft ⚡</p>
|
|
</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");
|
|
|
|
function toggleAudio() {
|
|
if (bgm.paused) {
|
|
bgm.play().then(() => {
|
|
audioIcon.innerText = "🔊";
|
|
audioText.innerText = "Musik: An";
|
|
localStorage.setItem("bgm_enabled", "true");
|
|
}).catch(err => {
|
|
console.log("Audio play blocked:", err);
|
|
});
|
|
} else {
|
|
bgm.pause();
|
|
audioIcon.innerText = "🔇";
|
|
audioText.innerText = "Musik: Aus";
|
|
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 = "Musik: An";
|
|
}).catch(() => {});
|
|
}
|
|
document.removeEventListener("click", initAudioOnInteraction);
|
|
}, { once: true });
|
|
</script>
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|