Jose Luis Montañes 27f89b288e web: port studio hardware aesthetic into the real app ...

Aligns web/index.html with the design language captured in docs/design-system.md
(reference: web/sandbox/studio.html). The whole UI now reads as a single rack
module: corner screws, top/bottom bars, screen recess, and L2 sub-panels.

- Replace dark-blue token palette with the warm-neutral hardware palette
  and the shared --metal-specular / --metal-brush / --metal-bevel layers.
- Wrap header + main + footer in a .hardware shell with 4 corner screws.
- Editor lives inside a .screen recess (deep inset shadows, transparent
  CodeMirror background, amber cursor + selection).
- Splitter is now a hairline that lights amber on hover/drag.
- Right pane groups widgets by kind into shared sub-panels (.knobs, .faders,
  .seq); each piano_roll is its own panel.
- drawKnob ported with all 8 layers (drop shadow, amber arc, dark rim,
  metallic disc with concentric brushing + vertical lighting + specular
  band + rim light + bevel + inset + engraved notch). DPR-aware canvas.
- Faders use a deep slot track with side ticks and a metallic cap.
- Step seq cells become .led with amber glow + beat dividers.
- Piano roll keys + cells recolored to warm/amber palette.
- Wave widgets render with amber glow on a recessed background.
- RUN/STOP button group with led swap; bottom-bar shows IDLE/RUNNING.

Also: ignore local-only /referencias (heavy reference images, not source).

2026-05-01 18:58:43 +02:00

55 KiB

Raw Blame History

View Raw