Maxi
93 lines
4.6 KiB
HTML
Executable File
93 lines
4.6 KiB
HTML
Executable File
{% extends "base.html" %}
|
|
|
|
{% block title %}Kammer I: Der Goldene Ring-Flug · Hogwarts Escape{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="parchment-scroll">
|
|
<h1 class="parchment-title">🧹 Kammer I: Der Goldene Ring-Flug ⭕</h1>
|
|
<p class="riddle-poem" style="font-size: 1.25rem; margin: 0.5rem 0;">
|
|
"Schwinge dich auf deinen Rennbesen über den Dächern von Hogwarts!<br>
|
|
Durchfliege die magisch schwebenden goldenen Ringe, halte die Combo aufrecht<br>
|
|
und meistere den Parcours von Madam Hooch, um die nächste Pforte zu öffnen!"
|
|
</p>
|
|
</div>
|
|
|
|
<div class="canvas-wrapper" id="canvasWrapper">
|
|
<div class="game-hud">
|
|
<div>⏱️ Zeit: <strong id="timerVal">0s</strong></div>
|
|
<div>⭕ Ringe: <strong id="ringsVal" style="color: #ffd700;">0/12</strong></div>
|
|
<div>✨ Punkte: <strong id="scoreVal">0</strong></div>
|
|
<div>🧹 Zustand: <span id="livesVal" style="font-size: 1.1rem; letter-spacing: 2px;">💚💚💚</span></div>
|
|
<div id="comboVal" style="color: #00ffff; font-weight: bold; min-width: 60px;"></div>
|
|
</div>
|
|
|
|
<canvas id="broomCanvas" style="touch-action: none; -webkit-user-select: none; user-select: none; width: 100%; display: block;"></canvas>
|
|
|
|
<!-- Start Flight Overlay -->
|
|
<div id="broomStartOverlay" class="flight-start-overlay">
|
|
<div style="font-size: 2.8rem; margin-bottom: 0.3rem;">🧹✨⭕</div>
|
|
<h3 style="color: var(--gold); font-size: 1.45rem; margin: 0 0 0.4rem 0;">Bereit zum Abflug?</h3>
|
|
<p style="color: var(--text-light); font-size: 0.95rem; margin: 0 0 1.2rem 0; text-align: center; max-width: 320px;">
|
|
Fliege durch <strong>12 magische Ringe</strong>!<br>
|
|
<span style="color: #e74c3c;">⚠️ Weiche wilden Klatschern (💣) und schwebenden Felsen (🪨) aus!</span><br>
|
|
Steuere per Daumen über das Feld oder mit dem Steuerkreuz.
|
|
</p>
|
|
<button type="button" id="startFlightBtn" class="btn-magical" style="padding: 0.85rem 2.2rem; font-size: 1.2rem;">
|
|
⚡ Flug starten!
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Crash / Game Over Overlay -->
|
|
<div id="broomCrashOverlay" class="flight-start-overlay hidden">
|
|
<div style="font-size: 2.8rem; margin-bottom: 0.3rem;">💥🧹😵</div>
|
|
<h3 style="color: #e74c3c; font-size: 1.45rem; margin: 0 0 0.4rem 0;">Klatscher-Volltreffer!</h3>
|
|
<p style="color: var(--text-light); font-size: 0.95rem; margin: 0 0 1.2rem 0; text-align: center; max-width: 300px;">
|
|
Dein Besen hat die Balance verloren und Madam Hooch pfeift zum Abbruch!<br>
|
|
Halte Abstand zu den wirbelnden Eisenbällen!
|
|
</p>
|
|
<button type="button" id="restartFlightBtn" class="btn-magical" style="padding: 0.85rem 2.2rem; font-size: 1.2rem;">
|
|
🔄 Erneut abheben!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Flight Cockpit & D-Pad -->
|
|
<div class="mobile-flight-cockpit">
|
|
<div class="dpad-box">
|
|
<button type="button" id="mBtnUp" class="dpad-btn dpad-up" aria-label="Hoch">▲</button>
|
|
<div class="dpad-middle">
|
|
<button type="button" id="mBtnLeft" class="dpad-btn dpad-left" aria-label="Links">◀</button>
|
|
<div class="dpad-core">✨</div>
|
|
<button type="button" id="mBtnRight" class="dpad-btn dpad-right" aria-label="Rechts">▶</button>
|
|
</div>
|
|
<button type="button" id="mBtnDown" class="dpad-btn dpad-down" aria-label="Runter">▼</button>
|
|
</div>
|
|
|
|
<div class="mobile-flight-actions">
|
|
<button type="button" id="mBtnBoost" class="dpad-boost-btn">
|
|
⚡ TURBO
|
|
</button>
|
|
<div class="touch-hint">
|
|
💡 <em>Ziehe den Besen einfach mit dem Finger direkt von Ring zu Ring!</em>
|
|
</div>
|
|
</div>
|
|
</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> Wische mit dem Finger über das Spielfeld oder nutze Pfeiltasten / D-Pad zum Fliegen · <strong>Turbo</strong> für rasanten Schub!
|
|
</p>
|
|
<p style="text-align: center; color: var(--text-dim); font-size: 0.95rem;">
|
|
Sammle 12 Ringe, um den Parcours abzuschließen. Schnelligkeit und Combos bringen Zusatzpunkte!
|
|
</p>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 1rem;">
|
|
<a href="/duel" class="nav-link" style="color: var(--text-dim);">Direkt weiter zum Zauberspruch-Duell 🪄 ➔</a>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="/static/js/broom.js?v=6.0"></script>
|
|
{% endblock %}
|