Initial commit: Modernes Harry Potter Escape Quiz Portal (FastAPI & MariaDB)

2026-09-21 11:29:18 +02:00
commit c3a21369ef
50 changed files with 3346 additions and 0 deletions
@@ -0,0 +1,82 @@
+{% extends "base.html" %}
+
+{% block title %}✨ Magisches Harry-Potter-Escape-Quiz ✨{% endblock %}
+
+{% block content %}
+<div class="quiz-wrapper">
+    <header class="quiz-header">
+        <h1 class="glow-title">✨ Magisches Hogwarts-Escape-Quiz ✨</h1>
+        <p class="subtitle">15 knifflige Rätsel aus der Zauberwelt warten auf dich</p>
+    </header>
+
+    <!-- Brief-Intro / Startmaske -->
+    <div id="introCard" class="card intro-card">
+        <div class="intro-envelope" id="envelope">
+            <div class="envelope-body">
+                <div class="envelope-flap"></div>
+                <div class="wax-seal">H</div>
+                <div class="letter-preview">
+                    <p class="letter-text">Hogwarts-Schule für Hexerei und Zauberei</p>
+                </div>
+            </div>
+        </div>
+        <div class="intro-content">
+            <p class="intro-text">
+                Ein verzauberter Brief aus Hogwarts schwebt vor dir in der Luft.<br>
+                Bist du bereit, die Prüfungen abzulegen und deine Hauspunkte zu sichern?
+            </p>
+            <button id="startBtn" class="btn btn-primary btn-large" onclick="startGame()">
+                📜 Siegel brechen & Brief öffnen
+            </button>
+        </div>
+    </div>
+
+    <!-- Spielbereich (initial versteckt) -->
+    <div id="gameCard" class="game-area hidden">
+        <!-- Fortschritt & Punkte -->
+        <div class="status-panel">
+            <div class="progress-info">
+                <span id="questionCounter">Frage 1 von {{ question_count }}</span>
+                <span id="pointsCounter" class="points-badge">🏆 Hauspunkte: 0</span>
+            </div>
+            <div class="progress-container">
+                <div id="progressBar" class="progress-bar"></div>
+            </div>
+        </div>
+
+        <!-- Frage-Container -->
+        <div id="frageBox" class="card question-card">
+            <div class="question-meta">
+                <span id="badgeCategory" class="badge">⚡ Harry Potter</span>
+                <span id="attemptBadge" class="attempt-badge">Versuch 1 von 3</span>
+            </div>
+
+            <h2 id="frageText" class="question-text">Lade verzauberte Schriftrollen...</h2>
+
+            <div class="answer-form">
+                <input type="text" id="answerInput" class="input-answer" placeholder="Deine Antwort hier eingeben..." autocomplete="off">
+                
+                <div class="btn-group">
+                    <button id="checkBtn" class="btn btn-primary" onclick="checkAnswer()">
+                        ✨ Zauber prüfen
+                    </button>
+                    <button id="hintBtn" class="btn btn-secondary" onclick="requestHint()">
+                        💡 Zaubertipp
+                    </button>
+                </div>
+            </div>
+
+            <div id="hintBox" class="hint-box hidden">
+                <strong>📜 Notiz aus der verbotenen Abteilung:</strong>
+                <p id="hintText"></p>
+            </div>
+
+            <div id="feedbackBox" class="feedback-box"></div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="/static/js/quiz.js"></script>
+{% endblock %}