JUSN
39e6aa20e7
Die Mobile-App laeuft im Browser bisher als schmale Handy-Spalte (siehe design/desktop-ansicht/referenz/mobile-ansicht-im-browser.png). Dieses Bundle beschreibt die Desktop-Adaption: dreispaltiges App-Layout mit permanenter Sidebar, zentralem Kartenstapel und Detailspalte, Swipe ersetzt durch Maus-Drag, Buttons und Tastatur. - README.md: vollstaendige Spezifikation (App-Shell, Screens Feed/Profil/ Erstellen/Einstellungen, Interaktionen, State-Modell, Design-Tokens) - Videogen Web.dc.html + support.js: Referenz-Prototyp zum Ansehen, ausdruecklich kein Produktionscode - PROMPT.md: Umsetzungsauftrag, Pfade an die Ablage im Repo angepasst Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1.1 KiB
1.1 KiB
Setze das Design aus diesem Ordner in unserem Stack um.
- Lies
design/desktop-ansicht/README.mdvollstä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 inDATA). Zum Ansehen im Browser öffnen —support.jsmuss 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, Drag-Schwellen und Animationsdauern wie im README angegeben.
- Umfang: App-Shell (Sidebar + Kopfzeile mit Tabs) und die vier Screens Feed, Profil, Erstellen, Einstellungen.
- 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.