b0aa3a6ffd
Some checks failed
CI / Backend Unit Tests (push) Has been cancelled
CI / Unit & Component Tests (push) Has been cancelled
CI / OCR Service Tests (push) Has been cancelled
CI / Unit & Component Tests (pull_request) Failing after 4m29s
CI / OCR Service Tests (pull_request) Successful in 35s
CI / Backend Unit Tests (pull_request) Failing after 3m13s
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>
482 lines
25 KiB
HTML
482 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Reader Dashboard — Concept A · Herzlich Willkommen · 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(4,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;flex-shrink:0}
|
|
.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}
|
|
|
|
/* ── Greeting card ─── */
|
|
.GREET{background:#FDFAF5;border:1px solid #E8E4DC;border-radius:3px;padding:12px 14px}
|
|
.GREET-time{font-size:6px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#C8B8A0;margin-bottom:4px}
|
|
.GREET-name{font-family:Georgia,serif;font-size:14px;color:#002850;line-height:1.2}
|
|
|
|
/* ── Stats strip ─── */
|
|
.STATS{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
|
|
.STAT{background:#fff;border:1px solid #E0DDD5;border-bottom:2px solid #A6DAD8;border-radius:3px;padding:9px 11px;text-decoration:none;display:block}
|
|
.STAT-num{font-size:18px;font-weight:900;color:#002850;line-height:1;margin-bottom:3px;font-family:'Helvetica Neue',Arial,sans-serif}
|
|
.STAT-label{font-size:6px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#B8B4AE}
|
|
|
|
/* ── Person chips ─── */
|
|
.PERSONS-WRAP{display:flex;flex-direction:column;gap:5px}
|
|
.PERSONS-HEADER{display:flex;align-items:center;justify-content:space-between}
|
|
.PERSONS-TITLE{font-size:6.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#AAA}
|
|
.PERSONS-ALL{font-size:6.5px;color:#002850;font-weight:600;text-decoration:none}
|
|
.CHIPS{display:flex;flex-wrap:wrap;gap:5px}
|
|
.CHIP{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 3px;background:#fff;border:1px solid #E0DDD5;border-radius:20px;font-size:7px;color:#002850;font-weight:600;text-decoration:none}
|
|
.CHIP-AV{width:16px;height:16px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:5px;font-weight:900;flex-shrink:0}
|
|
.CHIP-COUNT{font-size:6px;color:#AAA;font-weight:400;margin-left:2px}
|
|
|
|
/* ── Two-column content row ─── */
|
|
.CONTENT-ROW{display:grid;grid-template-columns:3fr 2fr;gap:6px}
|
|
.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:18px;height:18px;background:#F0EDE6;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-META{font-size:6px;color:#AAA;margin-top:1px}
|
|
.DOC-DATE{font-size:6px;color:#C8C4BE;white-space:nowrap;flex-shrink:0}
|
|
|
|
/* ── Story rows ─── */
|
|
.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:2px;line-height:1.4}
|
|
.STORY-META{font-size:6px;color:#B8B4AE}
|
|
|
|
/* ── 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">
|
|
|
|
<!-- ══ MASTHEAD ══ -->
|
|
<div class="mast">
|
|
<div class="mast-top">
|
|
<div>
|
|
<h1>Reader Dashboard — Konzept A · „Herzlich Willkommen"</h1>
|
|
<p>Warme, einladende Gestaltung mit klarer Hierarchie: Begrüßung → Statistik → Personen → Inhalte. Die Statistikkacheln sind großzügig bemessen und wirken als Einstiegspunkte. Personen erscheinen als kompakte Pills. Geschichten erhalten einen reduzierten, redaktionellen Stil ohne Auszug.</p>
|
|
</div>
|
|
<span class="mast-badge">Konzept A · Entwurf</span>
|
|
</div>
|
|
<div class="decisions">
|
|
<div class="dec">
|
|
<div class="dec-label">Schwerpunkt</div>
|
|
<div class="dec-value">Begrüßung & große Statistik als Einstieg</div>
|
|
</div>
|
|
<div class="dec">
|
|
<div class="dec-label">Personen-Chips</div>
|
|
<div class="dec-value">Schlanke Pills mit Initialen-Avatar</div>
|
|
</div>
|
|
<div class="dec">
|
|
<div class="dec-label">Geschichten-Spalte</div>
|
|
<div class="dec-value">Kursiver Serif-Titel · kein Auszug · schlicht</div>
|
|
</div>
|
|
<div class="dec">
|
|
<div class="dec-label">Spaltenbreite</div>
|
|
<div class="dec-value">3 : 2 — Dokumente : Geschichten</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spec-disclaimer">
|
|
<strong>📐 Mockup-Skalierung —</strong> alle Schriftgrößen, Abstände und Höhen im Mockup sind auf ca. 55 % der tatsächlichen Implementierungswerte skaliert. <strong>Werte nicht aus dem Mockup-CSS kopieren.</strong>
|
|
</div>
|
|
|
|
<!-- ══ SECTION 1: DESKTOP, REINER LESER ══ -->
|
|
<div class="sec">
|
|
<div class="sec-h"><span class="sec-num">1</span> Desktop · Leser ohne BLOG_WRITE (READ_ALL only)</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>
|
|
|
|
<!-- Nav -->
|
|
<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: Greeting -->
|
|
<div class="GREET">
|
|
<div class="GREET-time">Guten Abend</div>
|
|
<div class="GREET-name">Herzlich willkommen, Brigitte.</div>
|
|
</div>
|
|
|
|
<!-- Zone 2: Stats -->
|
|
<div class="STATS">
|
|
<a class="STAT" href="#">
|
|
<div class="STAT-num">847</div>
|
|
<div class="STAT-label">Dokumente</div>
|
|
</a>
|
|
<a class="STAT" href="#">
|
|
<div class="STAT-num">94</div>
|
|
<div class="STAT-label">Personen</div>
|
|
</a>
|
|
<a class="STAT" href="#">
|
|
<div class="STAT-num">12</div>
|
|
<div class="STAT-label">Geschichten</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Zone 4: Person chips -->
|
|
<div class="PERSONS-WRAP">
|
|
<div class="PERSONS-HEADER">
|
|
<span class="PERSONS-TITLE">Personen im Fokus</span>
|
|
<a class="PERSONS-ALL" href="#">Alle 94 Personen →</a>
|
|
</div>
|
|
<div class="CHIPS">
|
|
<a class="CHIP" href="#">
|
|
<div class="CHIP-AV" style="background:#002850">KR</div>
|
|
Käthe Raddatz<span class="CHIP-COUNT">47 Dok.</span>
|
|
</a>
|
|
<a class="CHIP" href="#">
|
|
<div class="CHIP-AV" style="background:#1A4A6B">ER</div>
|
|
Ernst Raddatz<span class="CHIP-COUNT">31 Dok.</span>
|
|
</a>
|
|
<a class="CHIP" href="#">
|
|
<div class="CHIP-AV" style="background:#3D5A7A">FM</div>
|
|
Frieda Müller<span class="CHIP-COUNT">28 Dok.</span>
|
|
</a>
|
|
<a class="CHIP" href="#">
|
|
<div class="CHIP-AV" style="background:#4A7A5A">HW</div>
|
|
Heinrich Weber<span class="CHIP-COUNT">19 Dok.</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Zone 5: Two-column content -->
|
|
<div class="CONTENT-ROW">
|
|
|
|
<!-- Left: Recent docs -->
|
|
<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="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#C8C4BE" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
</div>
|
|
<div class="DOC-INFO">
|
|
<div class="DOC-TITLE">Brief von Ernst an Käthe, März 1923</div>
|
|
<div class="DOC-META">Käthe Raddatz</div>
|
|
</div>
|
|
<div class="DOC-DATE">vor 2 Tagen</div>
|
|
</div>
|
|
<div class="DOC-ROW">
|
|
<div class="DOC-THUMB">
|
|
<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#C8C4BE" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
</div>
|
|
<div class="DOC-INFO">
|
|
<div class="DOC-TITLE">Heiratsurkunde Raddatz-Müller, 1898</div>
|
|
<div class="DOC-META" style="color:#DDD">—</div>
|
|
</div>
|
|
<div class="DOC-DATE">vor 4 Tagen</div>
|
|
</div>
|
|
<div class="DOC-ROW">
|
|
<div class="DOC-THUMB">
|
|
<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#C8C4BE" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
|
</div>
|
|
<div class="DOC-INFO">
|
|
<div class="DOC-TITLE">Familienfoto, Sommer 1928</div>
|
|
<div class="DOC-META">Ernst Raddatz</div>
|
|
</div>
|
|
<div class="DOC-DATE">vor 1 Woche</div>
|
|
</div>
|
|
<div class="DOC-ROW">
|
|
<div class="DOC-THUMB">
|
|
<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#C8C4BE" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
</div>
|
|
<div class="DOC-INFO">
|
|
<div class="DOC-TITLE">Taufregister Heinrich Weber, 1902</div>
|
|
<div class="DOC-META" style="color:#DDD">—</div>
|
|
</div>
|
|
<div class="DOC-DATE">vor 2 Wo.</div>
|
|
</div>
|
|
<div class="DOC-ROW">
|
|
<div class="DOC-THUMB">
|
|
<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#C8C4BE" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
|
</div>
|
|
<div class="DOC-INFO">
|
|
<div class="DOC-TITLE">Postkarte aus Berlin, 1930</div>
|
|
<div class="DOC-META">Frieda Müller</div>
|
|
</div>
|
|
<div class="DOC-DATE">vor 3 Wo.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Stories -->
|
|
<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-META">vor 3 Tagen</div>
|
|
</div>
|
|
<div class="STORY-ROW">
|
|
<div class="STORY-TITLE">Sommer 1934 in Köln</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-META">vor 1 Monat</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Annotations -->
|
|
<div style="display:flex;flex-direction:column;gap:10px;padding-top:40px">
|
|
<div class="ann-block">
|
|
<strong>Zone 1 — Begrüßung</strong>
|
|
<ul>
|
|
<li>Sand-getönter Hintergrund (#FDFAF5) grenzt die Karte vom Grau der Seite ab</li>
|
|
<li>Tageszeit-Label (z.B. „Guten Abend") in Capitalcase, 12 px, gedämpftes Beige</li>
|
|
<li>„Herzlich willkommen, Brigitte." in Georgia Serif, 28 px real (14 px skaliert)</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ann-block">
|
|
<strong>Zone 2 — Statistik</strong>
|
|
<ul>
|
|
<li>Jede Kachel ist ein vollflächiges <a>-Element</li>
|
|
<li>Mintfarbener Bottom-Border (2 px, #A6DAD8) als einziger visueller Akzent</li>
|
|
<li>Zahl: 48 px bold Navy — wirkt wie ein Einladungsschild</li>
|
|
</ul>
|
|
</div>
|
|
<div class="note">
|
|
<strong>Zone 4 — Personen-Chips</strong>
|
|
<ul>
|
|
<li>Pill-Form: Initialen-Avatar (16 px) + Name + Dokumentzahl in gedämpftem Grau</li>
|
|
<li>Avatar-Hintergrundfarbe variiert innerhalb der Navy-Familie</li>
|
|
<li>Anzahl-Link „Alle 94 Personen →" rechtsbündig zum Section-Titel</li>
|
|
</ul>
|
|
</div>
|
|
<div class="note">
|
|
<strong>Zone 5 — Geschichten-Spalte</strong>
|
|
<ul>
|
|
<li>Nur kursiver Titel + Datum — bewusst reduziert, literarisch</li>
|
|
<li>Kein Auszug: ruhigere Gestaltung, weniger Ablenkung</li>
|
|
<li>Passend für Leser, die Titel als Entscheidungsgrundlage kennen</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ok">
|
|
<strong>Stärken dieses Konzepts</strong>
|
|
<ul>
|
|
<li>Klar und vertraut — wenig kognitive Last für ältere Nutzer</li>
|
|
<li>Statistik-Kacheln motivieren zum Erkunden des Archivs</li>
|
|
<li>Konsistent mit bestehendem Card-Stil des Contributor-Dashboards</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ══ SECTION 2: MIT ENTWÜRFE-MODUL ══ -->
|
|
<div class="sec">
|
|
<div class="sec-h"><span class="sec-num">2</span> Variante · BLOG_WRITE — mit Zone 3 „Meine Entwürfe"</div>
|
|
|
|
<div class="sg sg-2">
|
|
<div class="sb">
|
|
<div class="sl">BLOG_WRITE-Nutzer <span class="sz">READ_ALL + BLOG_WRITE</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="av">MR</div></div>
|
|
</div>
|
|
<div class="N-accent"></div>
|
|
<div class="MAIN">
|
|
|
|
<!-- Zone 1: Greeting -->
|
|
<div class="GREET">
|
|
<div class="GREET-time">Guten Morgen</div>
|
|
<div class="GREET-name">Herzlich willkommen, Marcel.</div>
|
|
</div>
|
|
|
|
<!-- Zone 2: Stats -->
|
|
<div class="STATS">
|
|
<a class="STAT" href="#"><div class="STAT-num">847</div><div class="STAT-label">Dokumente</div></a>
|
|
<a class="STAT" href="#"><div class="STAT-num">94</div><div class="STAT-label">Personen</div></a>
|
|
<a class="STAT" href="#"><div class="STAT-num">12</div><div class="STAT-label">Geschichten</div></a>
|
|
</div>
|
|
|
|
<!-- Zone 3: Drafts — conditional -->
|
|
<div class="CARD" style="border-left:3px solid #A6DAD8">
|
|
<div class="CARD-HEAD">
|
|
<h3>Meine Entwürfe</h3>
|
|
</div>
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #F0EDE6">
|
|
<div>
|
|
<div style="font-family:Georgia,serif;font-size:8px;color:#002850">Onkel Friedrichs Wanderjahre</div>
|
|
<div style="font-size:6px;color:#AAA;margin-top:1px">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 style="display:flex;align-items:center;justify-content:space-between;padding:6px 10px">
|
|
<div>
|
|
<div style="font-family:Georgia,serif;font-size:8px;color:#002850">Die Raddatz-Kinder</div>
|
|
<div style="font-size:6px;color:#AAA;margin-top:1px">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>
|
|
|
|
<!-- Zone 4: Person chips -->
|
|
<div class="PERSONS-WRAP">
|
|
<div class="PERSONS-HEADER">
|
|
<span class="PERSONS-TITLE">Personen im Fokus</span>
|
|
<a class="PERSONS-ALL" href="#">Alle 94 Personen →</a>
|
|
</div>
|
|
<div class="CHIPS">
|
|
<a class="CHIP" href="#"><div class="CHIP-AV" style="background:#002850">KR</div>Käthe Raddatz<span class="CHIP-COUNT">47 Dok.</span></a>
|
|
<a class="CHIP" href="#"><div class="CHIP-AV" style="background:#1A4A6B">ER</div>Ernst Raddatz<span class="CHIP-COUNT">31 Dok.</span></a>
|
|
<a class="CHIP" href="#"><div class="CHIP-AV" style="background:#3D5A7A">FM</div>Frieda Müller<span class="CHIP-COUNT">28 Dok.</span></a>
|
|
<a class="CHIP" href="#"><div class="CHIP-AV" style="background:#4A7A5A">HW</div>Heinrich Weber<span class="CHIP-COUNT">19 Dok.</span></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Zone 5 (abbreviated) -->
|
|
<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="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#C8C4BE" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div>
|
|
<div class="DOC-INFO"><div class="DOC-TITLE">Brief von Ernst an Käthe, März 1923</div><div class="DOC-META">Käthe Raddatz</div></div>
|
|
<div class="DOC-DATE">vor 2 Tagen</div>
|
|
</div>
|
|
<div class="DOC-ROW">
|
|
<div class="DOC-THUMB"><svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#C8C4BE" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div>
|
|
<div class="DOC-INFO"><div class="DOC-TITLE">Heiratsurkunde Raddatz-Müller, 1898</div><div class="DOC-META" style="color:#DDD">—</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-META">vor 3 Tagen</div></div>
|
|
<div class="STORY-ROW"><div class="STORY-TITLE">Sommer 1934 in Köln</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-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>Zone 3 — Meine Entwürfe (nur BLOG_WRITE)</strong>
|
|
<ul>
|
|
<li>Mintfarbener linker Rand (3 px solid #A6DAD8) hebt die Zone ohne visuellen Lärm hervor</li>
|
|
<li>Erscheint zwischen Stats (Zone 2) und Personen (Zone 4) — gemäß Issue #447</li>
|
|
<li>Jeder Entwurf: Serif-Titel + Metazeile → Link auf /geschichten/[id]/edit</li>
|
|
<li>Leer-Zustand: „Keine Entwürfe" — kein CTA benötigt</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|