diff --git a/docs/specs/reader-dashboard-a-willkommen.html b/docs/specs/reader-dashboard-a-willkommen.html new file mode 100644 index 00000000..e0c3a5e7 --- /dev/null +++ b/docs/specs/reader-dashboard-a-willkommen.html @@ -0,0 +1,481 @@ + + + + + +Reader Dashboard — Concept A · Herzlich Willkommen · Familienarchiv + + + +
+ + +
+
+
+

Reader Dashboard — Konzept A · „Herzlich Willkommen"

+

Warme, einladende Gestaltung mit klarer Hierarchie: Begrüßung → Statistik → Personen → Inhalte. Die Statistikkacheln sind großzügig bemessen und wirken als Einstiegspunkte. Personen erscheinen als kompakte Pills. Geschichten erhalten einen reduzierten, redaktionellen Stil ohne Auszug.

+
+ Konzept A · Entwurf +
+
+
+
Schwerpunkt
+
Begrüßung & große Statistik als Einstieg
+
+
+
Personen-Chips
+
Schlanke Pills mit Initialen-Avatar
+
+
+
Geschichten-Spalte
+
Kursiver Serif-Titel · kein Auszug · schlicht
+
+
+
Spaltenbreite
+
3 : 2 — Dokumente : Geschichten
+
+
+
+ +
+ 📐 Mockup-Skalierung — alle Schriftgrößen, Abstände und Höhen im Mockup sind auf ca. 55 % der tatsächlichen Implementierungswerte skaliert. Werte nicht aus dem Mockup-CSS kopieren. +
+ + +
+
1 Desktop · Leser ohne BLOG_WRITE (READ_ALL only)
+ +
+
+
Vollansicht ≥ 1024 px
+ +
+
+
+
familienarchiv.local /
+
+ + +
+ + Startseite + Dokumente + Personen + Geschichten +
+
+ +
+
BK
+
+
+
+ +
+ + +
+
Guten Abend
+
Herzlich willkommen, Brigitte.
+
+ + +
+ +
847
+
Dokumente
+ + +
94
+
Personen
+ + +
12
+
Geschichten
+ +
+ + +
+
+ Personen im Fokus + Alle 94 Personen → +
+
+ +
KR
+ Käthe Raddatz47 Dok. + + +
ER
+ Ernst Raddatz31 Dok. + + +
FM
+ Frieda Müller28 Dok. + + +
HW
+ Heinrich Weber19 Dok. + +
+
+ + +
+ + +
+
+

Zuletzt aktualisiert

+ Alle Dokumente +
+
+
+ +
+
+
Brief von Ernst an Käthe, März 1923
+
Käthe Raddatz
+
+
vor 2 Tagen
+
+
+
+ +
+
+
Heiratsurkunde Raddatz-Müller, 1898
+
—
+
+
vor 4 Tagen
+
+
+
+ +
+
+
Familienfoto, Sommer 1928
+
Ernst Raddatz
+
+
vor 1 Woche
+
+
+
+ +
+
+
Taufregister Heinrich Weber, 1902
+
—
+
+
vor 2 Wo.
+
+
+
+ +
+
+
Postkarte aus Berlin, 1930
+
Frieda Müller
+
+
vor 3 Wo.
+
+
+ + +
+
+

Geschichten

+ Alle Geschichten +
+
+
Die Reise nach Berlin
+
vor 3 Tagen
+
+
+
Sommer 1934 in Köln
+
vor 2 Wochen
+
+
+
Briefe aus dem Krieg
+
vor 1 Monat
+
+
+ +
+
+
+
+ + +
+
+ Zone 1 — Begrüßung +
    +
  • Sand-getönter Hintergrund (#FDFAF5) grenzt die Karte vom Grau der Seite ab
    • +
  • Tageszeit-Label (z.B. „Guten Abend") in Capitalcase, 12 px, gedämpftes Beige
    • +
  • „Herzlich willkommen, Brigitte." in Georgia Serif, 28 px real (14 px skaliert)
    • +
+
+
+ Zone 2 — Statistik +
    +
  • Jede Kachel ist ein vollflächiges <a>-Element
    • +
  • Mintfarbener Bottom-Border (2 px, #A6DAD8) als einziger visueller Akzent
    • +
  • Zahl: 48 px bold Navy — wirkt wie ein Einladungsschild
    • +
+
+
+ Zone 4 — Personen-Chips +
    +
  • Pill-Form: Initialen-Avatar (16 px) + Name + Dokumentzahl in gedämpftem Grau
    • +
  • Avatar-Hintergrundfarbe variiert innerhalb der Navy-Familie
    • +
  • Anzahl-Link „Alle 94 Personen →" rechtsbündig zum Section-Titel
    • +
+
+
+ Zone 5 — Geschichten-Spalte +
    +
  • Nur kursiver Titel + Datum — bewusst reduziert, literarisch
    • +
  • Kein Auszug: ruhigere Gestaltung, weniger Ablenkung
    • +
  • Passend für Leser, die Titel als Entscheidungsgrundlage kennen
    • +
+
+
+ Stärken dieses Konzepts +
    +
  • Klar und vertraut — wenig kognitive Last für ältere Nutzer
    • +
  • Statistik-Kacheln motivieren zum Erkunden des Archivs
    • +
  • Konsistent mit bestehendem Card-Stil des Contributor-Dashboards
    • +
+
+
+
+
+ + +
+
2 Variante · BLOG_WRITE — mit Zone 3 „Meine Entwürfe"
+ +
+
+
BLOG_WRITE-Nutzer READ_ALL + BLOG_WRITE
+ +
+
+
+
familienarchiv.local /
+
+
+ + Startseite + Dokumente + Personen + Geschichten +
MR
+
+
+
+ + +
+
Guten Morgen
+
Herzlich willkommen, Marcel.
+
+ + +
+
847
Dokumente
 +
94
Personen
 +
12
Geschichten
 +
+ + +
+
+

Meine Entwürfe

+
+
+
+
Onkel Friedrichs Wanderjahre
+
Entwurf · zuletzt bearbeitet vor 1 Tag
+
+ +
+
+
+
Die Raddatz-Kinder
+
Entwurf · zuletzt bearbeitet vor 5 Tagen
+
+ +
+
+ + +
+
+ Personen im Fokus + Alle 94 Personen → +
+
+
KR
Käthe Raddatz47 Dok. +
ER
Ernst Raddatz31 Dok. +
FM
Frieda Müller28 Dok. +
HW
Heinrich Weber19 Dok. +
+
+ + +
+
+

Zuletzt aktualisiert

Alle Dokumente
+
+
+
Brief von Ernst an Käthe, März 1923
Käthe Raddatz
+
vor 2 Tagen
+
+
+
+
Heiratsurkunde Raddatz-Müller, 1898
—
+
vor 4 Tagen
+
+
+ 3 weitere Dokumente …
+
+
+

Geschichten

Alle
+
Die Reise nach Berlin
vor 3 Tagen
+
Sommer 1934 in Köln
vor 2 Wochen
+
Briefe aus dem Krieg
vor 1 Monat
+
+
+ +
+
+
+ +
+
+ Zone 3 — Meine Entwürfe (nur BLOG_WRITE) +
    +
  • Mintfarbener linker Rand (3 px solid #A6DAD8) hebt die Zone ohne visuellen Lärm hervor
    • +
  • Erscheint zwischen Stats (Zone 2) und Personen (Zone 4) — gemäß Issue #447
    • +
  • Jeder Entwurf: Serif-Titel + Metazeile → Link auf /geschichten/[id]/edit
    • +
  • Leer-Zustand: „Keine Entwürfe" — kein CTA benötigt
    • +
+
+
+
+
+ +
+ + diff --git a/docs/specs/reader-dashboard-b-ueberblick.html b/docs/specs/reader-dashboard-b-ueberblick.html new file mode 100644 index 00000000..a8442e0c --- /dev/null +++ b/docs/specs/reader-dashboard-b-ueberblick.html @@ -0,0 +1,480 @@ + + + + + +Reader Dashboard — Concept B · Überblick · Familienarchiv + + + +
+ + +
+
+
+

Reader Dashboard — Konzept B · „Überblick"

+

Kompakte, strukturierte Gestaltung. Begrüßung und Statistik werden in einem gemeinsamen Querbalken kombiniert — spart vertikalen Platz. Personen erscheinen als quadratische Portrait-Karten mit großem Avatar. Geschichten zeigen einen kurzen Auszug für schnelle Orientierung.

+
+ Konzept B · Entwurf +
+
+
+
Schwerpunkt
+
Effizienz — alles auf einen Blick
+
+
+
Header
+
Gruß + Statistik in einem Querbalken
+
+
+
Personen
+
Portrait-Kacheln mit großem Avatar
+
+
+
Geschichten
+
Titel + Auszug (~2 Zeilen) + Datum
+
+
+
+ +
+ 📐 Mockup-Skalierung — alle Schriftgrößen, Abstände und Höhen im Mockup sind auf ca. 55 % der tatsächlichen Implementierungswerte skaliert. Werte nicht aus dem Mockup-CSS kopieren. +
+ + +
+
1 Desktop · Leser ohne BLOG_WRITE (READ_ALL only)
+ +
+
+
Vollansicht ≥ 1024 px
+ +
+
+
+
familienarchiv.local /
+
+ + +
+ + Startseite + Dokumente + Personen + Geschichten +
+
+ +
+
BK
+
+
+
+ +
+ + +
+
+
Guten Abend
+
Herzlich willkommen, Brigitte.
+
+
+
+ + 847 + Dokumente + +
+
+ + 94 + Personen + +
+
+ + 12 + Geschichten + +
+
+
+ + + + + +
+ + +
+
+

Zuletzt aktualisiert

+ Alle Dokumente +
+
+
+ +
+
+
Brief von Ernst an Käthe, März 1923
+
von Käthe Raddatz
+
+
vor 2 Tagen
+
+
+
+ +
+
+
Heiratsurkunde Raddatz-Müller, 1898
+
—
+
+
vor 4 Tagen
+
+
+
+ +
+
+
Familienfoto, Sommer 1928
+
von Ernst Raddatz
+
+
vor 1 Woche
+
+
+
+ +
+
+
Taufregister Heinrich Weber, 1902
+
—
+
+
vor 2 Wo.
+
+
+
+ +
+
+
Postkarte aus Berlin, 1930
+
von Frieda Müller
+
+
vor 3 Wo.
+
+
+ + +
+
+

Geschichten

+ Alle Geschichten +
+
+
Die Reise nach Berlin
+
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …
+
vor 3 Tagen
+
+
+
Sommer 1934 in Köln
+
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise vor dem Krieg …
+
vor 2 Wochen
+
+
+
Briefe aus dem Krieg
+
Zwischen 1914 und 1918 schrieb Ernst Raddatz insgesamt 47 Briefe aus dem Feld an seine Frau Käthe …
+
vor 1 Monat
+
+
+ +
+
+
+
+ + +
+
+ Zone 1 + 2 — Kombinierter Header-Balken +
    +
  • Begrüßung links, drei Statistiken rechts — alles in einer Karte
    • +
  • Statistiken durch vertikale Trennlinien gegliedert, jede als <a>-Link
    • +
  • Spart vertikalen Platz: weniger Scrollen für Nutzer auf kleineren Bildschirmen
    • +
  • Stats-Zahlen: 24 px (real) — kleiner als Konzept A, aber immer noch gut lesbar
    • +
+
+
+ Zone 4 — Portrait-Kacheln +
    +
  • 4-spaltig gleichbreit; Avatar 28 px (skaliert), Name + Zahl darunter
    • +
  • Mint-farbene Zahl-Badge (#E8F4F4 / #A6DAD8) macht Dokumentanzahl prominent
    • +
  • Kacheln sind vollflächige <a>-Links — barrierefrei
    • +
+
+
+ Zone 5 — Gleiches Spaltenbreite 1:1 +
    +
  • Beide Spalten erhalten gleich viel Platz — Parität zwischen Dokumente und Geschichten
    • +
  • Dokumente: Thumbnail-Platzhalter + Absender-Link in zweiter Zeile
    • +
  • Geschichten: Auszug mit 2-Zeilen-Clamp — gibt Lesern mehr Kontext zum Klicken
    • +
+
+
+ Stärken dieses Konzepts +
    +
  • Kompakteste der drei Varianten — wenig Scrollbedarf
    • +
  • Portrait-Kacheln helfen, Personen visuell zu „erkennen" (Avatar wird vertraut)
    • +
  • Auszüge in der Geschichten-Spalte erhöhen die Klickwahrscheinlichkeit
    • +
+
+
+
+
+ + +
+
2 Variante · BLOG_WRITE — mit Zone 3 „Meine Entwürfe"
+ +
+
+
BLOG_WRITE-Nutzer READ_ALL + BLOG_WRITE
+ +
+
+
+
familienarchiv.local /
+
+
+ + Startseite + Dokumente + Personen + Geschichten +
MR
+
+
+
+ + +
+
+
Guten Morgen
+
Herzlich willkommen, Marcel.
+
+
+
847Dokumente
+
94Personen
+
12Geschichten
+
+
+ + +
+
+

Meine Entwürfe

+ → Alle Geschichten +
+
+
+
+
Onkel Friedrichs Wanderjahre
+
Entwurf · zuletzt bearbeitet vor 1 Tag
+
+ +
+
+
+
+
Die Raddatz-Kinder
+
Entwurf · zuletzt bearbeitet vor 5 Tagen
+
+ +
+
+ + + + + +
+
+

Zuletzt aktualisiert

Alle Dokumente
+
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 Tagen
+
Heiratsurkunde Raddatz-Müller, 1898
—
vor 4 Tagen
+
+ 3 weitere Dokumente …
+
+
+

Geschichten

Alle
+
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …
vor 3 Tagen
+
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln …
vor 2 Wochen
+
+
+ +
+
+
+ +
+
+ Zone 3 — Entwürfe mit Mint-Dot-Indikator +
    +
  • Mint-Punkt vor jedem Entwurf signalisiert „unveröffentlicht" visuell
    • +
  • Mint-Randakzent links (3 px) ohne Störung des Card-Rahmens
    • +
  • Kompakter als Konzept A — fügt sich harmonisch zwischen Header und Personen ein
    • +
+
+
+
+
+ +
+ + diff --git a/docs/specs/reader-dashboard-b1-hell.html b/docs/specs/reader-dashboard-b1-hell.html new file mode 100644 index 00000000..3abab892 --- /dev/null +++ b/docs/specs/reader-dashboard-b1-hell.html @@ -0,0 +1,385 @@ + + + + + +Reader Dashboard — B.1 · Hell & Klar · Familienarchiv + + + +
+ +
+
+
+

Reader Dashboard — B.1 · „Hell & Klar"

+

Die reinste Iteration von Konzept B. Weißer Header-Balken mit sauberer vertikaler Trennlinie zwischen Gruß und Statistik. Personen-Kacheln mit mintfarbener Bottom-Border als einzigem Akzent. Gleiches 1:1-Spaltenraster. Geschichten mit 2-Zeilen-Auszug. Minimalste Chrome-Dichte.

+
+ B.1 · Entwurf +
+
+
Header-Bg
Weiß — maximale Helligkeit
+
Stats-Trennlinie
Vertikale 1 px Linie zwischen Gruß + Stats
+
Personen-Kacheln
Runder Avatar · Mint Bottom-Border
+
Spaltenbreite
1 : 1 — gleichwertig
+
Geschichten
Kursiver Titel + 2-Zeilen-Auszug
+
+
+ +
+ 📐 Mockup-Skalierung — alle Schriftgrößen, Abstände und Höhen sind auf ca. 55 % der Implementierungswerte skaliert. +
+ + +
+
1 Desktop · READ_ALL — ohne BLOG_WRITE
+ +
+
+
Vollansicht ≥ 1024 px
+
+
+
+
familienarchiv.local /
+
+
+ + Startseite + Dokumente + Personen + Geschichten +
+
+
BK
+
+
+
+
+ + +
+
+
Guten Abend
+
Herzlich willkommen, Brigitte.
+
+
+
+
847Dokumente
+
94Personen
+
12Geschichten
+
+
+ + + + + +
+
+

Zuletzt aktualisiert

Alle Dokumente
+
+
+
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
+
vor 2 Tagen
+
+
+
+
Heiratsurkunde Raddatz-Müller, 1898
—
+
vor 4 Tagen
+
+
+
+
Familienfoto, Sommer 1928
von Ernst Raddatz
+
vor 1 Woche
+
+
+
+
Taufregister Heinrich Weber, 1902
—
+
vor 2 Wo.
+
+
+
+
Postkarte aus Berlin, 1930
von Frieda Müller
+
vor 3 Wo.
+
+
+
+

Geschichten

Alle Geschichten
+
+
Die Reise nach Berlin
+
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …
+
vor 3 Tagen
+
+
+
Sommer 1934 in Köln
+
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise vor dem Krieg …
+
vor 2 Wochen
+
+
+
Briefe aus dem Krieg
+
Zwischen 1914 und 1918 schrieb Ernst Raddatz insgesamt 47 Briefe aus dem Feld an seine Frau Käthe in der Heimat …
+
vor 1 Monat
+
+
+
+ +
+
+
+ +
+
+ Header-Balken — weiß mit Trennlinie +
    +
  • Kein Hintergrund-Farbton — pure weiß, gleicher Hintergrund wie alle Cards
    • +
  • 1 px vertikale Trennlinie (#E8E4DF) trennt Gruß von Stats klar ohne schweren Rand
    • +
  • Stats: 24 px Zahlen (skaliert 14 px), 11 px uppercase Label darunter
    • +
+
+
+ Personen-Kacheln — Mint Bottom-Border +
    +
  • Einziger farbiger Akzent: 2 px mintfarbener Bottom-Border (#A6DAD8)
    • +
  • Runder Avatar in Navy-Farbfamilie — gleiche Logik wie bestehende Avatare in der App
    • +
  • Dokumentzahl in Grau, ohne Badge — so wenig Chrome wie möglich
    • +
+
+
+ Stärken gegenüber Basis-B +
    +
  • Höchste Konsistenz mit dem restlichen App-Stil (alle Cards weiß)
    • +
  • Leichteste visuelle Belastung — ideal für ältere Nutzer
    • +
  • Mint nur als funktionaler Akzent (Bottom-Border auf Personenkacheln)
    • +
+
+
+
+
+ + +
+
2 Variante · BLOG_WRITE — Zone 3 „Meine Entwürfe"
+
+
+
READ_ALL + BLOG_WRITE
+
+
familienarchiv.local /
+
StartseiteDokumentePersonenGeschichten
MR
+
+
+
+
Guten Morgen
Herzlich willkommen, Marcel.
+
+
+
847Dokumente
+
94Personen
+
12Geschichten
+
+
+ +
+

Meine Entwürfe

+
+
Onkel Friedrichs Wanderjahre
Entwurf · zuletzt bearbeitet vor 1 Tag
+ +
+
+
Die Raddatz-Kinder
Entwurf · zuletzt bearbeitet vor 5 Tagen
+ +
+
+ + +
+
+

Zuletzt aktualisiert

Alle Dokumente
+
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 Tagen
+
Heiratsurkunde Raddatz-Müller, 1898
—
vor 4 Tagen
+
+ 3 weitere Dokumente …
+
+
+

Geschichten

Alle
+
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …
vor 3 Tagen
+
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln …
vor 2 Wochen
+
+
+
+
+
+
+
+ Entwürfe-Card — Mint Left-Border +
    +
  • 3 px mintfarbener Left-Border auf Card-Ebene — harmoniert mit den Personen-Kacheln
    • +
  • Kein separater Card-Hintergrund — fügt sich natürlich in den White-Card-Stil ein
    • +
+
+
+
+
+ +
+ + diff --git a/docs/specs/reader-dashboard-b2-warm.html b/docs/specs/reader-dashboard-b2-warm.html new file mode 100644 index 00000000..2aef77a3 --- /dev/null +++ b/docs/specs/reader-dashboard-b2-warm.html @@ -0,0 +1,421 @@ + + + + + +Reader Dashboard — B.2 · Sanft & Warm · Familienarchiv + + + +
+ +
+
+
+

Reader Dashboard — B.2 · „Sanft & Warm"

+

Wärmere Iteration von Konzept B. Der Header-Balken erhält einen Sand-Hintergrund (#FDFAF5) statt Weiß — dies erzeugt eine sanfte Abgrenzung zur Begrüßungszone ohne harte Kante. Statistiken erscheinen als abgerundete Pill-Kacheln. Jede Personenkachel bekommt einen schmalen farbigen Top-Akzentstreifen. Die Story-Spalte zeigt ein zusätzliches Kategorie-Label. Spalten 3:2 — Dokumente etwas breiter.

+
+ B.2 · Entwurf +
+
+
Header-Bg
Sand-warm #FDFAF5 — Begrüßungszone spürbar abgegrenzt
+
Stats-Form
Abgerundete Pill-Kacheln (border-radius: 20 px)
+
Personen
3 px Top-Akzentstreifen je Kachel (Avatarfarbe)
+
Spaltenbreite
3 : 2 — Dokumente · Geschichten
+
Geschichten
Label „Geschichte" + kursiver Titel + Auszug
+
+
+ +
+ 📐 Mockup-Skalierung — alle Schriftgrößen, Abstände und Höhen sind auf ca. 55 % der Implementierungswerte skaliert. +
+ + +
+
1 Desktop · READ_ALL — ohne BLOG_WRITE
+ +
+
+
Vollansicht ≥ 1024 px
+
+
+
+
familienarchiv.local /
+
+
+ + Startseite + Dokumente + Personen + Geschichten +
+
+
BK
+
+
+
+
+ + +
+
+
Guten Abend
+
Herzlich willkommen, Brigitte.
+
+
+ + 847 + Dokumente + + + 94 + Personen + + + 12 + Geschichten + +
+
+ + + + + +
+
+

Zuletzt aktualisiert

Alle Dokumente
+
+
+
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
+
vor 2 Tagen
+
+
+
+
Heiratsurkunde Raddatz-Müller, 1898
—
+
vor 4 Tagen
+
+
+
+
Familienfoto, Sommer 1928
von Ernst Raddatz
+
vor 1 Woche
+
+
+
+
Taufregister Heinrich Weber, 1902
—
+
vor 2 Wo.
+
+
+
+
Postkarte aus Berlin, 1930
von Frieda Müller
+
vor 3 Wo.
+
+
+
+

Geschichten

Alle Geschichten
+
+
Geschichte
+
Die Reise nach Berlin
+
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …
+
vor 3 Tagen
+
+
+
Geschichte
+
Sommer 1934 in Köln
+
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise …
+
vor 2 Wochen
+
+
+
Geschichte
+
Briefe aus dem Krieg
+
Zwischen 1914 und 1918 schrieb Ernst Raddatz insgesamt 47 Briefe aus dem Feld an seine Frau Käthe …
+
vor 1 Monat
+
+
+
+ +
+
+
+ +
+
+ Header-Balken — Sandfarben + Pill-Stats +
    +
  • Hintergrund #FDFAF5 — kaum wahrnehmbar wärmer als Weiß, aber spürbar verschieden
    • +
  • Stats als Pill-Kacheln (border-radius: 20 px) — weicher, weniger „Tabellen"-Charakter
    • +
  • Pills sind vollständige <a>-Elemente; große Touch-Target auch auf Tablet
    • +
+
+
+ Personen-Kacheln — Top-Akzentstreifen +
    +
  • 3 px hoher Streifen oben: gleiche Farbe wie Avatar — verbindet Streifen und Bild visuell
    • +
  • Erzeugt ein „Lesezeichen"-Gefühl: jede Person hat ihre eigene Erkennungsfarbe
    • +
  • Umsetzung: border-top: 3px solid [avatarfarbe] auf .PCARD — kein extra Element nötig
    • +
+
+
+ 3:2 Spaltenbreite +
    +
  • Dokumente bekommen mehr Platz (3) — als primäres Archiv-Element gewichtet
    • +
  • Geschichten-Spalte ist schmaler, aber durch das Story-Label visuell nicht schwächer
    • +
  • Auf < md stacken beide Spalten vertikal (wie alle anderen Varianten)
    • +
+
+
+ Stärken dieser Iteration +
    +
  • Warmster Charakter der drei B-Iterationen — Archiv fühlt sich familiärer an
    • +
  • Top-Streifen gibt Personenkacheln Persönlichkeit ohne Foto oder mehr Daten
    • +
  • Pill-Stats wirken weniger formal — besser für nicht-technische Leser
    • +
+
+
+
+
+ + +
+
2 Variante · BLOG_WRITE — Zone 3 „Meine Entwürfe"
+
+
+
READ_ALL + BLOG_WRITE
+
+
familienarchiv.local /
+
StartseiteDokumentePersonenGeschichten
MR
+
+
+ +
+
Guten Morgen
Herzlich willkommen, Marcel.
+
+ 847Dokumente + 94Personen + 12Geschichten +
+
+ +
+
+
+

Meine Entwürfe

+
+
+
Onkel Friedrichs Wanderjahre
Entwurf · zuletzt bearbeitet vor 1 Tag
+ +
+
+
Die Raddatz-Kinder
Entwurf · zuletzt bearbeitet vor 5 Tagen
+ +
+
+ + +
+
+

Zuletzt aktualisiert

Alle Dokumente
+
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 Tagen
+
Heiratsurkunde Raddatz-Müller, 1898
—
vor 4 Tagen
+
+ 3 weitere …
+
+
+

Geschichten

Alle
+
Geschichte
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …
vor 3 Tagen
+
Geschichte
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …
vor 2 Wochen
+
+
+
+
+
+
+
+ Entwürfe-Card — Sand-Hintergrund + Mint-Dot +
    +
  • Card-Hintergrund #FDFAF5 — gleich wie der Header-Balken: Entwürfe fühlen sich als Teil des „eigenen Bereichs" an
    • +
  • Mint-Dot vor dem Titel statt Border — subtiler, luftiger Akzent
    • +
  • Kontext: BLOG_WRITE-Nutzer schreibt Geschichten → sand-getönte Karte passt zur redaktionellen Rolle
    • +
+
+
+
+
+ +
+ + diff --git a/docs/specs/reader-dashboard-b3-navy.html b/docs/specs/reader-dashboard-b3-navy.html new file mode 100644 index 00000000..5e1a073c --- /dev/null +++ b/docs/specs/reader-dashboard-b3-navy.html @@ -0,0 +1,437 @@ + + + + + +Reader Dashboard — B.3 · Navy & Kontrast · Familienarchiv + + + +
+ +
+
+
+

Reader Dashboard — B.3 · „Navy & Kontrast"

+

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.

+
+ B.3 · Entwurf +
+
+
Header-Bg
Navy #002850 — gespiegelt aus App-Nav
+
Stats-Farbe
Mint #A6DAD8 auf Navy — maximaler Kontrast
+
Personen
Größerer Avatar (34 px) + Badge mit mint Bg
+
Geschichten
2 px Mint-Streifen links + 2-Zeilen-Auszug
+
Spaltenbreite
1 : 1 gleichwertig
+
+
+ +
+ 📐 Mockup-Skalierung — alle Schriftgrößen, Abstände und Höhen sind auf ca. 55 % der Implementierungswerte skaliert. +
+ + +
+
1 Desktop · READ_ALL — ohne BLOG_WRITE
+ +
+
+
Vollansicht ≥ 1024 px
+
+
+
+
familienarchiv.local /
+
+ + +
+ + Startseite + Dokumente + Personen + Geschichten +
+
+
BK
+
+
+ + +
+ + +
+
+
Guten Abend
+
Herzlich willkommen, Brigitte.
+
+
+
+
847Dokumente
+
94Personen
+
12Geschichten
+
+
+
+ +
+ + + + + +
+
+

Zuletzt aktualisiert

Alle Dokumente
+
+
+
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
+
vor 2 Tagen
+
+
+
+
Heiratsurkunde Raddatz-Müller, 1898
—
+
vor 4 Tagen
+
+
+
+
Familienfoto, Sommer 1928
von Ernst Raddatz
+
vor 1 Woche
+
+
+
+
Taufregister Heinrich Weber, 1902
—
+
vor 2 Wo.
+
+
+
+
Postkarte aus Berlin, 1930
von Frieda Müller
+
vor 3 Wo.
+
+
+ +
+

Geschichten

Alle Geschichten
+
+
+
+
Die Reise nach Berlin
+
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …
+
vor 3 Tagen
+
+
+
+
+
+
Sommer 1934 in Köln
+
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise vor dem Krieg …
+
vor 2 Wochen
+
+
+
+
+
+
Briefe aus dem Krieg
+
Zwischen 1914 und 1918 schrieb Ernst Raddatz insgesamt 47 Briefe aus dem Feld an seine Frau Käthe in der Heimat …
+
vor 1 Monat
+
+
+
+
+ +
+
+
+
+ +
+
+ Header-Balken — Vollflächiges Navy +
    +
  • Gleiche Farbe (#002850) wie die App-Navigation direkt darüber
    • +
  • Effekt: Nav und Header verschmelzen optisch zu einer „Kopfzone" der Seite
    • +
  • Mint-Trennlinie (2 px, wie N-accent) trennt Header sauber vom Canvas
    • +
  • Begrüßungstext weiß → maximale Lesbarkeit, serif bleibt erhalten
    • +
+
+
+ Stats in Mint auf Navy +
    +
  • Zahlen in #A6DAD8 — gleiche Farbe wie N-accent und bestehende Mint-Akzente
    • +
  • Sehr hoher Kontrast; klar als Zahlen erkennbar ohne Tooltip oder Label-Hilfe
    • +
  • Labels in rgba(255,255,255,.4) — gedämpft, aber lesbar
    • +
+
+
+ Personen-Avatar — 34 px mit Schatten +
    +
  • 5 px größerer Avatar als B.1/B.2 — gibt Kacheln mehr „Gesicht"
    • +
  • Leichter box-shadow auf Avatar macht ihn dreidimensionaler, erinnert an Foto
    • +
  • Mint-Badge (#D4F0EE / #002850) statt einfachem Grau-Text für Dokumentzahl
    • +
+
+
+ Stärken dieser Iteration +
    +
  • Stärkste Markenpräsenz — Navy + Mint als Leitfarben treten klar hervor
    • +
  • Header-Zone kommuniziert „Willkommen im Archiv" — persönlicher Empfang
    • +
  • Mint-Akzent auf Story-Zeilen verankert den Geschichten-Bereich im Brand
    • +
+
+
+
+
+ + +
+
2 Variante · BLOG_WRITE — Zone 3 „Meine Entwürfe"
+
+
+
READ_ALL + BLOG_WRITE
+
+
familienarchiv.local /
+
StartseiteDokumentePersonenGeschichten
MR
+
+ +
+
Guten Morgen
Herzlich willkommen, Marcel.
+
+
+
847Dokumente
+
94Personen
+
12Geschichten
+
+
+
+
+ +
+
+

Meine Entwürfe

+
+
+
+
+
Onkel Friedrichs Wanderjahre
+
Entwurf · zuletzt bearbeitet vor 1 Tag
+
+ +
+
+
+
+
Die Raddatz-Kinder
+
Entwurf · zuletzt bearbeitet vor 5 Tagen
+
+ +
+
+ + + +
+
+

Zuletzt aktualisiert

Alle Dokumente
+
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 Tagen
+
Heiratsurkunde Raddatz-Müller, 1898
—
vor 4 Tagen
+
+ 3 weitere …
+
+
+

Geschichten

Alle
+
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …
vor 3 Tagen
+
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …
vor 2 Wochen
+
+
+
+
+
+
+
+
+ Entwürfe-Card — Navy Header auf Card +
    +
  • Card-Header in #002850 mit Mint-Label — spiegelt den Haupt-Header-Balken
    • +
  • Schafft visuelle Verbindung: „Meine Entwürfe" gehört zur Autorenrolle, die auch im Gruß adressiert wird
    • +
  • Mint-Dot pro Entwurf-Zeile als einziges farbiges Element im White-Bereich der Card
    • +
+
+
+
+
+ +
+ + diff --git a/docs/specs/reader-dashboard-c-entdecken.html b/docs/specs/reader-dashboard-c-entdecken.html new file mode 100644 index 00000000..a8ab01f5 --- /dev/null +++ b/docs/specs/reader-dashboard-c-entdecken.html @@ -0,0 +1,480 @@ + + + + + +Reader Dashboard — Concept C · Entdecken · Familienarchiv + + + +
+ + +
+
+
+

Reader Dashboard — Konzept C · „Entdecken"

+

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.

+
+ Konzept C · Entwurf +
+
+
+
Schwerpunkt
+
Geschichten als primäres Erlebnis
+
+
+
Statistik
+
Inline-Strip — Text statt Kacheln
+
+
+
Personen-Chips
+
Quadratischer Avatar + Name + Zahl
+
+
+
Geschichten
+
Featured Block (3 Zeilen Auszug) + 2 slim
+
+
+
+ +
+ 📐 Mockup-Skalierung — alle Schriftgrößen, Abstände und Höhen im Mockup sind auf ca. 55 % der tatsächlichen Implementierungswerte skaliert. Werte nicht aus dem Mockup-CSS kopieren. +
+ + +
+
1 Desktop · Leser ohne BLOG_WRITE (READ_ALL only)
+ +
+
+
Vollansicht ≥ 1024 px
+ +
+
+
+
familienarchiv.local /
+
+ + +
+ + Startseite + Dokumente + Personen + Geschichten +
+
+ +
+
BK
+
+
+
+ +
+ + +
+
+ Guten Abend —Herzlich willkommen, Brigitte. +
+
+ + +
+ + 847 + Dokumente + + + 94 + Personen + + + 12 + Geschichten + +
+ + +
+
+ Personen im Fokus + Alle 94 Personen → +
+
+ +
KR
+
+ Käthe Raddatz + 47 Dok. +
+ + +
ER
+
+ Ernst Raddatz + 31 Dok. +
+ + +
FM
+
+ Frieda Müller + 28 Dok. +
+ + +
HW
+
+ Heinrich Weber + 19 Dok. +
+ +
+
+ + +
+ + +
+
+

Zuletzt aktualisiert

+ Alle Dokumente +
+
+
Brief von Ernst an Käthe, März 1923
+
vor 2 Tagen
+
+
+
Heiratsurkunde Raddatz-Müller, 1898
+
vor 4 Tagen
+
+
+
Familienfoto, Sommer 1928
+
vor 1 Woche
+
+
+
Taufregister Heinrich Weber, 1902
+
vor 2 Wo.
+
+
+
Postkarte aus Berlin, 1930
+
vor 3 Wo.
+
+
+ + +
+
+

Geschichten

+ Alle Geschichten +
+ + +
+
Neueste Geschichte
+
Die Reise nach Berlin
+
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 …
+
vor 3 Tagen
+
+ + +
+
Sommer 1934 in Köln
+
vor 2 Wochen
+
+
+
Briefe aus dem Krieg
+
vor 1 Monat
+
+ +
+ +
+
+
+
+ + +
+
+ Zone 1 — Minimale Begrüßung +
    +
  • Kein eigener Card-Container — reine Textzeile, platzsparend
    • +
  • „Guten Abend —" in gedämpftem Grau vor Serif-Begrüßungstext
    • +
  • Beibehaltung der Tageszeit-Dynamik ohne visuelle Lautstärke
    • +
+
+
+ Zone 2 — Kompakter Stats-Strip +
    +
  • Zahlen inline mit Label — keine separaten Kacheln
    • +
  • Gleicher Informationsgehalt wie Konzept A/B, aber ~60 % weniger Höhe
    • +
  • Klickbar als vollständige <a>-Elemente
    • +
+
+
+ Zone 4 — Quadratische Personen-Chips +
    +
  • Quadratischer Avatar (border-radius: 2 px statt 50 %) — wirkt archiv-artig, leicht dokumentarisch
    • +
  • Name + Dokumentzahl übereinander — kompakt und lesbar
    • +
  • Chips wrappen bei schmalem Viewport automatisch
    • +
+
+
+ Zone 5 — Geschichten als Featured Block +
    +
  • Neueste Geschichte erhält sand-getönten Hintergrund + 3-Zeilen-Auszug
    • +
  • Mint-Label „Neueste Geschichte" differenziert vom restlichen Geschichten-Content
    • +
  • Die zwei weiteren Geschichten folgen als slim-Zeilen → reduziert auf Titel + Datum
    • +
  • Dokumente-Spalte ist bewusst schlanker (2:3) — gibt Geschichten Raum
    • +
+
+
+ Stärken dieses Konzepts +
    +
  • Stärkt die narrative Dimension des Archivs — Geschichten als Hauptfenster
    • +
  • Featured-Block lädt zum Lesen ein, ohne dass ein gesonderter Story-Bereich nötig ist
    • +
  • Kompaktester Header → mehr Inhalt „above the fold"
    • +
+
+
+
+
+ + +
+
2 Variante · BLOG_WRITE — mit Zone 3 „Meine Entwürfe"
+ +
+
+
BLOG_WRITE-Nutzer READ_ALL + BLOG_WRITE
+ +
+
+
+
familienarchiv.local /
+
+
+ + Startseite + Dokumente + Personen + Geschichten +
MR
+
+
+
+ + +
+
Guten Morgen —Herzlich willkommen, Marcel.
+
+ + +
+ 847Dokumente + 94Personen + 12Geschichten +
+ + +
+
+
+
+ Meine Entwürfe +
+
+
+
+
Onkel Friedrichs Wanderjahre
+
Entwurf · zuletzt bearbeitet vor 1 Tag
+
+ +
+
+
+
Die Raddatz-Kinder
+
Entwurf · zuletzt bearbeitet vor 5 Tagen
+
+ +
+
+ + +
+
+ Personen im Fokus + Alle 94 Personen → +
+
+
KR
Käthe Raddatz47 Dok.
 +
ER
Ernst Raddatz31 Dok.
 +
FM
Frieda Müller28 Dok.
 +
HW
Heinrich Weber19 Dok.
 +
+
+ + +
+
+

Zuletzt aktualisiert

Alle Dokumente
+
Brief von Ernst an Käthe, März 1923
vor 2 Tagen
+
Heiratsurkunde Raddatz-Müller, 1898
vor 4 Tagen
+
Familienfoto, Sommer 1928
vor 1 Woche
+
+ 2 weitere …
+
+
+

Geschichten

Alle
+
+
Neueste Geschichte
+
Die Reise nach Berlin
+
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …
+
vor 3 Tagen
+
+
Sommer 1934 in Köln
vor 2 Wochen
+
Briefe aus dem Krieg
vor 1 Monat
+
+
+ +
+
+
+ +
+
+ Zone 3 — Entwürfe mit Mint-Vertikallinie +
    +
  • Mintfarbene 2 px Vertikallinie links neben dem Card-Titel — diskreter als ein Randakzent
    • +
  • Leicht mintfarbenes Card-Header-Background (rgba(166,218,216,.08)) grenzt Zone ab
    • +
  • Gut integriert in den kompakten Gesamtstil von Konzept C
    • +
+
+
+
+
+ +
+ + diff --git a/docs/specs/reader-dashboard-final.html b/docs/specs/reader-dashboard-final.html new file mode 100644 index 00000000..18554566 --- /dev/null +++ b/docs/specs/reader-dashboard-final.html @@ -0,0 +1,1055 @@ + + + + + +Reader Dashboard — Final · Familienarchiv + + + +
+ +
+
+
+

Reader Dashboard — Final

+

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.

+
+ Final · Bereit zur Umsetzung +
+
+
+
Header-Balken
+
B.1 — Weiß · vertikale Trennlinie
+
+
+
Personen-Avatar
+
B.3 — 34 px · rund · Schatten
B.1: 28 px, kein Schatten
+
+
+
Dokumentzahl
+
B.3 — Mint Pill (#D4F0EE)
B.1: Grau-Text, kein Badge
+
+
+
Kachel-Rand
+
Einfacher Border · kein Akzentstreifen
B.1: Mint Bottom-Border
+
+
+
Seitenlayout
+
max-w-7xl (1280 px) · px-8 py-8 (32 px) · Canvas vollbreit
+
+
+
+ +
+ 📐 Mockup-Skalierung — alle Schriftgrößen, Abstände und Höhen sind auf ca. 55 % der Implementierungswerte skaliert. Werte nicht aus dem Mockup-CSS kopieren. +
+ + +
+
1 Desktop · READ_ALL — ohne BLOG_WRITE
+ +
+
+
Vollansicht ≥ 1024 px
+
+
+
+
familienarchiv.local /
+
+
+ + Startseite + Dokumente + Personen + Geschichten +
+
+
BK
+
+
+
+
+
+ + +
+
+
Guten Abend
+
Herzlich willkommen, Brigitte.
+
+
+
+
847Dokumente
+
94Personen
+
12Geschichten
+
+
+ + + + + +
+
+

Zuletzt aktualisiert

Alle Dokumente
+
+
+
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
+
vor 2 Tagen
+
+
+
+
Heiratsurkunde Raddatz-Müller, 1898
—
+
vor 4 Tagen
+
+
+
+
Familienfoto, Sommer 1928
von Ernst Raddatz
+
vor 1 Woche
+
+
+
+
Taufregister Heinrich Weber, 1902
—
+
vor 2 Wo.
+
+
+
+
Postkarte aus Berlin, 1930
von Frieda Müller
+
vor 3 Wo.
+
+
+
+

Geschichten

Alle Geschichten
+
+
Die Reise nach Berlin
+
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …
+
vor 3 Tagen
+
+
+
Sommer 1934 in Köln
+
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise vor dem Krieg …
+
vor 2 Wochen
+
+
+
Briefe aus dem Krieg
+
Zwischen 1914 und 1918 schrieb Ernst Raddatz insgesamt 47 Briefe aus dem Feld an seine Frau Käthe in der Heimat …
+
vor 1 Monat
+
+
+
+ +
+
+
+
+ +
+
+ Header-Balken — unverändert B.1 +
    +
  • Weißer Hintergrund, 1 px vertikale Trennlinie (#E8E4DF)
    • +
  • Gruß links in Georgia Serif, Stats rechts mit Inline-Trennern
    • +
+
+
+ Personen-Kacheln — B.3 Avatar, B.3 Pill, kein Streifen +
    +
  • Avatar: 34 px (statt 28 px), gleicher border-radius: 50 %
    • +
  • Avatar box-shadow: 0 2 px 6 px rgba(0,40,80,.2) — leichte Tiefe
    • +
  • Dokumentzahl: Mint Pill (#D4F0EE bg, #002850 text) statt grauem Plain-Text
    • +
  • Kein border-bottom-Akzent — plain 1 px #E0DDD5 rundum
    • +
+
+
+ Seitenlayout — reale Werte +
    +
  • Canvas (#F5F4EF) läuft vollbreit bis zum Viewport-Rand
    • +
  • Inhalts-Wrapper: max-w-7xl (1280 px) + px-8 py-8 (32 px) zentriert
    • +
  • Mockup-Äquivalent: max-width 704 px, padding 20 px links/rechts, 18 px oben
    • +
  • Nav-Bar bleibt vollbreit — kein max-width-Constraint
    • +
+
+
+ Alle anderen Elemente unverändert aus B.1 +
    +
  • 1:1 Spaltenbreite, Docs-Thumb, Absender-Link, Datum
    • +
  • Story: kursiver Titel, 2-Zeilen-Auszug, Datum
    • +
  • Drafts-Card: white mit mint left-border (BLOG_WRITE-Variante)
    • +
+
+
+
+
+ + +
+
2 Variante · BLOG_WRITE — Zone 3 „Meine Entwürfe"
+
+
+
READ_ALL + BLOG_WRITE
+
+
familienarchiv.local /
+
StartseiteDokumentePersonenGeschichten
MR
+
+
+
+ +
+
Guten Morgen
Herzlich willkommen, Marcel.
+
+
+
847Dokumente
+
94Personen
+
12Geschichten
+
+
+ +
+

Meine Entwürfe

+
+
Onkel Friedrichs Wanderjahre
Entwurf · zuletzt bearbeitet vor 1 Tag
+ +
+
+
Die Raddatz-Kinder
Entwurf · zuletzt bearbeitet vor 5 Tagen
+ +
+
+ + + +
+
+

Zuletzt aktualisiert

Alle Dokumente
+
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 Tagen
+
Heiratsurkunde Raddatz-Müller, 1898
—
vor 4 Tagen
+
Familienfoto, Sommer 1928
von Ernst Raddatz
vor 1 Woche
+
+ 2 weitere Dokumente …
+
+
+

Geschichten

Alle
+
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …
vor 3 Tagen
+
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise vor dem Krieg …
vor 2 Wochen
+
+
+ +
+
+
+
+
+
+ Entwürfe-Card — unverändert B.1 +
    +
  • Weiß mit 3 px mint Left-Border — gleiche Sprache wie restliche Cards
    • +
  • Titel in Georgia Serif, Metazeile in gedämpftem Grau
    • +
  • Nur sichtbar für BLOG_WRITE-Nutzer (isReader && canBlogWrite)
    • +
+
+
+
+
+ + + +
+
3 Desktop · Dark Theme — READ_ALL
+
+
+
Vollansicht ≥ 1024 px · dark mode
+
+
+
+
familienarchiv.local /
+
+
+ + Startseite + Dokumente + Personen + Geschichten +
+
+
BK
+
+
+
+
+
+ +
+
+
Guten Abend
+
Herzlich willkommen, Brigitte.
+
+
+
+
847Dokumente
+
94Personen
+
12Geschichten
+
+
+ + + +
+
+

Zuletzt aktualisiert

Alle Dokumente
+
+
+
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
+
vor 2 Tagen
+
+
+
+
Heiratsurkunde Raddatz-Müller, 1898
—
+
vor 4 Tagen
+
+
+
+
Familienfoto, Sommer 1928
von Ernst Raddatz
+
vor 1 Woche
+
+
+
+
Taufregister Heinrich Weber, 1902
—
+
vor 2 Wo.
+
+
+
+
Postkarte aus Berlin, 1930
von Frieda Müller
+
vor 3 Wo.
+
+
+
+

Geschichten

Alle Geschichten
+
+
Die Reise nach Berlin
+
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …
+
vor 3 Tagen
+
+
+
Sommer 1934 in Köln
+
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise vor dem Krieg …
+
vor 2 Wochen
+
+
+
Briefe aus dem Krieg
+
Zwischen 1914 und 1918 schrieb Ernst Raddatz insgesamt 47 Briefe aus dem Feld an seine Frau Käthe in der Heimat …
+
vor 1 Monat
+
+
+
+ +
+
+
+
+ +
+
+ Dark Canvas — DK-MAIN +
    +
  • Hintergrund: #0F1219 (tief dunkelblau, kein reines Schwarz)
    • +
  • Browser-Chromleiste: #1C1E26 · URL-Bar: #252830
    • +
  • Nav-Bar bleibt #002850 — keine Änderung im Dark Mode
    • +
+
+
+ Karten & Trennlinien — DK-CARD / DK-HEADER-BAR +
    +
  • Surface: #161C27 (dunkleres Blaugrau)
    • +
  • Rand: rgba(255,255,255,.08) — subtile Trennung statt Linie
    • +
  • Zeilentrennlinien: rgba(255,255,255,.04)
    • +
+
+
+ Typografie-Token im Dark Mode +
    +
  • Primär-Text: #D0CCC4 / #C0BDB6 (warm, kein reines Weiß)
    • +
  • Beschriftungen (Labels): #323850
    • +
  • Datum/Dim: #262E48
    • +
  • Mint: #A6DAD8 — unverändert, auch im Dark Mode
    • +
  • Mint-Pill Hintergrund: rgba(166,218,216,.14)
    • +
+
+
+ Kompositions-Muster — DK- als Zusatzklasse +
    +
  • Klassen addieren sich: class="CARD DK-CARD"
    • +
  • DK- nutzt !important zum Überschreiben von Light-Werten
    • +
  • Strukturelle Klassen bleiben unverändert — kein doppelter Markup
    • +
  • Impl.: Tailwind dark:-Varianten oder CSS-Variable-Swap
    • +
+
+
+
+
+ + +
+
4 Mobile — 3 Varianten (375 px · ≈ 64 % Mockup-Skala)
+ +
+
+
Alle drei Varianten nebeneinander
+
+ + +
+
+ READ_ALL + Hell +
+
+
+ 19:43 +
+ + + +
+
+
+ +
+
+
BK
+
+
+
+
+
+ +
+
Guten Abend
+
Herzlich willkommen, Brigitte.
+
+
847Dok.
+
94Pers.
+
12Gesch.
+
+
+ + + +
+

Zuletzt aktualisiert

Alle
+
+
+
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
+
vor 2 T.
+
+
+
+
Heiratsurkunde Raddatz-Müller, 1898
—
+
vor 4 T.
+
+
+
+
Familienfoto, Sommer 1928
von Ernst Raddatz
+
vor 1 W.
+
+
+ +
+

Geschichten

Alle
+
+
Die Reise nach Berlin
+
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …
+
vor 3 Tagen
+
+
+
Sommer 1934 in Köln
+
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …
+
vor 2 Wochen
+
+
+ +
+
+
+
+ + +
+
+ BLOG_WRITE + Hell + Entwürfe +
+
+
+ 08:17 +
+ + +
+
+
+ +
+
+
MR
+
+
+
+
+
+ +
+
Guten Morgen
+
Herzlich willkommen, Marcel.
+
+
847Dok.
+
94Pers.
+
12Gesch.
+
+
+ +
+

Meine Entwürfe

+
+
Onkel Friedrichs Wanderjahre
Entwurf · vor 1 Tag
+ +
+
+
Die Raddatz-Kinder
Entwurf · vor 5 Tagen
+ +
+
+ + + +
+

Zuletzt aktualisiert

Alle
+
+
+
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
+
vor 2 T.
+
+
+
+
Familienfoto, Sommer 1928
von Ernst Raddatz
+
vor 1 W.
+
+
+ +
+

Geschichten

Alle
+
+
Die Reise nach Berlin
+
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …
+
vor 3 Tagen
+
+
+
Sommer 1934 in Köln
+
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …
+
vor 2 Wochen
+
+
+ +
+
+
+
+ + +
+
+ READ_ALL + Dunkel +
+
+
+ 19:43 +
+ + +
+
+
+ +
+
+
BK
+
+
+
+
+
+ +
+
Guten Abend
+
Herzlich willkommen, Brigitte.
+
+
847Dok.
+
94Pers.
+
12Gesch.
+
+
+ + + +
+

Zuletzt aktualisiert

Alle
+
+
+
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
+
vor 2 T.
+
+
+
+
Heiratsurkunde Raddatz-Müller, 1898
—
+
vor 4 T.
+
+
+
+
Familienfoto, Sommer 1928
von Ernst Raddatz
+
vor 1 W.
+
+
+ +
+

Geschichten

Alle
+
+
Die Reise nach Berlin
+
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …
+
vor 3 Tagen
+
+
+
Sommer 1934 in Köln
+
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …
+
vor 2 Wochen
+
+
+ +
+
+
+
+ +
+
+ +
+
+ Header — stacked layout +
    +
  • Desktop: Greeting + Stats nebeneinander (Flexbox row, 1 px Divider)
    • +
  • Mobile: Greeting oben, Stats darunter nach border-top — kein Divider
    • +
  • Stat-Labels kürzen auf „Dok." / „Pers." / „Gesch." (Platzmangel)
    • +
+
+
+ Personen — 2×2 Grid (statt 4×1) +
    +
  • Desktop: grid-template-columns: repeat(4, 1fr)
    • +
  • Mobile: grid-template-columns: 1fr 1fr — Avatar 22 px (statt 34 px)
    • +
  • „Alle N Personen →" als Inline-Link unter dem Grid
    • +
+
+
+ Inhalt — einspaltig, Docs zuerst +
    +
  • Desktop: grid-template-columns: 1fr 1fr nebeneinander
    • +
  • Mobile: Spalten aufgelöst — Dokumente-Card oben, Geschichten-Card darunter
    • +
  • Breakpoint: Tailwind sm = 640 px
    • +
+
+
+ Navigation — Hamburger-Menü +
    +
  • Desktop: inline Nav-Links sichtbar
    • +
  • Mobile: Links ausgeblendet, stattdessen Hamburger-Icon (3 Striche) links neben Avatar
    • +
  • Nav-Bar Höhe und Farbe (#002850) bleiben identisch
    • +
+
+
+ Dark Mobile — .dk Modifier-Klasse +
    +
  • Selbe M- Strukturklassen + .dk für Dark-Werte
    • +
  • Nav-Bar bleibt #002850 — kein .dk nötig
    • +
  • PHONE-Status-Bar bleibt #002850 — unverändert
    • +
  • Avatare behalten ihre Farbe — Eigenfarbe, kein Token
    • +
+
+
+
+
+ +
+ +