528 lines
61 KiB
HTML
528 lines
61 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Timeline Date-Range Filter · Spec #385 · Familienarchiv</title>
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1A1A;line-height:1.5}
|
||
.page{max-width:1360px;margin:0 auto;padding:48px 32px}
|
||
|
||
.mh{padding-bottom:24px;border-bottom:3px solid #012851;margin-bottom:48px}
|
||
.mh h1{font-size:22px;font-weight:900;color:#012851;letter-spacing:-.4px}
|
||
.mh p{font-size:12.5px;color:#555;max-width:680px;line-height:1.7;margin-top:6px}
|
||
.mh .byline{font-size:9px;color:#AAA;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-top:8px}
|
||
|
||
.sh{margin:56px 0 28px;padding-bottom:12px;border-bottom:2px solid #E0DDD6}
|
||
.sh h2{font-size:16px;font-weight:900;color:#012851}
|
||
.sh p{font-size:12px;color:#666;margin-top:4px;max-width:700px;line-height:1.6}
|
||
|
||
.grid{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:32px;align-items:flex-start}
|
||
.col{display:flex;flex-direction:column;gap:6px}
|
||
.lbl{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#888;display:flex;align-items:center;gap:5px;margin-bottom:4px}
|
||
.tag{background:#E4E0DA;color:#666;padding:1px 5px;border-radius:2px;font-size:7px;font-weight:700}
|
||
.cap{font-size:9.5px;color:#999;font-style:italic;line-height:1.55;max-width:460px;margin-top:4px}
|
||
|
||
.chrome{background:#F0EFE9;border:1.5px solid #C4C0BA;border-radius:7px;overflow:hidden;box-shadow:0 3px 14px rgba(0,0,0,.09)}
|
||
.chrome.dk{background:#060C12;border-color:#0A1520}
|
||
.bar{height:20px;background:#E0DDD6;border-bottom:1px solid #C4C0BA;display:flex;align-items:center;padding:0 7px;gap:3px}
|
||
.chrome.dk .bar{background:#0A1218;border-bottom-color:#0A1520}
|
||
.dot{width:5px;height:5px;border-radius:50%;background:#BDB8B1}
|
||
.chrome.dk .dot{background:#1A2A3A}
|
||
.url{flex:1;height:8px;background:#CCC8C2;border-radius:5px;margin-left:4px}
|
||
.chrome.dk .url{background:#1A2A3A}
|
||
|
||
.nav{height:32px;background:#012851;display:flex;align-items:center;padding:0 12px;gap:8px;flex-shrink:0}
|
||
.chrome.dk .nav{background:#060C12}
|
||
.nav-logo{font-size:7px;font-weight:900;color:#fff;letter-spacing:.8px;border-bottom:2px solid #A1DCD8;padding-bottom:1px}
|
||
.nav-link{font-size:5.5px;color:rgba(255,255,255,.4);font-weight:700;text-transform:uppercase}
|
||
.nav-link.on{color:#fff;border-bottom:1.5px solid #A1DCD8;padding-bottom:1px}
|
||
.nav-r{margin-left:auto;display:flex;gap:5px;align-items:center}
|
||
.nav-av{width:16px;height:16px;background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:5px;font-weight:800;color:rgba(255,255,255,.5)}
|
||
|
||
.page-body{background:#E8E7E2;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
|
||
.page-body.dk{background:#090F16}
|
||
|
||
.sfb{background:#fff;border:1.5px solid #D8D6CF;border-radius:3px;padding:6px 8px;display:flex;align-items:center;gap:5px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
|
||
.sfb.dk{background:#0A1218;border-color:#1E2D3D}
|
||
.sfb-input{flex:1;height:18px;background:#F5F4EF;border:1px solid #D8D6CF;border-radius:2px;padding:0 5px;font-size:5.5px;color:#999;display:flex;align-items:center;gap:3px}
|
||
.sfb-input.dk{background:#060C12;border-color:#1E2D3D;color:#3E5065}
|
||
.sfb-btn{height:18px;padding:0 6px;border:1.5px solid #D8D6CF;border-radius:2px;font-size:5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#666;display:flex;align-items:center;gap:2px;white-space:nowrap;background:#F5F4EF}
|
||
.sfb-btn.dk{border-color:#1E2D3D;color:#4E6070;background:#0A1218}
|
||
.sfb-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:#999}
|
||
|
||
.doc-group{background:#fff;border:1.5px solid #D8D6CF;border-radius:3px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06)}
|
||
.doc-group.dk{background:#0A1218;border-color:#1E2D3D}
|
||
.doc-group-hdr{background:#F5F4EF;border-bottom:1px solid #E0DDD6;padding:4px 8px;font-size:5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888}
|
||
.doc-group-hdr.dk{background:#060C12;border-bottom-color:#1E2D3D;color:#3E5065}
|
||
.doc-row{display:flex;align-items:flex-start;gap:6px;padding:6px 8px;border-bottom:1px solid #F0EEE8}
|
||
.doc-row.dk{border-bottom-color:#1A2830}
|
||
.doc-row:last-child{border-bottom:none}
|
||
.doc-thumb{width:20px;height:26px;background:#E8E6DF;border-radius:1px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
|
||
.doc-thumb.dk{background:#162230}
|
||
.doc-content{flex:1;min-width:0}
|
||
.doc-title{font-size:6px;font-weight:700;color:#1A1A1A;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.doc-title.dk{color:#C8D8E8}
|
||
.doc-meta{font-size:5px;color:#999}
|
||
.doc-meta.dk{color:#3E5065}
|
||
.doc-right{width:55px;flex-shrink:0;font-size:5px;color:#888;text-align:right;line-height:1.6}
|
||
.doc-right.dk{color:#3E5065}
|
||
|
||
.rules{background:#fff;border:1px solid #E0DDD6;border-radius:6px;overflow:hidden;margin-top:28px}
|
||
.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:8px 12px;border-bottom:1px solid #F0EEE8;vertical-align:top;line-height:1.55}
|
||
.rules tr:last-child td{border-bottom:none}
|
||
.rules td:first-child{font-size:9px;font-weight:700;color:#012851;white-space:nowrap;width:150px}
|
||
.rules td code{font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px;color:#555}
|
||
|
||
.impl-ref{background:#fff;border:1px solid #E0DDD6;border-radius:6px;overflow:hidden;margin-top:28px}
|
||
.impl-ref table{width:100%;border-collapse:collapse}
|
||
.impl-ref th{background:#012851;color:#fff;padding:7px 12px;text-align:left;font-size:8px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
|
||
.impl-ref td{padding:7px 12px;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-size:9px;font-weight:700;color:#012851;white-space:nowrap;width:170px}
|
||
.impl-ref td code{font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px;font-family:'Courier New',monospace;color:#333}
|
||
|
||
.callout{padding:12px 16px;border-radius:4px;font-size:11.5px;line-height:1.6;margin-bottom:16px}
|
||
.callout.navy{background:rgba(1,40,81,.06);border-left:3px solid #012851;color:#333}
|
||
.callout.orange{background:#FEF3E2;border-left:3px solid #C26A00;color:#333}
|
||
.callout.green{background:#EAF5EA;border-left:3px solid #2E6E39;color:#333}
|
||
.callout strong{font-weight:700}
|
||
|
||
hr{border:none;border-top:2px dashed #C8C4BE;margin:60px 0}
|
||
|
||
/* Timeline widget styles for mockup */
|
||
.tl-widget{background:#fff;border:1.5px solid #D8D6CF;border-radius:3px;padding:6px 8px 4px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
|
||
.tl-widget.dk{background:#0A1218;border-color:#1E2D3D}
|
||
.tl-bars{height:38px;display:flex;align-items:flex-end;gap:1px;position:relative}
|
||
.tl-bar{flex:1;border-radius:1px 1px 0 0;min-height:1px;transition:background .15s}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
MASTHEAD
|
||
══════════════════════════════════════════ -->
|
||
<div class="mh">
|
||
<h1>Timeline Date-Range Filter · Spec #385</h1>
|
||
<p>Horizontal bar-chart widget placed between the SearchFilterBar and DocumentList on <code>/documents</code>. Bar height per month reflects document density across the archive. Drag or click to select a date range; the document list filters to that period. Hidden when calendar view is active.</p>
|
||
<div class="byline">Familienarchiv · 2026-05-03 · Leonie Voss, UX Lead · Issue #385</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
SECTION 1 — ANATOMY
|
||
══════════════════════════════════════════ -->
|
||
<div class="sh"><h2>1 · Anatomy</h2><p>Seven named zones. Every implementation decision maps back to one of these.</p></div>
|
||
|
||
<div style="background:#fff;border:1.5px solid #E0DDD6;border-radius:6px;overflow:hidden;padding:24px;margin-bottom:24px">
|
||
<div style="position:relative;background:#F9F8F5;border:1.5px solid #D8D6CF;border-radius:4px;padding:10px 12px 6px">
|
||
<!-- Row 1: label + total -->
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
|
||
<span style="font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888">① Widget-Header (Label + Gesamtanzahl)</span>
|
||
<span style="font-size:9px;color:#AAA;font-style:italic">② Gesamtanzahl-Badge</span>
|
||
</div>
|
||
<!-- Bar chart -->
|
||
<div style="height:48px;display:flex;align-items:flex-end;gap:1px;position:relative">
|
||
<!-- annotation arrows pointing to parts -->
|
||
<div style="position:absolute;top:-18px;left:40%;font-size:8px;color:#C26A00;font-weight:700">③ Bar (1 Monat)</div>
|
||
<div style="position:absolute;top:-18px;left:62%;font-size:8px;color:#012851;font-weight:700">④ Auswahl-Bereich (navy)</div>
|
||
<!-- bars: unselected mint -->
|
||
<div style="flex:1;height:13%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:17%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:8%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:13%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:21%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:17%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:25%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:17%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:21%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:25%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:33%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:38%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<!-- selected range: navy -->
|
||
<div style="flex:1;height:50%;background:#012851;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:42%;background:#012851;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:75%;background:#012851;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:100%;background:#012851;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:92%;background:#012851;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:83%;background:#012851;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:67%;background:#012851;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:58%;background:#012851;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:46%;background:#012851;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:38%;background:#012851;border-radius:1px 1px 0 0"></div>
|
||
<!-- unselected again -->
|
||
<div style="flex:1;height:42%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:33%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:29%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:25%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:21%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:25%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:21%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:17%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:21%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:17%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:13%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:17%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:17%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:13%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:17%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:13%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:21%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:33%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:46%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:58%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:67%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:58%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:50%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:42%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:29%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:21%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:17%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:13%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
<div style="flex:1;height:8%;background:#D4EDE9;border-radius:1px 1px 0 0"></div>
|
||
</div>
|
||
<!-- Baseline + year labels -->
|
||
<div style="height:1px;background:#E0DDD6;margin-bottom:2px"></div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:2px">
|
||
<span style="font-size:7px;color:#BBB">1900</span>
|
||
<span style="font-size:7px;color:#BBB">1910</span>
|
||
<span style="font-size:7px;color:#BBB">1920</span>
|
||
<span style="font-size:7px;color:#BBB">1930</span>
|
||
<span style="font-size:7px;color:#BBB">1940</span>
|
||
<span style="font-size:7px;color:#BBB">1950</span>
|
||
</div>
|
||
<!-- Handle annotations -->
|
||
<div style="display:flex;justify-content:space-between;font-size:8px;color:#666;margin-top:6px">
|
||
<span style="color:#C26A00;font-weight:700">⑤ Linker Zieh-Griff (Start)</span>
|
||
<span style="color:#C26A00;font-weight:700">⑥ Rechter Zieh-Griff (Ende)</span>
|
||
<span style="color:#2E6E39;font-weight:700">⑦ Löschen-Button (×)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px">
|
||
<div style="font-size:11px;color:#444;line-height:1.6"><span style="font-weight:700;color:#012851">① Widget-Header</span> — Label "Zeitachse" + Gesamtanzahl aller Dokumente im Archiv.</div>
|
||
<div style="font-size:11px;color:#444;line-height:1.6"><span style="font-weight:700;color:#012851">③ Bar</span> — Ein Balken pro Monat. Höhe proportional zur Dokumentenanzahl dieses Monats. Max-Höhe = Monat mit den meisten Dokumenten.</div>
|
||
<div style="font-size:11px;color:#444;line-height:1.6"><span style="font-weight:700;color:#012851">④–⑥ Auswahl</span> — Ausgewählte Balken werden navy (#012851). Zieh-Griffe definieren Start/Ende. ⑦ Löschen-Button erscheint sobald eine Auswahl aktiv ist.</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
SECTION 2 — DESIGN TOKENS
|
||
══════════════════════════════════════════ -->
|
||
<div class="sh"><h2>2 · Design-Tokens</h2><p>Das Widget verwendet ausschließlich diese Tokens — keine Hard-coded-Werte in der Komponente.</p></div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:40px">
|
||
<div style="background:#fff;border:1px solid #E0DDD6;border-radius:6px;overflow:hidden">
|
||
<div style="background:#F4F2EC;padding:8px 14px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888;border-bottom:1px solid #E0DDD6">Light theme</div>
|
||
<table style="width:100%;border-collapse:collapse;font-size:11px">
|
||
<tr style="border-bottom:1px solid #F0EEE8"><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700;width:170px">bg-surface</td><td style="padding:6px 14px"><span style="display:inline-block;width:12px;height:12px;background:#fff;border:1px solid #DDD;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#FFFFFF — Widget-Hintergrund</td></tr>
|
||
<tr style="border-bottom:1px solid #F0EEE8"><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700">border-line</td><td style="padding:6px 14px"><span style="display:inline-block;width:12px;height:12px;background:#D8D6CF;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#D8D6CF — Widget-Rahmen</td></tr>
|
||
<tr style="border-bottom:1px solid #F0EEE8"><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700">bar-idle</td><td style="padding:6px 14px"><span style="display:inline-block;width:12px;height:12px;background:#D4EDE9;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#D4EDE9 — Balken ohne Auswahl (helles Mint)</td></tr>
|
||
<tr style="border-bottom:1px solid #F0EEE8"><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700">bar-hover</td><td style="padding:6px 14px"><span style="display:inline-block;width:12px;height:12px;background:#A1DCD8;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#A1DCD8 — Balken on hover (brand-mint)</td></tr>
|
||
<tr style="border-bottom:1px solid #F0EEE8"><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700">bar-selected</td><td style="padding:6px 14px"><span style="display:inline-block;width:12px;height:12px;background:#012851;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#012851 — Balken im Auswahl-Bereich (navy)</td></tr>
|
||
<tr style="border-bottom:1px solid #F0EEE8"><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700">bar-outside</td><td style="padding:6px 14px"><span style="display:inline-block;width:12px;height:12px;background:#E8E6E0;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#E8E6E0 — Balken außerhalb der Auswahl (gedimmt)</td></tr>
|
||
<tr style="border-bottom:1px solid #F0EEE8"><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700">handle</td><td style="padding:6px 14px"><span style="display:inline-block;width:12px;height:12px;background:#012851;border-radius:50%;vertical-align:middle;margin-right:6px"></span>#012851 mit weißem Kern — Zieh-Griff</td></tr>
|
||
<tr><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700">tooltip-bg</td><td style="padding:6px 14px"><span style="display:inline-block;width:12px;height:12px;background:#1A1A1A;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#1A1A1A — Tooltip-Hintergrund</td></tr>
|
||
</table>
|
||
</div>
|
||
<div style="background:#0F1923;border:1px solid #1E2D3D;border-radius:6px;overflow:hidden">
|
||
<div style="background:#0A1218;padding:8px 14px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#4E6070;border-bottom:1px solid #1E2D3D">Dark theme</div>
|
||
<table style="width:100%;border-collapse:collapse;font-size:11px">
|
||
<tr style="border-bottom:1px solid #1A2830"><td style="padding:6px 14px;color:#4E6070;font-size:9px;font-weight:700;width:170px">bg-surface</td><td style="padding:6px 14px;color:#8AAABB"><span style="display:inline-block;width:12px;height:12px;background:#0A1218;border:1px solid #1E2D3D;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#0A1218 — Widget-Hintergrund</td></tr>
|
||
<tr style="border-bottom:1px solid #1A2830"><td style="padding:6px 14px;color:#4E6070;font-size:9px;font-weight:700">bar-idle</td><td style="padding:6px 14px;color:#8AAABB"><span style="display:inline-block;width:12px;height:12px;background:#0E2535;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#0E2535 — Balken ohne Auswahl (dunkles Teal)</td></tr>
|
||
<tr style="border-bottom:1px solid #1A2830"><td style="padding:6px 14px;color:#4E6070;font-size:9px;font-weight:700">bar-hover</td><td style="padding:6px 14px;color:#8AAABB"><span style="display:inline-block;width:12px;height:12px;background:#1E4060;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#1E4060 — hover</td></tr>
|
||
<tr style="border-bottom:1px solid #1A2830"><td style="padding:6px 14px;color:#4E6070;font-size:9px;font-weight:700">bar-selected</td><td style="padding:6px 14px;color:#8AAABB"><span style="display:inline-block;width:12px;height:12px;background:#A1DCD8;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#A1DCD8 — Auswahl in Dark mode (Mint, invertiert)</td></tr>
|
||
<tr style="border-bottom:1px solid #1A2830"><td style="padding:6px 14px;color:#4E6070;font-size:9px;font-weight:700">bar-outside</td><td style="padding:6px 14px;color:#8AAABB"><span style="display:inline-block;width:12px;height:12px;background:#0A1218;border:1px solid #1E2D3D;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#0A1218 — außerhalb, kaum sichtbar</td></tr>
|
||
<tr><td style="padding:6px 14px;color:#4E6070;font-size:9px;font-weight:700">handle</td><td style="padding:6px 14px;color:#8AAABB"><span style="display:inline-block;width:12px;height:12px;background:#A1DCD8;border-radius:50%;vertical-align:middle;margin-right:6px"></span>#A1DCD8 mit dunklem Kern</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
SECTION 3 — STATES
|
||
══════════════════════════════════════════ -->
|
||
<div class="sh"><h2>3 · Zustandsmodell</h2><p>Vier Zustände. Gleiche Markup-Struktur — nur CSS-Klassen und ARIA-Attribute ändern sich.</p></div>
|
||
|
||
<div class="grid">
|
||
|
||
<!-- STATE A: IDLE -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">State A</span>Idle — keine Auswahl</div>
|
||
<div class="chrome" style="width:480px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav">
|
||
<div class="nav-logo">Familienarchiv</div>
|
||
<div class="nav-link" style="margin-left:8px">Dokumente</div>
|
||
<div class="nav-r"><div class="nav-av">KR</div></div>
|
||
</div>
|
||
<div class="page-body">
|
||
<!-- SearchFilterBar -->
|
||
<div class="sfb">
|
||
<div class="sfb-input"><span style="opacity:.5">Dokumente durchsuchen …</span></div>
|
||
<div class="sfb-btn">Sortierung</div>
|
||
<div class="sfb-btn" style="gap:2px">
|
||
<span style="font-size:6px">▼</span> Filter
|
||
</div>
|
||
<!-- View toggle: List active -->
|
||
<div style="display:flex;gap:1px;border:1.5px solid #D8D6CF;border-radius:2px;overflow:hidden">
|
||
<div style="padding:3px 6px;background:#012851;display:flex;align-items:center" title="Listenansicht (aktiv)">
|
||
<svg width="9" height="9" viewBox="0 0 16 16" fill="#A1DCD8"><rect x="0" y="0" width="16" height="3"/><rect x="0" y="6" width="16" height="3"/><rect x="0" y="12" width="16" height="3"/></svg>
|
||
</div>
|
||
<div style="padding:3px 6px;background:#F5F4EF;display:flex;align-items:center" title="Kalenderansicht">
|
||
<svg width="9" height="9" viewBox="0 0 16 16" fill="#888"><rect x="1" y="2" width="14" height="13" rx="1" fill="none" stroke="#888" stroke-width="2"/><line x1="5" y1="0" x2="5" y2="5" stroke="#888" stroke-width="2"/><line x1="11" y1="0" x2="11" y2="5" stroke="#888" stroke-width="2"/><line x1="1" y1="7" x2="15" y2="7" stroke="#888" stroke-width="1.5"/></svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Timeline widget: IDLE -->
|
||
<div class="tl-widget">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
|
||
<span style="font-size:5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#999">Zeitachse</span>
|
||
<span style="font-size:5px;color:#BBB">412 Dokumente · 1900–1950</span>
|
||
</div>
|
||
<div class="tl-bars">
|
||
<div class="tl-bar" style="height:13%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:8%;background:#D4EDE9"></div><div class="tl-bar" style="height:13%;background:#D4EDE9"></div><div class="tl-bar" style="height:21%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:25%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:21%;background:#D4EDE9"></div><div class="tl-bar" style="height:25%;background:#D4EDE9"></div><div class="tl-bar" style="height:33%;background:#D4EDE9"></div><div class="tl-bar" style="height:38%;background:#D4EDE9"></div><div class="tl-bar" style="height:50%;background:#D4EDE9"></div><div class="tl-bar" style="height:42%;background:#D4EDE9"></div><div class="tl-bar" style="height:75%;background:#D4EDE9"></div><div class="tl-bar" style="height:100%;background:#D4EDE9"></div><div class="tl-bar" style="height:92%;background:#D4EDE9"></div><div class="tl-bar" style="height:83%;background:#D4EDE9"></div><div class="tl-bar" style="height:67%;background:#D4EDE9"></div><div class="tl-bar" style="height:58%;background:#D4EDE9"></div><div class="tl-bar" style="height:46%;background:#D4EDE9"></div><div class="tl-bar" style="height:38%;background:#D4EDE9"></div><div class="tl-bar" style="height:42%;background:#D4EDE9"></div><div class="tl-bar" style="height:33%;background:#D4EDE9"></div><div class="tl-bar" style="height:29%;background:#D4EDE9"></div><div class="tl-bar" style="height:25%;background:#D4EDE9"></div><div class="tl-bar" style="height:21%;background:#D4EDE9"></div><div class="tl-bar" style="height:25%;background:#D4EDE9"></div><div class="tl-bar" style="height:21%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:21%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:13%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:13%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:13%;background:#D4EDE9"></div><div class="tl-bar" style="height:21%;background:#D4EDE9"></div><div class="tl-bar" style="height:33%;background:#D4EDE9"></div><div class="tl-bar" style="height:46%;background:#D4EDE9"></div><div class="tl-bar" style="height:58%;background:#D4EDE9"></div><div class="tl-bar" style="height:67%;background:#D4EDE9"></div><div class="tl-bar" style="height:58%;background:#D4EDE9"></div><div class="tl-bar" style="height:50%;background:#D4EDE9"></div><div class="tl-bar" style="height:42%;background:#D4EDE9"></div><div class="tl-bar" style="height:29%;background:#D4EDE9"></div><div class="tl-bar" style="height:21%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:13%;background:#D4EDE9"></div><div class="tl-bar" style="height:8%;background:#D4EDE9"></div>
|
||
</div>
|
||
<div style="height:1px;background:#E8E6E0;margin-bottom:2px"></div>
|
||
<div style="display:flex;justify-content:space-between"><span style="font-size:4.5px;color:#CCC">1900</span><span style="font-size:4.5px;color:#CCC">1910</span><span style="font-size:4.5px;color:#CCC">1920</span><span style="font-size:4.5px;color:#CCC">1930</span><span style="font-size:4.5px;color:#CCC">1940</span><span style="font-size:4.5px;color:#CCC">1950</span></div>
|
||
</div>
|
||
<!-- Document list preview -->
|
||
<div class="doc-group">
|
||
<div class="doc-group-hdr">1915 · 24 Dokumente</div>
|
||
<div class="doc-row"><div class="doc-thumb"></div><div class="doc-content"><div class="doc-title">Brief über die Lage an der Westfront</div><div class="doc-meta">Karl Raddatz → Elfriede Raddatz</div></div><div class="doc-right">März 1915</div></div>
|
||
<div class="doc-row"><div class="doc-thumb"></div><div class="doc-content"><div class="doc-title">Feldpost aus Verdun</div><div class="doc-meta">Hans Raddatz → Karl Raddatz</div></div><div class="doc-right">Juli 1915</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cap">Idle: Alle Balken in hellem Mint. Kein Griff, kein Löschen-Button. Cursor: <code>crosshair</code> über den Balken.</div>
|
||
</div>
|
||
|
||
<!-- STATE B: HOVER TOOLTIP -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">State B</span>Hover — Tooltip</div>
|
||
<div class="chrome" style="width:300px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav"><div class="nav-logo">Familienarchiv</div><div class="nav-r"><div class="nav-av">KR</div></div></div>
|
||
<div class="page-body">
|
||
<div class="tl-widget" style="position:relative">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
|
||
<span style="font-size:5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#999">Zeitachse</span>
|
||
<span style="font-size:5px;color:#BBB">412 Dokumente · 1900–1950</span>
|
||
</div>
|
||
<div class="tl-bars" style="position:relative">
|
||
<div class="tl-bar" style="height:13%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:8%;background:#D4EDE9"></div><div class="tl-bar" style="height:13%;background:#D4EDE9"></div><div class="tl-bar" style="height:21%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:25%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:21%;background:#D4EDE9"></div><div class="tl-bar" style="height:25%;background:#D4EDE9"></div><div class="tl-bar" style="height:33%;background:#D4EDE9"></div><div class="tl-bar" style="height:38%;background:#D4EDE9"></div><div class="tl-bar" style="height:50%;background:#D4EDE9"></div><div class="tl-bar" style="height:42%;background:#D4EDE9"></div><div class="tl-bar" style="height:75%;background:#D4EDE9"></div>
|
||
<!-- HOVERED bar (1915 Aug = position 16) -->
|
||
<div class="tl-bar" style="height:100%;background:#A1DCD8;position:relative">
|
||
<!-- tooltip -->
|
||
<div style="position:absolute;bottom:110%;left:50%;transform:translateX(-50%);background:#1A1A1A;color:#fff;font-size:5px;font-weight:700;padding:3px 5px;border-radius:2px;white-space:nowrap;z-index:10">August 1915 · 24 Dok.</div>
|
||
</div>
|
||
<div class="tl-bar" style="height:92%;background:#D4EDE9"></div><div class="tl-bar" style="height:83%;background:#D4EDE9"></div><div class="tl-bar" style="height:67%;background:#D4EDE9"></div><div class="tl-bar" style="height:58%;background:#D4EDE9"></div><div class="tl-bar" style="height:46%;background:#D4EDE9"></div><div class="tl-bar" style="height:38%;background:#D4EDE9"></div><div class="tl-bar" style="height:42%;background:#D4EDE9"></div><div class="tl-bar" style="height:33%;background:#D4EDE9"></div><div class="tl-bar" style="height:29%;background:#D4EDE9"></div><div class="tl-bar" style="height:25%;background:#D4EDE9"></div><div class="tl-bar" style="height:21%;background:#D4EDE9"></div><div class="tl-bar" style="height:25%;background:#D4EDE9"></div><div class="tl-bar" style="height:21%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:21%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:13%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:13%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:13%;background:#D4EDE9"></div><div class="tl-bar" style="height:21%;background:#D4EDE9"></div><div class="tl-bar" style="height:33%;background:#D4EDE9"></div><div class="tl-bar" style="height:46%;background:#D4EDE9"></div><div class="tl-bar" style="height:58%;background:#D4EDE9"></div><div class="tl-bar" style="height:67%;background:#D4EDE9"></div><div class="tl-bar" style="height:58%;background:#D4EDE9"></div><div class="tl-bar" style="height:50%;background:#D4EDE9"></div><div class="tl-bar" style="height:42%;background:#D4EDE9"></div><div class="tl-bar" style="height:29%;background:#D4EDE9"></div><div class="tl-bar" style="height:21%;background:#D4EDE9"></div><div class="tl-bar" style="height:17%;background:#D4EDE9"></div><div class="tl-bar" style="height:13%;background:#D4EDE9"></div><div class="tl-bar" style="height:8%;background:#D4EDE9"></div>
|
||
</div>
|
||
<div style="height:1px;background:#E8E6E0;margin-bottom:2px"></div>
|
||
<div style="display:flex;justify-content:space-between"><span style="font-size:4.5px;color:#CCC">1900</span><span style="font-size:4.5px;color:#CCC">1910</span><span style="font-size:4.5px;color:#CCC">1920</span><span style="font-size:4.5px;color:#CCC">1930</span><span style="font-size:4.5px;color:#CCC">1940</span><span style="font-size:4.5px;color:#CCC">1950</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cap">Hover: Balken wechselt zu brand-mint. Tooltip erscheint: „Monat Jahr · N Dok." Cursor: <code>pointer</code>.</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- STATE C: ACTIVE SELECTION -->
|
||
<div class="lbl" style="margin-bottom:8px"><span class="tag">State C</span>Aktive Auswahl — 1914–1920 (Erster Weltkrieg)</div>
|
||
<div class="grid">
|
||
<div class="col">
|
||
<div class="chrome" style="width:640px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav"><div class="nav-logo">Familienarchiv</div><div class="nav-link on" style="margin-left:8px">Dokumente</div><div class="nav-r"><div class="nav-av">KR</div></div></div>
|
||
<div class="page-body">
|
||
<div class="sfb">
|
||
<div class="sfb-input"><span style="opacity:.5">Dokumente durchsuchen …</span></div>
|
||
<div class="sfb-btn">Sortierung</div>
|
||
<div class="sfb-btn">▼ Filter</div>
|
||
<!-- active date badge in filter bar -->
|
||
<div style="display:flex;align-items:center;gap:3px;background:#012851;border-radius:2px;padding:2px 6px">
|
||
<span style="font-size:5px;font-weight:700;color:#A1DCD8">Jan 1914 – Dez 1920</span>
|
||
<span style="font-size:7px;color:#A1DCD8;cursor:pointer;line-height:1" title="Auswahl löschen">×</span>
|
||
</div>
|
||
<div style="display:flex;gap:1px;border:1.5px solid #D8D6CF;border-radius:2px;overflow:hidden">
|
||
<div style="padding:3px 6px;background:#012851"><svg width="9" height="9" viewBox="0 0 16 16" fill="#A1DCD8"><rect x="0" y="0" width="16" height="3"/><rect x="0" y="6" width="16" height="3"/><rect x="0" y="12" width="16" height="3"/></svg></div>
|
||
<div style="padding:3px 6px;background:#F5F4EF"><svg width="9" height="9" viewBox="0 0 16 16" fill="#888"><rect x="1" y="2" width="14" height="13" rx="1" fill="none" stroke="#888" stroke-width="2"/><line x1="5" y1="0" x2="5" y2="5" stroke="#888" stroke-width="2"/><line x1="11" y1="0" x2="11" y2="5" stroke="#888" stroke-width="2"/><line x1="1" y1="7" x2="15" y2="7" stroke="#888" stroke-width="1.5"/></svg></div>
|
||
</div>
|
||
</div>
|
||
<!-- Timeline: active selection -->
|
||
<div class="tl-widget" style="position:relative">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
|
||
<span style="font-size:5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#999">Zeitachse</span>
|
||
<span style="font-size:5px;color:#012851;font-weight:700">187 Dokumente · Jan 1914 – Dez 1920</span>
|
||
</div>
|
||
<div class="tl-bars" style="position:relative">
|
||
<!-- 1900–1913: dimmed/outside -->
|
||
<div class="tl-bar" style="height:13%;background:#E8E6E0"></div><div class="tl-bar" style="height:17%;background:#E8E6E0"></div><div class="tl-bar" style="height:8%;background:#E8E6E0"></div><div class="tl-bar" style="height:13%;background:#E8E6E0"></div><div class="tl-bar" style="height:21%;background:#E8E6E0"></div><div class="tl-bar" style="height:17%;background:#E8E6E0"></div><div class="tl-bar" style="height:25%;background:#E8E6E0"></div><div class="tl-bar" style="height:17%;background:#E8E6E0"></div><div class="tl-bar" style="height:21%;background:#E8E6E0"></div><div class="tl-bar" style="height:25%;background:#E8E6E0"></div><div class="tl-bar" style="height:33%;background:#E8E6E0"></div><div class="tl-bar" style="height:38%;background:#E8E6E0"></div><div class="tl-bar" style="height:50%;background:#E8E6E0"></div><div class="tl-bar" style="height:42%;background:#E8E6E0"></div>
|
||
<!-- left handle -->
|
||
<div style="position:relative;flex:1;display:flex;align-items:flex-end">
|
||
<div style="width:100%;height:75%;background:#012851;border-radius:1px 1px 0 0"></div>
|
||
<div style="position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:#012851;border:2px solid #fff;box-shadow:0 0 0 1px #012851;cursor:ew-resize;z-index:5"></div>
|
||
</div>
|
||
<!-- 1914–1920: selected navy -->
|
||
<div class="tl-bar" style="height:100%;background:#012851"></div><div class="tl-bar" style="height:92%;background:#012851"></div><div class="tl-bar" style="height:83%;background:#012851"></div><div class="tl-bar" style="height:67%;background:#012851"></div><div class="tl-bar" style="height:58%;background:#012851"></div><div class="tl-bar" style="height:46%;background:#012851"></div><div class="tl-bar" style="height:38%;background:#012851"></div>
|
||
<!-- right handle -->
|
||
<div style="position:relative;flex:1;display:flex;align-items:flex-end">
|
||
<div style="width:100%;height:42%;background:#012851;border-radius:1px 1px 0 0"></div>
|
||
<div style="position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:#012851;border:2px solid #fff;box-shadow:0 0 0 1px #012851;cursor:ew-resize;z-index:5"></div>
|
||
</div>
|
||
<!-- 1921–1950: dimmed -->
|
||
<div class="tl-bar" style="height:33%;background:#E8E6E0"></div><div class="tl-bar" style="height:29%;background:#E8E6E0"></div><div class="tl-bar" style="height:25%;background:#E8E6E0"></div><div class="tl-bar" style="height:21%;background:#E8E6E0"></div><div class="tl-bar" style="height:25%;background:#E8E6E0"></div><div class="tl-bar" style="height:21%;background:#E8E6E0"></div><div class="tl-bar" style="height:17%;background:#E8E6E0"></div><div class="tl-bar" style="height:21%;background:#E8E6E0"></div><div class="tl-bar" style="height:17%;background:#E8E6E0"></div><div class="tl-bar" style="height:13%;background:#E8E6E0"></div><div class="tl-bar" style="height:17%;background:#E8E6E0"></div><div class="tl-bar" style="height:17%;background:#E8E6E0"></div><div class="tl-bar" style="height:13%;background:#E8E6E0"></div><div class="tl-bar" style="height:17%;background:#E8E6E0"></div><div class="tl-bar" style="height:13%;background:#E8E6E0"></div><div class="tl-bar" style="height:21%;background:#E8E6E0"></div><div class="tl-bar" style="height:33%;background:#E8E6E0"></div><div class="tl-bar" style="height:46%;background:#E8E6E0"></div><div class="tl-bar" style="height:58%;background:#E8E6E0"></div><div class="tl-bar" style="height:67%;background:#E8E6E0"></div><div class="tl-bar" style="height:58%;background:#E8E6E0"></div><div class="tl-bar" style="height:50%;background:#E8E6E0"></div><div class="tl-bar" style="height:42%;background:#E8E6E0"></div><div class="tl-bar" style="height:29%;background:#E8E6E0"></div><div class="tl-bar" style="height:21%;background:#E8E6E0"></div><div class="tl-bar" style="height:17%;background:#E8E6E0"></div><div class="tl-bar" style="height:13%;background:#E8E6E0"></div><div class="tl-bar" style="height:8%;background:#E8E6E0"></div>
|
||
</div>
|
||
<div style="height:1px;background:#E8E6E0;margin-bottom:2px"></div>
|
||
<div style="display:flex;justify-content:space-between"><span style="font-size:4.5px;color:#CCC">1900</span><span style="font-size:4.5px;color:#CCC">1910</span><span style="font-size:4.5px;color:#CCC">1920</span><span style="font-size:4.5px;color:#CCC">1930</span><span style="font-size:4.5px;color:#CCC">1940</span><span style="font-size:4.5px;color:#CCC">1950</span></div>
|
||
</div>
|
||
<!-- Filtered doc list -->
|
||
<div class="doc-group">
|
||
<div class="doc-group-hdr">1915 · 24 Dokumente</div>
|
||
<div class="doc-row"><div class="doc-thumb"></div><div class="doc-content"><div class="doc-title">Brief über die Lage an der Westfront</div><div class="doc-meta">Karl Raddatz → Elfriede Raddatz</div></div><div class="doc-right">März 1915</div></div>
|
||
<div class="doc-row"><div class="doc-thumb"></div><div class="doc-content"><div class="doc-title">Feldpost aus Verdun</div><div class="doc-meta">Hans Raddatz → Karl Raddatz</div></div><div class="doc-right">Juli 1915</div></div>
|
||
</div>
|
||
<div class="doc-group">
|
||
<div class="doc-group-hdr">1914 · 18 Dokumente</div>
|
||
<div class="doc-row"><div class="doc-thumb"></div><div class="doc-content"><div class="doc-title">Kriegsausbruch — Brief an die Familie</div><div class="doc-meta">Karl Raddatz → Elfriede Raddatz, Hans Raddatz</div></div><div class="doc-right">Aug 1914</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cap">Aktive Auswahl: Balken im Bereich navy, außerhalb gedimmt. Handles links/rechts ziehbar. Label in SearchFilterBar zeigt „Jan 1914 – Dez 1920". Dokumentenliste zeigt nur Dokumente im gewählten Zeitraum.</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
SECTION 4 — DARK MODE
|
||
══════════════════════════════════════════ -->
|
||
<div class="sh"><h2>4 · Dark Mode</h2><p>Gleiches Verhalten, Farben remappt. Auswahl-Balken wechseln zu Mint (invertiert zu Light mode).</p></div>
|
||
|
||
<div class="grid">
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">Dark · Idle</span></div>
|
||
<div class="chrome dk" style="width:380px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav" style="background:#060C12"><div class="nav-logo">Familienarchiv</div><div class="nav-r"><div class="nav-av">KR</div></div></div>
|
||
<div class="page-body dk">
|
||
<div class="sfb dk"><div class="sfb-input dk"><span>Dokumente durchsuchen …</span></div><div class="sfb-btn dk">▼ Filter</div></div>
|
||
<div class="tl-widget dk">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
|
||
<span style="font-size:5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#3E5065">Zeitachse</span>
|
||
<span style="font-size:5px;color:#2A3A4A">412 Dokumente · 1900–1950</span>
|
||
</div>
|
||
<div class="tl-bars">
|
||
<div class="tl-bar" style="height:13%;background:#0E2535"></div><div class="tl-bar" style="height:17%;background:#0E2535"></div><div class="tl-bar" style="height:8%;background:#0E2535"></div><div class="tl-bar" style="height:13%;background:#0E2535"></div><div class="tl-bar" style="height:21%;background:#0E2535"></div><div class="tl-bar" style="height:17%;background:#0E2535"></div><div class="tl-bar" style="height:25%;background:#0E2535"></div><div class="tl-bar" style="height:17%;background:#0E2535"></div><div class="tl-bar" style="height:21%;background:#0E2535"></div><div class="tl-bar" style="height:25%;background:#0E2535"></div><div class="tl-bar" style="height:33%;background:#0E2535"></div><div class="tl-bar" style="height:38%;background:#0E2535"></div><div class="tl-bar" style="height:50%;background:#0E2535"></div><div class="tl-bar" style="height:42%;background:#0E2535"></div><div class="tl-bar" style="height:75%;background:#0E2535"></div><div class="tl-bar" style="height:100%;background:#0E2535"></div><div class="tl-bar" style="height:92%;background:#0E2535"></div><div class="tl-bar" style="height:83%;background:#0E2535"></div><div class="tl-bar" style="height:67%;background:#0E2535"></div><div class="tl-bar" style="height:58%;background:#0E2535"></div><div class="tl-bar" style="height:46%;background:#0E2535"></div><div class="tl-bar" style="height:38%;background:#0E2535"></div><div class="tl-bar" style="height:42%;background:#0E2535"></div><div class="tl-bar" style="height:33%;background:#0E2535"></div><div class="tl-bar" style="height:29%;background:#0E2535"></div><div class="tl-bar" style="height:25%;background:#0E2535"></div><div class="tl-bar" style="height:21%;background:#0E2535"></div><div class="tl-bar" style="height:25%;background:#0E2535"></div><div class="tl-bar" style="height:21%;background:#0E2535"></div><div class="tl-bar" style="height:17%;background:#0E2535"></div><div class="tl-bar" style="height:21%;background:#0E2535"></div><div class="tl-bar" style="height:17%;background:#0E2535"></div><div class="tl-bar" style="height:13%;background:#0E2535"></div><div class="tl-bar" style="height:17%;background:#0E2535"></div><div class="tl-bar" style="height:17%;background:#0E2535"></div><div class="tl-bar" style="height:13%;background:#0E2535"></div><div class="tl-bar" style="height:17%;background:#0E2535"></div><div class="tl-bar" style="height:13%;background:#0E2535"></div><div class="tl-bar" style="height:21%;background:#0E2535"></div><div class="tl-bar" style="height:33%;background:#0E2535"></div><div class="tl-bar" style="height:46%;background:#0E2535"></div><div class="tl-bar" style="height:58%;background:#0E2535"></div><div class="tl-bar" style="height:67%;background:#0E2535"></div><div class="tl-bar" style="height:58%;background:#0E2535"></div><div class="tl-bar" style="height:50%;background:#0E2535"></div><div class="tl-bar" style="height:42%;background:#0E2535"></div><div class="tl-bar" style="height:29%;background:#0E2535"></div><div class="tl-bar" style="height:21%;background:#0E2535"></div><div class="tl-bar" style="height:17%;background:#0E2535"></div><div class="tl-bar" style="height:13%;background:#0E2535"></div><div class="tl-bar" style="height:8%;background:#0E2535"></div>
|
||
</div>
|
||
<div style="height:1px;background:#1E2D3D;margin-bottom:2px"></div>
|
||
<div style="display:flex;justify-content:space-between"><span style="font-size:4.5px;color:#2A3A4A">1900</span><span style="font-size:4.5px;color:#2A3A4A">1910</span><span style="font-size:4.5px;color:#2A3A4A">1920</span><span style="font-size:4.5px;color:#2A3A4A">1930</span><span style="font-size:4.5px;color:#2A3A4A">1940</span><span style="font-size:4.5px;color:#2A3A4A">1950</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">Dark · Auswahl aktiv</span>1914–1920</div>
|
||
<div class="chrome dk" style="width:380px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav" style="background:#060C12"><div class="nav-logo">Familienarchiv</div><div class="nav-r"><div class="nav-av">KR</div></div></div>
|
||
<div class="page-body dk">
|
||
<div class="sfb dk">
|
||
<div class="sfb-input dk"><span>Dokumente durchsuchen …</span></div>
|
||
<div style="display:flex;align-items:center;gap:3px;background:#A1DCD8;border-radius:2px;padding:2px 6px">
|
||
<span style="font-size:5px;font-weight:700;color:#012851">Jan 1914 – Dez 1920</span>
|
||
<span style="font-size:7px;color:#012851">×</span>
|
||
</div>
|
||
</div>
|
||
<div class="tl-widget dk">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
|
||
<span style="font-size:5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#3E5065">Zeitachse</span>
|
||
<span style="font-size:5px;color:#A1DCD8;font-weight:700">187 Dokumente · Jan 1914 – Dez 1920</span>
|
||
</div>
|
||
<div class="tl-bars">
|
||
<div class="tl-bar" style="height:13%;background:#0A1218"></div><div class="tl-bar" style="height:17%;background:#0A1218"></div><div class="tl-bar" style="height:8%;background:#0A1218"></div><div class="tl-bar" style="height:13%;background:#0A1218"></div><div class="tl-bar" style="height:21%;background:#0A1218"></div><div class="tl-bar" style="height:17%;background:#0A1218"></div><div class="tl-bar" style="height:25%;background:#0A1218"></div><div class="tl-bar" style="height:17%;background:#0A1218"></div><div class="tl-bar" style="height:21%;background:#0A1218"></div><div class="tl-bar" style="height:25%;background:#0A1218"></div><div class="tl-bar" style="height:33%;background:#0A1218"></div><div class="tl-bar" style="height:38%;background:#0A1218"></div><div class="tl-bar" style="height:50%;background:#0A1218"></div><div class="tl-bar" style="height:42%;background:#0A1218"></div>
|
||
<div class="tl-bar" style="height:75%;background:#A1DCD8"></div><div class="tl-bar" style="height:100%;background:#A1DCD8"></div><div class="tl-bar" style="height:92%;background:#A1DCD8"></div><div class="tl-bar" style="height:83%;background:#A1DCD8"></div><div class="tl-bar" style="height:67%;background:#A1DCD8"></div><div class="tl-bar" style="height:58%;background:#A1DCD8"></div><div class="tl-bar" style="height:46%;background:#A1DCD8"></div><div class="tl-bar" style="height:38%;background:#A1DCD8"></div><div class="tl-bar" style="height:42%;background:#A1DCD8"></div>
|
||
<div class="tl-bar" style="height:33%;background:#0A1218"></div><div class="tl-bar" style="height:29%;background:#0A1218"></div><div class="tl-bar" style="height:25%;background:#0A1218"></div><div class="tl-bar" style="height:21%;background:#0A1218"></div><div class="tl-bar" style="height:25%;background:#0A1218"></div><div class="tl-bar" style="height:21%;background:#0A1218"></div><div class="tl-bar" style="height:17%;background:#0A1218"></div><div class="tl-bar" style="height:21%;background:#0A1218"></div><div class="tl-bar" style="height:17%;background:#0A1218"></div><div class="tl-bar" style="height:13%;background:#0A1218"></div><div class="tl-bar" style="height:17%;background:#0A1218"></div><div class="tl-bar" style="height:17%;background:#0A1218"></div><div class="tl-bar" style="height:13%;background:#0A1218"></div><div class="tl-bar" style="height:17%;background:#0A1218"></div><div class="tl-bar" style="height:13%;background:#0A1218"></div><div class="tl-bar" style="height:21%;background:#0A1218"></div><div class="tl-bar" style="height:33%;background:#0A1218"></div><div class="tl-bar" style="height:46%;background:#0A1218"></div><div class="tl-bar" style="height:58%;background:#0A1218"></div><div class="tl-bar" style="height:67%;background:#0A1218"></div><div class="tl-bar" style="height:58%;background:#0A1218"></div><div class="tl-bar" style="height:50%;background:#0A1218"></div><div class="tl-bar" style="height:42%;background:#0A1218"></div><div class="tl-bar" style="height:29%;background:#0A1218"></div><div class="tl-bar" style="height:21%;background:#0A1218"></div><div class="tl-bar" style="height:17%;background:#0A1218"></div><div class="tl-bar" style="height:13%;background:#0A1218"></div><div class="tl-bar" style="height:8%;background:#0A1218"></div>
|
||
</div>
|
||
<div style="height:1px;background:#1E2D3D;margin-bottom:2px"></div>
|
||
<div style="display:flex;justify-content:space-between"><span style="font-size:4.5px;color:#2A3A4A">1900</span><span style="font-size:4.5px;color:#2A3A4A">1910</span><span style="font-size:4.5px;color:#2A3A4A">1920</span><span style="font-size:4.5px;color:#2A3A4A">1930</span><span style="font-size:4.5px;color:#2A3A4A">1940</span><span style="font-size:4.5px;color:#2A3A4A">1950</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cap">Dark mode: Ausgewählte Balken = Mint (#A1DCD8), außerhalb = fast schwarz (#0A1218). Badge in SearchFilterBar: Mint-Hintergrund mit Navy-Text.</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
SECTION 5 — BEHAVIOUR RULES
|
||
══════════════════════════════════════════ -->
|
||
<div class="sh"><h2>5 · Verhaltensregeln</h2></div>
|
||
|
||
<div class="rules">
|
||
<table>
|
||
<tr><th>Szenario</th><th>Verhalten</th></tr>
|
||
<tr><td>Click auf einzelnen Balken</td><td>Setzt Start <em>und</em> Ende auf denselben Monat → Einzelmonat-Filter. Direkt gefiltert, kein Drag nötig.</td></tr>
|
||
<tr><td>Click + Drag</td><td>Start = Mousedown-Position, Ende = Mousemove-Position. Richtung egal (rechts → links und links → rechts erlaubt). Filter wird live aktualisiert während des Drags.</td></tr>
|
||
<tr><td>Handle drag</td><td>Start- oder End-Handle verschieben justiert die bestehende Auswahl. Der andere Handle bleibt fixiert.</td></tr>
|
||
<tr><td>Click außerhalb der Balken</td><td>Auswahl wird gelöscht. Liste zeigt alle Dokumente.</td></tr>
|
||
<tr><td>Löschen-Button (×)</td><td>Auswahl löschen. Badge in SearchFilterBar verschwindet. Bars kehren zu Idle zurück.</td></tr>
|
||
<tr><td>Kombination mit anderen Filtern</td><td>AND-Semantik. Zeitachsen-Filter + Personen-Filter + Tag-Filter sind kumulativ.</td></tr>
|
||
<tr><td>Wechsel zu Kalenderansicht</td><td>Timeline-Widget wird <strong>ausgeblendet</strong> (<code>display:none</code>). Aktive Auswahl bleibt im State erhalten und wird wieder angezeigt beim Rückwechsel.</td></tr>
|
||
<tr><td>Monate ohne Dokumente</td><td>Bar hat Mindesthöhe von 2px (sichtbar, aber minimal). Tooltip zeigt „Monat Jahr · 0 Dokumente". Klick auf Null-Bar setzt Single-Month-Filter (leere Liste erwartet).</td></tr>
|
||
<tr><td>Granularität (OQ-2)</td><td><strong>Entscheidung: ganze Monate.</strong> Start = 1. des Startmonats, Ende = letzter Tag des Endmonats. Keine Wochen oder Tage auswählbar.</td></tr>
|
||
<tr><td>Startmonat beim Öffnen (OQ-1)</td><td><strong>Entscheidung: auto-derived range.</strong> X-Achse leitet sich aus frühestem und spätestem <code>documentDate</code> ab. Kein festes Datum (1880–heute).</td></tr>
|
||
<tr><td>Keyboard-Zugang</td><td>Tab fokussiert das Widget. Pfeiltasten verschieben einen virtuellen Cursor Monat für Monat. Enter/Space setzt Start; zweites Enter setzt Ende. Escape bricht Drag ab.</td></tr>
|
||
<tr><td>Mobile (<768 px)</td><td>Widget kollabiert auf kompakte Zeile: „Zeitraum: [Jan 1914 – Dez 1920] ×" — kein Balkendiagramm. Tap öffnet ein Modal mit dem vollen Widget.</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
SECTION 6 — OPEN QUESTIONS ANSWERED
|
||
══════════════════════════════════════════ -->
|
||
<div class="sh"><h2>6 · Offene Fragen — Entscheidungen</h2></div>
|
||
|
||
<div class="callout navy"><strong>OQ-1: Zeitachsen-Bereich.</strong> Auto-derived aus frühestem und spätestem <code>documentDate</code> in der Datenbank. Beim Laden der Seite holt der Server <code>GET /api/documents/stats</code> (oder ähnlich) mit <code>minDate</code> und <code>maxDate</code>. Kein hard-coded Bereich.</div>
|
||
<div class="callout navy"><strong>OQ-2: Granularität.</strong> Ganze Monate. Ein Balken = ein Monat. Kein Sub-Monats-Drag. Begründung: Die Archive haben typischerweise 1–30 Briefe pro Monat — wöchentliche Granularität brächgt keine Zusatzinfo, würde aber 4× mehr Balken erzeugen.</div>
|
||
<div class="callout green"><strong>Backend-Anforderung.</strong> Neuer Query-Parameter <code>?dateFrom=YYYY-MM&dateTo=YYYY-MM</code> auf dem bestehenden Search-Endpoint, oder dedizierter Density-Endpoint <code>GET /api/documents/density?from=1900-01&to=1950-12</code> der <code>[{month:"1915-08", count:24}, ...]</code> zurückgibt. Das bestehende Offset-Paging entfällt für diesen Widget-Call.</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
SECTION 7 — IMPL-REF TABLE
|
||
══════════════════════════════════════════ -->
|
||
<div class="sh"><h2>7 · Implementation Reference</h2></div>
|
||
|
||
<div class="impl-ref">
|
||
<table>
|
||
<tr><th>Element</th><th>Tailwind-Klassen</th><th>Pixelwert</th><th>Anmerkung</th></tr>
|
||
<tr><td>Widget-Container</td><td><code>bg-surface border border-line rounded-sm shadow-sm px-4 py-3</code></td><td>padding 16px 12px</td><td>Gleiche Karte wie SearchFilterBar und DocumentList</td></tr>
|
||
<tr><td>Widget-Header Zeile</td><td><code>flex items-center justify-between mb-2</code></td><td>margin-bottom 8px</td><td>Label links, Gesamtanzahl rechts</td></tr>
|
||
<tr><td>Header Label</td><td><code>text-[10px] font-bold uppercase tracking-widest text-ink-3</code></td><td>10px / 700</td><td>Identisch zu anderen Section-Labels</td></tr>
|
||
<tr><td>Gesamtanzahl-Text</td><td><code>text-[10px] text-ink-3</code> — wenn Auswahl aktiv: <code>text-primary font-bold</code></td><td>10px</td><td>Zeigt gefilterte Anzahl sobald Auswahl aktiv</td></tr>
|
||
<tr><td>Bar-Container</td><td><code>flex items-end gap-px h-10 w-full</code></td><td>height 40px</td><td><code>h-12</code> (48px) wenn Platz es erlaubt</td></tr>
|
||
<tr><td>Bar idle</td><td><code>flex-1 rounded-t-sm min-h-[2px]</code> + inline <code>height</code> als %-Wert</td><td>var</td><td>CSS custom property <code>--bar-h</code> setzen via JS</td></tr>
|
||
<tr><td>Bar: Farbe idle</td><td><code>bg-[#D4EDE9]</code> (light) / <code>bg-[#0E2535]</code> (dark)</td><td>—</td><td>Helles Mint, nicht brand-mint — zu dominant</td></tr>
|
||
<tr><td>Bar: Farbe hover</td><td><code>hover:bg-mint</code></td><td>—</td><td><code>transition-colors duration-100</code></td></tr>
|
||
<tr><td>Bar: Farbe selected</td><td><code>bg-primary</code> (light) / <code>bg-mint</code> (dark)</td><td>—</td><td>Invertierung in Dark mode beabsichtigt</td></tr>
|
||
<tr><td>Bar: Farbe outside</td><td><code>bg-muted</code></td><td>—</td><td>Gedimmt, aber noch sichtbar</td></tr>
|
||
<tr><td>Baseline</td><td><code>border-t border-line mt-0.5 mb-1</code></td><td>1px</td><td>Trennt Balken von X-Achsen-Labels</td></tr>
|
||
<tr><td>X-Achse Labels</td><td><code>flex justify-between text-[9px] text-ink-3</code></td><td>9px</td><td>Nur Jahres-Labels alle 10 Jahre; mehr wenn Platz</td></tr>
|
||
<tr><td>Drag Handle</td><td><code>absolute w-3 h-3 rounded-full bg-primary border-2 border-surface shadow cursor-ew-resize -top-1.5 left-1/2 -translate-x-1/2 z-10</code></td><td>12px / 12px</td><td>Touch target: mind. 44px durch <code>p-4</code> auf einem unsichtbaren Wrapper</td></tr>
|
||
<tr><td>Tooltip</td><td><code>absolute bottom-full left-1/2 -translate-x-1/2 mb-1 bg-ink text-surface text-[9px] font-bold px-1.5 py-0.5 rounded-sm whitespace-nowrap z-20 pointer-events-none</code></td><td>9px</td><td>Erscheint via <code>group-hover:block hidden</code></td></tr>
|
||
<tr><td>Badge in SearchFilterBar</td><td><code>flex items-center gap-1 bg-primary text-primary-fg text-[9px] font-bold px-2 py-1 rounded-sm</code></td><td>9px</td><td>Löschen-Button innerhalb: <code>ml-1 text-sm leading-none hover:opacity-70</code></td></tr>
|
||
<tr><td>Mobile Collapse</td><td>Widget: <code>sm:block hidden</code> — Mobile-Badge: <code>sm:hidden flex items-center gap-2</code></td><td>—</td><td>Unter 640px nur Badge-Zeile sichtbar, kein Chart</td></tr>
|
||
<tr><td>Komponenten-Name</td><td><code>TimelineDensityFilter.svelte</code></td><td>—</td><td>Props: <code>density: MonthBucket[]</code>, <code>bind:from</code>, <code>bind:to</code>, <code>onchange</code></td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
</div><!-- /page -->
|
||
</body>
|
||
</html>
|