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: Winged Keys -->
        <div class="chamber-card">
            <span class="chamber-badge {% if state.broom_solved %}solved{% endif %}">
                {% if state.broom_solved %}✅ Gemeistert{% else %}🔓 Bereit{% endif %}
            </span>
            <div class="chamber-icon">🧹🗝️</div>
            <h3 class="chamber-title">Kammer I: Der Besenflug</h3>
            <p class="chamber-desc">
                Professor Flitwicks verzauberte Kammer. Schwärme geflügelter Schlüssel surren unter der hohen Gewölbedecke. 
                Finde den großen, alten Silberschlüssel mit dem geknickten Flügel und schließe die Tür auf!
            </p>
            <a href="/broom" class="btn-magical">Auf den Besen schwingen 🧹</a>
        </div>

        <!-- Chamber 2: Snape's Potions -->
        <div class="chamber-card">
            <span class="chamber-badge {% if state.bottles_solved %}solved{% endif %}">
                {% if state.bottles_solved %}✅ Gemeistert{% else %}🔥 Bereit{% endif %}
            </span>
            <div class="chamber-icon">🧪🔥</div>
            <h3 class="chamber-title">Kammer II: Snapes Flaschenrätsel</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 %}