bootle/app/templates/index.html

{% extends "base.html" %}

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

{% block content %}
<div class="parchment-scroll">
    <h1 class="parchment-title">⚡ Die Kammern des Steins der Weisen ⚡</h1>
    <p class="riddle-poem" style="font-size: 1.3rem; margin: 0.5rem 0;">
        "Die Falltür unter Fluffys Pfoten hat sich geöffnet.<br>
        Tief unter den Kerkern von Hogwarts wachen uralte Zauber über das größte Geheimnis der Alchemie.<br>
        Beweise deinen Scharfsinn, dein Geschick auf dem Besen und deine eiserne Logik!"
    </p>
</div>

<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 %}