From 79012b2f1467815f86aa87f4866c67550593468f Mon Sep 17 00:00:00 2001 From: EtienneLescot Date: Sat, 27 Jun 2026 20:41:59 +0200 Subject: [PATCH 01/17] design: import initial OpenScreen artifact set Editor (v1 + v2), landing, and launcher copied from Open Design project 21a2a0a2. Source files unchanged; review before merge. --- design/editor.html | 1619 +++++++++++++++ design/index.html | 237 +++ design/openscreen-editor-2.html | 3442 +++++++++++++++++++++++++++++++ design/openscreen-editor.html | 1116 ++++++++++ design/openscreen-landing.html | 799 +++++++ 5 files changed, 7213 insertions(+) create mode 100644 design/editor.html create mode 100644 design/index.html create mode 100644 design/openscreen-editor-2.html create mode 100644 design/openscreen-editor.html create mode 100644 design/openscreen-landing.html diff --git a/design/editor.html b/design/editor.html new file mode 100644 index 000000000..8bd884b3b --- /dev/null +++ b/design/editor.html @@ -0,0 +1,1619 @@ + + + + + + OpenScreen — Éditeur + + + +
+ + +
+ + + + OpenScreen + + + + demo2 + + + + Enregistré · il y a 2 s + + + + + + + + +
+ + +
+ + + + + + + + +
+
+
+ + 00:00:12.4 + 1920 × 1080 · 60 fps +
Aperçu · 16:9
+
+ +
+
+
+ +
+ + + + + + + +
+ + +
+ + +
+
+

Timeline

+ + 2 clips·24 sauts·7:03.6 total + + + Auto-sauvegardé + 0:00.0 · Clip 1/2 + +
+ +
+ +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + V1 + +
+
+ + demo-n8n-as-code-1.mp4 + 0:00.0 → 2:34.7 · source 0:00.0–2:34.7 + + +
+
+ + 2026-03-10 09-10-39.mp4 + 2:34.7 → 7:03.6 · source 0:00.0–4:28.9 + + +
+
+
+
+ + + A1 + +
+
+ + voix · microphone principal + 0:00.0 → 2:34.7 · -16 LUFS +
+
+ + voix · microphone principal + 2:34.7 → 7:03.6 · -14 LUFS +
+
+
+
+
+
+ + + + +
+
+ + + + diff --git a/design/index.html b/design/index.html new file mode 100644 index 000000000..c81cadb8a --- /dev/null +++ b/design/index.html @@ -0,0 +1,237 @@ + + + + + + OpenScreen — Aperçu du projet + + + +
+ + + OpenScreen + + +

Aperçu du projet · v0.0.3

+

Deux surfaces, un même système de design.

+

Lance l'écran que tu veux explorer. La landing documente le produit, l'éditeur est l'app de bureau redesignée autour du brief AI : panneau d'édition, transcription, timeline à sauts hachurés, et propriétés du clip.

+ +
+ + Marketing +

Landing publique

+

Page d'accueil pour télécharger OpenScreen v0.0.3 — hero, spécifications, fonctionnalités, éditeur en démo, témoignage, CTA.

+ + Ouvrir openscreen-landing.html + + + + App · desktop +

Éditeur OpenScreen

+

Fenêtre native redesignée d'après le wireframe + la capture live : panneau d'édition AI à gauche, transcription à droite, timeline à sauts hachurés et propriétés du clip en bas. Tout interagit.

+ + Ouvrir editor.html + +
+ + +
+ + \ No newline at end of file diff --git a/design/openscreen-editor-2.html b/design/openscreen-editor-2.html new file mode 100644 index 000000000..1a6da5fc2 --- /dev/null +++ b/design/openscreen-editor-2.html @@ -0,0 +1,3442 @@ + + + + + + + OpenScreen — Éditeur + + + +
+ + +
+ + + + OpenScreen + + + + demo2 + + + + Enregistré · il y a 2 s + + + + + + + + + + + +
+ + +
+ + + + + + + + + + + +
+ + +
+
+
+ + 00:00:12.4 + 1920 × 1080 · 60 fps +
Aperçu · 16:9
+
+ +
+
+
+ +
+ + +
+ + +
+ + + + + + + + + + + + + + + + + + + +
+ + + + +
+ + +
+ + +
+ + +
+
+

Timeline

+ + 2 clips·24 sauts·7:03.6 total + + + + 0:00.0 · Clip 1/2 + +
+ +
+ +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + V1 + +
+
+ + demo-n8n-as-code-1.mp4 + 0:00.0 → 2:34.7 · source 0:00.0–2:34.7 + + +
+
+ + 2026-03-10 09-10-39.mp4 + 2:34.7 → 7:03.6 · source 0:00.0–4:28.9 + + +
+
+
+
+ + + Z + +
+
1.8×
+
1.8×
+
1.8×
+
1.8×
+
1.8×
+
1.8×
+
1.8×
+
1.8×
+
+
+
+ + + T + +
+
Enter text…
+
+
+
+ + + S + +
+
1.5×
+
+
+
+
+
+ +
+
+ + + + + + + + + + diff --git a/design/openscreen-editor.html b/design/openscreen-editor.html new file mode 100644 index 000000000..b31db9f16 --- /dev/null +++ b/design/openscreen-editor.html @@ -0,0 +1,1116 @@ + + + + + + + OpenScreen — Éditeur + + + +
+
+ + OpenScreen + + + demo-produit.osc + enregistré · 14:02 + + + + + + +
+ + + + + +
+ + +
+
+
+ Projets/2026-Q2/demo-produit.osc +
+
+ + + +
+
+
+
+
+
+
+ + 00:01:38 + 3840 × 2160 · 60 fps +
+
+
+ +
+ + +
+ 00:01:38 / 00:07:45 +
+
+ +
+
+ A annotation · S vitesse · ⌘K couper · Espace lecture +
+
+ + +
+
1.25×
+
+
+
+
Pistes
+
+
+
+
+
Vidéo3
+
+ Capt. principale + coupé + Démo produit + coupé + Slide finale +
+
+
+
Annotations3
+
+ Curseur + Titre + Cercle +
+
+
+
Vitesse2
+
+ 0.5× + 2.0× +
+
+
+
+
+
+ + +
+ + +
+ + + + diff --git a/design/openscreen-landing.html b/design/openscreen-landing.html new file mode 100644 index 000000000..f2b72d669 --- /dev/null +++ b/design/openscreen-landing.html @@ -0,0 +1,799 @@ + + + + + + + OpenScreen — Enregistrez, coupez, peaufinez vos vidéos d'écran + + + +
+
+ + + OpenScreen + + + v0.0.3 · macOS +
+
+ +
+
+
+
+

v0.0.3 · alpha publique

+

Enregistrez, coupez, peaufinez vos vidéos d'écran, sans quitter l'éditeur.

+

OpenScreen rassemble capture, timeline et habillage dans une seule fenêtre native — pas de cloud, pas de re-rendu dans le navigateur, juste un fichier local prêt à partager.

+
+ Télécharger pour macOS + Voir comment ça marche +
+
+ macOS 12+ · Apple Silicon & Intel + Win & Linux en bêta privée +
+
+ +
+
+ + OpenScreen · sans-titre · 7:45 + 16:9 +
+
+ Aperçu de l'éditeur OpenScreen : timeline multi-piste et sélecteur de fond. +
+
+
+
+ +
+
+
+
+
4K · 60fps
+
Capture native Retina/HiDPI sans driver additionnel.
+
+
+
3 pistes
+
Vidéo, Annotations, Vitesse — non-destructif jusqu'à l'export.
+
+
+
0 octet
+
Aucune télémétrie par défaut. Les projets restent sur disque.
+
+
+
~14 formats
+
Export MP4, MOV, WebM, GIF, PNG séquence, WAV audio seul.
+
+
+
+
+ +
+
+
+

Capacités

+

Trois gestes pour passer d'une capture brute à une vidéo publiable.

+
+
+
+ +

Capture système

+

Fenêtre, zone ou écran complet, audio système inclus. La session reprend après une mise en veille sans corrompre le fichier.

+
+
+ +

Montage non-destructif

+

Trim à la souris, annotations au clavier (A), segments de vitesse (S) — chaque clip reste référencé, jamais ré-encodé.

+
+
+ +

Fonds et cadrage

+

15 dégradés d'ambiance, palette libre, ratios 16:9, 9:16 et 1:1. Le cadrage se met à jour sans déranger la timeline.

+
+
+
+
+ +
+
+
+

L'éditeur

+

Une timeline qui se lit comme un texte.

+

Trois pistes explicites — Vidéo, Annotations, Vitesse — pour composer un montage en quelques minutes, sans tutorial ni plug-in. Les raccourcis sont imprimés directement sur les clips.

+
    +
  • + A + Ajoute une annotation au curseur de lecture +
    • +
  • + S + Insère un segment de vitesse (0.5× à 4×) +
    • +
  • + ⌘ K + Coupe le clip sous la tête de lecture +
    • +
+
+ +
+
+ + OpenScreen · démo + + Charger un projet + Sauvegarder + +
+
+ + +
+
+
+
+ +
VidéoCapt. principaleReprise webcamSlide finale
+
AnnotationsPointer curseurTexte courtCercle
+
Vitesse0.5×2.0×
+
+
+
+
+
+ +
+
+
“
+
J'ai remplacé OBS pour les démos produit et Premiere pour les teasers. OpenScreen fait les deux dans une fenêtre qui ne plante pas.
+

— Camille Roux, ingénieure produit chez Vercel

+
+
+ +
+
+
+
+

Arrêtez de jongler entre OBS, Premiere et Loom.

+

OpenScreen reste gratuit pendant l'alpha. La licence personnelle s'activera à la v1.0 ; les early adopters garderont leur clé.

+
+
+ Télécharger v0.0.3 + Notes de version +
+
+
+
+
+ + + + + + From c7e5d2479364f3e1cbc0ff2dcc89b9e2eb87a349 Mon Sep 17 00:00:00 2001 From: EtienneLescot Date: Sat, 27 Jun 2026 21:11:07 +0200 Subject: [PATCH 02/17] refactor(design): consolidate design assets and add specification Consolidate multiple HTML prototypes into a single canonical editor file and add a formal design system specification in DESIGN.md. Update the editor to align with the new design tokens. --- design/DESIGN.md | 156 ++ design/editor.html | 1619 ------------ design/index.html | 237 -- design/openscreen-editor-2.html | 3442 -------------------------- design/openscreen-editor.html | 4090 ++++++++++++++++++++++++------- design/openscreen-landing.html | 799 ------ 6 files changed, 3364 insertions(+), 6979 deletions(-) create mode 100644 design/DESIGN.md delete mode 100644 design/editor.html delete mode 100644 design/index.html delete mode 100644 design/openscreen-editor-2.html delete mode 100644 design/openscreen-landing.html diff --git a/design/DESIGN.md b/design/DESIGN.md new file mode 100644 index 000000000..8450dcb04 --- /dev/null +++ b/design/DESIGN.md @@ -0,0 +1,156 @@ +# OpenScreen Design System + +> Category: Video & Productivity Tools +> Surface: Desktop web (Electron) +> Source: tokens extracted from `openscreen-editor-2.html` (canonical) + +A high-fidelity, professional dark-and-light desktop application design system +optimized for video recording, post-processing editing, and timeline +manipulation. Mint is the single brand accent; red is reserved strictly for +REC / cut / skip / trim / transcript-highlight states; amber covers warnings. + +--- + +## Color Palette + +### Light theme (`:root`) + +| Role | Token | Hex | Notes | +|---|---|---|---| +| Canvas | `--bg` | `#fafbfc` | Off-white, never pure white; soft radial gradient | +| Panel | `--surface` | `#ffffff` | Raised panels on canvas | +| Card | `--surface-1` | `#f7f8fa` | Tier 1 raised | +| Tier 2 | `--surface-2` | `#f3f5f8` | Raised on panel | +| Hover | `--surface-3` | `#eef0f3` | Active/hover state | +| Popover | `--surface-hi` | `#ffffff` | Highest elevation | +| Border | `--border` | `#e7e9ee` | Soft hairline | +| Border soft | `--border-soft` | `#f1f2f5` | Subtle dividers | +| Border hi | `--border-hi` | `#d1d5db` | Emphasis lines | +| Foreground | `--fg` | `#1f2937` | Slate, not pure black | +| Foreground emphasis | `--fg-emphasis` | `#111827` | Headlines | +| Muted | `--muted` | `#6b7280` | Body / labels | +| Meta | `--meta` | `#9ca3af` | Timestamps, captions | +| Brand (mint) | `--accent` | `#10b981` | Primary action, focus ring, toggle-on | +| Brand glow | `--brand-glow` | `rgba(16,185,129,0.35)` | Focus / hover | +| Danger | `--danger` | `#ef4444` | REC, skip, trim, transcript highlight | +| Warning | `--warn` | `#f59e0b` | Soft amber | +| Success | `--success` | `#10b981` | Alias of brand | + +### Dark theme (`:root[data-theme="dark"]`) + +| Role | Token | Hex | Notes | +|---|---|---|---| +| Canvas | `--bg` | `#0a0d12` | Near-black with faint blue cast | +| Panel | `--surface` | `#14181f` | Tier 1 panel | +| Card | `--surface-1` | `#14181f` | Same as panel base | +| Tier 2 | `--surface-2` | `#1c2029` | Raised | +| Hover | `--surface-3` | `#252a35` | Hover/active | +| Popover | `--surface-hi` | `#2e3440` | Highest | +| Border | `--border` | `#252a35` | Reads on canvas | +| Foreground | `--fg` | `#e6e9ef` | Off-white, never pure `#ffffff` | +| Muted | `--muted` | `#8b95a3` | Tuned for AA on dark | +| Brand (mint) | `--accent` | `#10b981` | Same hue, brighter tone on `--brand-lo: #34d399` | +| Danger | `--danger` | `#f87171` | Softer red for dark bg | + +### Traffic lights (macOS chrome) + +| Token | Hex | +|---|---| +| `--light-red` | `#ff5f57` | +| `--light-yellow` | `#febc2e` | +| `--light-green` | `#28c840` | + +--- + +## Typography + +- **Display:** system-ui stack — `system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif` +- **Body:** system-ui stack (same as display) +- **Mono:** `ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace` + +### Type scale (desktop editor, base 13px) + +| Token | Size | Use | +|---|---|---| +| `--fs-app` | 13px | Base UI | +| `--fs-app-sm` | 12px | Secondary | +| `--fs-app-lg` | 14px | Primary UI | +| `--fs-title` | 16px | Panel titles | +| `--fs-section` | 11px | Section headers (uppercase, tracked) | +| `--fs-display` | 24px | Hero numerals | + +Nothing below 11px. + +--- + +## Layout + +- **Radius:** 8px standard; `--r-xs: 4px`, `--r-sm: 6px`, `--r-md: 8px`, `--r-lg: 12px`, `--r-pill: 9999px` +- **Border weight:** 1px +- **Spacing:** 4px baseline grid (`--sp-1` through `--sp-6`) +- **Editor wireframe:** + - Titlebar: 34px + - Left utility rail: 48px + - Left panel: 320px + - Right properties: 320px + - Resize handle: 6px + - Bottom timeline/toolbar: 224px + +### Posture rules + +- **One accent, used at most twice per screen.** Default budget is eyebrow + primary CTA. +- **Red is reserved** for REC, cut, skip, trim, and transcript highlight only. It is not a brand color. +- **Mint is the single brand color** for active state, focus ring, toggle-on, and brand mark. +- **Off-white canvas, tiered surfaces.** Never use pure `#000` or pure `#fff` for editorial chrome. +- **Soft elevation, slate-based shadows.** Two `--elev-card` and `--elev-pop` are enough. +- **System-ui type, mono numerics.** No web fonts loaded; ships the declared fallback stack. + +--- + +## Motion + +- `--motion-fast: 120ms` — hover, focus ring +- `--motion-base: 180ms` — state transitions +- `--ease: cubic-bezier(0.2, 0, 0, 1)` — standard easing + +--- + +## Voice & Tone + +- **Adjectives:** high-fidelity, professional, calm, restrained. +- **Tone:** a confident dark-themed tool. Marketing prose is sparse; product UI carries the work. +- **Messaging pillar:** video recording, post-processing editing, and timeline manipulation — same three jobs the editor does. + +### Vocabulary + +- **Use:** Record, Trim, Cut, Skip, Timeline, Clip, Track, Transcript. +- **Avoid:** playful emoji feature labels (✨ 🚀 🎯), "AI-powered" in product chrome, generic SaaS copy ("supercharge your workflow"). + +--- + +## Imagery + +- **Style:** schematic, palette-derived. Scene illustration in preview is grayscale made from the same neutrals — not literal artwork. +- **Treatment:** replace placeholder scenes with real project footage when shipping. +- **Avoid:** stock photography, decorative illustration in tool chrome, hand-drawn mascots. + +--- + +## Files in this directory + +| File | Role | +|---|---| +| `openscreen-editor-2.html` | Latest editor (light + dark themes in one file). Canonical source of tokens. | +| `openscreen-editor.html` | First editor pass. Light-only. | +| `editor.html` | Earlier experimental editor with red REC accent. | +| `openscreen-landing.html` | Marketing landing page. | +| `index.html` | Launcher / overview. | +| `DESIGN.md` | This document. | + +--- + +## Open questions / follow-ups + +- `editor.html` uses a different red-dominant accent and predates the mint brand color. Keep as historical reference; do not import its tokens into new work. +- Landing page (`openscreen-landing.html`) is light-only; consider a dark variant once product photography is sourced. +- No logo asset is committed yet. Brand mark should be a simple wordmark or geometric mark in mint on the dark canvas. diff --git a/design/editor.html b/design/editor.html deleted file mode 100644 index 8bd884b3b..000000000 --- a/design/editor.html +++ /dev/null @@ -1,1619 +0,0 @@ - - - - - - OpenScreen — Éditeur - - - -
- - -
- - - - OpenScreen - - - - demo2 - - - - Enregistré · il y a 2 s - - - - - - - - -
- - -
- - - - - - - - -
-
-
- - 00:00:12.4 - 1920 × 1080 · 60 fps -
Aperçu · 16:9
-
- -
-
-
- -
- - - - - - - -
- - -
- - -
-
-

Timeline

- - 2 clips·24 sauts·7:03.6 total - - - Auto-sauvegardé - 0:00.0 · Clip 1/2 - -
- -
- -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- - - V1 - -
-
- - demo-n8n-as-code-1.mp4 - 0:00.0 → 2:34.7 · source 0:00.0–2:34.7 - - -
-
- - 2026-03-10 09-10-39.mp4 - 2:34.7 → 7:03.6 · source 0:00.0–4:28.9 - - -
-
-
-
- - - A1 - -
-
- - voix · microphone principal - 0:00.0 → 2:34.7 · -16 LUFS -
-
- - voix · microphone principal - 2:34.7 → 7:03.6 · -14 LUFS -
-
-
-
-
-
- - - - -
-
- - - - diff --git a/design/index.html b/design/index.html deleted file mode 100644 index c81cadb8a..000000000 --- a/design/index.html +++ /dev/null @@ -1,237 +0,0 @@ - - - - - - OpenScreen — Aperçu du projet - - - -
- - - OpenScreen - - -

Aperçu du projet · v0.0.3

-

Deux surfaces, un même système de design.

-

Lance l'écran que tu veux explorer. La landing documente le produit, l'éditeur est l'app de bureau redesignée autour du brief AI : panneau d'édition, transcription, timeline à sauts hachurés, et propriétés du clip.

- -
- - Marketing -

Landing publique

-

Page d'accueil pour télécharger OpenScreen v0.0.3 — hero, spécifications, fonctionnalités, éditeur en démo, témoignage, CTA.

- - Ouvrir openscreen-landing.html - - - - App · desktop -

Éditeur OpenScreen

-

Fenêtre native redesignée d'après le wireframe + la capture live : panneau d'édition AI à gauche, transcription à droite, timeline à sauts hachurés et propriétés du clip en bas. Tout interagit.

- - Ouvrir editor.html - -
- - -
- - \ No newline at end of file diff --git a/design/openscreen-editor-2.html b/design/openscreen-editor-2.html deleted file mode 100644 index 1a6da5fc2..000000000 --- a/design/openscreen-editor-2.html +++ /dev/null @@ -1,3442 +0,0 @@ - - - - - - - OpenScreen — Éditeur - - - -
- - -
- - - - OpenScreen - - - - demo2 - - - - Enregistré · il y a 2 s - - - - - - - - - - - -
- - -
- - - - - - - - - - - -
- - -
-
-
- - 00:00:12.4 - 1920 × 1080 · 60 fps -
Aperçu · 16:9
-
- -
-
-
- -
- - -
- - -
- - - - - - - - - - - - - - - - - - - -
- - - - -
- - -
- - -
- - -
-
-

Timeline

- - 2 clips·24 sauts·7:03.6 total - - - - 0:00.0 · Clip 1/2 - -
- -
- -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- - - V1 - -
-
- - demo-n8n-as-code-1.mp4 - 0:00.0 → 2:34.7 · source 0:00.0–2:34.7 - - -
-
- - 2026-03-10 09-10-39.mp4 - 2:34.7 → 7:03.6 · source 0:00.0–4:28.9 - - -
-
-
-
- - - Z - -
-
1.8×
-
1.8×
-
1.8×
-
1.8×
-
1.8×
-
1.8×
-
1.8×
-
1.8×
-
-
-
- - - T - -
-
Enter text…
-
-
-
- - - S - -
-
1.5×
-
-
-
-
-
- -
-
- - - - - - - - - - diff --git a/design/openscreen-editor.html b/design/openscreen-editor.html index b31db9f16..1a6da5fc2 100644 --- a/design/openscreen-editor.html +++ b/design/openscreen-editor.html @@ -6,1107 +6,3433 @@ OpenScreen — Éditeur
-
- - OpenScreen + + +
+ + + + OpenScreen + - demo-produit.osc - enregistré · 14:02 + demo2 + + + + Enregistré · il y a 2 s - - - + + + + + + + +
- + +
- + -
- + + + + + + + +
+ + +
+
+
+ + 00:00:12.4 + 1920 × 1080 · 60 fps +
Aperçu · 16:9
+
+
-
+
- + + +
+ + + + - + +
+ + +
+ + +
+
+

Timeline

+ + 2 clips·24 sauts·7:03.6 total + + + + 0:00.0 · Clip 1/2 + +
+ +
+ +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + V1 + +
+
+ + demo-n8n-as-code-1.mp4 + 0:00.0 → 2:34.7 · source 0:00.0–2:34.7 + + +
+
+ + 2026-03-10 09-10-39.mp4 + 2:34.7 → 7:03.6 · source 0:00.0–4:28.9 + + +
+
+
+
+ + + Z + +
+
1.8×
+
1.8×
+
1.8×
+
1.8×
+
1.8×
+
1.8×
+
1.8×
+
1.8×
+
+
+
+ + + T + +
+
Enter text…
+
+
+
+ + + S + +
+
1.5×
+
+
+
+
+
+ +
+ + + + + + + - - From e86f6096c8a7c88eb2cee375c4bfb92e495b1b86 Mon Sep 17 00:00:00 2001 From: EtienneLescot Date: Sat, 27 Jun 2026 22:00:00 +0200 Subject: [PATCH 03/17] docs:update design --- design/openscreen-editor.html | 531 ++++++++++++++++++++++++++++++++-- 1 file changed, 513 insertions(+), 18 deletions(-) diff --git a/design/openscreen-editor.html b/design/openscreen-editor.html index 1a6da5fc2..14875da0b 100644 --- a/design/openscreen-editor.html +++ b/design/openscreen-editor.html @@ -323,6 +323,10 @@ width: 6px; height: 6px; border-radius: 50%; background: var(--success); } + .titlebar .proj-actions { + display: inline-flex; align-items: center; gap: var(--sp-1); + margin-right: var(--sp-1); + } .titlebar .right { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-1); @@ -785,11 +789,11 @@ width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; - background: var(--fg); - color: var(--bg); - transition: background var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); + background: transparent; + color: var(--fg); + transition: color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); } - .send-btn:hover { background: var(--fg-2); transform: scale(1.05); } + .send-btn:hover { color: var(--accent); transform: scale(1.05); } /* ─── preview — main canvas, transport bar at bottom ─────────── */ .preview-wrap { @@ -1554,10 +1558,13 @@ position: relative; padding: var(--sp-2) var(--sp-4) var(--sp-3); overflow-x: auto; - overflow-y: hidden; + overflow-y: scroll; + scrollbar-gutter: stable; } - .timeline-body::-webkit-scrollbar { height: 8px; } + .timeline-body::-webkit-scrollbar { height: 8px; width: 8px; } + .timeline-body::-webkit-scrollbar-track { background: transparent; } .timeline-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } + .timeline-body { scrollbar-color: var(--border) transparent; scrollbar-width: thin; } .ruler { position: relative; @@ -2000,14 +2007,14 @@ .crop-controls .done-btn:hover { filter: brightness(1.08); } /* ─── Transcript pane — flowing text + highlighted phrases ───── */ - .transcript-body { padding-top: 4px; } + .transcript-body { padding-top: 0; } .transcript-clip-head { display: flex; align-items: center; gap: 10px; - padding: 0 4px 14px; + padding: 0 4px 4px; border-bottom: 1px solid var(--border-soft); - margin-bottom: 14px; + margin-bottom: 2px; } .transcript-clip-head .badge { width: 22px; height: 22px; @@ -2021,8 +2028,10 @@ flex-shrink: 0; } .transcript-clip-head .title { - font: 600 13px/1.4 var(--font-body); + font: 600 13px/1.2 var(--font-body); color: var(--fg); + margin: 0; + padding: 0; } .transcript-clip-head .sub { font: 400 11px/1.3 var(--font-mono); @@ -2060,6 +2069,7 @@ border-radius: var(--r-sm); font-weight: 500; } + .pane-transcript .transcript-body { max-height: none; } /* ─── panel toggles (titlebar) ─────────────────────────── */ .app[data-collapse~="left"] { --panel-w-left: 0px; } .app[data-collapse~="left"] .rail-left, @@ -2223,7 +2233,243 @@ .regen-control select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .regen-btn { width: 38px; height: 38px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .regen-btn:hover { background: var(--surface-warm); border-color: var(--accent); color: var(--accent); } - .transcript-body { margin: 0; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-warm); font-family: var(--font-mono); font-size: 12px; line-height: 1.55; color: var(--fg); white-space: pre; overflow: auto; max-height: 38vh; } + pre.transcript-body { margin: 0; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-warm); font-family: var(--font-mono); font-size: 12px; line-height: 1.55; color: var(--fg); white-space: pre; overflow: auto; max-height: 38vh; } + + /* ─── project modals — open + create ─────────────────────── */ + .proj-search { + position: relative; + display: flex; align-items: center; + margin: 0 0 var(--sp-3); + } + .proj-search svg { + position: absolute; left: 12px; + color: var(--muted); pointer-events: none; + } + .proj-search input { + width: 100%; + height: 38px; + padding: 0 12px 0 36px; + border: 1px solid var(--border); + border-radius: var(--r-md); + background: var(--surface); + color: var(--fg); + font: 400 13px/1 var(--font-body); + transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); + } + .proj-search input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px var(--accent-soft); + } + .proj-section-label { + display: flex; align-items: center; justify-content: space-between; + margin: 4px 0 var(--sp-2); + font: 600 11px/1 var(--font-body); + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--muted); + } + .proj-section-label .clear { + font: 500 11px/1 var(--font-body); + text-transform: none; + letter-spacing: 0; + color: var(--accent); + background: none; border: 0; cursor: pointer; padding: 4px 6px; + border-radius: var(--r-sm); + } + .proj-section-label .clear:hover { background: var(--accent-wash); } + + .proj-list { + display: flex; flex-direction: column; gap: 2px; + margin: 0 0 var(--sp-3); + max-height: 320px; + overflow-y: auto; + } + .proj-item { + display: grid; + grid-template-columns: 36px 1fr auto auto; + align-items: center; + gap: var(--sp-3); + padding: 10px 12px; + border-radius: var(--r-md); + cursor: pointer; + transition: background var(--motion-fast) var(--ease); + } + .proj-item:hover { background: var(--surface-warm); } + .proj-item.is-active { + background: var(--accent-wash); + box-shadow: inset 0 0 0 1px var(--accent); + } + .proj-thumb { + width: 36px; height: 36px; + border-radius: var(--r-sm); + background: var(--surface-2); + display: grid; place-items: center; + color: var(--muted); + overflow: hidden; + position: relative; + } + .proj-thumb.has-thumb { + background: linear-gradient(135deg, var(--brand-lo) 0%, var(--brand) 100%); + color: var(--accent-on); + } + .proj-thumb-rec::after { + content: ''; position: absolute; top: 6px; right: 6px; + width: 6px; height: 6px; border-radius: 50%; + background: var(--danger); + box-shadow: 0 0 0 2px var(--surface); + } + .proj-meta { min-width: 0; } + .proj-name { + font: 500 13px/1.3 var(--font-body); + color: var(--fg); + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + } + .proj-path { + font: 400 11px/1.4 var(--font-mono); + color: var(--muted); + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + margin-top: 2px; + } + .proj-time { + font: 400 11px/1 var(--font-mono); + color: var(--meta); + white-space: nowrap; + } + .proj-pin { + width: 24px; height: 24px; + display: grid; place-items: center; + border: 0; background: transparent; + border-radius: var(--r-sm); + color: var(--muted); + cursor: pointer; + opacity: 0; + transition: opacity var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); + } + .proj-item:hover .proj-pin { opacity: 1; } + .proj-pin:hover { background: var(--surface-3); color: var(--fg); } + .proj-pin.is-pinned { opacity: 1; color: var(--accent); } + + .proj-footer { + display: flex; align-items: center; justify-content: space-between; + padding-top: var(--sp-3); + border-top: 1px solid var(--border-soft); + } + .proj-footer .hint { + font: 400 12px/1.4 var(--font-body); + color: var(--muted); + } + .proj-footer .hint kbd { + font: 500 11px/1 var(--font-mono); + padding: 2px 6px; + border-radius: 4px; + background: var(--surface-2); + border: 1px solid var(--border); + color: var(--fg); + } + .btn-secondary { + height: 32px; + padding: 0 14px; + border: 1px solid var(--border); + border-radius: var(--r-md); + background: var(--surface); + color: var(--fg); + font: 500 13px/1 var(--font-body); + cursor: pointer; + display: inline-flex; align-items: center; gap: 6px; + transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); + } + .btn-secondary:hover { background: var(--surface-warm); border-color: var(--border-hi); } + + /* ─── new project — template grid ─────────────────────── */ + .new-form { display: flex; flex-direction: column; gap: var(--sp-4); } + .new-field { display: flex; flex-direction: column; gap: 6px; } + .new-field label { + font: 500 11px/1 var(--font-body); + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--muted); + } + .new-field input, .new-field select { + width: 100%; + height: 38px; + padding: 0 12px; + border: 1px solid var(--border); + border-radius: var(--r-md); + background: var(--surface); + color: var(--fg); + font: 400 13px/1 var(--font-body); + } + .new-field input:focus, .new-field select:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px var(--accent-soft); + } + .new-field .path-row { + display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); + } + .tpl-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--sp-2); + } + .tpl-cell { + display: flex; flex-direction: column; align-items: flex-start; + gap: var(--sp-2); + padding: var(--sp-3); + border: 1px solid var(--border); + border-radius: var(--r-md); + background: var(--surface); + cursor: pointer; + text-align: left; + transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); + } + .tpl-cell:hover { border-color: var(--border-hi); background: var(--surface-warm); } + .tpl-cell.is-active { + border-color: var(--accent); + background: var(--accent-wash); + box-shadow: 0 0 0 1px var(--accent); + } + .tpl-icon { + width: 36px; height: 36px; + border-radius: var(--r-sm); + background: var(--surface-2); + display: grid; place-items: center; + color: var(--muted); + } + .tpl-cell.is-active .tpl-icon { background: var(--accent); color: var(--accent-on); } + .tpl-name { + font: 500 13px/1.3 var(--font-body); + color: var(--fg); + } + .tpl-desc { + font: 400 11px/1.4 var(--font-body); + color: var(--muted); + } + .new-actions { + display: flex; justify-content: flex-end; gap: var(--sp-2); + padding-top: var(--sp-3); + border-top: 1px solid var(--border-soft); + } + .btn-primary { + height: 32px; + padding: 0 16px; + border: 1px solid var(--accent); + border-radius: var(--r-md); + background: var(--accent); + color: var(--accent-on); + font: 500 13px/1 var(--font-body); + cursor: pointer; + display: inline-flex; align-items: center; gap: 6px; + transition: background var(--motion-fast) var(--ease); + } + .btn-primary:hover { background: var(--brand-lo); } + .btn-primary:disabled { + background: var(--surface-2); + border-color: var(--border); + color: var(--muted); + cursor: not-allowed; + } @@ -2234,8 +2480,16 @@ + + + + - + OpenScreen @@ -2268,9 +2522,7 @@ - + @@ -2296,8 +2548,8 @@ 0% context - @@ -3071,6 +3323,182 @@

Crop Video

+ + + + + + From a340b705405e866901e4709fc991903ce1252b5d Mon Sep 17 00:00:00 2001 From: EtienneLescot Date: Sun, 28 Jun 2026 18:48:45 +0200 Subject: [PATCH 04/17] refactor(design): update titlebar layout and brand mark implementation Relocate project action buttons and update brand mark to use a masked image. --- design/openscreen-editor.html | 182 ++++++++++++++++++++++++++-------- 1 file changed, 140 insertions(+), 42 deletions(-) diff --git a/design/openscreen-editor.html b/design/openscreen-editor.html index 14875da0b..fb040dfbd 100644 --- a/design/openscreen-editor.html +++ b/design/openscreen-editor.html @@ -298,8 +298,7 @@ } .titlebar .brand-mark { width: 18px; height: 18px; border-radius: 5px; - background: radial-gradient(circle at 30% 30%, var(--brand), var(--brand-lo) 80%); - box-shadow: 0 0 8px var(--brand-glow); + display: block; } .titlebar .sep { width: 1px; height: 16px; background: var(--border); @@ -2480,16 +2479,8 @@ - - - - - + OpenScreen @@ -2500,12 +2491,17 @@ Enregistré · il y a 2 s - - + + + + + + +
Also tighten pauses longer than 0.6s in the intro.
+ + + +
+
+
+ OpenScreen + 10:43 +
+
Detected 3 pauses over 600ms between 0:08 and 0:31.
Proposed cuts: 0:08.2–0:09.1, 0:18.5–0:19.4, 0:31.0–0:32.2.
Apply all three?
+
+ + + +
+
+
+ +
+
+
+ YOU + + + + +
+
Apply all.
+
+
+ +
+
+
+ OpenScreen + 10:43 +
+
Removed 2.0s · output ready · undo available for 10 min
+
+
+ +
+
+
+ YOU + + + + +
+
Add subtle background music at 18% volume.
+
+
+ +
+
+
+ OpenScreen + 10:44 +
+
Picked Soft Pad A from the project library. Inserting on track 2, fading in at 0:00.0 and fading out at the end. Ducking to 12% under speech where overlap detected.
+
+
+ +
+
+
+ OpenScreen + 10:44 +
+
Music track added · 3 duck points set · review in timeline
+
+
@@ -2679,47 +2781,47 @@

MEDIA

-
-
demo-alfa-no-code-1.mp4
+
+
demo-alfa-no-code-1.mp4
- 0:00:32.0·1·A - 124 MB + 0:00:32.0·1·A + 124 MB
-
  • +
  • -
    -
    demo-alfa-no-code-1.mp4
    +
    +
    demo-alfa-no-code-1.mp4
    - 0:00:32.0·1·A - 98 MB + 0:00:32.0·1·A + 98 MB
    • -
  • +
  • -
    -
    demo-alfa-no-code-1.mp4
    +
    +
    demo-alfa-no-code-1.mp4
    - 0:00:32.0·1·A - 156 MB + 0:00:32.0·1·A + 156 MB
    • -
  • +
  • -
    -
    demo-alfa-no-code-1.mp4
    +
    +
    demo-alfa-no-code-1.mp4
    - 0:00:32.0·1·A - 87 MB + 0:00:32.0·1·A + 87 MB
    • @@ -2768,11 +2870,7 @@

    MEDIA

    0:00.0/7:03.6 - - - - - + + + + +
    -
    -
    - - - V1 - -
    -
    -
    -
    - - - Z - -
    -
    1.8×
    -
    1.8×
    -
    1.8×
    -
    1.8×
    -
    1.8×
    -
    1.8×
    -
    1.8×
    -
    1.8×
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +

    voice-over-take-3.wav

    +

    0:00.0 — 1:45.2 • source 0:00.0–1:45.2

    +
    +
    +
    -
    -
    - - - T - -
    -
    Enter text…
    + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +

    intro-animation.mp4

    +

    0:00.0 — 0:08.5 • source 0:00.0–0:08.5

    +
    +
    +
    +
    -
    - - - S - -
    -
    1.5×
    + + + +
    +
    + + +
    +
    - + +
    @@ -3372,6 +3810,81 @@

    Source Transcript

    + + +