ddb1ec4df8
Visual design specs for Milestone #14: - zeitstrahl-global-concepts.html — A/B/C exploration of the global timeline - zeitstrahl-final-spec.html — canonical Concept A (global + per-person Lebensweg) - zeitstrahl-event-editor-spec.html — curator event editor + document quick-action Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1062 lines
90 KiB
HTML
1062 lines
90 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Globaler Zeitstrahl — Visuelle Konzept-Exploration · Milestone #14 · Familienarchiv</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
body{font-family:'Montserrat',system-ui,sans-serif;background:#ECEAE4;color:#1A1A1A;line-height:1.5;font-size:13px}
|
||
.serif{font-family:'Tinos',Georgia,serif}
|
||
.page{max-width:1320px;margin:0 auto;padding:48px 32px 120px}
|
||
|
||
/* Masthead */
|
||
.mh{padding-bottom:24px;border-bottom:3px solid #012851;margin-bottom:48px}
|
||
.mh h1{font-size:23px;font-weight:900;color:#012851;letter-spacing:-.4px}
|
||
.mh p{font-size:13px;color:#555;max-width:760px;line-height:1.75;margin-top:8px}
|
||
.mh .byline{font-size:9px;color:#999;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-top:10px}
|
||
.tag-row{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
|
||
.tg{background:#012851;color:#a1dcd8;padding:2px 8px;border-radius:2px;font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
|
||
.tg.slate{background:#607080;color:#e8edf2}
|
||
.tg.mint{background:#a1dcd8;color:#012851}
|
||
|
||
/* Section heading */
|
||
.sh{margin:60px 0 24px;padding-bottom:12px;border-bottom:2px solid #E0DDD6}
|
||
.sh h2{font-size:17px;font-weight:900;color:#012851}
|
||
.sh p{font-size:12.5px;color:#666;margin-top:5px;max-width:760px;line-height:1.65}
|
||
|
||
.callout{padding:14px 18px;border-radius:4px;font-size:12.5px;line-height:1.7;margin-bottom:20px}
|
||
.callout.navy{background:rgba(1,40,81,.06);border-left:3px solid #012851;color:#333}
|
||
.callout.mint{background:rgba(161,220,216,.18);border-left:3px solid #00c7b1;color:#1f3a3a}
|
||
.callout strong{font-weight:800;color:#012851}
|
||
|
||
/* ── Comparison: Suche vs Zeitstrahl ── */
|
||
.vs{display:grid;grid-template-columns:1fr 56px 1fr;gap:0;align-items:stretch;margin-bottom:8px}
|
||
.vs-col{background:#fff;border:1.5px solid #E0DDD6;border-radius:8px;overflow:hidden}
|
||
.vs-col.lose{opacity:.96}
|
||
.vs-col.win{border-color:#012851;box-shadow:0 6px 26px rgba(1,40,81,.13)}
|
||
.vs-hd{padding:11px 16px;font-size:8.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between}
|
||
.vs-col.lose .vs-hd{background:#F4F2EC;color:#8a8a86;border-bottom:1px solid #E0DDD6}
|
||
.vs-col.win .vs-hd{background:#012851;color:#a1dcd8;border-bottom:1px solid #012851}
|
||
.vs-mid{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#B5B0A8;letter-spacing:1px}
|
||
.vs-body{padding:14px 14px 16px}
|
||
|
||
/* flat search list (the "lose" side) */
|
||
.flatrow{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid #EDEBE4;border-radius:3px;margin-bottom:5px;background:#FCFBF8}
|
||
.flatrow .thumb{width:14px;height:18px;background:#E6E4DD;border-radius:1px;flex-shrink:0}
|
||
.flatrow .t{font-size:9px;color:#333;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.flatrow .m{font-size:7.5px;color:#9a9a96}
|
||
.flatrow .d{margin-left:auto;font-size:7.5px;color:#aaa;white-space:nowrap}
|
||
.flatnote{margin-top:9px;font-size:9.5px;color:#9a9a96;font-style:italic;line-height:1.5}
|
||
|
||
/* mini woven zeitstrahl (the "win" side) */
|
||
.wv{position:relative;padding-left:20px}
|
||
.wv::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:linear-gradient(#a1dcd8,#012851)}
|
||
.wv-yr{font-family:'Tinos',serif;font-size:13px;font-weight:700;color:#012851;margin:8px 0 5px;position:relative}
|
||
.wv-yr::before{content:"";position:absolute;left:-16px;top:5px;width:8px;height:8px;border-radius:50%;background:#012851;border:2px solid #fff;box-shadow:0 0 0 1.5px #012851}
|
||
.node{position:relative;margin-bottom:6px;font-size:9.5px;line-height:1.4}
|
||
.node::before{content:"";position:absolute;left:-14px;top:4px;width:5px;height:5px;border-radius:50%;background:#a1dcd8;border:1.5px solid #fff}
|
||
.node.life::before{width:9px;height:9px;left:-16px;top:2px;background:#012851;border:2px solid #fff;box-shadow:0 0 0 1.5px #012851}
|
||
.node.world{padding:5px 8px;background:#F1EFE7;border-left:2px solid #607080;border-radius:0 3px 3px 0;margin-left:-2px}
|
||
.node.world::before{display:none}
|
||
.node .lbl{font-weight:700;color:#012851}
|
||
.node.world .lbl{color:#5a6776;font-style:italic;font-family:'Tinos',serif;font-size:10.5px}
|
||
.node .sub{color:#8a8a86;font-size:8px}
|
||
.node.life .lbl{font-family:'Tinos',serif;font-size:11px}
|
||
|
||
/* ── Legend / layer key ── */
|
||
.legend{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:8px}
|
||
.lg{background:#fff;border:1px solid #E0DDD6;border-radius:7px;padding:14px 16px;display:flex;gap:12px}
|
||
.lg .ico{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px}
|
||
.lg .ttl{font-size:11.5px;font-weight:800;color:#012851;margin-bottom:2px}
|
||
.lg .body{font-size:10.5px;color:#5a5a56;line-height:1.55}
|
||
.lg .body code{font-size:9.5px;background:#F0EFE9;padding:1px 4px;border-radius:2px;color:#444}
|
||
|
||
/* precision table */
|
||
.rules{background:#fff;border:1px solid #E0DDD6;border-radius:7px;overflow:hidden;margin-top:20px}
|
||
.rules table{width:100%;border-collapse:collapse}
|
||
.rules th{background:#F4F2EC;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888;padding:8px 12px;text-align:left;border-bottom:1px solid #E0DDD6}
|
||
.rules td{font-size:11px;color:#444;padding:7px 12px;border-bottom:1px solid #F0EEE8;vertical-align:top;line-height:1.5}
|
||
.rules tr:last-child td{border-bottom:none}
|
||
.rules td:first-child{font-weight:700;color:#012851;width:120px}
|
||
.rules td code{font-size:10px;background:#F0EFE9;padding:1px 5px;border-radius:2px;color:#444}
|
||
.rules .ex{font-family:'Tinos',serif;font-size:13px;color:#012851}
|
||
|
||
/* ── Concept blocks ── */
|
||
.concept{margin-top:30px;margin-bottom:18px}
|
||
.c-head{display:flex;align-items:flex-start;gap:22px;margin-bottom:22px}
|
||
.c-num{font-size:64px;font-weight:900;color:#DEDBD3;line-height:.9;flex-shrink:0;width:74px}
|
||
.c-kicker{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#00a896;margin-bottom:4px}
|
||
.c-title{font-family:'Tinos',serif;font-size:21px;font-weight:700;color:#012851;margin-bottom:7px}
|
||
.c-desc{font-size:12.5px;color:#555;max-width:680px;line-height:1.7}
|
||
.c-diff{margin-top:10px;display:flex;gap:8px;align-items:flex-start}
|
||
.c-diff .b{background:#a1dcd8;color:#012851;padding:2px 7px;border-radius:2px;font-size:7.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;margin-top:1px}
|
||
.c-diff .t{font-size:11.5px;color:#3a4a48;font-weight:600;line-height:1.5}
|
||
.c-trade{margin-top:7px;font-size:11px;color:#999;font-style:italic;max-width:640px;line-height:1.5}
|
||
|
||
.stage{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;padding:26px 24px;background:#fff;border:1.5px solid #E0DDD6;border-radius:10px}
|
||
.stage.dk{background:#0B1118;border-color:#16222e}
|
||
|
||
/* phone frame */
|
||
.phone{width:288px;flex-shrink:0;border:7px solid #1c1c1c;border-radius:26px;overflow:hidden;background:#f0efe9;box-shadow:0 10px 34px rgba(0,0,0,.18)}
|
||
.phone.dk{background:#0a0f15;border-color:#000}
|
||
.ph-notch{height:16px;background:#1c1c1c;display:flex;align-items:center;justify-content:center}
|
||
.ph-notch::after{content:"";width:54px;height:5px;background:#000;border-radius:3px}
|
||
.ph-nav{height:30px;background:#012851;display:flex;align-items:center;padding:0 11px;gap:7px}
|
||
.ph-nav.dk{background:#060c12}
|
||
.ph-logo{font-family:'Tinos',serif;font-size:8px;font-weight:700;color:#fff;border-bottom:1.5px solid #a1dcd8;padding-bottom:1px}
|
||
.ph-burger{margin-left:auto;display:flex;flex-direction:column;gap:1.5px}
|
||
.ph-burger span{width:11px;height:1.5px;background:rgba(255,255,255,.7);border-radius:1px}
|
||
.ph-body{height:520px;overflow:hidden;background:#f0efe9;position:relative}
|
||
.ph-body.dk{background:#090f16}
|
||
.ph-scroll{padding:12px 12px 30px}
|
||
|
||
/* page title inside phone */
|
||
.pt{font-family:'Tinos',serif;font-size:17px;font-weight:700;color:#012851;margin-bottom:1px}
|
||
.pt.dk{color:#cde8e5}
|
||
.pt-sub{font-size:8.5px;color:#7a7a76;margin-bottom:12px}
|
||
.pt-sub.dk{color:#54707f}
|
||
|
||
/* shared timeline atoms */
|
||
.cap{font-size:11px;color:#888;font-style:italic;line-height:1.6;max-width:300px}
|
||
.notes{flex:1;min-width:240px}
|
||
.notes h4{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#012851;margin:14px 0 7px;padding-bottom:5px;border-bottom:1px solid #E8E6DF}
|
||
.notes h4:first-child{margin-top:0}
|
||
.notes li{font-size:11.5px;color:#4a4a46;line-height:1.6;margin-bottom:6px;list-style:none;padding-left:15px;position:relative}
|
||
.notes li::before{content:"▪";position:absolute;left:2px;color:#a1dcd8;font-size:11px}
|
||
.notes li b{color:#012851;font-weight:700}
|
||
|
||
/* impl-ref */
|
||
.impl-ref{background:#fff;border:1px solid #E0DDD6;border-radius:7px;overflow:hidden;margin-top:18px}
|
||
.impl-ref table{width:100%;border-collapse:collapse}
|
||
.impl-ref th{background:#012851;color:#fff;padding:8px 13px;text-align:left;font-size:8px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
|
||
.impl-ref td{padding:8px 13px;border-bottom:1px solid #F0EEE8;vertical-align:top;font-size:11px;color:#444;line-height:1.55}
|
||
.impl-ref tr:nth-child(even) td{background:#FAFAF7}
|
||
.impl-ref td:first-child{font-weight:700;color:#012851;white-space:nowrap;width:160px}
|
||
.impl-ref td code{font-size:9.5px;background:#F0EFE9;padding:1px 4px;border-radius:2px;font-family:'Courier New',monospace;color:#333}
|
||
.sw{display:inline-block;width:11px;height:11px;border-radius:2px;vertical-align:-1px;margin-right:5px;border:1px solid rgba(0,0,0,.12)}
|
||
|
||
hr{border:none;border-top:2px dashed #C8C4BE;margin:56px 0}
|
||
.rec{background:#012851;border-radius:10px;padding:24px 26px;color:#dfeef0}
|
||
.rec h3{color:#fff;font-size:15px;font-weight:900;margin-bottom:10px}
|
||
.rec p{font-size:12.5px;line-height:1.75;max-width:820px;color:#cfe3e6}
|
||
.rec b{color:#a1dcd8}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
|
||
<!-- ══ MASTHEAD ══ -->
|
||
<div class="mh">
|
||
<h1>Globaler Zeitstrahl — Visuelle Konzept-Exploration</h1>
|
||
<p>Der „Zeitstrahl" unter <code style="font-family:monospace;font-size:12px">/zeitstrahl</code> ist die globale Familien-Chronik. Diese Exploration beantwortet zuerst die entscheidende Frage — <strong>warum sollte jemand den Zeitstrahl benutzen statt einfach durch die sortierte Suchliste zu scrollen?</strong> — und zeigt dann drei Layout-Konzepte, die genau das tun, was die Suche nicht kann: <strong>drei Ebenen zu einer Erzählung in der Zeit verweben</strong>.</p>
|
||
<div class="tag-row">
|
||
<span class="tg">Milestone #14 · Zeitstrahl</span>
|
||
<span class="tg mint">Phone-first · 375px</span>
|
||
<span class="tg slate">Explorativ — vor Implementierung</span>
|
||
</div>
|
||
<div class="byline">Familienarchiv · 2026-06-08 · Leonie Voss, UX Lead · Design-Basis: docs/superpowers/specs/2026-06-07-family-timeline-design.md</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══ 1 · WHY NOT SEARCH ══ -->
|
||
<div class="sh">
|
||
<h2>1 · Warum Zeitstrahl ≠ Suchliste</h2>
|
||
<p>Die Gefahr: zwei Seiten, die wie dasselbe wirken. Wenn der Zeitstrahl nur „Briefe, chronologisch" zeigt, fragt jeder zu Recht — wozu? Der Unterschied ist <b>nicht</b> die Sortierung. Es sind die <b>drei Ebenen</b> und der <b>historische Kontext</b>, die nur hier zusammenkommen.</p>
|
||
</div>
|
||
|
||
<div class="vs">
|
||
<!-- LOSE: sorted search -->
|
||
<div class="vs-col lose">
|
||
<div class="vs-hd"><span>/documents · nach Datum sortiert</span><span style="font-size:7px">EINE EBENE</span></div>
|
||
<div class="vs-body">
|
||
<div class="flatrow"><div class="thumb"></div><div style="min-width:0"><div class="t">Brief über die Lage an der Westfront</div><div class="m">Karl → Elfriede Raddatz</div></div><div class="d">Mär 1915</div></div>
|
||
<div class="flatrow"><div class="thumb"></div><div style="min-width:0"><div class="t">Feldpost aus Verdun</div><div class="m">Hans → Karl Raddatz</div></div><div class="d">Jul 1915</div></div>
|
||
<div class="flatrow"><div class="thumb"></div><div style="min-width:0"><div class="t">Brief an die Eltern</div><div class="m">Karl → Elfriede Raddatz</div></div><div class="d">Sep 1915</div></div>
|
||
<div class="flatrow"><div class="thumb"></div><div style="min-width:0"><div class="t">Päckchen-Dank</div><div class="m">Karl → Elfriede Raddatz</div></div><div class="d">Nov 1915</div></div>
|
||
<div class="flatnote">Nur Briefe. Keine Geburten, keine Hochzeiten, kein Krieg. Warum 1915 so viele Feldpostbriefe? Die Liste sagt es nicht — man muss es wissen.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vs-mid">vs</div>
|
||
|
||
<!-- WIN: zeitstrahl -->
|
||
<div class="vs-col win">
|
||
<div class="vs-hd"><span>/zeitstrahl · die Familie in der Zeit</span><span style="font-size:7px">DREI EBENEN</span></div>
|
||
<div class="vs-body">
|
||
<div class="wv">
|
||
<div class="wv-yr">1914</div>
|
||
<div class="node life"><span class="lbl">⚭ Heirat: Karl & Elfriede Raddatz</span> <span class="sub">· abgeleitet</span></div>
|
||
<div class="node world"><span class="lbl">Erster Weltkrieg</span><br><span class="sub">1914–1918 · historisch</span></div>
|
||
<div class="wv-yr">1915</div>
|
||
<div class="node"><span class="lbl">4 Briefe</span> <span class="sub">· Feldpost von der Westfront</span></div>
|
||
<div class="node life"><span class="lbl">* Geburt: Hans Raddatz</span> <span class="sub">· abgeleitet</span></div>
|
||
<div class="wv-yr">1918</div>
|
||
<div class="node world"><span class="lbl">Kriegsende</span><br><span class="sub">Nov 1918 · historisch</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout mint" style="margin-top:18px"><strong>Der Aha-Moment:</strong> Plötzlich ergeben die vier Feldpostbriefe von 1915 Sinn — sie liegen <b>zwischen Hochzeit und Kriegsende</b>, neben der Geburt des Sohnes. Die Suche findet Dokumente. Der Zeitstrahl erzählt, <i>was mit der Familie geschah</i>. Das ist kein sortierter Listenfilter — es ist eine Erzählung, die die Suche strukturell nicht leisten kann.</div>
|
||
|
||
<div class="callout navy">
|
||
<strong>Fünf Dinge, die nur der Zeitstrahl kann — und die jede Konzept-Variante sichtbar machen muss:</strong>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px 26px;margin-top:9px;font-size:11.5px">
|
||
<div>① <b>Personen-Lebensereignisse</b> (Geburt *, Tod †, Heirat ⚭) — abgeleitet aus kuratierten Personendaten, gibt es in der Suche gar nicht.</div>
|
||
<div>② <b>Kuratierte Ereignisse</b> — persönlich (Umzug, Auswanderung) & historisch (Krieg, Inflation), redaktionell, immer korrekt.</div>
|
||
<div>③ <b>Historischer Kontext-Hintergrund</b> — Weltereignisse als Bänder hinter den Briefen erklären, warum Briefe sich häufen.</div>
|
||
<div>④ <b>Ehrliche Datums-Präzision</b> — <code style="font-family:monospace">ca. 1914</code>, <code style="font-family:monospace">Sommer 1914</code>, „Ohne Datum"-Eimer. Nie ein erfundenes Datum.</div>
|
||
<div style="grid-column:1/3">⑤ <b>Verwobene Erzählung statt Trefferliste</b> — eine durchgehende vertikale Geschichte über 50 Jahre, kein paginiertes Suchergebnis.</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══ 2 · THE THREE LAYERS ══ -->
|
||
<div class="sh">
|
||
<h2>2 · Die drei Ebenen — visuelle Sprache</h2>
|
||
<p>Jede Ebene muss auf den ersten Blick unterscheidbar sein. Diese Kodierung gilt in allen drei Konzepten gleich — nur das <i>Layout</i> ändert sich, nicht die Bedeutung der Farben & Glyphen.</p>
|
||
</div>
|
||
|
||
<div class="legend">
|
||
<div class="lg">
|
||
<div class="ico" style="background:#012851;color:#a1dcd8">⚭</div>
|
||
<div><div class="ttl">Abgeleitetes Lebensereignis</div><div class="body">Geburt <b>*</b> · Tod <b>†</b> · Heirat <b>⚭</b> — automatisch aus <code>Person.birthDate</code> / <code>deathDate</code> / <code>SPOUSE_OF.fromYear</code>. Große Navy-Knoten <i>auf</i> der Achse. Glyphen <b>*</b> / <b>†</b> aus <code>personLifeDates.ts</code>. Badge „abgeleitet", nicht im Zeitstrahl editierbar.</div></div>
|
||
</div>
|
||
<div class="lg">
|
||
<div class="ico" style="background:#a1dcd8;color:#012851">★</div>
|
||
<div><div class="ttl">Kuratiertes persönliches Ereignis</div><div class="body"><code>EventType.PERSONAL</code> — von der Familie geschrieben (Umzug, Krankheit, Auswanderung). Mint-Akzent, Serifen-Titel, optionaler Beschreibungstext. Editierbar über <code>/zeitstrahl/events/[id]/edit</code>.</div></div>
|
||
</div>
|
||
<div class="lg">
|
||
<div class="ico" style="background:#F1EFE7;color:#607080;border:1.5px solid #607080">◍</div>
|
||
<div><div class="ttl">Historisches Ereignis (Welt)</div><div class="body"><code>EventType.HISTORICAL</code> — Krieg, Inflation. Gedämpftes Slate-Band <i>quer</i> über die Achse als Kontext-Hintergrund. Bewusst zurückhaltend, damit Familie im Vordergrund bleibt.</div></div>
|
||
</div>
|
||
<div class="lg">
|
||
<div class="ico" style="background:#fff;color:#012851;border:1.5px solid #a1dcd8">✉</div>
|
||
<div><div class="ttl">Brief</div><div class="body">Platziert nach <code>Document.documentDate</code>. Kleine Mint-Punkte, kompakte Karte (Absender → Empfänger), verlinkt zu <code>/documents/[id]</code>. Häufungen clustern unter dem Ereignis, zu dem sie gehören.</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rules">
|
||
<table>
|
||
<tr><th>DatePrecision</th><th>Deutsche Darstellung</th><th>Beispiel</th><th>Wirkung auf der Achse</th></tr>
|
||
<tr><td>DAY</td><td>vollständiges Datum</td><td class="ex">28. Juli 1914</td><td>sortiert exakt innerhalb des Jahres-Bandes</td></tr>
|
||
<tr><td>MONTH</td><td>Monat + Jahr</td><td class="ex">Juli 1914</td><td>sortiert nach Monat innerhalb des Bandes</td></tr>
|
||
<tr><td>SEASON</td><td>Jahreszeit + Jahr</td><td class="ex">Sommer 1914</td><td>grobe Reihung im Band</td></tr>
|
||
<tr><td>YEAR</td><td>nur Jahr</td><td class="ex">1914</td><td>ans Ende des Jahres-Bandes</td></tr>
|
||
<tr><td>APPROX</td><td>„ca." + Jahr</td><td class="ex">ca. 1914</td><td>mit „ca."-Marker, Jahres-Band</td></tr>
|
||
<tr><td>RANGE</td><td>Start–Ende</td><td class="ex">1914–1918</td><td>im Start-Jahr mit Spannen-Marker, nicht dupliziert</td></tr>
|
||
<tr><td>UNKNOWN</td><td>undatiert</td><td class="ex">Ohne Datum</td><td>eigener Eimer ganz am Ende</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<!-- ══ CONCEPT A ══ -->
|
||
<div class="concept">
|
||
<div class="c-head">
|
||
<div class="c-num">A</div>
|
||
<div>
|
||
<div class="c-kicker">Konzept A · Erzählend</div>
|
||
<div class="c-title">Der Lebensfaden — eine durchgehende Achse</div>
|
||
<div class="c-desc">Eine einzige vertikale Spine läuft von oben nach unten durch alle Jahre. Lebensereignisse sitzen als große Knoten <i>auf</i> dem Faden, historische Ereignisse legen sich als Bänder dahinter, Briefe zweigen als kleine Punkte ab. Liest sich wie eine Familien-Saga, von 1899 bis 1950 am Stück scrollbar.</div>
|
||
<div class="c-diff"><span class="b">Differenzierung</span><span class="t">Maximaler Abstand zur Suche — gar keine Listen-Anmutung. Der Faden ist eine Geschichte, kein Suchergebnis.</span></div>
|
||
<div class="c-trade">Trade-off: bei dichten Brief-Jahren kann der Faden lang werden — braucht eine Quiet-Year-Kompression (mehrere ereignislose Jahre als ein dünner Abschnitt).</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stage">
|
||
<div class="phone">
|
||
<div class="ph-notch"></div>
|
||
<div class="ph-nav"><span class="ph-logo">Familienarchiv</span><div class="ph-burger"><span></span><span></span><span></span></div></div>
|
||
<div class="ph-body">
|
||
<div class="ph-scroll">
|
||
<div class="pt">Zeitstrahl</div>
|
||
<div class="pt-sub">Die Familie Raddatz · 1899–1950 · 412 Briefe, 38 Ereignisse</div>
|
||
|
||
<!-- spine -->
|
||
<div style="position:relative;padding-left:26px">
|
||
<div style="position:absolute;left:9px;top:2px;bottom:0;width:2.5px;background:linear-gradient(#a1dcd8,#012851,#607080)"></div>
|
||
|
||
<!-- 1901 birth -->
|
||
<div style="position:relative;margin-bottom:14px">
|
||
<div style="position:absolute;left:-23px;top:0;width:16px;height:16px;border-radius:50%;background:#012851;border:2.5px solid #f0efe9;box-shadow:0 0 0 2px #012851;display:flex;align-items:center;justify-content:center;color:#a1dcd8;font-size:9px">*</div>
|
||
<div style="font-family:'Tinos',serif;font-size:11px;font-weight:700;color:#012851">Geburt: Karl Raddatz</div>
|
||
<div style="font-size:8px;color:#8a8a86">14. März 1901 · <span style="color:#a98">abgeleitet</span></div>
|
||
</div>
|
||
|
||
<!-- 1914 marriage -->
|
||
<div style="position:relative;margin-bottom:10px">
|
||
<div style="position:absolute;left:-23px;top:0;width:16px;height:16px;border-radius:50%;background:#012851;border:2.5px solid #f0efe9;box-shadow:0 0 0 2px #012851;display:flex;align-items:center;justify-content:center;color:#a1dcd8;font-size:10px">⚭</div>
|
||
<div style="font-family:'Tinos',serif;font-size:11px;font-weight:700;color:#012851">Heirat: Karl & Elfriede</div>
|
||
<div style="font-size:8px;color:#8a8a86">1914 · <span style="color:#a98">abgeleitet</span></div>
|
||
</div>
|
||
|
||
<!-- WW1 historical band -->
|
||
<div style="position:relative;margin:0 0 12px -10px;padding:6px 9px;background:#EEEBE2;border-left:3px solid #607080;border-radius:0 4px 4px 0">
|
||
<div style="font-family:'Tinos',serif;font-style:italic;font-size:11px;color:#5a6776">◍ Erster Weltkrieg</div>
|
||
<div style="font-size:8px;color:#8a8a86">1914–1918 · historisch</div>
|
||
</div>
|
||
|
||
<!-- 1915 letters cluster -->
|
||
<div style="position:relative;margin-bottom:8px">
|
||
<div style="position:absolute;left:-19px;top:3px;width:7px;height:7px;border-radius:50%;background:#fff;border:2px solid #a1dcd8"></div>
|
||
<div style="font-family:'Tinos',serif;font-size:12px;font-weight:700;color:#012851;margin-bottom:4px">1915</div>
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-radius:4px;padding:6px 8px;margin-bottom:4px;box-shadow:0 1px 2px rgba(0,0,0,.04)">
|
||
<div style="font-size:9px;font-weight:700;color:#1A1A1A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">✉ Brief über die Westfront</div>
|
||
<div style="font-size:7.5px;color:#9a9a96">Karl → Elfriede · Mär 1915</div>
|
||
<div style="margin-top:3px"><span style="display:inline-flex;align-items:center;gap:2px;font-size:6px;color:#a0522d"><span style="width:5px;height:5px;border-radius:1px;background:#a0522d"></span>Krieg › Briefe von der Front</span></div>
|
||
</div>
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-radius:4px;padding:6px 8px;box-shadow:0 1px 2px rgba(0,0,0,.04)">
|
||
<div style="font-size:9px;font-weight:700;color:#1A1A1A">✉ Feldpost aus Verdun</div>
|
||
<div style="font-size:7.5px;color:#9a9a96">Hans → Karl · Jul 1915 · +2 weitere</div>
|
||
<div style="margin-top:3px"><span style="display:inline-flex;align-items:center;gap:2px;font-size:6px;color:#a0522d"><span style="width:5px;height:5px;border-radius:1px;background:#a0522d"></span>Krieg › Briefe von der Front</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 1923 inflation -->
|
||
<div style="position:relative;margin:0 0 10px -10px;padding:6px 9px;background:#EEEBE2;border-left:3px solid #607080;border-radius:0 4px 4px 0">
|
||
<div style="font-family:'Tinos',serif;font-style:italic;font-size:11px;color:#5a6776">◍ Hyperinflation</div>
|
||
<div style="font-size:8px;color:#8a8a86">1923 · historisch</div>
|
||
</div>
|
||
|
||
<!-- personal curated event -->
|
||
<div style="position:relative;margin-bottom:4px">
|
||
<div style="position:absolute;left:-21px;top:1px;width:11px;height:11px;border-radius:50%;background:#a1dcd8;border:2px solid #f0efe9;box-shadow:0 0 0 1.5px #a1dcd8;display:flex;align-items:center;justify-content:center;font-size:7px;color:#012851">★</div>
|
||
<div style="font-family:'Tinos',serif;font-size:11px;font-weight:700;color:#012851">Auswanderung nach Argentinien</div>
|
||
<div style="font-size:8px;color:#8a8a86">Frühjahr 1924 · persönlich</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="notes">
|
||
<h4>Warum dieses Layout</h4>
|
||
<ul>
|
||
<li><b>Ein Faden, keine Karten-Liste.</b> Schon die Silhouette signalisiert „Geschichte", nicht „Suchtreffer".</li>
|
||
<li><b>Hierarchie über Knotengröße:</b> Lebensereignisse 16px-Knoten, kuratierte 11px, Briefe 7px-Punkte. Das Auge liest zuerst die Meilensteine.</li>
|
||
<li><b>Welt-Bänder hinterlegt</b> in gedämpftem Slate — präsent, aber nie konkurrierend mit der Familie.</li>
|
||
<li><b>Brief-Cluster</b> fassen Häufungen zusammen („+2 weitere") statt 24 Zeilen zu zeigen — genau hier unterscheidet es sich von der Liste.</li>
|
||
</ul>
|
||
<h4>Offene Fragen</h4>
|
||
<ul>
|
||
<li>Quiet-Year-Kompression: ereignislose Jahre als dünner „1925–1929"-Abschnitt zusammenfalten?</li>
|
||
<li>Tap auf Cluster → expandiert inline oder springt in die gefilterte Suche?</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<!-- ══ CONCEPT B ══ -->
|
||
<div class="concept">
|
||
<div class="c-head">
|
||
<div class="c-num">B</div>
|
||
<div>
|
||
<div class="c-kicker">Konzept B · Strukturiert</div>
|
||
<div class="c-title">Jahres-Bänder — drei Spuren pro Jahr</div>
|
||
<div class="c-desc">Jedes Jahr ist ein volle-Breite-Abschnitt (wie die bestehende <code>ChronikTimeline</code>). Innerhalb des Bandes machen drei Spuren — <b>Personen · Welt · Briefe</b> — das Verweben explizit und scannbar. Auf dem Desktop nebeneinander, auf dem Phone gestapelt. Sehr lesbar, senioren-freundlich.</div>
|
||
<div class="c-diff"><span class="b">Differenzierung</span><span class="t">Die drei Spuren <i>zeigen</i> die drei Ebenen als Struktur — man sieht sofort, dass hier mehr als Briefe leben.</span></div>
|
||
<div class="c-trade">Trade-off: bändriger, weniger „flüssige Saga" als A. Leere Spuren in ruhigen Jahren brauchen eine elegante Leer-Behandlung.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stage">
|
||
<div class="phone">
|
||
<div class="ph-notch"></div>
|
||
<div class="ph-nav"><span class="ph-logo">Familienarchiv</span><div class="ph-burger"><span></span><span></span><span></span></div></div>
|
||
<div class="ph-body">
|
||
<div class="ph-scroll">
|
||
<div class="pt">Zeitstrahl</div>
|
||
<div class="pt-sub">Die Familie Raddatz · 1899–1950</div>
|
||
|
||
<!-- year band 1914 -->
|
||
<div style="border:1px solid #e4e2d7;border-radius:6px;overflow:hidden;background:#fff;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.05)">
|
||
<div style="background:#012851;padding:5px 11px;display:flex;align-items:center;justify-content:space-between">
|
||
<span style="font-family:'Tinos',serif;font-size:14px;font-weight:700;color:#fff">1914</span>
|
||
<span style="font-size:7px;color:#a1dcd8;letter-spacing:.5px">2 EREIGNISSE · 6 BRIEFE</span>
|
||
</div>
|
||
<!-- personen lane -->
|
||
<div style="padding:7px 10px;border-bottom:1px solid #f0eee8">
|
||
<div style="font-size:6.5px;font-weight:800;letter-spacing:.7px;color:#9a9a96;text-transform:uppercase;margin-bottom:4px">Personen</div>
|
||
<div style="display:flex;align-items:center;gap:6px"><span style="width:14px;height:14px;border-radius:50%;background:#012851;color:#a1dcd8;font-size:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0">⚭</span><span style="font-size:9.5px;font-family:'Tinos',serif;color:#012851;font-weight:700">Heirat: Karl & Elfriede Raddatz</span></div>
|
||
</div>
|
||
<!-- welt lane -->
|
||
<div style="padding:7px 10px;border-bottom:1px solid #f0eee8;background:#F6F4EE">
|
||
<div style="font-size:6.5px;font-weight:800;letter-spacing:.7px;color:#9a9a96;text-transform:uppercase;margin-bottom:4px">Welt</div>
|
||
<div style="display:flex;align-items:center;gap:6px"><span style="color:#607080;font-size:10px;flex-shrink:0">◍</span><span style="font-size:9.5px;font-family:'Tinos',serif;font-style:italic;color:#5a6776">Erster Weltkrieg beginnt · 28. Juli 1914</span></div>
|
||
</div>
|
||
<!-- briefe lane -->
|
||
<div style="padding:7px 10px">
|
||
<div style="font-size:6.5px;font-weight:800;letter-spacing:.7px;color:#9a9a96;text-transform:uppercase;margin-bottom:4px">Briefe · 6</div>
|
||
<div style="display:flex;gap:3px;align-items:flex-end;height:18px">
|
||
<div title="Aug" style="width:13px;height:60%;background:#a1dcd8;border-radius:1px"></div>
|
||
<div style="width:13px;height:90%;background:#a1dcd8;border-radius:1px"></div>
|
||
<div style="width:13px;height:40%;background:#a1dcd8;border-radius:1px"></div>
|
||
<span style="font-size:7.5px;color:#9a9a96;align-self:center;margin-left:4px">Kriegsausbruch — Brief an die Familie →</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- year band 1915 -->
|
||
<div style="border:1px solid #e4e2d7;border-radius:6px;overflow:hidden;background:#fff;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.05)">
|
||
<div style="background:#012851;padding:5px 11px;display:flex;align-items:center;justify-content:space-between">
|
||
<span style="font-family:'Tinos',serif;font-size:14px;font-weight:700;color:#fff">1915</span>
|
||
<span style="font-size:7px;color:#a1dcd8;letter-spacing:.5px">1 EREIGNIS · 24 BRIEFE</span>
|
||
</div>
|
||
<div style="padding:7px 10px;border-bottom:1px solid #f0eee8">
|
||
<div style="font-size:6.5px;font-weight:800;letter-spacing:.7px;color:#9a9a96;text-transform:uppercase;margin-bottom:4px">Personen</div>
|
||
<div style="display:flex;align-items:center;gap:6px"><span style="width:14px;height:14px;border-radius:50%;background:#012851;color:#a1dcd8;font-size:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0">*</span><span style="font-size:9.5px;font-family:'Tinos',serif;color:#012851;font-weight:700">Geburt: Hans Raddatz</span></div>
|
||
</div>
|
||
<div style="padding:7px 10px">
|
||
<div style="font-size:6.5px;font-weight:800;letter-spacing:.7px;color:#9a9a96;text-transform:uppercase;margin-bottom:4px">Briefe · 24 Feldpost</div>
|
||
<div style="background:#FAF9F5;border:1px solid #eeede8;border-radius:3px;padding:5px 7px"><div style="font-size:9px;font-weight:700;color:#1A1A1A">✉ Brief über die Lage an der Westfront</div><div style="font-size:7.5px;color:#9a9a96">Karl → Elfriede · März 1915 · 23 weitere ▾</div><div style="margin-top:3px"><span style="display:inline-flex;align-items:center;gap:2px;font-size:6px;color:#a0522d"><span style="width:5px;height:5px;border-radius:1px;background:#a0522d"></span>Krieg › Briefe von der Front</span></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- quiet year collapsed -->
|
||
<div style="display:flex;align-items:center;gap:7px;padding:6px 11px;border:1px dashed #d8d6cf;border-radius:6px;color:#a8a6a0;font-size:8.5px">
|
||
<span style="font-family:'Tinos',serif">1916 – 1918</span><span style="flex:1;height:1px;background:#e0ddd6"></span><span>ruhige Jahre · 9 Briefe ▾</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="notes">
|
||
<h4>Warum dieses Layout</h4>
|
||
<ul>
|
||
<li><b>Drei benannte Spuren</b> machen das Versprechen explizit — „hier sind Personen, Welt und Briefe", nicht nur Dokumente.</li>
|
||
<li><b>Baut auf vorhandenem Idiom:</b> Jahres-Band = <code>ChronikTimeline</code>-Sektion mit Navy-Header. Schnell umsetzbar, vertraut.</li>
|
||
<li><b>Senioren-stark:</b> klare Boxen, große Jahreszahl, ruhiges Raster — kein überlagertes Spine-Lesen nötig.</li>
|
||
<li><b>Ruhige Jahre kollabieren</b> zu einer dünnen Zeile — hält das Scrollen kurz.</li>
|
||
</ul>
|
||
<h4>Desktop-Enhancement</h4>
|
||
<ul>
|
||
<li>Die drei Spuren werden <b>drei Spalten nebeneinander</b> (Personen | Welt | Briefe) statt gestapelt — das Verweben wird horizontal lesbar.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<!-- ══ CONCEPT C ══ -->
|
||
<div class="concept">
|
||
<div class="c-head">
|
||
<div class="c-num">C</div>
|
||
<div>
|
||
<div class="c-kicker">Konzept C · Navigierbar</div>
|
||
<div class="c-title">Spine + Dichte-Schiene — 50 Jahre im Griff</div>
|
||
<div class="c-desc">Eine dünne vertikale <b>Dichte-Schiene</b> am linken Rand (dieselbe Balken-Sprache wie der Such-Dichtefilter, nur hochkant) zeigt Brief-Volumen pro Jahr plus Ereignis-Markierungen — und dient zugleich als <b>Mini-Map & Sprung-Navigation</b>. Rechts die verwobene Erzählung. Verbindet Vertrautheit mit dem Dichtefilter und ist doch klar eine andere Oberfläche.</div>
|
||
<div class="c-diff"><span class="b">Differenzierung</span><span class="t">Über 50 Jahre at-a-glance navigierbar — etwas, das eine paginierte Suchliste nie bietet. Dichte wird zur Landkarte.</span></div>
|
||
<div class="c-trade">Trade-off: Die Schiene kostet horizontale Breite — auf 320px muss sie sehr schmal (oder ausklappbar) sein. Nähe zum Dichtefilter könnte verwirren, wenn nicht klar getrennt.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stage dk">
|
||
<div class="phone dk">
|
||
<div class="ph-notch"></div>
|
||
<div class="ph-nav dk"><span class="ph-logo">Familienarchiv</span><div class="ph-burger"><span></span><span></span><span></span></div></div>
|
||
<div class="ph-body dk">
|
||
<div style="display:flex;height:100%">
|
||
<!-- density rail -->
|
||
<div style="width:34px;flex-shrink:0;background:#070d14;border-right:1px solid #16222e;padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:0">
|
||
<div style="font-size:5.5px;color:#3e5065;writing-mode:vertical-rl;letter-spacing:1px;margin-bottom:6px">DICHTE</div>
|
||
<!-- vertical bars with year ticks + event dots -->
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:2px;align-items:center;width:100%;padding:0 5px">
|
||
<div style="font-size:5px;color:#54707f">1900</div>
|
||
<div style="width:40%;height:8px;background:#1e4060;border-radius:1px"></div>
|
||
<div style="width:70%;height:8px;background:#1e4060;border-radius:1px"></div>
|
||
<div style="position:relative;width:100%;display:flex;justify-content:center"><div style="width:90%;height:9px;background:#a1dcd8;border-radius:1px"></div><span style="position:absolute;right:1px;top:1px;width:4px;height:4px;border-radius:50%;background:#fff;border:1px solid #012851" title="Ereignis"></span></div>
|
||
<div style="font-size:5px;color:#a1dcd8;font-weight:700">1915</div>
|
||
<div style="width:100%;display:flex;justify-content:center"><div style="width:100%;height:11px;background:#a1dcd8;border-radius:1px"></div></div>
|
||
<div style="width:60%;height:8px;background:#1e4060;border-radius:1px"></div>
|
||
<div style="position:relative;width:100%;display:flex;justify-content:center"><div style="width:50%;height:8px;background:#1e4060;border-radius:1px"></div><span style="position:absolute;right:1px;top:0;width:4px;height:4px;border-radius:50%;background:#607080" title="Welt"></span></div>
|
||
<div style="font-size:5px;color:#54707f">1923</div>
|
||
<div style="width:35%;height:8px;background:#1e4060;border-radius:1px"></div>
|
||
<div style="width:45%;height:8px;background:#1e4060;border-radius:1px"></div>
|
||
<div style="font-size:5px;color:#54707f">1950</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- narrative -->
|
||
<div style="flex:1;overflow:hidden;padding:12px 11px">
|
||
<div class="pt dk">Zeitstrahl</div>
|
||
<div class="pt-sub dk">Familie Raddatz · 1915 ▾</div>
|
||
|
||
<div style="position:relative;padding-left:20px;margin-top:8px">
|
||
<div style="position:absolute;left:6px;top:2px;bottom:0;width:2px;background:linear-gradient(#a1dcd8,#1e4060)"></div>
|
||
|
||
<div style="position:relative;margin-bottom:11px">
|
||
<div style="position:absolute;left:-18px;top:1px;width:13px;height:13px;border-radius:50%;background:#0a1f2e;border:2px solid #a1dcd8;display:flex;align-items:center;justify-content:center;color:#a1dcd8;font-size:8px">*</div>
|
||
<div style="font-family:'Tinos',serif;font-size:11px;font-weight:700;color:#cde8e5">Geburt: Hans Raddatz</div>
|
||
<div style="font-size:8px;color:#54707f">Sommer 1915 · abgeleitet</div>
|
||
</div>
|
||
|
||
<div style="position:relative;margin:0 0 11px -8px;padding:5px 8px;background:#11202c;border-left:2px solid #607080;border-radius:0 3px 3px 0">
|
||
<div style="font-family:'Tinos',serif;font-style:italic;font-size:10px;color:#8aa0b0">◍ Erster Weltkrieg</div>
|
||
<div style="font-size:7.5px;color:#54707f">1914–1918</div>
|
||
</div>
|
||
|
||
<div style="position:relative">
|
||
<div style="position:absolute;left:-15px;top:3px;width:6px;height:6px;border-radius:50%;background:#0a1218;border:1.5px solid #a1dcd8"></div>
|
||
<div style="background:#0d1922;border:1px solid #1e2d3d;border-radius:4px;padding:6px 8px;margin-bottom:4px"><div style="font-size:9px;font-weight:700;color:#cdd8e2">✉ Brief über die Westfront</div><div style="font-size:7.5px;color:#54707f">Karl → Elfriede · Mär 1915</div></div>
|
||
<div style="background:#0d1922;border:1px solid #1e2d3d;border-radius:4px;padding:6px 8px"><div style="font-size:9px;font-weight:700;color:#cdd8e2">✉ Feldpost aus Verdun</div><div style="font-size:7.5px;color:#54707f">Hans → Karl · Jul 1915 · +22 ▾</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="notes">
|
||
<h4 style="color:#cde8e5;border-color:#1e2d3d">Warum dieses Layout</h4>
|
||
<ul style="--c:#cde8e5">
|
||
<li style="color:#aebfc9"><b style="color:#a1dcd8">Dichte-Schiene als Mini-Map:</b> 50 Jahre Brief-Volumen auf einen Blick, Tap springt zum Jahr. Das kann keine Suchliste.</li>
|
||
<li style="color:#aebfc9"><b style="color:#a1dcd8">Ereignis-Marker</b> (weiß = Lebensereignis, slate = Welt) auf der Schiene zeigen, wo etwas <i>passiert</i> ist — nicht nur wo Briefe sind.</li>
|
||
<li style="color:#aebfc9"><b style="color:#a1dcd8">Vertraute Sprache,</b> klar getrennter Kontext: dieselben Balken wie <code style="background:#11202c;color:#8aa">/documents</code>, aber hochkant + als Navigation, nicht als Filter.</li>
|
||
<li style="color:#aebfc9">Hier in <b style="color:#a1dcd8">Dark Mode</b> gezeigt — Mint wird zum Auswahl-/Akzentton, wie im Dichtefilter-Spec.</li>
|
||
</ul>
|
||
<h4 style="color:#cde8e5;border-color:#1e2d3d">320px-Verhalten</h4>
|
||
<ul style="--c:#cde8e5">
|
||
<li style="color:#aebfc9">Schiene schrumpft auf ~24px (nur Balken + Jahrzehnt-Ticks) oder klappt hinter ein „Karte"-Icon.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<style>
|
||
/* ── Desktop browser chrome ── */
|
||
.dchrome{background:#F0EFE9;border:1.5px solid #C4C0BA;border-radius:9px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.12)}
|
||
.dbar{height:22px;background:#E2DFD8;border-bottom:1px solid #C4C0BA;display:flex;align-items:center;gap:4px;padding:0 9px}
|
||
.ddot{width:7px;height:7px;border-radius:50%;background:#C4BFB8}
|
||
.durl{flex:1;height:10px;background:#D2CEC8;border-radius:5px;margin:0 8px;max-width:340px}
|
||
.dnav{height:32px;background:#012851;display:flex;align-items:center;gap:13px;padding:0 16px}
|
||
.dnav .nlogo{font-family:'Tinos',serif;font-size:10px;color:#fff;font-weight:700}
|
||
.dnav .nlink{font-size:7.5px;color:rgba(255,255,255,.5);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
|
||
.dnav .nlink.on{color:#fff;border-bottom:2px solid #a1dcd8;padding-bottom:9px}
|
||
.dnav .nav-av{margin-left:auto;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:800;color:rgba(255,255,255,.55)}
|
||
.dcanvas{background:#f0efe9;padding:20px 28px 30px}
|
||
.dh{font-family:'Tinos',serif;font-size:20px;font-weight:700;color:#012851}
|
||
.dh-sub{font-size:9.5px;color:#7a7a76;margin-bottom:18px}
|
||
.lifenode-lbl{font-family:'Tinos',serif;font-weight:700;color:#012851}
|
||
.lettercard{background:#fff;border:1px solid #e4e2d7;border-radius:5px;padding:8px 11px;box-shadow:0 1px 3px rgba(0,0,0,.05);text-align:left;display:inline-block}
|
||
.lettercard .lt{font-size:11px;font-weight:700;color:#1A1A1A}
|
||
.lettercard .lm{font-size:8.5px;color:#9a9a96;margin-top:1px}
|
||
</style>
|
||
|
||
<!-- ══ 3 · DESKTOP VIEWS ══ -->
|
||
<div class="sh">
|
||
<h2>3 · Desktop-Ansichten — A vs. B im direkten Vergleich</h2>
|
||
<p>Auf <code>/zeitstrahl</code> gibt es Breite, die das Phone nicht hat. Hier entscheidet sich A gegen B: <b>A</b> nutzt die Breite für eine dramatische, alternierende Erzähl-Achse; <b>B</b> nutzt sie, um die drei Ebenen als <b>drei echte Spalten</b> nebeneinander lesbar zu machen.</p>
|
||
</div>
|
||
|
||
<!-- DESKTOP A -->
|
||
<div style="margin-bottom:14px;display:flex;align-items:baseline;gap:12px">
|
||
<span style="font-size:34px;font-weight:900;color:#DEDBD3;line-height:1">A</span>
|
||
<div>
|
||
<div class="c-kicker">Konzept A · Desktop</div>
|
||
<div style="font-family:'Tinos',serif;font-size:17px;font-weight:700;color:#012851">Zentrale Achse, alternierende Ereignisse</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dchrome" style="margin-bottom:14px">
|
||
<div class="dbar"><div class="ddot"></div><div class="ddot"></div><div class="ddot"></div><div class="durl"></div></div>
|
||
<div class="dnav"><span class="nlogo">Familienarchiv</span><span class="nlink">Dokumente</span><span class="nlink">Personen</span><span class="nlink on">Zeitstrahl</span><span class="nlink">Stammbaum</span><span class="nav-av">KR</span></div>
|
||
<div class="dcanvas">
|
||
<div class="dh">Zeitstrahl</div>
|
||
<div class="dh-sub">Die Familie Raddatz · 1899–1950 · 412 Briefe · 38 Ereignisse</div>
|
||
|
||
<!-- centered spine timeline -->
|
||
<div style="position:relative;max-width:760px;margin:0 auto;padding:6px 0">
|
||
<!-- spine -->
|
||
<div style="position:absolute;left:50%;top:0;bottom:0;width:2.5px;background:linear-gradient(#a1dcd8,#012851,#607080);transform:translateX(-50%)"></div>
|
||
|
||
<!-- year pill 1914 -->
|
||
<div style="text-align:center;position:relative;margin:2px 0 14px"><span style="background:#012851;color:#fff;font-family:'Tinos',serif;font-size:13px;font-weight:700;padding:2px 14px;border-radius:12px">1914</span></div>
|
||
|
||
<!-- life milestone pill (marriage) — solid fill interrupts the spine, text never crossed -->
|
||
<div style="text-align:center;position:relative;margin-bottom:16px">
|
||
<span style="display:inline-flex;align-items:center;gap:9px;background:#fff;border:1.5px solid #012851;border-radius:22px;padding:5px 16px 5px 5px;position:relative;z-index:1;box-shadow:0 2px 7px rgba(1,40,81,.12)">
|
||
<span style="width:28px;height:28px;border-radius:50%;background:#012851;color:#a1dcd8;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0">⚭</span>
|
||
<span style="text-align:left"><span class="lifenode-lbl" style="font-size:12px;display:block;line-height:1.15">Heirat: Karl & Elfriede Raddatz</span><span style="font-size:8.5px;color:#8a8a86">1914 · abgeleitet aus Beziehung</span></span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- full-width historical band -->
|
||
<div style="position:relative;margin:0 -28px 16px;padding:7px 28px;background:#EEEBE2;border-top:1px solid #ddd8cc;border-bottom:1px solid #ddd8cc;text-align:center">
|
||
<span style="font-family:'Tinos',serif;font-style:italic;font-size:12px;color:#5a6776">◍ Erster Weltkrieg</span>
|
||
<span style="font-size:8.5px;color:#8a8a86;margin-left:8px">1914–1918 · historisch · 187 Briefe in dieser Zeit</span>
|
||
</div>
|
||
|
||
<!-- year pill 1915 -->
|
||
<div style="text-align:center;position:relative;margin:0 0 14px"><span style="background:#012851;color:#fff;font-family:'Tinos',serif;font-size:13px;font-weight:700;padding:2px 14px;border-radius:12px">1915</span></div>
|
||
|
||
<!-- alternating row: letter cluster LEFT -->
|
||
<div style="display:flex;align-items:flex-start;margin-bottom:12px">
|
||
<div style="flex:1;padding-right:26px;text-align:right">
|
||
<div class="lettercard"><div class="lt">✉ 24 Feldpost — Westfront</div><div class="lm">Karl ⇄ Elfriede & Hans Raddatz · März–Dez 1915</div><div style="margin-top:5px"><span style="display:inline-flex;align-items:center;gap:3px;font-size:7.5px;color:#a0522d;background:#f6ece6;padding:2px 7px;border-radius:9px"><span style="width:6px;height:6px;border-radius:2px;background:#a0522d"></span>Krieg › Briefe von der Front</span></div></div>
|
||
</div>
|
||
<div style="width:13px;height:13px;border-radius:50%;background:#fff;border:2.5px solid #a1dcd8;margin-top:8px;flex-shrink:0;z-index:1"></div>
|
||
<div style="flex:1;padding-left:26px"></div>
|
||
</div>
|
||
|
||
<!-- life milestone pill (birth) — solid fill interrupts the spine, text never crossed -->
|
||
<div style="text-align:center;position:relative;margin-bottom:14px">
|
||
<span style="display:inline-flex;align-items:center;gap:9px;background:#fff;border:1.5px solid #012851;border-radius:22px;padding:5px 16px 5px 5px;position:relative;z-index:1;box-shadow:0 2px 7px rgba(1,40,81,.12)">
|
||
<span style="width:28px;height:28px;border-radius:50%;background:#012851;color:#a1dcd8;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0">*</span>
|
||
<span style="text-align:left"><span class="lifenode-lbl" style="font-size:12px;display:block;line-height:1.15">Geburt: Hans Raddatz</span><span style="font-size:8.5px;color:#8a8a86">Sommer 1915 · abgeleitet</span></span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- alternating row: curated personal RIGHT -->
|
||
<div style="display:flex;align-items:flex-start;margin-bottom:8px">
|
||
<div style="flex:1;padding-right:26px"></div>
|
||
<div style="width:13px;height:13px;border-radius:50%;background:#a1dcd8;border:2.5px solid #f0efe9;box-shadow:0 0 0 1.5px #a1dcd8;margin-top:8px;flex-shrink:0;z-index:1"></div>
|
||
<div style="flex:1;padding-left:26px;text-align:left">
|
||
<div class="lettercard" style="border-left:3px solid #a1dcd8"><div class="lt" style="font-family:'Tinos',serif">★ Umzug nach Berlin</div><div class="lm">persönlich · Herbst 1915 · „Die Wohnung in der Kastanienallee …"</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:flex;gap:26px;flex-wrap:wrap;margin-bottom:36px">
|
||
<div class="notes" style="min-width:280px">
|
||
<h4>Was die Breite hier gewinnt</h4>
|
||
<ul>
|
||
<li><b>Alternierende Seiten</b> — Briefe links, kuratierte Ereignisse rechts; das Auge zickzackt die Geschichte entlang. Maximal un-listenhaft.</li>
|
||
<li><b>Lebensereignisse & Jahre als zentrierte Meilenstein-Pillen,</b> deren gefüllter Hintergrund die Achse <i>unterbricht</i> — der Spine läuft nie durch den Text, sondern endet sauber an der Pille.</li>
|
||
<li><b>Welt-Bänder über die volle Breite</b> — der historische Kontext umschließt buchstäblich die Briefe darunter.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="notes" style="min-width:280px">
|
||
<h4>Risiken für Senioren / A11y</h4>
|
||
<ul>
|
||
<li>Alternierende Lese-Richtung ist anstrengender. Mitigation: <b>nie wichtige Info nur rechtsbündig</b>; auf <1024px kollabiert A in die einseitige Phone-Achse.</li>
|
||
<li>DOM-Reihenfolge bleibt streng chronologisch (eine <code><ol></code>) — Screenreader liest die Saga linear, egal welche Seite.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DESKTOP B -->
|
||
<div style="margin-bottom:14px;display:flex;align-items:baseline;gap:12px">
|
||
<span style="font-size:34px;font-weight:900;color:#DEDBD3;line-height:1">B</span>
|
||
<div>
|
||
<div class="c-kicker">Konzept B · Desktop</div>
|
||
<div style="font-family:'Tinos',serif;font-size:17px;font-weight:700;color:#012851">Drei Spalten — Personen · Welt · Briefe</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dchrome" style="margin-bottom:14px">
|
||
<div class="dbar"><div class="ddot"></div><div class="ddot"></div><div class="ddot"></div><div class="durl"></div></div>
|
||
<div class="dnav"><span class="nlogo">Familienarchiv</span><span class="nlink">Dokumente</span><span class="nlink">Personen</span><span class="nlink on">Zeitstrahl</span><span class="nlink">Stammbaum</span><span class="nav-av">KR</span></div>
|
||
<div class="dcanvas">
|
||
<div class="dh">Zeitstrahl</div>
|
||
<div class="dh-sub">Die Familie Raddatz · 1899–1950</div>
|
||
|
||
<!-- lane header -->
|
||
<div style="display:grid;grid-template-columns:60px 1fr 1fr 1fr;gap:0;border-bottom:2px solid #012851;margin-bottom:2px">
|
||
<div></div>
|
||
<div style="font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#012851;padding:0 12px 6px">Personen & Familie</div>
|
||
<div style="font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#5a6776;padding:0 12px 6px">Weltgeschehen</div>
|
||
<div style="font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#012851;padding:0 12px 6px">Briefe</div>
|
||
</div>
|
||
|
||
<!-- year row 1914 -->
|
||
<div style="display:grid;grid-template-columns:60px 1fr 1fr 1fr;gap:0;border-bottom:1px solid #e4e2d7">
|
||
<div style="font-family:'Tinos',serif;font-size:16px;font-weight:700;color:#012851;padding:12px 0 0 4px">1914</div>
|
||
<div style="padding:11px 12px;border-left:1px solid #eeede8">
|
||
<div style="display:flex;gap:7px;align-items:center"><span style="width:18px;height:18px;border-radius:50%;background:#012851;color:#a1dcd8;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0">⚭</span><span style="font-family:'Tinos',serif;font-size:11px;font-weight:700;color:#012851">Heirat: Karl & Elfriede</span></div>
|
||
</div>
|
||
<div style="padding:11px 12px;border-left:1px solid #eeede8;background:#F6F4EE">
|
||
<div style="display:flex;gap:7px;align-items:flex-start"><span style="color:#607080;font-size:11px">◍</span><span style="font-family:'Tinos',serif;font-style:italic;font-size:11px;color:#5a6776">Erster Weltkrieg beginnt<br><span style="font-size:8px;font-style:normal;color:#9a9a96">28. Juli 1914</span></span></div>
|
||
</div>
|
||
<div style="padding:11px 12px;border-left:1px solid #eeede8">
|
||
<div style="display:flex;gap:3px;align-items:flex-end;height:20px;margin-bottom:4px"><div style="width:11px;height:50%;background:#a1dcd8;border-radius:1px"></div><div style="width:11px;height:90%;background:#a1dcd8;border-radius:1px"></div><div style="width:11px;height:65%;background:#a1dcd8;border-radius:1px"></div></div>
|
||
<div style="font-size:8.5px;color:#9a9a96">6 Briefe · „Kriegsausbruch — Brief an die Familie" →</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- year row 1915 -->
|
||
<div style="display:grid;grid-template-columns:60px 1fr 1fr 1fr;gap:0;border-bottom:1px solid #e4e2d7">
|
||
<div style="font-family:'Tinos',serif;font-size:16px;font-weight:700;color:#012851;padding:12px 0 0 4px">1915</div>
|
||
<div style="padding:11px 12px;border-left:1px solid #eeede8">
|
||
<div style="display:flex;gap:7px;align-items:center"><span style="width:18px;height:18px;border-radius:50%;background:#012851;color:#a1dcd8;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0">*</span><span style="font-family:'Tinos',serif;font-size:11px;font-weight:700;color:#012851">Geburt: Hans Raddatz</span></div>
|
||
</div>
|
||
<div style="padding:11px 12px;border-left:1px solid #eeede8;background:#F6F4EE">
|
||
<span style="font-size:8.5px;color:#bdbab2;font-style:italic">— im Krieg —</span>
|
||
</div>
|
||
<div style="padding:11px 12px;border-left:1px solid #eeede8">
|
||
<div class="lettercard" style="display:block;box-shadow:none;border-color:#eeede8;background:#FAF9F5;padding:6px 9px"><div class="lt" style="font-size:10px">✉ Brief über die Westfront</div><div class="lm">Karl → Elfriede · Mär 1915 · 23 weitere ▾</div><div style="margin-top:4px"><span style="display:inline-flex;align-items:center;gap:3px;font-size:7px;color:#a0522d"><span style="width:6px;height:6px;border-radius:2px;background:#a0522d"></span>Krieg</span></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- year row 1923 -->
|
||
<div style="display:grid;grid-template-columns:60px 1fr 1fr 1fr;gap:0">
|
||
<div style="font-family:'Tinos',serif;font-size:16px;font-weight:700;color:#012851;padding:12px 0 0 4px">1923</div>
|
||
<div style="padding:11px 12px;border-left:1px solid #eeede8"><span style="font-size:8.5px;color:#bdbab2;font-style:italic">—</span></div>
|
||
<div style="padding:11px 12px;border-left:1px solid #eeede8;background:#F6F4EE">
|
||
<div style="display:flex;gap:7px;align-items:flex-start"><span style="color:#607080;font-size:11px">◍</span><span style="font-family:'Tinos',serif;font-style:italic;font-size:11px;color:#5a6776">Hyperinflation<br><span style="font-size:8px;font-style:normal;color:#9a9a96">ca. 1923</span></span></div>
|
||
</div>
|
||
<div style="padding:11px 12px;border-left:1px solid #eeede8"><div style="font-size:8.5px;color:#9a9a96">3 Briefe</div></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:flex;gap:26px;flex-wrap:wrap;margin-bottom:36px">
|
||
<div class="notes" style="min-width:280px">
|
||
<h4>Was die Breite hier gewinnt</h4>
|
||
<ul>
|
||
<li><b>Drei Spalten = drei Ebenen,</b> dauerhaft sichtbar. Das Verweben wird zur lesbaren Tabelle: Auge wandert pro Jahr quer durch Familie → Welt → Briefe.</li>
|
||
<li><b>Gemeinsame Jahres-Achse</b> links bindet die Spalten — man sieht sofort „1915: Geburt, Krieg läuft, 24 Feldpost".</li>
|
||
<li><b>Leere Zellen erzählen mit</b> („— im Krieg —") statt zu verschwinden.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="notes" style="min-width:280px">
|
||
<h4>Risiken / A11y</h4>
|
||
<ul>
|
||
<li>Tabellarischer, weniger „Saga". Dafür <b>senioren-stärker</b>: ruhige Spalten, keine alternierende Lese-Richtung.</li>
|
||
<li><1024px: die drei Spalten <b>stapeln</b> zu den drei Spuren aus dem Phone-Konzept (siehe §B oben) — ein Markup, zwei Layouts via Container-Query.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══ 4 · LEBENSWEG REUSE ══ -->
|
||
<div class="sh">
|
||
<h2>4 · Wiederverwendung: „Lebensweg" in der Personenansicht</h2>
|
||
<p>Dieselbe <code>TimelineView</code>-Komponente mit <code>personId</code>-Prop, gefiltert auf eine Person. Sie zieht in die <b>linke 35%-Spalte</b> der Personenseite ein, direkt unter die <code>PersonCard</code> (<code>persons/[id]/+page.svelte:60–67</code>). Weil diese Spalte schmal ist, ist es exakt das Phone-Layout in Spaltenbreite — kein zweites Design nötig.</p>
|
||
</div>
|
||
|
||
<div class="callout navy"><strong>Platzierung im echten Layout:</strong> Die Personenseite ist <code>lg:grid-cols-[35%_65%]</code>. Links: <code>PersonCard</code> + <code>NameHistoryCard</code> → wird zu <code>PersonCard</code> + <b>Lebensweg</b>. Rechts (65%): Korrespondenten, Beziehungen, Dokumente bleiben unverändert. Der Lebensweg filtert auf <i>diese</i> Person: ihre Geburt/Heirat/Tod, Ereignisse an denen sie beteiligt ist, ihre gesendeten/empfangenen Briefe.</div>
|
||
|
||
<!-- full person page context -->
|
||
<div class="dchrome" style="margin-bottom:16px">
|
||
<div class="dbar"><div class="ddot"></div><div class="ddot"></div><div class="ddot"></div><div class="durl"></div></div>
|
||
<div class="dnav"><span class="nlogo">Familienarchiv</span><span class="nlink">Dokumente</span><span class="nlink on">Personen</span><span class="nlink">Zeitstrahl</span><span class="nlink">Stammbaum</span><span class="nav-av">KR</span></div>
|
||
<div class="dcanvas">
|
||
<div style="font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#8a8a86;margin-bottom:12px">‹ Zurück</div>
|
||
<!-- 35 / 65 grid -->
|
||
<div style="display:grid;grid-template-columns:35% 65%;gap:24px">
|
||
<!-- LEFT 35% -->
|
||
<div>
|
||
<!-- PersonCard mock -->
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.05);padding:16px;text-align:center;margin-bottom:18px">
|
||
<div style="width:54px;height:54px;border-radius:50%;background:#012851;color:#a1dcd8;font-family:'Tinos',serif;font-size:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 8px">KR</div>
|
||
<div style="font-family:'Tinos',serif;font-size:16px;font-weight:700;color:#012851">Karl Raddatz</div>
|
||
<div style="font-size:9px;color:#6b7280;margin-top:2px">* 14. März 1901 † 1967</div>
|
||
<div style="display:flex;gap:5px;justify-content:center;margin-top:9px"><span style="background:#f5f4ef;border:1px solid #e4e2d7;font-size:7px;color:#5a5a56;padding:2px 7px;border-radius:10px">Großvater</span><span style="background:#f5f4ef;border:1px solid #e4e2d7;font-size:7px;color:#5a5a56;padding:2px 7px;border-radius:10px">128 Briefe</span></div>
|
||
</div>
|
||
|
||
<!-- LEBENSWEG card (the reused component, narrow) -->
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.05);padding:15px 14px">
|
||
<div style="font-size:8.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#6b7280;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between">Lebensweg <span style="font-size:7px;color:#a1dcd8;background:#012851;padding:2px 6px;border-radius:8px;letter-spacing:.5px">nur Karl</span></div>
|
||
|
||
<div style="position:relative;padding-left:22px">
|
||
<div style="position:absolute;left:7px;top:3px;bottom:4px;width:2px;background:linear-gradient(#a1dcd8,#012851)"></div>
|
||
|
||
<div style="position:relative;margin-bottom:13px">
|
||
<div style="position:absolute;left:-20px;top:0;width:14px;height:14px;border-radius:50%;background:#012851;border:2px solid #fff;box-shadow:0 0 0 1.5px #012851;color:#a1dcd8;font-size:8px;display:flex;align-items:center;justify-content:center">*</div>
|
||
<div style="font-family:'Tinos',serif;font-size:11px;font-weight:700;color:#012851">Geburt</div>
|
||
<div style="font-size:8px;color:#8a8a86">14. März 1901 · Stettin</div>
|
||
</div>
|
||
|
||
<div style="position:relative;margin-bottom:13px">
|
||
<div style="position:absolute;left:-20px;top:0;width:14px;height:14px;border-radius:50%;background:#012851;border:2px solid #fff;box-shadow:0 0 0 1.5px #012851;color:#a1dcd8;font-size:9px;display:flex;align-items:center;justify-content:center">⚭</div>
|
||
<div style="font-family:'Tinos',serif;font-size:11px;font-weight:700;color:#012851">Heirat mit Elfriede</div>
|
||
<div style="font-size:8px;color:#8a8a86">1914 · abgeleitet</div>
|
||
</div>
|
||
|
||
<div style="position:relative;margin:0 0 11px -8px;padding:5px 8px;background:#EEEBE2;border-left:2px solid #607080;border-radius:0 3px 3px 0">
|
||
<div style="font-family:'Tinos',serif;font-style:italic;font-size:10px;color:#5a6776">◍ Erster Weltkrieg</div>
|
||
<div style="font-size:7.5px;color:#8a8a86">1914–1918</div>
|
||
</div>
|
||
|
||
<div style="position:relative;margin-bottom:7px">
|
||
<div style="position:absolute;left:-17px;top:3px;width:6px;height:6px;border-radius:50%;background:#fff;border:1.5px solid #a1dcd8"></div>
|
||
<div style="font-family:'Tinos',serif;font-size:11px;font-weight:700;color:#012851">1915 · 24 Feldpost</div>
|
||
<div style="font-size:8px;color:#8a8a86">an Elfriede & Hans · Westfront</div>
|
||
</div>
|
||
|
||
<div style="position:relative">
|
||
<div style="position:absolute;left:-20px;top:0;width:14px;height:14px;border-radius:50%;background:#012851;border:2px solid #fff;box-shadow:0 0 0 1.5px #012851;color:#a1dcd8;font-size:8px;display:flex;align-items:center;justify-content:center">†</div>
|
||
<div style="font-family:'Tinos',serif;font-size:11px;font-weight:700;color:#012851">Tod</div>
|
||
<div style="font-size:8px;color:#8a8a86">1967 · abgeleitet</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RIGHT 65% — existing content, dimmed -->
|
||
<div style="opacity:.5">
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-radius:4px;padding:13px 15px;margin-bottom:14px">
|
||
<div style="font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#9a9a96;margin-bottom:8px">Gemeinsame Korrespondenten</div>
|
||
<div style="display:flex;gap:8px"><span style="width:30px;height:30px;border-radius:50%;background:#eeede8"></span><span style="width:30px;height:30px;border-radius:50%;background:#eeede8"></span><span style="width:30px;height:30px;border-radius:50%;background:#eeede8"></span></div>
|
||
</div>
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-radius:4px;padding:13px 15px;margin-bottom:14px;height:70px"><div style="font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#9a9a96">Beziehungen</div></div>
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-radius:4px;padding:13px 15px;height:120px"><div style="font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#9a9a96">Gesendete Dokumente</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:11px;color:#888;font-style:italic;margin-bottom:30px">Der Lebensweg sitzt unter der PersonCard in der 35%-Spalte. Gefiltert auf Karl: eigene Geburt/Heirat/Tod, beteiligte Welt-Ereignisse als Kontext, eigene Brief-Cluster. <code style="font-family:monospace;font-size:10px"><TimelineView personId={person.id} /></code></p>
|
||
|
||
<!-- A vs B at rail width -->
|
||
<div class="sh" style="margin-top:30px"><h2 style="font-size:14px">… und so verhalten sich A vs. B in der schmalen Lebensweg-Spalte</h2><p>Bei Spaltenbreite (~330px) ist die Entscheidung wichtig: A bleibt eine klare Faden-Achse, B muss seine drei Spuren stapeln.</p></div>
|
||
<div style="display:flex;gap:30px;flex-wrap:wrap;align-items:flex-start">
|
||
<div style="width:300px">
|
||
<div style="font-size:8.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#00a896;margin-bottom:8px">A · Faden im Rail</div>
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-radius:4px;padding:14px">
|
||
<div style="position:relative;padding-left:22px">
|
||
<div style="position:absolute;left:7px;top:3px;bottom:3px;width:2px;background:linear-gradient(#a1dcd8,#012851)"></div>
|
||
<div style="position:relative;margin-bottom:11px"><div style="position:absolute;left:-20px;top:0;width:13px;height:13px;border-radius:50%;background:#012851;border:2px solid #fff;box-shadow:0 0 0 1.5px #012851;color:#a1dcd8;font-size:8px;display:flex;align-items:center;justify-content:center">*</div><div style="font-family:'Tinos',serif;font-size:10.5px;font-weight:700;color:#012851">Geburt · 1901</div></div>
|
||
<div style="position:relative;margin-bottom:11px"><div style="position:absolute;left:-20px;top:0;width:13px;height:13px;border-radius:50%;background:#012851;border:2px solid #fff;box-shadow:0 0 0 1.5px #012851;color:#a1dcd8;font-size:9px;display:flex;align-items:center;justify-content:center">⚭</div><div style="font-family:'Tinos',serif;font-size:10.5px;font-weight:700;color:#012851">Heirat · 1914</div></div>
|
||
<div style="position:relative;margin-bottom:11px"><div style="position:absolute;left:-17px;top:2px;width:6px;height:6px;border-radius:50%;background:#fff;border:1.5px solid #a1dcd8"></div><div style="font-size:9.5px;color:#3a3a36">1915 · 24 Feldpost</div></div>
|
||
<div style="position:relative"><div style="position:absolute;left:-20px;top:0;width:13px;height:13px;border-radius:50%;background:#012851;border:2px solid #fff;box-shadow:0 0 0 1.5px #012851;color:#a1dcd8;font-size:8px;display:flex;align-items:center;justify-content:center">†</div><div style="font-family:'Tinos',serif;font-size:10.5px;font-weight:700;color:#012851">Tod · 1967</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="cap" style="margin-top:8px">Faden bleibt intakt — eine durchgehende Lebenslinie. Natürliche Passform fürs Rail.</div>
|
||
</div>
|
||
|
||
<div style="width:300px">
|
||
<div style="font-size:8.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#00a896;margin-bottom:8px">B · Bänder im Rail (gestapelt)</div>
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-radius:4px;padding:14px">
|
||
<div style="border:1px solid #e4e2d7;border-radius:5px;overflow:hidden;margin-bottom:9px">
|
||
<div style="background:#012851;padding:3px 9px;font-family:'Tinos',serif;font-size:11px;font-weight:700;color:#fff">1914</div>
|
||
<div style="padding:5px 9px;border-bottom:1px solid #f0eee8"><span style="font-size:6px;font-weight:800;color:#9a9a96;letter-spacing:.6px">PERSONEN</span><div style="font-family:'Tinos',serif;font-size:9.5px;color:#012851">⚭ Heirat mit Elfriede</div></div>
|
||
<div style="padding:5px 9px;border-bottom:1px solid #f0eee8;background:#F6F4EE"><span style="font-size:6px;font-weight:800;color:#9a9a96;letter-spacing:.6px">WELT</span><div style="font-family:'Tinos',serif;font-style:italic;font-size:9.5px;color:#5a6776">◍ Erster Weltkrieg</div></div>
|
||
<div style="padding:5px 9px"><span style="font-size:6px;font-weight:800;color:#9a9a96;letter-spacing:.6px">BRIEFE</span><div style="font-size:9px;color:#3a3a36">6 Briefe ▾</div></div>
|
||
</div>
|
||
<div style="border:1px solid #e4e2d7;border-radius:5px;overflow:hidden">
|
||
<div style="background:#012851;padding:3px 9px;font-family:'Tinos',serif;font-size:11px;font-weight:700;color:#fff">1915</div>
|
||
<div style="padding:5px 9px;border-bottom:1px solid #f0eee8"><span style="font-size:6px;font-weight:800;color:#9a9a96;letter-spacing:.6px">PERSONEN</span><div style="font-family:'Tinos',serif;font-size:9.5px;color:#012851">* Geburt: Hans</div></div>
|
||
<div style="padding:5px 9px"><span style="font-size:6px;font-weight:800;color:#9a9a96;letter-spacing:.6px">BRIEFE</span><div style="font-size:9px;color:#3a3a36">24 Feldpost ▾</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="cap" style="margin-top:8px">Spuren stapeln zu Mini-Sektionen pro Jahr. Mehr Struktur, aber höher & mehr Scroll im engen Rail.</div>
|
||
</div>
|
||
|
||
<div class="notes" style="min-width:240px">
|
||
<h4>Konsequenz für die Wahl</h4>
|
||
<ul>
|
||
<li><b>A skaliert nahtlos</b> von Rail (330px) über Phone bis Desktop — ein Layout-Idiom, drei Breiten.</li>
|
||
<li><b>B braucht zwei Modi:</b> gestapelt im Rail/Phone, Spalten auf Desktop. Mehr Code, aber explizitere Ebenen-Trennung.</li>
|
||
<li>Da der Lebensweg <b>denselben Component</b> nutzt, zählt die Rail-Tauglichkeit doppelt — sie ist ein echtes Argument für <b>A</b>.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<!-- ══ 5 · LETTER GROUPING & TAG COLORS ══ -->
|
||
<div class="sh">
|
||
<h2>5 · Brief-Gruppierung & Tag-Farben</h2>
|
||
<p>Die Zeit ist die Achse — nicht das Thema. Briefe gruppieren wir <b>nach Datum</b> (Standard), echte Bündel entstehen über <b>kuratierte Ereignisse</b>, und <b>Tags</b> dienen als Farb-Akzent & Filter. So bleibt der Zeitstrahl eine Zeit-Oberfläche und konkurriert nicht mit der <code>/themen</code>-Seite.</p>
|
||
</div>
|
||
|
||
<div class="callout navy">
|
||
<strong>Warum nicht primär nach Tags gruppieren?</strong> Ein Dokument hat <i>mehrere</i> Tags (ManyToMany). Ein Brief mit <code>Weihnachten</code> <i>und</i> <code>Lazarett</code> hätte keinen eindeutigen Eimer — duplizieren verfälscht Zählungen, willkürlich wählen verfälscht die Bedeutung. Daten sind exklusiv, Themen nicht. Außerdem spannt <code>Weihnachten</code> jeden Dezember 1899–1950 — das ist genau die <b>Themen</b>-Seite, nicht der Zeitstrahl.
|
||
</div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:10px">
|
||
|
||
<!-- LEFT: toggle + cluster card -->
|
||
<div>
|
||
<div style="font-size:8.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#012851;margin-bottom:9px">① Gruppierungs-Umschalter</div>
|
||
<div style="display:inline-flex;border:1.5px solid #012851;border-radius:6px;overflow:hidden;margin-bottom:6px">
|
||
<span style="background:#012851;color:#fff;font-size:9px;font-weight:700;padding:5px 14px">Datum</span>
|
||
<span style="color:#012851;font-size:9px;font-weight:700;padding:5px 14px;border-left:1px solid #012851">Ereignis</span>
|
||
<span style="color:#012851;font-size:9px;font-weight:700;padding:5px 14px;border-left:1px solid #012851">Thema</span>
|
||
</div>
|
||
<div style="font-size:9.5px;color:#888;font-style:italic;margin-bottom:16px;line-height:1.5">Standard = <b>Datum</b>. „Ereignis" bündelt unter kuratierte Ereignisse, „Thema" (optional, Post-MVP) nach Wurzel-Tag.</div>
|
||
|
||
<div style="font-size:8.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#012851;margin-bottom:9px">② Cluster-Karte (Ereignis)</div>
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,.05);overflow:hidden">
|
||
<div style="display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid #f0eee8">
|
||
<span style="width:18px;height:18px;border-radius:50%;background:#a1dcd8;color:#012851;font-size:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0">✉</span>
|
||
<span style="flex:1"><span style="font-family:'Tinos',serif;font-size:12px;font-weight:700;color:#012851">Briefe von der Front</span>
|
||
<span style="display:inline-flex;align-items:center;gap:3px;margin-left:6px;font-size:7.5px;color:#a0522d;vertical-align:middle"><span style="width:7px;height:7px;border-radius:2px;background:#a0522d"></span>Krieg</span></span>
|
||
<span style="font-size:8.5px;color:#8a8a86">24 Briefe</span>
|
||
<span style="font-size:10px;color:#012851">▾</span>
|
||
</div>
|
||
<div style="padding:6px 11px 4px;background:#FAF9F5">
|
||
<div style="display:flex;align-items:center;gap:6px;padding:4px 0"><span style="width:5px;height:5px;border-radius:50%;background:#a1dcd8;flex-shrink:0"></span><span style="font-size:9px;color:#3a3a36;flex:1">Brief über die Lage an der Westfront</span><span style="font-size:7.5px;color:#aaa">Mär 1915</span></div>
|
||
<div style="display:flex;align-items:center;gap:6px;padding:4px 0"><span style="width:5px;height:5px;border-radius:50%;background:#a1dcd8;flex-shrink:0"></span><span style="font-size:9px;color:#3a3a36;flex:1">Feldpost aus Verdun</span><span style="font-size:7.5px;color:#aaa">Jul 1915</span></div>
|
||
<div style="font-size:8px;color:#9a9a96;padding:3px 0 5px 11px">+ 22 weitere · alle öffnen →</div>
|
||
</div>
|
||
</div>
|
||
<div style="font-size:9.5px;color:#888;font-style:italic;margin-top:8px;line-height:1.5">Ein Jahr mit 24 Feldpostbriefen wird zu <i>einer</i> erzählenden Zeile statt 24 Treffern — der schärfste Unterschied zur Suche. Quelle: <code>TimelineEvent.documents</code>.</div>
|
||
</div>
|
||
|
||
<!-- RIGHT: tag chips -->
|
||
<div>
|
||
<div style="font-size:8.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#012851;margin-bottom:9px">③ Tag-Farb-Chips am Brief</div>
|
||
<div class="callout mint" style="margin-bottom:14px">Die Farbe kommt vom <b>Wurzel-Tag</b> (<code>Tag.color</code> ist nur auf Root gesetzt). Kinder erben sie: <code>Lazarett</code> & <code>Briefe von der Front</code> tragen die Farbe von <code>Krieg</code>. <b>Nie Farbe allein</b> — immer Punkt + Label.</div>
|
||
|
||
<div style="display:flex;flex-direction:column;gap:8px">
|
||
<div class="lettercard" style="display:block;width:100%">
|
||
<div class="lt">✉ Weihnachtsgruß an Elfriede</div>
|
||
<div class="lm" style="margin-bottom:5px">Karl → Elfriede · Dez 1915</div>
|
||
<span style="display:inline-flex;align-items:center;gap:3px;font-size:7.5px;color:#c17a00;background:#fbf3e3;padding:2px 7px;border-radius:9px"><span style="width:6px;height:6px;border-radius:2px;background:#c17a00"></span>Weihnachten › Weihnachtsgrüße</span>
|
||
</div>
|
||
<div class="lettercard" style="display:block;width:100%">
|
||
<div class="lt">✉ Brief aus dem Lazarett</div>
|
||
<div class="lm" style="margin-bottom:5px">Hans → Karl · Aug 1916</div>
|
||
<span style="display:inline-flex;align-items:center;gap:3px;font-size:7.5px;color:#a0522d;background:#f6ece6;padding:2px 7px;border-radius:9px"><span style="width:6px;height:6px;border-radius:2px;background:#a0522d"></span>Krieg › Lazarett</span>
|
||
</div>
|
||
<div class="lettercard" style="display:block;width:100%">
|
||
<div class="lt">✉ Brief zum neuen Jahr</div>
|
||
<div class="lm" style="margin-bottom:5px">Elfriede → Karl · Jan 1916 · 2 Tags</div>
|
||
<span style="display:inline-flex;align-items:center;gap:3px;font-size:7.5px;color:#c17a00;background:#fbf3e3;padding:2px 7px;border-radius:9px;margin-right:4px"><span style="width:6px;height:6px;border-radius:2px;background:#c17a00"></span>Weihnachten</span>
|
||
<span style="display:inline-flex;align-items:center;gap:3px;font-size:7.5px;color:#5a8a6a;background:#eaf1ec;padding:2px 7px;border-radius:9px"><span style="width:6px;height:6px;border-radius:2px;background:#5a8a6a"></span>Familie</span>
|
||
</div>
|
||
</div>
|
||
<div style="font-size:9.5px;color:#888;font-style:italic;margin-top:10px;line-height:1.5">Mehrere Tags → mehrere Chips. Unter „Thema"-Gruppierung erscheint der Brief nur unter seinem <b>primären</b> Tag (dedupliziert, mit Hinweis).</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ④ loose letters: adaptive density -->
|
||
<div style="font-size:8.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#012851;margin:20px 0 9px">④ Lose Briefe ohne Cluster — adaptive Verdichtung</div>
|
||
<div class="callout navy" style="margin-bottom:16px">Lose Briefe (kein Ereignis, Modus „Datum") <strong>nie einzeln auflisten</strong> — 412 Briefe würden die Erzählung sprengen. Stattdessen verdichtet der Zeitstrahl <b>nach Datum, adaptiv</b>: wenige Briefe pro Jahr einzeln, viele als verdichteter <b>Jahres-Strip mit 12-Monats-Sparkline</b>. Gleiche Daten & Logik wie der Such-Dichtefilter — <code>MonthBucket</code> + <code>aggregateToYears</code> aus <code>lib/document/timeline.ts</code>.</div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:14px">
|
||
<!-- quiet year: individual -->
|
||
<div>
|
||
<div style="font-size:8px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#5a8a6a;margin-bottom:7px">Ruhiges Jahr · ≤ 3 lose Briefe → einzeln</div>
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-radius:5px;padding:11px 13px">
|
||
<div style="font-family:'Tinos',serif;font-size:14px;font-weight:700;color:#012851;margin-bottom:7px">1909</div>
|
||
<div class="lettercard" style="display:block;width:100%;box-shadow:none;border-color:#eeede8;margin-bottom:5px"><div class="lt" style="font-size:10px">✉ Brief aus Stettin</div><div class="lm">Elfriede → Karl · Mai 1909</div></div>
|
||
<div class="lettercard" style="display:block;width:100%;box-shadow:none;border-color:#eeede8"><div class="lt" style="font-size:10px">✉ Geburtstagsgruß</div><div class="lm">Karl → Hans · Sep 1909</div></div>
|
||
</div>
|
||
<div style="font-size:9px;color:#888;font-style:italic;margin-top:7px">Unter dem Schwellwert: jeder Brief als eigene Karte mit Tag-Chip.</div>
|
||
</div>
|
||
<!-- dense year: strip -->
|
||
<div>
|
||
<div style="font-size:8px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#a0522d;margin-bottom:7px">Dichtes Jahr · > 3 → Jahres-Strip mit Sparkline</div>
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-radius:5px;padding:11px 13px">
|
||
<div style="font-family:'Tinos',serif;font-size:14px;font-weight:700;color:#012851;margin-bottom:7px">1915</div>
|
||
<div style="border:1px solid #eeede8;border-radius:4px;padding:8px 10px;background:#FAF9F5">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
|
||
<span style="font-size:10px;font-weight:700;color:#012851">✉ 24 Briefe</span>
|
||
<span style="font-size:8px;color:#8a8a86">Monats-Dichte ▾</span>
|
||
</div>
|
||
<div style="display:flex;align-items:flex-end;gap:2px;height:26px">
|
||
<div style="flex:1;height:18%;background:#a1dcd8;border-radius:1px"></div><div style="flex:1;height:30%;background:#a1dcd8;border-radius:1px"></div><div style="flex:1;height:50%;background:#a1dcd8;border-radius:1px"></div><div style="flex:1;height:70%;background:#a1dcd8;border-radius:1px"></div><div style="flex:1;height:60%;background:#a1dcd8;border-radius:1px"></div><div style="flex:1;height:85%;background:#a1dcd8;border-radius:1px"></div><div style="flex:1;height:100%;background:#a1dcd8;border-radius:1px"></div><div style="flex:1;height:90%;background:#a1dcd8;border-radius:1px"></div><div style="flex:1;height:72%;background:#a1dcd8;border-radius:1px"></div><div style="flex:1;height:48%;background:#a1dcd8;border-radius:1px"></div><div style="flex:1;height:38%;background:#a1dcd8;border-radius:1px"></div><div style="flex:1;height:28%;background:#a1dcd8;border-radius:1px"></div>
|
||
</div>
|
||
<div style="display:flex;justify-content:space-between;margin-top:3px"><span style="font-size:5.5px;color:#bbb">Jan</span><span style="font-size:5.5px;color:#bbb">Dez</span></div>
|
||
</div>
|
||
</div>
|
||
<div style="font-size:9px;color:#888;font-style:italic;margin-top:7px">Über dem Schwellwert: ein Strip mit 12-Monats-Sparkline. Tap → Monate → einzelne Briefe, oder „im Suchergebnis öffnen →".</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout mint" style="margin-bottom:6px"><strong>Disclosure-Leiter:</strong> Jahres-Strip → Monats-Gruppen → einzelne Briefe. Auf jeder Stufe gilt der Schwellwert; die unterste Stufe verlinkt in die <b>gefilterte Dokumentsuche</b> (<code>/documents?from=1915-01-01&to=1915-12-31</code>) — die Brücke zur dritten Oberfläche, dem Dichtefilter. So bleibt der Zeitstrahl Erzählung und delegiert die vollständige Liste an die Suche, die genau dafür gebaut ist.</div>
|
||
|
||
<!-- ⑤ curation: how clusters are created -->
|
||
<div style="font-size:8.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#012851;margin:20px 0 9px">⑤ Wie Cluster entstehen — Kuratierung von zwei Seiten</div>
|
||
<div class="callout navy" style="margin-bottom:14px">Manuelle Gruppierung = ein <code>TimelineEvent</code> mit verknüpften Dokumenten. Zwei Einstiegspunkte, ein Datenmodell (<code>TimelineEvent.documents</code>): <b>Ereignis-zuerst</b> (Kurator baut den Zeitstrahl, verlinkt viele Briefe auf einmal) und <b>Dokument-zuerst</b> (beim Lesen eines Briefs schnell zuordnen).</div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
|
||
<!-- A · event-first editor -->
|
||
<div>
|
||
<div style="font-size:8px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#012851;margin-bottom:7px">A · Kurator-Editor · /zeitstrahl/events/[id]/edit</div>
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-radius:5px;padding:13px">
|
||
<div style="font-size:6.5px;font-weight:800;color:#9a9a96;letter-spacing:.6px;margin-bottom:3px">TITEL</div>
|
||
<div style="border:1px solid #e4e2d7;border-radius:3px;padding:5px 8px;font-family:'Tinos',serif;font-size:11px;color:#012851;margin-bottom:9px">Briefe von der Front</div>
|
||
<div style="display:flex;gap:10px;margin-bottom:9px">
|
||
<div style="flex:1"><div style="font-size:6.5px;font-weight:800;color:#9a9a96;letter-spacing:.6px;margin-bottom:3px">TYP</div><div style="display:inline-flex;border:1px solid #012851;border-radius:4px;overflow:hidden"><span style="background:#a1dcd8;color:#012851;font-size:7.5px;font-weight:700;padding:3px 8px">Persönlich</span><span style="color:#012851;font-size:7.5px;padding:3px 8px;border-left:1px solid #012851">Historisch</span></div></div>
|
||
<div style="flex:1"><div style="font-size:6.5px;font-weight:800;color:#9a9a96;letter-spacing:.6px;margin-bottom:3px">DATUM · PRÄZISION</div><div style="border:1px solid #e4e2d7;border-radius:3px;padding:3px 7px;font-size:8.5px;color:#444">1915 · <span style="color:#888">Jahr ▾</span></div></div>
|
||
</div>
|
||
<div style="font-size:6.5px;font-weight:800;color:#9a9a96;letter-spacing:.6px;margin-bottom:4px">VERKNÜPFTE BRIEFE · 24</div>
|
||
<div style="border:1px solid #e4e2d7;border-radius:3px;padding:6px;display:flex;flex-wrap:wrap;gap:4px">
|
||
<span style="background:#eef6f5;border:1px solid #a1dcd8;border-radius:9px;font-size:7px;color:#012851;padding:2px 6px">✉ Westfront-Brief ×</span>
|
||
<span style="background:#eef6f5;border:1px solid #a1dcd8;border-radius:9px;font-size:7px;color:#012851;padding:2px 6px">✉ Verdun ×</span>
|
||
<span style="background:#f5f4ef;border:1px dashed #c4c0ba;border-radius:9px;font-size:7px;color:#888;padding:2px 6px">+ Brief suchen…</span>
|
||
</div>
|
||
</div>
|
||
<div style="font-size:9px;color:#888;font-style:italic;margin-top:7px">Form-Actions-Muster, <code>WRITE_ALL</code>. Dokument-Mehrfach-Picker = Bulk-Linking. Auch inline „＋ Ereignis" auf jedem Jahres-Band.</div>
|
||
</div>
|
||
|
||
<!-- B · document-first quick-add -->
|
||
<div>
|
||
<div style="font-size:8px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#012851;margin-bottom:7px">B · Quick-Add · /documents/[id]</div>
|
||
<div style="background:#fff;border:1px solid #e4e2d7;border-radius:5px;padding:13px">
|
||
<div style="font-size:7px;color:#9a9a96;margin-bottom:8px">… Dokument-Detail · Seitenleiste …</div>
|
||
<div style="border:1px solid #e4e2d7;border-radius:4px;padding:10px;background:#FAF9F5">
|
||
<div style="font-size:7px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#012851;margin-bottom:7px">Zeitstrahl-Ereignis</div>
|
||
<div style="display:flex;align-items:center;gap:6px;border:1px solid #e4e2d7;border-radius:3px;padding:5px 8px;background:#fff;margin-bottom:6px"><span style="width:14px;height:14px;border-radius:50%;background:#a1dcd8;color:#012851;font-size:7px;display:flex;align-items:center;justify-content:center">✉</span><span style="font-size:9px;color:#012851;font-weight:600;flex:1">Briefe von der Front</span><span style="font-size:8px;color:#a0522d">✓ verknüpft</span></div>
|
||
<div style="display:flex;gap:6px"><span style="flex:1;text-align:center;border:1px solid #e4e2d7;border-radius:3px;font-size:7.5px;color:#012851;padding:4px">Ereignis wählen ▾</span><span style="flex:1;text-align:center;background:#012851;color:#fff;border-radius:3px;font-size:7.5px;padding:4px">＋ Neues Ereignis</span></div>
|
||
</div>
|
||
</div>
|
||
<div style="font-size:9px;color:#888;font-style:italic;margin-top:7px">Beim Lesen eines Briefs: bestehendes Ereignis wählen <i>oder</i> direkt neu anlegen — verlinkt diesen einen Brief. Schreibt dieselbe <code>TimelineEvent.documents</code>-Relation.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout navy" style="margin-top:16px">
|
||
<strong>Wo Tags stark sind — als Filter:</strong> „nur <span style="color:#a0522d;font-weight:700">Krieg</span>" verengt den <i>gesamten</i> Zeitstrahl über alle 50 Jahre auf Kriegsbriefe — die Zeit-Achse bleibt erhalten. Genau das kann die Themen-Seite nicht. Tag-Filter ist additiv, nicht duplikativ.
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<!-- ══ RECOMMENDATION ══ -->
|
||
<div class="sh"><h2>6 · Empfehlung & nächster Schritt</h2></div>
|
||
<div class="rec">
|
||
<h3>Konzept A als Basis, mit der Spur-Klarheit von B und der Schiene von C als Stufe 2.</h3>
|
||
<p><b>A (Lebensfaden)</b> trifft die Differenzierungs-Frage am direktesten: es sieht null wie eine Suchliste aus und macht die verwobene Erzählung zur Hauptfigur. Die <b>drei benannten Spuren aus B</b> sind die beste Antwort, falls Nutzer-Tests zeigen, dass „welche Ebene ist das?" unklar bleibt — sie lassen sich als Desktop-Enhancement in A einziehen. Die <b>Dichte-Schiene aus C</b> ist die richtige Lösung für „50 Jahre navigieren", aber Stufe 2 — sie löst Navigation, nicht Differenzierung, und kann nachgerüstet werden.</p>
|
||
<p style="margin-top:12px">Für alle gilt: <b>Brief-Cluster statt Brief-Listen</b> sind der schärfste Unterschied zur Suche — ein Jahr mit 24 Feldpostbriefen wird zu <i>einer</i> erzählenden Zeile („24 Feldpost, Westfront"), nicht zu 24 Treffern. Genau hier hört der Zeitstrahl auf, eine sortierte Suche zu sein. Nächster Schritt: dieses Konzept für die <b>Person-Detail-„Lebensweg"</b>-Ansicht (gefilterte Variante) durchdeklinieren.</p>
|
||
</div>
|
||
|
||
|
||
<!-- ══ DESIGN TOKENS ══ -->
|
||
<div class="sh"><h2>7 · Design-Tokens (echte, ausgelieferte Werte)</h2><p>Direkt aus <code>frontend/src/routes/layout.css</code>. Keine Hardcodes in den Komponenten — nur diese Tokens.</p></div>
|
||
<div class="impl-ref">
|
||
<table>
|
||
<tr><th>Rolle</th><th>Token / Utility</th><th>Wert</th><th>Einsatz im Zeitstrahl</th></tr>
|
||
<tr><td>Spine / Knoten / Header</td><td><code>brand-navy</code> · <code>--palette-navy</code></td><td><span class="sw" style="background:#012851"></span>#012851</td><td>Achsen-Spine, Lebensereignis-Knoten, Jahres-Header, Titel</td></tr>
|
||
<tr><td>Akzent / Brief-Punkt</td><td><code>brand-mint</code> · <code>--palette-mint</code></td><td><span class="sw" style="background:#a1dcd8"></span>#a1dcd8</td><td>Brief-Punkte & -Ringe, kuratierte Ereignis-Akzente, Dark-Mode-Auswahl</td></tr>
|
||
<tr><td>Historisch / Welt</td><td><code>tag-slate</code> (Vorschlag)</td><td><span class="sw" style="background:#607080"></span>#607080</td><td>Welt-Ereignis-Bänder & Glyphe ◍ — gedämpft, im Hintergrund</td></tr>
|
||
<tr><td>Tag-Chip-Farben</td><td><code>--c-tag-*</code> (nur Wurzel-Tag)</td><td><span class="sw" style="background:#5a8a6a"></span><span class="sw" style="background:#a0522d"></span><span class="sw" style="background:#c17a00"></span><span class="sw" style="background:#7a4f9a"></span><span class="sw" style="background:#607080"></span></td><td>sage · sienna · amber · violet · slate — Farbe vom Wurzel-Tag, Kinder erben; Punkt + Label (nie Farbe allein)</td></tr>
|
||
<tr><td>Seiten-Hintergrund</td><td><code>bg-canvas</code> · <code>--c-canvas</code></td><td><span class="sw" style="background:#f0efe9"></span>#f0efe9</td><td>Zeitstrahl-Seitenfläche</td></tr>
|
||
<tr><td>Karten-Fläche</td><td><code>bg-surface</code> · <code>--c-surface</code></td><td><span class="sw" style="background:#ffffff"></span>#ffffff</td><td>Brief-Karten, Jahres-Bänder</td></tr>
|
||
<tr><td>Gedämpfte Fläche</td><td><code>bg-muted</code> · <code>--c-muted</code></td><td><span class="sw" style="background:#f5f4ef"></span>#f5f4ef</td><td>Welt-Spur-Hintergrund (Konzept B)</td></tr>
|
||
<tr><td>Linien</td><td><code>border-line</code> · <code>--c-line</code></td><td><span class="sw" style="background:#e4e2d7"></span>#e4e2d7</td><td>Karten-Rahmen, Spur-Trenner</td></tr>
|
||
<tr><td>Text primär</td><td><code>text-ink</code> · <code>--c-ink</code></td><td><span class="sw" style="background:#012851"></span>#012851</td><td>Titel, Namen (= Navy)</td></tr>
|
||
<tr><td>Text sekundär</td><td><code>text-ink-3</code> · <code>--c-ink-3</code></td><td><span class="sw" style="background:#6b7280"></span>#6b7280</td><td>Meta-Zeilen (4,8:1 auf weiß — AA ✓)</td></tr>
|
||
<tr><td>Schrift — Namen/Titel</td><td><code>font-serif</code> (Tinos)</td><td>—</td><td>Personennamen, Ereignis- & Jahres-Titel</td></tr>
|
||
<tr><td>Schrift — Meta/Chrome</td><td><code>font-sans</code> (Montserrat)</td><td>—</td><td>Labels, Spur-Überschriften, Badges</td></tr>
|
||
<tr><td>Lebensdaten-Glyphen</td><td><code>personLifeDates.ts</code></td><td>* † ⚭</td><td>Geburt <code>*</code> · Tod <code>†</code> · Heirat <code>⚭</code> — konsistent mit Personenkarten</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- ══ IMPLEMENTATION REFERENCE ══ -->
|
||
<div class="sh"><h2>8 · Implementierungs-Referenz</h2><p>Komponenten-Plan aus der Design-Basis. Neuer Domain-Ordner <code>frontend/src/lib/timeline/</code>; Route <code>/zeitstrahl</code>.</p></div>
|
||
<div class="impl-ref">
|
||
<table>
|
||
<tr><th>Bereich</th><th>Komponente / Datei</th><th>Verantwortung</th></tr>
|
||
<tr><td>Orchestrator</td><td><code>TimelineView.svelte</code></td><td>Lädt <code>GET /api/timeline</code>; optionaler <code>personId</code>-Prop treibt auch die Lebensweg-Ansicht</td></tr>
|
||
<tr><td>Jahres-Band</td><td><code>YearBand.svelte</code></td><td>Ein Jahres-Abschnitt + seine Einträge (Spine-Knoten in A, Spuren-Box in B)</td></tr>
|
||
<tr><td>Ereignis-Karte</td><td><code>EventCard.svelte</code></td><td>PERSONAL / HISTORICAL / abgeleitet, präzisions-bewusstes Datumslabel</td></tr>
|
||
<tr><td>Brief-Karte</td><td><code>LetterCard.svelte</code></td><td>Kompakte Zeile Absender → Empfänger, Link zu <code>/documents/[id]</code>; Cluster-Variante; Wurzel-Tag-Farbchip</td></tr>
|
||
<tr><td>Lose-Brief-Verdichtung</td><td><code>YearLetterStrip.svelte</code></td><td>Adaptiver Jahres-Strip mit Monats-Sparkline ab Schwellwert; nutzt <code>MonthBucket</code> / <code>aggregateToYears</code> aus <code>lib/document/timeline.ts</code></td></tr>
|
||
<tr><td>Kurator-Editor</td><td><code>/zeitstrahl/events/new · [id]/edit</code></td><td>Ereignis anlegen/bearbeiten; Personen- + Dokument-Mehrfach-Picker (Bulk-Linking); <code>WRITE_ALL</code>, Form-Actions</td></tr>
|
||
<tr><td>Quick-Add (Dokument)</td><td><code>DocumentTimelineEventPicker.svelte</code></td><td>Auf <code>/documents/[id]</code>: bestehendes Ereignis wählen oder neu anlegen; verlinkt einen Brief in <code>TimelineEvent.documents</code></td></tr>
|
||
<tr><td>Datums-Helfer</td><td><code>dateLabel.ts</code></td><td>DatePrecision → deutsches Label; wiederverwendet <code>lib/document/timeline.ts</code>-Helfer wo sinnvoll</td></tr>
|
||
<tr><td>Dichte-Schiene (C)</td><td><code>TimelineMinimap.svelte</code></td><td>Stufe 2 — vertikale Dichte + Ereignis-Marker + Sprung-Navigation</td></tr>
|
||
<tr><td>Daten-API</td><td><code>GET /api/timeline</code></td><td>Verschmilzt Ereignisse + abgeleitete Personen-Ereignisse + Briefe in <code>TimelineDTO</code> (Jahres-Eimer + Ohne-Datum)</td></tr>
|
||
<tr><td>A11y</td><td>—</td><td>Spine = <code><ol></code>; Knoten erreichbar; ◍/✉/* nie nur als Farbe — immer Glyphe+Text; 44px-Tap-Ziele; <code>prefers-reduced-motion</code>; axe in Light & Dark</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|