diff --git a/design/desktop-ansicht/PROMPT.md b/design/desktop-ansicht/PROMPT.md index d57834e..0daa1c0 100644 --- a/design/desktop-ansicht/PROMPT.md +++ b/design/desktop-ansicht/PROMPT.md @@ -7,11 +7,23 @@ Setze das Design aus diesem Ordner in unserem Stack um. 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. -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). +3. Fidelity ist high — pixelgenau umsetzen: Farben, Radien, Übergänge, Hover-/Focus-States + 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-Kacheln, + Masonry-Raster. +4. Umfang: App-Shell (Icon-Rail + Kopfzeile + Tab-Leiste) und die vier Screens + Feed, Profil, Erstellen, Einstellungen — inklusive Detailansicht als Overlay + und Auswahlmodus mit Sammelaktion. +5. **Kein Swipen.** Der Feed ist ein Raster, kein Kartenstapel: keine Drag-Geste, keine + Pfeiltasten, kein Undo. „Gemerkt" ist ein Zustand, den ein zweiter Klick zurücknimmt. +6. Karten werden über ihre `id` referenziert (Merken, Ausblenden, Auswahl, Detailansicht), + nicht über einen Index. +7. Hover-Elemente (Merken-Pille, ⋯, Scrim) hängen am Hover der Kachel — `:focus-within` + mitnehmen, sonst sind sie per Tastatur nicht erreichbar. +8. 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. +Die offenen Punkte am Ende des README (Suche, dauerhaftes Ausblenden, Nachladen) +vor der Umsetzung klären. diff --git a/design/desktop-ansicht/README.md b/design/desktop-ansicht/README.md index 1f67570..aedece1 100644 --- a/design/desktop-ansicht/README.md +++ b/design/desktop-ansicht/README.md @@ -1,16 +1,26 @@ # Handoff: Videogen — Web-App (Desktop-Adaption der Mobile-App) ## Überblick -Die bestehende Mobile-App („videogen", Swipe-Feed für Creator-/Produkt-Posts) als Desktop-Web-App. -Statt einer schmalen Handy-Spalte im Browser: dreispaltiges App-Layout mit permanenter Navigation, -zentralem Kartenstapel und Detailspalte. Swipen wird durch Maus-Drag, Buttons und Tastatur ersetzt. +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, Motion/Framer Motion für die Kartenanimation) und dort umsetzen. +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 @@ -27,177 +37,188 @@ und sollen pixelgenau nachgebaut werden — mit den Komponenten/Utilities des Zi - Wurzel: `display:flex`, `min-height:100vh`, **`min-width:1180px`** (darunter horizontales Scrollen, die App ist Desktop-only gedacht). -- Hintergrund (fix, nicht mitscrollend): - `radial-gradient(120% 80% at 50% 0%, #0d4c3d 0%, #0a3a30 34%, #24121a 68%, #40161b 100%)`, - `background-attachment: fixed`. Oben Tannengrün, unten Weinrot — direkt aus der App übernommen. -- Grundschrift `#f2efe9` auf diesem Verlauf. +- Hintergrund durchgehend `#ffffff`, Grundschrift `#111111`. Keine Verläufe, kein `backdrop-filter`. -### 1. Sidebar (links) -- Breite `236px`, `flex:none`, `position:sticky; top:0; height:100vh`. -- `background: rgba(8,26,22,.42)`, `backdrop-filter: blur(14px)`, rechte Kante `1px solid rgba(255,255,255,.08)`. -- Padding `26px 20px`, Inhalt als Flex-Spalte, `gap:28px`. -- **Brand**: 30×30 Kachel, `border-radius:9px`, `linear-gradient(150deg,#2fa87f,#0e5442)`, Buchstabe „V" 15px/700; - daneben Wortmarke „videogen" 16px/600, `letter-spacing:-.01em`. -- **Nav** (Flex-Spalte, `gap:4px`), Einträge: Feed, Profil, Erstellen, Einstellungen. - - Item: `display:flex; gap:11px; padding:11px 13px; border-radius:11px; font:500 14px Manrope; text-align:left; cursor:pointer`. - - Inaktiv: transparent, Text `rgba(242,239,233,.7)`, Border transparent. - - Aktiv: `background: rgba(126,226,184,.12)`, `border:1px solid rgba(126,226,184,.4)`, Text `#d6fbec`. - - Hover: `background: rgba(255,255,255,.09)`, Text `#ffffff`. Transition `.18s ease`. - - Icon-Slot 20px breit (im Prototyp Glyphen ◧ ◍ ＋ ⚙ — **in der Implementierung durch Lucide-Icons ersetzen**: - `layout-grid`, `user`, `plus`, `settings`). -- **Fußbereich** (`margin-top:auto`): - - Statistik-Karte: `1px solid rgba(255,255,255,.12)`, `radius:14px`, `padding:14px`, `background: rgba(255,255,255,.03)`. - Kicker „HEUTE" 11px, `letter-spacing:.14em`, uppercase, `rgba(242,239,233,.5)`; Zahl 22px JetBrains Mono, - `font-variant-numeric: tabular-nums`, zweistellig mit führender Null; Label „Karten gesichtet" 12px `rgba(242,239,233,.55)`. - - Konto-Zeile: 32px Kreis `linear-gradient(140deg,#b2323c,#5d1620)`, Name 13px/600, Rolle 11px `rgba(242,239,233,.5)`. +### 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 (über dem Inhalt) -- Höhe `72px`, `padding: 0 34px`, Unterkante `1px solid rgba(255,255,255,.07)`, Inhalt `space-between`. -- **Tabs** links (`gap:6px`): „Videos", „Folge ich", „Posts". Jeder Tab wechselt den Kartenstapel und - springt zurück auf den Feed-Screen (Index/History zurücksetzen). - - `padding:9px 18px; border-radius:999px; font:500 16px Manrope`. - - Aktiv: `background: rgba(255,255,255,.08)`, `border:1px solid rgba(255,255,255,.22)`, Text `#fff`, 600. - - Inaktiv: transparent, Text `rgba(242,239,233,.58)`; Hover → `#fff`. -- **Rechts**: Zähler „3 / 5" (12px JetBrains Mono, tabular-nums, `rgba(242,239,233,.5)`) und runder - Info-Button 36px (`border:1px solid rgba(255,255,255,.18)`, `background: rgba(255,255,255,.04)`; - Hover `rgba(255,255,255,.12)` + `translateY(-1px)`), toggelt das Kürzel-Panel. +### 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:** Karten sichten, merken oder überspringen. +**Zweck:** Material sichten, Gutes merken, Uninteressantes ausblenden. -**Layout:** `display:grid; grid-template-columns: minmax(0,1fr) 372px; flex:1; min-height:0; overflow:auto`. +- 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 Kartenbühne (linke Spalte) -- Zentriert, `padding:26px 20px 30px`, `gap:22px`, `position:relative`. -- Bühne: `position:relative; width:min(404px,100%); height:560px; flex:none`. -- Es werden **bis zu 3 Karten** gestapelt gerendert (konfigurierbar 1–5). - - Karte k (0 = oben): `transform: translate3d(0, -12px·k, 0) scale(1 - 0.045·k)`, `z-index: 10-k`, - `pointer-events` nur auf der obersten. - - Karte: `position:absolute; inset:0; border-radius:26px; overflow:hidden; - border:1px solid rgba(255,255,255,.14); box-shadow: 0 26px 60px rgba(0,0,0,.45); - touch-action:none; user-select:none; cursor:grab` (beim Ziehen `grabbing`). - - Transition: `transform .34s cubic-bezier(.22,.9,.3,1), opacity .3s ease` — während des aktiven Drags `none`. -- **Karteninhalt (von unten nach oben gestapelt):** - 1. Grundfläche: `linear-gradient(155deg, 0%, 100%)` (pro Karte, siehe Daten unten). - 2. Streifen-Overlay: `repeating-linear-gradient(<40+9·i>deg, rgba(255,255,255,.08) 0 2px, transparent 2px 16px)`, `opacity:.5`. - (Im Prototyp Platzhalter für das Video-/Bild-Asset — im Produkt liegt hier das Medium.) - 3. Lesbarkeits-Verlauf: `linear-gradient(180deg, rgba(0,0,0,.32) 0%, transparent 26%, transparent 52%, rgba(0,0,0,.66) 100%)`. - 4. **Pills** oben links (`padding:18px`, `gap:9px`): Art („Produkt"/„Video") und Assets („3 Bilder"). - `padding:7px 15px; border-radius:999px; border:1px solid rgba(255,255,255,.34); - background: rgba(0,0,0,.22); backdrop-filter: blur(6px); font:600 13px`. - 5. **Caption** mittig, 118px über der Unterkante: JetBrains Mono 15px, `padding:9px 16px`, - `border-radius:9px`, `background: rgba(0,0,0,.5)`, `backdrop-filter: blur(4px)`. - 6. **Creator-Zeile** unten (`padding:20px`, `gap:13px`): 46px Avatar-Kreis (Farbverlauf, `border:2px solid rgba(255,255,255,.3)`), - Name 19px/700 `letter-spacing:-.01em`, Untertitel 14px `rgba(255,255,255,.72)`. - 7. **Entscheidungs-Badge** (nur oberste Karte, erscheint ab 40px Drag oder beim Exit): - `top:86px`, links bei „GEMERKT" / rechts bei „SKIP", `padding:8px 16px; border-radius:10px; - font:800 15px; letter-spacing:.12em`, `border:2px solid` und Text in - Grün `rgba(126,226,184,.9)` / `#a9f0d0` bzw. Rot `rgba(232,120,120,.9)` / `#f0a8a8`, - `rotate(-10deg)` bzw. `rotate(10deg)`, Opacity `min(1, |dx|/110)`, Transition `.16s`. -- **Leerzustand** (Stapel durch): gestrichelter Rahmen `1px dashed rgba(255,255,255,.2)`, `radius:26px`, - Titel „Alles gesichtet" 20px/600, Text „Für heute sind keine neuen Karten mehr in dieser Ansicht.", - Outline-Button „Stapel neu laden" (`border:1px solid rgba(126,226,184,.6)`, Text `#8fe3c1`, - Hover `background: rgba(126,226,184,.14)`), Einblendung `fadeIn .3s`. -- **Aktions-Buttons** unter der Bühne (`gap:18px`), alle `border-radius:50%`, - `background: rgba(14,10,12,.72)`, `border:1px solid rgba(255,255,255,.16)`, - Transition `.18s`, Hover `translateY(-3px) scale(1.05)`, Active `scale(.95)`: - - ✕ Ablehnen — 62px, Hover-Border `rgba(230,120,120,.75)`, Hover-BG `rgba(120,32,38,.5)`. - - ↺ Zurück — 52px, Hover-Border `rgba(255,255,255,.4)`. - - ♥ Merken — 70px, Text `#8fe3c1`, Border `rgba(126,226,184,.45)`, Hover-BG `rgba(20,88,68,.6)`, Hover `scale(1.06)`. - (Icons in der Implementierung: Lucide `x`, `rotate-ccw`, `heart`.) -- **Kürzel-Panel** (Info-Button): absolut `right:26px; top:26px`, 250px, `radius:14px`, - `background: rgba(10,26,22,.9)`, `blur(12px)`, `border:1px solid rgba(255,255,255,.14)`, - Einblendung `riseIn .22s`. Inhalt: ← Ablehnen, → Merken, ↑ Zurücknehmen, Maus Karte ziehen. +#### 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 Detailspalte (rechts, 372px) -- `border-left:1px solid rgba(255,255,255,.07)`, `background: rgba(8,22,19,.34)`, `padding:30px 28px`, - Flex-Spalte `gap:24px`, `overflow:auto`. -- Kicker „AKTUELLE KARTE" (11px, `letter-spacing:.16em`, uppercase, `rgba(242,239,233,.45)`), - Titel = Caption der obersten Karte 26px/600 `letter-spacing:-.02em`, darunter „Name · Untertitel" 14px `rgba(242,239,233,.62)`. -- Hairline `1px rgba(255,255,255,.09)`. -- **Statistik-Raster** 3 Spalten, `gap:12px`: Kachel `border:1px solid rgba(255,255,255,.1)`, `radius:12px`, - `padding:12px`; Wert 17px JetBrains Mono tabular-nums, Label 11px `rgba(242,239,233,.5)`. -- **Beschreibung**: Kicker + Fließtext 14px, `line-height:1.75`, `rgba(242,239,233,.78)`, `text-wrap:pretty`. -- **Tags**: Pills `padding:6px 12px`, `radius:999px`, `border:1px solid rgba(255,255,255,.18)`, 12px. -- **Aktionen unten** (`margin-top:auto`, `gap:10px`), beide `padding:13px; radius:12px`: - „Zur Sammlung hinzufügen" (Akzent-Outline `rgba(126,226,184,.55)`, Text `#8fe3c1`, Hover `rgba(126,226,184,.14)`) = - gleiche Aktion wie ♥; „Überspringen" (neutrale Outline) = gleiche Aktion wie ✕. +#### 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:38px 44px`, `overflow:auto`, Einblendung `riseIn .26s`. -- Kopf: 96px Avatar-Kreis (`linear-gradient(140deg,#b2323c,#5d1620)`, `border:2px solid rgba(255,255,255,.2)`), - Name 32px/600 `letter-spacing:-.02em`, Meta „Studio-Konto · seit März 2026" 14px `rgba(242,239,233,.6)`; - rechts drei Kennzahlen (`gap:34px`): Posts 38, Gemerkt (live aus dem Feed), Follower 1.204 — - Werte 22px JetBrains Mono tabular-nums, Labels 12px. Unterkante Hairline `rgba(255,255,255,.09)`, `padding-bottom:26px`. -- Galerie: `grid-template-columns: repeat(4,1fr)`, `gap:18px`, `margin-top:28px`. - Kachel: Höhe 230px, `radius:16px`, `border:1px solid rgba(255,255,255,.12)`, Kartenverlauf + Streifen (`opacity:.45`), - Titel unten auf `linear-gradient(0deg, rgba(0,0,0,.7), transparent)`, 13px/600, `padding:14px`. - Hover: `translateY(-4px)`, Border `rgba(126,226,184,.5)`, Transition `.2s`. +- `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:38px 44px`; Inhalt `max-width:920px`, `grid-template-columns: 1fr 320px`, `gap:34px`. -- Titel „Neuen Post erstellen" 30px/600, Untertitel 14px `rgba(242,239,233,.6)`. -- **Dropzone**: Höhe 220px, `border:1px dashed rgba(255,255,255,.24)`, `radius:18px`, - `background: rgba(255,255,255,.03)`; Hover Border `rgba(126,226,184,.6)`, BG `rgba(126,226,184,.06)`. - Text „Dateien hierher ziehen" 15px/600 + „MP4, MOV oder bis zu 10 Bilder" 13px. -- **Felder** Titel und Untertitel: Label 12px uppercase `letter-spacing:.14em` `rgba(242,239,233,.5)`; - Input `padding:13px 15px`, `radius:11px`, `border:1px solid rgba(255,255,255,.16)`, - `background: rgba(0,0,0,.24)`, Text `#f2efe9`, 15px. Beide sind an die Live-Vorschau gebunden. -- **Art**: Segmented Pills „Produkt / Video / Serie", `padding:10px 18px`, `radius:999px`; - aktiv `border rgba(126,226,184,.6)`, `background rgba(126,226,184,.12)`, Text `#a9f0d0`. -- **Aktionen**: „Veröffentlichen" (Akzent-Outline, löst Toast „Post veröffentlicht" aus), - „Als Entwurf sichern" (neutrale Outline), beide `padding:13px 24px`, `radius:12px`. -- **Vorschau** (rechte Spalte): Kicker + Karte 420px hoch, `radius:22px`, - `linear-gradient(155deg,#1f8163,#0d4034)` + `repeating-linear-gradient(48deg, rgba(255,255,255,.07) 0 2px, transparent 2px 15px)`, - unten Titel 18px/700 und Untertitel 13px auf schwarzem Verlauf — spiegelt die Eingaben live. +- `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:38px 44px`, Inhalt `max-width:660px`. Titel „Einstellungen" 30px/600. -- Liste: Container `border:1px solid rgba(255,255,255,.1)`, `radius:16px`, `overflow:hidden`. - Zeile `padding:18px 20px`, `background: rgba(255,255,255,.02)`, Trenner `1px solid rgba(255,255,255,.07)`; - Label 15px/600, Hinweis 13px `rgba(242,239,233,.55)`. -- Toggle: Track 52×30, `radius:999px`; aus → `background rgba(255,255,255,.05)`, `border rgba(255,255,255,.2)`, - Knopf links 3px, `rgba(242,239,233,.55)`; an → `background rgba(126,226,184,.18)`, - `border rgba(126,226,184,.6)`, Knopf links 25px, `#8fe3c1`. Knopf 22px, Transition - `left .2s cubic-bezier(.22,.9,.3,1), background .2s`. -- Einträge: Videos automatisch abspielen (an), Ton beim Öffnen (aus), Wochenrückblick (an), Bewegte Übergänge (an). +- `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 -**Karte entscheiden — drei gleichwertige Wege:** -1. **Maus-Drag**: Pointer Events auf der obersten Karte (`pointerdown` → `setPointerCapture`, - `pointermove` → Delta, `pointerup`/`pointercancel` → Auswertung). - Live-Transform: `translate3d(dx, dy, 0) rotate(dx/22 deg)`, Transition währenddessen aus. - Schwelle **±120px**: `dx > 120` = merken, `dx < -120` = ablehnen, sonst Rücksprung (Transition wieder an). -2. **Buttons** ✕ / ↺ / ♥ unter der Bühne (und die beiden Buttons in der Detailspalte). -3. **Tastatur** (global, nur auf dem Feed-Screen, mit `preventDefault`): - `ArrowLeft` = ablehnen, `ArrowRight` = merken, `ArrowUp` = zurücknehmen. +**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". -**Exit-Animation:** `transform: translate3d(±620px, -40px, 0) rotate(±22deg)`, `opacity: 0`, -Dauer **320ms**, danach Index +1 und `exiting` zurücksetzen. Während `exiting` sind weitere -Entscheidungen gesperrt. +**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". -**Undo:** letzte Entscheidung aus der History, Index zurück, „Gemerkt"-Zähler ggf. −1. -Leere History → Toast „Nichts zurückzunehmen". +**Öffnen** — Klick auf die Kachel oder „Details öffnen" im ⋯-Menü. -**Toast:** fixiert `bottom:34px`, horizontal zentriert, `padding:12px 22px`, `radius:999px`, -`background: rgba(10,24,20,.92)`, `blur(10px)`, `border:1px solid rgba(255,255,255,.16)`, 14px, -Einblendung `riseIn .2s`, verschwindet nach **1700ms**. Texte: „Zu ‚' gemerkt", -„Übersprungen", „Nichts zurückzunehmen", „Post veröffentlicht". +**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` (.2–.26s ease) +- `riseIn`: `opacity:0; translateY(14px)` → `opacity:1; none` (.14–.26s ease) - `fadeIn`: `opacity:0` → `1` -- Fokus: `:focus-visible { outline: 2px solid #7ee2b8; outline-offset: 2px; }` — nie der Browser-Default. +- Fokus: `:focus-visible { outline: 2px solid #0074e8; outline-offset: 2px; }` — nie der Browser-Default. **Responsive:** Desktop-only, `min-width:1180px`; darunter horizontal scrollen. -Der Feed-Bereich scrollt bei geringer Fensterhöhe (`min-height:0; overflow:auto`). --- @@ -205,22 +226,23 @@ Der Feed-Bereich scrollt bei geringer Fensterhöhe (`min-height:0; overflow:auto | State | Typ | Zweck | |---|---|---| -| `screen` | `'feed' \| 'profile' \| 'create' \| 'settings'` | aktive Ansicht (Sidebar) | -| `tab` | `'videos' \| 'following' \| 'posts'` | aktiver Stapel; Wechsel setzt `idx`/`history` zurück und springt auf `feed` | -| `idx` | number | Index der obersten Karte im aktuellen Stapel | -| `drag` | `{x, y, active} \| null` | laufende Drag-Geste | -| `exiting` | `'left' \| 'right' \| null` | laufende Exit-Animation (sperrt Eingaben) | -| `history` | `{idx, dir}[]` | für Undo | -| `seen`, `saved` | number | Zähler Sidebar / Profil | -| `showInfo` | boolean | Kürzel-Panel | +| `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:** `name`, `sub`, `kind`, `assets`, `caption`, `hue: [from, to]`, +**Datenbedarf pro Karte:** `id`, `name`, `sub`, `kind`, `assets`, `caption`, `hue: [from, to]`, `avatar` (Verlauf oder Bild-URL), `body`, `tags: string[]`, `stats: [wert, label][]`. -Im Produkt ersetzt das Medium (Bild/Video) die Verlaufs-/Streifenfläche; alles andere bleibt. -Die drei Tabs liefern drei Stapel (Videos, Folge ich, Posts). +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. --- @@ -229,33 +251,49 @@ Die drei Tabs liefern drei Stapel (Videos, Folge ich, Posts). **Farben** | Rolle | Wert | |---|---| -| Seitenverlauf | `#0d4c3d` → `#0a3a30` → `#24121a` → `#40161b` | -| Text | `#f2efe9` | -| Text gedämpft | `rgba(242,239,233,.62)` / `.55` / `.5` / `.45` | -| Akzent (Mint) | `#8fe3c1`, hell `#a9f0d0` / `#d6fbec`, Fokus `#7ee2b8` | -| Akzent-Tint | `rgba(126,226,184,.12)` Fläche, `.4–.6` Rahmen, `.14` Hover | -| Ablehnen | `rgba(232,120,120,.9)` Rahmen, `#f0a8a8` Text, `rgba(120,32,38,.5)` Hover | -| Flächen | `rgba(8,26,22,.42)` Sidebar, `rgba(8,22,19,.34)` Detailspalte, `rgba(255,255,255,.02–.09)` | -| Rahmen | `rgba(255,255,255,.07)` / `.1` / `.12` / `.16` / `.18` / `.22` | +| 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** — Manrope 400/500/600/700 (UI), JetBrains Mono 400/500 (Zahlen, Captions). -Skala: 32 / 30 / 26 / 22 / 19 / 17 / 16 / 15 / 14 / 13 / 12 / 11 px. -Große Überschriften `letter-spacing:-.02em`, Kicker `+.14em`/`.16em` uppercase. -Alle Zahlen mit `font-variant-numeric: tabular-nums`. +**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** 3 / 4 / 6 / 8 / 9 / 10 / 12 / 13 / 14 / 18 / 20 / 22 / 26 / 28 / 34 / 38 / 44 px. -**Radien** 9 / 11 / 12 / 14 / 16 / 18 / 22 / 26 px, Pills `999px`, Kreise `50%`. -**Schatten** nur an der Karte: `0 26px 60px rgba(0,0,0,.45)`. -**Blur** 4 / 6 / 10 / 12 / 14 px (`backdrop-filter`). -**Transitions** `.16s` / `.18s` / `.2s` / `.3s` ease, Karten-Bewegung `.34s cubic-bezier(.22,.9,.3,1)`, Exit `320ms`. +**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. 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 — Manrope, JetBrains Mono. +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. diff --git a/design/desktop-ansicht/Videogen Web.dc.html b/design/desktop-ansicht/Videogen Web.dc.html index a6448f1..0976d12 100644 --- a/design/desktop-ansicht/Videogen Web.dc.html +++ b/design/desktop-ansicht/Videogen Web.dc.html @@ -10,190 +10,138 @@ - + -
+
-