Initial commit: Harry Potter Escape Adventure on bootle.dev.waiswuaschd.de

This commit is contained in:
Maxi
2026-09-22 16:26:48 +02:00
commit c5c0bad3e6
22 changed files with 2413 additions and 0 deletions
+66
View File
@@ -0,0 +1,66 @@
<!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=1.0">
{% block head %}{% endblock %}
</head>
<body>
<header class="site-header">
<div class="header-inner">
<a href="/" class="brand-link">
<span>🏰⚡</span>
<span class="brand-title">Hogwarts Escape</span>
</a>
<nav class="nav-links">
<a href="/" class="nav-link {% if request.url.path == '/' %}active{% endif %}">🚪 Kammern</a>
<a href="/broom" class="nav-link {% if request.url.path == '/broom' %}active{% endif %}">🧹 Besenflug</a>
<a href="/bottles" class="nav-link {% if request.url.path == '/bottles' %}active{% endif %}">🧪 Snapes Flaschen</a>
<a href="/sliding" class="nav-link {% if request.url.path == '/sliding' %}active{% endif %}">🧩 Schieberätsel</a>
<a href="https://quiz.dev.waiswuaschd.de" class="nav-link" target="_blank" rel="noopener">📜 Hogwarts-Quiz ↗</a>
</nav>
<div class="header-right">
<button type="button" id="audioToggleBtn" class="btn-control" onclick="toggleSound()">
🔊 <span class="audio-lbl">Ton: An</span>
</button>
</div>
</div>
</header>
<main class="container">
{% block content %}{% endblock %}
</main>
<!-- Global 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>
<footer class="footer">
<p>⚡ <strong>Hogwarts Escape Adventure</strong> · Teil des Magischen Zauberer-Kosmos ⚡</p>
<p style="margin-top: 0.5rem;">
<a href="/">Startseite</a> ·
<a href="/broom">Der Besenflug</a> ·
<a href="/bottles">Snapes Flaschenrätsel</a> ·
<a href="/sliding">Alchemie-Schieberätsel</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=1.0"></script>
{% block scripts %}{% endblock %}
</body>
</html>
+242
View File
@@ -0,0 +1,242 @@
{% extends "base.html" %}
{% block title %}Kammer II: Snapes Flaschenrätsel & Flammenkammer · Hogwarts Escape{% endblock %}
{% block content %}
<div class="parchment-scroll">
<h1 class="parchment-title">🧪 Kammer II: Snapes Flaschenrätsel 🔥</h1>
<div class="riddle-poem">
"Gefahr liegt vor euch, die Rettung zurück,
Zwei von uns helfen euch, habt ihr das Glück,
Eine von sieben führt euch hindurch,
Eine bringt den, der sie trinkt, sicher zurück,
Zwei von ihnen enthalten nur Brennnesselwein,
Drei sind tödlich, schenkt ihr sie ein.
Wählt oder bleibt auf ewig hier stehen,
Vier Hinweise helfen euch, alles zu sehen:
1. So schlau sich das Gift auch zu tarnen mag,
stets steht es zur Linken vom Wein im Gelag.
2. Verschieden sind jene am Ende der Reih',
doch wollt ihr nach vorn, ist keines getreu.
3. Wie ihr deutlich seht, sind alle verschieden groß,
weder Zwerg noch Riese birgt des Todes Los.
4. Die Zweite von links und die Zweite von rechts
sind Zwillinge im Geschmack des Geflechts,
obwohl sie dem Auge ganz ungleich erscheinen."
</div>
</div>
<div class="flame-chamber-arena">
<!-- The Two Flaming Portals -->
<div class="flame-wall-container">
<!-- Purple Fire (Retreat) -->
<div class="flame-gate purple">
<div class="flame-icon-animated" style="color: #c77dff;">🟣🔥</div>
<h3 style="color: #e0aaff; margin: 0.5rem 0;">Violette Flammen</h3>
<p style="font-size: 0.85rem; color: #d8bbff;">Der Rückweg in den Besenraum</p>
</div>
<!-- Black Fire (Advance to the Stone) -->
<div class="flame-gate black">
<div class="flame-icon-animated" style="color: #7b2cbf;">🖤🔥</div>
<h3 style="color: #ffd700; margin: 0.5rem 0;">Schwarze Flammen</h3>
<p style="font-size: 0.85rem; color: #c4b5fd;">Das Tor zur Kammer des Steins der Weisen!</p>
</div>
</div>
<!-- The 7 Bottles Table -->
<div class="bottles-table-wrapper">
<h4 style="text-align: center; color: var(--gold); margin-bottom: 0.5rem;">
🖐️ Wähle oder schiebe die Flaschen auf den Sockeln (Drag & Drop / Klick):
</h4>
<p style="text-align: center; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 1.25rem;">
Nutze die Notiz-Dropdowns unter jeder Flasche, um deine logische Deduktion festzuhalten!
</p>
<div class="bottles-table" id="bottlesTable">
<!-- Bottle 1 (Poison) -->
<div class="bottle-slot" data-index="1">
<svg class="bottle-svg" width="46" height="90" viewBox="0 0 50 100">
<!-- Amber Medium Bottle -->
<rect x="20" y="5" width="10" height="15" fill="#5c4033" rx="2" />
<rect x="18" y="0" width="14" height="6" fill="#8B4513" rx="2" />
<path d="M15,25 Q5,35 5,55 L5,90 Q5,98 15,98 L35,98 Q45,98 45,90 L45,55 Q45,35 35,25 Z" fill="#964B00" opacity="0.85"/>
<path d="M15,25 Q5,35 5,55 L5,90 Q5,98 15,98 L35,98 Q45,98 45,90 L45,55 Q45,35 35,25 Z" stroke="#e5b948" stroke-width="1.5" fill="none"/>
<ellipse cx="25" cy="65" rx="8" ry="12" fill="#582900" opacity="0.6"/>
</svg>
<div class="bottle-pedestal">I</div>
<select class="bottle-tag-select">
<option value="">? Notiz</option>
<option value="poison">💀 Gift</option>
<option value="wine">🍷 Wein</option>
<option value="ahead">🔥 Vorwärts</option>
<option value="back">🟣 Zurück</option>
</select>
</div>
<!-- Bottle 2 (Nettle Wine) -->
<div class="bottle-slot" data-index="2">
<svg class="bottle-svg" width="42" height="110" viewBox="0 0 50 120">
<!-- Green Slim Flacon -->
<rect x="20" y="5" width="10" height="20" fill="#5c4033" rx="2" />
<rect x="17" y="0" width="16" height="6" fill="#8B4513" rx="2" />
<path d="M18,30 L10,50 L10,110 Q10,118 25,118 Q40,118 40,110 L40,50 L32,30 Z" fill="#2d6a4f" opacity="0.85"/>
<path d="M18,30 L10,50 L10,110 Q10,118 25,118 Q40,118 40,110 L40,50 L32,30 Z" stroke="#e5b948" stroke-width="1.5" fill="none"/>
<ellipse cx="25" cy="75" rx="6" ry="18" fill="#1b4332" opacity="0.6"/>
</svg>
<div class="bottle-pedestal">II</div>
<select class="bottle-tag-select">
<option value="">? Notiz</option>
<option value="poison">💀 Gift</option>
<option value="wine">🍷 Wein</option>
<option value="ahead">🔥 Vorwärts</option>
<option value="back">🟣 Zurück</option>
</select>
</div>
<!-- Bottle 3 (AHEAD - The Dwarf / Smallest!) -->
<div class="bottle-slot" data-index="3">
<svg class="bottle-svg" width="36" height="58" viewBox="0 0 40 65">
<!-- Tiny Cobalt Vial (The Dwarf!) -->
<rect x="16" y="4" width="8" height="10" fill="#c0c0c0" rx="1" />
<path d="M14,16 Q8,24 8,36 L8,55 Q8,62 20,62 Q32,62 32,55 L32,36 Q32,24 26,16 Z" fill="#0077b6" opacity="0.9"/>
<path d="M14,16 Q8,24 8,36 L8,55 Q8,62 20,62 Q32,62 32,55 L32,36 Q32,24 26,16 Z" stroke="#00ffff" stroke-width="2" fill="none"/>
<circle cx="20" cy="40" r="5" fill="#90e0ef" opacity="0.8"/>
</svg>
<div class="bottle-pedestal" style="border-color: #00ffff; color: #00ffff;">III (Zwerg)</div>
<select class="bottle-tag-select">
<option value="">? Notiz</option>
<option value="poison">💀 Gift</option>
<option value="wine">🍷 Wein</option>
<option value="ahead">🔥 Vorwärts</option>
<option value="back">🟣 Zurück</option>
</select>
</div>
<!-- Bottle 4 (Poison) -->
<div class="bottle-slot" data-index="4">
<svg class="bottle-svg" width="48" height="96" viewBox="0 0 50 100">
<!-- Triangular Potion Flask -->
<rect x="20" y="5" width="10" height="15" fill="#4a3525" rx="2" />
<polygon points="20,22 5,88 45,88 30,22" fill="#52b788" opacity="0.85"/>
<polygon points="20,22 5,88 45,88 30,22" stroke="#e5b948" stroke-width="1.5" fill="none"/>
<circle cx="25" cy="60" r="7" fill="#2d6a4f" opacity="0.7"/>
</svg>
<div class="bottle-pedestal">IV</div>
<select class="bottle-tag-select">
<option value="">? Notiz</option>
<option value="poison">💀 Gift</option>
<option value="wine">🍷 Wein</option>
<option value="ahead">🔥 Vorwärts</option>
<option value="back">🟣 Zurück</option>
</select>
</div>
<!-- Bottle 5 (Poison) -->
<div class="bottle-slot" data-index="5">
<svg class="bottle-svg" width="50" height="102" viewBox="0 0 60 110">
<!-- Bulbous Violet Bottle -->
<rect x="25" y="5" width="10" height="20" fill="#3b2b1e" rx="2" />
<circle cx="30" cy="65" r="25" fill="#7209b7" opacity="0.85"/>
<circle cx="30" cy="65" r="25" stroke="#e5b948" stroke-width="1.5" fill="none"/>
<circle cx="30" cy="65" r="10" fill="#3a0ca3" opacity="0.6"/>
</svg>
<div class="bottle-pedestal">V</div>
<select class="bottle-tag-select">
<option value="">? Notiz</option>
<option value="poison">💀 Gift</option>
<option value="wine">🍷 Wein</option>
<option value="ahead">🔥 Vorwärts</option>
<option value="back">🟣 Zurück</option>
</select>
</div>
<!-- Bottle 6 (Nettle Wine) -->
<div class="bottle-slot" data-index="6">
<svg class="bottle-svg" width="44" height="114" viewBox="0 0 50 120">
<!-- Tall Slender Green Bottle (Twin of 2) -->
<rect x="20" y="5" width="10" height="18" fill="#5c4033" rx="2" />
<rect x="17" y="0" width="16" height="6" fill="#8B4513" rx="2" />
<path d="M19,25 Q12,45 12,80 L12,110 Q12,116 25,116 Q38,116 38,110 L38,80 Q38,45 31,25 Z" fill="#2d6a4f" opacity="0.85"/>
<path d="M19,25 Q12,45 12,80 L12,110 Q12,116 25,116 Q38,116 38,110 L38,80 Q38,45 31,25 Z" stroke="#e5b948" stroke-width="1.5" fill="none"/>
<ellipse cx="25" cy="80" rx="7" ry="20" fill="#1b4332" opacity="0.6"/>
</svg>
<div class="bottle-pedestal">VI</div>
<select class="bottle-tag-select">
<option value="">? Notiz</option>
<option value="poison">💀 Gift</option>
<option value="wine">🍷 Wein</option>
<option value="ahead">🔥 Vorwärts</option>
<option value="back">🟣 Zurück</option>
</select>
</div>
<!-- Bottle 7 (BACK - The Giant / Largest!) -->
<div class="bottle-slot" data-index="7">
<svg class="bottle-svg" width="60" height="135" viewBox="0 0 70 140">
<!-- Giant Round Carafe (The Giant!) -->
<rect x="27" y="8" width="16" height="25" fill="#8B4513" rx="3" />
<rect x="24" y="0" width="22" height="10" fill="#b08968" rx="3" />
<path d="M22,35 Q5,55 5,95 Q5,135 35,135 Q65,135 65,95 Q65,55 48,35 Z" fill="#b5179e" opacity="0.85"/>
<path d="M22,35 Q5,55 5,95 Q5,135 35,135 Q65,135 65,95 Q65,55 48,35 Z" stroke="#f72585" stroke-width="2" fill="none"/>
<ellipse cx="35" cy="95" rx="16" ry="22" fill="#560bad" opacity="0.6"/>
</svg>
<div class="bottle-pedestal" style="border-color: #f72585; color: #ff70a6;">VII (Riese)</div>
<select class="bottle-tag-select">
<option value="">? Notiz</option>
<option value="poison">💀 Gift</option>
<option value="wine">🍷 Wein</option>
<option value="ahead">🔥 Vorwärts</option>
<option value="back">🟣 Zurück</option>
</select>
</div>
</div>
</div>
<!-- Selection & Drinking Actions -->
<div style="text-align: center; margin-top: 1.5rem;">
<div id="selectedBottleInfo" style="font-size: 1.15rem; color: var(--gold); margin-bottom: 1.25rem;">
👆 <em>Klicke auf eine der 7 Flaschen auf dem Altar, um sie zu prüfen und zu trinken.</em>
</div>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
<button id="btnDrinkAhead" class="btn-magical" disabled style="background: linear-gradient(135deg, #1b092b, #431272, #7209b7); color: #fff; border: 1px solid #ffd700;">
🖤 Trank trinken & durch das SCHWARZE FEUER (Vorwärts zum Stein)
</button>
<button id="btnDrinkBack" class="btn-magical" disabled style="background: linear-gradient(135deg, #2b0938, #5e1178, #9d4edd); color: #fff; border: 1px solid #c77dff;">
🟣 Trank trinken & durch die VIOLETTEN FLAMMEN (Zurück)
</button>
</div>
</div>
</div>
<!-- Hermine's Logic Notebook (Collapsible Clues) -->
<div class="dungeon-card" style="margin-top: 2rem;">
<details>
<summary style="cursor: pointer; font-size: 1.2rem; color: var(--gold); font-weight: bold;">
📖 Hermines Logik-Spickzettel & Denkhilfe öffnen (Hier klicken)
</summary>
<div style="margin-top: 1rem; line-height: 1.8; color: var(--text-light); font-size: 1rem;">
<p><strong>Die 4 genialen Schlussfolgerungen aus Snapes Versen:</strong></p>
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
<li><strong>Hinweis 4:</strong> Flasche II und VI schmecken identisch (Zwillinge). Da es nur 2 Brennnesselweine gibt, sind II und VI zwingend der Wein!</li>
<li><strong>Hinweis 1:</strong> Links neben jedem Wein steht immer Gift. Daher müssen Flasche I (links von II) und Flasche V (links von VI) Gift sein!</li>
<li><strong>Hinweis 2:</strong> Flasche I und VII sind unterschiedlich. Da I Gift ist, kann VII kein Gift sein. Außerdem bringt keines der beiden Enden vorwärts.</li>
<li><strong>Hinweis 3:</strong> Weder der <strong>Zwerg (Flasche III)</strong> noch der <strong>Riese (Flasche VII)</strong> bergen Gift. Da Flasche III die Vorwärts-Flasche ist, führt nur sie durch das schwarze Feuer! Flasche VII bringt dich durch die violetten Flammen sicher zurück.</li>
</ul>
</div>
</details>
</div>
<div style="text-align: center; margin-top: 1.5rem;">
<a href="/sliding" class="btn-control" style="display: inline-flex; margin: 0 auto;">
🧩 Zum mechanischen Alchemie-Schieberätsel ➔
</a>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/bottles.js?v=1.0"></script>
{% endblock %}
+48
View File
@@ -0,0 +1,48 @@
{% extends "base.html" %}
{% block title %}Kammer I: Der Flug der geflügelten Schlüssel · Hogwarts Escape{% endblock %}
{% block content %}
<div class="parchment-scroll">
<h1 class="parchment-title">🧹 Kammer I: Der Besenflug 🗝️</h1>
<p class="riddle-poem" style="font-size: 1.25rem; margin: 0.5rem 0;">
"Hunderte metallischer Flügel schwirren wie Vögel unter der Decke des Gewölbes.<br>
Die schwere Kerkertür am anderen Ende ist fest verschlossen.<br>
Nur ein einziger Schlüssel passt: Ein alter, großer Silberschlüssel mit geknicktem blauem Flügel!"
</p>
</div>
<div class="canvas-wrapper">
<div class="game-hud">
<div>⏱️ Zeit: <strong id="timerVal">0s</strong></div>
<div>✨ Punkte: <strong id="scoreVal">0</strong></div>
<div>🎯 Mission: <span id="missionText">Fange den Schlüssel mit geknicktem Flügel!</span></div>
</div>
<canvas id="broomCanvas"></canvas>
</div>
<!-- Mobile Touch Controls -->
<div class="mobile-controls">
<button id="mBtnUp" class="btn-control" style="font-size: 1.2rem; padding: 0.8rem 1.4rem;">▲ Hoch</button>
<button id="mBtnBoost" class="btn-control" style="font-size: 1.2rem; padding: 0.8rem 1.4rem; background: var(--gold); color: #000;">⚡ Turbo</button>
<button id="mBtnDown" class="btn-control" style="font-size: 1.2rem; padding: 0.8rem 1.4rem;">▼ Runter</button>
</div>
<div class="dungeon-card" style="margin-top: 1.5rem;">
<p id="statusMsg" style="text-align: center; font-size: 1.15rem; color: var(--gold); margin-bottom: 0.8rem;">
🎮 <strong>Steuerung:</strong> Pfeiltasten / WASD / Mausbewegung zum Fliegen · <strong>Leertaste / Klick</strong> für Besen-Turbo!
</p>
<p style="text-align: center; color: var(--text-dim); font-size: 0.95rem;">
Fliege durch den Raum, jage den ausweichenden Silberschlüssel mit dem verletzten Flügel und fliege nach dem Fang zur Tür ganz rechts!
</p>
</div>
<div style="text-align: center; margin-top: 1rem;">
<a href="/bottles" class="nav-link" style="color: var(--text-dim);">Direkt weiter zu Snapes Flaschenkammer 🧪 ➔</a>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/broom.js?v=1.0"></script>
{% endblock %}
+58
View File
@@ -0,0 +1,58 @@
{% extends "base.html" %}
{% block title %}Escape Gemeistert! Der Stein der Weisen ist in Sicherheit!{% endblock %}
{% block content %}
<div class="parchment-scroll" style="text-align: center;">
<h1 class="parchment-title" style="font-size: 2.3rem;">⚡ ESCAPE GEMEISTERT! ⚡</h1>
<div style="font-size: 5rem; margin: 1rem 0; filter: drop-shadow(0 0 25px #ff0055); animation: stonePulse 2s infinite alternate;">
💎
</div>
<style>
@keyframes stonePulse {
0% { transform: scale(1); filter: drop-shadow(0 0 15px #e63946); }
100% { transform: scale(1.12); filter: drop-shadow(0 0 35px #ff0055); }
}
</style>
<p class="riddle-poem" style="font-size: 1.4rem;">
"Der eisige Kälteschleier der dritten Phiole trug dich unbeschadet durch das schwarze Feuer.<br>
Dahinter stand der goldene Spiegel Nerhegeb...<br>
Und tief in deiner Tasche spürst du plötzlich ein schweres, pulsierendes Gewicht:<br>
<strong>Der Stein der Weisen ist in Sicherheit!</strong>"
</p>
</div>
<div class="dungeon-card" style="text-align: center; max-width: 650px; margin: 0 auto 2rem auto;">
<h2 style="color: var(--gold); margin-bottom: 1rem;">📜 Hogwarts Escape Urkunde</h2>
<p style="color: var(--text-dim); line-height: 1.7; margin-bottom: 1.5rem;">
Du hast bewiesen, dass Mut, Flugkunst auf dem Besen und unbestechliche Logik stärker sind als jede dunkle Magie.
Professor Dumbledore und das gesamte Kollegium von Hogwarts sprechen dir ihre höchste Anerkennung aus!
</p>
<div style="background: rgba(229, 185, 72, 0.1); border: 2px dashed var(--gold); border-radius: 10px; padding: 1.25rem; margin-bottom: 1.5rem;">
<div style="font-size: 1.2rem; color: var(--gold); font-weight: bold; margin-bottom: 0.5rem;">
Auszeichnung: Retter des Steins der Weisen
</div>
<div style="color: var(--text-light); font-size: 0.95rem;">
Besenflug gemeistert: <strong>{% if state.broom_solved %}Ja ({{ state.broom_score }} Pkt){% else %}Übersprungen{% endif %}</strong><br>
Snapes Flammenkammer gelöst: <strong>Ja (Flasche III)</strong>
</div>
</div>
<div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
<a href="https://quiz.dev.waiswuaschd.de" class="btn-magical" target="_blank" rel="noopener">
📜 Zum großen Hogwarts-Quiz ↗
</a>
<button onclick="restartEscape()" class="btn-control" style="font-size: 1rem; padding: 0.6rem 1.2rem;">
🔄 Nochmal spielen
</button>
</div>
</div>
<script>
async function restartEscape() {
await fetch('/api/reset', { method: 'POST' });
window.location.href = '/';
}
</script>
{% endblock %}
+97
View File
@@ -0,0 +1,97 @@
{% 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 %}
+40
View File
@@ -0,0 +1,40 @@
{% extends "base.html" %}
{% block title %}Alchemie-Schieberätsel · Hogwarts Escape{% endblock %}
{% block content %}
<div class="parchment-scroll">
<h1 class="parchment-title">🧩 Das Alchemie-Schieberätsel ⚗️</h1>
<p class="riddle-poem" style="font-size: 1.25rem; margin: 0.5rem 0;">
"Auf dem antiken Steinsockel ruht ein uralter Verschlussmechanismus.<br>
Acht alchemistische Essenzen sind durcheinandergeraten.<br>
Schiebe die Phiolen und Runen auf die freien Felder, bis alle Plätze von 1 bis 8 geordnet sind!"
</p>
</div>
<div class="dungeon-card" style="text-align: center;">
<div style="display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; font-size: 1.2rem; color: var(--gold);">
<div>⏱️ Zeit: <strong id="slidingTimer">0s</strong></div>
<div>🔄 Züge: <strong id="slidingMoves">0</strong></div>
</div>
<div class="sliding-board-container">
<div id="slidingGrid" class="sliding-grid">
<!-- Tiles rendered via sliding.js -->
</div>
</div>
<div style="margin-top: 1.5rem; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
<button id="btnScramble" class="btn-control" style="font-size: 1rem; padding: 0.6rem 1.2rem;">
🎲 Neu mischen
</button>
<a href="/bottles" class="btn-magical">
🧪 Zu Snapes Flaschenrätsel
</a>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/sliding.js?v=1.0"></script>
{% endblock %}