From 12487d187fd2f00cff1ac778800139c5546f9e7e Mon Sep 17 00:00:00 2001 From: Marcel Date: Wed, 6 May 2026 11:36:04 +0200 Subject: [PATCH] docs(spec): reader dashboard final spec (#447) Co-Authored-By: Claude Sonnet 4.6 --- docs/specs/reader-dashboard-final.html | 1055 ++++++++++++++++++++++++ 1 file changed, 1055 insertions(+) create mode 100644 docs/specs/reader-dashboard-final.html 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
    • +
+
+
+
+
+ +
+ +