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">
<head>
<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>
<link rel="icon" href="/static/favicon.ico">
<link rel="stylesheet" href="/static/css/style.css">
@@ -11,17 +11,31 @@
<body>
<audio id="bgm" src="/static/audio/music.mp3" loop preload="auto"></audio>
<div class="audio-control-bar">
<button id="audioToggle" class="audio-btn" title="Musik an/aus" onclick="toggleAudio()">
<span id="audioIcon">🔇</span>
<span id="audioText">Musik: Aus</span>
</button>
<div class="nav-links">
<a href="/" class="nav-link">✨ Zum Quiz</a>
<a href="/vorschlag" class="nav-link">✍️ Frage einreichen</a>
<a href="/admin" class="nav-link">🔒 Zaubereiministerium (Admin)</a>
<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>
</div>
</header>
<main class="container">
{% block content %}{% endblock %}
@@ -35,6 +49,8 @@
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) {
@@ -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
document.addEventListener("click", function initAudioOnInteraction() {
if (localStorage.getItem("bgm_enabled") === "true" && bgm.paused) {