videogen/design/desktop-ansicht

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.

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, <hue0> 0%, <hue1> 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.

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.