From ecf9d8283aea5139c2d589d7001e1a976cfe984b Mon Sep 17 00:00:00 2001 From: kobold-ai Date: Mon, 21 Sep 2026 20:37:09 +0200 Subject: [PATCH] Revert: Return to 611a94a envelope structure and remove parchment_texture.jpg without extra adaptations (v3.2) --- app/static/css/style.css | 527 ++++++++++++++++++--------------------- app/static/js/quiz.js | 201 +++++---------- app/templates/base.html | 2 +- app/templates/index.html | 97 +++---- 4 files changed, 358 insertions(+), 469 deletions(-) diff --git a/app/static/css/style.css b/app/static/css/style.css index b8581c5..580ffd7 100755 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -243,38 +243,13 @@ body { margin: 0 auto; } -/* ========================================= - CODEPEN ENVELOPE WITH HOGWARTS AESTHETICS - - 4-Flap Envelope Back Geometry - - Realistic Parchment Textures - - Wax Seal in the Exact Center (Mitte) - - Small Handwriting Return Address (Top-Left) - - Clean Inner Letter Sheet - ========================================= */ - -/* ========================================= - AUTHENTIC VINTAGE HOGWARTS CLOSED ENVELOPE - - Clean Antique Paper Colors (NO muddy image textures) - - Sharp, Clear Flap Outlines & Fold Lines - - Return Address Top-Left - - Distinct V-Flap Closure with Wax Seal at Apex - - Majestic Rise-Out Letter Reveal - ========================================= */ - .antique-envelope-scene { position: relative; - width: min(480px, 94vw); - height: min(280px, 60vw); + width: min(440px, 92vw); + height: min(260px, 58vw); margin: 25px auto 35px; perspective: 1200px; perspective-origin: center top; - transition: margin-top 0.8s cubic-bezier(0.25, 1, 0.5, 1); -} - -.antique-envelope-scene.envelope-opened, -.antique-envelope-scene:has(.envelope-opened) { - margin-top: 155px; - margin-bottom: 25px; } .envelope-base { @@ -282,204 +257,150 @@ body { width: 100%; height: 100%; border-radius: 6px; - border: 2px solid #7c5830; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 4px 14px rgba(0, 0, 0, 0.5); - background-color: #ebdcb9; + transition: transform 0.6s ease; } -/* Interior Back Wall of the Envelope */ +/* Interior of envelope (visible when flap opens and letter rises) */ .envelope-interior { position: absolute; inset: 0; - border-radius: 4px; - background: linear-gradient(180deg, #2b1d12 0%, #3a2618 60%, #4a3220 100%); - border: 2px solid #5a3c1e; + border-radius: 6px; + background-color: #2b1d12; + background-image: + radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.65) 100%); + border: 2px solid #7a5c36; z-index: 1; } -/* The Letter Sheet (Slides Up Out of the Envelope) */ +/* The Letter inside the envelope (slides up when opened) */ .letter-sheet { position: absolute; - top: 10px; + bottom: 8px; left: 4%; width: 92%; - height: 380px; - max-height: 65vh; - background: linear-gradient(145deg, #fffdf8 0%, #f7efe0 50%, #ecdcb8 100%); - border-radius: 5px; - border: 1.5px solid #8e6c43; - outline: 1px dashed rgba(130, 95, 55, 0.4); - outline-offset: -5px; - padding: 16px 20px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); - z-index: 3; - /* Closed state: tucked completely inside, hidden */ - visibility: hidden; - opacity: 0; - transform: translateY(40px) scale(0.92); - pointer-events: none; - transition: transform 0.85s cubic-bezier(0.2, 0.85, 0.25, 1) 0.3s, - opacity 0.5s ease 0.3s, - visibility 0.5s ease 0.3s, - box-shadow 0.8s ease; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; -} - -.envelope-opened .letter-sheet { - visibility: visible; - opacity: 1; - pointer-events: auto; - transform: translateY(-145px) scale(1.02); - z-index: 12; - box-shadow: - 0 24px 60px rgba(0, 0, 0, 0.85), - 0 0 35px rgba(201, 168, 106, 0.4); -} - -.letter-crest-small { - width: 48px; - height: 48px; - border-radius: 50%; - border: 2px solid #7c5830; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); - margin-bottom: 8px; - object-fit: cover; -} - -.letter-title { - font-family: 'Cinzel', serif; - font-size: clamp(0.95rem, 2.8vw, 1.2rem); - color: #2b1704; - letter-spacing: 1px; - font-weight: 700; - margin-bottom: 3px; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); -} - -.letter-subtitle { - font-family: 'MedievalSharp', serif; - font-size: clamp(0.75rem, 2vw, 0.9rem); - color: #5a3d1e; - font-style: italic; - margin-bottom: 14px; -} - -.btn-launch-express { - background: linear-gradient(135deg, #a62b2b 0%, #6e1010 100%); - color: #ffd700; - border: 1.5px solid #ffd700; - border-radius: 25px; - padding: 9px 18px; - font-family: 'Cinzel', serif; - font-size: clamp(0.78rem, 2.2vw, 0.92rem); - font-weight: 700; - cursor: pointer; - box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 215, 0, 0.3); - transition: all 0.3s ease; - text-decoration: none; - display: inline-block; -} - -.btn-launch-express:hover { - transform: scale(1.04); - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 215, 0, 0.6); - color: #ffffff; -} - -/* Solid Envelope Back Body with Subtle Paper Gradient */ -.envelope-back-body { - position: absolute; - inset: 0; + height: 92%; + background-color: #fcf8ee; + background-image: + radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.6) 0%, rgba(210, 180, 130, 0.25) 100%); + background-position: center; border-radius: 4px; - background: linear-gradient(135deg, #f4ecd5 0%, #ebdcb9 50%, #dfc99b 100%); - border: 2px solid #7c5830; - z-index: 4; + border: 1.5px solid #8e6c43; + padding: 16px 18px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); + z-index: 2; + transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.25, 1) 0.35s, box-shadow 0.8s ease, z-index 0.2s 0.35s; overflow: hidden; - box-shadow: inset 0 0 15px rgba(120, 85, 40, 0.15); + text-align: center; + outline: 1px dashed rgba(130, 95, 55, 0.45); + outline-offset: -5px; } -.envelope-body-folds { +/* Front Pocket of envelope (covers the lower portion of the letter) */ +.envelope-front-pocket { position: absolute; inset: 0; - width: 100%; - height: 100%; + border-radius: 6px; + background-color: #ebdcb9; + background-image: + radial-gradient(ellipse at 50% 65%, rgba(255, 255, 255, 0.35) 0%, rgba(160, 120, 60, 0.2) 100%); + clip-path: polygon(0 32%, 50% 54%, 100% 32%, 100% 100%, 0 100%); + z-index: 4; + border: 2px solid #8e6c43; + filter: drop-shadow(0 -3px 6px rgba(60, 40, 15, 0.3)); + display: flex; + align-items: flex-end; + justify-content: center; + padding-bottom: 20px; pointer-events: none; } -/* Small Handwriting Return Address in Top-Left ("Abs.: Hogwarts...") */ -.env-sender-line { +.envelope-sketch-border { position: absolute; - top: 12px; - left: 14px; - font-family: 'Caveat', 'Marck Script', cursive; - font-size: clamp(0.78rem, 2.2vw, 0.92rem); - color: #0d3820; /* Authentic Hogwarts Emerald Ink */ - font-weight: 600; - z-index: 8; + bottom: 8px; + left: 8px; + right: 8px; + height: 48%; + border: 1px dashed rgba(120, 85, 45, 0.4); + border-radius: 3px; pointer-events: none; - letter-spacing: 0.2px; - text-shadow: 0 0 1px rgba(13, 56, 32, 0.25); - transition: opacity 0.4s ease; - white-space: nowrap; } -.envelope-opened .env-sender-line { - opacity: 0; +/* Handwritten Address in Emerald Ink on Envelope Front */ +.envelope-address-block { + position: relative; + z-index: 5; + text-align: center; + font-family: 'Marck Script', 'Caveat', cursive; + color: #0d3820; /* Authentic Hogwarts Emerald Ink */ + padding: 0 15px; + text-shadow: 0 0 1px rgba(13, 56, 32, 0.35); } -/* Top Triangular V-Flap (Folds Down to Apex at 55%) */ +.addr-school { + font-size: clamp(0.92rem, 3.2vw, 1.15rem); + font-weight: 700; + color: #082816; + margin-bottom: 2px; +} + +.addr-recipient { + font-size: clamp(1.15rem, 3.8vw, 1.4rem); + font-weight: 700; + color: #0b3a20; + margin-bottom: 2px; +} + +.addr-location { + font-size: clamp(0.85rem, 2.8vw, 1.02rem); + font-style: italic; + color: #1e4530; +} + +/* Top Triangular Flap (folds down over the pocket) */ .envelope-closing-flap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; - clip-path: polygon(0 0, 100% 0, 50% 55%); - background: linear-gradient(180deg, #faeedb 0%, #ecdcb9 70%, #dfc99b 100%); + background-color: #dfcd9f; + background-image: + radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.4) 0%, rgba(150, 110, 55, 0.25) 100%); + clip-path: polygon(0 0, 100% 0, 50% 57%); transform-origin: top center; transform-style: preserve-3d; - transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.35s; - z-index: 10; - border-top: 2px solid #7c5830; - filter: drop-shadow(0 6px 12px rgba(35, 18, 5, 0.55)); + transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1); + z-index: 6; + border-top: 2px solid #8e6c43; + filter: drop-shadow(0 5px 8px rgba(50, 35, 10, 0.5)); } -.envelope-opened .envelope-closing-flap { - transform: rotateX(180deg); - z-index: 2; - filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.4)); -} - -.v-flap-outline { +.flap-sketch-line { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 55%; + inset: 4px; + clip-path: polygon(2% 2%, 98% 2%, 50% 54%); + border-top: 1px dashed rgba(120, 85, 45, 0.4); pointer-events: none; } -/* Hand-Sketched Hogwarts Wax Seal in the Exact Mitte (Center 50% 55%) */ +/* Sketched Wax Seal placed right over the flap tip */ .sketched-wax-seal { position: absolute; - top: 55%; + top: 56%; left: 50%; transform: translate(-50%, -50%) rotate(-3deg); width: 72px; height: 72px; border-radius: 50%; cursor: pointer; - z-index: 20; + z-index: 7; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, opacity 0.4s ease; box-shadow: - 0 8px 22px rgba(0, 0, 0, 0.75), - 0 2px 6px rgba(0, 0, 0, 0.45); + 0 8px 20px rgba(0, 0, 0, 0.7), + 0 2px 5px rgba(0, 0, 0, 0.45); } .sketched-wax-seal:hover { @@ -495,8 +416,8 @@ body { border-radius: 50%; object-fit: cover; display: block; - border: 2.5px solid #4a0d0d; - box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7); + border: 3px solid #4a0d0d; + box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7); } .seal-emboss-ring { @@ -522,10 +443,23 @@ body { opacity: 1; } -/* Seal Break Golden Animation */ +/* Open state: Flap opens, seal dissolves, letter slides out */ .envelope-opened .sketched-wax-seal { animation: breakSealAnim 0.7s forwards; - pointer-events: none; +} + +.envelope-opened .envelope-closing-flap { + transform: rotateX(180deg); + z-index: 1; + filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.4)); +} + +.envelope-opened .letter-sheet { + transform: translateY(-135px) scale(1.06); + z-index: 10; + box-shadow: + 0 20px 48px rgba(0, 0, 0, 0.85), + 0 0 25px rgba(201, 168, 106, 0.35); } @keyframes breakSealAnim { @@ -534,6 +468,134 @@ body { 100% { transform: translate(-50%, -50%) rotate(25deg) scale(0.3); opacity: 0; filter: drop-shadow(0 0 40px #ffd700); } } +/* Letter Content Styles */ +.letter-header { + margin-bottom: 8px; +} + +.letter-crest-box { + width: 48px; + height: 48px; + margin: 0 auto 4px; + border-radius: 50%; + overflow: hidden; + box-shadow: 0 2px 6px rgba(90, 60, 20, 0.25); + border: 1px solid rgba(139, 105, 60, 0.3); +} + +.letter-crest-sketch { + width: 100%; + height: 100%; + object-fit: cover; + filter: sepia(0.65) contrast(1.15) brightness(0.92); +} + +.letter-school-name { + font-family: 'MedievalSharp', Georgia, serif; + font-size: clamp(0.95rem, 2.8vw, 1.25rem); + color: #2c1a0c; + text-transform: uppercase; + letter-spacing: 1.2px; + font-weight: 700; + margin-bottom: 2px; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); +} + +.letter-headmaster { + font-family: 'Caveat', 'Georgia', cursive; + font-size: 0.95rem; + color: #4a331c; + font-style: italic; + line-height: 1.25; + margin-bottom: 6px; +} + +.letter-headmaster span { + font-size: 0.82rem; + color: #6a4c28; +} + +.letter-ornament-line { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + color: #8c6838; + margin: 4px auto 8px; + max-width: 260px; +} + +.ornament-rule { + flex: 1; + height: 1px; + background: linear-gradient(to right, transparent, #8c6838, transparent); +} + +.ornament-leaf, .ornament-shield { + font-size: 0.85rem; +} + +/* Handwritten Body in Emerald Ink */ +.letter-body-handwritten { + font-family: 'Marck Script', 'Caveat', cursive; + color: #0f3d24; /* Authentic Hogwarts Emerald Ink */ + text-align: left; + padding: 0 4px; + line-height: 1.5; + text-shadow: 0 0 1px rgba(15, 61, 36, 0.25); +} + +.letter-salutation { + font-size: clamp(1.15rem, 3.5vw, 1.4rem); + font-weight: 700; + margin-bottom: 6px; + color: #0a301c; +} + +.letter-paragraph { + font-size: clamp(1.02rem, 3.0vw, 1.2rem); + margin-bottom: 8px; + text-indent: 1.2em; +} + +.letter-paragraph strong { + color: #052414; + font-weight: 700; +} + +/* Signature Block */ +.letter-signature-block { + margin-top: 10px; + text-align: right; + padding-right: 8px; + font-family: 'Marck Script', 'Caveat', cursive; + color: #0f3d24; +} + +.letter-closing { + font-size: 1.1rem; + font-style: italic; + color: #2b4533; + margin-bottom: 2px; +} + +.letter-signature-ink { + font-size: clamp(1.4rem, 4.2vw, 1.8rem); + font-weight: 700; + color: #082816; + letter-spacing: 0.5px; + transform: rotate(-2deg); + display: inline-block; + margin-bottom: 1px; + text-shadow: 0 0 1px rgba(8, 40, 22, 0.35); +} + +.letter-sign-title { + font-size: 0.88rem; + color: #4a6352; + font-style: italic; +} + /* Controls Below Parchment */ .intro-controls-panel { margin-top: 20px; @@ -545,30 +607,6 @@ body { color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; - transition: all 0.3s ease; -} - -.intro-action-container { - margin-top: 14px; - display: flex; - justify-content: center; -} - -.letter-actions { - display: flex; - flex-direction: column; - align-items: center; - gap: 12px; - width: 100%; -} - -.fade-in-action { - animation: fadeInActionAnim 0.5s ease forwards; -} - -@keyframes fadeInActionAnim { - 0% { opacity: 0; transform: translateY(12px); } - 100% { opacity: 1; transform: translateY(0); } } .btn-break-seal { @@ -583,95 +621,22 @@ body { box-shadow: 0 10px 28px rgba(201, 168, 106, 0.6); } -.btn-launch-quiz { - font-size: clamp(1.05rem, 3.4vw, 1.22rem); - padding: 14px 28px; - font-weight: 700; - letter-spacing: 0.5px; - border-radius: 10px; - cursor: pointer; - background: linear-gradient(135deg, #e6c564 0%, #c9a86a 50%, #8c6838 100%); - color: #1a0f05; - border: 1px solid #ffd700; - box-shadow: 0 6px 25px rgba(201, 168, 106, 0.5), 0 0 15px rgba(255, 215, 0, 0.35); - transition: all 0.3s ease; -} - -.btn-launch-quiz:hover { - transform: translateY(-2px) scale(1.02); - box-shadow: 0 10px 32px rgba(201, 168, 106, 0.75), 0 0 25px rgba(255, 215, 0, 0.6); -} - -.glow-pulse { - animation: glowPulseAnim 2.6s infinite alternate ease-in-out; -} - -@keyframes glowPulseAnim { - 0% { box-shadow: 0 6px 20px rgba(201, 168, 106, 0.45); } - 100% { box-shadow: 0 10px 32px rgba(201, 168, 106, 0.8), 0 0 25px rgba(255, 215, 0, 0.6); } -} - -.btn-close-letter { - font-size: 0.92rem; - color: var(--text-muted); - background: transparent; - border: 1px solid rgba(201, 168, 106, 0.25); - padding: 8px 18px; - border-radius: 6px; - cursor: pointer; - transition: all 0.2s ease; -} - -.btn-close-letter:hover { - color: var(--gold-bright); - border-color: var(--gold); - background: rgba(201, 168, 106, 0.1); -} - @media (max-width: 480px) { .antique-envelope-scene { - width: min(360px, 94vw); - height: min(210px, 58vw); + width: min(320px, 92vw); + height: min(205px, 58vw); margin: 15px auto 25px; } - .antique-envelope-scene.envelope-opened, - .antique-envelope-scene:has(.envelope-opened) { - margin-top: 115px; - margin-bottom: 20px; + .sketched-wax-seal { + width: 60px; + height: 60px; + top: 56%; } .envelope-opened .letter-sheet { - transform: translateY(-110px) scale(1.02); - height: 310px; - padding: 12px 14px; + transform: translateY(-100px) scale(1.04); } - .sketched-wax-seal { - width: 56px; - height: 56px; - } - .env-sender-line { - font-size: 0.72rem; - left: 10px; - top: 8px; - } - .letter-crest-small { - width: 38px; - height: 38px; - margin-bottom: 5px; - } - .letter-title { - font-size: 0.94rem; - } - .letter-subtitle { - font-size: 0.74rem; - margin-bottom: 10px; - } - .btn-launch-express { - padding: 7px 13px; - font-size: 0.75rem; - } - .btn-launch-quiz { - padding: 12px 18px; - font-size: 0.95rem; + .envelope-front-pocket { + padding-bottom: 14px; } } diff --git a/app/static/js/quiz.js b/app/static/js/quiz.js index 19b663a..0c68e8d 100755 --- a/app/static/js/quiz.js +++ b/app/static/js/quiz.js @@ -14,22 +14,25 @@ const UI_TEXT = { de: { pageTitle: "✨ Magisches Hogwarts-Escape-Quiz ✨", pageSubtitle: "10 knifflige Rätsel aus der Zauberwelt warten auf dich", - senderLine: "Abs.: Hogwarts Schule für Hexerei und Zauberei", - letterTitle: "Hogwarts-Schule", - letterSubtitle: "für Hexerei und Zauberei", - introDescClosed: "Ein verzauberter Pergamentbrief aus Hogwarts liegt vor dir.
Wähle deinen Schwierigkeitsgrad und brich das rote Zaubersiegel:", - introDescOpened: "Lies die Botschaft der Schulleitung aufmerksam.
Sobald du bereit bist, besteige den Hogwarts-Express zur Prüfung:", + envelopeLetter: "Hogwarts-Schule für Hexerei und Zauberei", + envelopeRecipient: "An den ehrenwerten Zauberschüler", + envelopeLocation: "Auf dem Prüfungspfad • Schloss Hogwarts", + letterSchoolTitle: "Hogwarts-Schule für Hexerei und Zauberei", + letterHeadmaster: "Schulleiter: Albus Dumbledore
(Großhexenmeister, Träger des Merlin-Ordens Erster Klasse)", + letterSalutation: "Liebe Hexe, lieber Zauberer,", + letterParagraph1: "wir freuen uns, dir mitteilen zu dürfen, dass du zu den Magischen Z.A.G.-Prüfungen des Zaubereiministeriums zugelassen bist.", + letterParagraph2: "Zehn anspruchsvolle Prüfungsfragen entscheiden über deinen Rang in den Chroniken von Hogwarts. Zeige deinen Scharfsinn und sichere bis zu 1.000 Hauspunkte für dein Haus!", + letterClosing: "Mit vorzüglicher Hochachtung,", + letterSignature: "Minerva McGonagall", + letterSignTitle: "Stellvertretende Schulleiterin", introDesc: "Ein verzauberter Pergamentbrief aus Hogwarts liegt vor dir.
Wähle deinen Schwierigkeitsgrad und brich das rote Zaubersiegel:", diffLabel: "Schwierigkeitsgrad wählen:", diffAll: "Alle gemischt", diffEasy: "Leicht", diffMed: "Mittel", diffHard: "Schwer", - breakSealBtn: "📜 Siegel brechen & Brief öffnen", - startQuizBtn: "🚂 Hogwarts-Express besteigen & Prüfung beginnen ➔", - closeLetterBtn: "↩ Brief wieder schließen", startBtn: "📜 Siegel brechen & Brief öffnen", - startBtnCasting: "✨ Zauberstab wird vorbereitet...", + startBtnCasting: "✨ Zauber wird gewirkt...", pointsLabel: "🏆 Hauspunkte", questionLabel: "Frage", ofLabel: "von", @@ -50,22 +53,25 @@ const UI_TEXT = { en: { pageTitle: "✨ Magical Hogwarts Escape Quiz ✨", pageSubtitle: "10 tricky wizarding world puzzles await you", - senderLine: "Sender: Hogwarts School of Witchcraft and Wizardry", - letterTitle: "Hogwarts School", - letterSubtitle: "of Witchcraft and Wizardry", - introDescClosed: "An enchanted Hogwarts parchment letter lies before you.
Choose your difficulty and break the crimson magical seal:", - introDescOpened: "Read the message from Hogwarts leadership carefully.
When you are ready, board the Hogwarts Express for your trial:", + envelopeLetter: "Hogwarts School of Witchcraft and Wizardry", + envelopeRecipient: "To the Esteemed Wizarding Student", + envelopeLocation: "On the Path of Trials • Hogwarts Castle", + letterSchoolTitle: "Hogwarts School of Witchcraft and Wizardry", + letterHeadmaster: "Headmaster: Albus Dumbledore
(Order of Merlin, First Class, Grand Sorc.)", + letterSalutation: "Dear Witch or Wizard,", + letterParagraph1: "we are pleased to inform you that you have been admitted to the Magical O.W.L. Examinations of the Ministry of Magic.", + letterParagraph2: "Ten demanding examination questions will determine your rank in the Hogwarts archives. Show your wisdom and claim up to 1,000 House Points for your house!", + letterClosing: "Yours sincerely,", + letterSignature: "Minerva McGonagall", + letterSignTitle: "Deputy Headmistress", introDesc: "An enchanted Hogwarts parchment letter lies before you.
Choose your difficulty and break the crimson magical seal:", diffLabel: "Choose difficulty level:", diffAll: "All mixed", diffEasy: "Easy", diffMed: "Medium", diffHard: "Hard", - breakSealBtn: "📜 Break Seal & Open Letter", - startQuizBtn: "🚂 Board Hogwarts Express & Begin Trials ➔", - closeLetterBtn: "↩ Close letter again", startBtn: "📜 Break Seal & Open Letter", - startBtnCasting: "✨ Preparing wand...", + startBtnCasting: "✨ Casting spell...", pointsLabel: "🏆 House Points", questionLabel: "Question", ofLabel: "of", @@ -152,39 +158,37 @@ function applyQuizTranslations(lang) { const hintHeading = document.getElementById("hintHeading"); const answerInput = document.getElementById("answerInput"); - const envSenderLine = document.getElementById("envSenderLine"); - const letterTitle = document.getElementById("letterTitle"); - const letterSubtitle = document.getElementById("letterSubtitle"); - const startQuizBtnInLetter = document.getElementById("startQuizBtnInLetter"); - const breakSealBtn = document.getElementById("breakSealBtn"); - const startQuizBtn = document.getElementById("startQuizBtn"); - const closeLetterBtn = document.getElementById("closeLetterBtn"); + const letterSchoolTitle = document.getElementById("letterSchoolTitle"); + const letterHeadmaster = document.getElementById("letterHeadmaster"); + const letterSalutation = document.getElementById("letterSalutation"); + const letterParagraph1 = document.getElementById("letterParagraph1"); + const letterParagraph2 = document.getElementById("letterParagraph2"); + const letterClosing = document.getElementById("letterClosing"); + const letterSignature = document.getElementById("letterSignature"); + const letterSignTitle = document.getElementById("letterSignTitle"); + + const envelopeRecipient = document.getElementById("envelopeRecipient"); + const envelopeLocation = document.getElementById("envelopeLocation"); if (pageTitle) pageTitle.innerText = t.pageTitle; if (pageSubtitle) pageSubtitle.innerText = t.pageSubtitle; - if (envSenderLine && t.senderLine) envSenderLine.innerText = t.senderLine; - if (letterTitle && t.letterTitle) letterTitle.innerText = t.letterTitle; - if (letterSubtitle && t.letterSubtitle) letterSubtitle.innerText = t.letterSubtitle; - if (startQuizBtnInLetter && t.startQuizBtn) startQuizBtnInLetter.innerText = t.startQuizBtn; - - const envelope = document.getElementById("envelope"); - if (introDesc) { - if (envelope && envelope.classList.contains("envelope-opened") && t.introDescOpened) { - introDesc.innerHTML = t.introDescOpened; - } else if (t.introDescClosed) { - introDesc.innerHTML = t.introDescClosed; - } else if (t.introDesc) { - introDesc.innerHTML = t.introDesc; - } - } + if (envelopeLetter) envelopeLetter.innerText = t.envelopeLetter; + if (envelopeRecipient && t.envelopeRecipient) envelopeRecipient.innerText = t.envelopeRecipient; + if (envelopeLocation && t.envelopeLocation) envelopeLocation.innerText = t.envelopeLocation; + if (letterSchoolTitle && t.letterSchoolTitle) letterSchoolTitle.innerText = t.letterSchoolTitle; + if (letterHeadmaster && t.letterHeadmaster) letterHeadmaster.innerHTML = t.letterHeadmaster; + if (letterSalutation && t.letterSalutation) letterSalutation.innerText = t.letterSalutation; + if (letterParagraph1 && t.letterParagraph1) letterParagraph1.innerHTML = t.letterParagraph1; + if (letterParagraph2 && t.letterParagraph2) letterParagraph2.innerHTML = t.letterParagraph2; + if (letterClosing && t.letterClosing) letterClosing.innerText = t.letterClosing; + if (letterSignature && t.letterSignature) letterSignature.innerText = t.letterSignature; + if (letterSignTitle && t.letterSignTitle) letterSignTitle.innerText = t.letterSignTitle; + if (introDesc) introDesc.innerHTML = t.introDesc; if (diffLabel) diffLabel.innerText = t.diffLabel; if (diffAllText) diffAllText.innerText = t.diffAll; if (diffEasyText) diffEasyText.innerText = t.diffEasy; if (diffMedText) diffMedText.innerText = t.diffMed; if (diffHardText) diffHardText.innerText = t.diffHard; - if (breakSealBtn && !breakSealBtn.disabled) breakSealBtn.innerText = t.breakSealBtn || t.startBtn; - if (startQuizBtn && !startQuizBtn.disabled) startQuizBtn.innerText = t.startQuizBtn; - if (closeLetterBtn) closeLetterBtn.innerText = t.closeLetterBtn; if (startBtn && !startBtn.disabled) startBtn.innerText = t.startBtn; if (checkBtn) checkBtn.innerText = t.checkBtn; if (hintBtn) hintBtn.innerText = t.hintBtn; @@ -249,14 +253,16 @@ function saveRecentQuestions(ids) { } catch(e) {} } -function breakSealAndOpenLetter() { +async function startGame() { const envelope = document.getElementById("envelope"); - const scene = document.getElementById("envelopeScene"); - if (!envelope || envelope.classList.contains("envelope-opened")) return; + const startBtn = document.getElementById("startBtn"); + const t = UI_TEXT[currentLang] || UI_TEXT.de; - playSound('magic'); + startBtn.disabled = true; + startBtn.innerText = t.startBtnCasting; envelope.classList.add("envelope-opened"); - if (scene) scene.classList.add("envelope-opened"); + playSound('magic'); + sessionQuestionIds = []; // Start background music if enabled or first click const bgm = document.getElementById("bgm"); @@ -272,73 +278,6 @@ function breakSealAndOpenLetter() { }).catch(() => {}); } - const breakSealBtn = document.getElementById("breakSealBtn"); - const startBtn = document.getElementById("startBtn"); - const letterActions = document.getElementById("letterActions"); - const introDesc = document.getElementById("introDesc"); - const t = UI_TEXT[currentLang] || UI_TEXT.de; - - if (breakSealBtn) breakSealBtn.classList.add("hidden"); - if (startBtn) startBtn.classList.add("hidden"); - if (letterActions) { - letterActions.classList.remove("hidden"); - letterActions.classList.add("fade-in-action"); - } - if (introDesc && t.introDescOpened) { - introDesc.innerHTML = t.introDescOpened; - } -} - -function closeLetter() { - const envelope = document.getElementById("envelope"); - const scene = document.getElementById("envelopeScene"); - if (!envelope) return; - - envelope.classList.remove("envelope-opened"); - if (scene) scene.classList.remove("envelope-opened"); - - const breakSealBtn = document.getElementById("breakSealBtn"); - const startBtn = document.getElementById("startBtn"); - const letterActions = document.getElementById("letterActions"); - const introDesc = document.getElementById("introDesc"); - const startQuizBtn = document.getElementById("startQuizBtn"); - const startQuizBtnInLetter = document.getElementById("startQuizBtnInLetter"); - const t = UI_TEXT[currentLang] || UI_TEXT.de; - - if (startQuizBtn) { - startQuizBtn.disabled = false; - startQuizBtn.innerText = t.startQuizBtn; - } - if (startQuizBtnInLetter) { - startQuizBtnInLetter.disabled = false; - startQuizBtnInLetter.innerText = t.startQuizBtn; - } - - if (letterActions) letterActions.classList.add("hidden"); - if (breakSealBtn) breakSealBtn.classList.remove("hidden"); - if (startBtn) startBtn.classList.remove("hidden"); - if (introDesc && t.introDescClosed) { - introDesc.innerHTML = t.introDescClosed; - } -} - -async function startQuizFromLetter() { - const startQuizBtn = document.getElementById("startQuizBtn"); - const startQuizBtnInLetter = document.getElementById("startQuizBtnInLetter"); - const t = UI_TEXT[currentLang] || UI_TEXT.de; - - if (startQuizBtn) { - startQuizBtn.disabled = true; - startQuizBtn.innerText = t.startBtnCasting; - } - if (startQuizBtnInLetter) { - startQuizBtnInLetter.disabled = true; - startQuizBtnInLetter.innerText = t.startBtnCasting; - } - - playSound('magic'); - sessionQuestionIds = []; - try { const recentIds = getRecentQuestionIds(); const wrongIds = getWrongQuestionIds(); @@ -365,40 +304,18 @@ async function startQuizFromLetter() { currentScore = data.score; attemptsUsed = data.attempts_used; - const introCard = document.getElementById("introCard"); - if (introCard) { - introCard.style.transition = "opacity 0.4s ease, transform 0.4s ease"; - introCard.style.opacity = "0"; - introCard.style.transform = "scale(0.97)"; - } - setTimeout(() => { - if (introCard) { - introCard.classList.add("hidden"); - introCard.style.opacity = ""; - introCard.style.transform = ""; - } + document.getElementById("introCard").classList.add("hidden"); document.getElementById("gameCard").classList.remove("hidden"); startTimer(); renderQuestion(data); - }, 400); + }, 1800); } catch (err) { alert(t.startError + err.message); - if (startQuizBtn) { - startQuizBtn.disabled = false; - startQuizBtn.innerText = t.startQuizBtn; - } - } -} - -// Fallback alias for startGame -function startGame() { - const envelope = document.getElementById("envelope"); - if (envelope && !envelope.classList.contains("envelope-opened")) { - breakSealAndOpenLetter(); - } else { - startQuizFromLetter(); + startBtn.disabled = false; + startBtn.innerText = t.startBtn; + envelope.classList.remove("envelope-opened"); } } diff --git a/app/templates/base.html b/app/templates/base.html index 4ba65c9..46528f3 100755 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -8,7 +8,7 @@ - + {% block head %}{% endblock %} diff --git a/app/templates/index.html b/app/templates/index.html index af98e40..761ec6e 100755 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -12,46 +12,63 @@
- -
-
- +
+
+
- Hogwarts-Wappen -

Hogwarts-Schule

-

für Hexerei und Zauberei

- +
+
+
+ Hogwarts Crest +
+

Hogwarts-Schule für Hexerei und Zauberei

+

Schulleiter: Albus Dumbledore
(Großhexenmeister, Träger des Merlin-Ordens 1. Klasse)

+
+ ❦ + + ✦ + + ❧ +
+
+ +
+

Liebe Hexe, lieber Zauberer,

+

+ wir freuen uns, dir mitteilen zu dürfen, dass du zu den Magischen Z.A.G.-Prüfungen an der Hogwarts-Schule zugelassen bist. +

+

+ Zehn anspruchsvolle Prüfungsfragen entscheiden über deinen Rang in den Chroniken. Zeige deinen Scharfsinn und sichere bis zu 1.000 Hauspunkte für dein Haus! +

+
+ +
+

Mit vorzüglicher Hochachtung,

+

Minerva McGonagall

+

Stellvertretende Schulleiterin

+
- -
- - - - - + +
+
+
+

Hogwarts-Schule für Hexerei und Zauberei

+

An den ehrenwerten Zauberschüler

+

Auf dem Prüfungspfad • Schloss Hogwarts

+
- -
- Abs.: Hogwarts Schule für Hexerei und Zauberei + +
+
- -
- - - - -
- - -
+ +
Hogwarts-Wappen Siegel
@@ -60,7 +77,7 @@
-
+

Ein verzauberter Pergamentbrief aus Hogwarts liegt vor dir.
Wähle deinen Schwierigkeitsgrad und brich das rote Zaubersiegel: @@ -85,19 +102,9 @@

-
- - -
+
@@ -163,5 +170,5 @@ {% endblock %} {% block scripts %} - + {% endblock %}