JUSN
347fe7008a
Vorlage ist die Pinterest-Web-App. Geaendert wurde ausschliesslich die Gestaltung: state, Tastaturkuerzel, deck/flash/commit/undo, die Drag-Handler und die Beispieldaten sind Byte-fuer-Byte identisch. - Hell statt dunkel: weisser Grund, Text #111, roter Akzent #e60023 statt Mint auf Tannen-/Weinrot-Verlauf - Sidebar (236px, beschriftet) wird zur 80px-Icon-Rail, Einstellungen sitzt unten; Zustaende ueber .rail/.rail.active statt inline, weil die dc-Laufzeit style-hover mit !important setzt und den aktiven Button sonst beim Hover aufhellt - Kopfzeile bekommt das Pinterest-Suchfeld (Pille, 48px) plus Konto; Tabs wandern in eine eigene Leiste mit 3px-Unterstrich - Karten randlos mit 16px-Radius; Merken-Pille erscheint beim Hover oben rechts, dazu ein Scrim - beides an :hover/:focus-within der Karte - Profil-Galerie wird Masonry (columns:5, gestaffelte Hoehen) - Nur noch Manrope, JetBrains Mono und backdrop-filter entfallen Der Tageszaehler "Karten gesichtet" hat mit der schmalen Rail seinen Platz verloren und sitzt jetzt in der Tab-Leiste. Offen: das Suchfeld ist eine Attrappe - die App hat keine Suche. Im README unter "Offene Punkte" vermerkt. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
21 lines
1.4 KiB
Markdown
21 lines
1.4 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,
|
|
Drag-Schwellen 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-Karten,
|
|
Masonry im Profil. Hover-Elemente (Merken-Pille, Scrim) hängen am Hover der Karte.
|
|
4. Umfang: App-Shell (Sidebar + Kopfzeile mit Tabs) und die vier Screens
|
|
Feed, Profil, Erstellen, Einstellungen.
|
|
5. 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.
|