feat: Add lore pack, UI adjustments, requirements.txt and INSTALL.md
This commit is contained in:
kobold-ai
+160
-174
@@ -1,174 +1,160 @@
|
||||
{% 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" id="pageTitle">✨ Magisches Hogwarts-Escape-Quiz ✨</h1>
|
||||
<p class="subtitle" id="pageSubtitle">10 knifflige Rätsel aus der Zauberwelt warten auf dich</p>
|
||||
</header>
|
||||
|
||||
<!-- Brief-Intro / Startmaske -->
|
||||
<div id="introCard" class="card intro-card intro-parchment-wrapper">
|
||||
<!-- Antiker geschlossener Hogwarts-Umschlag (öffnet sich bei Klick auf das Siegel) -->
|
||||
<div class="antique-envelope-scene" id="envelope">
|
||||
<div class="envelope-base">
|
||||
<!-- Dunkleres Pergament-Innenfutter -->
|
||||
<div class="envelope-interior"></div>
|
||||
|
||||
<!-- Der darin liegende Briefbogen (gleitet beim Öffnen majestätisch hervor) -->
|
||||
<div class="letter-sheet" id="letterSheet">
|
||||
<div class="sheet-parchment-layer"></div>
|
||||
<header class="letter-header">
|
||||
<div class="letter-crest-box">
|
||||
<img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts Crest" class="letter-crest-sketch">
|
||||
</div>
|
||||
<h3 class="letter-school-name" id="letterSchoolTitle">Hogwarts-Schule für Hexerei und Zauberei</h3>
|
||||
<p class="letter-headmaster" id="letterHeadmaster">Schulleiter: Albus Dumbledore<br><span>(Großhexenmeister, Träger des Merlin-Ordens 1. Klasse)</span></p>
|
||||
<div class="letter-ornament-line">
|
||||
<span class="ornament-leaf">❦</span>
|
||||
<span class="ornament-rule"></span>
|
||||
<span class="ornament-shield">✦</span>
|
||||
<span class="ornament-rule"></span>
|
||||
<span class="ornament-leaf">❧</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="letter-body-handwritten">
|
||||
<p class="letter-salutation" id="letterSalutation">Liebe Hexe, lieber Zauberer,</p>
|
||||
<p class="letter-paragraph" id="letterParagraph1">
|
||||
wir freuen uns, dir mitteilen zu dürfen, dass du zu den <strong>Magischen Z.A.G.-Prüfungen</strong> an der Hogwarts-Schule zugelassen bist.
|
||||
</p>
|
||||
<p class="letter-paragraph" id="letterParagraph2">
|
||||
Zehn anspruchsvolle Prüfungsfragen entscheiden über deinen Rang in den Chroniken. Zeige deinen Scharfsinn und sichere bis zu <strong>1.000 Hauspunkte</strong> für dein Haus!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<footer class="letter-signature-block">
|
||||
<p class="letter-closing" id="letterClosing">Mit vorzüglicher Hochachtung,</p>
|
||||
<p class="letter-signature-ink" id="letterSignature">Minerva McGonagall</p>
|
||||
<p class="letter-sign-title" id="letterSignTitle">Stellvertretende Schulleiterin</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Vordere Umschlagtasche mit handschriftlicher Smaragd-Anschrift -->
|
||||
<div class="envelope-front-pocket">
|
||||
<div class="envelope-sketch-border"></div>
|
||||
<div class="envelope-address-block">
|
||||
<p class="addr-line addr-school" id="envelopeLetter">Hogwarts-Schule für Hexerei und Zauberei</p>
|
||||
<p class="addr-line addr-recipient" id="envelopeRecipient">An den ehrenwerten Zauberschüler</p>
|
||||
<p class="addr-line addr-location" id="envelopeLocation">Auf dem Prüfungspfad • Schloss Hogwarts</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Obere Klappe des Umschlags (überdeckt die Tasche und wird vom Siegel gehalten) -->
|
||||
<div class="envelope-closing-flap">
|
||||
<div class="flap-sketch-line"></div>
|
||||
</div>
|
||||
|
||||
<!-- Handgezeichnetes Wachssiegel über der Klappenspitze -->
|
||||
<div class="sketched-wax-seal" id="waxSeal" onclick="startGame()" title="Siegel brechen & Brief öffnen">
|
||||
<img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts-Wappen Siegel" class="seal-crest-img">
|
||||
<div class="seal-emboss-ring"></div>
|
||||
<div class="seal-glow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auswahlbereich unter dem Pergament -->
|
||||
<div class="intro-content intro-controls-panel">
|
||||
<p class="intro-subnote" id="introDesc">
|
||||
Ein verzauberter Pergamentbrief aus Hogwarts liegt vor dir.<br>
|
||||
Wähle deinen Schwierigkeitsgrad und brich das rote Zaubersiegel:
|
||||
</p>
|
||||
|
||||
<!-- Difficulty Selector Chips -->
|
||||
<div class="difficulty-selection">
|
||||
<span class="difficulty-label" id="diffLabel">Schwierigkeitsgrad wählen:</span>
|
||||
<div class="difficulty-chips" role="radiogroup" aria-label="Schwierigkeitsgrad">
|
||||
<button type="button" class="diff-chip active" data-diff="all" onclick="selectDifficulty('all')">
|
||||
<span class="diff-icon">🎲</span> <span class="diff-text" id="diffAllText">Alle gemischt</span>
|
||||
</button>
|
||||
<button type="button" class="diff-chip" data-diff="easy" onclick="selectDifficulty('easy')">
|
||||
<span class="diff-icon">🟢</span> <span class="diff-text" id="diffEasyText">Leicht</span>
|
||||
</button>
|
||||
<button type="button" class="diff-chip" data-diff="medium" onclick="selectDifficulty('medium')">
|
||||
<span class="diff-icon">🟡</span> <span class="diff-text" id="diffMedText">Mittel</span>
|
||||
</button>
|
||||
<button type="button" class="diff-chip" data-diff="hard" onclick="selectDifficulty('hard')">
|
||||
<span class="diff-icon">🔴</span> <span class="diff-text" id="diffHardText">Schwer</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="startBtn" class="btn btn-primary btn-large btn-break-seal" onclick="startGame()">
|
||||
📜 Siegel brechen & Brief öffnen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Spielbereich (initial versteckt) -->
|
||||
<div id="gameCard" class="game-area hidden">
|
||||
<!-- Fortschritt & Punkte & Zeit -->
|
||||
<div class="status-panel">
|
||||
<div class="progress-info">
|
||||
<span id="questionCounter">Frage 1 von 10</span>
|
||||
<span id="timerBadge" class="timer-badge">⏱️ 00:00</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">
|
||||
<div class="meta-left">
|
||||
<span id="badgeCategory" class="badge">⚡ Harry Potter</span>
|
||||
<span id="badgeDifficulty" class="badge badge-diff">🟢 Leicht</span>
|
||||
</div>
|
||||
<span id="attemptBadge" class="attempt-badge">Versuch 1 von 3</span>
|
||||
</div>
|
||||
|
||||
<h2 id="frageText" class="question-text">Lade verzauberte Schriftrollen...</h2>
|
||||
|
||||
<!-- Freitext-Eingabe (wenn question_type == 'text') -->
|
||||
<div id="textAnswerGroup" 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()">
|
||||
✨ Antwort prüfen
|
||||
</button>
|
||||
<button id="hintBtn" class="btn btn-secondary" onclick="requestHint()">
|
||||
💡 Hinweis anzeigen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Multiple-Choice-Auswahl (wenn question_type == 'multiple_choice') -->
|
||||
<div id="choiceAnswerGroup" class="choice-group hidden">
|
||||
<div id="choiceOptionsContainer" class="choice-grid"></div>
|
||||
<div class="btn-group" style="margin-top: 15px;">
|
||||
<button id="hintBtnMC" class="btn btn-secondary" onclick="requestHint()">
|
||||
💡 Hinweis anzeigen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hintBox" class="hint-box hidden">
|
||||
<strong id="hintHeading">📜 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?v=3.2"></script>
|
||||
{% endblock %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}⚡ PotterTrivia – Das Harry-Potter-Wissensquiz{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="quiz-wrapper">
|
||||
<header class="quiz-header">
|
||||
<div class="hero-pill" id="heroPill">⚡ {{ question_count }} Fragen im Wissens-Pool · Buch & Film</div>
|
||||
<h1 class="glow-title" id="pageTitle">Harry Potter Wissensquiz</h1>
|
||||
<p class="subtitle" id="pageSubtitle">Teste dein Wissen über Bücher, Filme, Geschöpfe und Zaubersprüche – direkt & ohne Umwege.</p>
|
||||
</header>
|
||||
|
||||
<!-- Kompaktes Direct-Start Dashboard -->
|
||||
<div id="introCard" class="card start-dashboard-card">
|
||||
<div class="dashboard-grid">
|
||||
<!-- Sektion 1: Schwierigkeitsgrad -->
|
||||
<div class="config-section">
|
||||
<div class="config-header">
|
||||
<span class="config-step">1</span>
|
||||
<span class="difficulty-label" id="diffLabel">Schwierigkeitsgrad</span>
|
||||
</div>
|
||||
<div class="difficulty-chips" role="radiogroup" aria-label="Schwierigkeitsgrad">
|
||||
<button type="button" class="diff-chip active" data-diff="all" onclick="selectDifficulty('all')">
|
||||
<span class="diff-icon">🎲</span>
|
||||
<span class="diff-text" id="diffAllText">Alle Stufen</span>
|
||||
</button>
|
||||
<button type="button" class="diff-chip" data-diff="easy" onclick="selectDifficulty('easy')">
|
||||
<span class="diff-icon">🟢</span>
|
||||
<span class="diff-text" id="diffEasyText">Leicht</span>
|
||||
</button>
|
||||
<button type="button" class="diff-chip" data-diff="medium" onclick="selectDifficulty('medium')">
|
||||
<span class="diff-icon">🟡</span>
|
||||
<span class="diff-text" id="diffMedText">Mittel</span>
|
||||
</button>
|
||||
<button type="button" class="diff-chip" data-diff="hard" onclick="selectDifficulty('hard')">
|
||||
<span class="diff-icon">🔴</span>
|
||||
<span class="diff-text" id="diffHardText">Schwer (Experte)</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sektion 2: Kategorie-Filter -->
|
||||
<div class="config-section">
|
||||
<div class="config-header">
|
||||
<span class="config-step">2</span>
|
||||
<span class="difficulty-label" id="catLabel">Themengebiet wählen</span>
|
||||
</div>
|
||||
<div class="category-chips" role="radiogroup" aria-label="Themengebiet">
|
||||
<button type="button" class="cat-chip active" data-cat="all" onclick="selectCategory('all')">
|
||||
<span>✨</span> <span id="catAllText">Alle Kategorien</span>
|
||||
</button>
|
||||
<button type="button" class="cat-chip" data-cat="books" onclick="selectCategory('books')">
|
||||
<span>📖</span> <span id="catBooksText">Buchwissen</span>
|
||||
</button>
|
||||
<button type="button" class="cat-chip" data-cat="movies" onclick="selectCategory('movies')">
|
||||
<span>🎬</span> <span id="catMoviesText">Filmwissen</span>
|
||||
</button>
|
||||
<button type="button" class="cat-chip" data-cat="creatures" onclick="selectCategory('creatures')">
|
||||
<span>🐉</span> <span id="catCreaturesText">Magische Geschöpfe</span>
|
||||
</button>
|
||||
<button type="button" class="cat-chip" data-cat="spells" onclick="selectCategory('spells')">
|
||||
<span>🪄</span> <span id="catSpellsText">Zaubersprüche & Tränke</span>
|
||||
</button>
|
||||
<button type="button" class="cat-chip" data-cat="characters" onclick="selectCategory('characters')">
|
||||
<span>🧙♂️</span> <span id="catCharsText">Charaktere</span>
|
||||
</button>
|
||||
<button type="button" class="cat-chip" data-cat="hogwarts" onclick="selectCategory('hogwarts')">
|
||||
<span>🏰</span> <span id="catHogwartsText">Hogwarts & Orte</span>
|
||||
</button>
|
||||
<button type="button" class="cat-chip" data-cat="quidditch" onclick="selectCategory('quidditch')">
|
||||
<span>🧹</span> <span id="catQuidditchText">Quidditch</span>
|
||||
</button>
|
||||
<button type="button" class="cat-chip" data-cat="lore" onclick="selectCategory('lore')">
|
||||
<span>🔮</span> <span id="catLoreText">Artefakte & Lore</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-footer">
|
||||
<div class="dashboard-rules" id="dashboardRules">
|
||||
<span>🎯 10 Fragen pro Runde</span>
|
||||
<span>·</span>
|
||||
<span>🔥 Streak-Zähler</span>
|
||||
<span>·</span>
|
||||
<span>💡 Bis zu 3 Versuche je Frage</span>
|
||||
</div>
|
||||
<button id="startQuizBtn" class="btn btn-primary btn-large btn-launch-quiz" onclick="startGame()">
|
||||
⚡ Quiz jetzt starten ➔
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Spielbereich (initial versteckt) -->
|
||||
<div id="gameCard" class="game-area hidden">
|
||||
<!-- HUD: Fortschritt, Streak, Zeit & Punkte -->
|
||||
<div class="status-panel">
|
||||
<div class="progress-info">
|
||||
<span id="questionCounter" class="hud-pill">Frage 1 / 10</span>
|
||||
<div class="hud-center-group">
|
||||
<span id="streakBadge" class="streak-badge" title="Antwort-Serie in Folge">🔥 0</span>
|
||||
<span id="timerBadge" class="timer-badge">⏱️ 00:00</span>
|
||||
</div>
|
||||
<span id="pointsCounter" class="points-badge">🏆 0 Pkt.</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">
|
||||
<div class="meta-left">
|
||||
<span id="badgeCategory" class="badge">⚡ Allgemein</span>
|
||||
<span id="badgeDifficulty" class="badge badge-diff">🟢 Leicht</span>
|
||||
</div>
|
||||
<span id="attemptBadge" class="attempt-badge">Versuch 1 / 3</span>
|
||||
</div>
|
||||
|
||||
<h2 id="frageText" class="question-text">Lade nächste Frage...</h2>
|
||||
|
||||
<!-- Freitext-Eingabe (wenn question_type == 'text') -->
|
||||
<div id="textAnswerGroup" class="answer-form">
|
||||
<input type="text" id="answerInput" class="input-answer" placeholder="Deine Antwort eingeben..." autocomplete="off">
|
||||
|
||||
<div class="btn-group">
|
||||
<button id="checkBtn" class="btn btn-primary" onclick="checkAnswer()">
|
||||
✓ Antwort prüfen
|
||||
</button>
|
||||
<button id="hintBtn" class="btn btn-secondary" onclick="requestHint()">
|
||||
💡 Tipp anzeigen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Multiple-Choice-Auswahl (wenn question_type == 'multiple_choice') -->
|
||||
<div id="choiceAnswerGroup" class="choice-group hidden">
|
||||
<div id="choiceOptionsContainer" class="choice-grid"></div>
|
||||
<div class="btn-group" style="margin-top: 16px;">
|
||||
<button id="hintBtnMC" class="btn btn-secondary" onclick="requestHint()">
|
||||
💡 Tipp anzeigen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hintBox" class="hint-box hidden">
|
||||
<strong id="hintHeading">💡 Hinweis:</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?v=4.0"></script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user