marcel/familienarchiv
1
0
Fork 0
Code Issues 125 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b0aa3a6ffda6d3529180b5407f6790831494143e
familienarchiv/docs/specs/reader-dashboard-b1-hell.html
Marcel b0aa3a6ffd
Some checks failed
CI / Backend Unit Tests (push) Has been cancelled
Details
CI / Unit & Component Tests (push) Has been cancelled
Details
CI / OCR Service Tests (push) Has been cancelled
Details
CI / Unit & Component Tests (pull_request) Failing after 4m29s
Details
CI / OCR Service Tests (pull_request) Successful in 35s
Details
CI / Backend Unit Tests (pull_request) Failing after 3m13s
Details
docs(spec): reader dashboard design exploration and final spec (#447) 
Seven HTML mockups covering the full design process for the
permission-gated reader dashboard (issue #447): 3 initial concept
variants (A/B/C), 3 iterations of concept B (B.1 hell, B.2 warm,
B.3 navy), and the final merged spec combining B.1 layout with B.3
person cards. Final spec includes all 4 view variants: desktop light
READ_ALL, desktop light BLOG_WRITE, desktop dark, and mobile (3 phone
frames: light reader, light BLOG_WRITE, dark reader).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-06 11:36:04 +02:00

386 lines
24 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reader Dashboard — B.1 · Hell &amp; Klar · 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}
.doc{max-width:1440px;margin:0 auto;padding:48px 32px}
/* ── Masthead ─── */
.mast{background:#0D2240;border-radius:10px;padding:32px 40px;margin-bottom:48px}
.mast-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:16px}
.mast h1{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.4px;margin-bottom:6px}
.mast p{font-size:12px;color:rgba(255,255,255,.5);max-width:660px;line-height:1.7}
.mast-badge{font-size:9px;font-weight:800;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.8px;white-space:nowrap;flex-shrink:0;margin-top:4px;background:#A6DAD8;color:#002850}
.decisions{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:20px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}
.dec{background:rgba(255,255,255,.06);border-radius:6px;padding:10px 12px}
.dec-label{font-size:7px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.35);margin-bottom:5px}
.dec-value{font-size:9.5px;font-weight:700;color:#fff;line-height:1.5}
/* ── Section headings ─── */
.sec{margin-bottom:64px}
.sec+.sec{border-top:2px dashed #C8C4BE;padding-top:56px}
.sec-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#888;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.sec-h::after{content:'';flex:1;height:1px;background:#D8D4CE}
.sec-num{background:#0D2240;color:#fff;font-size:9px;font-weight:900;padding:2px 7px;border-radius:10px}
/* ── Screen grid ─── */
.sg{display:grid;gap:24px;align-items:start}
.sg-2{grid-template-columns:1fr 340px}
.sb{display:flex;flex-direction:column;gap:10px}
.sl{font-size:9px;font-weight:800;color:#888;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.sz{background:#E8E4DF;color:#666;padding:1px 5px;border-radius:3px;font-size:8px}
/* ── Annotation callouts ─── */
.ann-block{background:#FFF7ED;border:1px solid #FDBA74;border-radius:5px;padding:8px 10px;font-size:10px;color:#7C2D12;line-height:1.5}
.ann-block strong{font-weight:800}
.ann-block ul{padding-left:14px;display:flex;flex-direction:column;gap:3px;margin-top:5px}
.note{background:#F0F9FF;border:1px solid #BAE6FD;border-radius:5px;padding:8px 10px;font-size:10px;color:#0C4A6E;line-height:1.5}
.note strong{font-weight:800}
.note ul{padding-left:14px;display:flex;flex-direction:column;gap:3px;margin-top:5px}
.ok{background:#F0FDF4;border:1px solid #86EFAC;border-radius:5px;padding:8px 10px;font-size:10px;color:#166534;line-height:1.5}
.ok strong{font-weight:800}
.ok ul{padding-left:14px;display:flex;flex-direction:column;gap:3px;margin-top:5px}
/* ── Mock browser chrome ─── */
.wf{background:#fff;border:2px solid #B8B4AE;border-radius:10px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.08)}
.wf-bar{height:24px;background:#E8E4DF;border-bottom:1px solid #C8C4BE;display:flex;align-items:center;padding:0 9px;gap:4px}
.dot{width:7px;height:7px;border-radius:50%}
.dot.r{background:#F87171}.dot.y{background:#FCD34D}.dot.g{background:#4ADE80}
.urlbar{flex:1;height:11px;background:#D8D4CE;border-radius:3px;margin-left:6px;display:flex;align-items:center;padding:0 5px}
.urlbar span{font-size:7.5px;color:#888;font-family:monospace}
/* ── Nav bar ─── */
.N{height:34px;background:#002850;display:flex;align-items:center;padding:0 14px;gap:10px}
.N-accent{height:2px;background:#A6DAD8}
.logo{font-size:7.5px;font-weight:900;color:#fff;letter-spacing:1px;text-transform:uppercase}
.nl{font-size:6.5px;color:rgba(255,255,255,.45);font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 6px}
.nl.on{color:#fff}
.nr{margin-left:auto;display:flex;gap:5px;align-items:center}
.av{width:18px;height:18px;background:#A6DAD8;border-radius:50%;font-size:5.5px;font-weight:900;color:#002850;display:flex;align-items:center;justify-content:center}
.nico{width:18px;height:18px;background:rgba(255,255,255,.1);border-radius:3px;display:flex;align-items:center;justify-content:center}
/* ── Page body ─── */
.MAIN{padding:12px 16px;background:#F5F4EF;display:flex;flex-direction:column;gap:8px}
/* ════════════════════════════════════
B.1 — HELL & KLAR
Header: pure white, divider line between greeting and stats
Person cards: round avatar, mint underline, white bg
Stories: clean 2-line excerpt
Columns: 1:1
════════════════════════════════════ */
/* Combined header bar — white, clean divider */
.HEADER-BAR{background:#fff;border:1px solid #E0DDD5;border-radius:3px;padding:10px 14px;display:flex;align-items:center;gap:16px}
.HEADER-LEFT{flex:1;min-width:0}
.HEADER-TIME{font-size:6px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#C8B8A0;margin-bottom:2px}
.HEADER-NAME{font-family:Georgia,serif;font-size:12px;color:#002850}
.DIVIDER{width:1px;background:#E8E4DF;align-self:stretch;flex-shrink:0}
.HEADER-STATS{display:flex;align-items:center;gap:0}
.HSTAT{text-align:center;padding:0 12px;border-right:1px solid #F0EDE6}
.HSTAT:last-child{border-right:none;padding-right:0}
.HSTAT a{text-decoration:none;display:block}
.HSTAT-NUM{font-size:14px;font-weight:900;color:#002850;line-height:1;display:block}
.HSTAT-LABEL{font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#B8B4AE;display:block;margin-top:2px}
/* Person portrait cards — round avatar, mint bottom-border on card */
.PERSON-GRID{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.PCARD{background:#fff;border:1px solid #E0DDD5;border-bottom:2px solid #A6DAD8;border-radius:3px;padding:9px 10px 8px;text-decoration:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px}
.PCARD-AV{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:900;color:#fff;flex-shrink:0}
.PCARD-NAME{font-size:7px;font-weight:700;color:#002850;line-height:1.3}
.PCARD-COUNT{font-size:6px;color:#888;font-weight:400}
.PERSONS-FOOTER{text-align:right;margin-top:3px}
.PERSONS-ALL{font-size:6.5px;color:#002850;font-weight:600;text-decoration:none;opacity:.55}
/* Two-column 1:1 */
.CONTENT-ROW{display:grid;grid-template-columns:1fr 1fr;gap:6px}
/* Cards */
.CARD{background:#fff;border:1px solid #E0DDD5;border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.CARD-HEAD{display:flex;align-items:center;justify-content:space-between;padding:7px 10px 6px;border-bottom:1px solid #E0DDD5}
.CARD-HEAD h3{font-size:6.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#999}
.CARD-HEAD a{font-size:6.5px;font-weight:600;color:#002850;opacity:.4;text-decoration:none}
/* Doc rows */
.DOC-ROW{display:flex;align-items:center;gap:7px;padding:5px 10px;border-bottom:1px solid #F0EDE6}
.DOC-ROW:last-child{border-bottom:none}
.DOC-THUMB{width:20px;height:24px;background:#ECEAE4;border:1px solid #E0DDD5;border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.DOC-INFO{flex:1;min-width:0}
.DOC-TITLE{font-family:Georgia,serif;font-size:7.5px;color:#002850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.DOC-SENDER{font-size:6px;color:#888;margin-top:1px}
.DOC-SENDER a{color:#002850;text-decoration:none;opacity:.7}
.DOC-DATE{font-size:6px;color:#C8C4BE;white-space:nowrap;flex-shrink:0}
/* Story rows — clean 2-line excerpt */
.STORY-ROW{padding:7px 10px;border-bottom:1px solid #F0EDE6}
.STORY-ROW:last-child{border-bottom:none}
.STORY-TITLE{font-family:Georgia,serif;font-size:8px;color:#002850;font-style:italic;margin-bottom:3px;line-height:1.3}
.STORY-EXCERPT{font-size:6.5px;color:#888;line-height:1.5;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.STORY-META{font-size:6px;color:#B8B4AE}
/* Drafts card */
.DRAFTS-CARD{background:#fff;border:1px solid #E0DDD5;border-left:3px solid #A6DAD8;border-radius:3px;overflow:hidden}
.DRAFTS-HEAD{padding:6px 10px 5px;border-bottom:1px solid #F0EDE6;display:flex;align-items:center;justify-content:space-between}
.DRAFTS-HEAD h3{font-size:6.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#999}
.DRAFT-ROW{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #F0EDE6}
.DRAFT-ROW:last-child{border-bottom:none}
.DRAFT-TITLE{font-family:Georgia,serif;font-size:8px;color:#002850}
.DRAFT-META{font-size:6px;color:#AAA;margin-top:1px}
/* Spec disclaimer */
.spec-disclaimer{background:#FFF8E1;border:1.5px solid #FFC107;border-radius:6px;padding:11px 16px;font-size:11px;color:#6D4C00;margin-bottom:32px;line-height:1.6}
.spec-disclaimer strong{font-weight:800}
</style>
</head>
<body>
<div class="doc">
<div class="mast">
<div class="mast-top">
<div>
<h1>Reader Dashboard — B.1 · „Hell &amp; Klar"</h1>
<p>Die reinste Iteration von Konzept B. Weißer Header-Balken mit sauberer vertikaler Trennlinie zwischen Gruß und Statistik. Personen-Kacheln mit mintfarbener Bottom-Border als einzigem Akzent. Gleiches 1:1-Spaltenraster. Geschichten mit 2-Zeilen-Auszug. Minimalste Chrome-Dichte.</p>
</div>
<span class="mast-badge">B.1 · Entwurf</span>
</div>
<div class="decisions">
<div class="dec"><div class="dec-label">Header-Bg</div><div class="dec-value">Weiß — maximale Helligkeit</div></div>
<div class="dec"><div class="dec-label">Stats-Trennlinie</div><div class="dec-value">Vertikale 1 px Linie zwischen Gruß + Stats</div></div>
<div class="dec"><div class="dec-label">Personen-Kacheln</div><div class="dec-value">Runder Avatar · Mint Bottom-Border</div></div>
<div class="dec"><div class="dec-label">Spaltenbreite</div><div class="dec-value">1 : 1 — gleichwertig</div></div>
<div class="dec"><div class="dec-label">Geschichten</div><div class="dec-value">Kursiver Titel + 2-Zeilen-Auszug</div></div>
</div>
</div>
<div class="spec-disclaimer">
<strong>📐 Mockup-Skalierung —</strong> alle Schriftgrößen, Abstände und Höhen sind auf ca. 55 % der Implementierungswerte skaliert.
</div>
<!-- ══ SECTION 1: LESER ══ -->
<div class="sec">
<div class="sec-h"><span class="sec-num">1</span> Desktop · READ_ALL — ohne BLOG_WRITE</div>
<div class="sg sg-2">
<div class="sb">
<div class="sl">Vollansicht <span class="sz">≥ 1024 px</span></div>
<div class="wf">
<div class="wf-bar">
<div class="dot r"></div><div class="dot y"></div><div class="dot g"></div>
<div class="urlbar"><span>familienarchiv.local /</span></div>
</div>
<div class="N">
<span class="logo">Familienarchiv</span>
<span class="nl on">Startseite</span>
<span class="nl">Dokumente</span>
<span class="nl">Personen</span>
<span class="nl">Geschichten</span>
<div class="nr">
<div class="nico"><svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="2"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg></div>
<div class="av">BK</div>
</div>
</div>
<div class="N-accent"></div>
<div class="MAIN">
<!-- Zone 1+2: Combined header — white, clean divider -->
<div class="HEADER-BAR">
<div class="HEADER-LEFT">
<div class="HEADER-TIME">Guten Abend</div>
<div class="HEADER-NAME">Herzlich willkommen, Brigitte.</div>
</div>
<div class="DIVIDER"></div>
<div class="HEADER-STATS">
<div class="HSTAT"><a href="#"><span class="HSTAT-NUM">847</span><span class="HSTAT-LABEL">Dokumente</span></a></div>
<div class="HSTAT"><a href="#"><span class="HSTAT-NUM">94</span><span class="HSTAT-LABEL">Personen</span></a></div>
<div class="HSTAT"><a href="#"><span class="HSTAT-NUM">12</span><span class="HSTAT-LABEL">Geschichten</span></a></div>
</div>
</div>
<!-- Zone 4: Person cards — mint bottom-border variant -->
<div>
<div class="PERSON-GRID">
<a class="PCARD" href="#">
<div class="PCARD-AV" style="background:#002850">KR</div>
<div class="PCARD-NAME">Käthe Raddatz</div>
<div class="PCARD-COUNT">47 Dokumente</div>
</a>
<a class="PCARD" href="#">
<div class="PCARD-AV" style="background:#1A4A6B">ER</div>
<div class="PCARD-NAME">Ernst Raddatz</div>
<div class="PCARD-COUNT">31 Dokumente</div>
</a>
<a class="PCARD" href="#">
<div class="PCARD-AV" style="background:#3D5A7A">FM</div>
<div class="PCARD-NAME">Frieda Müller</div>
<div class="PCARD-COUNT">28 Dokumente</div>
</a>
<a class="PCARD" href="#">
<div class="PCARD-AV" style="background:#4A7A5A">HW</div>
<div class="PCARD-NAME">Heinrich Weber</div>
<div class="PCARD-COUNT">19 Dokumente</div>
</a>
</div>
<div class="PERSONS-FOOTER"><a class="PERSONS-ALL" href="#">Alle 94 Personen →</a></div>
</div>
<!-- Zone 5: 1:1 split -->
<div class="CONTENT-ROW">
<div class="CARD">
<div class="CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="#">Alle Dokumente</a></div>
<div class="DOC-ROW">
<div class="DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#C8C4BE" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
<div class="DOC-INFO"><div class="DOC-TITLE">Brief von Ernst an Käthe, März 1923</div><div class="DOC-SENDER">von <a href="#">Käthe Raddatz</a></div></div>
<div class="DOC-DATE">vor 2 Tagen</div>
</div>
<div class="DOC-ROW">
<div class="DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#C8C4BE" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
<div class="DOC-INFO"><div class="DOC-TITLE">Heiratsurkunde Raddatz-Müller, 1898</div><div class="DOC-SENDER" style="color:#E0DDD5">—</div></div>
<div class="DOC-DATE">vor 4 Tagen</div>
</div>
<div class="DOC-ROW">
<div class="DOC-THUMB"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#A6DAD8" stroke-width="1.5"><rect x="2" y="2" width="20" height="20" rx="2"/><circle cx="8" cy="8" r="2"/><polyline points="22 14 16 9 4 22"/></svg></div>
<div class="DOC-INFO"><div class="DOC-TITLE">Familienfoto, Sommer 1928</div><div class="DOC-SENDER">von <a href="#">Ernst Raddatz</a></div></div>
<div class="DOC-DATE">vor 1 Woche</div>
</div>
<div class="DOC-ROW">
<div class="DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#C8C4BE" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
<div class="DOC-INFO"><div class="DOC-TITLE">Taufregister Heinrich Weber, 1902</div><div class="DOC-SENDER" style="color:#E0DDD5">—</div></div>
<div class="DOC-DATE">vor 2 Wo.</div>
</div>
<div class="DOC-ROW">
<div class="DOC-THUMB"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#A6DAD8" stroke-width="1.5"><rect x="2" y="2" width="20" height="20" rx="2"/><circle cx="8" cy="8" r="2"/><polyline points="22 14 16 9 4 22"/></svg></div>
<div class="DOC-INFO"><div class="DOC-TITLE">Postkarte aus Berlin, 1930</div><div class="DOC-SENDER">von <a href="#">Frieda Müller</a></div></div>
<div class="DOC-DATE">vor 3 Wo.</div>
</div>
</div>
<div class="CARD">
<div class="CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle Geschichten</a></div>
<div class="STORY-ROW">
<div class="STORY-TITLE">Die Reise nach Berlin</div>
<div class="STORY-EXCERPT">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …</div>
<div class="STORY-META">vor 3 Tagen</div>
</div>
<div class="STORY-ROW">
<div class="STORY-TITLE">Sommer 1934 in Köln</div>
<div class="STORY-EXCERPT">Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise vor dem Krieg …</div>
<div class="STORY-META">vor 2 Wochen</div>
</div>
<div class="STORY-ROW">
<div class="STORY-TITLE">Briefe aus dem Krieg</div>
<div class="STORY-EXCERPT">Zwischen 1914 und 1918 schrieb Ernst Raddatz insgesamt 47 Briefe aus dem Feld an seine Frau Käthe in der Heimat …</div>
<div class="STORY-META">vor 1 Monat</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:10px;padding-top:40px">
<div class="ann-block">
<strong>Header-Balken — weiß mit Trennlinie</strong>
<ul>
<li>Kein Hintergrund-Farbton — pure weiß, gleicher Hintergrund wie alle Cards</li>
<li>1 px vertikale Trennlinie (#E8E4DF) trennt Gruß von Stats klar ohne schweren Rand</li>
<li>Stats: 24 px Zahlen (skaliert 14 px), 11 px uppercase Label darunter</li>
</ul>
</div>
<div class="ann-block">
<strong>Personen-Kacheln — Mint Bottom-Border</strong>
<ul>
<li>Einziger farbiger Akzent: 2 px mintfarbener Bottom-Border (#A6DAD8)</li>
<li>Runder Avatar in Navy-Farbfamilie — gleiche Logik wie bestehende Avatare in der App</li>
<li>Dokumentzahl in Grau, ohne Badge — so wenig Chrome wie möglich</li>
</ul>
</div>
<div class="note">
<strong>Stärken gegenüber Basis-B</strong>
<ul>
<li>Höchste Konsistenz mit dem restlichen App-Stil (alle Cards weiß)</li>
<li>Leichteste visuelle Belastung — ideal für ältere Nutzer</li>
<li>Mint nur als funktionaler Akzent (Bottom-Border auf Personenkacheln)</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ══ SECTION 2: BLOG_WRITE ══ -->
<div class="sec">
<div class="sec-h"><span class="sec-num">2</span> Variante · BLOG_WRITE — Zone 3 „Meine Entwürfe"</div>
<div class="sg sg-2">
<div class="sb">
<div class="sl">READ_ALL + BLOG_WRITE</div>
<div class="wf">
<div class="wf-bar"><div class="dot r"></div><div class="dot y"></div><div class="dot g"></div><div class="urlbar"><span>familienarchiv.local /</span></div></div>
<div class="N"><span class="logo">Familienarchiv</span><span class="nl on">Startseite</span><span class="nl">Dokumente</span><span class="nl">Personen</span><span class="nl">Geschichten</span><div class="nr"><div class="av">MR</div></div></div>
<div class="N-accent"></div>
<div class="MAIN">
<div class="HEADER-BAR">
<div class="HEADER-LEFT"><div class="HEADER-TIME">Guten Morgen</div><div class="HEADER-NAME">Herzlich willkommen, Marcel.</div></div>
<div class="DIVIDER"></div>
<div class="HEADER-STATS">
<div class="HSTAT"><a href="#"><span class="HSTAT-NUM">847</span><span class="HSTAT-LABEL">Dokumente</span></a></div>
<div class="HSTAT"><a href="#"><span class="HSTAT-NUM">94</span><span class="HSTAT-LABEL">Personen</span></a></div>
<div class="HSTAT"><a href="#"><span class="HSTAT-NUM">12</span><span class="HSTAT-LABEL">Geschichten</span></a></div>
</div>
</div>
<!-- Drafts -->
<div class="DRAFTS-CARD">
<div class="DRAFTS-HEAD"><h3>Meine Entwürfe</h3></div>
<div class="DRAFT-ROW">
<div><div class="DRAFT-TITLE">Onkel Friedrichs Wanderjahre</div><div class="DRAFT-META">Entwurf · zuletzt bearbeitet vor 1 Tag</div></div>
<svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="#CCC" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
</div>
<div class="DRAFT-ROW">
<div><div class="DRAFT-TITLE">Die Raddatz-Kinder</div><div class="DRAFT-META">Entwurf · zuletzt bearbeitet vor 5 Tagen</div></div>
<svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="#CCC" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
</div>
</div>
<!-- Persons -->
<div>
<div class="PERSON-GRID">
<a class="PCARD" href="#"><div class="PCARD-AV" style="background:#002850">KR</div><div class="PCARD-NAME">Käthe Raddatz</div><div class="PCARD-COUNT">47 Dok.</div></a>
<a class="PCARD" href="#"><div class="PCARD-AV" style="background:#1A4A6B">ER</div><div class="PCARD-NAME">Ernst Raddatz</div><div class="PCARD-COUNT">31 Dok.</div></a>
<a class="PCARD" href="#"><div class="PCARD-AV" style="background:#3D5A7A">FM</div><div class="PCARD-NAME">Frieda Müller</div><div class="PCARD-COUNT">28 Dok.</div></a>
<a class="PCARD" href="#"><div class="PCARD-AV" style="background:#4A7A5A">HW</div><div class="PCARD-NAME">Heinrich Weber</div><div class="PCARD-COUNT">19 Dok.</div></a>
</div>
<div class="PERSONS-FOOTER"><a class="PERSONS-ALL" href="#">Alle 94 Personen →</a></div>
</div>
<div class="CONTENT-ROW">
<div class="CARD">
<div class="CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="#">Alle Dokumente</a></div>
<div class="DOC-ROW"><div class="DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#C8C4BE" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div><div class="DOC-INFO"><div class="DOC-TITLE">Brief von Ernst an Käthe, März 1923</div><div class="DOC-SENDER">von <a href="#">Käthe Raddatz</a></div></div><div class="DOC-DATE">vor 2 Tagen</div></div>
<div class="DOC-ROW"><div class="DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#C8C4BE" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div><div class="DOC-INFO"><div class="DOC-TITLE">Heiratsurkunde Raddatz-Müller, 1898</div><div class="DOC-SENDER" style="color:#E0DDD5">—</div></div><div class="DOC-DATE">vor 4 Tagen</div></div>
<div style="padding:5px 10px;font-size:6px;color:#C8C4BE;border-top:1px solid #F0EDE6">+ 3 weitere Dokumente …</div>
</div>
<div class="CARD">
<div class="CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle</a></div>
<div class="STORY-ROW"><div class="STORY-TITLE">Die Reise nach Berlin</div><div class="STORY-EXCERPT">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …</div><div class="STORY-META">vor 3 Tagen</div></div>
<div class="STORY-ROW"><div class="STORY-TITLE">Sommer 1934 in Köln</div><div class="STORY-EXCERPT">Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln …</div><div class="STORY-META">vor 2 Wochen</div></div>
</div>
</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:10px;padding-top:40px">
<div class="ann-block">
<strong>Entwürfe-Card — Mint Left-Border</strong>
<ul>
<li>3 px mintfarbener Left-Border auf Card-Ebene — harmoniert mit den Personen-Kacheln</li>
<li>Kein separater Card-Hintergrund — fügt sich natürlich in den White-Card-Stil ein</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink