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

Design: Combine CodePen 4-flap pocket geometry with majestic slide-out animation

Browse Source
This commit is contained in:
kobold-ai
2026-09-21 19:50:44 +02:00
parent 8c4768747b
commit ea5bc12e21
4 changed files with 305 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/index.html
+32 -34
View File
@@ -12,44 +12,42 @@
<!-- Brief-Intro / Startmaske -->
<div id="introCard" class="card intro-card intro-parchment-wrapper">
<!-- Antiker geschlossener Hogwarts-Umschlag (öffnet sich bei Klick auf das Siegel) -->
<!-- Briefumschlag (CodePen-Faltarchitektur mit Hogwarts-Optik) -->
<div class="envelope-outer-wrap">
<div class="envelope-form" id="envelope">
<div class="env-wrap">
<!-- Briefumschlag (CodePen-Taschenfaltung + Majestätische Aufgleit-Animation) -->
<div class="antique-envelope-scene" id="envelopeScene">
<div class="envelope-base" id="envelope">
<!-- Dunklere Pergament-Innenwand (hinter dem Briefbogen) -->
<div class="envelope-interior"></div>
<!-- Dunklere Pergament-Innenwand (hinter dem Briefbogen) -->
<div class="env-body-back"></div>
<!-- Der darin liegende Briefbogen (gleitet beim Öffnen majestätisch hervor) -->
<div class="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>
<!-- 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>
<!-- Obere V-Klappe nach CodePen-Geometrie (schließt nach unten zur Mitte) -->
<div class="env-top-flap" id="envelopeFlap">
<div class="env-top-sketch-line"></div>
</div>
<!-- Obere V-Klappe (schließt von oben nach unten zur Mitte) -->
<div class="env-top" id="envelopeFlap"></div>
<!-- Untere Tasche nach CodePen-Geometrie (Boden- und Seitenflügel) -->
<div class="envelope-pocket">
<div class="envelope-pocket-flaps"></div>
</div>
<!-- Untere Tasche mit Seiten- und Bodenfalzen (CodePen-Taschenfalz) -->
<div class="env-bottom-wrap">
<div class="env-bottom"></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>
<!-- 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>
</div>
</div>
@@ -158,5 +156,5 @@
{% endblock %}
{% block scripts %}
<script src="/static/js/quiz.js?v=2.9"></script>
<script src="/static/js/quiz.js?v=3.0"></script>
{% endblock %}