Design: Envelope back with distinct V-flap closure, top-left sender address only, and completely sealed interior
This commit is contained in:
kobold-ai
+1905
-1924
File diff suppressed because it is too large
Load Diff
+12
-11
@@ -14,9 +14,9 @@ const UI_TEXT = {
|
|||||||
de: {
|
de: {
|
||||||
pageTitle: "✨ Magisches Hogwarts-Escape-Quiz ✨",
|
pageTitle: "✨ Magisches Hogwarts-Escape-Quiz ✨",
|
||||||
pageSubtitle: "10 knifflige Rätsel aus der Zauberwelt warten auf dich",
|
pageSubtitle: "10 knifflige Rätsel aus der Zauberwelt warten auf dich",
|
||||||
envelopeLetter: "Hogwarts-Schule für Hexerei und Zauberei",
|
senderLabel: "Absender:",
|
||||||
envelopeRecipient: "An den ehrenwerten Zauberschüler",
|
envelopeSender: "Hogwarts-Schule für Hexerei und Zauberei",
|
||||||
envelopeLocation: "Auf dem Prüfungspfad • Schloss Hogwarts",
|
envelopeSenderLocation: "Schulleitung • Schloss Hogwarts",
|
||||||
letterSchoolTitle: "Hogwarts-Schule für Hexerei und Zauberei",
|
letterSchoolTitle: "Hogwarts-Schule für Hexerei und Zauberei",
|
||||||
letterHeadmaster: "Schulleiter: Albus Dumbledore<br><span>(Großhexenmeister, Träger des Merlin-Ordens Erster Klasse)</span>",
|
letterHeadmaster: "Schulleiter: Albus Dumbledore<br><span>(Großhexenmeister, Träger des Merlin-Ordens Erster Klasse)</span>",
|
||||||
letterSalutation: "Liebe Hexe, lieber Zauberer,",
|
letterSalutation: "Liebe Hexe, lieber Zauberer,",
|
||||||
@@ -59,9 +59,9 @@ const UI_TEXT = {
|
|||||||
en: {
|
en: {
|
||||||
pageTitle: "✨ Magical Hogwarts Escape Quiz ✨",
|
pageTitle: "✨ Magical Hogwarts Escape Quiz ✨",
|
||||||
pageSubtitle: "10 tricky wizarding world puzzles await you",
|
pageSubtitle: "10 tricky wizarding world puzzles await you",
|
||||||
envelopeLetter: "Hogwarts School of Witchcraft and Wizardry",
|
senderLabel: "Sender:",
|
||||||
envelopeRecipient: "To the Esteemed Wizarding Student",
|
envelopeSender: "Hogwarts School of Witchcraft and Wizardry",
|
||||||
envelopeLocation: "On the Path of Trials • Hogwarts Castle",
|
envelopeSenderLocation: "Headmaster's Office • Hogwarts Castle",
|
||||||
letterSchoolTitle: "Hogwarts School of Witchcraft and Wizardry",
|
letterSchoolTitle: "Hogwarts School of Witchcraft and Wizardry",
|
||||||
letterHeadmaster: "Headmaster: Albus Dumbledore<br><span>(Order of Merlin, First Class, Grand Sorc.)</span>",
|
letterHeadmaster: "Headmaster: Albus Dumbledore<br><span>(Order of Merlin, First Class, Grand Sorc.)</span>",
|
||||||
letterSalutation: "Dear Witch or Wizard,",
|
letterSalutation: "Dear Witch or Wizard,",
|
||||||
@@ -180,17 +180,18 @@ function applyQuizTranslations(lang) {
|
|||||||
const letterSignature = document.getElementById("letterSignature");
|
const letterSignature = document.getElementById("letterSignature");
|
||||||
const letterSignTitle = document.getElementById("letterSignTitle");
|
const letterSignTitle = document.getElementById("letterSignTitle");
|
||||||
|
|
||||||
const envelopeRecipient = document.getElementById("envelopeRecipient");
|
const senderLabel = document.getElementById("senderLabel");
|
||||||
const envelopeLocation = document.getElementById("envelopeLocation");
|
const envelopeSender = document.getElementById("envelopeSender");
|
||||||
|
const envelopeSenderLocation = document.getElementById("envelopeSenderLocation");
|
||||||
const breakSealBtn = document.getElementById("breakSealBtn");
|
const breakSealBtn = document.getElementById("breakSealBtn");
|
||||||
const startQuizBtn = document.getElementById("startQuizBtn");
|
const startQuizBtn = document.getElementById("startQuizBtn");
|
||||||
const closeLetterBtn = document.getElementById("closeLetterBtn");
|
const closeLetterBtn = document.getElementById("closeLetterBtn");
|
||||||
|
|
||||||
if (pageTitle) pageTitle.innerText = t.pageTitle;
|
if (pageTitle) pageTitle.innerText = t.pageTitle;
|
||||||
if (pageSubtitle) pageSubtitle.innerText = t.pageSubtitle;
|
if (pageSubtitle) pageSubtitle.innerText = t.pageSubtitle;
|
||||||
if (envelopeLetter) envelopeLetter.innerText = t.envelopeLetter;
|
if (senderLabel && t.senderLabel) senderLabel.innerText = t.senderLabel;
|
||||||
if (envelopeRecipient && t.envelopeRecipient) envelopeRecipient.innerText = t.envelopeRecipient;
|
if (envelopeSender && t.envelopeSender) envelopeSender.innerText = t.envelopeSender;
|
||||||
if (envelopeLocation && t.envelopeLocation) envelopeLocation.innerText = t.envelopeLocation;
|
if (envelopeSenderLocation && t.envelopeSenderLocation) envelopeSenderLocation.innerText = t.envelopeSenderLocation;
|
||||||
if (letterSchoolTitle && t.letterSchoolTitle) letterSchoolTitle.innerText = t.letterSchoolTitle;
|
if (letterSchoolTitle && t.letterSchoolTitle) letterSchoolTitle.innerText = t.letterSchoolTitle;
|
||||||
if (letterHeadmaster && t.letterHeadmaster) letterHeadmaster.innerHTML = t.letterHeadmaster;
|
if (letterHeadmaster && t.letterHeadmaster) letterHeadmaster.innerHTML = t.letterHeadmaster;
|
||||||
if (letterSalutation && t.letterSalutation) letterSalutation.innerText = t.letterSalutation;
|
if (letterSalutation && t.letterSalutation) letterSalutation.innerText = t.letterSalutation;
|
||||||
|
|||||||
+165
-165
@@ -1,165 +1,165 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
|
<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>
|
<title>{% block title %}Magisches Harry-Potter-Escape-Quiz{% endblock %}</title>
|
||||||
<link rel="icon" href="/static/favicon.ico">
|
<link rel="icon" href="/static/favicon.ico">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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 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">
|
<link rel="stylesheet" href="/static/css/style.css?v=2.8">
|
||||||
{% block head %}{% endblock %}
|
{% block head %}{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<audio id="bgm" src="/static/audio/music.mp3" loop preload="auto"></audio>
|
<audio id="bgm" src="/static/audio/music.mp3" loop preload="auto"></audio>
|
||||||
|
|
||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<div class="header-inner">
|
<div class="header-inner">
|
||||||
<a href="/" class="brand-link">
|
<a href="/" class="brand-link">
|
||||||
<span class="brand-sparkle">⚡</span>
|
<span class="brand-sparkle">⚡</span>
|
||||||
<span class="brand-title">Hogwarts Quiz</span>
|
<span class="brand-title">Hogwarts Quiz</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
<div class="lang-switch-group" role="group" aria-label="Sprachauswahl / Language">
|
<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="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>
|
<button type="button" id="langEn" class="lang-btn" onclick="setLanguage('en')" title="English">🇬🇧 EN</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button id="audioToggle" class="audio-btn" title="Musik an/aus" onclick="toggleAudio()">
|
<button id="audioToggle" class="audio-btn" title="Musik an/aus" onclick="toggleAudio()">
|
||||||
<span id="audioIcon">🔇</span>
|
<span id="audioIcon">🔇</span>
|
||||||
<span id="audioText" class="audio-label">Musik: Aus</span>
|
<span id="audioText" class="audio-label">Musik: Aus</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button id="menuToggle" class="menu-toggle-btn" aria-label="Menü öffnen" onclick="toggleMobileMenu()">
|
<button id="menuToggle" class="menu-toggle-btn" aria-label="Menü öffnen" onclick="toggleMobileMenu()">
|
||||||
<span id="menuIcon">☰</span>
|
<span id="menuIcon">☰</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav id="navLinks" class="nav-links">
|
<nav id="navLinks" class="nav-links">
|
||||||
<a href="/" class="nav-link" id="navQuiz" onclick="closeMobileMenu()">✨ Zum Quiz</a>
|
<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="/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="/vorschlag" class="nav-link" id="navSuggest" onclick="closeMobileMenu()">✍️ Frage einreichen</a>
|
||||||
<a href="/admin" class="nav-link" id="navAdmin" onclick="closeMobileMenu()">🔒 Admin-Cockpit</a>
|
<a href="/admin" class="nav-link" id="navAdmin" onclick="closeMobileMenu()">🔒 Admin-Cockpit</a>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="container">
|
<main class="container">
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<p id="footerText">⚡ Magisches Hogwarts-Escape-Quiz · Betrieben mit Liebe & Zauberkraft ⚡</p>
|
<p id="footerText">⚡ Magisches Hogwarts-Escape-Quiz · Betrieben mit Liebe & Zauberkraft ⚡</p>
|
||||||
<div class="footer-links">
|
<div class="footer-links">
|
||||||
<a href="/impressum" class="footer-link" id="footerImpressum">⚖️ Impressum</a>
|
<a href="/impressum" class="footer-link" id="footerImpressum">⚖️ Impressum</a>
|
||||||
<span class="footer-sep">·</span>
|
<span class="footer-sep">·</span>
|
||||||
<a href="/datenschutz" class="footer-link" id="footerDatenschutz">🛡️ Datenschutz</a>
|
<a href="/datenschutz" class="footer-link" id="footerDatenschutz">🛡️ Datenschutz</a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const bgm = document.getElementById("bgm");
|
const bgm = document.getElementById("bgm");
|
||||||
const audioIcon = document.getElementById("audioIcon");
|
const audioIcon = document.getElementById("audioIcon");
|
||||||
const audioText = document.getElementById("audioText");
|
const audioText = document.getElementById("audioText");
|
||||||
const navLinks = document.getElementById("navLinks");
|
const navLinks = document.getElementById("navLinks");
|
||||||
const menuIcon = document.getElementById("menuIcon");
|
const menuIcon = document.getElementById("menuIcon");
|
||||||
|
|
||||||
let currentLang = localStorage.getItem("quiz_lang") || "de";
|
let currentLang = localStorage.getItem("quiz_lang") || "de";
|
||||||
|
|
||||||
function setLanguage(lang) {
|
function setLanguage(lang) {
|
||||||
currentLang = (lang === "en") ? "en" : "de";
|
currentLang = (lang === "en") ? "en" : "de";
|
||||||
localStorage.setItem("quiz_lang", currentLang);
|
localStorage.setItem("quiz_lang", currentLang);
|
||||||
document.documentElement.lang = currentLang;
|
document.documentElement.lang = currentLang;
|
||||||
updateLanguageUI();
|
updateLanguageUI();
|
||||||
if (typeof onLanguageChange === "function") {
|
if (typeof onLanguageChange === "function") {
|
||||||
onLanguageChange(currentLang);
|
onLanguageChange(currentLang);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateLanguageUI() {
|
function updateLanguageUI() {
|
||||||
const isDe = currentLang === "de";
|
const isDe = currentLang === "de";
|
||||||
const deBtn = document.getElementById("langDe");
|
const deBtn = document.getElementById("langDe");
|
||||||
const enBtn = document.getElementById("langEn");
|
const enBtn = document.getElementById("langEn");
|
||||||
if (deBtn && enBtn) {
|
if (deBtn && enBtn) {
|
||||||
deBtn.classList.toggle("active", isDe);
|
deBtn.classList.toggle("active", isDe);
|
||||||
enBtn.classList.toggle("active", !isDe);
|
enBtn.classList.toggle("active", !isDe);
|
||||||
}
|
}
|
||||||
|
|
||||||
const navQuiz = document.getElementById("navQuiz");
|
const navQuiz = document.getElementById("navQuiz");
|
||||||
const navLeaderboard = document.getElementById("navLeaderboard");
|
const navLeaderboard = document.getElementById("navLeaderboard");
|
||||||
const navSuggest = document.getElementById("navSuggest");
|
const navSuggest = document.getElementById("navSuggest");
|
||||||
const navAdmin = document.getElementById("navAdmin");
|
const navAdmin = document.getElementById("navAdmin");
|
||||||
const footerText = document.getElementById("footerText");
|
const footerText = document.getElementById("footerText");
|
||||||
const footerImpressum = document.getElementById("footerImpressum");
|
const footerImpressum = document.getElementById("footerImpressum");
|
||||||
const footerDatenschutz = document.getElementById("footerDatenschutz");
|
const footerDatenschutz = document.getElementById("footerDatenschutz");
|
||||||
|
|
||||||
if (navQuiz) navQuiz.innerText = isDe ? "✨ Zum Quiz" : "✨ To Quiz";
|
if (navQuiz) navQuiz.innerText = isDe ? "✨ Zum Quiz" : "✨ To Quiz";
|
||||||
if (navLeaderboard) navLeaderboard.innerText = isDe ? "🏆 Bestenliste" : "🏆 Leaderboard";
|
if (navLeaderboard) navLeaderboard.innerText = isDe ? "🏆 Bestenliste" : "🏆 Leaderboard";
|
||||||
if (navSuggest) navSuggest.innerText = isDe ? "✍️ Frage einreichen" : "✍️ Submit Question";
|
if (navSuggest) navSuggest.innerText = isDe ? "✍️ Frage einreichen" : "✍️ Submit Question";
|
||||||
if (navAdmin) navAdmin.innerText = isDe ? "🔒 Admin-Cockpit" : "🔒 Admin Cockpit";
|
if (navAdmin) navAdmin.innerText = isDe ? "🔒 Admin-Cockpit" : "🔒 Admin Cockpit";
|
||||||
if (footerText) {
|
if (footerText) {
|
||||||
footerText.innerText = isDe
|
footerText.innerText = isDe
|
||||||
? "⚡ Magisches Hogwarts-Escape-Quiz · Betrieben mit Liebe & Zauberkraft ⚡"
|
? "⚡ Magisches Hogwarts-Escape-Quiz · Betrieben mit Liebe & Zauberkraft ⚡"
|
||||||
: "⚡ Magical Hogwarts Escape Quiz · Powered by Love & Wizardry ⚡";
|
: "⚡ Magical Hogwarts Escape Quiz · Powered by Love & Wizardry ⚡";
|
||||||
}
|
}
|
||||||
if (footerImpressum) footerImpressum.innerText = isDe ? "⚖️ Impressum" : "⚖️ Legal Notice";
|
if (footerImpressum) footerImpressum.innerText = isDe ? "⚖️ Impressum" : "⚖️ Legal Notice";
|
||||||
if (footerDatenschutz) footerDatenschutz.innerText = isDe ? "🛡️ Datenschutz" : "🛡️ Privacy Policy";
|
if (footerDatenschutz) footerDatenschutz.innerText = isDe ? "🛡️ Datenschutz" : "🛡️ Privacy Policy";
|
||||||
if (audioText) {
|
if (audioText) {
|
||||||
const isPlaying = bgm && !bgm.paused;
|
const isPlaying = bgm && !bgm.paused;
|
||||||
if (isDe) {
|
if (isDe) {
|
||||||
audioText.innerText = isPlaying ? "Musik: An" : "Musik: Aus";
|
audioText.innerText = isPlaying ? "Musik: An" : "Musik: Aus";
|
||||||
} else {
|
} else {
|
||||||
audioText.innerText = isPlaying ? "Music: On" : "Music: Off";
|
audioText.innerText = isPlaying ? "Music: On" : "Music: Off";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleAudio() {
|
function toggleAudio() {
|
||||||
const isDe = currentLang === "de";
|
const isDe = currentLang === "de";
|
||||||
if (bgm.paused) {
|
if (bgm.paused) {
|
||||||
bgm.play().then(() => {
|
bgm.play().then(() => {
|
||||||
audioIcon.innerText = "🔊";
|
audioIcon.innerText = "🔊";
|
||||||
audioText.innerText = isDe ? "Musik: An" : "Music: On";
|
audioText.innerText = isDe ? "Musik: An" : "Music: On";
|
||||||
localStorage.setItem("bgm_enabled", "true");
|
localStorage.setItem("bgm_enabled", "true");
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.log("Audio play blocked:", err);
|
console.log("Audio play blocked:", err);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
bgm.pause();
|
bgm.pause();
|
||||||
audioIcon.innerText = "🔇";
|
audioIcon.innerText = "🔇";
|
||||||
audioText.innerText = isDe ? "Musik: Aus" : "Music: Off";
|
audioText.innerText = isDe ? "Musik: Aus" : "Music: Off";
|
||||||
localStorage.setItem("bgm_enabled", "false");
|
localStorage.setItem("bgm_enabled", "false");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleMobileMenu() {
|
function toggleMobileMenu() {
|
||||||
const isOpen = navLinks.classList.toggle("nav-open");
|
const isOpen = navLinks.classList.toggle("nav-open");
|
||||||
menuIcon.innerText = isOpen ? "✕" : "☰";
|
menuIcon.innerText = isOpen ? "✕" : "☰";
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeMobileMenu() {
|
function closeMobileMenu() {
|
||||||
navLinks.classList.remove("nav-open");
|
navLinks.classList.remove("nav-open");
|
||||||
menuIcon.innerText = "☰";
|
menuIcon.innerText = "☰";
|
||||||
}
|
}
|
||||||
|
|
||||||
// Auto-resume audio if previously enabled
|
// Auto-resume audio if previously enabled
|
||||||
document.addEventListener("click", function initAudioOnInteraction() {
|
document.addEventListener("click", function initAudioOnInteraction() {
|
||||||
if (localStorage.getItem("bgm_enabled") === "true" && bgm.paused) {
|
if (localStorage.getItem("bgm_enabled") === "true" && bgm.paused) {
|
||||||
bgm.play().then(() => {
|
bgm.play().then(() => {
|
||||||
audioIcon.innerText = "🔊";
|
audioIcon.innerText = "🔊";
|
||||||
audioText.innerText = (currentLang === "de") ? "Musik: An" : "Music: On";
|
audioText.innerText = (currentLang === "de") ? "Musik: An" : "Music: On";
|
||||||
}).catch(() => {});
|
}).catch(() => {});
|
||||||
}
|
}
|
||||||
document.removeEventListener("click", initAudioOnInteraction);
|
document.removeEventListener("click", initAudioOnInteraction);
|
||||||
}, { once: true });
|
}, { once: true });
|
||||||
|
|
||||||
// Initialize UI on load
|
// Initialize UI on load
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
updateLanguageUI();
|
updateLanguageUI();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
{% block scripts %}{% endblock %}
|
{% block scripts %}{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+187
-193
@@ -1,193 +1,187 @@
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block title %}✨ Magisches Harry-Potter-Escape-Quiz ✨{% endblock %}
|
{% block title %}✨ Magisches Harry-Potter-Escape-Quiz ✨{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="quiz-wrapper">
|
<div class="quiz-wrapper">
|
||||||
<header class="quiz-header">
|
<header class="quiz-header">
|
||||||
<h1 class="glow-title" id="pageTitle">✨ Magisches Hogwarts-Escape-Quiz ✨</h1>
|
<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>
|
<p class="subtitle" id="pageSubtitle">10 knifflige Rätsel aus der Zauberwelt warten auf dich</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Brief-Intro / Startmaske -->
|
<!-- Brief-Intro / Startmaske -->
|
||||||
<div id="introCard" class="card intro-card intro-parchment-wrapper">
|
<div id="introCard" class="card intro-card intro-parchment-wrapper">
|
||||||
<!-- Antiker geschlossener Hogwarts-Umschlag (öffnet sich bei Klick auf das Siegel) -->
|
<!-- Antiker geschlossener Hogwarts-Umschlag (öffnet sich bei Klick auf das Siegel) -->
|
||||||
<div class="antique-envelope-scene" id="envelope">
|
<div class="antique-envelope-scene" id="envelope">
|
||||||
<div class="envelope-base">
|
<div class="envelope-base">
|
||||||
<!-- Dunkleres Pergament-Innenfutter -->
|
<!-- Dunkleres Pergament-Innenfutter -->
|
||||||
<div class="envelope-interior"></div>
|
<div class="envelope-interior"></div>
|
||||||
|
|
||||||
<!-- Der darin liegende Briefbogen (gleitet beim Öffnen majestätisch hervor) -->
|
<!-- Der darin liegende Briefbogen (gleitet beim Öffnen majestätisch hervor) -->
|
||||||
<div class="letter-sheet" id="letterSheet">
|
<div class="letter-sheet" id="letterSheet">
|
||||||
<div class="sheet-parchment-layer"></div>
|
<div class="sheet-parchment-layer"></div>
|
||||||
<header class="letter-header">
|
<header class="letter-header">
|
||||||
<div class="letter-crest-box">
|
<div class="letter-crest-box">
|
||||||
<img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts Crest" class="letter-crest-sketch">
|
<img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts Crest" class="letter-crest-sketch">
|
||||||
</div>
|
</div>
|
||||||
<h3 class="letter-school-name" id="letterSchoolTitle">Hogwarts-Schule für Hexerei und Zauberei</h3>
|
<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>
|
<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">
|
<div class="letter-ornament-line">
|
||||||
<span class="ornament-leaf">❦</span>
|
<span class="ornament-leaf">❦</span>
|
||||||
<span class="ornament-rule"></span>
|
<span class="ornament-rule"></span>
|
||||||
<span class="ornament-shield">✦</span>
|
<span class="ornament-shield">✦</span>
|
||||||
<span class="ornament-rule"></span>
|
<span class="ornament-rule"></span>
|
||||||
<span class="ornament-leaf">❧</span>
|
<span class="ornament-leaf">❧</span>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="letter-body-handwritten">
|
<div class="letter-body-handwritten">
|
||||||
<p class="letter-salutation" id="letterSalutation">Liebe Hexe, lieber Zauberer,</p>
|
<p class="letter-salutation" id="letterSalutation">Liebe Hexe, lieber Zauberer,</p>
|
||||||
<p class="letter-paragraph" id="letterParagraph1">
|
<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.
|
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>
|
||||||
<p class="letter-paragraph" id="letterParagraph2">
|
<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!
|
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>
|
||||||
<p class="letter-paragraph" id="letterParagraph3">
|
<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.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="letter-signature-block">
|
<footer class="letter-signature-block">
|
||||||
<p class="letter-closing" id="letterClosing">Mit vorzüglicher Hochachtung,</p>
|
<p class="letter-closing" id="letterClosing">Mit vorzüglicher Hochachtung,</p>
|
||||||
<p class="letter-signature-ink" id="letterSignature">Minerva McGonagall</p>
|
<p class="letter-signature-ink" id="letterSignature">Minerva McGonagall</p>
|
||||||
<p class="letter-sign-title" id="letterSignTitle">Stellvertretende Schulleiterin</p>
|
<p class="letter-sign-title" id="letterSignTitle">Stellvertretende Schulleiterin</p>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Linke Klappe des Umschlags -->
|
<!-- Solide Rückseite des Briefumschlags -->
|
||||||
<div class="envelope-flap flap-left"></div>
|
<div class="envelope-back-body">
|
||||||
|
<!-- Absender oben links auf der Rückseite (sonst kein Text) -->
|
||||||
<!-- Rechte Klappe des Umschlags -->
|
<div class="envelope-sender-block" id="envelopeSenderBlock">
|
||||||
<div class="envelope-flap flap-right"></div>
|
<span class="sender-label" id="senderLabel">Absender:</span>
|
||||||
|
<p class="sender-name" id="envelopeSender">Hogwarts-Schule für Hexerei und Zauberei</p>
|
||||||
<!-- Untere Klappe des Umschlags mit handschriftlicher Smaragd-Anschrift -->
|
<p class="sender-location" id="envelopeSenderLocation">Schulleitung • Schloss Hogwarts</p>
|
||||||
<div class="envelope-flap flap-bottom">
|
</div>
|
||||||
<div class="envelope-sketch-border"></div>
|
</div>
|
||||||
<div class="envelope-address-block">
|
|
||||||
<p class="addr-line addr-school" id="envelopeLetter">Hogwarts-Schule für Hexerei und Zauberei</p>
|
<!-- Markante dreieckige V-Verschluss-Lasche -->
|
||||||
<p class="addr-line addr-recipient" id="envelopeRecipient">An den ehrenwerten Zauberschüler</p>
|
<div class="envelope-closing-flap envelope-v-flap" id="envelopeFlap">
|
||||||
<p class="addr-line addr-location" id="envelopeLocation">Auf dem Prüfungspfad • Schloss Hogwarts</p>
|
<div class="v-flap-sketch-line"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<!-- Handgezeichnetes Wachssiegel über der Klappenspitze -->
|
||||||
<!-- Obere Klappe des Umschlags (überdeckt alle Falten und wird vom Siegel gehalten) -->
|
<div class="sketched-wax-seal" id="waxSeal" onclick="breakSealAndOpenLetter()" title="Siegel brechen & Brief öffnen">
|
||||||
<div class="envelope-closing-flap flap-top" id="envelopeFlap">
|
<img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts-Wappen Siegel" class="seal-crest-img">
|
||||||
<div class="flap-sketch-line"></div>
|
<div class="seal-emboss-ring"></div>
|
||||||
</div>
|
<div class="seal-glow"></div>
|
||||||
|
</div>
|
||||||
<!-- Handgezeichnetes Wachssiegel über der Klappenspitze -->
|
</div>
|
||||||
<div class="sketched-wax-seal" id="waxSeal" onclick="breakSealAndOpenLetter()" title="Siegel brechen & Brief öffnen">
|
</div>
|
||||||
<img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts-Wappen Siegel" class="seal-crest-img">
|
|
||||||
<div class="seal-emboss-ring"></div>
|
<!-- Auswahlbereich unter dem Pergament -->
|
||||||
<div class="seal-glow"></div>
|
<div class="intro-content intro-controls-panel" id="introControls">
|
||||||
</div>
|
<p class="intro-subnote" id="introDesc">
|
||||||
</div>
|
Ein verzauberter Pergamentbrief aus Hogwarts liegt vor dir.<br>
|
||||||
</div>
|
Wähle deinen Schwierigkeitsgrad und brich das rote Zaubersiegel:
|
||||||
|
</p>
|
||||||
<!-- Auswahlbereich unter dem Pergament -->
|
|
||||||
<div class="intro-content intro-controls-panel" id="introControls">
|
<!-- Difficulty Selector Chips -->
|
||||||
<p class="intro-subnote" id="introDesc">
|
<div class="difficulty-selection">
|
||||||
Ein verzauberter Pergamentbrief aus Hogwarts liegt vor dir.<br>
|
<span class="difficulty-label" id="diffLabel">Schwierigkeitsgrad wählen:</span>
|
||||||
Wähle deinen Schwierigkeitsgrad und brich das rote Zaubersiegel:
|
<div class="difficulty-chips" role="radiogroup" aria-label="Schwierigkeitsgrad">
|
||||||
</p>
|
<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>
|
||||||
<!-- Difficulty Selector Chips -->
|
</button>
|
||||||
<div class="difficulty-selection">
|
<button type="button" class="diff-chip" data-diff="easy" onclick="selectDifficulty('easy')">
|
||||||
<span class="difficulty-label" id="diffLabel">Schwierigkeitsgrad wählen:</span>
|
<span class="diff-icon">🟢</span> <span class="diff-text" id="diffEasyText">Leicht</span>
|
||||||
<div class="difficulty-chips" role="radiogroup" aria-label="Schwierigkeitsgrad">
|
</button>
|
||||||
<button type="button" class="diff-chip active" data-diff="all" onclick="selectDifficulty('all')">
|
<button type="button" class="diff-chip" data-diff="medium" onclick="selectDifficulty('medium')">
|
||||||
<span class="diff-icon">🎲</span> <span class="diff-text" id="diffAllText">Alle gemischt</span>
|
<span class="diff-icon">🟡</span> <span class="diff-text" id="diffMedText">Mittel</span>
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="diff-chip" data-diff="easy" onclick="selectDifficulty('easy')">
|
<button type="button" class="diff-chip" data-diff="hard" onclick="selectDifficulty('hard')">
|
||||||
<span class="diff-icon">🟢</span> <span class="diff-text" id="diffEasyText">Leicht</span>
|
<span class="diff-icon">🔴</span> <span class="diff-text" id="diffHardText">Schwer</span>
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="diff-chip" data-diff="medium" onclick="selectDifficulty('medium')">
|
</div>
|
||||||
<span class="diff-icon">🟡</span> <span class="diff-text" id="diffMedText">Mittel</span>
|
</div>
|
||||||
</button>
|
|
||||||
<button type="button" class="diff-chip" data-diff="hard" onclick="selectDifficulty('hard')">
|
<div class="intro-action-container">
|
||||||
<span class="diff-icon">🔴</span> <span class="diff-text" id="diffHardText">Schwer</span>
|
<button id="breakSealBtn" class="btn btn-primary btn-large btn-break-seal" onclick="breakSealAndOpenLetter()">
|
||||||
</button>
|
📜 Siegel brechen & Brief öffnen
|
||||||
</div>
|
</button>
|
||||||
</div>
|
<div id="letterActions" class="letter-actions hidden">
|
||||||
|
<button id="startQuizBtn" class="btn btn-primary btn-large btn-launch-quiz glow-pulse" onclick="startQuizFromLetter()">
|
||||||
<div class="intro-action-container">
|
🚂 Hogwarts-Express besteigen & Prüfung beginnen ➔
|
||||||
<button id="breakSealBtn" class="btn btn-primary btn-large btn-break-seal" onclick="breakSealAndOpenLetter()">
|
</button>
|
||||||
📜 Siegel brechen & Brief öffnen
|
<button id="closeLetterBtn" class="btn btn-secondary btn-close-letter" onclick="closeLetter()">
|
||||||
</button>
|
↩ Brief wieder schließen
|
||||||
<div id="letterActions" class="letter-actions hidden">
|
</button>
|
||||||
<button id="startQuizBtn" class="btn btn-primary btn-large btn-launch-quiz glow-pulse" onclick="startQuizFromLetter()">
|
</div>
|
||||||
🚂 Hogwarts-Express besteigen & Prüfung beginnen ➔
|
</div>
|
||||||
</button>
|
</div>
|
||||||
<button id="closeLetterBtn" class="btn btn-secondary btn-close-letter" onclick="closeLetter()">
|
</div>
|
||||||
↩ Brief wieder schließen
|
|
||||||
</button>
|
<!-- Spielbereich (initial versteckt) -->
|
||||||
</div>
|
<div id="gameCard" class="game-area hidden">
|
||||||
</div>
|
<!-- Fortschritt & Punkte & Zeit -->
|
||||||
</div>
|
<div class="status-panel">
|
||||||
</div>
|
<div class="progress-info">
|
||||||
|
<span id="questionCounter">Frage 1 von 10</span>
|
||||||
<!-- Spielbereich (initial versteckt) -->
|
<span id="timerBadge" class="timer-badge">⏱️ 00:00</span>
|
||||||
<div id="gameCard" class="game-area hidden">
|
<span id="pointsCounter" class="points-badge">🏆 Hauspunkte: 0</span>
|
||||||
<!-- Fortschritt & Punkte & Zeit -->
|
</div>
|
||||||
<div class="status-panel">
|
<div class="progress-container">
|
||||||
<div class="progress-info">
|
<div id="progressBar" class="progress-bar"></div>
|
||||||
<span id="questionCounter">Frage 1 von 10</span>
|
</div>
|
||||||
<span id="timerBadge" class="timer-badge">⏱️ 00:00</span>
|
</div>
|
||||||
<span id="pointsCounter" class="points-badge">🏆 Hauspunkte: 0</span>
|
|
||||||
</div>
|
<!-- Frage-Container -->
|
||||||
<div class="progress-container">
|
<div id="frageBox" class="card question-card">
|
||||||
<div id="progressBar" class="progress-bar"></div>
|
<div class="question-meta">
|
||||||
</div>
|
<div class="meta-left">
|
||||||
</div>
|
<span id="badgeCategory" class="badge">⚡ Harry Potter</span>
|
||||||
|
<span id="badgeDifficulty" class="badge badge-diff">🟢 Leicht</span>
|
||||||
<!-- Frage-Container -->
|
</div>
|
||||||
<div id="frageBox" class="card question-card">
|
<span id="attemptBadge" class="attempt-badge">Versuch 1 von 3</span>
|
||||||
<div class="question-meta">
|
</div>
|
||||||
<div class="meta-left">
|
|
||||||
<span id="badgeCategory" class="badge">⚡ Harry Potter</span>
|
<h2 id="frageText" class="question-text">Lade verzauberte Schriftrollen...</h2>
|
||||||
<span id="badgeDifficulty" class="badge badge-diff">🟢 Leicht</span>
|
|
||||||
</div>
|
<!-- Freitext-Eingabe (wenn question_type == 'text') -->
|
||||||
<span id="attemptBadge" class="attempt-badge">Versuch 1 von 3</span>
|
<div id="textAnswerGroup" class="answer-form">
|
||||||
</div>
|
<input type="text" id="answerInput" class="input-answer" placeholder="Deine Antwort hier eingeben..." autocomplete="off">
|
||||||
|
|
||||||
<h2 id="frageText" class="question-text">Lade verzauberte Schriftrollen...</h2>
|
<div class="btn-group">
|
||||||
|
<button id="checkBtn" class="btn btn-primary" onclick="checkAnswer()">
|
||||||
<!-- Freitext-Eingabe (wenn question_type == 'text') -->
|
✨ Antwort prüfen
|
||||||
<div id="textAnswerGroup" class="answer-form">
|
</button>
|
||||||
<input type="text" id="answerInput" class="input-answer" placeholder="Deine Antwort hier eingeben..." autocomplete="off">
|
<button id="hintBtn" class="btn btn-secondary" onclick="requestHint()">
|
||||||
|
💡 Hinweis anzeigen
|
||||||
<div class="btn-group">
|
</button>
|
||||||
<button id="checkBtn" class="btn btn-primary" onclick="checkAnswer()">
|
</div>
|
||||||
✨ Antwort prüfen
|
</div>
|
||||||
</button>
|
|
||||||
<button id="hintBtn" class="btn btn-secondary" onclick="requestHint()">
|
<!-- Multiple-Choice-Auswahl (wenn question_type == 'multiple_choice') -->
|
||||||
💡 Hinweis anzeigen
|
<div id="choiceAnswerGroup" class="choice-group hidden">
|
||||||
</button>
|
<div id="choiceOptionsContainer" class="choice-grid"></div>
|
||||||
</div>
|
<div class="btn-group" style="margin-top: 15px;">
|
||||||
</div>
|
<button id="hintBtnMC" class="btn btn-secondary" onclick="requestHint()">
|
||||||
|
💡 Hinweis anzeigen
|
||||||
<!-- Multiple-Choice-Auswahl (wenn question_type == 'multiple_choice') -->
|
</button>
|
||||||
<div id="choiceAnswerGroup" class="choice-group hidden">
|
</div>
|
||||||
<div id="choiceOptionsContainer" class="choice-grid"></div>
|
</div>
|
||||||
<div class="btn-group" style="margin-top: 15px;">
|
|
||||||
<button id="hintBtnMC" class="btn btn-secondary" onclick="requestHint()">
|
<div id="hintBox" class="hint-box hidden">
|
||||||
💡 Hinweis anzeigen
|
<strong id="hintHeading">📜 Notiz aus der verbotenen Abteilung:</strong>
|
||||||
</button>
|
<p id="hintText"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div id="feedbackBox" class="feedback-box"></div>
|
||||||
<div id="hintBox" class="hint-box hidden">
|
</div>
|
||||||
<strong id="hintHeading">📜 Notiz aus der verbotenen Abteilung:</strong>
|
</div>
|
||||||
<p id="hintText"></p>
|
</div>
|
||||||
</div>
|
{% endblock %}
|
||||||
|
|
||||||
<div id="feedbackBox" class="feedback-box"></div>
|
{% block scripts %}
|
||||||
</div>
|
<script src="/static/js/quiz.js?v=2.8"></script>
|
||||||
</div>
|
{% endblock %}
|
||||||
</div>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block scripts %}
|
|
||||||
<script src="/static/js/quiz.js?v=2.7"></script>
|
|
||||||
{% endblock %}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user