b0aa3a6ffd
Some checks failed
CI / Backend Unit Tests (push) Has been cancelled
CI / Unit & Component Tests (push) Has been cancelled
CI / OCR Service Tests (push) Has been cancelled
CI / Unit & Component Tests (pull_request) Failing after 4m29s
CI / OCR Service Tests (pull_request) Successful in 35s
CI / Backend Unit Tests (pull_request) Failing after 3m13s
Seven HTML mockups covering the full design process for the permission-gated reader dashboard (issue #447): 3 initial concept variants (A/B/C), 3 iterations of concept B (B.1 hell, B.2 warm, B.3 navy), and the final merged spec combining B.1 layout with B.3 person cards. Final spec includes all 4 view variants: desktop light READ_ALL, desktop light BLOG_WRITE, desktop dark, and mobile (3 phone frames: light reader, light BLOG_WRITE, dark reader). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
438 lines
27 KiB
HTML
438 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Reader Dashboard — 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>
|