docs(spec): reader dashboard design exploration and final spec (#447)
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
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>
This commit is contained in:
Marcel
481
docs/specs/reader-dashboard-a-willkommen.html
Normal file
481
docs/specs/reader-dashboard-a-willkommen.html
Normal file
@@ -0,0 +1,481 @@
|
||||
<!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>
|
||||
480
docs/specs/reader-dashboard-b-ueberblick.html
Normal file
480
docs/specs/reader-dashboard-b-ueberblick.html
Normal file
@@ -0,0 +1,480 @@
|
||||
<!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 B · Überblick · 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}
|
||||
|
||||
/* ── Combined greeting + stats bar ─── */
|
||||
.HEADER-BAR{background:#fff;border:1px solid #E0DDD5;border-radius:3px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:16px}
|
||||
.HEADER-LEFT{}
|
||||
.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}
|
||||
.HEADER-STATS{display:flex;gap:0;border-left:1px solid #F0EDE6;padding-left:14px}
|
||||
.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}
|
||||
.HSTAT a:hover .HSTAT-NUM{color:#A6DAD8}
|
||||
|
||||
/* ── Person cards (larger than pills) ─── */
|
||||
.PERSON-CARDS{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
|
||||
.PCARD{background:#fff;border:1px solid #E0DDD5;border-radius:3px;padding:8px 10px;text-decoration:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
|
||||
.PCARD-AV{width:28px;height:28px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:900;flex-shrink:0}
|
||||
.PCARD-NAME{font-size:7px;font-weight:700;color:#002850;line-height:1.3}
|
||||
.PCARD-COUNT{font-size:6px;color:#A6DAD8;font-weight:800;background:#E8F4F4;padding:1px 6px;border-radius:10px}
|
||||
|
||||
.PERSONS-FOOTER{display:flex;justify-content:flex-end;margin-top:2px}
|
||||
.PERSONS-ALL-LINK{font-size:6.5px;color:#002850;font-weight:600;text-decoration:none;opacity:.6}
|
||||
|
||||
/* ── Two-column content row ─── */
|
||||
.CONTENT-ROW{display:grid;grid-template-columns:1fr 1fr;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 with thumbnail ─── */
|
||||
.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-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid #E0DDD5}
|
||||
.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 with 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}
|
||||
|
||||
/* ── 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 B · „Überblick"</h1>
|
||||
<p>Kompakte, strukturierte Gestaltung. Begrüßung und Statistik werden in einem gemeinsamen Querbalken kombiniert — spart vertikalen Platz. Personen erscheinen als quadratische Portrait-Karten mit großem Avatar. Geschichten zeigen einen kurzen Auszug für schnelle Orientierung.</p>
|
||||
</div>
|
||||
<span class="mast-badge">Konzept B · Entwurf</span>
|
||||
</div>
|
||||
<div class="decisions">
|
||||
<div class="dec">
|
||||
<div class="dec-label">Schwerpunkt</div>
|
||||
<div class="dec-value">Effizienz — alles auf einen Blick</div>
|
||||
</div>
|
||||
<div class="dec">
|
||||
<div class="dec-label">Header</div>
|
||||
<div class="dec-value">Gruß + Statistik in einem Querbalken</div>
|
||||
</div>
|
||||
<div class="dec">
|
||||
<div class="dec-label">Personen</div>
|
||||
<div class="dec-value">Portrait-Kacheln mit großem Avatar</div>
|
||||
</div>
|
||||
<div class="dec">
|
||||
<div class="dec-label">Geschichten</div>
|
||||
<div class="dec-value">Titel + Auszug (~2 Zeilen) + Datum</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 + 2: Combined header bar -->
|
||||
<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="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 -->
|
||||
<div>
|
||||
<div class="PERSON-CARDS">
|
||||
<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-LINK" href="#">Alle 94 Personen →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zone 5: Two-column (equal split) -->
|
||||
<div class="CONTENT-ROW">
|
||||
|
||||
<!-- Left: Recent docs with thumbnail + sender -->
|
||||
<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 24 30" fill="none" stroke="#C8C4BE" stroke-width="2"><path d="M4 2h10l6 6v20H4V2z"/><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-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 24 30" fill="none" stroke="#C8C4BE" stroke-width="2"><path d="M4 2h10l6 6v20H4V2z"/><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-SENDER" style="color:#DDD">—</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="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-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 24 30" fill="none" stroke="#C8C4BE" stroke-width="2"><path d="M4 2h10l6 6v20H4V2z"/><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-SENDER" style="color:#DDD">—</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="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-SENDER">von <a href="#">Frieda Müller</a></div>
|
||||
</div>
|
||||
<div class="DOC-DATE">vor 3 Wo.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Stories with excerpt -->
|
||||
<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 …</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 + 2 — Kombinierter Header-Balken</strong>
|
||||
<ul>
|
||||
<li>Begrüßung links, drei Statistiken rechts — alles in einer Karte</li>
|
||||
<li>Statistiken durch vertikale Trennlinien gegliedert, jede als <a>-Link</li>
|
||||
<li>Spart vertikalen Platz: weniger Scrollen für Nutzer auf kleineren Bildschirmen</li>
|
||||
<li>Stats-Zahlen: 24 px (real) — kleiner als Konzept A, aber immer noch gut lesbar</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ann-block">
|
||||
<strong>Zone 4 — Portrait-Kacheln</strong>
|
||||
<ul>
|
||||
<li>4-spaltig gleichbreit; Avatar 28 px (skaliert), Name + Zahl darunter</li>
|
||||
<li>Mint-farbene Zahl-Badge (#E8F4F4 / #A6DAD8) macht Dokumentanzahl prominent</li>
|
||||
<li>Kacheln sind vollflächige <a>-Links — barrierefrei</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="note">
|
||||
<strong>Zone 5 — Gleiches Spaltenbreite 1:1</strong>
|
||||
<ul>
|
||||
<li>Beide Spalten erhalten gleich viel Platz — Parität zwischen Dokumente und Geschichten</li>
|
||||
<li>Dokumente: Thumbnail-Platzhalter + Absender-Link in zweiter Zeile</li>
|
||||
<li>Geschichten: Auszug mit 2-Zeilen-Clamp — gibt Lesern mehr Kontext zum Klicken</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ok">
|
||||
<strong>Stärken dieses Konzepts</strong>
|
||||
<ul>
|
||||
<li>Kompakteste der drei Varianten — wenig Scrollbedarf</li>
|
||||
<li>Portrait-Kacheln helfen, Personen visuell zu „erkennen" (Avatar wird vertraut)</li>
|
||||
<li>Auszüge in der Geschichten-Spalte erhöhen die Klickwahrscheinlichkeit</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══ SECTION 2: BLOG_WRITE VARIANT ══ -->
|
||||
<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+2: Combined bar -->
|
||||
<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="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 3: Drafts -->
|
||||
<div class="CARD">
|
||||
<div class="CARD-HEAD" style="border-left:3px solid #A6DAD8;padding-left:8px">
|
||||
<h3>Meine Entwürfe</h3>
|
||||
<a href="#" style="font-size:6px;color:#002850;opacity:.5;text-decoration:none">→ Alle Geschichten</a>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid #F0EDE6">
|
||||
<div style="width:4px;height:4px;border-radius:50%;background:#A6DAD8;flex-shrink:0;margin-left:2px"></div>
|
||||
<div style="flex:1;min-width:0">
|
||||
<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;gap:8px;padding:6px 10px">
|
||||
<div style="width:4px;height:4px;border-radius:50%;background:#A6DAD8;flex-shrink:0;margin-left:2px"></div>
|
||||
<div style="flex:1;min-width:0">
|
||||
<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 -->
|
||||
<div>
|
||||
<div class="PERSON-CARDS">
|
||||
<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-LINK" href="#">Alle 94 Personen →</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="8" height="10" viewBox="0 0 24 30" fill="none" stroke="#C8C4BE" stroke-width="2"><path d="M4 2h10l6 6v20H4V2z"/><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-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 24 30" fill="none" stroke="#C8C4BE" stroke-width="2"><path d="M4 2h10l6 6v20H4V2z"/><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-SENDER" 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-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>Zone 3 — Entwürfe mit Mint-Dot-Indikator</strong>
|
||||
<ul>
|
||||
<li>Mint-Punkt vor jedem Entwurf signalisiert „unveröffentlicht" visuell</li>
|
||||
<li>Mint-Randakzent links (3 px) ohne Störung des Card-Rahmens</li>
|
||||
<li>Kompakter als Konzept A — fügt sich harmonisch zwischen Header und Personen ein</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
385
docs/specs/reader-dashboard-b1-hell.html
Normal file
385
docs/specs/reader-dashboard-b1-hell.html
Normal file
@@ -0,0 +1,385 @@
|
||||
<!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 & 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 & 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>
|
||||
421
docs/specs/reader-dashboard-b2-warm.html
Normal file
421
docs/specs/reader-dashboard-b2-warm.html
Normal file
@@ -0,0 +1,421 @@
|
||||
<!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.2 · Sanft & Warm · 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.2 — SANFT & WARM
|
||||
Header: sand-warm background (#FDFAF5), rounded stat pills
|
||||
Person cards: thin colored top accent strip per card
|
||||
Stories: 2-line excerpt + serif "Geschichte" label
|
||||
Columns: 3:2 docs wider
|
||||
════════════════════════════════════ */
|
||||
|
||||
/* Combined header — warm sand bg, rounded stat pills */
|
||||
.HEADER-BAR{background:#FDFAF5;border:1px solid #E8E3D8;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:#C8A87A;margin-bottom:2px}
|
||||
.HEADER-NAME{font-family:Georgia,serif;font-size:12px;color:#002850}
|
||||
.HEADER-STATS{display:flex;gap:5px;align-items:center}
|
||||
.HSTAT-PILL{text-align:center;padding:5px 10px;border:1px solid #E0DDD5;border-radius:20px;background:#fff;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:1px}
|
||||
.HSTAT-NUM{font-size:12px;font-weight:900;color:#002850;line-height:1;display:block}
|
||||
.HSTAT-LABEL{font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#B8B4AE;display:block}
|
||||
|
||||
/* Person cards — colored top accent strip */
|
||||
.PERSON-GRID{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
|
||||
.PCARD{background:#fff;border:1px solid #E0DDD5;border-radius:3px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;align-items:center;text-align:center}
|
||||
.PCARD-STRIP{height:3px;width:100%;flex-shrink:0}
|
||||
.PCARD-INNER{padding:8px 10px 9px;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
|
||||
.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:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#AAA}
|
||||
.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 3:2 */
|
||||
.CONTENT-ROW{display:grid;grid-template-columns:3fr 2fr;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 — with "Geschichte" label */
|
||||
.STORY-ROW{padding:7px 10px;border-bottom:1px solid #F0EDE6}
|
||||
.STORY-ROW:last-child{border-bottom:none}
|
||||
.STORY-LABEL{font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#C8C4BE;margin-bottom:2px}
|
||||
.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 */
|
||||
.DRAFTS-CARD{background:#FDFAF5;border:1px solid #E8E3D8;border-radius:3px;overflow:hidden}
|
||||
.DRAFTS-HEAD{padding:6px 10px 5px;border-bottom:1px solid #EEE9E0;display:flex;align-items:center;gap:5px}
|
||||
.DRAFTS-HEAD-DOT{width:6px;height:6px;border-radius:50%;background:#A6DAD8;flex-shrink:0}
|
||||
.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 #EEE9E0}
|
||||
.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.2 · „Sanft & Warm"</h1>
|
||||
<p>Wärmere Iteration von Konzept B. Der Header-Balken erhält einen Sand-Hintergrund (#FDFAF5) statt Weiß — dies erzeugt eine sanfte Abgrenzung zur Begrüßungszone ohne harte Kante. Statistiken erscheinen als abgerundete Pill-Kacheln. Jede Personenkachel bekommt einen schmalen farbigen Top-Akzentstreifen. Die Story-Spalte zeigt ein zusätzliches Kategorie-Label. Spalten 3:2 — Dokumente etwas breiter.</p>
|
||||
</div>
|
||||
<span class="mast-badge">B.2 · Entwurf</span>
|
||||
</div>
|
||||
<div class="decisions">
|
||||
<div class="dec"><div class="dec-label">Header-Bg</div><div class="dec-value">Sand-warm #FDFAF5 — Begrüßungszone spürbar abgegrenzt</div></div>
|
||||
<div class="dec"><div class="dec-label">Stats-Form</div><div class="dec-value">Abgerundete Pill-Kacheln (border-radius: 20 px)</div></div>
|
||||
<div class="dec"><div class="dec-label">Personen</div><div class="dec-value">3 px Top-Akzentstreifen je Kachel (Avatarfarbe)</div></div>
|
||||
<div class="dec"><div class="dec-label">Spaltenbreite</div><div class="dec-value">3 : 2 — Dokumente · Geschichten</div></div>
|
||||
<div class="dec"><div class="dec-label">Geschichten</div><div class="dec-value">Label „Geschichte" + kursiver Titel + 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: warm sand header + pill stats -->
|
||||
<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="HEADER-STATS">
|
||||
<a class="HSTAT-PILL" href="#">
|
||||
<span class="HSTAT-NUM">847</span>
|
||||
<span class="HSTAT-LABEL">Dokumente</span>
|
||||
</a>
|
||||
<a class="HSTAT-PILL" href="#">
|
||||
<span class="HSTAT-NUM">94</span>
|
||||
<span class="HSTAT-LABEL">Personen</span>
|
||||
</a>
|
||||
<a class="HSTAT-PILL" href="#">
|
||||
<span class="HSTAT-NUM">12</span>
|
||||
<span class="HSTAT-LABEL">Geschichten</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zone 4: person cards with colored top strip -->
|
||||
<div>
|
||||
<div class="PERSON-GRID">
|
||||
<a class="PCARD" href="#">
|
||||
<div class="PCARD-STRIP" style="background:#002850"></div>
|
||||
<div class="PCARD-INNER">
|
||||
<div class="PCARD-AV" style="background:#002850">KR</div>
|
||||
<div class="PCARD-NAME">Käthe Raddatz</div>
|
||||
<div class="PCARD-COUNT">47 Dokumente</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="PCARD" href="#">
|
||||
<div class="PCARD-STRIP" style="background:#1A4A6B"></div>
|
||||
<div class="PCARD-INNER">
|
||||
<div class="PCARD-AV" style="background:#1A4A6B">ER</div>
|
||||
<div class="PCARD-NAME">Ernst Raddatz</div>
|
||||
<div class="PCARD-COUNT">31 Dokumente</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="PCARD" href="#">
|
||||
<div class="PCARD-STRIP" style="background:#3D5A7A"></div>
|
||||
<div class="PCARD-INNER">
|
||||
<div class="PCARD-AV" style="background:#3D5A7A">FM</div>
|
||||
<div class="PCARD-NAME">Frieda Müller</div>
|
||||
<div class="PCARD-COUNT">28 Dokumente</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="PCARD" href="#">
|
||||
<div class="PCARD-STRIP" style="background:#4A7A5A"></div>
|
||||
<div class="PCARD-INNER">
|
||||
<div class="PCARD-AV" style="background:#4A7A5A">HW</div>
|
||||
<div class="PCARD-NAME">Heinrich Weber</div>
|
||||
<div class="PCARD-COUNT">19 Dokumente</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="PERSONS-FOOTER"><a class="PERSONS-ALL" href="#">Alle 94 Personen →</a></div>
|
||||
</div>
|
||||
|
||||
<!-- Zone 5: 3:2 columns, stories with label -->
|
||||
<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-LABEL">Geschichte</div>
|
||||
<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-LABEL">Geschichte</div>
|
||||
<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 …</div>
|
||||
<div class="STORY-META">vor 2 Wochen</div>
|
||||
</div>
|
||||
<div class="STORY-ROW">
|
||||
<div class="STORY-LABEL">Geschichte</div>
|
||||
<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 …</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 — Sandfarben + Pill-Stats</strong>
|
||||
<ul>
|
||||
<li>Hintergrund #FDFAF5 — kaum wahrnehmbar wärmer als Weiß, aber spürbar verschieden</li>
|
||||
<li>Stats als Pill-Kacheln (border-radius: 20 px) — weicher, weniger „Tabellen"-Charakter</li>
|
||||
<li>Pills sind vollständige <a>-Elemente; große Touch-Target auch auf Tablet</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ann-block">
|
||||
<strong>Personen-Kacheln — Top-Akzentstreifen</strong>
|
||||
<ul>
|
||||
<li>3 px hoher Streifen oben: gleiche Farbe wie Avatar — verbindet Streifen und Bild visuell</li>
|
||||
<li>Erzeugt ein „Lesezeichen"-Gefühl: jede Person hat ihre eigene Erkennungsfarbe</li>
|
||||
<li>Umsetzung: border-top: 3px solid [avatarfarbe] auf .PCARD — kein extra Element nötig</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="note">
|
||||
<strong>3:2 Spaltenbreite</strong>
|
||||
<ul>
|
||||
<li>Dokumente bekommen mehr Platz (3) — als primäres Archiv-Element gewichtet</li>
|
||||
<li>Geschichten-Spalte ist schmaler, aber durch das Story-Label visuell nicht schwächer</li>
|
||||
<li>Auf < md stacken beide Spalten vertikal (wie alle anderen Varianten)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ok">
|
||||
<strong>Stärken dieser Iteration</strong>
|
||||
<ul>
|
||||
<li>Warmster Charakter der drei B-Iterationen — Archiv fühlt sich familiärer an</li>
|
||||
<li>Top-Streifen gibt Personenkacheln Persönlichkeit ohne Foto oder mehr Daten</li>
|
||||
<li>Pill-Stats wirken weniger formal — besser für nicht-technische Leser</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">
|
||||
<!-- Header -->
|
||||
<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="HEADER-STATS">
|
||||
<a class="HSTAT-PILL" href="#"><span class="HSTAT-NUM">847</span><span class="HSTAT-LABEL">Dokumente</span></a>
|
||||
<a class="HSTAT-PILL" href="#"><span class="HSTAT-NUM">94</span><span class="HSTAT-LABEL">Personen</span></a>
|
||||
<a class="HSTAT-PILL" href="#"><span class="HSTAT-NUM">12</span><span class="HSTAT-LABEL">Geschichten</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Drafts — sand bg matches header -->
|
||||
<div class="DRAFTS-CARD">
|
||||
<div class="DRAFTS-HEAD">
|
||||
<div class="DRAFTS-HEAD-DOT"></div>
|
||||
<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-STRIP" style="background:#002850"></div><div class="PCARD-INNER"><div class="PCARD-AV" style="background:#002850">KR</div><div class="PCARD-NAME">Käthe Raddatz</div><div class="PCARD-COUNT">47 Dok.</div></div></a>
|
||||
<a class="PCARD" href="#"><div class="PCARD-STRIP" style="background:#1A4A6B"></div><div class="PCARD-INNER"><div class="PCARD-AV" style="background:#1A4A6B">ER</div><div class="PCARD-NAME">Ernst Raddatz</div><div class="PCARD-COUNT">31 Dok.</div></div></a>
|
||||
<a class="PCARD" href="#"><div class="PCARD-STRIP" style="background:#3D5A7A"></div><div class="PCARD-INNER"><div class="PCARD-AV" style="background:#3D5A7A">FM</div><div class="PCARD-NAME">Frieda Müller</div><div class="PCARD-COUNT">28 Dok.</div></div></a>
|
||||
<a class="PCARD" href="#"><div class="PCARD-STRIP" style="background:#4A7A5A"></div><div class="PCARD-INNER"><div class="PCARD-AV" style="background:#4A7A5A">HW</div><div class="PCARD-NAME">Heinrich Weber</div><div class="PCARD-COUNT">19 Dok.</div></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 …</div>
|
||||
</div>
|
||||
<div class="CARD">
|
||||
<div class="CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle</a></div>
|
||||
<div class="STORY-ROW"><div class="STORY-LABEL">Geschichte</div><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-LABEL">Geschichte</div><div class="STORY-TITLE">Sommer 1934 in Köln</div><div class="STORY-EXCERPT">Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …</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 — Sand-Hintergrund + Mint-Dot</strong>
|
||||
<ul>
|
||||
<li>Card-Hintergrund #FDFAF5 — gleich wie der Header-Balken: Entwürfe fühlen sich als Teil des „eigenen Bereichs" an</li>
|
||||
<li>Mint-Dot vor dem Titel statt Border — subtiler, luftiger Akzent</li>
|
||||
<li>Kontext: BLOG_WRITE-Nutzer schreibt Geschichten → sand-getönte Karte passt zur redaktionellen Rolle</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
437
docs/specs/reader-dashboard-b3-navy.html
Normal file
437
docs/specs/reader-dashboard-b3-navy.html
Normal file
@@ -0,0 +1,437 @@
|
||||
<!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.3 · Navy & Kontrast · 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:0;background:#F5F4EF;display:flex;flex-direction:column;gap:0}
|
||||
|
||||
/* ════════════════════════════════════
|
||||
B.3 — NAVY & KONTRAST
|
||||
Header: full navy bg (#002850), white greeting, mint stats
|
||||
Person cards: larger avatar (34px), mint count badge prominent
|
||||
Stories: 2-line excerpt, mint left accent on hover row
|
||||
Columns: 1:1 equal
|
||||
Note: MAIN has no padding — navy header bleeds to edges
|
||||
════════════════════════════════════ */
|
||||
|
||||
/* Combined header — full navy, white text, mint stats */
|
||||
.HEADER-NAVY{background:#002850;padding:12px 16px;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:rgba(166,218,216,.6);margin-bottom:3px}
|
||||
.HEADER-NAME{font-family:Georgia,serif;font-size:12px;color:#fff;line-height:1.2}
|
||||
.HEADER-DIVIDER{width:1px;background:rgba(255,255,255,.12);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 rgba(255,255,255,.1)}
|
||||
.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:#A6DAD8;line-height:1;display:block}
|
||||
.HSTAT-LABEL{font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.4);display:block;margin-top:2px}
|
||||
|
||||
/* Thin mint separator between header and page body */
|
||||
.HEADER-ACCENT{height:2px;background:#A6DAD8;flex-shrink:0}
|
||||
|
||||
/* Inner page padding (below the navy header) */
|
||||
.INNER{padding:12px 16px;display:flex;flex-direction:column;gap:8px}
|
||||
|
||||
/* Person cards — larger avatar, mint count badge */
|
||||
.PERSON-GRID{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
|
||||
.PCARD{background:#fff;border:1px solid #E0DDD5;border-radius:3px;padding:10px 10px 9px;text-decoration:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;box-shadow:0 1px 3px rgba(0,40,80,.04)}
|
||||
.PCARD-AV{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;color:#fff;flex-shrink:0;box-shadow:0 2px 6px rgba(0,40,80,.2)}
|
||||
.PCARD-NAME{font-size:7px;font-weight:700;color:#002850;line-height:1.3}
|
||||
.PCARD-BADGE{font-size:5.5px;font-weight:800;color:#002850;background:#D4F0EE;padding:1px 6px;border-radius:10px}
|
||||
.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;box-shadow:0 1px 3px rgba(0,40,80,.04)}
|
||||
.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 — mint left accent strip */
|
||||
.STORY-ROW{display:flex;gap:0;border-bottom:1px solid #F0EDE6}
|
||||
.STORY-ROW:last-child{border-bottom:none}
|
||||
.STORY-ACCENT{width:2px;background:#A6DAD8;flex-shrink:0;margin:6px 0}
|
||||
.STORY-BODY{padding:6px 10px;flex:1;min-width:0}
|
||||
.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 — navy tint card */
|
||||
.DRAFTS-CARD{background:#fff;border:1px solid #E0DDD5;border-radius:3px;overflow:hidden;box-shadow:0 1px 3px rgba(0,40,80,.04)}
|
||||
.DRAFTS-HEAD{background:#002850;padding:6px 10px 5px;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:rgba(166,218,216,.8)}
|
||||
.DRAFT-ROW{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid #F0EDE6}
|
||||
.DRAFT-ROW:last-child{border-bottom:none}
|
||||
.DRAFT-DOT{width:5px;height:5px;border-radius:50%;background:#A6DAD8;flex-shrink:0}
|
||||
.DRAFT-INFO{flex:1;min-width:0}
|
||||
.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.3 · „Navy & Kontrast"</h1>
|
||||
<p>Markanteste Iteration von Konzept B. Der Header-Balken übernimmt die volle Navy-Farbe der App-Navigation (#002850) — Begrüßung in Weiß, Statistik-Zahlen in Mintgrün. Die Kacheln im Seitenbereich (weiß + Schatten) heben sich stark ab. Personen-Avatare sind größer (34 px) mit leichtem Schatten. Story-Zeilen haben einen fixen mintgrünen Akzentstreifen links.</p>
|
||||
</div>
|
||||
<span class="mast-badge">B.3 · Entwurf</span>
|
||||
</div>
|
||||
<div class="decisions">
|
||||
<div class="dec"><div class="dec-label">Header-Bg</div><div class="dec-value">Navy #002850 — gespiegelt aus App-Nav</div></div>
|
||||
<div class="dec"><div class="dec-label">Stats-Farbe</div><div class="dec-value">Mint #A6DAD8 auf Navy — maximaler Kontrast</div></div>
|
||||
<div class="dec"><div class="dec-label">Personen</div><div class="dec-value">Größerer Avatar (34 px) + Badge mit mint Bg</div></div>
|
||||
<div class="dec"><div class="dec-label">Geschichten</div><div class="dec-value">2 px Mint-Streifen links + 2-Zeilen-Auszug</div></div>
|
||||
<div class="dec"><div class="dec-label">Spaltenbreite</div><div class="dec-value">1 : 1 gleichwertig</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>
|
||||
|
||||
<!-- Nav bar -->
|
||||
<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>
|
||||
<!-- Note: no N-accent here — header bleeds directly into navy header bar -->
|
||||
|
||||
<div class="MAIN">
|
||||
|
||||
<!-- Zone 1+2: full navy header — blends with nav visually -->
|
||||
<div class="HEADER-NAVY">
|
||||
<div class="HEADER-LEFT">
|
||||
<div class="HEADER-TIME">Guten Abend</div>
|
||||
<div class="HEADER-NAME">Herzlich willkommen, Brigitte.</div>
|
||||
</div>
|
||||
<div class="HEADER-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>
|
||||
<div class="HEADER-ACCENT"></div>
|
||||
|
||||
<div class="INNER">
|
||||
|
||||
<!-- Zone 4: Person cards — larger avatar, mint badge -->
|
||||
<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-BADGE">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-BADGE">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-BADGE">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-BADGE">19 Dok.</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="PERSONS-FOOTER"><a class="PERSONS-ALL" href="#">Alle 94 Personen →</a></div>
|
||||
</div>
|
||||
|
||||
<!-- Zone 5: 1:1, stories with mint accent strip -->
|
||||
<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-ACCENT"></div>
|
||||
<div class="STORY-BODY">
|
||||
<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>
|
||||
<div class="STORY-ROW">
|
||||
<div class="STORY-ACCENT"></div>
|
||||
<div class="STORY-BODY">
|
||||
<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>
|
||||
<div class="STORY-ROW">
|
||||
<div class="STORY-ACCENT"></div>
|
||||
<div class="STORY-BODY">
|
||||
<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><!-- /INNER -->
|
||||
</div><!-- /MAIN -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:10px;padding-top:40px">
|
||||
<div class="ann-block">
|
||||
<strong>Header-Balken — Vollflächiges Navy</strong>
|
||||
<ul>
|
||||
<li>Gleiche Farbe (#002850) wie die App-Navigation direkt darüber</li>
|
||||
<li>Effekt: Nav und Header verschmelzen optisch zu einer „Kopfzone" der Seite</li>
|
||||
<li>Mint-Trennlinie (2 px, wie N-accent) trennt Header sauber vom Canvas</li>
|
||||
<li>Begrüßungstext weiß → maximale Lesbarkeit, serif bleibt erhalten</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ann-block">
|
||||
<strong>Stats in Mint auf Navy</strong>
|
||||
<ul>
|
||||
<li>Zahlen in #A6DAD8 — gleiche Farbe wie N-accent und bestehende Mint-Akzente</li>
|
||||
<li>Sehr hoher Kontrast; klar als Zahlen erkennbar ohne Tooltip oder Label-Hilfe</li>
|
||||
<li>Labels in rgba(255,255,255,.4) — gedämpft, aber lesbar</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="note">
|
||||
<strong>Personen-Avatar — 34 px mit Schatten</strong>
|
||||
<ul>
|
||||
<li>5 px größerer Avatar als B.1/B.2 — gibt Kacheln mehr „Gesicht"</li>
|
||||
<li>Leichter box-shadow auf Avatar macht ihn dreidimensionaler, erinnert an Foto</li>
|
||||
<li>Mint-Badge (#D4F0EE / #002850) statt einfachem Grau-Text für Dokumentzahl</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ok">
|
||||
<strong>Stärken dieser Iteration</strong>
|
||||
<ul>
|
||||
<li>Stärkste Markenpräsenz — Navy + Mint als Leitfarben treten klar hervor</li>
|
||||
<li>Header-Zone kommuniziert „Willkommen im Archiv" — persönlicher Empfang</li>
|
||||
<li>Mint-Akzent auf Story-Zeilen verankert den Geschichten-Bereich im Brand</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="MAIN">
|
||||
<!-- Navy header -->
|
||||
<div class="HEADER-NAVY">
|
||||
<div class="HEADER-LEFT"><div class="HEADER-TIME">Guten Morgen</div><div class="HEADER-NAME">Herzlich willkommen, Marcel.</div></div>
|
||||
<div class="HEADER-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>
|
||||
<div class="HEADER-ACCENT"></div>
|
||||
<div class="INNER">
|
||||
<!-- Drafts — navy header on card mirrors main header -->
|
||||
<div class="DRAFTS-CARD">
|
||||
<div class="DRAFTS-HEAD">
|
||||
<h3>Meine Entwürfe</h3>
|
||||
</div>
|
||||
<div class="DRAFT-ROW">
|
||||
<div class="DRAFT-DOT"></div>
|
||||
<div class="DRAFT-INFO">
|
||||
<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 class="DRAFT-DOT"></div>
|
||||
<div class="DRAFT-INFO">
|
||||
<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-BADGE">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-BADGE">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-BADGE">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-BADGE">19 Dok.</div></a>
|
||||
</div>
|
||||
<div class="PERSONS-FOOTER"><a class="PERSONS-ALL" href="#">Alle 94 Personen →</a></div>
|
||||
</div>
|
||||
<!-- Content row (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="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 …</div>
|
||||
</div>
|
||||
<div class="CARD">
|
||||
<div class="CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle</a></div>
|
||||
<div class="STORY-ROW"><div class="STORY-ACCENT"></div><div class="STORY-BODY"><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>
|
||||
<div class="STORY-ROW"><div class="STORY-ACCENT"></div><div class="STORY-BODY"><div class="STORY-TITLE">Sommer 1934 in Köln</div><div class="STORY-EXCERPT">Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …</div><div class="STORY-META">vor 2 Wochen</div></div></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 — Navy Header auf Card</strong>
|
||||
<ul>
|
||||
<li>Card-Header in #002850 mit Mint-Label — spiegelt den Haupt-Header-Balken</li>
|
||||
<li>Schafft visuelle Verbindung: „Meine Entwürfe" gehört zur Autorenrolle, die auch im Gruß adressiert wird</li>
|
||||
<li>Mint-Dot pro Entwurf-Zeile als einziges farbiges Element im White-Bereich der Card</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
480
docs/specs/reader-dashboard-c-entdecken.html
Normal file
480
docs/specs/reader-dashboard-c-entdecken.html
Normal file
@@ -0,0 +1,480 @@
|
||||
<!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 C · Entdecken · 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 (inline, minimal) ─── */
|
||||
.GREET-INLINE{display:flex;align-items:baseline;justify-content:space-between;padding:0 2px}
|
||||
.GREET-TEXT{font-family:Georgia,serif;font-size:11px;color:#002850}
|
||||
.GREET-TEXT span{color:#AAA;font-family:'Helvetica Neue',Arial,sans-serif;font-size:6.5px;margin-right:4px}
|
||||
|
||||
/* ── Stats strip (compact inline) ─── */
|
||||
.STATS-SLIM{background:#fff;border:1px solid #E0DDD5;border-radius:3px;padding:6px 12px;display:flex;align-items:center;gap:0}
|
||||
.SSTAT{display:flex;align-items:baseline;gap:4px;padding:0 12px;border-right:1px solid #F0EDE6;text-decoration:none}
|
||||
.SSTAT:first-child{padding-left:0}
|
||||
.SSTAT:last-child{border-right:none}
|
||||
.SSTAT-NUM{font-size:13px;font-weight:900;color:#002850;line-height:1}
|
||||
.SSTAT-LABEL{font-size:6px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#B8B4AE}
|
||||
|
||||
/* ── Person chips (horizontal, colored fill) ─── */
|
||||
.PERSONS-BAND{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-LINK{font-size:6.5px;color:#002850;font-weight:600;text-decoration:none;opacity:.6}
|
||||
.CHIPS-COLORED{display:flex;flex-wrap:wrap;gap:5px}
|
||||
.CHIP-COL{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 4px;border-radius:3px;text-decoration:none;background:#fff;border:1px solid #E0DDD5}
|
||||
.CHIP-COL-AV{width:20px;height:20px;border-radius:2px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:900;flex-shrink:0}
|
||||
.CHIP-COL-BODY{}
|
||||
.CHIP-COL-NAME{font-size:7px;font-weight:700;color:#002850;display:block;line-height:1.2}
|
||||
.CHIP-COL-COUNT{font-size:5.5px;color:#AAA;display:block}
|
||||
|
||||
/* ── Two-column content row ─── */
|
||||
.CONTENT-ROW{display:grid;grid-template-columns:2fr 3fr;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 (slim) ─── */
|
||||
.DOC-ROW-SLIM{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:5px 10px;border-bottom:1px solid #F0EDE6}
|
||||
.DOC-ROW-SLIM:last-child{border-bottom:none}
|
||||
.DOC-TITLE-SLIM{font-family:Georgia,serif;font-size:7.5px;color:#002850;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.DOC-DATE-SLIM{font-size:6px;color:#C8C4BE;white-space:nowrap;flex-shrink:0}
|
||||
|
||||
/* ── Stories: Featured + slim list ─── */
|
||||
.STORY-FEATURED{padding:9px 10px;border-bottom:2px solid #F0EDE6;background:#FDFAF5}
|
||||
.STORY-FEATURED-LABEL{font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#A6DAD8;margin-bottom:4px}
|
||||
.STORY-FEATURED-TITLE{font-family:Georgia,serif;font-size:10px;color:#002850;font-style:italic;margin-bottom:4px;line-height:1.4}
|
||||
.STORY-FEATURED-EXCERPT{font-size:7px;color:#888;line-height:1.55;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
|
||||
.STORY-FEATURED-META{font-size:6px;color:#B8B4AE}
|
||||
|
||||
.STORY-ROW-SLIM{display:flex;align-items:baseline;gap:6px;padding:5px 10px;border-bottom:1px solid #F0EDE6}
|
||||
.STORY-ROW-SLIM:last-child{border-bottom:none}
|
||||
.STORY-TITLE-SLIM{font-family:Georgia,serif;font-size:7.5px;color:#002850;font-style:italic;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.STORY-DATE-SLIM{font-size:6px;color:#C8C4BE;white-space:nowrap;flex-shrink:0}
|
||||
|
||||
/* ── 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 C · „Entdecken"</h1>
|
||||
<p>Leseorientierte Gestaltung — Geschichten stehen im Mittelpunkt. Die Statistik ist auf ein schlankes Querband reduziert. Personen erscheinen als flache quadratische Chips mit vollfarbigem Initialen-Feld. Die aktuellste Geschichte erhält einen eigenen Featured-Block mit Auszug; zwei weitere folgen als kompakte Liste.</p>
|
||||
</div>
|
||||
<span class="mast-badge">Konzept C · Entwurf</span>
|
||||
</div>
|
||||
<div class="decisions">
|
||||
<div class="dec">
|
||||
<div class="dec-label">Schwerpunkt</div>
|
||||
<div class="dec-value">Geschichten als primäres Erlebnis</div>
|
||||
</div>
|
||||
<div class="dec">
|
||||
<div class="dec-label">Statistik</div>
|
||||
<div class="dec-value">Inline-Strip — Text statt Kacheln</div>
|
||||
</div>
|
||||
<div class="dec">
|
||||
<div class="dec-label">Personen-Chips</div>
|
||||
<div class="dec-value">Quadratischer Avatar + Name + Zahl</div>
|
||||
</div>
|
||||
<div class="dec">
|
||||
<div class="dec-label">Geschichten</div>
|
||||
<div class="dec-value">Featured Block (3 Zeilen Auszug) + 2 slim</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 (inline minimal) -->
|
||||
<div class="GREET-INLINE">
|
||||
<div class="GREET-TEXT">
|
||||
<span>Guten Abend —</span>Herzlich willkommen, Brigitte.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zone 2: Stats (compact band) -->
|
||||
<div class="STATS-SLIM">
|
||||
<a class="SSTAT" href="#">
|
||||
<span class="SSTAT-NUM">847</span>
|
||||
<span class="SSTAT-LABEL">Dokumente</span>
|
||||
</a>
|
||||
<a class="SSTAT" href="#">
|
||||
<span class="SSTAT-NUM">94</span>
|
||||
<span class="SSTAT-LABEL">Personen</span>
|
||||
</a>
|
||||
<a class="SSTAT" href="#">
|
||||
<span class="SSTAT-NUM">12</span>
|
||||
<span class="SSTAT-LABEL">Geschichten</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Zone 4: Person chips (colored square avatar) -->
|
||||
<div class="PERSONS-BAND">
|
||||
<div class="PERSONS-HEADER">
|
||||
<span class="PERSONS-TITLE">Personen im Fokus</span>
|
||||
<a class="PERSONS-ALL-LINK" href="#">Alle 94 Personen →</a>
|
||||
</div>
|
||||
<div class="CHIPS-COLORED">
|
||||
<a class="CHIP-COL" href="#">
|
||||
<div class="CHIP-COL-AV" style="background:#002850">KR</div>
|
||||
<div class="CHIP-COL-BODY">
|
||||
<span class="CHIP-COL-NAME">Käthe Raddatz</span>
|
||||
<span class="CHIP-COL-COUNT">47 Dok.</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="CHIP-COL" href="#">
|
||||
<div class="CHIP-COL-AV" style="background:#1A4A6B">ER</div>
|
||||
<div class="CHIP-COL-BODY">
|
||||
<span class="CHIP-COL-NAME">Ernst Raddatz</span>
|
||||
<span class="CHIP-COL-COUNT">31 Dok.</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="CHIP-COL" href="#">
|
||||
<div class="CHIP-COL-AV" style="background:#3D5A7A">FM</div>
|
||||
<div class="CHIP-COL-BODY">
|
||||
<span class="CHIP-COL-NAME">Frieda Müller</span>
|
||||
<span class="CHIP-COL-COUNT">28 Dok.</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="CHIP-COL" href="#">
|
||||
<div class="CHIP-COL-AV" style="background:#4A7A5A">HW</div>
|
||||
<div class="CHIP-COL-BODY">
|
||||
<span class="CHIP-COL-NAME">Heinrich Weber</span>
|
||||
<span class="CHIP-COL-COUNT">19 Dok.</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zone 5: Docs LEFT (slim), Stories RIGHT (featured) — 2:3 -->
|
||||
<div class="CONTENT-ROW">
|
||||
|
||||
<!-- Left: Docs slim list -->
|
||||
<div class="CARD">
|
||||
<div class="CARD-HEAD">
|
||||
<h3>Zuletzt aktualisiert</h3>
|
||||
<a href="#">Alle Dokumente</a>
|
||||
</div>
|
||||
<div class="DOC-ROW-SLIM">
|
||||
<div class="DOC-TITLE-SLIM">Brief von Ernst an Käthe, März 1923</div>
|
||||
<div class="DOC-DATE-SLIM">vor 2 Tagen</div>
|
||||
</div>
|
||||
<div class="DOC-ROW-SLIM">
|
||||
<div class="DOC-TITLE-SLIM">Heiratsurkunde Raddatz-Müller, 1898</div>
|
||||
<div class="DOC-DATE-SLIM">vor 4 Tagen</div>
|
||||
</div>
|
||||
<div class="DOC-ROW-SLIM">
|
||||
<div class="DOC-TITLE-SLIM">Familienfoto, Sommer 1928</div>
|
||||
<div class="DOC-DATE-SLIM">vor 1 Woche</div>
|
||||
</div>
|
||||
<div class="DOC-ROW-SLIM">
|
||||
<div class="DOC-TITLE-SLIM">Taufregister Heinrich Weber, 1902</div>
|
||||
<div class="DOC-DATE-SLIM">vor 2 Wo.</div>
|
||||
</div>
|
||||
<div class="DOC-ROW-SLIM">
|
||||
<div class="DOC-TITLE-SLIM">Postkarte aus Berlin, 1930</div>
|
||||
<div class="DOC-DATE-SLIM">vor 3 Wo.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Stories — Featured + slim -->
|
||||
<div class="CARD">
|
||||
<div class="CARD-HEAD">
|
||||
<h3>Geschichten</h3>
|
||||
<a href="#">Alle Geschichten</a>
|
||||
</div>
|
||||
|
||||
<!-- Featured story -->
|
||||
<div class="STORY-FEATURED">
|
||||
<div class="STORY-FEATURED-LABEL">Neueste Geschichte</div>
|
||||
<div class="STORY-FEATURED-TITLE">Die Reise nach Berlin</div>
|
||||
<div class="STORY-FEATURED-EXCERPT">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden. Was als abenteuerliche Reise begann, wurde zur Schicksalswende für die gesamte Familie …</div>
|
||||
<div class="STORY-FEATURED-META">vor 3 Tagen</div>
|
||||
</div>
|
||||
|
||||
<!-- Slim list -->
|
||||
<div class="STORY-ROW-SLIM">
|
||||
<div class="STORY-TITLE-SLIM">Sommer 1934 in Köln</div>
|
||||
<div class="STORY-DATE-SLIM">vor 2 Wochen</div>
|
||||
</div>
|
||||
<div class="STORY-ROW-SLIM">
|
||||
<div class="STORY-TITLE-SLIM">Briefe aus dem Krieg</div>
|
||||
<div class="STORY-DATE-SLIM">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 — Minimale Begrüßung</strong>
|
||||
<ul>
|
||||
<li>Kein eigener Card-Container — reine Textzeile, platzsparend</li>
|
||||
<li>„Guten Abend —" in gedämpftem Grau vor Serif-Begrüßungstext</li>
|
||||
<li>Beibehaltung der Tageszeit-Dynamik ohne visuelle Lautstärke</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ann-block">
|
||||
<strong>Zone 2 — Kompakter Stats-Strip</strong>
|
||||
<ul>
|
||||
<li>Zahlen inline mit Label — keine separaten Kacheln</li>
|
||||
<li>Gleicher Informationsgehalt wie Konzept A/B, aber ~60 % weniger Höhe</li>
|
||||
<li>Klickbar als vollständige <a>-Elemente</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="note">
|
||||
<strong>Zone 4 — Quadratische Personen-Chips</strong>
|
||||
<ul>
|
||||
<li>Quadratischer Avatar (border-radius: 2 px statt 50 %) — wirkt archiv-artig, leicht dokumentarisch</li>
|
||||
<li>Name + Dokumentzahl übereinander — kompakt und lesbar</li>
|
||||
<li>Chips wrappen bei schmalem Viewport automatisch</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="note">
|
||||
<strong>Zone 5 — Geschichten als Featured Block</strong>
|
||||
<ul>
|
||||
<li>Neueste Geschichte erhält sand-getönten Hintergrund + 3-Zeilen-Auszug</li>
|
||||
<li>Mint-Label „Neueste Geschichte" differenziert vom restlichen Geschichten-Content</li>
|
||||
<li>Die zwei weiteren Geschichten folgen als slim-Zeilen → reduziert auf Titel + Datum</li>
|
||||
<li>Dokumente-Spalte ist bewusst schlanker (2:3) — gibt Geschichten Raum</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ok">
|
||||
<strong>Stärken dieses Konzepts</strong>
|
||||
<ul>
|
||||
<li>Stärkt die narrative Dimension des Archivs — Geschichten als Hauptfenster</li>
|
||||
<li>Featured-Block lädt zum Lesen ein, ohne dass ein gesonderter Story-Bereich nötig ist</li>
|
||||
<li>Kompaktester Header → mehr Inhalt „above the fold"</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══ SECTION 2: BLOG_WRITE VARIANT ══ -->
|
||||
<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 inline -->
|
||||
<div class="GREET-INLINE">
|
||||
<div class="GREET-TEXT"><span>Guten Morgen —</span>Herzlich willkommen, Marcel.</div>
|
||||
</div>
|
||||
|
||||
<!-- Zone 2 stats -->
|
||||
<div class="STATS-SLIM">
|
||||
<a class="SSTAT" href="#"><span class="SSTAT-NUM">847</span><span class="SSTAT-LABEL">Dokumente</span></a>
|
||||
<a class="SSTAT" href="#"><span class="SSTAT-NUM">94</span><span class="SSTAT-LABEL">Personen</span></a>
|
||||
<a class="SSTAT" href="#"><span class="SSTAT-NUM">12</span><span class="SSTAT-LABEL">Geschichten</span></a>
|
||||
</div>
|
||||
|
||||
<!-- Zone 3: Drafts -->
|
||||
<div style="background:#fff;border:1px solid #E0DDD5;border-radius:3px;overflow:hidden">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:6px 10px 5px;border-bottom:1px solid #E0DDD5;background:rgba(166,218,216,.08)">
|
||||
<div style="display:flex;align-items:center;gap:5px">
|
||||
<div style="width:2px;height:12px;background:#A6DAD8;border-radius:1px"></div>
|
||||
<span style="font-size:6.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#999">Meine Entwürfe</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:5px 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:5px 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 -->
|
||||
<div class="PERSONS-BAND">
|
||||
<div class="PERSONS-HEADER">
|
||||
<span class="PERSONS-TITLE">Personen im Fokus</span>
|
||||
<a class="PERSONS-ALL-LINK" href="#">Alle 94 Personen →</a>
|
||||
</div>
|
||||
<div class="CHIPS-COLORED">
|
||||
<a class="CHIP-COL" href="#"><div class="CHIP-COL-AV" style="background:#002850">KR</div><div class="CHIP-COL-BODY"><span class="CHIP-COL-NAME">Käthe Raddatz</span><span class="CHIP-COL-COUNT">47 Dok.</span></div></a>
|
||||
<a class="CHIP-COL" href="#"><div class="CHIP-COL-AV" style="background:#1A4A6B">ER</div><div class="CHIP-COL-BODY"><span class="CHIP-COL-NAME">Ernst Raddatz</span><span class="CHIP-COL-COUNT">31 Dok.</span></div></a>
|
||||
<a class="CHIP-COL" href="#"><div class="CHIP-COL-AV" style="background:#3D5A7A">FM</div><div class="CHIP-COL-BODY"><span class="CHIP-COL-NAME">Frieda Müller</span><span class="CHIP-COL-COUNT">28 Dok.</span></div></a>
|
||||
<a class="CHIP-COL" href="#"><div class="CHIP-COL-AV" style="background:#4A7A5A">HW</div><div class="CHIP-COL-BODY"><span class="CHIP-COL-NAME">Heinrich Weber</span><span class="CHIP-COL-COUNT">19 Dok.</span></div></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-SLIM"><div class="DOC-TITLE-SLIM">Brief von Ernst an Käthe, März 1923</div><div class="DOC-DATE-SLIM">vor 2 Tagen</div></div>
|
||||
<div class="DOC-ROW-SLIM"><div class="DOC-TITLE-SLIM">Heiratsurkunde Raddatz-Müller, 1898</div><div class="DOC-DATE-SLIM">vor 4 Tagen</div></div>
|
||||
<div class="DOC-ROW-SLIM"><div class="DOC-TITLE-SLIM">Familienfoto, Sommer 1928</div><div class="DOC-DATE-SLIM">vor 1 Woche</div></div>
|
||||
<div style="padding:5px 10px;font-size:6px;color:#C8C4BE;border-top:1px solid #F0EDE6">+ 2 weitere …</div>
|
||||
</div>
|
||||
<div class="CARD">
|
||||
<div class="CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle</a></div>
|
||||
<div class="STORY-FEATURED" style="background:#FDFAF5">
|
||||
<div class="STORY-FEATURED-LABEL">Neueste Geschichte</div>
|
||||
<div class="STORY-FEATURED-TITLE">Die Reise nach Berlin</div>
|
||||
<div class="STORY-FEATURED-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-FEATURED-META">vor 3 Tagen</div>
|
||||
</div>
|
||||
<div class="STORY-ROW-SLIM"><div class="STORY-TITLE-SLIM">Sommer 1934 in Köln</div><div class="STORY-DATE-SLIM">vor 2 Wochen</div></div>
|
||||
<div class="STORY-ROW-SLIM"><div class="STORY-TITLE-SLIM">Briefe aus dem Krieg</div><div class="STORY-DATE-SLIM">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 — Entwürfe mit Mint-Vertikallinie</strong>
|
||||
<ul>
|
||||
<li>Mintfarbene 2 px Vertikallinie links neben dem Card-Titel — diskreter als ein Randakzent</li>
|
||||
<li>Leicht mintfarbenes Card-Header-Background (rgba(166,218,216,.08)) grenzt Zone ab</li>
|
||||
<li>Gut integriert in den kompakten Gesamtstil von Konzept C</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1055
docs/specs/reader-dashboard-final.html
Normal file
1055
docs/specs/reader-dashboard-final.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user