+Update: Added printfiles and updated website.
This commit is contained in:
@@ -0,0 +1,254 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Wendls Heldenbogen – JGA · Im Jahre Schnee</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=MedievalSharp&family=Cinzel+Decorative:wght@700&family=Cinzel:wght@400;600&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--parchment: #f4e8c1;
|
||||
--parchment-dark: #e8d5a0;
|
||||
--ink: #1a0f00;
|
||||
--ink-light: #3d2200;
|
||||
--red: #8b1a1a;
|
||||
--gold: #9a7b1e;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #0d0800;
|
||||
font-family: 'Crimson Pro', Georgia, serif;
|
||||
color: var(--ink);
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.print-hint { text-align: center; color: #8a7340; font-size: 0.8rem; margin-bottom: 1.5rem; }
|
||||
|
||||
.sheet {
|
||||
max-width: 820px;
|
||||
margin: 0 auto;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.45) 0%, transparent 55%),
|
||||
linear-gradient(160deg, var(--parchment) 0%, var(--parchment-dark) 100%);
|
||||
border: 3px double #5a3a00;
|
||||
padding: 2rem 2.4rem 2.6rem;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 0 90px rgba(120,80,20,0.15);
|
||||
}
|
||||
|
||||
.sheet-head { text-align: center; border-bottom: 2px solid #5a3a00; padding-bottom: 1rem; margin-bottom: 1.4rem; }
|
||||
.sheet-head .kicker {
|
||||
font-family: 'Cinzel', serif; letter-spacing: 0.35em; font-size: 0.7rem;
|
||||
text-transform: uppercase; color: var(--red);
|
||||
}
|
||||
.sheet-head h1 {
|
||||
font-family: 'Cinzel Decorative', serif; font-size: 2.4rem; color: #3a1a00;
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
.sheet-head .subtitle { font-style: italic; color: var(--ink-light); font-size: 1rem; }
|
||||
|
||||
.identity {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
.identity .row { display: flex; align-items: baseline; gap: 0.5rem; }
|
||||
.identity .lbl {
|
||||
font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.1em;
|
||||
text-transform: uppercase; color: var(--gold); white-space: nowrap;
|
||||
}
|
||||
.identity .line { flex: 1; border-bottom: 1px dotted #5a3a00; min-height: 1.2rem; }
|
||||
|
||||
h2 {
|
||||
font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: 0.15em;
|
||||
text-transform: uppercase; color: var(--red);
|
||||
border-bottom: 1px solid rgba(90,58,0,0.4); padding-bottom: 0.3rem;
|
||||
margin: 1.8rem 0 0.9rem;
|
||||
display: flex; align-items: center; gap: 0.5rem;
|
||||
}
|
||||
h2 .em { font-size: 1.2rem; }
|
||||
|
||||
/* ── Würfel-Tracker ── */
|
||||
.dice-track {
|
||||
background: rgba(139,26,26,0.08);
|
||||
border: 1px dashed rgba(139,26,26,0.5); border-radius: 6px;
|
||||
padding: 1rem 1.2rem; text-align: center;
|
||||
}
|
||||
.dice-track .hint { font-size: 0.9rem; color: var(--ink-light); margin-bottom: 0.8rem; }
|
||||
.dice-track .hint strong { color: var(--red); }
|
||||
.dice-row { display: flex; justify-content: center; gap: 0.9rem; flex-wrap: wrap; }
|
||||
.die {
|
||||
width: 56px; height: 56px; border: 2px solid #3a1a00; border-radius: 10px;
|
||||
background: #fffef7;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: 'Cinzel Decorative', serif; font-size: 1.4rem; color: #c8b070;
|
||||
box-shadow: inset 0 2px 5px rgba(0,0,0,0.15);
|
||||
}
|
||||
.die .n { font-size: 0.95rem; }
|
||||
|
||||
/* ── Ressourcen ── */
|
||||
.res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem 1.4rem; }
|
||||
.res {
|
||||
border: 1px solid rgba(90,58,0,0.4); border-radius: 6px;
|
||||
padding: 0.6rem 0.8rem; background: rgba(255,255,255,0.25);
|
||||
}
|
||||
.res .res-name { font-family: 'Cinzel', serif; font-size: 0.8rem; color: #3a1a00; font-weight: 600; }
|
||||
.res .res-fn { font-size: 0.78rem; color: var(--ink-light); font-style: italic; margin-bottom: 0.4rem; }
|
||||
.pips { display: flex; gap: 0.35rem; flex-wrap: wrap; }
|
||||
.pip { width: 17px; height: 17px; border: 1.5px solid #5a3a00; border-radius: 50%; display: inline-block; }
|
||||
.pip.sq { border-radius: 3px; }
|
||||
|
||||
/* ── Checkboxen / Quests ── */
|
||||
.quests { list-style: none; }
|
||||
.quests li {
|
||||
display: flex; gap: 0.7rem; align-items: flex-start;
|
||||
padding: 0.5rem 0; border-bottom: 1px dotted rgba(90,58,0,0.3);
|
||||
}
|
||||
.box {
|
||||
flex-shrink: 0; width: 22px; height: 22px; border: 2px solid #3a1a00; border-radius: 4px;
|
||||
margin-top: 0.15rem; background: rgba(255,255,255,0.4);
|
||||
}
|
||||
.q-body { flex: 1; }
|
||||
.q-title { font-weight: 600; color: #3a1a00; }
|
||||
.q-no { color: var(--red); font-family: 'Cinzel', serif; font-weight: 600; margin-right: 0.3rem; }
|
||||
.q-meta { font-size: 0.82rem; color: var(--ink-light); }
|
||||
.q-reward {
|
||||
font-size: 0.74rem; font-family: 'Cinzel', serif; letter-spacing: 0.04em;
|
||||
color: #5a3a00; background: rgba(154,123,30,0.18);
|
||||
border: 1px solid rgba(90,58,0,0.35); border-radius: 4px;
|
||||
padding: 0.1rem 0.45rem; white-space: nowrap; align-self: flex-start; margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
/* ── Sonderangriffe ── */
|
||||
.moves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
|
||||
.move {
|
||||
border: 1px solid rgba(90,58,0,0.45); border-radius: 6px;
|
||||
padding: 0.6rem 0.8rem; background: rgba(255,255,255,0.28);
|
||||
display: flex; gap: 0.6rem;
|
||||
}
|
||||
.move .mdie {
|
||||
flex-shrink: 0; width: 30px; height: 30px; border: 2px solid #3a1a00; border-radius: 6px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: 'Cinzel Decorative', serif; font-weight: 700; color: var(--red);
|
||||
background: #fffef7;
|
||||
}
|
||||
.move .m-name { font-weight: 600; color: #3a1a00; font-size: 0.95rem; }
|
||||
.move .m-eff { font-size: 0.82rem; color: var(--ink-light); line-height: 1.35; }
|
||||
.used { font-size: 0.7rem; color: var(--gold); font-style: italic; }
|
||||
|
||||
.notes-area {
|
||||
border: 1px solid rgba(90,58,0,0.4); border-radius: 6px;
|
||||
min-height: 90px; background: repeating-linear-gradient(transparent, transparent 27px, rgba(90,58,0,0.18) 28px);
|
||||
padding: 0.5rem 0.8rem;
|
||||
}
|
||||
|
||||
@media print {
|
||||
html, body {
|
||||
background: #fff; padding: 0;
|
||||
-webkit-print-color-adjust: exact; print-color-adjust: exact;
|
||||
}
|
||||
.print-hint { display: none; }
|
||||
.sheet {
|
||||
box-shadow: none; border-color: #5a3a00; max-width: none; padding: 0.6cm 1cm;
|
||||
-webkit-print-color-adjust: exact; print-color-adjust: exact;
|
||||
}
|
||||
h2 { break-after: avoid; }
|
||||
.move, .res, .quests li, .dice-track, .notes-area { break-inside: avoid; }
|
||||
}
|
||||
@page { size: A4 portrait; margin: 1cm; }
|
||||
@media (max-width: 700px) { .moves, .res-grid, .identity { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="print-hint">Wendls persönlicher Bogen — drucken (A4 hochkant) und ihm zu Beginn überreichen. Kästchen werden im Lauf des Tages abgehakt.</div>
|
||||
|
||||
<div class="sheet">
|
||||
|
||||
<div class="sheet-head">
|
||||
<div class="kicker">Taverne „Im Jahre Schnee"</div>
|
||||
<h1>⚜ Wendls Heldenbogen ⚜</h1>
|
||||
<div class="subtitle">„Iris wurde entführt. Sammle deine Stärke, schlag den Erpresser, hol sie zurück."</div>
|
||||
</div>
|
||||
|
||||
<div class="identity">
|
||||
<div class="row"><span class="lbl">Held</span><span class="line"> Wendl, der Bräutigam</span></div>
|
||||
<div class="row"><span class="lbl">Heimatdorf</span><span class="line"></span></div>
|
||||
<div class="row"><span class="lbl">Gefährtin</span><span class="line"> Iris (entführt)</span></div>
|
||||
<div class="row"><span class="lbl">Erzfeind</span><span class="line"> Der Namenlose</span></div>
|
||||
</div>
|
||||
|
||||
<!-- WÜRFEL / STÄRKE -->
|
||||
<h2><span class="em">🎲</span> Stärke — die 6 Würfel</h2>
|
||||
<div class="dice-track">
|
||||
<div class="hint">Pro abgeschlossenem Quest <strong>1 Würfel</strong>. Bei <strong>6 Würfeln</strong> wird der Kampf gegen den Erpresser freigeschaltet. Hak jeden gewonnenen Würfel ab:</div>
|
||||
<div class="dice-row">
|
||||
<div class="die"><span class="n">I</span></div>
|
||||
<div class="die"><span class="n">II</span></div>
|
||||
<div class="die"><span class="n">III</span></div>
|
||||
<div class="die"><span class="n">IV</span></div>
|
||||
<div class="die"><span class="n">V</span></div>
|
||||
<div class="die"><span class="n">VI</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RESSOURCEN -->
|
||||
<h2><span class="em">💰</span> Beutel & Beweise</h2>
|
||||
<div class="res-grid">
|
||||
<div class="res">
|
||||
<div class="res-name">Hinweis-Karten</div>
|
||||
<div class="res-fn">Futter fürs Werwolf-Finale → führen zum Komplizen</div>
|
||||
<div class="pips"><span class="pip sq"></span><span class="pip sq"></span><span class="pip sq"></span><span class="pip sq"></span><span class="pip sq"></span></div>
|
||||
</div>
|
||||
<div class="res">
|
||||
<div class="res-name">Iris' Kleidungsstücke</div>
|
||||
<div class="res-fn">Roter Faden → werden Iris im Finale überreicht</div>
|
||||
<div class="pips"><span class="pip sq"></span><span class="pip sq"></span><span class="pip sq"></span><span class="pip sq"></span></div>
|
||||
</div>
|
||||
<div class="res">
|
||||
<div class="res-name">Gold (Dukaten)</div>
|
||||
<div class="res-fn">Spaßwährung. 10 Gold sparen → „Iris-Bluse" kaufen!</div>
|
||||
<div class="pips"><span class="pip"></span><span class="pip"></span><span class="pip"></span><span class="pip"></span><span class="pip"></span><span class="pip"></span><span class="pip"></span><span class="pip"></span><span class="pip"></span><span class="pip"></span></div>
|
||||
</div>
|
||||
<div class="res">
|
||||
<div class="res-name">Die „Iris-Bluse"</div>
|
||||
<div class="res-fn">Beim Höschenhändler gekauft — echt? oder Falle?</div>
|
||||
<div class="pips"><span class="pip sq"></span> <span style="font-size:0.8rem; color:#5a3a00; font-style:italic; align-self:center;">gekauft für 10 Gold</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QUESTS -->
|
||||
<h2><span class="em">📜</span> Quest-Tafel</h2>
|
||||
<ul class="quests">
|
||||
<li><span class="box"></span><div class="q-body"><div><span class="q-no">①</span><span class="q-title">Bargames</span> <span class="q-meta">— 4-Gewinnt + Schnapsen gegen Janosch & Kajetan</span></div></div><span class="q-reward">🎲 + Würfelset</span></li>
|
||||
<li><span class="box"></span><div class="q-body"><div><span class="q-no">②</span><span class="q-title">Heindls Prüfungen</span> <span class="q-meta">— spontaner Skill-Check vom Magier</span></div></div><span class="q-reward">🎲 + Kleinigkeit</span></li>
|
||||
<li><span class="box"></span><div class="q-body"><div><span class="q-no">③</span><span class="q-title">Der genesene Säufer</span> <span class="q-meta">— Kev ins Krankenzimmer, „Heilkräuter" sammeln, „Trank" geben (mit Dom)</span></div></div><span class="q-reward">🎲 + 🃏 Hinweis</span></li>
|
||||
<li><span class="box"></span><div class="q-body"><div><span class="q-no">④</span><span class="q-title">Das Ritterduell</span> <span class="q-meta">— Fecht-Duell gegen Jaron, best of 3</span></div></div><span class="q-reward">🎲 + 👕 Kleidung</span></li>
|
||||
<li><span class="box"></span><div class="q-body"><div><span class="q-no">⑤</span><span class="q-title">Pub-Quiz</span> <span class="q-meta">— allgemeine Fragenrunde (Alex stellt die Fragen)</span></div></div><span class="q-reward">🎲 + 🃏 Hinweis</span></li>
|
||||
<li><span class="box"></span><div class="q-body"><div><span class="q-no">⑥</span><span class="q-title">Die gekaufte Bluse</span> <span class="q-meta">— 10 Gold sparen, beim Höschenhändler die „Iris-Bluse" kaufen <em>(Kern-Quest!)</em></span></div></div><span class="q-reward">👕 falsche Beute</span></li>
|
||||
<li><span class="box"></span><div class="q-body"><div><span class="q-no">⑦</span><span class="q-title">Hypnose-Stammtisch</span> <span class="q-meta">— Fragen über Iris beantworten (Wie kennengelernt? Lieblingsessen?)</span></div></div><span class="q-reward">👕 + 🃏 Hinweis</span></li>
|
||||
<li><span class="box"></span><div class="q-body"><div><span class="q-no">⑧</span><span class="q-title">Der stumme Zeuge</span> <span class="q-meta">— Pantomime erraten („Mann mit Korb voll Wäsche")</span></div></div><span class="q-reward">🃏 Hinweis</span></li>
|
||||
<li><span class="box"></span><div class="q-body"><div><span class="q-no">⑨</span><span class="q-title">Der verschlüsselte Brief</span> <span class="q-meta">— Morsecode mit der Tabelle übersetzen</span></div></div><span class="q-reward">🃏 Hinweis</span></li>
|
||||
<li><span class="box"></span><div class="q-body"><div><span class="q-no">⑩</span><span class="q-title">Lukis Lutschstein</span> <span class="q-meta">— Stein beim Barkeeper kaufen, Lukis Esel retten</span></div></div><span class="q-reward">🃏 Hinweis</span></li>
|
||||
<li><span class="box"></span><div class="q-body"><div><span class="q-no">⑪</span><span class="q-title">Saugnapf-Wurf</span> <span class="q-meta">— Gag-Minispiel, jederzeit (Zielwurf)</span></div></div><span class="q-reward">🎲 oder 💰</span></li>
|
||||
</ul>
|
||||
|
||||
<!-- SONDERANGRIFFE -->
|
||||
<h2><span class="em">⚔️</span> Wendls Sonderangriffe <span style="font-family:'Crimson Pro';font-size:0.78rem;letter-spacing:0;text-transform:none;color:var(--ink-light);font-weight:400;">(deine 6 Würfel als Heldenmomente — je 1× im Kampf)</span></h2>
|
||||
<div class="moves">
|
||||
<div class="move"><div class="mdie">1</div><div><div class="m-name">„Für Iris!"</div><div class="m-eff">3 W6 gleichzeitig — alle Treffer zählen (bis zu 3 Schaden). <span class="used">☐ verbraucht</span></div></div></div>
|
||||
<div class="move"><div class="mdie">2</div><div><div class="m-name">„Kein Schnapsen mehr!"</div><div class="m-eff">1 W6: Erfolg = doppelter Schaden, Misserfolg = trotzdem 1. Kann nicht scheitern. <span class="used">☐ verbraucht</span></div></div></div>
|
||||
<div class="move"><div class="mdie">3</div><div><div class="m-name">„Der Bräutigam schlägt zurück"</div><div class="m-eff">Einen missratenen Würfel (≤3) dieser Runde nochmal werfen. <span class="used">☐ verbraucht</span></div></div></div>
|
||||
<div class="move"><div class="mdie">4</div><div><div class="m-name">„Freunde!" — Massenangriff</div><div class="m-eff">Alle im Raum: Daumen hoch/runter. Jeder 3. Daumen-hoch = 1 Schaden. <span class="used">☐ verbraucht</span></div></div></div>
|
||||
<div class="move"><div class="mdie">5</div><div><div class="m-name">„Iris wartet" — Fokusmoment</div><div class="m-eff">Sag einen Satz über Iris. Kein Würfeln: automatisch 3 Schaden. <span class="used">☐ verbraucht</span></div></div></div>
|
||||
<div class="move"><div class="mdie">6</div><div><div class="m-name">„Finaler Schlag"</div><div class="m-eff">Nur bei Erpresser ≤3 LP. Riesen-W6 — egal was kommt: er ist tot. <span class="used">☐ verbraucht</span></div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- NOTIZEN -->
|
||||
<h2><span class="em">🕵️</span> Verdächtige & gesammelte Hinweise <span style="font-family:'Crimson Pro';font-size:0.78rem;letter-spacing:0;text-transform:none;color:var(--ink-light);font-weight:400;">(Wer wirkt verdächtig? Was hast du erfahren?)</span></h2>
|
||||
<div class="notes-area"></div>
|
||||
|
||||
<h2><span class="em">🪶</span> Freie Notizen</h2>
|
||||
<div class="notes-area" style="min-height:120px;"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user