Feature: Integrate all four Hogwarts mini-games (Duel, Potion Brewing, Cryptex Lock, Cornish Pixies)

2026-09-22 19:43:12 +02:00
parent 0e20549a44
commit 2ce944d1cd
13 changed files with 1662 additions and 13 deletions
@@ -0,0 +1,99 @@
+{% extends "base.html" %}
+
+{% block title %}Kammer IV: Das Runen-Drehschloss der Gründer · Hogwarts Escape{% endblock %}
+
+{% block content %}
+<div class="parchment-scroll">
+    <h1 class="parchment-title">🔐 Kammer IV: Das Runen-Drehschloss 🔐</h1>
+    <p class="riddle-poem" style="font-size: 1.25rem;">
+        "Vor dir ragt ein gewaltiges Tresortor mit einem massiven Messing-Zylinderschloss.<br>
+        In die Steinwand über dem Schloss ist ein altes Gründer-Rätsel gemeißelt:<br><br>
+        <em>»Vier Siegel schloss der Gründer Rat,<br>
+        bevor man je die Kammer betrat.<br>
+        Der <strong>Löwe</strong> wacht am Himmelstor,<br>
+        wo nachts die <strong>Silbersichel</strong> glimmt,<br>
+        das ew’ge <strong>Feuer</strong> niemals stirbt,<br>
+        bis der <strong>Zauberstab</strong> die Siegel bricht.«</em>"
+    </p>
+</div>
+
+<div class="cryptex-container">
+    <!-- Status / Feedback Toast -->
+    <div id="cryptexFeedback" style="display: none; padding: 0.6rem 1rem; border-radius: 8px; font-weight: bold; text-align: center; width: 100%;">
+    </div>
+
+    <!-- The 4-Dial Cryptex Box -->
+    <div class="cryptex-box">
+        <div class="cryptex-frame-line"></div>
+        <div class="cryptex-rings-row">
+            <!-- Dial 1 -->
+            <div class="cryptex-dial" id="dialCol0">
+                <button type="button" class="dial-step-btn" onclick="stepDial(0, -1)" title="Vorheriges Symbol">▲</button>
+                <div class="dial-cylinder" onclick="stepDial(0, 1)">
+                    <div class="dial-symbol" id="sym0">🦁</div>
+                    <div class="dial-label" id="lbl0">Löwe</div>
+                </div>
+                <button type="button" class="dial-step-btn" onclick="stepDial(0, 1)" title="Nächstes Symbol">▼</button>
+            </div>
+
+            <!-- Dial 2 -->
+            <div class="cryptex-dial" id="dialCol1">
+                <button type="button" class="dial-step-btn" onclick="stepDial(1, -1)" title="Vorheriges Symbol">▲</button>
+                <div class="dial-cylinder" onclick="stepDial(1, 1)">
+                    <div class="dial-symbol" id="sym1">☀️</div>
+                    <div class="dial-label" id="lbl1">Sonne</div>
+                </div>
+                <button type="button" class="dial-step-btn" onclick="stepDial(1, 1)" title="Nächstes Symbol">▼</button>
+            </div>
+
+            <!-- Dial 3 -->
+            <div class="cryptex-dial" id="dialCol2">
+                <button type="button" class="dial-step-btn" onclick="stepDial(2, -1)" title="Vorheriges Symbol">▲</button>
+                <div class="dial-cylinder" onclick="stepDial(2, 1)">
+                    <div class="dial-symbol" id="sym2">💧</div>
+                    <div class="dial-label" id="lbl2">Wasser</div>
+                </div>
+                <button type="button" class="dial-step-btn" onclick="stepDial(2, 1)" title="Nächstes Symbol">▼</button>
+            </div>
+
+            <!-- Dial 4 -->
+            <div class="cryptex-dial" id="dialCol3">
+                <button type="button" class="dial-step-btn" onclick="stepDial(3, -1)" title="Vorheriges Symbol">▲</button>
+                <div class="dial-cylinder" onclick="stepDial(3, 1)">
+                    <div class="dial-symbol" id="sym3">🗝️</div>
+                    <div class="dial-label" id="lbl3">Schlüssel</div>
+                </div>
+                <button type="button" class="dial-step-btn" onclick="stepDial(3, 1)" title="Nächstes Symbol">▼</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Unlock Action Button -->
+    <div style="margin-top: 0.5rem; width: 100%; display: flex; justify-content: center;">
+        <button type="button" id="unlockCryptexBtn" class="btn-magical" style="padding: 0.9rem 2rem; font-size: 1.2rem;" onclick="checkCryptex()">
+            🔓 Siegel entriegeln
+        </button>
+    </div>
+
+    <!-- Success Panel -->
+    <div id="cryptexSuccess" style="display: none; text-align: center; margin-top: 1rem; width: 100%;">
+        <div class="dungeon-card" style="border-color: #2ecc71;">
+            <div style="font-size: 3rem; margin-bottom: 0.5rem;">🗝️✨</div>
+            <h2 style="color: var(--gold); font-size: 1.8rem; margin-bottom: 0.5rem;">
+                Das Tor der Gründer steht offen!
+            </h2>
+            <p style="color: var(--text-light); max-width: 500px; margin: 0 auto 1.25rem auto;">
+                Die Messingbolzen schnappen lautstark zurück! Der uralte <strong>Schlüssel der Gründer</strong> fällt in deine Hand und liegt nun in deinem Beutel.
+            </p>
+            <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
+                <a href="/pixies" class="btn-magical">Zur nächsten Prüfung: Wichtel-Panik 🧚➔</a>
+                <a href="/" class="btn-control">Zurück zur Übersicht 🏰</a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="/static/js/cryptex.js?v=1.0"></script>
+{% endblock %}