diff --git a/docs/specs/reader-dashboard-final.html b/docs/specs/reader-dashboard-final.html new file mode 100644 index 00000000..c5c03749 --- /dev/null +++ b/docs/specs/reader-dashboard-final.html @@ -0,0 +1,1224 @@ + + + + + +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)
    • +
+
+
+ Stat-Links — Zielrouten +
    +
  • Dokumente-Zahl → /documents
    • +
  • Personen-Zahl → /persons
    • +
  • Geschichten-Zahl → /geschichten
    • +
  • „Alle N Personen →" → /persons
    • +
  • „Alle Dokumente" / „Alle" in Card-Head → /documents
    • +
  • „Alle Geschichten" / „Alle" in Card-Head → /geschichten
    • +
  • Personen-Kacheln → /persons/{id} (Instanz-spezifisch)
    • +
+
+
+
+
+ + +
+
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 — WCAG AA +
    +
  • Primär-Text: #D0CCC4 / #C0BDB6 (warm, kein reines Weiß)
    • +
  • Gedämpft (muted): #7080A8 — Absender, Excerpts, Entwurfs-Meta (≥ 4.5:1)
    • +
  • Labels/Überschriften: #6070A0 — HSTAT-Label, Card-Head h3 (≥ 4.5:1)
    • +
  • Dim: #5A6888 — Datum-Felder (≥ 4.5:1)
    • +
  • 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
    • +
+
+
+ Neue i18n-Schlüssel — messages/{de,en,es}.json +
    +
  • dashboard.greeting.morning — „Guten Morgen" (vor 12:00)
    • +
  • dashboard.greeting.afternoon — „Guten Tag" (12:00–18:00)
    • +
  • dashboard.greeting.evening — „Guten Abend" (ab 18:00)
    • +
  • dashboard.welcome — „Herzlich willkommen, {name}." (parametrisch)
    • +
  • dashboard.persons.viewAll — „Alle {count} Personen →" (parametrisch)
    • +
  • dashboard.recentlyUpdated — „Zuletzt aktualisiert"
    • +
  • dashboard.myDrafts — „Meine Entwürfe"
    • +
  • dashboard.stat.documents — „Dokumente" / mobil: „Dok."
    • +
  • dashboard.stat.persons — „Personen" / mobil: „Pers."
    • +
  • dashboard.stat.stories — „Geschichten" / mobil: „Gesch."
    • +
+
+
+
+
+ + +
+
↗ Implementierungsreferenz — Tailwind-Klassen je Region
+

Exakte Tailwind CSS 4-Klassen und Pixel-Werte für jeden UI-Bereich. Diese Werte gelten für die Implementierung, nicht die skalierten Mockup-Werte.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RegionTailwind-KlassenHinweise
Seiten-Canvasbg-canvas w-fullVollbreite Viewport; Farbe: --palette-sand / bg-canvas
Inhalts-Wrappermax-w-7xl mx-auto px-8 py-81280 px max-width, 32 px padding allseitig
Header-Balkenbg-white border border-line rounded-sm px-4 py-3 flex items-center gap-4Explizit bg-white, nicht bg-surface — weißer Hintergrund ist intentionell (B.1-Entscheidung)
Header: Gruß-Zeittext-[6px] font-bold uppercase tracking-[.8px] text-[#C8B8A0]Warm-beige, kein Design-Token — kandidiert für --color-greeting-time
Header: Begrüßungsnamefont-serif text-xl text-brand-navyGeorgia/Tinos; text-xl (20 px real)
Header: Trennliniew-px self-stretch bg-line flex-shrink-01 px vertikal; --palette-line = #E8E4DF
Stat-Zahltext-2xl font-black text-brand-navy leading-none blockNumerischer Wert; Block damit Label darunter sitzt
Stat-Labeltext-[11px] font-bold uppercase tracking-[.8px] text-ink-3 block mt-0.5Licht: #706C68 (WCAG AA); Tailwind-Token text-ink-3 TBD
Personen-Gridgrid grid-cols-4 gap-1.5Mobile: grid-cols-2 bei sm: (640 px)
Personen-Kachelbg-surface border border-line rounded-sm p-2.5 flex flex-col items-center text-center gap-1.5 no-underlinebg-surface = --palette-surface; kein Bottom-Accent
Personen-Avatarw-9 h-9 rounded-full flex items-center justify-center font-black text-white text-[9px] shadow-sm flex-shrink-034 px real ≈ w-9 (36 px) — nächster Tailwind-Step; Avatar-Farbe per Person-Eigenfarbe
Mint-Pill Badgetext-[11px] font-bold text-brand-navy bg-[#D4F0EE] px-1.5 py-px rounded-fullToken-Kandidat: --color-mint-pill / bg-mint-soft
„Alle N Personen →"text-xs font-semibold text-[#4A6E8A] no-underline text-right block mt-1Direkte Farbe (kein opacity-Trick) — WCAG AA auf bg-canvas
Content-Cardbg-surface border border-line rounded-sm overflow-hidden flex flex-colGleiche Card-Sprache wie restliche App
Card-Kopfzeileflex items-center justify-between px-3 py-1.5 border-b border-lineh3: text-[11px] font-bold uppercase tracking-[.12em] text-ink-3
Dok.-Datumtext-[12px] text-ink-3 whitespace-nowrap flex-shrink-0Licht: #706C68 (WCAG AA); nicht #C8C4BE
Story-Excerpttext-xs text-ink-2 leading-relaxed line-clamp-22 Zeilen max via Tailwind line-clamp-2
Story-Metatext-[11px] text-ink-3Licht: #706C68 (WCAG AA)
Entwürfe-Cardbg-surface border border-line border-l-[3px] border-l-brand-mint rounded-sm overflow-hiddenMint Left-Border als visueller Anker für BLOG_WRITE-Zone
Dark Modedark:bg-surface dark:border-white/8 dark:text-ink (via Tailwind dark:)Nicht !important-Overrides aus Spec — spec-DK- Klassen sind Annäherungen
+
+ +
+ +