Initial commit: Harry Potter Escape Adventure on bootle.dev.waiswuaschd.de
This commit is contained in:
Executable
+66
@@ -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>
|
||||
Executable
+242
@@ -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 %}
|
||||
Executable
+48
@@ -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 %}
|
||||
Executable
+58
@@ -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 %}
|
||||
Executable
+97
@@ -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 %}
|
||||
Executable
+40
@@ -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 %}
|
||||
Reference in New Issue
Block a user