diff --git a/app/static/css/style.css b/app/static/css/style.css index 9593222..b8581c5 100755 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -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; diff --git a/app/templates/base.html b/app/templates/base.html index d2359b4..4ba65c9 100755 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -8,7 +8,7 @@ - + {% block head %}{% endblock %} diff --git a/app/templates/index.html b/app/templates/index.html index ffbc7db..af98e40 100755 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -12,7 +12,7 @@
- +
@@ -28,22 +28,29 @@
- -
-
+ +
+ + + + +
- -
-
-
- - +
Abs.: Hogwarts Schule für Hexerei und Zauberei
- + +
+ + + + +
+ +
Hogwarts-Wappen Siegel
@@ -156,5 +163,5 @@ {% endblock %} {% block scripts %} - + {% endblock %}