Design: Envelope back with distinct V-flap closure, top-left sender address only, and completely sealed interior
This commit is contained in:
+1905
-1924
File diff suppressed because it is too large
Load Diff
+12
-11
@@ -14,9 +14,9 @@ const UI_TEXT = {
|
||||
de: {
|
||||
pageTitle: "✨ Magisches Hogwarts-Escape-Quiz ✨",
|
||||
pageSubtitle: "10 knifflige Rätsel aus der Zauberwelt warten auf dich",
|
||||
envelopeLetter: "Hogwarts-Schule für Hexerei und Zauberei",
|
||||
envelopeRecipient: "An den ehrenwerten Zauberschüler",
|
||||
envelopeLocation: "Auf dem Prüfungspfad • Schloss Hogwarts",
|
||||
senderLabel: "Absender:",
|
||||
envelopeSender: "Hogwarts-Schule für Hexerei und Zauberei",
|
||||
envelopeSenderLocation: "Schulleitung • Schloss Hogwarts",
|
||||
letterSchoolTitle: "Hogwarts-Schule für Hexerei und Zauberei",
|
||||
letterHeadmaster: "Schulleiter: Albus Dumbledore<br><span>(Großhexenmeister, Träger des Merlin-Ordens Erster Klasse)</span>",
|
||||
letterSalutation: "Liebe Hexe, lieber Zauberer,",
|
||||
@@ -59,9 +59,9 @@ const UI_TEXT = {
|
||||
en: {
|
||||
pageTitle: "✨ Magical Hogwarts Escape Quiz ✨",
|
||||
pageSubtitle: "10 tricky wizarding world puzzles await you",
|
||||
envelopeLetter: "Hogwarts School of Witchcraft and Wizardry",
|
||||
envelopeRecipient: "To the Esteemed Wizarding Student",
|
||||
envelopeLocation: "On the Path of Trials • Hogwarts Castle",
|
||||
senderLabel: "Sender:",
|
||||
envelopeSender: "Hogwarts School of Witchcraft and Wizardry",
|
||||
envelopeSenderLocation: "Headmaster's Office • Hogwarts Castle",
|
||||
letterSchoolTitle: "Hogwarts School of Witchcraft and Wizardry",
|
||||
letterHeadmaster: "Headmaster: Albus Dumbledore<br><span>(Order of Merlin, First Class, Grand Sorc.)</span>",
|
||||
letterSalutation: "Dear Witch or Wizard,",
|
||||
@@ -180,17 +180,18 @@ function applyQuizTranslations(lang) {
|
||||
const letterSignature = document.getElementById("letterSignature");
|
||||
const letterSignTitle = document.getElementById("letterSignTitle");
|
||||
|
||||
const envelopeRecipient = document.getElementById("envelopeRecipient");
|
||||
const envelopeLocation = document.getElementById("envelopeLocation");
|
||||
const senderLabel = document.getElementById("senderLabel");
|
||||
const envelopeSender = document.getElementById("envelopeSender");
|
||||
const envelopeSenderLocation = document.getElementById("envelopeSenderLocation");
|
||||
const breakSealBtn = document.getElementById("breakSealBtn");
|
||||
const startQuizBtn = document.getElementById("startQuizBtn");
|
||||
const closeLetterBtn = document.getElementById("closeLetterBtn");
|
||||
|
||||
if (pageTitle) pageTitle.innerText = t.pageTitle;
|
||||
if (pageSubtitle) pageSubtitle.innerText = t.pageSubtitle;
|
||||
if (envelopeLetter) envelopeLetter.innerText = t.envelopeLetter;
|
||||
if (envelopeRecipient && t.envelopeRecipient) envelopeRecipient.innerText = t.envelopeRecipient;
|
||||
if (envelopeLocation && t.envelopeLocation) envelopeLocation.innerText = t.envelopeLocation;
|
||||
if (senderLabel && t.senderLabel) senderLabel.innerText = t.senderLabel;
|
||||
if (envelopeSender && t.envelopeSender) envelopeSender.innerText = t.envelopeSender;
|
||||
if (envelopeSenderLocation && t.envelopeSenderLocation) envelopeSenderLocation.innerText = t.envelopeSenderLocation;
|
||||
if (letterSchoolTitle && t.letterSchoolTitle) letterSchoolTitle.innerText = t.letterSchoolTitle;
|
||||
if (letterHeadmaster && t.letterHeadmaster) letterHeadmaster.innerHTML = t.letterHeadmaster;
|
||||
if (letterSalutation && t.letterSalutation) letterSalutation.innerText = t.letterSalutation;
|
||||
|
||||
+165
-165
@@ -1,165 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
|
||||
<title>{% block title %}Magisches Harry-Potter-Escape-Quiz{% endblock %}</title>
|
||||
<link rel="icon" href="/static/favicon.ico">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Marck+Script&family=MedievalSharp&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=2.7">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<audio id="bgm" src="/static/audio/music.mp3" loop preload="auto"></audio>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="header-inner">
|
||||
<a href="/" class="brand-link">
|
||||
<span class="brand-sparkle">⚡</span>
|
||||
<span class="brand-title">Hogwarts Quiz</span>
|
||||
</a>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="lang-switch-group" role="group" aria-label="Sprachauswahl / Language">
|
||||
<button type="button" id="langDe" class="lang-btn active" onclick="setLanguage('de')" title="Deutsch">🇩🇪 DE</button>
|
||||
<button type="button" id="langEn" class="lang-btn" onclick="setLanguage('en')" title="English">🇬🇧 EN</button>
|
||||
</div>
|
||||
|
||||
<button id="audioToggle" class="audio-btn" title="Musik an/aus" onclick="toggleAudio()">
|
||||
<span id="audioIcon">🔇</span>
|
||||
<span id="audioText" class="audio-label">Musik: Aus</span>
|
||||
</button>
|
||||
|
||||
<button id="menuToggle" class="menu-toggle-btn" aria-label="Menü öffnen" onclick="toggleMobileMenu()">
|
||||
<span id="menuIcon">☰</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav id="navLinks" class="nav-links">
|
||||
<a href="/" class="nav-link" id="navQuiz" onclick="closeMobileMenu()">✨ Zum Quiz</a>
|
||||
<a href="/bestenliste" class="nav-link" id="navLeaderboard" onclick="closeMobileMenu()">🏆 Bestenliste</a>
|
||||
<a href="/vorschlag" class="nav-link" id="navSuggest" onclick="closeMobileMenu()">✍️ Frage einreichen</a>
|
||||
<a href="/admin" class="nav-link" id="navAdmin" onclick="closeMobileMenu()">🔒 Admin-Cockpit</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<p id="footerText">⚡ Magisches Hogwarts-Escape-Quiz · Betrieben mit Liebe & Zauberkraft ⚡</p>
|
||||
<div class="footer-links">
|
||||
<a href="/impressum" class="footer-link" id="footerImpressum">⚖️ Impressum</a>
|
||||
<span class="footer-sep">·</span>
|
||||
<a href="/datenschutz" class="footer-link" id="footerDatenschutz">🛡️ Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const bgm = document.getElementById("bgm");
|
||||
const audioIcon = document.getElementById("audioIcon");
|
||||
const audioText = document.getElementById("audioText");
|
||||
const navLinks = document.getElementById("navLinks");
|
||||
const menuIcon = document.getElementById("menuIcon");
|
||||
|
||||
let currentLang = localStorage.getItem("quiz_lang") || "de";
|
||||
|
||||
function setLanguage(lang) {
|
||||
currentLang = (lang === "en") ? "en" : "de";
|
||||
localStorage.setItem("quiz_lang", currentLang);
|
||||
document.documentElement.lang = currentLang;
|
||||
updateLanguageUI();
|
||||
if (typeof onLanguageChange === "function") {
|
||||
onLanguageChange(currentLang);
|
||||
}
|
||||
}
|
||||
|
||||
function updateLanguageUI() {
|
||||
const isDe = currentLang === "de";
|
||||
const deBtn = document.getElementById("langDe");
|
||||
const enBtn = document.getElementById("langEn");
|
||||
if (deBtn && enBtn) {
|
||||
deBtn.classList.toggle("active", isDe);
|
||||
enBtn.classList.toggle("active", !isDe);
|
||||
}
|
||||
|
||||
const navQuiz = document.getElementById("navQuiz");
|
||||
const navLeaderboard = document.getElementById("navLeaderboard");
|
||||
const navSuggest = document.getElementById("navSuggest");
|
||||
const navAdmin = document.getElementById("navAdmin");
|
||||
const footerText = document.getElementById("footerText");
|
||||
const footerImpressum = document.getElementById("footerImpressum");
|
||||
const footerDatenschutz = document.getElementById("footerDatenschutz");
|
||||
|
||||
if (navQuiz) navQuiz.innerText = isDe ? "✨ Zum Quiz" : "✨ To Quiz";
|
||||
if (navLeaderboard) navLeaderboard.innerText = isDe ? "🏆 Bestenliste" : "🏆 Leaderboard";
|
||||
if (navSuggest) navSuggest.innerText = isDe ? "✍️ Frage einreichen" : "✍️ Submit Question";
|
||||
if (navAdmin) navAdmin.innerText = isDe ? "🔒 Admin-Cockpit" : "🔒 Admin Cockpit";
|
||||
if (footerText) {
|
||||
footerText.innerText = isDe
|
||||
? "⚡ Magisches Hogwarts-Escape-Quiz · Betrieben mit Liebe & Zauberkraft ⚡"
|
||||
: "⚡ Magical Hogwarts Escape Quiz · Powered by Love & Wizardry ⚡";
|
||||
}
|
||||
if (footerImpressum) footerImpressum.innerText = isDe ? "⚖️ Impressum" : "⚖️ Legal Notice";
|
||||
if (footerDatenschutz) footerDatenschutz.innerText = isDe ? "🛡️ Datenschutz" : "🛡️ Privacy Policy";
|
||||
if (audioText) {
|
||||
const isPlaying = bgm && !bgm.paused;
|
||||
if (isDe) {
|
||||
audioText.innerText = isPlaying ? "Musik: An" : "Musik: Aus";
|
||||
} else {
|
||||
audioText.innerText = isPlaying ? "Music: On" : "Music: Off";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAudio() {
|
||||
const isDe = currentLang === "de";
|
||||
if (bgm.paused) {
|
||||
bgm.play().then(() => {
|
||||
audioIcon.innerText = "🔊";
|
||||
audioText.innerText = isDe ? "Musik: An" : "Music: On";
|
||||
localStorage.setItem("bgm_enabled", "true");
|
||||
}).catch(err => {
|
||||
console.log("Audio play blocked:", err);
|
||||
});
|
||||
} else {
|
||||
bgm.pause();
|
||||
audioIcon.innerText = "🔇";
|
||||
audioText.innerText = isDe ? "Musik: Aus" : "Music: Off";
|
||||
localStorage.setItem("bgm_enabled", "false");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleMobileMenu() {
|
||||
const isOpen = navLinks.classList.toggle("nav-open");
|
||||
menuIcon.innerText = isOpen ? "✕" : "☰";
|
||||
}
|
||||
|
||||
function closeMobileMenu() {
|
||||
navLinks.classList.remove("nav-open");
|
||||
menuIcon.innerText = "☰";
|
||||
}
|
||||
|
||||
// Auto-resume audio if previously enabled
|
||||
document.addEventListener("click", function initAudioOnInteraction() {
|
||||
if (localStorage.getItem("bgm_enabled") === "true" && bgm.paused) {
|
||||
bgm.play().then(() => {
|
||||
audioIcon.innerText = "🔊";
|
||||
audioText.innerText = (currentLang === "de") ? "Musik: An" : "Music: On";
|
||||
}).catch(() => {});
|
||||
}
|
||||
document.removeEventListener("click", initAudioOnInteraction);
|
||||
}, { once: true });
|
||||
|
||||
// Initialize UI on load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
updateLanguageUI();
|
||||
});
|
||||
</script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
|
||||
<title>{% block title %}Magisches Harry-Potter-Escape-Quiz{% endblock %}</title>
|
||||
<link rel="icon" href="/static/favicon.ico">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Marck+Script&family=MedievalSharp&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=2.8">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<audio id="bgm" src="/static/audio/music.mp3" loop preload="auto"></audio>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="header-inner">
|
||||
<a href="/" class="brand-link">
|
||||
<span class="brand-sparkle">⚡</span>
|
||||
<span class="brand-title">Hogwarts Quiz</span>
|
||||
</a>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="lang-switch-group" role="group" aria-label="Sprachauswahl / Language">
|
||||
<button type="button" id="langDe" class="lang-btn active" onclick="setLanguage('de')" title="Deutsch">🇩🇪 DE</button>
|
||||
<button type="button" id="langEn" class="lang-btn" onclick="setLanguage('en')" title="English">🇬🇧 EN</button>
|
||||
</div>
|
||||
|
||||
<button id="audioToggle" class="audio-btn" title="Musik an/aus" onclick="toggleAudio()">
|
||||
<span id="audioIcon">🔇</span>
|
||||
<span id="audioText" class="audio-label">Musik: Aus</span>
|
||||
</button>
|
||||
|
||||
<button id="menuToggle" class="menu-toggle-btn" aria-label="Menü öffnen" onclick="toggleMobileMenu()">
|
||||
<span id="menuIcon">☰</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav id="navLinks" class="nav-links">
|
||||
<a href="/" class="nav-link" id="navQuiz" onclick="closeMobileMenu()">✨ Zum Quiz</a>
|
||||
<a href="/bestenliste" class="nav-link" id="navLeaderboard" onclick="closeMobileMenu()">🏆 Bestenliste</a>
|
||||
<a href="/vorschlag" class="nav-link" id="navSuggest" onclick="closeMobileMenu()">✍️ Frage einreichen</a>
|
||||
<a href="/admin" class="nav-link" id="navAdmin" onclick="closeMobileMenu()">🔒 Admin-Cockpit</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<p id="footerText">⚡ Magisches Hogwarts-Escape-Quiz · Betrieben mit Liebe & Zauberkraft ⚡</p>
|
||||
<div class="footer-links">
|
||||
<a href="/impressum" class="footer-link" id="footerImpressum">⚖️ Impressum</a>
|
||||
<span class="footer-sep">·</span>
|
||||
<a href="/datenschutz" class="footer-link" id="footerDatenschutz">🛡️ Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const bgm = document.getElementById("bgm");
|
||||
const audioIcon = document.getElementById("audioIcon");
|
||||
const audioText = document.getElementById("audioText");
|
||||
const navLinks = document.getElementById("navLinks");
|
||||
const menuIcon = document.getElementById("menuIcon");
|
||||
|
||||
let currentLang = localStorage.getItem("quiz_lang") || "de";
|
||||
|
||||
function setLanguage(lang) {
|
||||
currentLang = (lang === "en") ? "en" : "de";
|
||||
localStorage.setItem("quiz_lang", currentLang);
|
||||
document.documentElement.lang = currentLang;
|
||||
updateLanguageUI();
|
||||
if (typeof onLanguageChange === "function") {
|
||||
onLanguageChange(currentLang);
|
||||
}
|
||||
}
|
||||
|
||||
function updateLanguageUI() {
|
||||
const isDe = currentLang === "de";
|
||||
const deBtn = document.getElementById("langDe");
|
||||
const enBtn = document.getElementById("langEn");
|
||||
if (deBtn && enBtn) {
|
||||
deBtn.classList.toggle("active", isDe);
|
||||
enBtn.classList.toggle("active", !isDe);
|
||||
}
|
||||
|
||||
const navQuiz = document.getElementById("navQuiz");
|
||||
const navLeaderboard = document.getElementById("navLeaderboard");
|
||||
const navSuggest = document.getElementById("navSuggest");
|
||||
const navAdmin = document.getElementById("navAdmin");
|
||||
const footerText = document.getElementById("footerText");
|
||||
const footerImpressum = document.getElementById("footerImpressum");
|
||||
const footerDatenschutz = document.getElementById("footerDatenschutz");
|
||||
|
||||
if (navQuiz) navQuiz.innerText = isDe ? "✨ Zum Quiz" : "✨ To Quiz";
|
||||
if (navLeaderboard) navLeaderboard.innerText = isDe ? "🏆 Bestenliste" : "🏆 Leaderboard";
|
||||
if (navSuggest) navSuggest.innerText = isDe ? "✍️ Frage einreichen" : "✍️ Submit Question";
|
||||
if (navAdmin) navAdmin.innerText = isDe ? "🔒 Admin-Cockpit" : "🔒 Admin Cockpit";
|
||||
if (footerText) {
|
||||
footerText.innerText = isDe
|
||||
? "⚡ Magisches Hogwarts-Escape-Quiz · Betrieben mit Liebe & Zauberkraft ⚡"
|
||||
: "⚡ Magical Hogwarts Escape Quiz · Powered by Love & Wizardry ⚡";
|
||||
}
|
||||
if (footerImpressum) footerImpressum.innerText = isDe ? "⚖️ Impressum" : "⚖️ Legal Notice";
|
||||
if (footerDatenschutz) footerDatenschutz.innerText = isDe ? "🛡️ Datenschutz" : "🛡️ Privacy Policy";
|
||||
if (audioText) {
|
||||
const isPlaying = bgm && !bgm.paused;
|
||||
if (isDe) {
|
||||
audioText.innerText = isPlaying ? "Musik: An" : "Musik: Aus";
|
||||
} else {
|
||||
audioText.innerText = isPlaying ? "Music: On" : "Music: Off";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAudio() {
|
||||
const isDe = currentLang === "de";
|
||||
if (bgm.paused) {
|
||||
bgm.play().then(() => {
|
||||
audioIcon.innerText = "🔊";
|
||||
audioText.innerText = isDe ? "Musik: An" : "Music: On";
|
||||
localStorage.setItem("bgm_enabled", "true");
|
||||
}).catch(err => {
|
||||
console.log("Audio play blocked:", err);
|
||||
});
|
||||
} else {
|
||||
bgm.pause();
|
||||
audioIcon.innerText = "🔇";
|
||||
audioText.innerText = isDe ? "Musik: Aus" : "Music: Off";
|
||||
localStorage.setItem("bgm_enabled", "false");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleMobileMenu() {
|
||||
const isOpen = navLinks.classList.toggle("nav-open");
|
||||
menuIcon.innerText = isOpen ? "✕" : "☰";
|
||||
}
|
||||
|
||||
function closeMobileMenu() {
|
||||
navLinks.classList.remove("nav-open");
|
||||
menuIcon.innerText = "☰";
|
||||
}
|
||||
|
||||
// Auto-resume audio if previously enabled
|
||||
document.addEventListener("click", function initAudioOnInteraction() {
|
||||
if (localStorage.getItem("bgm_enabled") === "true" && bgm.paused) {
|
||||
bgm.play().then(() => {
|
||||
audioIcon.innerText = "🔊";
|
||||
audioText.innerText = (currentLang === "de") ? "Musik: An" : "Music: On";
|
||||
}).catch(() => {});
|
||||
}
|
||||
document.removeEventListener("click", initAudioOnInteraction);
|
||||
}, { once: true });
|
||||
|
||||
// Initialize UI on load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
updateLanguageUI();
|
||||
});
|
||||
</script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+187
-193
@@ -1,193 +1,187 @@
|
||||
{% 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">
|
||||
die schwebenden Kerzen der Großen Halle flackern in unruhigem Schein, und der Sprechende Hut hat nach Jahrhunderten des Schweigens ein wohlbehütetes Geheimnis preisgegeben: Tief in den uralten Gewölben des Schlosses – verborgen hinter den wachsamen Wasserspeiern und den staubigen Bänden der Verbotenen Abteilung – wurde eine magische Prüfungsurkunde versiegelt.
|
||||
</p>
|
||||
<p class="letter-paragraph" id="letterParagraph2">
|
||||
Zehn arkanische Prüfungen des Scharfsinns, der Zauberkunde und der Entschlossenheit liegen vor dir. Nur wer wahren Mut beweist und die uralten Rätsel meistert, sichert sich seinen ehrenvollen Platz in den Chroniken von Hogwarts und trägt bis zu <strong>1.000 Hauspunkte</strong> für sein Haus davon!
|
||||
</p>
|
||||
<p class="letter-paragraph" id="letterParagraph3">
|
||||
Halte deinen Zauberstab bereit, besinne dich auf deine Flüche und Gegenzauber und nimm dich vor verhexten Trugschlüssen in Acht. Wir erwarten deine Eule nicht später als mit dem nächsten Glockenschlag des Uhrenturms.
|
||||
</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>
|
||||
|
||||
<!-- Linke Klappe des Umschlags -->
|
||||
<div class="envelope-flap flap-left"></div>
|
||||
|
||||
<!-- Rechte Klappe des Umschlags -->
|
||||
<div class="envelope-flap flap-right"></div>
|
||||
|
||||
<!-- Untere Klappe des Umschlags mit handschriftlicher Smaragd-Anschrift -->
|
||||
<div class="envelope-flap flap-bottom">
|
||||
<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 alle Falten und wird vom Siegel gehalten) -->
|
||||
<div class="envelope-closing-flap flap-top" id="envelopeFlap">
|
||||
<div class="flap-sketch-line"></div>
|
||||
</div>
|
||||
|
||||
<!-- Handgezeichnetes Wachssiegel über der Klappenspitze -->
|
||||
<div class="sketched-wax-seal" id="waxSeal" onclick="breakSealAndOpenLetter()" 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" id="introControls">
|
||||
<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>
|
||||
|
||||
<div class="intro-action-container">
|
||||
<button id="breakSealBtn" class="btn btn-primary btn-large btn-break-seal" onclick="breakSealAndOpenLetter()">
|
||||
📜 Siegel brechen & Brief öffnen
|
||||
</button>
|
||||
<div id="letterActions" class="letter-actions hidden">
|
||||
<button id="startQuizBtn" class="btn btn-primary btn-large btn-launch-quiz glow-pulse" onclick="startQuizFromLetter()">
|
||||
🚂 Hogwarts-Express besteigen & Prüfung beginnen ➔
|
||||
</button>
|
||||
<button id="closeLetterBtn" class="btn btn-secondary btn-close-letter" onclick="closeLetter()">
|
||||
↩ Brief wieder schließen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</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=2.7"></script>
|
||||
{% endblock %}
|
||||
{% 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">
|
||||
die schwebenden Kerzen der Großen Halle flackern in unruhigem Schein, und der Sprechende Hut hat nach Jahrhunderten des Schweigens ein wohlbehütetes Geheimnis preisgegeben: Tief in den uralten Gewölben des Schlosses – verborgen hinter den wachsamen Wasserspeiern und den staubigen Bänden der Verbotenen Abteilung – wurde eine magische Prüfungsurkunde versiegelt.
|
||||
</p>
|
||||
<p class="letter-paragraph" id="letterParagraph2">
|
||||
Zehn arkanische Prüfungen des Scharfsinns, der Zauberkunde und der Entschlossenheit liegen vor dir. Nur wer wahren Mut beweist und die uralten Rätsel meistert, sichert sich seinen ehrenvollen Platz in den Chroniken von Hogwarts und trägt bis zu <strong>1.000 Hauspunkte</strong> für sein Haus davon!
|
||||
</p>
|
||||
<p class="letter-paragraph" id="letterParagraph3">
|
||||
Halte deinen Zauberstab bereit, besinne dich auf deine Flüche und Gegenzauber und nimm dich vor verhexten Trugschlüssen in Acht. Wir erwarten deine Eule nicht später als mit dem nächsten Glockenschlag des Uhrenturms.
|
||||
</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>
|
||||
|
||||
<!-- Solide Rückseite des Briefumschlags -->
|
||||
<div class="envelope-back-body">
|
||||
<!-- Absender oben links auf der Rückseite (sonst kein Text) -->
|
||||
<div class="envelope-sender-block" id="envelopeSenderBlock">
|
||||
<span class="sender-label" id="senderLabel">Absender:</span>
|
||||
<p class="sender-name" id="envelopeSender">Hogwarts-Schule für Hexerei und Zauberei</p>
|
||||
<p class="sender-location" id="envelopeSenderLocation">Schulleitung • Schloss Hogwarts</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Markante dreieckige V-Verschluss-Lasche -->
|
||||
<div class="envelope-closing-flap envelope-v-flap" id="envelopeFlap">
|
||||
<div class="v-flap-sketch-line"></div>
|
||||
</div>
|
||||
|
||||
<!-- Handgezeichnetes Wachssiegel über der Klappenspitze -->
|
||||
<div class="sketched-wax-seal" id="waxSeal" onclick="breakSealAndOpenLetter()" 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" id="introControls">
|
||||
<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>
|
||||
|
||||
<div class="intro-action-container">
|
||||
<button id="breakSealBtn" class="btn btn-primary btn-large btn-break-seal" onclick="breakSealAndOpenLetter()">
|
||||
📜 Siegel brechen & Brief öffnen
|
||||
</button>
|
||||
<div id="letterActions" class="letter-actions hidden">
|
||||
<button id="startQuizBtn" class="btn btn-primary btn-large btn-launch-quiz glow-pulse" onclick="startQuizFromLetter()">
|
||||
🚂 Hogwarts-Express besteigen & Prüfung beginnen ➔
|
||||
</button>
|
||||
<button id="closeLetterBtn" class="btn btn-secondary btn-close-letter" onclick="closeLetter()">
|
||||
↩ Brief wieder schließen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</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=2.8"></script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user