diff --git a/app/static/css/style.css b/app/static/css/style.css index eaaaf22..d0ec9aa 100755 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -232,109 +232,330 @@ body { } /* ========================================= - ENVELOPE INTRO ANIMATION + ANTIQUE HOGWARTS PARCHMENT LETTER & SKETCHED SEAL ========================================= */ -.intro-card { - text-align: center; +.intro-parchment-wrapper { + background: transparent !important; + border: none !important; + box-shadow: none !important; + padding: 0 !important; + max-width: 600px; + margin: 0 auto; } -.intro-envelope { +.hogwarts-parchment-letter { position: relative; - width: min(220px, 70vw); - height: min(140px, 45vw); - margin: 15px auto 25px; - perspective: 800px; -} - -.envelope-body { width: 100%; - height: 100%; - background: #e8dbc3; + margin: 10px auto 25px; + background-color: #f5eedb; + background-image: + radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.4) 0%, rgba(140, 100, 50, 0.18) 100%), + url('/static/img/parchment_texture.jpg'); + background-size: cover; + background-position: center; border-radius: 6px; - border: 2px solid var(--gold); - position: relative; - box-shadow: 0 8px 20px rgba(0,0,0,0.5); + 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; } -.envelope-flap { +/* Three-dimensional trifold crease shading */ +.parchment-texture-layer { position: absolute; - top: 0; - left: 0; + 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; +} + +/* Sketched Wax Seal */ +.sketched-wax-seal { + position: absolute; + top: -24px; + right: 24px; + width: 78px; + height: 78px; + 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; + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.65), + 0 2px 6px rgba(0, 0, 0, 0.45); +} + +.sketched-wax-seal:hover { + transform: rotate(0deg) scale(1.08); + box-shadow: + 0 12px 28px rgba(0, 0, 0, 0.75), + 0 0 16px rgba(218, 165, 32, 0.4); +} + +.seal-crest-img { width: 100%; height: 100%; - background: #d8c9ad; - clip-path: polygon(0 0, 50% 55%, 100% 0); - transform-origin: top; - transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); - z-index: 3; - border-top-left-radius: 4px; - border-top-right-radius: 4px; -} - -.wax-seal { - position: absolute; - top: 45%; - left: 50%; - transform: translate(-50%, -50%); - width: 42px; - height: 42px; - background: radial-gradient(circle, #a81c1c 40%, #680d0d 100%); border-radius: 50%; - border: 2px solid #500606; - color: #ffd700; - font-weight: bold; - font-size: 1.3rem; - display: flex; - align-items: center; - justify-content: center; - z-index: 4; - box-shadow: 0 4px 8px rgba(0,0,0,0.5); - transition: opacity 0.4s ease; + object-fit: cover; + display: block; + border: 3px solid #4a0d0d; + box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7); } -.letter-preview { +.seal-emboss-ring { position: absolute; - bottom: 4px; - left: 50%; - transform: translateX(-50%); - width: 90%; - height: 80%; - background: #fffdfa; - border: 1px solid #d4c5a9; - border-radius: 4px; - padding: 8px; - z-index: 2; - transition: transform 0.7s ease 0.2s; -} - -.letter-text { - font-size: 0.65rem; - color: #443; - text-align: center; - font-style: italic; - line-height: 1.3; -} - -/* Open state */ -.envelope-opened .envelope-flap { - transform: rotateX(180deg); - z-index: 1; -} - -.envelope-opened .wax-seal { - opacity: 0; + inset: 2px; + border-radius: 50%; + border: 1.5px solid rgba(255, 215, 0, 0.25); + box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -3px 6px rgba(0, 0, 0, 0.6); pointer-events: none; } -.envelope-opened .letter-preview { - transform: translate(-50%, -30px); +.seal-glow { + position: absolute; + inset: -6px; + border-radius: 50%; + background: radial-gradient(circle, rgba(255, 215, 0, 0.35) 0%, transparent 70%); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; } -.intro-text { - font-size: clamp(0.95rem, 3.5vw, 1.15rem); - line-height: 1.6; - margin-bottom: 20px; +.sketched-wax-seal:hover .seal-glow { + opacity: 1; +} + +/* Letter Inner Layout */ +.letter-inner { + position: relative; + z-index: 2; + text-align: center; +} + +/* Header */ +.letter-header { + margin-bottom: 16px; +} + +.letter-crest-box { + width: 60px; + height: 60px; + margin: 0 auto 8px; + border-radius: 50%; + overflow: hidden; + box-shadow: 0 3px 8px 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(1.1rem, 3.2vw, 1.4rem); + color: #2c1a0c; + text-transform: uppercase; + letter-spacing: 1.5px; + font-weight: 700; + margin-bottom: 4px; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); +} + +.letter-headmaster { + font-family: 'Caveat', 'Georgia', cursive; + font-size: 1.05rem; + color: #4a331c; + font-style: italic; + line-height: 1.35; + margin-bottom: 10px; +} + +.letter-headmaster span { + font-size: 0.88rem; + color: #6a4c28; +} + +.letter-ornament-line { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + color: #8c6838; + margin: 8px auto 14px; + max-width: 320px; +} + +.ornament-rule { + flex: 1; + height: 1px; + background: linear-gradient(to right, transparent, #8c6838, transparent); +} + +.ornament-leaf, .ornament-shield { + font-size: 0.95rem; +} + +/* 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 8px; + line-height: 1.65; + text-shadow: 0 0 1px rgba(15, 61, 36, 0.25); +} + +.letter-salutation { + font-size: clamp(1.35rem, 4vw, 1.6rem); + font-weight: 700; + margin-bottom: 12px; + color: #0a301c; +} + +.letter-paragraph { + font-size: clamp(1.18rem, 3.5vw, 1.35rem); + margin-bottom: 14px; + text-indent: 1.5em; +} + +.letter-paragraph strong { + color: #052414; + font-weight: 700; +} + +/* Signature Block */ +.letter-signature-block { + margin-top: 18px; + text-align: right; + padding-right: 12px; + font-family: 'Marck Script', 'Caveat', cursive; + color: #0f3d24; +} + +.letter-closing { + font-size: 1.25rem; + font-style: italic; + color: #2b4533; + margin-bottom: 4px; +} + +.letter-signature-ink { + font-size: clamp(1.6rem, 5vw, 2.05rem); + font-weight: 700; + color: #082816; + letter-spacing: 0.5px; + transform: rotate(-2deg); + display: inline-block; + margin-bottom: 2px; + text-shadow: 0 0 1px rgba(8, 40, 22, 0.35); +} + +.letter-sign-title { + font-size: 0.95rem; + color: #4a6352; + font-style: italic; +} + +/* Controls Below Parchment */ +.intro-controls-panel { + margin-top: 15px; + text-align: center; +} + +.intro-subnote { + font-size: 0.92rem; color: var(--text-muted); + line-height: 1.5; + margin-bottom: 12px; +} + +.btn-break-seal { + font-size: 1.12rem; + padding: 14px 28px; + box-shadow: 0 6px 20px rgba(201, 168, 106, 0.4); + transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.btn-break-seal:hover { + transform: translateY(-2px) scale(1.02); + 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; + } + .sketched-wax-seal { + top: -18px; + right: 12px; + width: 64px; + height: 64px; + } + .letter-body-handwritten { + padding: 0; + } + .letter-paragraph { + text-indent: 1em; + } } .difficulty-selection { diff --git a/app/static/img/hogwarts_seal.jpg b/app/static/img/hogwarts_seal.jpg new file mode 100755 index 0000000..8353180 Binary files /dev/null and b/app/static/img/hogwarts_seal.jpg differ diff --git a/app/static/img/parchment_texture.jpg b/app/static/img/parchment_texture.jpg new file mode 100755 index 0000000..f335bf4 Binary files /dev/null and b/app/static/img/parchment_texture.jpg differ diff --git a/app/static/js/quiz.js b/app/static/js/quiz.js index 5bc06df..fafc3a6 100755 --- a/app/static/js/quiz.js +++ b/app/static/js/quiz.js @@ -15,7 +15,15 @@ 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", - introDesc: "Ein verzauberter Brief aus Hogwarts schwebt vor dir in der Luft.
Bist du bereit, die Prüfungen abzulegen und deine Hauspunkte zu sichern?", + 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", @@ -44,7 +52,15 @@ const UI_TEXT = { pageTitle: "✨ Magical Hogwarts Escape Quiz ✨", pageSubtitle: "10 tricky wizarding world puzzles await you", envelopeLetter: "Hogwarts School of Witchcraft and Wizardry", - introDesc: "An enchanted letter from Hogwarts is floating in the air before you.
Are you ready to take the exams and secure House Points?", + 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", @@ -138,9 +154,26 @@ function applyQuizTranslations(lang) { const hintHeading = document.getElementById("hintHeading"); const answerInput = document.getElementById("answerInput"); + 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"); + if (pageTitle) pageTitle.innerText = t.pageTitle; if (pageSubtitle) pageSubtitle.innerText = t.pageSubtitle; if (envelopeLetter) envelopeLetter.innerText = t.envelopeLetter; + 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; diff --git a/app/templates/base.html b/app/templates/base.html index 7bb8b0e..dc781c9 100755 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -5,7 +5,10 @@ {% block title %}Magisches Harry-Potter-Escape-Quiz{% endblock %} - + + + + {% block head %}{% endblock %} diff --git a/app/templates/index.html b/app/templates/index.html index 710a6ac..138c9da 100755 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -10,20 +10,61 @@ -
-
-
-
-
H
-
-

Hogwarts-Schule für Hexerei und Zauberei

+
+ +
+ +
+
+
+ + +
+ Hogwarts-Wappen Siegel +
+
+
+ + +
+
+
+ Hogwarts Crest +
+

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

+
-
-

- Ein verzauberter Brief aus Hogwarts schwebt vor dir in der Luft.
- Bist du bereit, die Prüfungen abzulegen und deine Hauspunkte zu sichern? + + +

+

+ Ein verzauberter Pergamentbrief aus Hogwarts liegt vor dir.
+ Wähle deinen Schwierigkeitsgrad und brich das rote Zaubersiegel:

@@ -45,7 +86,7 @@
-
@@ -113,5 +154,5 @@ {% endblock %} {% block scripts %} - + {% endblock %}