P42 Dashboard: erster Stand

FastAPI-Backend und React-Frontend mit Konten, Sendungsverfolgung, Projekt-Artikeln, Vorrat & Einkauf mit Rezeptabgleich, Reise-Weltkarte, Kanban-Projekten mit Priorität, Server-Monitoring und den Designs Matrix und Blackwall. Betrieb per Docker hinter nginx (siehe DEPLOY.md). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-14 14:08:11 +02:00
commit dd58b3d1f8
@@ -0,0 +1,35 @@
+# Design-Brief: umschaltbare Designs
+
+Selbst ausgearbeitet im Rahmen der Vorgabe ("Star Trek, Star Wars, Iron Man 2, das aktuelle bleibt").
+
+## Was und für wen
+
+Ein privates Heim-Dashboard für eine kleine Gruppe von Konten. Die Designs ändern nur die
+Darstellung: gleiche Seiten, gleiche Bedienung, gleiche Reihenfolge der Inhalte.
+
+## Die Designs
+
+(LCARS, Zielcomputer und J.A.R.V.I.S. gab es zeitweise; sie wurden auf Wunsch wieder entfernt.)
+
+| Design | Stimmung (3–5 Wörter) | Erkennungsmerkmal |
+|---|---|---|
+| Matrix (Standard) | roh, nächtlich, Terminal | roter Zeichenregen, Scanlines, blinkender Cursor |
+| Blackwall (Cyberpunk) | bedrohlich, digital, scharfkantig | leuchtende Datenwand nach dem Vorbild aus dem Spiel (Wand-Korridor, Lichtband, Punkteboden, seltener Glitch), abgeschrägte Panels, Pink-Rot/Cyan, chromatisch versetzte Titel |
+
+## Modernisierung (zweite Runde)
+
+Ziel: wie eine durchdachte Alltags-Oberfläche wirken statt wie eine Film-Requisite, das Vorbild
+bleibt erkennbar. Umsetzung über ein gemeinsames Token-System in `styles.css` (Farbrollen, Radien,
+Schatten, Fokusring, Schriftrollen für Text/Titel/Beschriftung, Bewegung); jedes Design setzt vor
+allem diese Werte. Ruhige Fließtext-Schriften, Display-Schrift nur für Seitentitel, weiche
+Fokusringe, Status als Pillen, Kacheln mit Icon-Feld, Hintergründe zur Mitte hin ausgeblendet,
+Überblenden beim Design-Wechsel.
+
+## Regeln, die für alle gelten
+
+- Farben über Rollen (Hintergrund, Fläche, Text, gedämpft, Akzent, Status), ein Akzent je Design.
+- Höchstens zwei Schriftfamilien je Design, alle lokal und frei lizenziert.
+- Kontrast mindestens 4,5:1 (große Schrift 3:1), gemessen auf allen Seiten in allen Designs.
+- Bewegung nur über `transform`/`opacity` bzw. Canvas; "Animation aus" im Menü und
+  "Bewegung reduzieren" im System stoppen alles. Hintergründe sind `aria-hidden`.
+- Keine Original-Logos, Abzeichen oder geschützten Schriften; keine erfundenen Kennzahlen.
@@ -0,0 +1,30 @@
+# Quellen und Lizenzen
+
+## Schriften (alle lokal eingebunden über `@fontsource`)
+
+| Schrift | Design | Lizenz |
+|---|---|---|
+| VT323 | Matrix (Überschriften) | SIL Open Font License 1.1 |
+| IBM Plex Mono | Matrix (Text) | SIL Open Font License 1.1 |
+| Chakra Petch | Blackwall (Text, Beschriftungen) | SIL Open Font License 1.1 |
+| Oxanium | Blackwall (Titel) | SIL Open Font License 1.1 |
+
+Die Lizenztexte liegen in `frontend/node_modules/@fontsource/<schrift>/LICENSE`.
+
+## Daten
+
+| Was | Quelle | Lizenz |
+|---|---|---|
+| Weltkarte (`frontend/public/maps/countries-50m.json`) | world-atlas 2.0.2, Grundlage Natural Earth | ISC (world-atlas), gemeinfrei (Natural Earth) |
+| Länderdaten (`frontend/src/data/laender.json`) | world-countries 5.1.0 | ODbL 1.0 |
+| Städtesuche | Open-Meteo Geocoding, Daten von GeoNames | CC BY 4.0 |
+| Infotexte | deutschsprachige Wikipedia | CC BY-SA 4.0 |
+| Einwohnerzahlen, Hauptstädte | Wikidata | CC0 |
+
+Die Quellenangaben stehen auch klein unter der Reise-Karte.
+
+## Designs
+
+Blackwall ist von Cyberpunk 2077 inspiriert.
+Es werden keine Original-Logos, Abzeichen, Bilder oder geschützten Schriften verwendet; alle
+Formen, Farben und Hintergründe sind selbst gezeichnet (CSS, SVG, Canvas).
@@ -0,0 +1,34 @@
+# Bibliotheken und ihre Aufgabe
+
+Jede Bibliothek hat genau eine Aufgabe.
+
+## Frontend (`frontend/package.json`)
+
+| Bibliothek | Aufgabe |
+|---|---|
+| React, React DOM | Oberfläche |
+| React Router | Seiten und Navigation |
+| TipTap (`@tiptap/*`) | Artikel-Editor |
+| d3-geo | Weltkarte: Projektion und Pfade |
+| d3-zoom, d3-selection, d3-transition | Weltkarte: Zoomen, Verschieben, weiche Übergänge |
+| topojson-client | Kartendaten entpacken |
+| `@fontsource/*` | Schriften lokal einbinden (keine Anfrage an Google) |
+| Vite | Entwicklung und Build |
+
+Bewusst ohne Animationsbibliothek: Jeder Design-Hintergrund ist
+ein einzelner Canvas mit eigener Schleife (Matrix, Blackwall). Es läuft immer nur der
+Hintergrund des aktiven Designs, also nie zwei Schleifen gleichzeitig.
+
+Größen (gzip, gemessen beim Build): Start 120 kB JavaScript + 17 kB CSS (Budget 250 kB).
+Erst beim Öffnen geladen: Artikel-Editor 131 kB, Weltkarte 44 kB. Schriftdateien lädt der
+Browser nur für das aktive Design.
+
+## Backend (`backend/requirements.txt`)
+
+| Bibliothek | Aufgabe |
+|---|---|
+| FastAPI, Uvicorn | API und Auslieferung des Frontends |
+| httpx | Abrufe nach außen (Sendungsverfolgung, Monitoring, Rezepte, Reise-Infos) |
+| nh3 | Artikel-HTML bereinigen |
+
+Datenbank: SQLite (Python-Standardbibliothek).