12487d187f
Some checks failed
CI / OCR Service Tests (pull_request) Successful in 34s
CI / Backend Unit Tests (push) Failing after 3m13s
CI / Unit & Component Tests (pull_request) Failing after 3m30s
CI / Backend Unit Tests (pull_request) Failing after 3m18s
CI / Unit & Component Tests (push) Failing after 3m38s
CI / OCR Service Tests (push) Successful in 35s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1056 lines
66 KiB
HTML
1056 lines
66 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 — Final · 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}
|
||
.dec-value s{color:rgba(255,255,255,.3);font-weight:400}
|
||
|
||
/* ── 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 ─── */
|
||
/* Real layout: canvas spans full viewport width; inner wrapper is max-w-7xl (1280px)
|
||
centered with px-8 (32px) / py-8 (32px). Shown here at ~55% scale → 18px/20px. */
|
||
.MAIN{background:#F5F4EF}
|
||
.PAGE-WRAP{max-width:704px;margin:0 auto;padding:18px 20px;display:flex;flex-direction:column;gap:8px}
|
||
|
||
/* ── Combined header bar — B.1: 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 — B.3 avatar, no border line, mint pill ─── */
|
||
.PERSON-GRID{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
|
||
.PCARD{
|
||
background:#fff;
|
||
border:1px solid #E0DDD5; /* plain border, no bottom accent */
|
||
border-radius:3px;
|
||
padding:10px 10px 9px;
|
||
text-decoration:none;
|
||
display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px
|
||
}
|
||
.PCARD-AV{
|
||
width:34px;height:34px; /* B.3: larger avatar */
|
||
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) /* B.3: subtle depth */
|
||
}
|
||
.PCARD-NAME{font-size:7px;font-weight:700;color:#002850;line-height:1.3}
|
||
.PCARD-COUNT{ /* B.3: mint pill instead of grey text */
|
||
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 — B.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 — B.1: 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}
|
||
|
||
/* ══════════════════════════════════
|
||
DARK THEME — DK- override classes
|
||
Compose alongside light structural classes, e.g. class="CARD DK-CARD"
|
||
Real tokens live in layout.css / Tailwind dark: variants — these are approximations.
|
||
Mapping: canvas #0F1219 · surface #161C27 · border rgba(255,255,255,.08)
|
||
text #D0CCC4 · muted #3A4568 · dim #262E48
|
||
mint #A6DAD8 (unchanged) · mint-pill rgba(166,218,216,.15)
|
||
══════════════════════════════════ */
|
||
.wf-dark .wf-bar{background:#1C1E26;border-bottom-color:#252830}
|
||
.wf-dark .urlbar{background:#252830}
|
||
.wf-dark .urlbar span{color:#4A5068}
|
||
|
||
.DK-MAIN{background:#0F1219}
|
||
.DK-HEADER-BAR{background:#161C27 !important;border-color:rgba(255,255,255,.08) !important}
|
||
.DK-HEADER-TIME{color:#4A5880 !important}
|
||
.DK-HEADER-NAME{color:#D0CCC4 !important}
|
||
.DK-DIVIDER{background:rgba(255,255,255,.08) !important}
|
||
.DK-HSTAT{border-right-color:rgba(255,255,255,.06) !important}
|
||
.DK-HSTAT-NUM{color:#E8E4DC !important}
|
||
.DK-HSTAT-LABEL{color:#323850 !important}
|
||
.DK-PCARD{background:#161C27 !important;border-color:rgba(255,255,255,.08) !important}
|
||
.DK-PCARD-NAME{color:#C0BDB6 !important}
|
||
.DK-PCARD-COUNT{color:#A6DAD8 !important;background:rgba(166,218,216,.14) !important}
|
||
.DK-PERSONS-ALL{color:#A6DAD8 !important;opacity:.65 !important}
|
||
.DK-CARD{background:#161C27 !important;border-color:rgba(255,255,255,.08) !important}
|
||
.DK-CARD-HEAD{border-bottom-color:rgba(255,255,255,.06) !important}
|
||
.DK-CARD-HEAD h3{color:#323850 !important}
|
||
.DK-CARD-HEAD a{color:#A6DAD8 !important;opacity:.5 !important}
|
||
.DK-DOC-ROW{border-bottom-color:rgba(255,255,255,.04) !important}
|
||
.DK-DOC-THUMB{background:#1E2638 !important;border-color:rgba(255,255,255,.07) !important}
|
||
.DK-DOC-TITLE{color:#C0BDB6 !important}
|
||
.DK-DOC-SENDER{color:#3A4568 !important}
|
||
.DK-DOC-SENDER a{color:#A6DAD8 !important;opacity:.6 !important}
|
||
.DK-DOC-DATE{color:#262E48 !important}
|
||
.DK-STORY-ROW{border-bottom-color:rgba(255,255,255,.04) !important}
|
||
.DK-STORY-TITLE{color:#C0BDB6 !important}
|
||
.DK-STORY-EXCERPT{color:#3A4568 !important}
|
||
.DK-STORY-META{color:#262E48 !important}
|
||
.DK-DRAFTS-CARD{background:#161C27 !important;border-color:rgba(255,255,255,.08) !important}
|
||
.DK-DRAFTS-HEAD{border-bottom-color:rgba(255,255,255,.06) !important}
|
||
.DK-DRAFTS-HEAD h3{color:#323850 !important}
|
||
.DK-DRAFT-ROW{border-bottom-color:rgba(255,255,255,.04) !important}
|
||
.DK-DRAFT-TITLE{color:#C0BDB6 !important}
|
||
.DK-DRAFT-META{color:#3A4568 !important}
|
||
|
||
/* ══════════════════════════════════
|
||
MOBILE — phone chrome + stacked layout
|
||
Phone frame: 240 px wide ≈ 375 px at ~64 % scale
|
||
Breakpoint: < sm (< 640 px Tailwind)
|
||
Key layout changes vs desktop:
|
||
· Header bar stacks: greeting row / stats row separated by border-top
|
||
· Person grid: 2 × 2 (was 4 × 1)
|
||
· Two-column content → single column, docs above stories
|
||
══════════════════════════════════ */
|
||
.PHONE{width:240px;background:#F5F4EF;border:5px solid #1C1C18;border-radius:28px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.22);flex-shrink:0}
|
||
.PHONE.dk{background:#0F1219}
|
||
.PHONE-STATUS{height:11px;background:#002850;display:flex;align-items:center;justify-content:space-between;padding:0 10px}
|
||
.PHONE-TIME{font-size:5px;font-weight:700;color:rgba(255,255,255,.8)}
|
||
.PHONE-ICONS{display:flex;align-items:center;gap:3px}
|
||
.M-NAV{height:28px;background:#002850;display:flex;align-items:center;padding:0 10px;gap:8px}
|
||
.M-ACCENT{height:2px;background:#A6DAD8}
|
||
.M-LOGO{font-size:6px;font-weight:900;color:#fff;letter-spacing:.8px;text-transform:uppercase}
|
||
.M-NAV-R{margin-left:auto;display:flex;gap:5px;align-items:center}
|
||
.M-HAM{display:flex;flex-direction:column;gap:2px}
|
||
.M-HAM span{display:block;width:11px;height:1.5px;background:rgba(255,255,255,.65);border-radius:1px}
|
||
.M-AV{width:15px;height:15px;background:#A6DAD8;border-radius:50%;font-size:4.5px;font-weight:900;color:#002850;display:flex;align-items:center;justify-content:center}
|
||
.M-MAIN{background:#F5F4EF}
|
||
.M-MAIN.dk{background:#0F1219}
|
||
.M-WRAP{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
|
||
|
||
/* Mobile header — stacks vertically */
|
||
.M-HBAR{background:#fff;border:1px solid #E0DDD5;border-radius:3px;padding:8px 10px}
|
||
.M-HBAR.dk{background:#161C27;border-color:rgba(255,255,255,.08)}
|
||
.M-HTIME{font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#C8B8A0;margin-bottom:2px}
|
||
.M-HTIME.dk{color:#4A5880}
|
||
.M-HNAME{font-family:Georgia,serif;font-size:9.5px;color:#002850;margin-bottom:6px}
|
||
.M-HNAME.dk{color:#D0CCC4}
|
||
.M-HSTATS{display:flex;border-top:1px solid #F0EDE6;padding-top:6px}
|
||
.M-HSTATS.dk{border-top-color:rgba(255,255,255,.06)}
|
||
.M-HSTAT{flex:1;text-align:center;border-right:1px solid #F0EDE6}
|
||
.M-HSTAT:last-child{border-right:none}
|
||
.M-HSTAT.dk{border-right-color:rgba(255,255,255,.06)}
|
||
.M-HSTAT a{text-decoration:none;display:block}
|
||
.M-HSTAT-NUM{font-size:11px;font-weight:900;color:#002850;line-height:1;display:block}
|
||
.M-HSTAT-NUM.dk{color:#E8E4DC}
|
||
.M-HSTAT-LBL{font-size:5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#B8B4AE;display:block;margin-top:1px}
|
||
.M-HSTAT-LBL.dk{color:#323850}
|
||
|
||
/* Mobile drafts */
|
||
.M-DCARD{background:#fff;border:1px solid #E0DDD5;border-left:3px solid #A6DAD8;border-radius:3px;overflow:hidden}
|
||
.M-DCARD.dk{background:#161C27;border-color:rgba(255,255,255,.08)}
|
||
.M-DCARD-HEAD{padding:5px 9px;border-bottom:1px solid #F0EDE6;display:flex;align-items:center}
|
||
.M-DCARD-HEAD.dk{border-bottom-color:rgba(255,255,255,.06)}
|
||
.M-DCARD-HEAD h3{font-size:6px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#999}
|
||
.M-DCARD-HEAD.dk h3{color:#323850}
|
||
.M-DRAFT-ROW{display:flex;align-items:center;justify-content:space-between;padding:5px 9px;border-bottom:1px solid #F0EDE6}
|
||
.M-DRAFT-ROW:last-child{border-bottom:none}
|
||
.M-DRAFT-ROW.dk{border-bottom-color:rgba(255,255,255,.04)}
|
||
.M-DRAFT-TITLE{font-family:Georgia,serif;font-size:7px;color:#002850}
|
||
.M-DRAFT-TITLE.dk{color:#C0BDB6}
|
||
.M-DRAFT-META{font-size:5.5px;color:#AAA;margin-top:1px}
|
||
.M-DRAFT-META.dk{color:#3A4568}
|
||
|
||
/* Mobile 2×2 person grid */
|
||
.M-PGRID{display:grid;grid-template-columns:1fr 1fr;gap:5px}
|
||
.M-PCARD{background:#fff;border:1px solid #E0DDD5;border-radius:3px;padding:7px 8px;text-decoration:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
|
||
.M-PCARD.dk{background:#161C27;border-color:rgba(255,255,255,.08)}
|
||
.M-PAV{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:6.5px;font-weight:900;color:#fff;box-shadow:0 1px 4px rgba(0,40,80,.2)}
|
||
.M-PNAME{font-size:6px;font-weight:700;color:#002850;line-height:1.3}
|
||
.M-PNAME.dk{color:#C0BDB6}
|
||
.M-PCOUNT{font-size:5px;font-weight:800;color:#002850;background:#D4F0EE;padding:1px 5px;border-radius:10px}
|
||
.M-PCOUNT.dk{color:#A6DAD8;background:rgba(166,218,216,.14)}
|
||
.M-PALL{font-size:5.5px;color:#002850;opacity:.55;text-decoration:none;display:block;text-align:right;margin-top:1px}
|
||
.M-PALL.dk{color:#A6DAD8;opacity:.65}
|
||
|
||
/* Mobile single-column cards */
|
||
.M-CARD{background:#fff;border:1px solid #E0DDD5;border-radius:3px;overflow:hidden}
|
||
.M-CARD.dk{background:#161C27;border-color:rgba(255,255,255,.08)}
|
||
.M-CARD-HEAD{display:flex;align-items:center;justify-content:space-between;padding:5px 9px;border-bottom:1px solid #E0DDD5}
|
||
.M-CARD-HEAD.dk{border-bottom-color:rgba(255,255,255,.06)}
|
||
.M-CARD-HEAD h3{font-size:6px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#999}
|
||
.M-CARD-HEAD.dk h3{color:#323850}
|
||
.M-CARD-HEAD a{font-size:6px;color:#002850;opacity:.4;text-decoration:none;font-weight:600}
|
||
.M-CARD-HEAD.dk a{color:#A6DAD8;opacity:.5}
|
||
.M-DROW{display:flex;align-items:center;gap:6px;padding:4px 9px;border-bottom:1px solid #F0EDE6}
|
||
.M-DROW:last-child{border-bottom:none}
|
||
.M-DROW.dk{border-bottom-color:rgba(255,255,255,.04)}
|
||
.M-DINFO{flex:1;min-width:0}
|
||
.M-DTITLE{font-family:Georgia,serif;font-size:7px;color:#002850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.M-DTITLE.dk{color:#C0BDB6}
|
||
.M-DSENDER{font-size:5.5px;color:#888}
|
||
.M-DSENDER.dk{color:#3A4568}
|
||
.M-DDATE{font-size:5.5px;color:#C8C4BE;white-space:nowrap;flex-shrink:0}
|
||
.M-DDATE.dk{color:#262E48}
|
||
.M-SROW{padding:6px 9px;border-bottom:1px solid #F0EDE6}
|
||
.M-SROW:last-child{border-bottom:none}
|
||
.M-SROW.dk{border-bottom-color:rgba(255,255,255,.04)}
|
||
.M-STITLE{font-family:Georgia,serif;font-size:7.5px;color:#002850;font-style:italic;margin-bottom:2px;line-height:1.3}
|
||
.M-STITLE.dk{color:#C0BDB6}
|
||
.M-SEXCERPT{font-size:6px;color:#888;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:2px}
|
||
.M-SEXCERPT.dk{color:#3A4568}
|
||
.M-SMETA{font-size:5.5px;color:#B8B4AE}
|
||
.M-SMETA.dk{color:#262E48}
|
||
|
||
/* Phone layout helper */
|
||
.phones-row{display:flex;gap:20px;align-items:start;flex-wrap:wrap}
|
||
.phone-label{font-size:8px;font-weight:800;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
|
||
.phone-col{display:flex;flex-direction:column}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="doc">
|
||
|
||
<div class="mast">
|
||
<div class="mast-top">
|
||
<div>
|
||
<h1>Reader Dashboard — Final</h1>
|
||
<p>Zusammenführung von B.1 und B.3. Gesamtgestaltung aus B.1: weißer Header-Balken mit vertikaler Trennlinie, 1:1-Spaltenraster, Geschichten mit 2-Zeilen-Auszug, minimale Chrome-Dichte. Personen-Kacheln aus B.3: größerer Avatar (34 px, mit Schatten), mintgrüne Pill-Badge für die Dokumentzahl — kein unterer Akzentstreifen.</p>
|
||
</div>
|
||
<span class="mast-badge">Final · Bereit zur Umsetzung</span>
|
||
</div>
|
||
<div class="decisions">
|
||
<div class="dec">
|
||
<div class="dec-label">Header-Balken</div>
|
||
<div class="dec-value">B.1 — Weiß · vertikale Trennlinie</div>
|
||
</div>
|
||
<div class="dec">
|
||
<div class="dec-label">Personen-Avatar</div>
|
||
<div class="dec-value">B.3 — 34 px · rund · Schatten<br><s>B.1: 28 px, kein Schatten</s></div>
|
||
</div>
|
||
<div class="dec">
|
||
<div class="dec-label">Dokumentzahl</div>
|
||
<div class="dec-value">B.3 — Mint Pill (#D4F0EE)<br><s>B.1: Grau-Text, kein Badge</s></div>
|
||
</div>
|
||
<div class="dec">
|
||
<div class="dec-label">Kachel-Rand</div>
|
||
<div class="dec-value">Einfacher Border · kein Akzentstreifen<br><s>B.1: Mint Bottom-Border</s></div>
|
||
</div>
|
||
<div class="dec">
|
||
<div class="dec-label">Seitenlayout</div>
|
||
<div class="dec-value">max-w-7xl (1280 px) · px-8 py-8 (32 px) · Canvas vollbreit</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. <strong>Werte nicht aus dem Mockup-CSS kopieren.</strong>
|
||
</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">
|
||
<div class="PAGE-WRAP">
|
||
|
||
<!-- Zone 1+2: white header bar with divider (B.1) -->
|
||
<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 — B.3 avatar + mint pill, no bottom line -->
|
||
<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>
|
||
|
||
<!-- Zone 5: 1:1 split (B.1) -->
|
||
<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><!-- /PAGE-WRAP -->
|
||
</div><!-- /MAIN -->
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:flex;flex-direction:column;gap:10px;padding-top:40px">
|
||
<div class="ann-block">
|
||
<strong>Header-Balken — unverändert B.1</strong>
|
||
<ul>
|
||
<li>Weißer Hintergrund, 1 px vertikale Trennlinie (#E8E4DF)</li>
|
||
<li>Gruß links in Georgia Serif, Stats rechts mit Inline-Trennern</li>
|
||
</ul>
|
||
</div>
|
||
<div class="ann-block">
|
||
<strong>Personen-Kacheln — B.3 Avatar, B.3 Pill, kein Streifen</strong>
|
||
<ul>
|
||
<li>Avatar: 34 px (statt 28 px), gleicher border-radius: 50 %</li>
|
||
<li>Avatar box-shadow: 0 2 px 6 px rgba(0,40,80,.2) — leichte Tiefe</li>
|
||
<li>Dokumentzahl: Mint Pill (#D4F0EE bg, #002850 text) statt grauem Plain-Text</li>
|
||
<li>Kein border-bottom-Akzent — plain 1 px #E0DDD5 rundum</li>
|
||
</ul>
|
||
</div>
|
||
<div class="note">
|
||
<strong>Seitenlayout — reale Werte</strong>
|
||
<ul>
|
||
<li>Canvas (#F5F4EF) läuft vollbreit bis zum Viewport-Rand</li>
|
||
<li>Inhalts-Wrapper: <code>max-w-7xl</code> (1280 px) + <code>px-8 py-8</code> (32 px) zentriert</li>
|
||
<li>Mockup-Äquivalent: max-width 704 px, padding 20 px links/rechts, 18 px oben</li>
|
||
<li>Nav-Bar bleibt vollbreit — kein max-width-Constraint</li>
|
||
</ul>
|
||
</div>
|
||
<div class="ok">
|
||
<strong>Alle anderen Elemente unverändert aus B.1</strong>
|
||
<ul>
|
||
<li>1:1 Spaltenbreite, Docs-Thumb, Absender-Link, Datum</li>
|
||
<li>Story: kursiver Titel, 2-Zeilen-Auszug, Datum</li>
|
||
<li>Drafts-Card: white mit mint left-border (BLOG_WRITE-Variante)</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="PAGE-WRAP">
|
||
|
||
<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>
|
||
|
||
<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>
|
||
|
||
<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 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 style="padding:5px 10px;font-size:6px;color:#C8C4BE;border-top:1px solid #F0EDE6">+ 2 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, 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>
|
||
</div>
|
||
|
||
</div><!-- /PAGE-WRAP -->
|
||
</div><!-- /MAIN -->
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;padding-top:40px">
|
||
<div class="ann-block">
|
||
<strong>Entwürfe-Card — unverändert B.1</strong>
|
||
<ul>
|
||
<li>Weiß mit 3 px mint Left-Border — gleiche Sprache wie restliche Cards</li>
|
||
<li>Titel in Georgia Serif, Metazeile in gedämpftem Grau</li>
|
||
<li>Nur sichtbar für BLOG_WRITE-Nutzer (isReader && canBlogWrite)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══ SECTION 3: DARK THEME ══ -->
|
||
<div class="sec">
|
||
<div class="sec-h"><span class="sec-num">3</span> Desktop · Dark Theme — READ_ALL</div>
|
||
<div class="sg sg-2">
|
||
<div class="sb">
|
||
<div class="sl">Vollansicht <span class="sz">≥ 1024 px · dark mode</span></div>
|
||
<div class="wf wf-dark">
|
||
<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 DK-MAIN">
|
||
<div class="PAGE-WRAP">
|
||
|
||
<div class="HEADER-BAR DK-HEADER-BAR">
|
||
<div class="HEADER-LEFT">
|
||
<div class="HEADER-TIME DK-HEADER-TIME">Guten Abend</div>
|
||
<div class="HEADER-NAME DK-HEADER-NAME">Herzlich willkommen, Brigitte.</div>
|
||
</div>
|
||
<div class="DIVIDER DK-DIVIDER"></div>
|
||
<div class="HEADER-STATS">
|
||
<div class="HSTAT DK-HSTAT"><a href="#"><span class="HSTAT-NUM DK-HSTAT-NUM">847</span><span class="HSTAT-LABEL DK-HSTAT-LABEL">Dokumente</span></a></div>
|
||
<div class="HSTAT DK-HSTAT"><a href="#"><span class="HSTAT-NUM DK-HSTAT-NUM">94</span><span class="HSTAT-LABEL DK-HSTAT-LABEL">Personen</span></a></div>
|
||
<div class="HSTAT DK-HSTAT"><a href="#"><span class="HSTAT-NUM DK-HSTAT-NUM">12</span><span class="HSTAT-LABEL DK-HSTAT-LABEL">Geschichten</span></a></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="PERSON-GRID">
|
||
<a class="PCARD DK-PCARD" href="#">
|
||
<div class="PCARD-AV" style="background:#002850">KR</div>
|
||
<div class="PCARD-NAME DK-PCARD-NAME">Käthe Raddatz</div>
|
||
<div class="PCARD-COUNT DK-PCARD-COUNT">47 Dok.</div>
|
||
</a>
|
||
<a class="PCARD DK-PCARD" href="#">
|
||
<div class="PCARD-AV" style="background:#1A4A6B">ER</div>
|
||
<div class="PCARD-NAME DK-PCARD-NAME">Ernst Raddatz</div>
|
||
<div class="PCARD-COUNT DK-PCARD-COUNT">31 Dok.</div>
|
||
</a>
|
||
<a class="PCARD DK-PCARD" href="#">
|
||
<div class="PCARD-AV" style="background:#3D5A7A">FM</div>
|
||
<div class="PCARD-NAME DK-PCARD-NAME">Frieda Müller</div>
|
||
<div class="PCARD-COUNT DK-PCARD-COUNT">28 Dok.</div>
|
||
</a>
|
||
<a class="PCARD DK-PCARD" href="#">
|
||
<div class="PCARD-AV" style="background:#4A7A5A">HW</div>
|
||
<div class="PCARD-NAME DK-PCARD-NAME">Heinrich Weber</div>
|
||
<div class="PCARD-COUNT DK-PCARD-COUNT">19 Dok.</div>
|
||
</a>
|
||
</div>
|
||
<div class="PERSONS-FOOTER"><a class="PERSONS-ALL DK-PERSONS-ALL" href="#">Alle 94 Personen →</a></div>
|
||
</div>
|
||
|
||
<div class="CONTENT-ROW">
|
||
<div class="CARD DK-CARD">
|
||
<div class="CARD-HEAD DK-CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="#">Alle Dokumente</a></div>
|
||
<div class="DOC-ROW DK-DOC-ROW">
|
||
<div class="DOC-THUMB DK-DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#4A5880" 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 DK-DOC-TITLE">Brief von Ernst an Käthe, März 1923</div><div class="DOC-SENDER DK-DOC-SENDER">von <a href="#">Käthe Raddatz</a></div></div>
|
||
<div class="DOC-DATE DK-DOC-DATE">vor 2 Tagen</div>
|
||
</div>
|
||
<div class="DOC-ROW DK-DOC-ROW">
|
||
<div class="DOC-THUMB DK-DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#4A5880" 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 DK-DOC-TITLE">Heiratsurkunde Raddatz-Müller, 1898</div><div class="DOC-SENDER DK-DOC-SENDER" style="color:#262E48">—</div></div>
|
||
<div class="DOC-DATE DK-DOC-DATE">vor 4 Tagen</div>
|
||
</div>
|
||
<div class="DOC-ROW DK-DOC-ROW">
|
||
<div class="DOC-THUMB DK-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 DK-DOC-TITLE">Familienfoto, Sommer 1928</div><div class="DOC-SENDER DK-DOC-SENDER">von <a href="#">Ernst Raddatz</a></div></div>
|
||
<div class="DOC-DATE DK-DOC-DATE">vor 1 Woche</div>
|
||
</div>
|
||
<div class="DOC-ROW DK-DOC-ROW">
|
||
<div class="DOC-THUMB DK-DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#4A5880" 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 DK-DOC-TITLE">Taufregister Heinrich Weber, 1902</div><div class="DOC-SENDER DK-DOC-SENDER" style="color:#262E48">—</div></div>
|
||
<div class="DOC-DATE DK-DOC-DATE">vor 2 Wo.</div>
|
||
</div>
|
||
<div class="DOC-ROW DK-DOC-ROW">
|
||
<div class="DOC-THUMB DK-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 DK-DOC-TITLE">Postkarte aus Berlin, 1930</div><div class="DOC-SENDER DK-DOC-SENDER">von <a href="#">Frieda Müller</a></div></div>
|
||
<div class="DOC-DATE DK-DOC-DATE">vor 3 Wo.</div>
|
||
</div>
|
||
</div>
|
||
<div class="CARD DK-CARD">
|
||
<div class="CARD-HEAD DK-CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle Geschichten</a></div>
|
||
<div class="STORY-ROW DK-STORY-ROW">
|
||
<div class="STORY-TITLE DK-STORY-TITLE">Die Reise nach Berlin</div>
|
||
<div class="STORY-EXCERPT DK-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 DK-STORY-META">vor 3 Tagen</div>
|
||
</div>
|
||
<div class="STORY-ROW DK-STORY-ROW">
|
||
<div class="STORY-TITLE DK-STORY-TITLE">Sommer 1934 in Köln</div>
|
||
<div class="STORY-EXCERPT DK-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 DK-STORY-META">vor 2 Wochen</div>
|
||
</div>
|
||
<div class="STORY-ROW DK-STORY-ROW">
|
||
<div class="STORY-TITLE DK-STORY-TITLE">Briefe aus dem Krieg</div>
|
||
<div class="STORY-EXCERPT DK-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 DK-STORY-META">vor 1 Monat</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /PAGE-WRAP -->
|
||
</div><!-- /MAIN -->
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:flex;flex-direction:column;gap:10px;padding-top:40px">
|
||
<div class="ann-block">
|
||
<strong>Dark Canvas — DK-MAIN</strong>
|
||
<ul>
|
||
<li>Hintergrund: <code>#0F1219</code> (tief dunkelblau, kein reines Schwarz)</li>
|
||
<li>Browser-Chromleiste: <code>#1C1E26</code> · URL-Bar: <code>#252830</code></li>
|
||
<li>Nav-Bar bleibt <code>#002850</code> — keine Änderung im Dark Mode</li>
|
||
</ul>
|
||
</div>
|
||
<div class="ann-block">
|
||
<strong>Karten & Trennlinien — DK-CARD / DK-HEADER-BAR</strong>
|
||
<ul>
|
||
<li>Surface: <code>#161C27</code> (dunkleres Blaugrau)</li>
|
||
<li>Rand: <code>rgba(255,255,255,.08)</code> — subtile Trennung statt Linie</li>
|
||
<li>Zeilentrennlinien: <code>rgba(255,255,255,.04)</code></li>
|
||
</ul>
|
||
</div>
|
||
<div class="note">
|
||
<strong>Typografie-Token im Dark Mode</strong>
|
||
<ul>
|
||
<li>Primär-Text: <code>#D0CCC4</code> / <code>#C0BDB6</code> (warm, kein reines Weiß)</li>
|
||
<li>Beschriftungen (Labels): <code>#323850</code></li>
|
||
<li>Datum/Dim: <code>#262E48</code></li>
|
||
<li>Mint: <code>#A6DAD8</code> — unverändert, auch im Dark Mode</li>
|
||
<li>Mint-Pill Hintergrund: <code>rgba(166,218,216,.14)</code></li>
|
||
</ul>
|
||
</div>
|
||
<div class="ok">
|
||
<strong>Kompositions-Muster — DK- als Zusatzklasse</strong>
|
||
<ul>
|
||
<li>Klassen addieren sich: <code>class="CARD DK-CARD"</code></li>
|
||
<li>DK- nutzt <code>!important</code> zum Überschreiben von Light-Werten</li>
|
||
<li>Strukturelle Klassen bleiben unverändert — kein doppelter Markup</li>
|
||
<li>Impl.: Tailwind <code>dark:</code>-Varianten oder CSS-Variable-Swap</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ SECTION 4: MOBILE ══ -->
|
||
<div class="sec">
|
||
<div class="sec-h"><span class="sec-num">4</span> Mobile — 3 Varianten (375 px · ≈ 64 % Mockup-Skala)</div>
|
||
|
||
<div class="sg" style="grid-template-columns:1fr 340px;align-items:start">
|
||
<div class="sb">
|
||
<div class="sl">Alle drei Varianten nebeneinander</div>
|
||
<div class="phones-row">
|
||
|
||
<!-- Phone 1: Light · READ_ALL -->
|
||
<div class="phone-col">
|
||
<div class="phone-label">
|
||
<span style="background:#E8E4DF;border-radius:3px;padding:1px 5px;font-size:7px">READ_ALL</span>
|
||
Hell
|
||
</div>
|
||
<div class="PHONE">
|
||
<div class="PHONE-STATUS">
|
||
<span class="PHONE-TIME">19:43</span>
|
||
<div class="PHONE-ICONS">
|
||
<svg width="9" height="6" viewBox="0 0 18 12" fill="rgba(255,255,255,.8)"><rect x="0" y="3" width="3" height="9" rx=".5"/><rect x="4" y="2" width="3" height="10" rx=".5"/><rect x="8" y="1" width="3" height="11" rx=".5"/><rect x="12" y="0" width="3" height="12" rx=".5"/></svg>
|
||
<svg width="8" height="6" viewBox="0 0 20 14" fill="none" stroke="rgba(255,255,255,.8)" stroke-width="1.8"><path d="M1 4.5C4.2 1.8 8 .5 10 .5s5.8 1.3 9 4"/><path d="M4 7.5C6.2 5.7 8 5 10 5s3.8.7 6 2.5"/><circle cx="10" cy="11" r="1.5"/></svg>
|
||
<svg width="11" height="6" viewBox="0 0 22 12" fill="none"><rect x="0" y="1" width="18" height="10" rx="1.5" stroke="rgba(255,255,255,.8)" stroke-width="1.2"/><rect x="2" y="3" width="12" height="6" rx=".5" fill="rgba(255,255,255,.8)"/><path d="M19 4v4" stroke="rgba(255,255,255,.5)" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="M-NAV">
|
||
<span class="M-LOGO">Familienarchiv</span>
|
||
<div class="M-NAV-R">
|
||
<div class="M-HAM"><span></span><span></span><span></span></div>
|
||
<div class="M-AV">BK</div>
|
||
</div>
|
||
</div>
|
||
<div class="M-ACCENT"></div>
|
||
<div class="M-MAIN">
|
||
<div class="M-WRAP">
|
||
|
||
<div class="M-HBAR">
|
||
<div class="M-HTIME">Guten Abend</div>
|
||
<div class="M-HNAME">Herzlich willkommen, Brigitte.</div>
|
||
<div class="M-HSTATS">
|
||
<div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">847</span><span class="M-HSTAT-LBL">Dok.</span></a></div>
|
||
<div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">94</span><span class="M-HSTAT-LBL">Pers.</span></a></div>
|
||
<div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">12</span><span class="M-HSTAT-LBL">Gesch.</span></a></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="M-PGRID">
|
||
<a class="M-PCARD" href="#"><div class="M-PAV" style="background:#002850">KR</div><div class="M-PNAME">Käthe Raddatz</div><div class="M-PCOUNT">47 Dok.</div></a>
|
||
<a class="M-PCARD" href="#"><div class="M-PAV" style="background:#1A4A6B">ER</div><div class="M-PNAME">Ernst Raddatz</div><div class="M-PCOUNT">31 Dok.</div></a>
|
||
<a class="M-PCARD" href="#"><div class="M-PAV" style="background:#3D5A7A">FM</div><div class="M-PNAME">Frieda Müller</div><div class="M-PCOUNT">28 Dok.</div></a>
|
||
<a class="M-PCARD" href="#"><div class="M-PAV" style="background:#4A7A5A">HW</div><div class="M-PNAME">Heinrich Weber</div><div class="M-PCOUNT">19 Dok.</div></a>
|
||
</div>
|
||
<a class="M-PALL" href="#">Alle 94 Personen →</a>
|
||
</div>
|
||
|
||
<div class="M-CARD">
|
||
<div class="M-CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="#">Alle</a></div>
|
||
<div class="M-DROW">
|
||
<div style="width:15px;height:18px;background:#ECEAE4;border:1px solid #E0DDD5;border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center"><svg width="6" height="8" 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="M-DINFO"><div class="M-DTITLE">Brief von Ernst an Käthe, März 1923</div><div class="M-DSENDER">von Käthe Raddatz</div></div>
|
||
<div class="M-DDATE">vor 2 T.</div>
|
||
</div>
|
||
<div class="M-DROW">
|
||
<div style="width:15px;height:18px;background:#ECEAE4;border:1px solid #E0DDD5;border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center"><svg width="6" height="8" 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="M-DINFO"><div class="M-DTITLE">Heiratsurkunde Raddatz-Müller, 1898</div><div class="M-DSENDER" style="color:#E0DDD5">—</div></div>
|
||
<div class="M-DDATE">vor 4 T.</div>
|
||
</div>
|
||
<div class="M-DROW">
|
||
<div style="width:15px;height:18px;background:#ECEAE4;border:1px solid #E0DDD5;border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center"><svg width="8" height="8" 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="M-DINFO"><div class="M-DTITLE">Familienfoto, Sommer 1928</div><div class="M-DSENDER">von Ernst Raddatz</div></div>
|
||
<div class="M-DDATE">vor 1 W.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="M-CARD">
|
||
<div class="M-CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle</a></div>
|
||
<div class="M-SROW">
|
||
<div class="M-STITLE">Die Reise nach Berlin</div>
|
||
<div class="M-SEXCERPT">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …</div>
|
||
<div class="M-SMETA">vor 3 Tagen</div>
|
||
</div>
|
||
<div class="M-SROW">
|
||
<div class="M-STITLE">Sommer 1934 in Köln</div>
|
||
<div class="M-SEXCERPT">Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …</div>
|
||
<div class="M-SMETA">vor 2 Wochen</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Phone 2: Light · BLOG_WRITE -->
|
||
<div class="phone-col">
|
||
<div class="phone-label">
|
||
<span style="background:#D4F0EE;border-radius:3px;padding:1px 5px;font-size:7px;color:#002850">BLOG_WRITE</span>
|
||
Hell + Entwürfe
|
||
</div>
|
||
<div class="PHONE">
|
||
<div class="PHONE-STATUS">
|
||
<span class="PHONE-TIME">08:17</span>
|
||
<div class="PHONE-ICONS">
|
||
<svg width="9" height="6" viewBox="0 0 18 12" fill="rgba(255,255,255,.8)"><rect x="0" y="3" width="3" height="9" rx=".5"/><rect x="4" y="2" width="3" height="10" rx=".5"/><rect x="8" y="1" width="3" height="11" rx=".5"/><rect x="12" y="0" width="3" height="12" rx=".5"/></svg>
|
||
<svg width="11" height="6" viewBox="0 0 22 12" fill="none"><rect x="0" y="1" width="18" height="10" rx="1.5" stroke="rgba(255,255,255,.8)" stroke-width="1.2"/><rect x="2" y="3" width="12" height="6" rx=".5" fill="rgba(255,255,255,.8)"/><path d="M19 4v4" stroke="rgba(255,255,255,.5)" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="M-NAV">
|
||
<span class="M-LOGO">Familienarchiv</span>
|
||
<div class="M-NAV-R">
|
||
<div class="M-HAM"><span></span><span></span><span></span></div>
|
||
<div class="M-AV">MR</div>
|
||
</div>
|
||
</div>
|
||
<div class="M-ACCENT"></div>
|
||
<div class="M-MAIN">
|
||
<div class="M-WRAP">
|
||
|
||
<div class="M-HBAR">
|
||
<div class="M-HTIME">Guten Morgen</div>
|
||
<div class="M-HNAME">Herzlich willkommen, Marcel.</div>
|
||
<div class="M-HSTATS">
|
||
<div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">847</span><span class="M-HSTAT-LBL">Dok.</span></a></div>
|
||
<div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">94</span><span class="M-HSTAT-LBL">Pers.</span></a></div>
|
||
<div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">12</span><span class="M-HSTAT-LBL">Gesch.</span></a></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="M-DCARD">
|
||
<div class="M-DCARD-HEAD"><h3>Meine Entwürfe</h3></div>
|
||
<div class="M-DRAFT-ROW">
|
||
<div><div class="M-DRAFT-TITLE">Onkel Friedrichs Wanderjahre</div><div class="M-DRAFT-META">Entwurf · vor 1 Tag</div></div>
|
||
<svg width="6" height="6" viewBox="0 0 24 24" fill="none" stroke="#CCC" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
<div class="M-DRAFT-ROW">
|
||
<div><div class="M-DRAFT-TITLE">Die Raddatz-Kinder</div><div class="M-DRAFT-META">Entwurf · vor 5 Tagen</div></div>
|
||
<svg width="6" height="6" viewBox="0 0 24 24" fill="none" stroke="#CCC" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="M-PGRID">
|
||
<a class="M-PCARD" href="#"><div class="M-PAV" style="background:#002850">KR</div><div class="M-PNAME">Käthe Raddatz</div><div class="M-PCOUNT">47 Dok.</div></a>
|
||
<a class="M-PCARD" href="#"><div class="M-PAV" style="background:#1A4A6B">ER</div><div class="M-PNAME">Ernst Raddatz</div><div class="M-PCOUNT">31 Dok.</div></a>
|
||
<a class="M-PCARD" href="#"><div class="M-PAV" style="background:#3D5A7A">FM</div><div class="M-PNAME">Frieda Müller</div><div class="M-PCOUNT">28 Dok.</div></a>
|
||
<a class="M-PCARD" href="#"><div class="M-PAV" style="background:#4A7A5A">HW</div><div class="M-PNAME">Heinrich Weber</div><div class="M-PCOUNT">19 Dok.</div></a>
|
||
</div>
|
||
<a class="M-PALL" href="#">Alle 94 Personen →</a>
|
||
</div>
|
||
|
||
<div class="M-CARD">
|
||
<div class="M-CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="#">Alle</a></div>
|
||
<div class="M-DROW">
|
||
<div style="width:15px;height:18px;background:#ECEAE4;border:1px solid #E0DDD5;border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center"><svg width="6" height="8" 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="M-DINFO"><div class="M-DTITLE">Brief von Ernst an Käthe, März 1923</div><div class="M-DSENDER">von Käthe Raddatz</div></div>
|
||
<div class="M-DDATE">vor 2 T.</div>
|
||
</div>
|
||
<div class="M-DROW">
|
||
<div style="width:15px;height:18px;background:#ECEAE4;border:1px solid #E0DDD5;border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center"><svg width="6" height="8" 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="M-DINFO"><div class="M-DTITLE">Familienfoto, Sommer 1928</div><div class="M-DSENDER">von Ernst Raddatz</div></div>
|
||
<div class="M-DDATE">vor 1 W.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="M-CARD">
|
||
<div class="M-CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle</a></div>
|
||
<div class="M-SROW">
|
||
<div class="M-STITLE">Die Reise nach Berlin</div>
|
||
<div class="M-SEXCERPT">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …</div>
|
||
<div class="M-SMETA">vor 3 Tagen</div>
|
||
</div>
|
||
<div class="M-SROW">
|
||
<div class="M-STITLE">Sommer 1934 in Köln</div>
|
||
<div class="M-SEXCERPT">Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …</div>
|
||
<div class="M-SMETA">vor 2 Wochen</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Phone 3: Dark · READ_ALL -->
|
||
<div class="phone-col">
|
||
<div class="phone-label">
|
||
<span style="background:#1C1E26;border-radius:3px;padding:1px 5px;font-size:7px;color:#A6DAD8">READ_ALL</span>
|
||
Dunkel
|
||
</div>
|
||
<div class="PHONE dk">
|
||
<div class="PHONE-STATUS">
|
||
<span class="PHONE-TIME">19:43</span>
|
||
<div class="PHONE-ICONS">
|
||
<svg width="9" height="6" viewBox="0 0 18 12" fill="rgba(255,255,255,.8)"><rect x="0" y="3" width="3" height="9" rx=".5"/><rect x="4" y="2" width="3" height="10" rx=".5"/><rect x="8" y="1" width="3" height="11" rx=".5"/><rect x="12" y="0" width="3" height="12" rx=".5"/></svg>
|
||
<svg width="11" height="6" viewBox="0 0 22 12" fill="none"><rect x="0" y="1" width="18" height="10" rx="1.5" stroke="rgba(255,255,255,.8)" stroke-width="1.2"/><rect x="2" y="3" width="10" height="6" rx=".5" fill="rgba(255,255,255,.8)"/><path d="M19 4v4" stroke="rgba(255,255,255,.5)" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="M-NAV">
|
||
<span class="M-LOGO">Familienarchiv</span>
|
||
<div class="M-NAV-R">
|
||
<div class="M-HAM"><span></span><span></span><span></span></div>
|
||
<div class="M-AV">BK</div>
|
||
</div>
|
||
</div>
|
||
<div class="M-ACCENT"></div>
|
||
<div class="M-MAIN dk">
|
||
<div class="M-WRAP">
|
||
|
||
<div class="M-HBAR dk">
|
||
<div class="M-HTIME dk">Guten Abend</div>
|
||
<div class="M-HNAME dk">Herzlich willkommen, Brigitte.</div>
|
||
<div class="M-HSTATS dk">
|
||
<div class="M-HSTAT dk"><a href="#"><span class="M-HSTAT-NUM dk">847</span><span class="M-HSTAT-LBL dk">Dok.</span></a></div>
|
||
<div class="M-HSTAT dk"><a href="#"><span class="M-HSTAT-NUM dk">94</span><span class="M-HSTAT-LBL dk">Pers.</span></a></div>
|
||
<div class="M-HSTAT dk"><a href="#"><span class="M-HSTAT-NUM dk">12</span><span class="M-HSTAT-LBL dk">Gesch.</span></a></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="M-PGRID">
|
||
<a class="M-PCARD dk" href="#"><div class="M-PAV" style="background:#002850">KR</div><div class="M-PNAME dk">Käthe Raddatz</div><div class="M-PCOUNT dk">47 Dok.</div></a>
|
||
<a class="M-PCARD dk" href="#"><div class="M-PAV" style="background:#1A4A6B">ER</div><div class="M-PNAME dk">Ernst Raddatz</div><div class="M-PCOUNT dk">31 Dok.</div></a>
|
||
<a class="M-PCARD dk" href="#"><div class="M-PAV" style="background:#3D5A7A">FM</div><div class="M-PNAME dk">Frieda Müller</div><div class="M-PCOUNT dk">28 Dok.</div></a>
|
||
<a class="M-PCARD dk" href="#"><div class="M-PAV" style="background:#4A7A5A">HW</div><div class="M-PNAME dk">Heinrich Weber</div><div class="M-PCOUNT dk">19 Dok.</div></a>
|
||
</div>
|
||
<a class="M-PALL dk" href="#">Alle 94 Personen →</a>
|
||
</div>
|
||
|
||
<div class="M-CARD dk">
|
||
<div class="M-CARD-HEAD dk"><h3>Zuletzt aktualisiert</h3><a href="#">Alle</a></div>
|
||
<div class="M-DROW dk">
|
||
<div style="width:15px;height:18px;background:#1E2638;border:1px solid rgba(255,255,255,.07);border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center"><svg width="6" height="8" viewBox="0 0 20 26" fill="none" stroke="#4A5880" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
|
||
<div class="M-DINFO"><div class="M-DTITLE dk">Brief von Ernst an Käthe, März 1923</div><div class="M-DSENDER dk">von Käthe Raddatz</div></div>
|
||
<div class="M-DDATE dk">vor 2 T.</div>
|
||
</div>
|
||
<div class="M-DROW dk">
|
||
<div style="width:15px;height:18px;background:#1E2638;border:1px solid rgba(255,255,255,.07);border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center"><svg width="6" height="8" viewBox="0 0 20 26" fill="none" stroke="#4A5880" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
|
||
<div class="M-DINFO"><div class="M-DTITLE dk">Heiratsurkunde Raddatz-Müller, 1898</div><div class="M-DSENDER dk" style="color:#262E48">—</div></div>
|
||
<div class="M-DDATE dk">vor 4 T.</div>
|
||
</div>
|
||
<div class="M-DROW dk">
|
||
<div style="width:15px;height:18px;background:#1E2638;border:1px solid rgba(255,255,255,.07);border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center"><svg width="8" height="8" 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="M-DINFO"><div class="M-DTITLE dk">Familienfoto, Sommer 1928</div><div class="M-DSENDER dk">von Ernst Raddatz</div></div>
|
||
<div class="M-DDATE dk">vor 1 W.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="M-CARD dk">
|
||
<div class="M-CARD-HEAD dk"><h3>Geschichten</h3><a href="#">Alle</a></div>
|
||
<div class="M-SROW dk">
|
||
<div class="M-STITLE dk">Die Reise nach Berlin</div>
|
||
<div class="M-SEXCERPT dk">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …</div>
|
||
<div class="M-SMETA dk">vor 3 Tagen</div>
|
||
</div>
|
||
<div class="M-SROW dk">
|
||
<div class="M-STITLE dk">Sommer 1934 in Köln</div>
|
||
<div class="M-SEXCERPT dk">Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …</div>
|
||
<div class="M-SMETA dk">vor 2 Wochen</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /phones-row -->
|
||
</div>
|
||
|
||
<div style="display:flex;flex-direction:column;gap:10px;padding-top:40px">
|
||
<div class="ann-block">
|
||
<strong>Header — stacked layout</strong>
|
||
<ul>
|
||
<li>Desktop: Greeting + Stats nebeneinander (Flexbox row, 1 px Divider)</li>
|
||
<li>Mobile: Greeting oben, Stats darunter nach <code>border-top</code> — kein Divider</li>
|
||
<li>Stat-Labels kürzen auf „Dok." / „Pers." / „Gesch." (Platzmangel)</li>
|
||
</ul>
|
||
</div>
|
||
<div class="ann-block">
|
||
<strong>Personen — 2×2 Grid (statt 4×1)</strong>
|
||
<ul>
|
||
<li>Desktop: <code>grid-template-columns: repeat(4, 1fr)</code></li>
|
||
<li>Mobile: <code>grid-template-columns: 1fr 1fr</code> — Avatar 22 px (statt 34 px)</li>
|
||
<li>„Alle N Personen →" als Inline-Link unter dem Grid</li>
|
||
</ul>
|
||
</div>
|
||
<div class="ann-block">
|
||
<strong>Inhalt — einspaltig, Docs zuerst</strong>
|
||
<ul>
|
||
<li>Desktop: <code>grid-template-columns: 1fr 1fr</code> nebeneinander</li>
|
||
<li>Mobile: Spalten aufgelöst — Dokumente-Card oben, Geschichten-Card darunter</li>
|
||
<li>Breakpoint: Tailwind <code>sm</code> = 640 px</li>
|
||
</ul>
|
||
</div>
|
||
<div class="note">
|
||
<strong>Navigation — Hamburger-Menü</strong>
|
||
<ul>
|
||
<li>Desktop: inline Nav-Links sichtbar</li>
|
||
<li>Mobile: Links ausgeblendet, stattdessen Hamburger-Icon (3 Striche) links neben Avatar</li>
|
||
<li>Nav-Bar Höhe und Farbe (#002850) bleiben identisch</li>
|
||
</ul>
|
||
</div>
|
||
<div class="ok">
|
||
<strong>Dark Mobile — .dk Modifier-Klasse</strong>
|
||
<ul>
|
||
<li>Selbe M- Strukturklassen + <code>.dk</code> für Dark-Werte</li>
|
||
<li>Nav-Bar bleibt #002850 — kein .dk nötig</li>
|
||
<li>PHONE-Status-Bar bleibt #002850 — unverändert</li>
|
||
<li>Avatare behalten ihre Farbe — Eigenfarbe, kein Token</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|