kobold-ai/quiz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Restore static permissions (403 fix) & full mobile-first responsive layout

Browse Source
This commit is contained in:
kobold-ai
2026-09-21 11:46:51 +02:00
parent 58959ca881
commit eafa1f833e
2 changed files with 446 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/css/style.css
+409 -202
View File
File diff suppressed because it is too large Load Diff
app/templates/base.html
+37 -11
View File
@@ -2,7 +2,7 @@
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> <title>{% block title %}Magisches Harry-Potter-Escape-Quiz{% endblock %}</title>
<link rel="icon" href="/static/favicon.ico"> <link rel="icon" href="/static/favicon.ico">
<link rel="stylesheet" href="/static/css/style.css"> <link rel="stylesheet" href="/static/css/style.css">
@@ -11,17 +11,31 @@
<body> <body>
<audio id="bgm" src="/static/audio/music.mp3" loop preload="auto"></audio> <audio id="bgm" src="/static/audio/music.mp3" loop preload="auto"></audio>
<div class="audio-control-bar"> <header class="site-header">
<button id="audioToggle" class="audio-btn" title="Musik an/aus" onclick="toggleAudio()"> <div class="header-inner">
<span id="audioIcon">🔇</span> <a href="/" class="brand-link">
<span id="audioText">Musik: Aus</span> <span class="brand-sparkle">⚡</span>
</button> <span class="brand-title">Hogwarts Quiz</span>
<div class="nav-links"> </a>
<a href="/" class="nav-link">✨ Zum Quiz</a>
<a href="/vorschlag" class="nav-link">✍️ Frage einreichen</a> <div class="header-right">
<a href="/admin" class="nav-link">🔒 Zaubereiministerium (Admin)</a> <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> </div>
</div> </header>
<main class="container"> <main class="container">
{% block content %}{% endblock %} {% block content %}{% endblock %}
@@ -35,6 +49,8 @@
const bgm = document.getElementById("bgm"); const bgm = document.getElementById("bgm");
const audioIcon = document.getElementById("audioIcon"); const audioIcon = document.getElementById("audioIcon");
const audioText = document.getElementById("audioText"); const audioText = document.getElementById("audioText");
const navLinks = document.getElementById("navLinks");
const menuIcon = document.getElementById("menuIcon");
function toggleAudio() { function toggleAudio() {
if (bgm.paused) { if (bgm.paused) {
@@ -53,6 +69,16 @@
} }
} }
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 // Auto-resume audio if previously enabled
document.addEventListener("click", function initAudioOnInteraction() { document.addEventListener("click", function initAudioOnInteraction() {
if (localStorage.getItem("bgm_enabled") === "true" && bgm.paused) { if (localStorage.getItem("bgm_enabled") === "true" && bgm.paused) {