bootle/app/templates/cryptex.html

{% 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 der Gründer 🔐</h1>
    <div style="font-family: 'Caveat', cursive; font-size: 1.25rem; line-height: 1.6; color: #efe5cb; text-align: left; padding: 0.25rem 0.5rem;">
        <em>
        »Vier Siegel schloss der Gründer Rat, bevor man je die Schatzkammer betrat.<br>
        Kein Zauber bricht das Schloss, wenn du die Verse nicht ergründest:<br><br>
        <strong>I. Das Wappentier von Godric:</strong><br>
        Nicht die verschlagene Natter der Kerker, nicht der kluge Rabe, nicht der emsige Dachs – wer krönt mit goldener Mähne den Mut der Tapfersten?<br><br>
        <strong>II. Das Gestirn der Gezeiten:</strong><br>
        Nicht das sengende Mittagslicht, nicht der stumme Polarstern, nicht der jähe Blitz – welcher silberne Wanderer herrscht über die stille Nacht?<br><br>
        <strong>III. Das verzehrende Element:</strong><br>
        Es löscht keinen Durst, wurzelt in keinem Boden, weht nicht wie der Wind – es frisst gierig Holz, tanzt in Glut und stirbt im Wasser.<br><br>
        <strong>IV. Das Werkzeug des Meisters:</strong><br>
        Nicht das Schloss selbst, nicht das alte Pergament, nicht die Glasphiole – welches Instrument aus Holz und Phönixfeder schlägt die Funken?«
        </em>
    </div>

    <!-- Felix Felicis Interactive Clue -->
    <div style="text-align: center; margin-top: 0.8rem;">
        <button type="button" class="btn-subtle" onclick="useFelixFelicisHint()" style="border-color: #ffd700; color: #ffd700; font-size: 0.95rem;">
            🍀 Felix Felicis Glücks-Eingebung einnehmen 🧪
        </button>
    </div>
</div>

{% if is_locked and lock_info %}
<div class="chamber-lock-banner">
    <div class="chamber-lock-icon">🔒</div>
    <h2 class="chamber-lock-title">Kammer Versiegelt!</h2>
    <p class="chamber-lock-desc">
        {{ lock_info.reason }}
    </p>
    <div class="chamber-req-box">
        <div class="chamber-req-icon">{{ lock_info.item_icon }}</div>
        <div class="chamber-req-info">
            <strong>{{ lock_info.item_name }}</strong>
            <span>Erforderlich aus: {{ lock_info.from_chamber }}</span>
        </div>
    </div>
    <div class="chamber-lock-actions">
        <a href="{{ lock_info.from_url }}" class="btn-magical">
            ➔ Zu {{ lock_info.from_chamber }} gehen
        </a>
        <a href="?alohomora=1" class="alohomora-link">
            ✨ Zauberspruch »Alohomora« wirken (Prüfung für Spielleiter / Tester freischalten)
        </a>
    </div>
</div>
{% endif %}

<div class="cryptex-container">
    <!-- 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 0 -->
            <div class="cryptex-dial" id="dialCol0">
                <button type="button" class="dial-step-btn" onclick="stepDial(0, -1)" aria-label="Vorheriges Symbol">▲</button>
                <div class="dial-cylinder" id="cylinder0" 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)" aria-label="Nächstes Symbol">▼</button>
            </div>

            <!-- Dial 1 -->
            <div class="cryptex-dial" id="dialCol1">
                <button type="button" class="dial-step-btn" onclick="stepDial(1, -1)" aria-label="Vorheriges Symbol">▲</button>
                <div class="dial-cylinder" id="cylinder1" 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)" aria-label="Nächstes Symbol">▼</button>
            </div>

            <!-- Dial 2 -->
            <div class="cryptex-dial" id="dialCol2">
                <button type="button" class="dial-step-btn" onclick="stepDial(2, -1)" aria-label="Vorheriges Symbol">▲</button>
                <div class="dial-cylinder" id="cylinder2" 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)" aria-label="Nächstes Symbol">▼</button>
            </div>

            <!-- Dial 3 -->
            <div class="cryptex-dial" id="dialCol3">
                <button type="button" class="dial-step-btn" onclick="stepDial(3, -1)" aria-label="Vorheriges Symbol">▲</button>
                <div class="dial-cylinder" id="cylinder3" 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)" aria-label="Nächstes Symbol">▼</button>
            </div>
        </div>
    </div>

    <!-- Unlock Action Button -->
    <div style="margin-top: 0.5rem; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.4rem;">
        <button type="button" id="unlockCryptexBtn" class="btn-magical" style="padding: 0.9rem 2.2rem; font-size: 1.25rem; width: 100%; max-width: 320px;" onclick="checkCryptex()">
            🔓 Siegel entriegeln
        </button>
        <span style="color: var(--text-dim); font-size: 0.85rem;">Tippe auf ▲/▼ oder wische über die Walzen</span>
    </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;">
                Mit Scharfsinn hast du alle 4 Verse entschlüsselt! Die massiven Bolzen schnappen auf und der uralte <strong>Schlüssel der Gründer</strong> liegt in deinem <strong>Zauberbeutel</strong>.
            </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=3.0"></script>
{% endblock %}