bootle/app/templates/base.html

<!DOCTYPE html>
<html lang="{{ lang or 'de' }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
    <title>{% block title %}Hogwarts Escape Adventure{% endblock %} · bootle</title>
    <link rel="icon" href="/static/favicon.ico">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=MedievalSharp&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/escape.css?v=4.0">
    {% block head %}{% endblock %}
</head>
<body>
    <!-- Minimalist & Mobile-Friendly Header -->
    <header class="site-header">
        <div class="header-inner">
            <a href="/" class="brand-link">
                <span class="brand-sparkle">🏰⚡</span>
                <span class="brand-title">Hogwarts Escape</span>
            </a>

            <div class="header-right">
                <button type="button" id="audioToggleBtn" class="btn-control icon-only" onclick="toggleSound()" title="Ton an/aus">
                    🔊
                </button>

                <!-- Player Menu & Bag Button -->
                <button type="button" id="openBagBtn" class="btn-bag" title="Zauberbeutel & Profil öffnen">
                    <span id="bagHouseIcon" class="bag-house-icon">{{ house.icon }}</span>
                    <span class="bag-label">Beutel</span>
                    <span id="bagBadge" class="bag-badge">{{ inventory_items | length }}</span>
                </button>
            </div>
        </div>
    </header>

    <main class="container">
        {% block content %}{% endblock %}
    </main>

    <!-- Global Standard Modal Backdrop -->
    <div id="modalBackdrop" class="modal-backdrop">
        <div class="modal-content">
            <div id="modalIcon" class="modal-icon">🏆</div>
            <h2 id="modalTitle" class="modal-title">Prüfung bestanden!</h2>
            <p id="modalText" class="modal-text">Details zur Lösung...</p>
            <button id="modalBtn" class="btn-magical">Weiter</button>
        </div>
    </div>

    <!-- Spectacular Victory Celebration Overlay -->
    <div id="victoryCelebrationModal" class="victory-modal-backdrop">
        <canvas id="victoryConfettiCanvas" class="victory-confetti-canvas"></canvas>
        <div class="victory-card">
            <div class="victory-crest-wrap">
                <div id="vicCrestIcon" class="victory-crest-icon">🏆</div>
            </div>
            
            <div id="vicChamberBadge" class="victory-chamber-badge">Kammer Gemeistert</div>
            <h2 id="vicTitle" class="victory-title">Hervorragend, Zauberschüler!</h2>
            
            <div id="vicStatsBox" class="victory-stats-box">
                <!-- Filled dynamically: Score, Time, Spells -->
            </div>

            <div id="vicItemRewardBox" class="victory-reward-box" style="display: none;">
                <div id="vicRewardIcon" class="reward-icon">🗝️</div>
                <div class="reward-content">
                    <span class="reward-label">🎒 Neuer Gegenstand im Zauberbeutel:</span>
                    <strong id="vicRewardName" class="reward-name">Geflügelter Schlüssel</strong>
                    <p id="vicRewardDesc" class="reward-desc">Öffnet die Eichentür zur Duellier-Kammer.</p>
                </div>
            </div>

            <div id="vicStoryBox" class="victory-story-box">
                <!-- Story progression & hint for next chamber -->
            </div>

            <div class="victory-actions">
                <a id="vicNextBtn" href="/duel" class="btn-magical victory-next-btn">
                    ➔ Weiter zur nächsten Kammer ✨
                </a>
                <div class="victory-sub-actions">
                    <a href="/" class="btn-subtle">🗺️ Kammern-Übersicht</a>
                    <button type="button" class="btn-subtle" onclick="window.openPlayerDrawer('backpackTab'); document.getElementById('victoryCelebrationModal').classList.remove('show');">🎒 Beutel ansehen</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Slide-Over Player Drawer & Inventory -->
    <div id="drawerBackdrop" class="drawer-backdrop"></div>
    <div id="playerDrawer" class="player-drawer">
        <div class="drawer-header">
            <div class="drawer-title">
                <span>🎒</span> Zauberer-Cockpit
            </div>
            <button type="button" id="closeDrawerBtn" class="drawer-close-btn" aria-label="Schließen">✕</button>
        </div>

        <!-- Navigation Tabs inside Drawer -->
        <div class="drawer-tabs">
            <button type="button" class="drawer-tab-btn active" data-tab="backpackTab">
                🎒 Beutel
            </button>
            <button type="button" class="drawer-tab-btn" data-tab="profileTab">
                🧙‍♂️ Profil
            </button>
            <button type="button" class="drawer-tab-btn" data-tab="roomsTab">
                🗺️ Kammern
            </button>
        </div>

        <div class="drawer-body">
            <!-- TAB 1: INVENTORY (BEUTEL) -->
            <div id="backpackTab" class="drawer-tab-pane active">
                <div class="inv-grid">
                    {% for item in inventory_items %}
                    <div class="inv-item-slot" 
                         data-item-id="{{ item.id }}" 
                         data-item-name="{{ item.name }}" 
                         data-item-icon="{{ item.icon }}" 
                         data-item-desc="{{ item.desc }}"
                         data-action="{{ item.action }}"
                         data-action-label="{{ item.action_label }}">
                        <div class="inv-item-icon">{{ item.icon }}</div>
                        <div class="inv-item-name">{{ item.name }}</div>
                    </div>
                    {% endfor %}
                </div>

                <!-- Item Detail & Interaction Box -->
                <div id="itemDetailBox" class="inv-detail-card" style="display: none;">
                    <div id="itemDetailIcon" class="inv-detail-icon">🪄</div>
                    <div id="itemDetailName" class="inv-detail-name">Gegenstand</div>
                    <p id="itemDetailDesc" class="inv-detail-desc">Beschreibung des Gegenstands...</p>
                    <button type="button" id="itemDetailActionBtn" class="btn-magical" style="padding: 0.6rem 1.2rem; font-size: 0.95rem; width: 100%;">
                        Benutzen ✨
                    </button>
                </div>
            </div>

            <!-- TAB 2: PROFILE & HOUSE (HAUS) -->
            <div id="profileTab" class="drawer-tab-pane">
                <h4 style="color: var(--gold); margin-bottom: 0.75rem; text-align: center;">Wähle dein Hogwarts-Haus:</h4>
                <div class="house-picker-grid">
                    {% for hid, h in houses.items() %}
                    <button type="button" class="house-select-btn {% if state.house == hid %}active{% endif %}" data-house="{{ hid }}">
                        <span class="house-icon">{{ h.icon }}</span>
                        <span class="house-name">{{ h.name }}</span>
                    </button>
                    {% endfor %}
                </div>

                <div class="profile-stats-card">
                    <div class="stat-row">
                        <span>⚡ Gesammelte Punkte:</span>
                        <strong style="color: var(--gold);">{{ state.broom_score }} Pkt</strong>
                    </div>
                    <div class="stat-row">
                        <span>🧹 Ring-Flug:</span>
                        <span>{% if state.broom_solved %}✅ Gemeistert{% else %}⏳ Offen{% endif %}</span>
                    </div>
                    <div class="stat-row">
                        <span>🪄 Spruch-Duell:</span>
                        <span>{% if state.duel_solved %}✅ Gemeistert{% else %}⏳ Offen{% endif %}</span>
                    </div>
                    <div class="stat-row">
                        <span>⚗️ Trank-Brauküche:</span>
                        <span>{% if state.brew_solved %}✅ Gemeistert{% else %}⏳ Offen{% endif %}</span>
                    </div>
                    <div class="stat-row">
                        <span>🔐 Runen-Drehschloss:</span>
                        <span>{% if state.cryptex_solved %}✅ Gemeistert{% else %}⏳ Offen{% endif %}</span>
                    </div>
                    <div class="stat-row">
                        <span>🧚 Wichtel-Panik:</span>
                        <span>{% if state.pixies_solved %}✅ Gemeistert{% else %}⏳ Offen{% endif %}</span>
                    </div>
                    <div class="stat-row">
                        <span>🧪 Snapes Flammen:</span>
                        <span>{% if state.bottles_solved %}✅ Gelöst{% else %}⏳ Offen{% endif %}</span>
                    </div>
                    <div class="stat-row">
                        <span>🧩 Alchemie-Schieberätsel:</span>
                        <span>{% if state.sliding_solved %}✅ Gelöst{% else %}⏳ Frei spielbar{% endif %}</span>
                    </div>
                </div>
            </div>

            <!-- TAB 3: CHAMBERS MAP (KAMMERN) -->
            <div id="roomsTab" class="drawer-tab-pane">
                <div class="rooms-nav-list">
                    <a href="/" class="room-nav-item {% if request.url.path == '/' %}current{% endif %}">
                        <span class="room-icon">🚪</span>
                        <div class="room-info">
                            <strong>Vorhalle & Übersicht</strong>
                            <small>Die Pforten zu den Verliesen</small>
                        </div>
                    </a>
                    <a href="/broom" class="room-nav-item {% if request.url.path == '/broom' %}current{% endif %}">
                        <span class="room-icon">🧹</span>
                        <div class="room-info">
                            <strong>Kammer I: Der Ring-Flug</strong>
                            <small>{% if state.broom_solved %}✅ Gemeistert{% else %}⭕ Goldene Ringe durchfliegen{% endif %}</small>
                        </div>
                    </a>
                    <a href="/duel" class="room-nav-item {% if request.url.path == '/duel' %}current{% endif %}">
                        <span class="room-icon">🪄</span>
                        <div class="room-info">
                            <strong>Kammer II: Das Spruch-Duell</strong>
                            <small>{% if state.duel_solved %}✅ Gemeistert{% else %}⚡ Zaubergesten zeichnen{% endif %}</small>
                        </div>
                    </a>
                    <a href="/brew" class="room-nav-item {% if request.url.path == '/brew' %}current{% endif %}">
                        <span class="room-icon">⚗️</span>
                        <div class="room-info">
                            <strong>Kammer III: Die Brauküche</strong>
                            <small>{% if state.brew_solved %}✅ Gemeistert{% else %}🧪 Felix Felicis brauen{% endif %}</small>
                        </div>
                    </a>
                    <a href="/cryptex" class="room-nav-item {% if request.url.path == '/cryptex' %}current{% endif %}">
                        <span class="room-icon">🔐</span>
                        <div class="room-info">
                            <strong>Kammer IV: Das Drehschloss</strong>
                            <small>{% if state.cryptex_solved %}✅ Gemeistert{% else %}🔑 Gründer-Siegel knacken{% endif %}</small>
                        </div>
                    </a>
                    <a href="/pixies" class="room-nav-item {% if request.url.path == '/pixies' %}current{% endif %}">
                        <span class="room-icon">🧚</span>
                        <div class="room-info">
                            <strong>Kammer V: Wichtel-Panik</strong>
                            <small>{% if state.pixies_solved %}✅ Gemeistert{% else %}❄️ Immobilus auf Wichtel{% endif %}</small>
                        </div>
                    </a>
                    <a href="/bottles" class="room-nav-item {% if request.url.path == '/bottles' %}current{% endif %}">
                        <span class="room-icon">🧪</span>
                        <div class="room-info">
                            <strong>Kammer VI: Snapes Flaschen</strong>
                            <small>{% if state.bottles_solved %}✅ Gemeistert{% else %}🔥 Die Flammenkammer{% endif %}</small>
                        </div>
                    </a>
                    <a href="/sliding" class="room-nav-item {% if request.url.path == '/sliding' %}current{% endif %}">
                        <span class="room-icon">🧩</span>
                        <div class="room-info">
                            <strong>Alchemie-Schieberätsel</strong>
                            <small>{% if state.sliding_solved %}✅ Gelöst{% else %}⚗️ Runen-Schiebepuzzle{% endif %}</small>
                        </div>
                    </a>
                    <a href="/finale" class="room-nav-item {% if request.url.path == '/finale' %}current{% endif %}">
                        <span class="room-icon">🏆</span>
                        <div class="room-info">
                            <strong>Das Finale</strong>
                            <small>Der Stein der Weisen</small>
                        </div>
                    </a>
                    <a href="https://quiz.dev.waiswuaschd.de" class="room-nav-item external" target="_blank" rel="noopener">
                        <span class="room-icon">📜</span>
                        <div class="room-info">
                            <strong>Hogwarts-Quiz Portal ↗</strong>
                            <small>Große Wissensprüfung</small>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="drawer-footer">
            <button type="button" class="btn-control" onclick="resetEscapeProgress()" style="width: 100%; justify-content: center;">
                🔄 Fortschritt zurücksetzen
            </button>
        </div>
    </div>

    <footer class="footer">
        <p>⚡ <strong>Hogwarts Escape Adventure</strong> · Teil des Magischen Zauberer-Kosmos ⚡</p>
        <p style="margin-top: 0.5rem;">
            <a href="javascript:void(0)" onclick="openPlayerDrawer('backpackTab')">🎒 Zauberbeutel öffnen</a> · 
            <a href="https://quiz.dev.waiswuaschd.de" target="_blank" rel="noopener">Hogwarts Quiz Portal</a>
        </p>
    </footer>

    <script src="/static/js/audio.js?v=2.0"></script>
    <script src="/static/js/inventory.js?v=2.0"></script>
    <script>
    async function resetEscapeProgress() {
        if (confirm("Möchtest du deinen Escape-Fortschritt und dein Inventar wirklich zurücksetzen?")) {
            await fetch('/api/reset', { method: 'POST' });
            window.location.reload();
        }
    }
    </script>
    {% block scripts %}{% endblock %}
</body>
</html>