Maxi
100 lines
5.0 KiB
HTML
Executable File
100 lines
5.0 KiB
HTML
Executable File
{% 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 %}
|