Initial commit: Harry Potter Escape Adventure on bootle.dev.waiswuaschd.de

app/templates/base.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="{{ lang or 'de' }}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+    <title>{% block title %}Hogwarts Escape Adventure{% endblock %} · bootle</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=MedievalSharp&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/escape.css?v=1.0">
+    {% block head %}{% endblock %}
+</head>
+<body>
+    <header class="site-header">
+        <div class="header-inner">
+            <a href="/" class="brand-link">
+                <span>🏰⚡</span>
+                <span class="brand-title">Hogwarts Escape</span>
+            </a>
+
+            <nav class="nav-links">
+                <a href="/" class="nav-link {% if request.url.path == '/' %}active{% endif %}">🚪 Kammern</a>
+                <a href="/broom" class="nav-link {% if request.url.path == '/broom' %}active{% endif %}">🧹 Besenflug</a>
+                <a href="/bottles" class="nav-link {% if request.url.path == '/bottles' %}active{% endif %}">🧪 Snapes Flaschen</a>
+                <a href="/sliding" class="nav-link {% if request.url.path == '/sliding' %}active{% endif %}">🧩 Schieberätsel</a>
+                <a href="https://quiz.dev.waiswuaschd.de" class="nav-link" target="_blank" rel="noopener">📜 Hogwarts-Quiz ↗</a>
+            </nav>
+
+            <div class="header-right">
+                <button type="button" id="audioToggleBtn" class="btn-control" onclick="toggleSound()">
+                    🔊 <span class="audio-lbl">Ton: An</span>
+                </button>
+            </div>
+        </div>
+    </header>
+
+    <main class="container">
+        {% block content %}{% endblock %}
+    </main>
+
+    <!-- Global Modal Backdrop -->
+    <div id="modalBackdrop" class="modal-backdrop">
+        <div class="modal-content">
+            <div id="modalIcon" class="modal-icon">🏆</div>
+            <h2 id="modalTitle" class="modal-title">Prüfung bestanden!</h2>
+            <p id="modalText" class="modal-text">Details zur Lösung...</p>
+            <button id="modalBtn" class="btn-magical">Weiter</button>
+        </div>
+    </div>
+
+    <footer class="footer">
+        <p>⚡ <strong>Hogwarts Escape Adventure</strong> · Teil des Magischen Zauberer-Kosmos ⚡</p>
+        <p style="margin-top: 0.5rem;">
+            <a href="/">Startseite</a> · 
+            <a href="/broom">Der Besenflug</a> · 
+            <a href="/bottles">Snapes Flaschenrätsel</a> · 
+            <a href="/sliding">Alchemie-Schieberätsel</a> · 
+            <a href="https://quiz.dev.waiswuaschd.de" target="_blank" rel="noopener">Hogwarts Quiz Portal</a>
+        </p>
+    </footer>
+
+    <script src="/static/js/audio.js?v=1.0"></script>
+    {% block scripts %}{% endblock %}
+</body>
+</html>