Revert: Return to 611a94a envelope structure and remove parchment_texture.jpg without extra adaptations (v3.2)
This commit is contained in:
kobold-ai
@@ -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.1">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=3.2">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
+52
-45
@@ -12,46 +12,63 @@
|
||||
<!-- Brief-Intro / Startmaske -->
|
||||
<div id="introCard" class="card intro-card intro-parchment-wrapper">
|
||||
<!-- Antiker geschlossener Hogwarts-Umschlag (öffnet sich bei Klick auf das Siegel) -->
|
||||
<!-- 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) -->
|
||||
<div class="antique-envelope-scene" id="envelope">
|
||||
<div class="envelope-base">
|
||||
<!-- Dunkleres Pergament-Innenfutter -->
|
||||
<div class="envelope-interior"></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 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>
|
||||
|
||||
<div class="letter-body-handwritten">
|
||||
<p class="letter-salutation" id="letterSalutation">Liebe Hexe, lieber Zauberer,</p>
|
||||
<p class="letter-paragraph" id="letterParagraph1">
|
||||
wir freuen uns, dir mitteilen zu dürfen, dass du zu den <strong>Magischen Z.A.G.-Prüfungen</strong> an der Hogwarts-Schule zugelassen bist.
|
||||
</p>
|
||||
<p class="letter-paragraph" id="letterParagraph2">
|
||||
Zehn anspruchsvolle Prüfungsfragen entscheiden über deinen Rang in den Chroniken. Zeige deinen Scharfsinn und sichere bis zu <strong>1.000 Hauspunkte</strong> für dein Haus!
|
||||
</p>
|
||||
</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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- Vordere Umschlagtasche mit handschriftlicher Smaragd-Anschrift -->
|
||||
<div class="envelope-front-pocket">
|
||||
<div class="envelope-sketch-border"></div>
|
||||
<div class="envelope-address-block">
|
||||
<p class="addr-line addr-school" id="envelopeLetter">Hogwarts-Schule für Hexerei und Zauberei</p>
|
||||
<p class="addr-line addr-recipient" id="envelopeRecipient">An den ehrenwerten Zauberschüler</p>
|
||||
<p class="addr-line addr-location" id="envelopeLocation">Auf dem Prüfungspfad • Schloss Hogwarts</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Absender oben links auf der Rückseite (dezent, handschriftlich) -->
|
||||
<div class="env-sender-line" id="envSenderLine">
|
||||
Abs.: Hogwarts Schule für Hexerei und Zauberei
|
||||
<!-- Obere Klappe des Umschlags (überdeckt die Tasche und wird vom Siegel gehalten) -->
|
||||
<div class="envelope-closing-flap">
|
||||
<div class="flap-sketch-line"></div>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<!-- Handgezeichnetes Wachssiegel über der Klappenspitze -->
|
||||
<div class="sketched-wax-seal" id="waxSeal" onclick="startGame()" 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>
|
||||
@@ -60,7 +77,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Auswahlbereich unter dem Pergament -->
|
||||
<div class="intro-content intro-controls-panel" id="introControls">
|
||||
<div class="intro-content intro-controls-panel">
|
||||
<p class="intro-subnote" id="introDesc">
|
||||
Ein verzauberter Pergamentbrief aus Hogwarts liegt vor dir.<br>
|
||||
Wähle deinen Schwierigkeitsgrad und brich das rote Zaubersiegel:
|
||||
@@ -85,19 +102,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="intro-action-container">
|
||||
<button id="breakSealBtn" class="btn btn-primary btn-large btn-break-seal" onclick="breakSealAndOpenLetter()">
|
||||
📜 Siegel brechen & Brief öffnen
|
||||
</button>
|
||||
<div id="letterActions" class="letter-actions hidden">
|
||||
<button id="startQuizBtn" class="btn btn-primary btn-large btn-launch-quiz glow-pulse" onclick="startQuizFromLetter()">
|
||||
🚂 Hogwarts-Express besteigen & Prüfung beginnen ➔
|
||||
</button>
|
||||
<button id="closeLetterBtn" class="btn btn-secondary btn-close-letter" onclick="closeLetter()">
|
||||
↩ Brief wieder schließen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button id="startBtn" class="btn btn-primary btn-large btn-break-seal" onclick="startGame()">
|
||||
📜 Siegel brechen & Brief öffnen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -163,5 +170,5 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="/static/js/quiz.js?v=3.1"></script>
|
||||
<script src="/static/js/quiz.js?v=3.2"></script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user