bootle/app/templates/index.html

{% extends "base.html" %}

{% block title %}Die Prüfungen des Steins der Weisen · Hogwarts Escape{% endblock %}

{% block content %}
<!-- Interaktiver Hogwarts-Brief & Siegel Intro -->
<div class="escape-letter-intro" id="escapeLetterIntro">
    <div class="antique-envelope-scene" id="envelope">
        <div class="envelope-base">
            <div class="envelope-interior"></div>
            <div class="letter-sheet" id="letterSheet">
                <header class="letter-header">
                    <div class="letter-crest-box">
                        <img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts Crest" class="letter-crest-sketch">
                    </div>
                    <h3 class="letter-school-name">Hogwarts-Schule für Hexerei und Zauberei</h3>
                    <p class="letter-headmaster">Schulleiter: Albus Dumbledore<br><span>(Hüter des Steins der Weisen · Verbotener Korridor)</span></p>
                    <div class="letter-ornament-line">
                        <span class="ornament-leaf">❦</span>
                        <span class="ornament-rule"></span>
                        <span class="ornament-shield">✦</span>
                        <span class="ornament-rule"></span>
                        <span class="ornament-leaf">❧</span>
                    </div>
                </header>
                <div class="letter-body-handwritten">
                    <p class="letter-salutation">Liebe Hexe, lieber Zauberer,</p>
                    <p class="letter-paragraph">
                        die Falltür unter Fluffys Pfoten hat sich geöffnet! Tief unter den Kerkern von Hogwarts wachen sechs uralte Schutzzauber der Lehrer über das größte Geheimnis der Alchemie: den <strong>Stein der Weisen</strong>.
                    </p>
                    <p class="letter-paragraph">
                        Schwinge dich auf deinen Besen, stelle dich dem Zauberstab-Duell, braue das goldene Glückselixier und durchschreite Snapes schwarze Flammen. Nur wer alle Kammern meistert, bewahrt das Schloss vor dem Schatten!
                    </p>
                </div>
                <footer class="letter-signature-block">
                    <p class="letter-closing">Mit magischer Hochachtung,</p>
                    <p class="letter-signature-ink">Minerva McGonagall</p>
                    <p class="letter-sign-title">Stellvertretende Schulleiterin</p>
                </footer>
            </div>
            <div class="envelope-back-body"></div>
            <div class="envelope-closing-flap envelope-v-flap" id="envelopeFlap">
                <div class="v-flap-sketch-line"></div>
            </div>
            <div class="sketched-wax-seal" id="waxSeal" onclick="toggleEscapeLetter()" title="Siegel brechen & Botschaft lesen">
                <img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts-Wappen Siegel" class="seal-crest-img">
                <div class="seal-emboss-ring"></div>
                <div class="seal-glow"></div>
            </div>
        </div>
    </div>
    <div style="text-align: center; margin-bottom: 1.5rem;">
        <button type="button" id="letterToggleBtn" class="btn-magical" onclick="toggleEscapeLetter()" style="padding: 0.65rem 1.4rem; font-size: 0.95rem;">
            📜 Siegel brechen & Einladung lesen
        </button>
    </div>
</div>
<script>
function toggleEscapeLetter() {
    const env = document.getElementById('envelope');
    const btn = document.getElementById('letterToggleBtn');
    if (!env) return;
    const opened = env.classList.toggle('envelope-opened');
    if (window.soundFX) window.soundFX.playKeyChime();
    const bgm = document.getElementById('bgm');
    if (bgm && bgm.paused && (!window.soundFX || !window.soundFX.isMuted())) {
        bgm.volume = 0.45;
        bgm.play().catch(() => {});
    }
    if (btn) {
        btn.innerText = opened ? '↩ Brief wieder verschließen' : '📜 Siegel brechen & Einladung lesen';
    }
}
</script>

<div class="dungeon-card">
    <h2 style="color: var(--gold); text-align: center; margin-bottom: 0.5rem; font-size: 1.8rem;">
        Wähle deine Prüfung im Escape Adventure
    </h2>
    <p style="text-align: center; color: var(--text-dim); margin-bottom: 1.5rem;">
        Du kannst die Kammern einzeln erkunden oder die Prüfungen nacheinander bezwingen:
    </p>

    <div class="chamber-grid">
        <!-- Chamber 1: Ring Flight -->
        <div class="chamber-card">
            <span class="chamber-badge {% if state.broom_solved %}solved{% endif %}">
                {% if state.broom_solved %}✅ Gemeistert{% else %}🔓 Bereit (Start){% endif %}
            </span>
            <div class="chamber-icon">🧹⭕</div>
            <h3 class="chamber-title">Kammer I: Der Ring-Flug</h3>
            <p class="chamber-desc">
                Madam Hoochs Quidditch-Parcours! Schwinge dich auf deinen Rennbesen, steuere geschmeidig durch 
                die schwebenden goldenen Ringe und fange den geflügelten Schlüssel!
            </p>
            <a href="/broom" class="btn-magical">Parcours fliegen 🧹</a>
        </div>

        <!-- Chamber 2: Wand Spell Dueling -->
        <div class="chamber-card">
            <span class="chamber-badge {% if state.duel_solved %}solved{% endif %}">
                {% if state.duel_solved %}✅ Gemeistert{% elif 'winged_key' in state.inventory or state.broom_solved or state.alohomora_mode %}⚡ Bereit{% else %}🔒 Benötigt: Geflügelter Schlüssel{% endif %}
            </span>
            <div class="chamber-icon">🪄⚡</div>
            <h3 class="chamber-title">Kammer II: Das Spruch-Duell</h3>
            <p class="chamber-desc">
                Zücke deinen Zauberstab! Zeichne die magischen Runen-Gesten (Flipendo, Incendio & Alohomora) 
                flüssig mit dem Finger nach und zerschmettere die verzauberte Trainingsrüstung!
            </p>
            <a href="/duel" class="btn-magical">Duell beginnen 🪄</a>
        </div>

        <!-- Chamber 3: Potion Brewing -->
        <div class="chamber-card">
            <span class="chamber-badge {% if state.brew_solved %}solved{% endif %}">
                {% if state.brew_solved %}✅ Gemeistert{% elif 'duel_badge' in state.inventory or state.duel_solved or state.alohomora_mode %}⚗️ Bereit{% else %}🔒 Benötigt: Kessel-Rezeptur{% endif %}
            </span>
            <div class="chamber-icon">⚗️🧪</div>
            <h3 class="chamber-title">Kammer III: Die Brauküche</h3>
            <p class="chamber-desc">
                Snapes Kupferkessel brodelt! Gib Essenzen hinzu, rühre mit Bedacht 
                und balanciere die Hitze, um das goldene Glückselixier <em>Felix Felicis</em> zu vollenden!
            </p>
            <a href="/brew" class="btn-magical">Kessel anheizen ⚗️</a>
        </div>

        <!-- Chamber 4: Cryptex Lock -->
        <div class="chamber-card">
            <span class="chamber-badge {% if state.cryptex_solved %}solved{% endif %}">
                {% if state.cryptex_solved %}✅ Gemeistert{% elif 'felix_felicis' in state.inventory or state.brew_solved or state.alohomora_mode %}🔐 Bereit{% else %}🔒 Benötigt: Felix Felicis{% endif %}
            </span>
            <div class="chamber-icon">🔐🗝️</div>
            <h3 class="chamber-title">Kammer IV: Das Drehschloss</h3>
            <p class="chamber-desc">
                Das massive Tresortor der vier Hogwarts-Gründer. Drehe die vier Messingzylinder mit Wappen, Mond und Sternen, 
                um das alchemistische Rätsel zu lösen und den Gründerschlüssel zu befreien!
            </p>
            <a href="/cryptex" class="btn-magical">Ringe drehen 🔐</a>
        </div>

        <!-- Chamber 5: Cornish Pixies -->
        <div class="chamber-card">
            <span class="chamber-badge {% if state.pixies_solved %}solved{% endif %}">
                {% if state.pixies_solved %}✅ Gemeistert{% elif 'cryptex_key' in state.inventory or state.cryptex_solved or state.alohomora_mode %}🧚 Bereit{% else %}🔒 Benötigt: Gründerschlüssel{% endif %}
            </span>
            <div class="chamber-icon">🧚❄️</div>
            <h3 class="chamber-title">Kammer V: Wichtel-Panik</h3>
            <p class="chamber-desc">
                Chaos im Klassenzimmer! Freche blaue Wichtel wirbeln umher. Schnelle Reflexe sind gefragt: 
                Banne 10 Wichtel mit dem Einfrier-Zauber <em>»Immobilus!«</em> und schone Neville!
            </p>
            <a href="/pixies" class="btn-magical">Wichtel jagen 🧚</a>
        </div>

        <!-- Chamber 6: Snape's Potions -->
        <div class="chamber-card">
            <span class="chamber-badge {% if state.bottles_solved %}solved{% endif %}">
                {% if state.bottles_solved %}✅ Gemeistert{% elif 'pixie_jar' in state.inventory or state.pixies_solved or state.alohomora_mode %}🔥 Bereit{% else %}🔒 Benötigt: Wichtelglas{% endif %}
            </span>
            <div class="chamber-icon">🧪🔥</div>
            <h3 class="chamber-title">Kammer VI: Snapes Flaschen</h3>
            <p class="chamber-desc">
                Schwarze Flammen versperren den Weg zum Stein, violette Flammen den Rückweg. 
                Auf dem Tisch stehen 7 Flaschen und Snapes unerbittliches Logik-Gedicht. 
                Schiebe, etikettiere und wähle die richtige Phiole!
            </p>
            <a href="/bottles" class="btn-magical">Flammenkammer betreten 🧪</a>
        </div>


        <!-- Bonus: Alchemy Sliding Puzzle -->
        <div class="chamber-card">
            <span class="chamber-badge {% if state.sliding_solved %}solved{% endif %}">
                {% if state.sliding_solved %}✅ Gelöst{% else %}🧩 Zusatz-Rätsel{% endif %}
            </span>
            <div class="chamber-icon">🧩⚗️</div>
            <h3 class="chamber-title">Alchemie-Schieberätsel</h3>
            <p class="chamber-desc">
                Das mechanische Runen-Schiebesiegel auf der Steintafel. 
                Verschiebe die alchemistischen Elixier-Kacheln, um die verborgene Essenz der Alraune und des Lebenselixiers freizuschalten.
            </p>
            <a href="/sliding" class="btn-magical">Schieberätsel lösen 🧩</a>
        </div>

        <!-- Quiz Portal Link -->
        <div class="chamber-card">
            <span class="chamber-badge" style="background: rgba(212, 175, 55, 0.25); border-color: var(--gold); color: var(--gold);">
                ✨ Quiz Portal
            </span>
            <div class="chamber-icon">🏰📜</div>
            <h3 class="chamber-title">Die Große Halle: Quiz</h3>
            <p class="chamber-desc">
                Möchtest du dein gesamtes theoretisches Wissen über die Zaubererwelt auf die Probe stellen? 
                Hunderte Fragen aus allen 7 Schuljahren warten im Hogwarts-Quiz!
            </p>
            <a href="https://quiz.dev.waiswuaschd.de" class="btn-magical" target="_blank" rel="noopener">Zum Hogwarts-Quiz ↗</a>
        </div>
    </div>
</div>

<div style="text-align: center; margin-top: 2rem;">
    <button class="btn-control" onclick="resetProgress()" style="margin: 0 auto; display: inline-flex;">
        🔄 Fortschritt zurücksetzen
    </button>
</div>

<script>
async function resetProgress() {
    if (confirm("Möchtest du deinen bisherigen Escape-Fortschritt wirklich zurücksetzen?")) {
        await fetch('/api/reset', { method: 'POST' });
        window.location.reload();
    }
}
</script>
{% endblock %}