diff --git a/app/static/css/style.css b/app/static/css/style.css index d0ec9aa..f2ce81a 100755 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -232,7 +232,7 @@ body { } /* ========================================= - ANTIQUE HOGWARTS PARCHMENT LETTER & SKETCHED SEAL + ANTIQUE HOGWARTS CLOSED ENVELOPE & LETTER REVEAL ========================================= */ .intro-parchment-wrapper { background: transparent !important; @@ -243,92 +243,179 @@ body { margin: 0 auto; } -.hogwarts-parchment-letter { +.antique-envelope-scene { + position: relative; + width: min(440px, 92vw); + height: min(260px, 58vw); + margin: 25px auto 35px; + perspective: 1200px; + perspective-origin: center top; +} + +.envelope-base { position: relative; width: 100%; - margin: 10px auto 25px; - background-color: #f5eedb; + height: 100%; + border-radius: 6px; + box-shadow: + 0 20px 45px rgba(0, 0, 0, 0.75), + 0 4px 14px rgba(0, 0, 0, 0.5); + transition: transform 0.6s ease; +} + +/* Interior of envelope (visible when flap opens and letter rises) */ +.envelope-interior { + position: absolute; + inset: 0; + border-radius: 6px; + background-color: #d1be9b; background-image: - radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.4) 0%, rgba(140, 100, 50, 0.18) 100%), + radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%), + url('/static/img/parchment_texture.jpg'); + background-size: cover; + border: 2px solid #7a5c36; + z-index: 1; +} + +/* The Letter inside the envelope (slides up when opened) */ +.letter-sheet { + position: absolute; + bottom: 8px; + left: 4%; + width: 92%; + height: 92%; + background-color: #f7f0df; + background-image: + radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.5) 0%, rgba(140, 100, 50, 0.15) 100%), url('/static/img/parchment_texture.jpg'); background-size: cover; background-position: center; - border-radius: 6px; - border: 2px solid #8e6c43; - padding: 34px 28px 28px; - box-shadow: - 0 18px 45px rgba(0, 0, 0, 0.75), - 0 4px 14px rgba(0, 0, 0, 0.45), - inset 0 0 50px rgba(110, 75, 30, 0.28), - inset 0 0 100px rgba(80, 50, 20, 0.12); - transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease; - overflow: visible; -} - -/* Three-dimensional trifold crease shading */ -.parchment-texture-layer { - position: absolute; - inset: 0; - pointer-events: none; - border-radius: 5px; - background: linear-gradient( - to bottom, - rgba(0, 0, 0, 0.02) 0%, - rgba(255, 255, 255, 0.1) 29%, - rgba(100, 68, 25, 0.12) 32%, - rgba(0, 0, 0, 0.03) 34%, - rgba(255, 255, 255, 0.09) 64%, - rgba(100, 68, 25, 0.12) 67%, - rgba(0, 0, 0, 0.04) 70%, - rgba(0, 0, 0, 0.06) 100% - ); - mix-blend-mode: multiply; -} - -/* Aged vignette and marbling contour */ -.parchment-vignette { - position: absolute; - inset: 0; - pointer-events: none; - border-radius: 5px; - box-shadow: - inset 0 0 35px rgba(100, 65, 25, 0.35), - inset 0 0 8px rgba(60, 35, 10, 0.4); -} - -/* Hand-drawn double sketched border */ -.parchment-sketch-border { - position: absolute; - inset: 10px; - border: 1.5px dashed rgba(120, 85, 45, 0.55); border-radius: 4px; - pointer-events: none; - outline: 1px solid rgba(140, 105, 60, 0.25); - outline-offset: -4px; + 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; + text-align: center; + outline: 1px dashed rgba(130, 95, 55, 0.45); + outline-offset: -5px; } -/* Sketched Wax Seal */ +/* Front Pocket of envelope (covers the lower portion of the letter) */ +.envelope-front-pocket { + position: absolute; + inset: 0; + border-radius: 6px; + background-color: #ebdcb9; + background-image: + radial-gradient(ellipse at 50% 65%, rgba(255, 255, 255, 0.25) 0%, rgba(130, 95, 45, 0.2) 100%), + url('/static/img/parchment_texture.jpg'); + background-size: cover; + 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; +} + +.envelope-sketch-border { + position: absolute; + bottom: 8px; + left: 8px; + right: 8px; + height: 48%; + border: 1px dashed rgba(120, 85, 45, 0.4); + border-radius: 3px; + pointer-events: none; +} + +/* 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); +} + +.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%; + background-color: #dfcd9f; + background-image: + radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.3) 0%, rgba(130, 95, 45, 0.25) 100%), + url('/static/img/parchment_texture.jpg'); + background-size: cover; + clip-path: polygon(0 0, 100% 0, 50% 57%); + transform-origin: top center; + transform-style: preserve-3d; + 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)); +} + +.flap-sketch-line { + position: absolute; + inset: 4px; + clip-path: polygon(2% 2%, 98% 2%, 50% 54%); + border-top: 1px dashed rgba(120, 85, 45, 0.4); + pointer-events: none; +} + +/* Sketched Wax Seal placed right over the flap tip */ .sketched-wax-seal { position: absolute; - top: -24px; - right: 24px; - width: 78px; - height: 78px; + top: 56%; + left: 50%; + transform: translate(-50%, -50%) rotate(-3deg); + width: 72px; + height: 72px; border-radius: 50%; cursor: pointer; - z-index: 10; - transform: rotate(-4deg); - transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, opacity 0.5s ease; + 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 20px rgba(0, 0, 0, 0.65), - 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 { - transform: rotate(0deg) scale(1.08); + transform: translate(-50%, -50%) rotate(0deg) scale(1.1); box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.75), - 0 0 16px rgba(218, 165, 32, 0.4); + 0 12px 28px rgba(0, 0, 0, 0.8), + 0 0 16px rgba(218, 165, 32, 0.45); } .seal-crest-img { @@ -364,25 +451,43 @@ body { opacity: 1; } -/* Letter Inner Layout */ -.letter-inner { - position: relative; - z-index: 2; - text-align: center; +/* Open state: Flap opens, seal dissolves, letter slides out */ +.envelope-opened .sketched-wax-seal { + animation: breakSealAnim 0.7s forwards; } -/* Header */ +.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 { + 0% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); opacity: 1; filter: none; } + 50% { transform: translate(-50%, -50%) rotate(10deg) scale(1.2); opacity: 0.8; filter: drop-shadow(0 0 25px #ffd700); } + 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: 16px; + margin-bottom: 8px; } .letter-crest-box { - width: 60px; - height: 60px; - margin: 0 auto 8px; + width: 48px; + height: 48px; + margin: 0 auto 4px; border-radius: 50%; overflow: hidden; - box-shadow: 0 3px 8px rgba(90, 60, 20, 0.25); + box-shadow: 0 2px 6px rgba(90, 60, 20, 0.25); border: 1px solid rgba(139, 105, 60, 0.3); } @@ -395,26 +500,26 @@ body { .letter-school-name { font-family: 'MedievalSharp', Georgia, serif; - font-size: clamp(1.1rem, 3.2vw, 1.4rem); + font-size: clamp(0.95rem, 2.8vw, 1.25rem); color: #2c1a0c; text-transform: uppercase; - letter-spacing: 1.5px; + letter-spacing: 1.2px; font-weight: 700; - margin-bottom: 4px; + margin-bottom: 2px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); } .letter-headmaster { font-family: 'Caveat', 'Georgia', cursive; - font-size: 1.05rem; + font-size: 0.95rem; color: #4a331c; font-style: italic; - line-height: 1.35; - margin-bottom: 10px; + line-height: 1.25; + margin-bottom: 6px; } .letter-headmaster span { - font-size: 0.88rem; + font-size: 0.82rem; color: #6a4c28; } @@ -422,10 +527,10 @@ body { display: flex; align-items: center; justify-content: center; - gap: 8px; + gap: 6px; color: #8c6838; - margin: 8px auto 14px; - max-width: 320px; + margin: 4px auto 8px; + max-width: 260px; } .ornament-rule { @@ -435,7 +540,7 @@ body { } .ornament-leaf, .ornament-shield { - font-size: 0.95rem; + font-size: 0.85rem; } /* Handwritten Body in Emerald Ink */ @@ -443,22 +548,22 @@ body { font-family: 'Marck Script', 'Caveat', cursive; color: #0f3d24; /* Authentic Hogwarts Emerald Ink */ text-align: left; - padding: 0 8px; - line-height: 1.65; + padding: 0 4px; + line-height: 1.5; text-shadow: 0 0 1px rgba(15, 61, 36, 0.25); } .letter-salutation { - font-size: clamp(1.35rem, 4vw, 1.6rem); + font-size: clamp(1.15rem, 3.5vw, 1.4rem); font-weight: 700; - margin-bottom: 12px; + margin-bottom: 6px; color: #0a301c; } .letter-paragraph { - font-size: clamp(1.18rem, 3.5vw, 1.35rem); - margin-bottom: 14px; - text-indent: 1.5em; + font-size: clamp(1.02rem, 3.0vw, 1.2rem); + margin-bottom: 8px; + text-indent: 1.2em; } .letter-paragraph strong { @@ -468,48 +573,48 @@ body { /* Signature Block */ .letter-signature-block { - margin-top: 18px; + margin-top: 10px; text-align: right; - padding-right: 12px; + padding-right: 8px; font-family: 'Marck Script', 'Caveat', cursive; color: #0f3d24; } .letter-closing { - font-size: 1.25rem; + font-size: 1.1rem; font-style: italic; color: #2b4533; - margin-bottom: 4px; + margin-bottom: 2px; } .letter-signature-ink { - font-size: clamp(1.6rem, 5vw, 2.05rem); + 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: 2px; + margin-bottom: 1px; text-shadow: 0 0 1px rgba(8, 40, 22, 0.35); } .letter-sign-title { - font-size: 0.95rem; + font-size: 0.88rem; color: #4a6352; font-style: italic; } /* Controls Below Parchment */ .intro-controls-panel { - margin-top: 15px; + margin-top: 20px; text-align: center; } .intro-subnote { - font-size: 0.92rem; + font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; - margin-bottom: 12px; + margin-bottom: 14px; } .btn-break-seal { @@ -524,37 +629,22 @@ body { box-shadow: 0 10px 28px rgba(201, 168, 106, 0.6); } -/* Animation on start */ -.envelope-opened .sketched-wax-seal { - animation: breakSealAnim 0.8s forwards; -} - -.envelope-opened.hogwarts-parchment-letter { - box-shadow: 0 0 35px rgba(201, 168, 106, 0.5), 0 20px 50px rgba(0, 0, 0, 0.8); - transform: scale(0.98); -} - -@keyframes breakSealAnim { - 0% { transform: rotate(-4deg) scale(1); opacity: 1; filter: none; } - 50% { transform: rotate(10deg) scale(1.2); opacity: 0.8; filter: drop-shadow(0 0 25px #ffd700); } - 100% { transform: rotate(25deg) scale(0.4); opacity: 0; filter: drop-shadow(0 0 40px #ffd700); } -} - @media (max-width: 480px) { - .hogwarts-parchment-letter { - padding: 28px 18px 20px; + .antique-envelope-scene { + width: min(320px, 92vw); + height: min(205px, 58vw); + margin: 15px auto 25px; } .sketched-wax-seal { - top: -18px; - right: 12px; - width: 64px; - height: 64px; + width: 60px; + height: 60px; + top: 56%; } - .letter-body-handwritten { - padding: 0; + .envelope-opened .letter-sheet { + transform: translateY(-100px) scale(1.04); } - .letter-paragraph { - text-indent: 1em; + .envelope-front-pocket { + padding-bottom: 14px; } } diff --git a/app/static/js/quiz.js b/app/static/js/quiz.js index fafc3a6..a8c94fa 100755 --- a/app/static/js/quiz.js +++ b/app/static/js/quiz.js @@ -15,6 +15,8 @@ const UI_TEXT = { 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", 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,", @@ -52,6 +54,8 @@ const UI_TEXT = { 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", letterSchoolTitle: "Hogwarts School of Witchcraft and Wizardry", letterHeadmaster: "Headmaster: Albus Dumbledore
(Order of Merlin, First Class, Grand Sorc.)", letterSalutation: "Dear Witch or Wizard,", @@ -163,9 +167,14 @@ function applyQuizTranslations(lang) { 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 (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; @@ -252,6 +261,7 @@ async function startGame() { startBtn.disabled = true; startBtn.innerText = t.startBtnCasting; envelope.classList.add("envelope-opened"); + playSound('magic'); sessionQuestionIds = []; // Start background music if enabled or first click @@ -299,7 +309,7 @@ async function startGame() { document.getElementById("gameCard").classList.remove("hidden"); startTimer(); renderQuestion(data); - }, 1100); + }, 1800); } catch (err) { alert(t.startError + err.message); diff --git a/app/templates/base.html b/app/templates/base.html index dc781c9..5874b89 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 138c9da..331ef5f 100755 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -11,52 +11,68 @@
- -
- -
-
-
+ +
+
+ +
- -
- Hogwarts-Wappen Siegel -
-
-
+ +
+
+
+
+ Hogwarts Crest +
+

Hogwarts-Schule für Hexerei und Zauberei

+

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

+
+ ❦ + + ✦ + + ❧ +
+
- -
-
-
- Hogwarts Crest +
+

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! +

-

Hogwarts-Schule für Hexerei und Zauberei

-

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

-
- ❦ - - ✦ - - ❧ -
-
-
-

Liebe Hexe, lieber Zauberer,

-

- wir freuen uns, dir mitteilen zu dürfen, dass du zu den Magischen Z.A.G.-Prüfungen des Zaubereiministeriums zugelassen bist. -

-

- 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! -

+
+

Mit vorzüglicher Hochachtung,

+

Minerva McGonagall

+

Stellvertretende Schulleiterin

+
-
-

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

+
+
+ + +
+
+
+ + +
+ Hogwarts-Wappen Siegel +
+
+
@@ -154,5 +170,5 @@ {% endblock %} {% block scripts %} - + {% endblock %}