JUSN
4c47090f42
Rueckmeldung vom Kunden: der Screenshot war als Funktionsaenderung gemeint, nicht nur als Optik. Statt eine Karte nach der anderen durchzuschieben, liegen jetzt alle nebeneinander und werden einzeln gemerkt, ausgeblendet oder geoeffnet. Raus: - Kartenstapel, Maus-Drag, Pfeiltasten, Exit-Animation - Undo samt History - "gemerkt" ist ein Zustand, den ein zweiter Klick zuruecknimmt, keine Entscheidung in einer History - die drei Aktions-Buttons, das Kuerzel-Panel, die feste Detailspalte Rein: - Masonry-Raster (columns 3-6, Standard 5) mit gestaffelten Hoehen - Merken-Pille und ⋯ beim Hover auf der Kachel; ⋯ bietet "Nicht mehr zeigen" und "Details oeffnen" - Detailansicht als Overlay mit Medium, Beschreibung, Tags, Kennzahlen - Auswahlmodus mit Auswahlkreisen und Sammelaktion "Zur Sammlung hinzufuegen" - Escape schliesst der Reihe nach Detailansicht, Menue, Auswahlmodus Karten haben jetzt eine id; Merken, Ausblenden, Auswahl und Detail referenzieren darueber statt ueber einen Index. Die Profil-Galerie zeigt dadurch genau die gemerkten Karten, die Kennzahl "Gemerkt" zaehlt sie. Beispieldaten auf 10/8/6 Karten erweitert, damit das Raster traegt. Offen und im README vermerkt: Suche ist weiterhin eine Attrappe, Ausblenden ist fluechtig, Nachladen fuer echte Datenmengen fehlt. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
305 lines
19 KiB
Markdown
305 lines
19 KiB
Markdown
# 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, <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 ‚<Name>' 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.
|