Maxi
287 lines
15 KiB
HTML
Executable File
287 lines
15 KiB
HTML
Executable File
{% extends "base.html" %}
|
|
|
|
{% block title %}Kammer III: Die Zaubertrank-Brauküche · Hogwarts Escape{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="parchment-scroll">
|
|
<h1 class="parchment-title">⚗️ Kammer III: Die Zaubertrank-Brauküche ⚗️</h1>
|
|
<p class="riddle-poem" style="font-size: 1.15rem; margin: 0.3rem 0;">
|
|
"Snapes massiver Kupferkessel dampft im Halbdunkel des Kerkers.<br>
|
|
Um das Tor zu öffnen, musst du das flüssige Gold des Glücks brauen: <strong>Felix Felicis</strong>!"
|
|
</p>
|
|
</div>
|
|
|
|
{% if is_locked and lock_info %}
|
|
<div class="chamber-lock-banner">
|
|
<div class="chamber-lock-icon">🔒</div>
|
|
<h2 class="chamber-lock-title">Kammer Versiegelt!</h2>
|
|
<p class="chamber-lock-desc">
|
|
{{ lock_info.reason }}
|
|
</p>
|
|
<div class="chamber-req-box">
|
|
<div class="chamber-req-icon">{{ lock_info.item_icon }}</div>
|
|
<div class="chamber-req-info">
|
|
<strong>{{ lock_info.item_name }}</strong>
|
|
<span>Erforderlich aus: {{ lock_info.from_chamber }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="chamber-lock-actions">
|
|
<a href="{{ lock_info.from_url }}" class="btn-magical">
|
|
➔ Zu {{ lock_info.from_chamber }} gehen
|
|
</a>
|
|
<a href="?alohomora=1" class="alohomora-link">
|
|
✨ Zauberspruch »Alohomora« wirken (Prüfung für Spielleiter / Tester freischalten)
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="brew-container">
|
|
<!-- Recipe Instruction Scroll -->
|
|
<div class="recipe-book">
|
|
<span id="stepBadge" class="recipe-step-badge">Schritt 1: Zutaten dosieren</span>
|
|
<h3 id="stepInstruction" style="color: var(--gold); margin: 0.25rem 0; font-size: 1.25rem;">
|
|
Dosiere die 3 Essenzen nach Snapes Rezeptur!
|
|
</h3>
|
|
<p id="stepSubtext" style="color: var(--text-dim); font-size: 0.9rem; margin: 0 0 0.4rem 0;">
|
|
Löse Snapes Rätselnotiz, um die Mengenangaben für Felix Felicis herauszufinden.
|
|
</p>
|
|
<button type="button" class="btn-subtle" style="font-size: 0.9rem; border-color: var(--gold); color: var(--gold); padding: 0.4rem 0.9rem;" onclick="openRecipeRiddleModal()">
|
|
📜 Snapes Rezeptur-Notiz öffnen
|
|
</button>
|
|
</div>
|
|
|
|
<!-- The SVG Cauldron Stage -->
|
|
<div class="cauldron-visual-container" id="cauldronZone">
|
|
<svg id="cauldronSvg" viewBox="0 0 320 280" class="cauldron-svg">
|
|
<defs>
|
|
<!-- Liquid Gradient (dynamic color) -->
|
|
<radialGradient id="liquidGrad" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#2ecc71" id="gradStop1" />
|
|
<stop offset="65%" stop-color="#16a085" id="gradStop2" />
|
|
<stop offset="100%" stop-color="#0b3b30" id="gradStop3" />
|
|
</radialGradient>
|
|
|
|
<!-- Cauldron Iron Body -->
|
|
<radialGradient id="cauldronBodyGrad" cx="35%" cy="30%" r="70%">
|
|
<stop offset="0%" stop-color="#4a4d52" />
|
|
<stop offset="45%" stop-color="#242629" />
|
|
<stop offset="100%" stop-color="#111214" />
|
|
</radialGradient>
|
|
|
|
<!-- Rim Gradient -->
|
|
<linearGradient id="rimGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#60646c" />
|
|
<stop offset="50%" stop-color="#303236" />
|
|
<stop offset="100%" stop-color="#151618" />
|
|
</linearGradient>
|
|
|
|
<!-- Fire Gradient -->
|
|
<linearGradient id="fireGrad" x1="0%" y1="100%" x2="0%" y2="0%">
|
|
<stop offset="0%" stop-color="#e74c3c" />
|
|
<stop offset="60%" stop-color="#f39c12" />
|
|
<stop offset="100%" stop-color="#f1c40f" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Fire Underneath -->
|
|
<g id="cauldronFlames" class="animated-flames">
|
|
<path d="M 85 265 Q 105 215 120 250 Q 140 195 160 250 Q 180 200 200 250 Q 220 215 235 265 Z" fill="url(#fireGrad)" opacity="0.9" />
|
|
<path d="M 110 265 Q 135 220 160 230 Q 185 220 210 265 Z" fill="#ffeaa7" opacity="0.85" />
|
|
</g>
|
|
|
|
<!-- Cauldron Feet -->
|
|
<rect x="75" y="240" width="18" height="25" rx="5" fill="#151618" />
|
|
<rect x="227" y="240" width="18" height="25" rx="5" fill="#151618" />
|
|
<rect x="151" y="245" width="18" height="22" rx="5" fill="#111214" />
|
|
|
|
<!-- Cauldron Big Belly -->
|
|
<ellipse cx="160" cy="180" rx="115" ry="85" fill="url(#cauldronBodyGrad)" stroke="#1a1a1a" stroke-width="4" />
|
|
|
|
<!-- Cauldron Gold Handles -->
|
|
<path d="M 38 135 Q 18 160 38 185" fill="none" stroke="#d4af37" stroke-width="7" stroke-linecap="round" />
|
|
<path d="M 282 135 Q 302 160 282 185" fill="none" stroke="#d4af37" stroke-width="7" stroke-linecap="round" />
|
|
|
|
<!-- Cauldron Outer Rim -->
|
|
<ellipse cx="160" cy="105" rx="100" ry="24" fill="url(#rimGrad)" stroke="#1a1a1a" stroke-width="4" />
|
|
|
|
<!-- Potion Fluid Surface -->
|
|
<ellipse id="liquidSurface" cx="160" cy="106" rx="88" ry="18" fill="url(#liquidGrad)" />
|
|
|
|
<!-- Bubbles in Liquid -->
|
|
<g id="potionBubbles">
|
|
<circle cx="135" cy="105" r="4" fill="#ffffff" opacity="0.6" class="bubble-anim b1" />
|
|
<circle cx="170" cy="108" r="5" fill="#ffffff" opacity="0.5" class="bubble-anim b2" />
|
|
<circle cx="155" cy="103" r="3" fill="#ffffff" opacity="0.7" class="bubble-anim b3" />
|
|
<circle cx="190" cy="105" r="4" fill="#ffffff" opacity="0.5" class="bubble-anim b4" />
|
|
<circle cx="120" cy="107" r="3" fill="#ffffff" opacity="0.6" class="bubble-anim b5" />
|
|
</g>
|
|
|
|
<!-- Animated Stirring Spoon -->
|
|
<g id="stirSpoon" style="display: none;">
|
|
<path d="M 160 25 L 160 115" stroke="#8b5a2b" stroke-width="8" stroke-linecap="round" />
|
|
<ellipse cx="160" cy="115" rx="16" ry="9" fill="#a0522d" />
|
|
</g>
|
|
|
|
<!-- Dropped Ingredient Animation Container -->
|
|
<text id="dropItemAnim" x="160" y="80" font-size="28" text-anchor="middle" style="display: none;"></text>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Step 1: Ingredient Dosage Shelf & +/- Controls -->
|
|
<div id="step1Wrapper" style="width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.75rem;">
|
|
<div style="font-size: 0.95rem; color: var(--gold); font-weight: bold; text-align: center;">
|
|
⚗️ Dosiere die Essenzen laut Snapes Notiz:
|
|
</div>
|
|
<div class="dose-grid">
|
|
<!-- Dragon Blood -->
|
|
<div class="dose-card">
|
|
<span style="font-size: 2.2rem;">🐉</span>
|
|
<strong style="color: var(--text-light); font-size: 0.85rem;">Drachenblut</strong>
|
|
<div class="dose-controls">
|
|
<button type="button" class="dose-btn" onclick="adjustDose('dragon', -1)">-</button>
|
|
<span id="doseValDragon" class="dose-val">0</span>
|
|
<button type="button" class="dose-btn" onclick="adjustDose('dragon', 1)">+</button>
|
|
</div>
|
|
</div>
|
|
<!-- Mandrake -->
|
|
<div class="dose-card">
|
|
<span style="font-size: 2.2rem;">🌿</span>
|
|
<strong style="color: var(--text-light); font-size: 0.85rem;">Alraune</strong>
|
|
<div class="dose-controls">
|
|
<button type="button" class="dose-btn" onclick="adjustDose('mandrake', -1)">-</button>
|
|
<span id="doseValMandrake" class="dose-val">0</span>
|
|
<button type="button" class="dose-btn" onclick="adjustDose('mandrake', 1)">+</button>
|
|
</div>
|
|
</div>
|
|
<!-- Star Dust -->
|
|
<div class="dose-card">
|
|
<span style="font-size: 2.2rem;">✨</span>
|
|
<strong style="color: var(--text-light); font-size: 0.85rem;">Sternenstaub</strong>
|
|
<div class="dose-controls">
|
|
<button type="button" class="dose-btn" onclick="adjustDose('star', -1)">-</button>
|
|
<span id="doseValStar" class="dose-val">0</span>
|
|
<button type="button" class="dose-btn" onclick="adjustDose('star', 1)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" id="brewVerifyBtn" class="btn-magical" style="padding: 0.85rem 1.8rem; font-size: 1.1rem; width: 100%; max-width: 340px;" onclick="verifyAndMixIngredients()">
|
|
🧪 Essenzen in den Kessel geben & prüfen
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Step 2: Two-Way Stirring Gauge (Links ↺ und Rechts ↻) -->
|
|
<div id="stirPanel" style="display: none; flex-direction: column; align-items: center; gap: 0.75rem; width: 100%;">
|
|
<div class="stir-gauge-wrapper">
|
|
<div style="font-size: 0.95rem; color: var(--gold); font-weight: bold; text-align: center;">
|
|
🥄 Rühr-Takt: <span id="stirPhaseLabel" style="color: #4cc9f0;">↺ LINKS (Phase 1)</span>
|
|
</div>
|
|
<div class="stir-track">
|
|
<div class="stir-target-zone"></div>
|
|
<div id="stirIndicatorBar" class="stir-indicator-bar"></div>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; width: 100%; font-size: 0.78rem; color: var(--text-dim);">
|
|
<span>Zu träge</span>
|
|
<span style="color: #2ecc71; font-weight: bold;">Ideal (40% - 75%)</span>
|
|
<span>Zu wild!</span>
|
|
</div>
|
|
<div style="font-size: 0.9rem; color: var(--text-light); font-weight: bold;">
|
|
Takt gehalten: <strong id="stirTimerVal" style="color: var(--gold);">0.0</strong> / 3.0s
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stir-buttons-row">
|
|
<button type="button" id="btnStirLeft" class="stir-action-btn active-target" onclick="stirTap('left')">
|
|
<span style="font-size: 1.6rem;">↺</span>
|
|
<span>Linksherum</span>
|
|
</button>
|
|
<button type="button" id="btnStirRight" class="stir-action-btn" onclick="stirTap('right')">
|
|
<span style="font-size: 1.6rem;">↻</span>
|
|
<span>Rechtsherum</span>
|
|
</button>
|
|
</div>
|
|
<span style="color: var(--text-dim); font-size: 0.82rem; text-align: center;">
|
|
Tippe rhythmisch, um den Balken im grünen Idealbereich zu halten!
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Step 3: Heat Control Panel -->
|
|
<div id="heatPanel" class="heat-control-panel">
|
|
<div style="color: var(--text-light); font-size: 0.95rem; text-align: center;">
|
|
🌡️ Halte die Temperatur mit dem Blasebalg im grünen Bereich:
|
|
</div>
|
|
<div class="temp-bar-container">
|
|
<div class="temp-ideal-zone" style="left: 45%; width: 40%;"></div>
|
|
<div id="tempIndicator" class="temp-indicator"></div>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; width: 100%; max-width: 320px; font-size: 0.8rem; color: var(--text-dim);">
|
|
<span>Kalt</span>
|
|
<span style="color: #2ecc71; font-weight: bold;">Ideal (45% - 85%)</span>
|
|
<span>Zu heiß!</span>
|
|
</div>
|
|
<div style="color: var(--gold); font-weight: bold; margin-top: 0.25rem;">
|
|
Ideale Hitze gehalten: <span id="heatTimer">0.0</span> / 3.0s
|
|
</div>
|
|
<button type="button" id="bellowsBtn" class="bellows-btn" onclick="pumpHeat()">
|
|
🔥 Blasebalg pumpen!
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Snape Reprimand Modal -->
|
|
<div id="snapeReprimandModal" class="snape-reprimand-modal">
|
|
<div class="snape-card">
|
|
<div class="snape-avatar">🧙♂️</div>
|
|
<span style="display: inline-block; background: rgba(142, 68, 173, 0.25); border: 1px solid #8e44ad; color: #d2b4de; font-size: 0.8rem; font-weight: bold; padding: 0.2rem 0.75rem; border-radius: 20px; text-transform: uppercase;">
|
|
Professor Severus Snape
|
|
</span>
|
|
<h3 style="color: #e74c3c; margin: 0.5rem 0 0.2rem 0; font-size: 1.35rem;">Kläglicher Fehltritt!</h3>
|
|
<div id="snapeReprimandText" class="snape-quote-box">
|
|
»Kläglich. Sogar ein Bergtroll mit verbundenen Augen hätte die Mengen besser ergründet.«
|
|
</div>
|
|
<button type="button" class="btn-magical" style="padding: 0.75rem 1.6rem; font-size: 1.05rem;" onclick="closeSnapeModal()">
|
|
🧹 Kessel säubern (Evanesco) & neu ansetzen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recipe Riddle Parchment Modal -->
|
|
<div id="recipeRiddleModal" class="snape-reprimand-modal">
|
|
<div class="snape-card" style="border-color: var(--gold); box-shadow: 0 0 45px rgba(229, 185, 72, 0.4);">
|
|
<div style="font-size: 3.2rem; margin-bottom: 0.3rem;">📜✨</div>
|
|
<h3 style="color: var(--gold); margin: 0.3rem 0; font-size: 1.4rem;">Snapes Felix-Felicis-Rezeptur</h3>
|
|
<div class="snape-quote-box" style="border-color: var(--gold);">
|
|
<em>»Drei Essenzen verlangt das flüssige Gold:<br><br>
|
|
• 🐉 <strong>Drachenblut:</strong> Die Köpfe des dreiköpfigen Wächters Fluffy (3 Tropfen)<br>
|
|
• 🌿 <strong>Alraunenblatt:</strong> Harrys treue Gefährten am Gryffindor-Tisch (Ron & Hermine = 2 Blätter)<br>
|
|
• ✨ <strong>Sternenstaub:</strong> Der eine Siegelring des Alchemisten (1 Prise)<br><br>
|
|
<strong>Rühren:</strong> 3 Sekunden gleichmäßig LINKS (↺), danach 3 Sekunden RECHTS (↻)! Zu hektisch oder zu heiß zerstört den Sud augenblicklich!«</em>
|
|
</div>
|
|
<button type="button" class="btn-magical" style="padding: 0.75rem 1.8rem; font-size: 1.05rem;" onclick="closeRecipeRiddleModal()">
|
|
➔ Verstanden, zum Kessel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success Container -->
|
|
<div id="successPanel" style="display: none; text-align: center; margin-top: 1rem; width: 100%;">
|
|
<div class="dungeon-card" style="border-color: #2ecc71;">
|
|
<div style="font-size: 3rem; margin-bottom: 0.5rem;">🧪✨🍀</div>
|
|
<h2 style="color: var(--gold); font-size: 1.8rem; margin-bottom: 0.5rem;">
|
|
Felix Felicis vollendet!
|
|
</h2>
|
|
<p style="color: var(--text-light); max-width: 500px; margin: 0 auto 1.25rem auto;">
|
|
Der Kessel erstrahlt in gleißendem Gold! Eine Phiole des reinen flüssigen Glücks wandert in deinen <strong>Zauberbeutel</strong>.
|
|
</p>
|
|
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
|
|
<a href="/cryptex" class="btn-magical">Zur nächsten Kammer: Das Drehschloss 🔐➔</a>
|
|
<a href="/" class="btn-control">Zurück zur Übersicht 🏰</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="/static/js/brew.js?v=6.0"></script>
|
|
{% endblock %}
|