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>
481 lines
25 KiB
HTML
481 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Reader Dashboard — Concept 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>
|