Files
p42.f-w/docs/BRIEF.md
T
guyg1474andClaude Opus 5.5 dd58b3d1f8 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

1.9 KiB
Raw Blame History

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.