# Handoff: Videogen — Web-App (Desktop-Adaption der Mobile-App) ## Überblick Die bestehende Mobile-App („videogen") als Desktop-Web-App. Statt einer schmalen Handy-Spalte im Browser: Icon-Rail links, breite Kopfzeile mit Suche und ein **Masonry-Raster** als Feed. **Das Swipen entfällt.** In der Mobile-App wird eine Karte nach der anderen durchgeschoben; auf dem Desktop liegen stattdessen alle Karten nebeneinander und werden einzeln gemerkt, ausgeblendet oder geöffnet. Damit fallen Kartenstapel, Maus-Drag, Pfeiltasten, die Exit-Animation und das Undo weg — „gemerkt" ist jetzt ein Zustand, den ein zweiter Klick zurücknimmt, keine Entscheidung in einer History. **Visuelle Sprache: Pinterest Desktop.** Heller Hintergrund, schmale Icon-Leiste ohne Beschriftung, Suchfeld als breite Pille, rote Primäraktion („Merken"), randlose Karten mit 16px-Radius, gestaffeltes Raster. Referenz ist die Pinterest-Web-App (`de.pinterest.com`); der Screenshot dafür liegt bisher nicht im Repo, siehe [Offene Punkte](#offene-punkte). ## Zu den Design-Dateien Die Dateien in diesem Bundle sind **Design-Referenzen in HTML** — Prototypen, die Aussehen und Verhalten zeigen, **kein Produktionscode zum Kopieren**. Aufgabe ist, diese Designs in der bestehenden Umgebung des Ziel-Codebases nachzubauen (React, Vue, Svelte, Next.js …) mit dessen etablierten Patterns und Bibliotheken. Existiert noch keine Umgebung, das passendste Framework wählen (Empfehlung: React + TypeScript) und dort umsetzen. Die HTML-Datei ist ein „Design Component"-Format: `Videogen Web.dc.html` enthält Template + Logikklasse, `support.js` ist die Laufzeit dazu. Zum Ansehen: beide Dateien im selben Ordner belassen und die `.dc.html` im Browser öffnen. Die Logikklasse am Dateiende ist lesbarer JS-Code und dient als Referenz für Zustand und Interaktion. ## Fidelity **High-fidelity.** Farben, Typografie, Abstände, Radien, Übergänge und Interaktionen sind final gemeint und sollen pixelgenau nachgebaut werden — mit den Komponenten/Utilities des Ziel-Codebases. --- ## Globales Layout (App-Shell) - Wurzel: `display:flex`, `min-height:100vh`, **`min-width:1180px`** (darunter horizontales Scrollen, die App ist Desktop-only gedacht). - Hintergrund durchgehend `#ffffff`, Grundschrift `#111111`. Keine Verläufe, kein `backdrop-filter`. ### 1. Icon-Rail (links) - Breite `80px`, `flex:none`, `position:sticky; top:0; height:100vh`, `background:#ffffff`, rechte Kante `1px solid #efefef`. Padding `12px 0 16px`, zentrierte Flex-Spalte, `gap:8px`. - **Brand**: 32×32 Kreis `#e60023` in einem 48px-Slot, weißes „V" 17px/700. - **Nav-Buttons**: 48×48, `border-radius:50%`, Icon 20px, **ohne Textlabel** — der Name steht im `title`-Attribut und wird als Tooltip gezeigt. - Inaktiv: transparent, Icon `#111111`. Hover: `background:#e9e9e9`. - Aktiv: `background:#111111`, Icon `#ffffff`. Aktiv + Hover: `background:#000000`. - Transition `.12s ease`. - **Umsetzungshinweis:** Die Zustände gehören in Klassen (`.rail`, `.rail.active`), nicht in Inline-Styles. Im Prototyp setzt die `.dc`-Laufzeit `style-hover` mit `!important`; ein inline gesetztes Aktiv-Schwarz würde beim Hover überschrieben und der aktive Button hellte auf. - Reihenfolge oben: **Feed, Profil, Erstellen**. Unten (`margin-top:auto`): **Einstellungen**. - Icons (im Prototyp Unicode-Glyphen als Platzhalter) — **Lucide**: `home`, `user`, `plus`, `settings`. ### 2. Kopfzeile - `padding:12px 16px 4px`, Flex-Zeile, `gap:8px`. - **Suchfeld**: `flex:1`, Höhe `48px`, `border-radius:24px`, `background:#efefef`, `padding:0 16px`, Platzhaltertext „Suchen" 16px `#767676`; links Lupe, rechts Objektiv-Symbol (Lucide `search` und `camera`). - **Konto**: 40px Kreis `linear-gradient(140deg,#b2323c,#5d1620)` mit weißer Initiale 15px/700, daneben 28px Chevron-Button (`▾`, Hover `#e9e9e9`). ### 3. Tab-Leiste - `padding:0 24px`, Unterkante `1px solid #efefef`, Tabs mit `gap:24px`, an der Grundlinie ausgerichtet. - **Tabs**: „Videos", „Folge ich", „Posts" — drei Raster. Ein Wechsel springt auf den Feed-Screen und verwirft eine laufende Auswahl. - `padding:0 2px 12px`, Unterkante `3px solid` — aktiv `#111111`, inaktiv `transparent`. - Aktiv: `#111111`, 700. Inaktiv: `#767676`, 500; Hover → `#111111`. Schriftgröße 16px. - **Rechts**: Zähler „**9 Karten · 4 gemerkt**" (13px `#767676`) und der **Auswählen-Umschalter**: Pille `padding:10px 18px`, `radius:22px`, `font:700 15px`; aus → `#efefef`/`#111111` mit Beschriftung „Auswählen", an → `#111111`/`#ffffff` mit „Fertig". --- ## Screens ### A. Feed (Startansicht) **Zweck:** Material sichten, Gutes merken, Uninteressantes ausblenden. - Bereich: `flex:1; min-height:0; overflow:auto; padding:24px 24px 96px` (unten Platz für die Auswahlleiste). - **Masonry-Raster**: `columns:5; column-gap:16px` — Spaltenzahl ist als Prop einstellbar (3–6). Kachel-Wrapper: `break-inside:avoid; margin-bottom:16px; position:relative`. #### A1 Kachel - Medienfläche: `position:relative`, **variable Höhe** (Zyklus 320 / 400 / 260 / 340 / 280 / 440 / 300 / 360 / 240 / 380 px), `border-radius:16px`, `overflow:hidden`, **kein Rahmen**, `cursor:zoom-in` (im Auswahlmodus `pointer`). - Inhalt von unten nach oben: 1. Grundfläche `linear-gradient(155deg, 0%, 100%)`. 2. Streifen-Overlay `repeating-linear-gradient(<40+9·i>deg, rgba(255,255,255,.08) 0 2px, transparent 2px 16px)`, `opacity:.45`. (Platzhalter für das Medium — im Produkt liegt hier Bild oder Video.) 3. **Hover-Scrim** `rgba(0,0,0,.24)`, `opacity` 0 → 1 in `.12s`. 4. Fußzeile auf `linear-gradient(0deg, rgba(0,0,0,.62), transparent)`, `padding:14px`: Caption 14px/700 weiß, darunter „Name · Art" 12px `rgba(255,255,255,.82)`. - **Hover-Steuerung** (beide `opacity` 0 → 1 in `.12s`, gebunden an den Hover der *Kachel*): - **Merken-Pille** oben rechts (`right:12px; top:12px`): `padding:11px 16px; radius:22px; font:700 15px`, ungemerkt `#e60023` mit weißem Text, **gemerkt `#111111` mit „Gemerkt"**. Klick schaltet um — ein zweiter Klick nimmt zurück. - **⋯-Button** unten rechts (`right:12px; bottom:12px`): 40px Kreis `#ffffff`, `box-shadow: 0 1px 8px rgba(0,0,0,.2)`, Hover `#e9e9e9`. - **⋯-Menü**: öffnet über dem Button (`right:12px; bottom:56px`), 210px, `radius:16px`, `background:#ffffff`, `box-shadow: 0 1px 20px rgba(0,0,0,.22)`, `padding:8px`, Einblendung `riseIn .14s`. Einträge `padding:12px 14px`, `radius:12px`, 15px/600, Hover `#efefef`: **„Nicht mehr zeigen"** (blendet die Kachel aus) und **„Details öffnen"**. Ein zweiter Klick auf ⋯ schließt das Menü, `Escape` ebenfalls. - **Leerzustand** (alles ausgeblendet): zentriert, Titel „Nichts mehr in dieser Ansicht" 20px/700, Text 15px `#5f5f5f`, roter Pill-Button „Ausgeblendete wieder anzeigen". #### A2 Detailansicht (Overlay) Ein Klick auf die Kachel öffnet sie — Pinterests Pin-Seite als Overlay. - Backdrop: `position:fixed; inset:0; background:rgba(0,0,0,.6)`, Inhalt zentriert, `padding:32px`, `z-index:60`, Einblendung `fadeIn .16s`. Klick auf den Backdrop schließt. - Karte: `width:min(1016px,100%)`, `max-height:calc(100vh - 64px)`, `background:#ffffff`, `border-radius:32px`, `overflow:hidden`, `grid-template-columns:1fr 1fr`, `riseIn .2s`. - **Schließen**: 40px Kreis `#ffffff` mit `box-shadow: 0 1px 8px rgba(0,0,0,.2)`, absolut `left:16px; top:16px` über dem Medium. Zusätzlich `Escape`. - **Links**: das Medium, `min-height:520px`, Verlauf + Streifen wie auf der Kachel. - **Rechts**: `padding:32px`, `overflow:auto`, Flex-Spalte `gap:20px`: - Aktionszeile rechtsbündig: „Nicht mehr zeigen" (`#efefef`, 48px hoch, `radius:24px`, 15px/700) und die Merken-Pille (48px hoch, `padding:0 24px`, `radius:24px`, rot bzw. schwarz wie auf der Kachel). - Titel = Caption, 32px/700, `letter-spacing:-.02em`. - Creator-Zeile: 48px Avatar-Kreis, Name 16px/700, Untertitel 14px `#767676`. - Beschreibung 16px, `line-height:1.6`, `#333333`. - Statistik-Raster 3 Spalten, `gap:10px`: Kachel `background:#f5f5f5`, `radius:16px`, `padding:14px`; Wert 18px/700 `tabular-nums`, Label 12px `#767676`. - Tags: Pills `padding:8px 14px`, `radius:18px`, `background:#efefef`, 13px/600. #### A3 Auswahlmodus Für das Abarbeiten ganzer Strecken. Umschalter sitzt in der Tab-Leiste. - Im Auswahlmodus **verschwinden Merken-Pille und ⋯** — auf der Kachel zählt nur noch die Auswahl. - Jede Kachel bekommt oben links (`left:12px; top:12px`) einen **Auswahlkreis** 28px, `border:2px solid #ffffff`: nicht gewählt `background:rgba(0,0,0,.35)`, Haken unsichtbar; gewählt `background:#e60023` mit weißem ✓ 15px/700. `pointer-events:none` — geklickt wird die Kachel. - Gewählte Kachel zusätzlich `outline:4px solid #e60023; outline-offset:-4px`. - Ein Klick auf die Kachel wählt aus bzw. ab (öffnet **nicht** die Detailansicht). - **Auswahlleiste**, sobald mindestens eine Kachel gewählt ist: fixiert `bottom:28px`, zentriert, `padding:12px 12px 12px 22px`, `radius:32px`, `background:#ffffff`, `box-shadow: 0 1px 20px rgba(0,0,0,.22)`, `riseIn .2s`, `z-index:45`. Inhalt: „**3 ausgewählt**" 15px/700, roter Button „Zur Sammlung hinzufügen", grauer „Auswahl aufheben" (beide `padding:12px 20px`, `radius:24px`, 15px/700). - „Zur Sammlung hinzufügen" merkt alle gewählten Karten, leert die Auswahl und **verlässt den Auswahlmodus**; Toast „N Karten zur Sammlung hinzugefügt". - `Escape` verlässt den Auswahlmodus und verwirft die Auswahl. ### B. Profil - `padding:32px 24px 40px`, `overflow:auto`, Einblendung `riseIn .26s`. - Kopf **zentriert** als Spalte, `gap:10px`, `padding-bottom:28px`: 120px Avatar-Kreis (`linear-gradient(140deg,#b2323c,#5d1620)`, ohne Rand), Name 36px/700 `letter-spacing:-.02em`, Meta „Studio-Konto · seit März 2026" 15px `#5f5f5f`; darunter drei Kennzahlen (`gap:28px`, zentriert): Posts 38, **Gemerkt (live: Anzahl der gemerkten Karten)**, Follower 1.204 — Werte 18px/700 `tabular-nums`, Labels 13px `#767676`. - **Die Galerie zeigt genau die gemerkten Karten** — dasselbe Masonry-Raster wie im Feed, aber ohne Hover-Steuerung. Ein Klick öffnet die Detailansicht. ### C. Erstellen - `padding:32px 24px 40px`; Inhalt in einer weißen Karte: `max-width:920px`, zentriert, `radius:24px`, `box-shadow: 0 1px 20px rgba(0,0,0,.12)`, `padding:32px`, `grid-template-columns: 1fr 320px`, `gap:32px`. - Titel „Neuen Post erstellen" 30px/700, Untertitel 15px `#5f5f5f`. - **Dropzone**: Höhe 220px, `border:2px dashed #cdcdcd`, `radius:16px`, `background:#f5f5f5`; Hover Border `#e60023`, BG `#fafafa`. Text „Dateien hierher ziehen" 16px/700 + „MP4, MOV oder bis zu 10 Bilder" 14px `#767676`. - **Felder** Titel und Untertitel: Label 13px/700 `#111111`; Input `padding:14px 16px`, `radius:16px`, `border:2px solid #cdcdcd`, `background:#ffffff`, 15px. Beide sind an die Live-Vorschau gebunden. - **Art**: Pills „Produkt / Video / Serie", `padding:11px 18px`, `radius:22px`, `font:700 15px`; aktiv `background:#111111`, Text `#ffffff`; inaktiv `background:#efefef`, Text `#111111`. - **Aktionen**: „Veröffentlichen" (rot `#e60023`, löst Toast „Post veröffentlicht" aus), „Als Entwurf sichern" (`#efefef`), beide `padding:14px 24px`, `radius:24px`, `font:700 15px`. - **Vorschau** (rechte Spalte): Kicker 12px/600 `#767676` + Karte 420px hoch, `radius:16px`, Verlauf + Streifen, unten Titel 18px/700 und Untertitel 14px auf schwarzem Verlauf — spiegelt die Eingaben live. ### D. Einstellungen - `padding:32px 24px 40px`, Inhalt `max-width:660px`, zentriert. Titel „Einstellungen" 30px/700. - Liste: Container `radius:16px`, `overflow:hidden`, `box-shadow: 0 1px 20px rgba(0,0,0,.12)`, **kein Rahmen**. Zeile `padding:20px`, `background:#ffffff`, Trenner `1px solid #efefef`; Label 16px/700, Hinweis 14px `#767676`. - Toggle: Track 52×30, `radius:999px`, kein Rahmen; aus `#cdcdcd`, an `#e60023`. Knopf 24px, immer `#ffffff` mit `box-shadow: 0 1px 3px rgba(0,0,0,.25)`, links 3px → 25px, Transition `left .2s cubic-bezier(.22,.9,.3,1)`. - Einträge: Videos automatisch abspielen (an), Ton beim Öffnen (aus), Wochenrückblick (an), Bewegte Übergänge (an). --- ## Interaktion & Verhalten **Merken** — zwei Wege, beide schalten um (zweiter Klick nimmt zurück): 1. Merken-Pille auf der Kachel (erscheint beim Hover). 2. Merken-Button in der Detailansicht. Toast: „Zu ‚' gemerkt" bzw. „Aus der Sammlung entfernt". **Ausblenden** — „Nicht mehr zeigen" im ⋯-Menü oder in der Detailansicht. Die Kachel verschwindet aus dem Raster, eine offene Detailansicht schließt sich, Toast „Wird nicht mehr gezeigt". **Öffnen** — Klick auf die Kachel oder „Details öffnen" im ⋯-Menü. **Mehrfachauswahl** — siehe [A3](#a3-auswahlmodus). **Tastatur:** `Escape` schließt der Reihe nach: offene Detailansicht → offenes ⋯-Menü → Auswahlmodus. Weitere Kürzel gibt es nicht mehr; die Pfeiltasten sind mit dem Swipen entfallen. **Hover-Zustände:** Scrim, Merken-Pille und ⋯ hängen am Hover der *Kachel*, nicht am eigenen Element (im Prototyp `.pin:hover .pin-hover`, zusätzlich `:focus-within` für Tastaturbedienung). Im Ziel-Framework als Hover-State der Kartenkomponente umsetzen — und den Fokusfall nicht vergessen, sonst sind Merken und ⋯ per Tastatur nicht erreichbar. **Toast:** fixiert, horizontal zentriert, `bottom:28px` — bei sichtbarer Auswahlleiste `96px`, damit beide nicht übereinanderliegen. `padding:16px 22px`, `radius:16px`, `background:#ffffff`, `box-shadow: 0 1px 20px rgba(0,0,0,.22)`, 15px/600, `riseIn .2s`, verschwindet nach **1700ms**. **Keyframes:** - `riseIn`: `opacity:0; translateY(14px)` → `opacity:1; none` (.14–.26s ease) - `fadeIn`: `opacity:0` → `1` - Fokus: `:focus-visible { outline: 2px solid #0074e8; outline-offset: 2px; }` — nie der Browser-Default. **Responsive:** Desktop-only, `min-width:1180px`; darunter horizontal scrollen. --- ## State | State | Typ | Zweck | |---|---|---| | `screen` | `'feed' \| 'profile' \| 'create' \| 'settings'` | aktive Ansicht (Icon-Rail) | | `tab` | `'videos' \| 'following' \| 'posts'` | aktives Raster; Wechsel verwirft Auswahl und Menü | | `saved` | `string[]` (Karten-IDs) | gemerkte Karten — speist Profil-Galerie und Kennzahl | | `hidden` | `string[]` (Karten-IDs) | ausgeblendete Karten, aus dem Raster gefiltert | | `selectMode` | boolean | Auswahlmodus aktiv | | `selection` | `string[]` (Karten-IDs) | aktuell gewählte Kacheln | | `detail` | `string \| null` | ID der offenen Detailansicht | | `menuFor` | `string \| null` | ID der Kachel mit offenem ⋯-Menü | | `toast` | string | Toast-Text (leer = versteckt) | | `draftTitle`, `draftSub`, `draftKind` | string | Formular „Erstellen", live in der Vorschau | | `settings` | `{autoplay, sound, digest, motion}` booleans | Einstellungen | **Datenbedarf pro Karte:** `id`, `name`, `sub`, `kind`, `assets`, `caption`, `hue: [from, to]`, `avatar` (Verlauf oder Bild-URL), `body`, `tags: string[]`, `stats: [wert, label][]`. Die `id` ist neu und trägt jetzt alles — Merken, Ausblenden, Auswahl und Detailansicht referenzieren Karten darüber, nicht mehr über einen Index. Im Produkt ersetzt das Medium (Bild/Video) die Verlaufs-/Streifenfläche. Die drei Tabs liefern drei Raster. --- ## Design-Tokens **Farben** | Rolle | Wert | |---|---| | Seite | `#ffffff` | | Text | `#111111` | | Text gedämpft | `#5f5f5f` (sekundär), `#767676` (Labels, inaktive Tabs), `#333333` (Beschreibung) | | Akzent (Rot) | `#e60023`, Hover `#ad081b`; auch Auswahl-Outline und Auswahlkreis | | Dunkel | `#111111` (aktiver Rail-Button, aktive Art-Pille, **gemerkt**-Zustand, „Fertig"), Hover `#000000` | | Neutrale Flächen | `#efefef` (Suchfeld, Buttons, Tags), Hover `#e2e2e2`; `#e9e9e9` (Rail-/⋯-Hover); `#f5f5f5` (Statistik-Kacheln, Dropzone) | | Linien | `#efefef` (Trenner, Kanten), `#cdcdcd` (Eingabe-Rahmen, Toggle aus) | | Auf Medien | `rgba(255,255,255,.82)` Untertitel, `rgba(0,0,0,.24)` Hover-Scrim, `rgba(0,0,0,.62)` Fußzeilen-Verlauf, `rgba(0,0,0,.35)` Auswahlkreis leer | | Overlay | `rgba(0,0,0,.6)` Backdrop der Detailansicht | | Fokus | `#0074e8` | | Karten-Verläufe | grün `#1f8163→#0d4034`, blau `#256f8b→#0c2f3f`, ocker `#8a6a2f→#3a2a11`, rot `#7a2f38→#2c1014`, tannen `#2f6f5a→#0e332b`, türkis `#1c6f7f→#0a2c33`, violett `#6a2f7a→#26102c`, gold `#7a5a2a→#2f2110` | **Typografie** — **nur Manrope** 400/500/600/700. Zahlen mit `font-variant-numeric: tabular-nums`. Skala: 36 / 32 / 30 / 20 / 18 / 17 / 16 / 15 / 14 / 13 / 12 px. Große Überschriften `letter-spacing:-.02em`. Kicker sind 12px/600 in `#767676`, normal geschrieben. **Abstände** 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 18 / 20 / 22 / 24 / 28 / 32 / 40 / 56 / 96 px. **Radien** 12px (Menüeinträge), 16px (Kacheln, Eingaben, Toast, Menü), 18 / 22 / 24px (Pillen), 32px (Detailansicht, Auswahlleiste), `50%` Kreise, `999px` Toggle-Track. **Schatten** `0 1px 8px rgba(0,0,0,.2)` schwebende Rundbuttons · `0 1px 20px rgba(0,0,0,.12)` Flächen/Listen · `.22` Menü, Auswahlleiste, Toast · `0 1px 3px rgba(0,0,0,.25)` Toggle-Knopf. **Kein `backdrop-filter`** — die Oberfläche ist deckend. **Transitions** `.12s ease` (Hover, Farbwechsel, Ein-/Ausblenden), `.2s` (Toggle). Karten- und Exit-Animationen des alten Stapels entfallen ersatzlos. --- ## Assets Keine Binärdateien im Prototyp. Alle Medien sind Platzhalter aus CSS-Verläufen und Streifenmustern — im Produkt durch echte Bilder/Videos ersetzen. Icons: **Lucide** (im Prototyp Unicode-Glyphen als Platzhalter). Fonts: Google Fonts — **nur Manrope**. ## Offene Punkte - **Suchfeld ohne Funktion.** Die Pinterest-Kopfzeile lebt von der Suche, im Prototyp ist sie eine reine Attrappe — es gibt bisher keine Suchfunktion in der App. Vor der Umsetzung klären, ob Suche gebaut wird; wenn nicht, gehört das Feld raus, statt eine Funktion vorzutäuschen. - **Ausblenden ist im Prototyp flüchtig.** `hidden` lebt nur im Zustand der Seite. Im Produkt muss entschieden werden, ob „Nicht mehr zeigen" dauerhaft pro Konto gilt und ob es einen Weg zurück gibt (im Prototyp nur über den Leerzustand). - **Nachladen fehlt.** Das Raster zeigt einen endlichen Satz. Für echte Datenmengen braucht es Infinite Scroll oder Paginierung samt Ladeplatzhaltern — beides ist hier nicht gestaltet. - **Pinterest-Referenz liegt nicht im Repo.** Die Vorlage kam als Screenshot im Chat. Wer sie dauerhaft braucht, legt sie als `referenz/pinterest-desktop.png` daneben. ## Dateien in diesem Bundle - `PROMPT.md` — fertiger Auftrag zum Einfügen in Claude Code. - `Videogen Web.dc.html` — der Prototyp (Template oben, Logikklasse mit Zustand/Interaktion unten, Beispieldaten in `DATA`). - `support.js` — Laufzeit, damit die HTML-Datei sich lokal öffnen lässt. Nicht portieren. - `README.md` — dieses Dokument. - `referenz/mobile-ansicht-im-browser.png` — Ausgangslage: die Mobile-App als schmale Spalte unter `videogen.project.webklar.com`, die diese Desktop-Adaption ersetzt.