JUSN
4c47090f42
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>
30 lines
1.9 KiB
Markdown
30 lines
1.9 KiB
Markdown
Setze das Design aus diesem Ordner in unserem Stack um.
|
|
|
|
1. Lies `design/desktop-ansicht/README.md` vollständig — es enthält Layout, exakte
|
|
Farben, Typografie, Abstände, Interaktionen, State-Modell und Design-Tokens.
|
|
2. 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.
|
|
3. 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.
|
|
4. Umfang: App-Shell (Icon-Rail + Kopfzeile + Tab-Leiste) und die vier Screens
|
|
Feed, Profil, Erstellen, Einstellungen — inklusive Detailansicht als Overlay
|
|
und Auswahlmodus mit Sammelaktion.
|
|
5. **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.
|
|
6. Karten werden über ihre `id` referenziert (Merken, Ausblenden, Auswahl, Detailansicht),
|
|
nicht über einen Index.
|
|
7. Hover-Elemente (Merken-Pille, ⋯, Scrim) hängen am Hover der Kachel — `:focus-within`
|
|
mitnehmen, sonst sind sie per Tastatur nicht erreichbar.
|
|
8. 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.
|