Reskin auf Pinterest-Desktop-Optik, Funktionen unveraendert
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>
This commit is contained in:
@@ -9,6 +9,9 @@ Setze das Design aus diesem Ordner in unserem Stack um.
|
||||
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).
|
||||
|
||||
Reference in New Issue
Block a user