kobold-ai/quiz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design: Implement CodePen-style opening envelope with Hogwarts aesthetics, central wax seal, and subtle top-left return address

Browse Source
This commit is contained in:
kobold-ai
2026-09-21 18:49:40 +02:00
parent 7e20d243e8
commit 8c4768747b
4 changed files with 971 additions and 1099 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/index.html
+31 -56
View File
@@ -12,69 +12,44 @@
<!-- Brief-Intro / Startmaske -->
<div id="introCard" class="card intro-card intro-parchment-wrapper">
<!-- Antiker geschlossener Hogwarts-Umschlag (öffnet sich bei Klick auf das Siegel) -->
<div class="antique-envelope-scene" id="envelope">
<div class="envelope-base">
<!-- Dunkleres Pergament-Innenfutter -->
<div class="envelope-interior"></div>
<!-- Briefumschlag (CodePen-Faltarchitektur mit Hogwarts-Optik) -->
<div class="envelope-outer-wrap">
<div class="envelope-form" id="envelope">
<div class="env-wrap">
<!-- Der darin liegende Briefbogen (gleitet beim Öffnen majestätisch hervor) -->
<div class="letter-sheet" id="letterSheet">
<div class="sheet-parchment-layer"></div>
<header class="letter-header">
<div class="letter-crest-box">
<img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts Crest" class="letter-crest-sketch">
</div>
<h3 class="letter-school-name" id="letterSchoolTitle">Hogwarts-Schule für Hexerei und Zauberei</h3>
<p class="letter-headmaster" id="letterHeadmaster">Schulleiter: Albus Dumbledore<br><span>(Großhexenmeister, Träger des Merlin-Ordens 1. Klasse)</span></p>
<div class="letter-ornament-line">
<span class="ornament-leaf">❦</span>
<span class="ornament-rule"></span>
<span class="ornament-shield">✦</span>
<span class="ornament-rule"></span>
<span class="ornament-leaf">❧</span>
</div>
</header>
<!-- Dunklere Pergament-Innenwand (hinter dem Briefbogen) -->
<div class="env-body-back"></div>
<div class="letter-body-handwritten">
<p class="letter-salutation" id="letterSalutation">Liebe Hexe, lieber Zauberer,</p>
<p class="letter-paragraph" id="letterParagraph1">
die schwebenden Kerzen der Großen Halle flackern in unruhigem Schein, und der Sprechende Hut hat nach Jahrhunderten des Schweigens ein wohlbehütetes Geheimnis preisgegeben: Tief in den uralten Gewölben des Schlosses – verborgen hinter den wachsamen Wasserspeiern und den staubigen Bänden der Verbotenen Abteilung – wurde eine magische Prüfungsurkunde versiegelt.
</p>
<p class="letter-paragraph" id="letterParagraph2">
Zehn arkanische Prüfungen des Scharfsinns, der Zauberkunde und der Entschlossenheit liegen vor dir. Nur wer wahren Mut beweist und die uralten Rätsel meistert, sichert sich seinen ehrenvollen Platz in den Chroniken von Hogwarts und trägt bis zu <strong>1.000 Hauspunkte</strong> für sein Haus davon!
</p>
<p class="letter-paragraph" id="letterParagraph3">
Halte deinen Zauberstab bereit, besinne dich auf deine Flüche und Gegenzauber und nimm dich vor verhexten Trugschlüssen in Acht. Wir erwarten deine Eule nicht später als mit dem nächsten Glockenschlag des Uhrenturms.
</p>
<!-- Der innenliegende Briefbogen (ohne lange Texte, gleitet beim Öffnen heraus) -->
<div class="env-letter-sheet" id="letterSheet">
<img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts-Wappen" class="letter-crest-small">
<h3 class="letter-title" id="letterTitle">Hogwarts-Schule</h3>
<p class="letter-subtitle" id="letterSubtitle">für Hexerei und Zauberei</p>
<button id="startQuizBtnInLetter" class="btn-launch-express" onclick="startQuizFromLetter()">
🚂 Hogwarts-Express besteigen & Prüfung beginnen ➔
</button>
</div>
<footer class="letter-signature-block">
<p class="letter-closing" id="letterClosing">Mit vorzüglicher Hochachtung,</p>
<p class="letter-signature-ink" id="letterSignature">Minerva McGonagall</p>
<p class="letter-sign-title" id="letterSignTitle">Stellvertretende Schulleiterin</p>
</footer>
</div>
<!-- Obere V-Klappe (schließt von oben nach unten zur Mitte) -->
<div class="env-top" id="envelopeFlap"></div>
<!-- Solide Rückseite des Briefumschlags -->
<div class="envelope-back-body">
<!-- Absender oben links auf der Rückseite (sonst kein Text) -->
<div class="envelope-sender-block" id="envelopeSenderBlock">
<span class="sender-label" id="senderLabel">Absender:</span>
<p class="sender-name" id="envelopeSender">Hogwarts-Schule für Hexerei und Zauberei</p>
<p class="sender-location" id="envelopeSenderLocation">Schulleitung • Schloss Hogwarts</p>
<!-- Untere Tasche mit Seiten- und Bodenfalzen (CodePen-Taschenfalz) -->
<div class="env-bottom-wrap">
<div class="env-bottom"></div>
</div>
</div>
<!-- Markante dreieckige V-Verschluss-Lasche -->
<div class="envelope-closing-flap envelope-v-flap" id="envelopeFlap">
<div class="v-flap-sketch-line"></div>
</div>
<!-- Absender oben links (dezent, klein, wie auf einem echten Brief) -->
<div class="env-sender-line" id="envSenderLine">
Abs.: Hogwarts Schule für Hexerei und Zauberei
</div>
<!-- Handgezeichnetes Hogwarts-Wachssiegel exakt in der Mitte -->
<div class="sketched-wax-seal" id="waxSeal" onclick="breakSealAndOpenLetter()" title="Siegel brechen & Brief öffnen">
<img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts-Wappen Siegel" class="seal-crest-img">
<div class="seal-emboss-ring"></div>
<div class="seal-glow"></div>
</div>
<!-- Handgezeichnetes Wachssiegel über der Klappenspitze -->
<div class="sketched-wax-seal" id="waxSeal" onclick="breakSealAndOpenLetter()" title="Siegel brechen & Brief öffnen">
<img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts-Wappen Siegel" class="seal-crest-img">
<div class="seal-emboss-ring"></div>
<div class="seal-glow"></div>
</div>
</div>
</div>
@@ -183,5 +158,5 @@
{% endblock %}
{% block scripts %}
<script src="/static/js/quiz.js?v=2.8"></script>
<script src="/static/js/quiz.js?v=2.9"></script>
{% endblock %}