Maxi
104 lines
4.3 KiB
HTML
Executable File
104 lines
4.3 KiB
HTML
Executable File
{% extends "base.html" %}
|
|
|
|
{% block title %}Kammer V: Wichtel-Panik · Hogwarts Escape{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="parchment-scroll">
|
|
<h1 class="parchment-title">🧚 Kammer V: Wichtel-Panik 🧚</h1>
|
|
<p class="riddle-poem" style="font-size: 1.25rem;">
|
|
"Lockharts Eisenkäfig ist aufgeplatzt! Ein Schwarm frecher kornischer Wichtel wirbelt durch den Raum.<br>
|
|
Banne <strong>10 Wichtel mit dem Einfrier-Zauber <em>»Immobilus!«</em> ❄️</strong> mit schnellen Fingern!<br>
|
|
<span style="color: #e74c3c;">Vorsicht: Tippe nicht auf Neville Longbottom (👦), der an der Decke baumelt!</span>"
|
|
</p>
|
|
</div>
|
|
|
|
<div class="pixies-container">
|
|
<!-- Top HUD Bar -->
|
|
<div class="pixies-hud">
|
|
<div>
|
|
🧚 Gefangen: <strong id="pixieScore" style="color: var(--gold); font-size: 1.3rem;">0</strong> / 10
|
|
</div>
|
|
<div>
|
|
⏳ Zeit: <strong id="pixieTimer" style="color: #3498db; font-size: 1.3rem;">35</strong>s
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3x3 Magical Grid Arena -->
|
|
<div class="pixies-arena" id="pixieArena">
|
|
<!-- Hole 0 -->
|
|
<div class="pixie-hole" data-idx="0">
|
|
<span class="hole-decor">📚</span>
|
|
<div class="pixie-target" id="target0">🧚</div>
|
|
</div>
|
|
<!-- Hole 1 -->
|
|
<div class="pixie-hole" data-idx="1">
|
|
<span class="hole-decor">🗝️</span>
|
|
<div class="pixie-target" id="target1">🧚</div>
|
|
</div>
|
|
<!-- Hole 2 -->
|
|
<div class="pixie-hole" data-idx="2">
|
|
<span class="hole-decor">🕯️</span>
|
|
<div class="pixie-target" id="target2">🧚</div>
|
|
</div>
|
|
<!-- Hole 3 -->
|
|
<div class="pixie-hole" data-idx="3">
|
|
<span class="hole-decor">🧪</span>
|
|
<div class="pixie-target" id="target3">🧚</div>
|
|
</div>
|
|
<!-- Hole 4 -->
|
|
<div class="pixie-hole" data-idx="4">
|
|
<span class="hole-decor">📦</span>
|
|
<div class="pixie-target" id="target4">🧚</div>
|
|
</div>
|
|
<!-- Hole 5 -->
|
|
<div class="pixie-hole" data-idx="5">
|
|
<span class="hole-decor">🪟</span>
|
|
<div class="pixie-target" id="target5">🧚</div>
|
|
</div>
|
|
<!-- Hole 6 -->
|
|
<div class="pixie-hole" data-idx="6">
|
|
<span class="hole-decor">📜</span>
|
|
<div class="pixie-target" id="target6">🧚</div>
|
|
</div>
|
|
<!-- Hole 7 -->
|
|
<div class="pixie-hole" data-idx="7">
|
|
<span class="hole-decor">🕸️</span>
|
|
<div class="pixie-target" id="target7">🧚</div>
|
|
</div>
|
|
<!-- Hole 8 -->
|
|
<div class="pixie-hole" data-idx="8">
|
|
<span class="hole-decor">🕰️</span>
|
|
<div class="pixie-target" id="target8">🧚</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Start & Status Overlay -->
|
|
<div id="startOverlay" style="text-align: center; margin-top: 0.5rem; width: 100%;">
|
|
<button type="button" id="startPixieBtn" class="btn-magical" style="padding: 0.9rem 2.2rem; font-size: 1.25rem;" onclick="startPixieHunt()">
|
|
⚡ Jagd beginnen!
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Success Panel -->
|
|
<div id="pixieSuccess" 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;">
|
|
Ruhe im Klassenzimmer!
|
|
</h2>
|
|
<p style="color: var(--text-light); max-width: 500px; margin: 0 auto 1.25rem auto;">
|
|
Alle Wichtel sind mit <em>Immobilus</em> eingefroren und sicher im <strong>Wichtelglas</strong> verwahrt. Der Weg zu Snapes Flammenkammer liegt frei!
|
|
</p>
|
|
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
|
|
<a href="/bottles" class="btn-magical">Zur Flammenkammer (Snapes Flaschen) 🧪➔</a>
|
|
<a href="/" class="btn-control">Zurück zur Übersicht 🏰</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="/static/js/pixies.js?v=1.0"></script>
|
|
{% endblock %}
|