videogen/design/desktop-ansicht/PROMPT.md at main

Files

JUSN 4c47090f42 Feed wird Raster statt Kartenstapel, Swipen entfaellt

Rueckmeldung vom Kunden: der Screenshot war als Funktionsaenderung
gemeint, nicht nur als Optik. Statt eine Karte nach der anderen
durchzuschieben, liegen jetzt alle nebeneinander und werden einzeln
gemerkt, ausgeblendet oder geoeffnet.

Raus:
- Kartenstapel, Maus-Drag, Pfeiltasten, Exit-Animation
- Undo samt History - "gemerkt" ist ein Zustand, den ein zweiter Klick
  zuruecknimmt, keine Entscheidung in einer History
- die drei Aktions-Buttons, das Kuerzel-Panel, die feste Detailspalte

Rein:
- Masonry-Raster (columns 3-6, Standard 5) mit gestaffelten Hoehen
- Merken-Pille und ⋯ beim Hover auf der Kachel; ⋯ bietet "Nicht mehr
  zeigen" und "Details oeffnen"
- Detailansicht als Overlay mit Medium, Beschreibung, Tags, Kennzahlen
- Auswahlmodus mit Auswahlkreisen und Sammelaktion "Zur Sammlung
  hinzufuegen"
- Escape schliesst der Reihe nach Detailansicht, Menue, Auswahlmodus

Karten haben jetzt eine id; Merken, Ausblenden, Auswahl und Detail
referenzieren darueber statt ueber einen Index. Die Profil-Galerie zeigt
dadurch genau die gemerkten Karten, die Kennzahl "Gemerkt" zaehlt sie.
Beispieldaten auf 10/8/6 Karten erweitert, damit das Raster traegt.

Offen und im README vermerkt: Suche ist weiterhin eine Attrappe,
Ausblenden ist fluechtig, Nachladen fuer echte Datenmengen fehlt.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

2026-08-05 23:38:14 +02:00

1.9 KiB

Raw Permalink Blame History

Setze das Design aus diesem Ordner in unserem Stack um.

Lies design/desktop-ansicht/README.md vollständig — es enthält Layout, exakte Farben, Typografie, Abstände, Interaktionen, State-Modell und Design-Tokens.
Referenz-Prototyp: design/desktop-ansicht/Videogen Web.dc.html (Template oben, Logikklasse mit Zustand/Interaktion unten, Beispieldaten in DATA). Zum Ansehen im Browser öffnen — support.js muss im selben Ordner liegen. Diese Dateien sind Design-Referenz, kein Produktionscode: nicht kopieren, sondern in unserer bestehenden Umgebung mit unseren Patterns und Komponenten nachbauen.
Fidelity ist high — pixelgenau umsetzen: Farben, Radien, Übergänge, Hover-/Focus-States und Animationsdauern wie im README angegeben. Die visuelle Sprache ist Pinterest Desktop: weißer Hintergrund, 80px-Icon-Rail ohne Beschriftung, Suchfeld als Pille, rote Primäraktion #e60023, randlose 16px-Kacheln, Masonry-Raster.
Umfang: App-Shell (Icon-Rail + Kopfzeile + Tab-Leiste) und die vier Screens Feed, Profil, Erstellen, Einstellungen — inklusive Detailansicht als Overlay und Auswahlmodus mit Sammelaktion.
Kein Swipen. Der Feed ist ein Raster, kein Kartenstapel: keine Drag-Geste, keine Pfeiltasten, kein Undo. „Gemerkt" ist ein Zustand, den ein zweiter Klick zurücknimmt.
Karten werden über ihre id referenziert (Merken, Ausblenden, Auswahl, Detailansicht), nicht über einen Index.
Hover-Elemente (Merken-Pille, ⋯, Scrim) hängen am Hover der Kachel — :focus-within mitnehmen, sonst sind sie per Tastatur nicht erreichbar.
Icons als Lucide-Icons umsetzen (im Prototyp stehen Unicode-Glyphen als Platzhalter). Medien-Platzhalter (CSS-Verläufe mit Streifen) durch echte Bilder/Videos ersetzen.

Frag nach, bevor du Struktur oder Verhalten abweichend vom README änderst. Die offenen Punkte am Ende des README (Suche, dauerhaftes Ausblenden, Nachladen) vor der Umsetzung klären.

1.9 KiB Raw Permalink Blame History

1.9 KiB

Raw Permalink Blame History