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

Design: Restore clean antique envelope outlines without muddy image texture, add sharp V-flap and body fold lines (v3.1)

Browse Source
This commit is contained in:
kobold-ai
2026-09-21 20:18:02 +02:00
parent ea5bc12e21
commit 2b5ae98b91
3 changed files with 85 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/base.html
+1 -1
View File
@@ -8,7 +8,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Cinzel:wght@600;700&family=Marck+Script&family=MedievalSharp&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/css/style.css?v=3.0">
<link rel="stylesheet" href="/static/css/style.css?v=3.1">
{% block head %}{% endblock %}
</head>
<body>
app/templates/index.html
+19 -12
View File
@@ -12,7 +12,7 @@
<!-- 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-Taschenfaltung + Majestätische Aufgleit-Animation) -->
<!-- Antiker geschlossener Hogwarts-Umschlag (öffnet sich bei Klick auf das Siegel) -->
<div class="antique-envelope-scene" id="envelopeScene">
<div class="envelope-base" id="envelope">
<!-- Dunklere Pergament-Innenwand (hinter dem Briefbogen) -->
@@ -28,22 +28,29 @@
</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>
<!-- Solide Rückseite des Briefumschlags mit Nahtlinien -->
<div class="envelope-back-body">
<!-- Schöne diagonale Faltungsnähte auf der Rückseite -->
<svg class="envelope-body-folds" viewBox="0 0 100 100" preserveAspectRatio="none">
<line x1="0" y1="100" x2="50" y2="55" stroke="#7a5528" stroke-width="1.2" stroke-dasharray="3 2" />
<line x1="100" y1="100" x2="50" y2="55" stroke="#7a5528" stroke-width="1.2" stroke-dasharray="3 2" />
</svg>
</div>
<!-- Untere Tasche nach CodePen-Geometrie (Boden- und Seitenflügel) -->
<div class="envelope-pocket">
<div class="envelope-pocket-flaps"></div>
</div>
<!-- Absender oben links (dezent, klein, wie auf einem echten Brief) -->
<!-- Absender oben links auf der Rückseite (dezent, handschriftlich) -->
<div class="env-sender-line" id="envSenderLine">
Abs.: Hogwarts Schule für Hexerei und Zauberei
</div>
<!-- Handgezeichnetes Hogwarts-Wachssiegel exakt in der Mitte -->
<!-- Markante obere V-Klappe mit klarer Kontur & Schattierung -->
<div class="envelope-closing-flap" id="envelopeFlap">
<svg class="v-flap-outline" viewBox="0 0 100 55" preserveAspectRatio="none">
<polyline points="0,0 50,55 100,0" fill="none" stroke="#7a5528" stroke-width="1.6" stroke-dasharray="3 2" />
<polyline points="1,0 50,53.5 99,0" fill="none" stroke="rgba(255,255,255,0.45)" stroke-width="1" />
</svg>
</div>
<!-- Handgezeichnetes Hogwarts-Wachssiegel exakt auf 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>
@@ -156,5 +163,5 @@
{% endblock %}
{% block scripts %}
<script src="/static/js/quiz.js?v=3.0"></script>
<script src="/static/js/quiz.js?v=3.1"></script>
{% endblock %}