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/static/css/style.css
+65 -117
View File
@@ -253,13 +253,12 @@ body {
========================================= */
/* =========================================
CODEPEN POCKET GEOMETRY + MAJESTIC SLIDE-OUT ANIMATION
- Real 4-Flap Envelope Fold Geometry (from CodePen)
- Left, Right, Bottom and Top Flaps meeting at Center (50% 50%)
- Authentic Hogwarts Wax Seal in the Exact Mitte
- Subtle Handwriting Return Address (Top-Left)
- Clean Inner Letter Sheet (No Text Walls)
- Majestic Rise-Out Opening Animation with Space Creation
AUTHENTIC VINTAGE HOGWARTS CLOSED ENVELOPE
- Clean Antique Paper Colors (NO muddy image textures)
- Sharp, Clear Flap Outlines & Fold Lines
- Return Address Top-Left
- Distinct V-Flap Closure with Wax Seal at Apex
- Majestic Rise-Out Letter Reveal
========================================= */
.antique-envelope-scene {
@@ -283,26 +282,24 @@ body {
width: 100%;
height: 100%;
border-radius: 6px;
border: 2px solid #7c5830;
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.75),
0 4px 14px rgba(0, 0, 0, 0.5);
background-color: #ebdcb9;
}
/* Interior Back Wall of the Envelope */
.envelope-interior {
position: absolute;
inset: 0;
border-radius: 6px;
background-color: #2b1d12;
background-image:
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.8) 100%),
url('/static/img/parchment_texture.jpg');
background-size: cover;
border: 2px solid #7a5c36;
border-radius: 4px;
background: linear-gradient(180deg, #2b1d12 0%, #3a2618 60%, #4a3220 100%);
border: 2px solid #5a3c1e;
z-index: 1;
}
/* The Letter Sheet (Slides Up Out of the Envelope Pocket) */
/* The Letter Sheet (Slides Up Out of the Envelope) */
.letter-sheet {
position: absolute;
top: 10px;
@@ -310,12 +307,7 @@ body {
width: 92%;
height: 380px;
max-height: 65vh;
background-color: #f7f0df;
background-image:
radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.6) 0%, rgba(140, 100, 50, 0.15) 100%),
url('/static/img/parchment_texture.jpg');
background-size: cover;
background-position: center;
background: linear-gradient(145deg, #fffdf8 0%, #f7efe0 50%, #ecdcb8 100%);
border-radius: 5px;
border: 1.5px solid #8e6c43;
outline: 1px dashed rgba(130, 95, 55, 0.4);
@@ -323,7 +315,7 @@ body {
padding: 16px 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
z-index: 3;
/* Closed state: tucked completely inside the pocket, hidden */
/* Closed state: tucked completely inside, hidden */
visibility: hidden;
opacity: 0;
transform: translateY(40px) scale(0.92);
@@ -344,7 +336,7 @@ body {
opacity: 1;
pointer-events: auto;
transform: translateY(-145px) scale(1.02);
z-index: 10;
z-index: 12;
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.85),
0 0 35px rgba(201, 168, 106, 0.4);
@@ -400,112 +392,36 @@ body {
color: #ffffff;
}
/* Top V-Flap (Folds Down from Top Edge to Apex at 54%) */
.env-top-flap {
/* Solid Envelope Back Body with Subtle Paper Gradient */
.envelope-back-body {
position: absolute;
top: 0;
left: 0;
inset: 0;
border-radius: 4px;
background: linear-gradient(135deg, #f4ecd5 0%, #ebdcb9 50%, #dfc99b 100%);
border: 2px solid #7c5830;
z-index: 4;
overflow: hidden;
box-shadow: inset 0 0 15px rgba(120, 85, 40, 0.15);
}
.envelope-body-folds {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 18;
transform-origin: top center;
transform-style: preserve-3d;
clip-path: polygon(50% 54%, 0 0, 100% 0);
background-color: #ebd8ae;
background-image:
radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.35) 0%, rgba(130, 95, 45, 0.25) 100%),
url('/static/img/parchment_texture.jpg');
background-size: cover;
border-top: 2px solid #7c5830;
filter: drop-shadow(0 8px 14px rgba(35, 18, 5, 0.65));
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.35s;
}
.envelope-opened .env-top-flap {
transform: rotateX(180deg);
z-index: 2;
filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.4));
}
.env-top-sketch-line {
position: absolute;
top: 3px;
left: 3%;
width: 94%;
height: 94%;
clip-path: polygon(50% 51%, 2% 2%, 98% 2%);
border-top: 1.5px dashed rgba(110, 75, 35, 0.45);
pointer-events: none;
}
/* CodePen Envelope Pocket (Meeting at Exact Center 50% 50%) */
.envelope-pocket {
position: absolute;
inset: 0;
z-index: 14;
pointer-events: none;
border-radius: 6px;
overflow: hidden;
border-bottom: 2px solid #7c5830;
border-left: 2px solid #7c5830;
border-right: 2px solid #7c5830;
}
.envelope-pocket-flaps {
position: absolute;
inset: 0;
/* CodePen Bottom Flap Geometry */
clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0);
background-color: #e5cf9f;
background-image:
radial-gradient(ellipse at 50% 80%, rgba(255, 255, 255, 0.25) 0%, rgba(120, 85, 40, 0.25) 100%),
url('/static/img/parchment_texture.jpg');
background-size: cover;
filter: drop-shadow(0px -4px 6px rgba(30, 15, 5, 0.3));
}
/* CodePen Left Side Flap */
.envelope-pocket-flaps:before {
content: '';
position: absolute;
left: 0;
width: 50%;
height: 100%;
clip-path: polygon(100% 50%, 0 0, 0 100%);
background-color: #dfc794;
background-image:
linear-gradient(135deg, rgba(0, 0, 0, 0.12) 0%, rgba(255, 255, 255, 0.15) 100%),
url('/static/img/parchment_texture.jpg');
background-size: cover;
box-shadow: inset -2px 0 6px rgba(60, 40, 15, 0.2);
}
/* CodePen Right Side Flap */
.envelope-pocket-flaps:after {
content: '';
position: absolute;
right: 0;
width: 50%;
height: 100%;
clip-path: polygon(0 50%, 100% 0, 100% 100%);
background-color: #dbc38f;
background-image:
linear-gradient(-135deg, rgba(0, 0, 0, 0.12) 0%, rgba(255, 255, 255, 0.15) 100%),
url('/static/img/parchment_texture.jpg');
background-size: cover;
box-shadow: inset 2px 0 6px rgba(60, 40, 15, 0.2);
}
/* Small Handwriting Return Address in Top-Left ("Abs.: Hogwarts...") */
.env-sender-line {
position: absolute;
top: 12px;
left: 14px;
font-family: 'Caveat', 'Marck Script', cursive;
font-size: clamp(0.76rem, 2.1vw, 0.88rem);
font-size: clamp(0.78rem, 2.2vw, 0.92rem);
color: #0d3820; /* Authentic Hogwarts Emerald Ink */
font-weight: 600;
z-index: 16;
z-index: 8;
pointer-events: none;
letter-spacing: 0.2px;
text-shadow: 0 0 1px rgba(13, 56, 32, 0.25);
@@ -517,10 +433,42 @@ body {
opacity: 0;
}
/* Hand-Sketched Hogwarts Wax Seal in the Exact Mitte (Center 50% 50%) */
/* Top Triangular V-Flap (Folds Down to Apex at 55%) */
.envelope-closing-flap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: polygon(0 0, 100% 0, 50% 55%);
background: linear-gradient(180deg, #faeedb 0%, #ecdcb9 70%, #dfc99b 100%);
transform-origin: top center;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.35s;
z-index: 10;
border-top: 2px solid #7c5830;
filter: drop-shadow(0 6px 12px rgba(35, 18, 5, 0.55));
}
.envelope-opened .envelope-closing-flap {
transform: rotateX(180deg);
z-index: 2;
filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.4));
}
.v-flap-outline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 55%;
pointer-events: none;
}
/* Hand-Sketched Hogwarts Wax Seal in the Exact Mitte (Center 50% 55%) */
.sketched-wax-seal {
position: absolute;
top: 50%; /* Center of envelope */
top: 55%;
left: 50%;
transform: translate(-50%, -50%) rotate(-3deg);
width: 72px;
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 %}