sandbox/studio: knobs in charcoal black, neutral palette, drop sidebar
Aligning the mockup more closely with the reference image:
- Knob body is now a pure charcoal/black radial gradient (no warm
brown tint). Top-left specular dim, top crescent gloss, outer dark
ring. Drop shadow underneath so the knob "sits on" the panel.
- Value readouts ("120.0", "2.50", ...) in cream/white, no inset
amber LCD frame. Amber is reserved for arcs / LEDs / bullet labels
exclusively.
- Panel palette pulled toward neutral dark (less brown saturation).
- Sidebar with the description bullets removed; layout is just the
hardware unit at full width.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jose Luis Montañes
@@ -4,293 +4,309 @@
|
||||
<meta charset="utf-8">
|
||||
<title>code-sinth — studio hardware emulation</title>
|
||||
<style>
|
||||
/* === warm palette inspired by Moog / Roland / Korg vintage rack gear === */
|
||||
:root {
|
||||
--hw-bg: #1a1612;
|
||||
--hw-panel: #2b2620;
|
||||
--hw-panel-hi: #342f28;
|
||||
--hw-panel-lo: #1f1b16;
|
||||
--hw-divider: #11100d;
|
||||
--hw-screw: #6a635a;
|
||||
--hw-screw-dk: #2a2520;
|
||||
--hw-amber: #ffae5c;
|
||||
--hw-amber-hi: #ffd5a0;
|
||||
--hw-amber-mut: #5a3d20;
|
||||
--hw-amber-off: #2a2118;
|
||||
--hw-amber-glow: rgba(255, 174, 92, 0.55);
|
||||
--hw-fg: #b9a98c;
|
||||
--hw-fg-bright: #d8c9a8;
|
||||
--hw-fg-dim: #786a55;
|
||||
--hw-engrave: #8c7d62;
|
||||
--hw-screen-bg: #1d1814;
|
||||
--hw-syn-com: #5a4a3a;
|
||||
--hw-syn-kw: #e0916a;
|
||||
--hw-syn-num: #d8a060;
|
||||
--hw-syn-fn: #c8a878;
|
||||
--hw-syn-atom: #b8a070;
|
||||
--hw-syn-str: #a08862;
|
||||
--hw-led-red: #e85a3a;
|
||||
--bg: #131210;
|
||||
--hw-bg: #1a1916; /* panel: neutral dark, very faint warm tint */
|
||||
--hw-bg-hi: #232220;
|
||||
--hw-bg-lo: #0e0d0b;
|
||||
--hw-edge: #050505;
|
||||
--hw-screw: #5a5550;
|
||||
--hw-amber: #e8a050; /* used ONLY for arcs / LEDs / labels */
|
||||
--hw-amber-hi: #f4c890;
|
||||
--hw-amber-mut: rgba(232, 160, 80, 0.18);
|
||||
--hw-amber-glow: rgba(232, 160, 80, 0.45);
|
||||
--hw-amber-off: #28201a;
|
||||
--hw-fg: #a8a39a; /* general text: warm-neutral cream */
|
||||
--hw-fg-hi: #d8d0c0;
|
||||
--hw-fg-dim: #6c6660;
|
||||
--hw-engrave: #8a847a;
|
||||
--hw-screen: #161412;
|
||||
--hw-led-red: #c84838;
|
||||
--hw-led-green: #6aca8a;
|
||||
--hw-syn-com: #5a554f;
|
||||
--hw-syn-kw: #d68868;
|
||||
--hw-syn-num: #d6a268;
|
||||
--hw-syn-fn: #c8a878;
|
||||
--hw-syn-id: #b8b0a0;
|
||||
--hw-syn-op: #6c6660;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { height: 100%; margin: 0;
|
||||
background:
|
||||
radial-gradient(circle at 30% 20%, #221c16 0%, #14110d 70%),
|
||||
var(--hw-bg);
|
||||
color: var(--hw-fg);
|
||||
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--hw-fg);
|
||||
font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
|
||||
font-size: 13px; }
|
||||
body { padding: 28px; min-height: 100vh; }
|
||||
font-size: 12px; }
|
||||
body { padding: 32px; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; }
|
||||
|
||||
/* ===================================================================== */
|
||||
/* Panel chrome — beveled metal panels with corner screws */
|
||||
/* Outer layout: sidebar (description) + hardware unit */
|
||||
/* ===================================================================== */
|
||||
.panel {
|
||||
.layout {
|
||||
width: 100%;
|
||||
max-width: 980px;
|
||||
}
|
||||
|
||||
/* ===================================================================== */
|
||||
/* Hardware unit — single large rounded panel containing everything */
|
||||
/* ===================================================================== */
|
||||
.hardware {
|
||||
position: relative;
|
||||
background:
|
||||
linear-gradient(180deg, var(--hw-panel-hi) 0%, var(--hw-panel) 50%, var(--hw-panel-lo) 100%);
|
||||
border: 1px solid #0a0805;
|
||||
border-radius: 6px;
|
||||
radial-gradient(ellipse at 30% 0%, var(--hw-bg-hi) 0%, var(--hw-bg) 50%, var(--hw-bg-lo) 100%);
|
||||
border: 1px solid var(--hw-edge);
|
||||
border-radius: 10px;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 220, 180, 0.04),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.6),
|
||||
0 1px 0 rgba(255, 220, 180, 0.03),
|
||||
0 6px 16px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.panel::before, .panel::after, .panel > .screw-tl, .panel > .screw-tr,
|
||||
.panel > .screw-bl, .panel > .screw-br {
|
||||
/* nothing; pseudo-elements not enough — using real spans below */
|
||||
inset 0 1px 0 rgba(255, 220, 180, 0.05),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.7),
|
||||
inset 0 0 0 1px rgba(232, 160, 80, 0.04),
|
||||
0 1px 0 rgba(255, 220, 180, 0.02),
|
||||
0 8px 24px rgba(0, 0, 0, 0.55);
|
||||
padding: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 220px;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* corner screws — only on the outermost frame */
|
||||
.screw {
|
||||
position: absolute; width: 10px; height: 10px; border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at 30% 25%, #9a8e7c 0%, #4a4138 55%, #1a1510 100%);
|
||||
radial-gradient(circle at 30% 25%, #8a7d6a 0%, #3a3025 60%, #100c08 100%);
|
||||
box-shadow:
|
||||
inset 0 -1px 1px rgba(0,0,0,0.7),
|
||||
inset 0 1px 0 rgba(255,220,180,0.2),
|
||||
inset 0 1px 0 rgba(255,220,180,0.18),
|
||||
0 1px 1px rgba(0,0,0,0.6);
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
.screw::after {
|
||||
content: ''; position: absolute; inset: 0;
|
||||
background: linear-gradient(45deg, transparent 44%, rgba(0,0,0,0.65) 47%,
|
||||
rgba(0,0,0,0.65) 53%, transparent 56%);
|
||||
background: linear-gradient(45deg, transparent 44%, rgba(0,0,0,0.55) 47%,
|
||||
rgba(0,0,0,0.55) 53%, transparent 56%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.screw-tl { top: 6px; left: 6px; }
|
||||
.screw-tr { top: 6px; right: 6px; }
|
||||
.screw-bl { bottom: 6px; left: 6px; }
|
||||
.screw-br { bottom: 6px; right: 6px; }
|
||||
.hardware > .screw.tl { top: 8px; left: 8px; }
|
||||
.hardware > .screw.tr { top: 8px; right: 8px; }
|
||||
.hardware > .screw.bl { bottom: 8px; left: 8px; }
|
||||
.hardware > .screw.br { bottom: 8px; right: 8px; }
|
||||
|
||||
/* ===================================================================== */
|
||||
/* Layout */
|
||||
/* Header bar inside the hardware unit */
|
||||
/* ===================================================================== */
|
||||
.frame { display: grid; grid-template-rows: auto 1fr; gap: 14px;
|
||||
max-width: 1100px; margin: 0 auto; }
|
||||
|
||||
/* --- header bar --- */
|
||||
header.panel { display: flex; align-items: center; gap: 18px; padding: 10px 36px; height: 50px; }
|
||||
.hw-btn { background: linear-gradient(180deg, #3a342c 0%, #1f1b16 100%);
|
||||
border: 1px solid #0a0805; border-radius: 4px;
|
||||
color: var(--hw-fg-bright); padding: 6px 14px;
|
||||
font-family: inherit; font-size: 11px; cursor: pointer;
|
||||
letter-spacing: 0.12em; text-transform: uppercase;
|
||||
box-shadow: inset 0 1px 0 rgba(255,220,180,0.1),
|
||||
inset 0 -1px 0 rgba(0,0,0,0.6),
|
||||
0 1px 2px rgba(0,0,0,0.5);
|
||||
transition: all 80ms; }
|
||||
.hw-header {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 4px 26px;
|
||||
height: 36px;
|
||||
color: var(--hw-fg-dim);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.hw-btn {
|
||||
background: linear-gradient(180deg, #2c261f 0%, #14110d 100%);
|
||||
border: 1px solid var(--hw-edge);
|
||||
border-radius: 12px;
|
||||
color: var(--hw-fg-hi);
|
||||
padding: 4px 12px;
|
||||
font-family: inherit;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,220,180,0.08),
|
||||
inset 0 -1px 0 rgba(0,0,0,0.55),
|
||||
0 1px 1px rgba(0,0,0,0.4);
|
||||
display: inline-flex; align-items: center; gap: 5px;
|
||||
transition: color 80ms;
|
||||
}
|
||||
.hw-btn:hover { color: var(--hw-amber); }
|
||||
.hw-btn:active { transform: translateY(1px);
|
||||
box-shadow: inset 0 1px 4px rgba(0,0,0,0.6); }
|
||||
.hw-btn .ico { display: inline-block; width: 0; height: 0;
|
||||
border-left: 7px solid var(--hw-led-green);
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
vertical-align: middle; margin-right: 6px;
|
||||
filter: drop-shadow(0 0 4px var(--hw-led-green)); }
|
||||
.hw-led { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
|
||||
background: var(--hw-led-red);
|
||||
box-shadow: 0 0 6px var(--hw-led-red),
|
||||
inset 0 0 2px rgba(0,0,0,0.7);
|
||||
vertical-align: middle; margin-right: 6px;
|
||||
animation: led-pulse 2s ease-in-out infinite; }
|
||||
box-shadow: inset 0 1px 3px rgba(0,0,0,0.6); }
|
||||
.hw-btn .led-red {
|
||||
width: 6px; height: 6px; border-radius: 50%;
|
||||
background: var(--hw-led-red);
|
||||
box-shadow: 0 0 4px var(--hw-led-red);
|
||||
animation: led-pulse 2.2s ease-in-out infinite;
|
||||
}
|
||||
.hw-btn .ico-play {
|
||||
width: 0; height: 0;
|
||||
border-left: 6px solid var(--hw-led-green);
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
filter: drop-shadow(0 0 3px var(--hw-led-green));
|
||||
}
|
||||
@keyframes led-pulse {
|
||||
0%, 100% { box-shadow: 0 0 4px var(--hw-led-red); }
|
||||
50% { box-shadow: 0 0 10px var(--hw-led-red); }
|
||||
0%, 100% { box-shadow: 0 0 3px var(--hw-led-red); }
|
||||
50% { box-shadow: 0 0 8px var(--hw-led-red); }
|
||||
}
|
||||
.engrave { color: var(--hw-engrave); font-size: 10px;
|
||||
letter-spacing: 0.18em; text-transform: uppercase;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 -1px 0 rgba(255,220,180,0.04); }
|
||||
.stat { color: var(--hw-fg-dim); font-size: 11px; letter-spacing: 0.05em; }
|
||||
.stat strong { color: var(--hw-fg-bright); font-weight: 500;
|
||||
font-variant-numeric: tabular-nums; }
|
||||
.hw-header .num { color: var(--hw-amber); font-variant-numeric: tabular-nums; }
|
||||
.hw-header .right { margin-left: auto; color: var(--hw-engrave); letter-spacing: 0.18em; }
|
||||
|
||||
/* --- main split --- */
|
||||
main.row { display: grid; grid-template-columns: 1fr 320px; gap: 14px;
|
||||
min-height: 0; }
|
||||
|
||||
/* --- code area (the "screen") --- */
|
||||
.screen.panel { padding: 14px 18px 26px; min-height: 460px;
|
||||
display: flex; flex-direction: column;
|
||||
background:
|
||||
linear-gradient(180deg, #181410 0%, var(--hw-screen-bg) 12%,
|
||||
var(--hw-screen-bg) 88%, #181410 100%);
|
||||
border-color: #050402; }
|
||||
.screen .glass {
|
||||
flex: 1; padding: 14px 18px;
|
||||
background: var(--hw-screen-bg);
|
||||
border: 1px solid #0a0805;
|
||||
border-radius: 4px;
|
||||
/* ===================================================================== */
|
||||
/* Code "screen" — left, big */
|
||||
/* ===================================================================== */
|
||||
.screen {
|
||||
background: var(--hw-screen);
|
||||
border: 1px solid var(--hw-edge);
|
||||
border-radius: 6px;
|
||||
padding: 14px 18px 10px;
|
||||
box-shadow:
|
||||
inset 0 0 18px rgba(0,0,0,0.6),
|
||||
inset 0 0 1px rgba(255, 174, 92, 0.06),
|
||||
inset 0 0 60px rgba(255, 174, 92, 0.02);
|
||||
font-size: 13px; line-height: 22px;
|
||||
overflow: auto;
|
||||
inset 0 0 0 1px rgba(232,160,80,0.04),
|
||||
inset 0 1px 8px rgba(0,0,0,0.5);
|
||||
display: flex; flex-direction: column;
|
||||
min-height: 320px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.code-line { display: flex; gap: 18px; white-space: pre; }
|
||||
.ln { color: var(--hw-syn-com); user-select: none; min-width: 22px; text-align: right; }
|
||||
.glass {
|
||||
flex: 1; overflow: auto;
|
||||
font-size: 12px; line-height: 19px;
|
||||
}
|
||||
.code-line { display: flex; gap: 14px; white-space: pre; }
|
||||
.ln { color: var(--hw-syn-com); user-select: none; min-width: 16px; text-align: right; }
|
||||
.syn-com { color: var(--hw-syn-com); font-style: italic; }
|
||||
.syn-kw { color: var(--hw-syn-kw); }
|
||||
.syn-num { color: var(--hw-syn-num); }
|
||||
.syn-fn { color: var(--hw-syn-fn); }
|
||||
.syn-atom{ color: var(--hw-syn-atom); }
|
||||
.syn-str { color: var(--hw-syn-str); }
|
||||
.syn-com { color: var(--hw-syn-com); font-style: italic; }
|
||||
.syn-id { color: var(--hw-fg-bright); }
|
||||
.syn-op { color: var(--hw-fg-dim); }
|
||||
.syn-id { color: var(--hw-syn-id); }
|
||||
.syn-op { color: var(--hw-syn-op); }
|
||||
.syn-arrow { color: var(--hw-amber); }
|
||||
|
||||
.screen .status-line {
|
||||
margin-top: 10px; padding: 0 4px;
|
||||
font-size: 11px; color: var(--hw-amber);
|
||||
.status-line {
|
||||
margin-top: 8px;
|
||||
color: var(--hw-amber);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.16em;
|
||||
text-shadow: 0 0 6px var(--hw-amber-glow);
|
||||
letter-spacing: 0.12em; }
|
||||
}
|
||||
.blink { animation: blink 1.1s step-end infinite; }
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
|
||||
/* --- right column --- */
|
||||
aside.col { display: flex; flex-direction: column; gap: 14px; }
|
||||
/* ===================================================================== */
|
||||
/* Right column */
|
||||
/* ===================================================================== */
|
||||
.right-col {
|
||||
display: flex; flex-direction: column; gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* --- knobs panel --- */
|
||||
.knobs.panel { padding: 22px 14px; }
|
||||
.knobs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.knob-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||
.knob-cell .label { font-size: 9px; letter-spacing: 0.18em;
|
||||
text-transform: uppercase; color: var(--hw-engrave);
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.7),
|
||||
0 -1px 0 rgba(255,220,180,0.05); }
|
||||
/* knobs sub-panel inside hardware */
|
||||
.knobs {
|
||||
background: linear-gradient(180deg, #1f1a14 0%, #14110d 100%);
|
||||
border: 1px solid var(--hw-edge);
|
||||
border-radius: 6px;
|
||||
padding: 14px 12px;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,220,180,0.04),
|
||||
inset 0 -1px 0 rgba(0,0,0,0.6);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px 10px;
|
||||
}
|
||||
.knob-cell {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 4px;
|
||||
}
|
||||
.knob-cell .label {
|
||||
font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
|
||||
color: var(--hw-engrave);
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 -1px 0 rgba(255,220,180,0.04);
|
||||
}
|
||||
.knob-cell .value {
|
||||
font-size: 12px; font-variant-numeric: tabular-nums;
|
||||
color: var(--hw-amber); text-shadow: 0 0 6px var(--hw-amber-glow);
|
||||
letter-spacing: 0.04em;
|
||||
/* slight inset / engraved feel for the digital readout */
|
||||
background: var(--hw-screen-bg);
|
||||
border: 1px solid #0a0805;
|
||||
border-radius: 3px;
|
||||
padding: 1px 8px; min-width: 56px; text-align: center;
|
||||
box-shadow: inset 0 1px 3px rgba(0,0,0,0.7);
|
||||
font-size: 10px; font-variant-numeric: tabular-nums;
|
||||
color: var(--hw-fg-hi); letter-spacing: 0.05em;
|
||||
background: transparent;
|
||||
padding: 0; min-width: 46px; text-align: center;
|
||||
}
|
||||
.hw-knob { cursor: grab; touch-action: none; }
|
||||
.hw-knob.dragging { cursor: grabbing; }
|
||||
|
||||
/* --- sequencer panel --- */
|
||||
.seq.panel { padding: 16px 14px 18px; }
|
||||
.seq-row { display: flex; align-items: center; gap: 10px; padding: 4px 4px;
|
||||
border-top: 1px solid #0a0805; }
|
||||
.seq-row:first-of-type { border-top: none; }
|
||||
.seq-row .label { width: 56px; font-size: 9px; letter-spacing: 0.18em;
|
||||
text-transform: uppercase; color: var(--hw-engrave);
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.7),
|
||||
0 -1px 0 rgba(255,220,180,0.05); }
|
||||
.leds { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; flex: 1; }
|
||||
.led {
|
||||
height: 14px; border-radius: 2px;
|
||||
background:
|
||||
linear-gradient(180deg, #100c08 0%, var(--hw-amber-off) 100%);
|
||||
border: 1px solid #050402;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,0.7),
|
||||
inset 0 -1px 0 rgba(255,220,180,0.03);
|
||||
cursor: pointer;
|
||||
transition: background 80ms, box-shadow 80ms;
|
||||
/* sequencer sub-panel */
|
||||
.seq {
|
||||
background: linear-gradient(180deg, #1f1a14 0%, #14110d 100%);
|
||||
border: 1px solid var(--hw-edge);
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,220,180,0.04),
|
||||
inset 0 -1px 0 rgba(0,0,0,0.6);
|
||||
display: flex; flex-direction: column; gap: 5px;
|
||||
}
|
||||
.led:hover { background: linear-gradient(180deg, #1c160e 0%, #3a2a18 100%); }
|
||||
.seq-row {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.seq-row .label {
|
||||
width: 44px;
|
||||
font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase;
|
||||
color: var(--hw-engrave);
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.6);
|
||||
}
|
||||
.leds {
|
||||
display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px;
|
||||
flex: 1;
|
||||
}
|
||||
.led {
|
||||
height: 12px; border-radius: 1px;
|
||||
background: linear-gradient(180deg, #0a0805 0%, var(--hw-amber-off) 100%);
|
||||
border: 1px solid var(--hw-edge);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,0.7);
|
||||
cursor: pointer; position: relative;
|
||||
transition: background 60ms;
|
||||
}
|
||||
.led:hover { background: linear-gradient(180deg, #181208 0%, #382818 100%); }
|
||||
.led.on {
|
||||
background:
|
||||
radial-gradient(circle at 50% 30%, var(--hw-amber-hi) 0%,
|
||||
var(--hw-amber) 40%, #c87830 100%);
|
||||
radial-gradient(circle at 50% 25%, var(--hw-amber-hi) 0%,
|
||||
var(--hw-amber) 55%, #a06820 100%);
|
||||
box-shadow:
|
||||
inset 0 0 4px rgba(255,255,255,0.4),
|
||||
inset 0 -1px 1px rgba(0,0,0,0.3),
|
||||
0 0 8px var(--hw-amber-glow);
|
||||
inset 0 0 2px rgba(255,255,255,0.4),
|
||||
0 0 5px var(--hw-amber-glow);
|
||||
}
|
||||
.led.beat { border-left: 1px solid #281e12; }
|
||||
.led.playhead::after {
|
||||
content: ''; position: absolute; inset: -2px;
|
||||
border: 1px solid rgba(255, 220, 180, 0.4);
|
||||
border-radius: 3px; pointer-events: none;
|
||||
.led.beat::before {
|
||||
content: ''; position: absolute; left: -1px; top: -3px; bottom: -3px;
|
||||
width: 1px; background: var(--hw-amber-mut);
|
||||
}
|
||||
.led.playhead {
|
||||
outline: 1px solid rgba(232, 160, 80, 0.6);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.led { position: relative; }
|
||||
|
||||
/* --- title scaffold --- */
|
||||
.titlecard { color: var(--hw-fg-dim); font-size: 11px; line-height: 1.6;
|
||||
max-width: 240px; padding: 18px 14px;
|
||||
border-left: 2px solid var(--hw-amber-mut); }
|
||||
.titlecard h1 { color: var(--hw-fg-bright); font-size: 13px; font-weight: 500;
|
||||
letter-spacing: 0.18em; text-transform: uppercase;
|
||||
margin: 0 0 8px;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.7),
|
||||
0 -1px 0 rgba(255,220,180,0.05); }
|
||||
.titlecard ul { padding-left: 14px; margin: 8px 0 0; }
|
||||
.titlecard li { margin-bottom: 3px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="frame">
|
||||
<div class="layout">
|
||||
|
||||
<!-- ===================== header bar ===================== -->
|
||||
<header class="panel">
|
||||
<span class="screw screw-tl"></span>
|
||||
<span class="screw screw-tr"></span>
|
||||
<span class="screw screw-bl"></span>
|
||||
<span class="screw screw-br"></span>
|
||||
<!-- ===================== hardware unit ===================== -->
|
||||
<div class="hardware">
|
||||
<span class="screw tl"></span>
|
||||
<span class="screw tr"></span>
|
||||
<span class="screw bl"></span>
|
||||
<span class="screw br"></span>
|
||||
|
||||
<button class="hw-btn"><span class="hw-led"></span>STOP</button>
|
||||
<button class="hw-btn"><span class="ico"></span>RUN</button>
|
||||
<span class="engrave">48 kHz</span>
|
||||
<span class="stat">TAPS: <strong>14</strong></span>
|
||||
<span class="stat">CPU: <strong>9%</strong></span>
|
||||
<span style="flex: 1"></span>
|
||||
<span class="engrave">code · sinth</span>
|
||||
</header>
|
||||
<!-- header bar, full width -->
|
||||
<div class="hw-header">
|
||||
<button class="hw-btn"><span class="led-red"></span>STOP</button>
|
||||
<button class="hw-btn"><span class="ico-play"></span>RUN</button>
|
||||
<span>48 KHZ</span>
|
||||
<span>TAPS: <span class="num">14</span></span>
|
||||
<span>CPU: <span class="num">9%</span></span>
|
||||
<span class="right">CODE · SINTH</span>
|
||||
</div>
|
||||
|
||||
<main class="row">
|
||||
<!-- code area -->
|
||||
<section class="screen">
|
||||
<div class="glass" id="glass"></div>
|
||||
<div class="status-line">> RUNNING<span class="blink">_</span></div>
|
||||
</section>
|
||||
|
||||
<!-- ===================== code area ===================== -->
|
||||
<section class="screen panel">
|
||||
<span class="screw screw-tl"></span>
|
||||
<span class="screw screw-tr"></span>
|
||||
<span class="screw screw-bl"></span>
|
||||
<span class="screw screw-br"></span>
|
||||
<!-- right column with knobs + seq -->
|
||||
<div class="right-col">
|
||||
|
||||
<div class="glass" id="glass"></div>
|
||||
|
||||
<div class="status-line">> RUNNING<span class="blink">_</span></div>
|
||||
</section>
|
||||
|
||||
<!-- ===================== right column ===================== -->
|
||||
<aside class="col">
|
||||
|
||||
<!-- knobs -->
|
||||
<section class="knobs panel">
|
||||
<span class="screw screw-tl"></span>
|
||||
<span class="screw screw-tr"></span>
|
||||
<span class="screw screw-bl"></span>
|
||||
<span class="screw screw-br"></span>
|
||||
|
||||
<div class="knobs-grid">
|
||||
<section class="knobs">
|
||||
<div class="knob-cell">
|
||||
<span class="label">tempo</span>
|
||||
<canvas class="hw-knob" data-min="60" data-max="200" data-value="120" data-unit=""></canvas>
|
||||
<canvas class="hw-knob" data-min="60" data-max="200" data-value="120" data-decimals="1"></canvas>
|
||||
<span class="value">120.0</span>
|
||||
</div>
|
||||
<div class="knob-cell">
|
||||
@@ -308,80 +324,77 @@
|
||||
<canvas class="hw-knob" data-min="0" data-max="1" data-value="0.35" data-decimals="2"></canvas>
|
||||
<span class="value">0.35</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- step sequencers -->
|
||||
<section class="seq panel">
|
||||
<span class="screw screw-tl"></span>
|
||||
<span class="screw screw-tr"></span>
|
||||
<span class="screw screw-bl"></span>
|
||||
<span class="screw screw-br"></span>
|
||||
<section class="seq">
|
||||
<div class="seq-row" data-pattern="1000100010001000">
|
||||
<span class="label">kicks</span>
|
||||
<div class="leds"></div>
|
||||
</div>
|
||||
<div class="seq-row" data-pattern="0010001000100010">
|
||||
<span class="label">hat</span>
|
||||
<div class="leds"></div>
|
||||
</div>
|
||||
<div class="seq-row" data-pattern="1001010001010010">
|
||||
<span class="label">melody</span>
|
||||
<div class="leds"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="seq-row" data-pattern="1000100010001000">
|
||||
<span class="label">kicks</span>
|
||||
<div class="leds"></div>
|
||||
</div>
|
||||
<div class="seq-row" data-pattern="0010001000100010">
|
||||
<span class="label">hat</span>
|
||||
<div class="leds"></div>
|
||||
</div>
|
||||
<div class="seq-row" data-pattern="1001010001010010">
|
||||
<span class="label">melody</span>
|
||||
<div class="leds"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ===========================================================================
|
||||
// syntax-highlighted snippet rendering (static — this is a visual mockup)
|
||||
// static syntax-highlighted code (matches reference layout)
|
||||
// ===========================================================================
|
||||
const PATCH_LINES = [
|
||||
['com', '# studio hardware emulation — visual exploration'],
|
||||
const PATCH = [
|
||||
['# studio hardware emulation — visual exploration', 'com'],
|
||||
null,
|
||||
['mix', ['kw','node'], ['id','kick'], ['op','='], ['fn','step_seq'], ['op','('],
|
||||
['id','rate'], ['op','='], ['id','tempo'], ['op',','], ['id','steps'], ['op','='], ['num','16'], ['op',','] ],
|
||||
['mix', ['op',' '], ['id','default'], ['op','='], ['op','['],
|
||||
['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',', '],
|
||||
['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',', '],
|
||||
['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',', '],
|
||||
['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',']'], ['op',')'] ],
|
||||
[['kw','node'], ['id','kick'], ['op','='], ['fn','step_seq'], ['op','('],
|
||||
['id','rate'], ['op','='], ['id','tempo'], ['op',','], ['id','steps'], ['op','='], ['num','16'], ['op',',']],
|
||||
[['op',' '], ['id','default'], ['op','='], ['op','['],
|
||||
['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',', '],
|
||||
['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',', '],
|
||||
['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',', '],
|
||||
['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',']'], ['op',')']],
|
||||
null,
|
||||
['mix', ['kw','node'], ['id','bass'], ['op','='], ['fn','osc'], ['op','('],
|
||||
['atom','saw'], ['op',', '], ['id','freq'], ['op','='], ['num','55'], ['op',')'] ],
|
||||
['mix', ['kw','node'], ['id','lp'], ['op','='], ['fn','filter'], ['op','('],
|
||||
['id','bass'], ['op',', '], ['id','cutoff'], ['op','='], ['num','800'], ['op',', '], ['id','q'], ['op','='], ['num','2.5'], ['op',')'] ],
|
||||
[['kw','node'], ['id','bass'], ['op','='], ['fn','osc'], ['op','('],
|
||||
['id','saw'], ['op',','], ['id','freq'], ['op','='], ['num','55'], ['op',')']],
|
||||
[['kw','node'], ['id','lp'], ['op','='], ['fn','filter'], ['op','('],
|
||||
['id','bass'], ['op',','], ['id','cutoff'], ['op','='], ['num','800'], ['op',','],
|
||||
['id','q'], ['op','='], ['num','2.5'], ['op',')']],
|
||||
null,
|
||||
['mix', ['kw','out'], ['op','<- '], ['id','bass'], ['op',' * '], ['num','0.6'],
|
||||
['op',' + '], ['id','kick'], ['op',' * '], ['num','0.4'] ],
|
||||
[['kw','out'], ['arrow','← '], ['id','bass'], ['op','*'], ['num','0.6'],
|
||||
['op','+'], ['id','kick'], ['op','*'], ['num','0.4']],
|
||||
null,
|
||||
['mix', ['kw','node'], ['id','melody'], ['op','='], ['fn','piano_roll'], ['op','('],
|
||||
['id','voice'], ['op','='], ['id','synth'], ['op',','] ],
|
||||
['mix', ['op',' '], ['id','rate'], ['op','='], ['id','tempo'], ['op',', '], ['id','length'], ['op','='], ['num','16'], ['op',','] ],
|
||||
['mix', ['op',' '], ['id','octaves'], ['op','='], ['num','2'], ['op',', '], ['id','gate'], ['op','='], ['num','0.18'], ['op',')'] ],
|
||||
[['kw','node'], ['id','melody'], ['op','='], ['fn','piano_roll'], ['op','('],
|
||||
['id','voice'], ['op','='], ['id','synth'], ['op',',']],
|
||||
[['op',' '], ['id','rate'], ['op','='], ['id','tempo'], ['op',','],
|
||||
['id','length'], ['op','='], ['num','16'], ['op',',']],
|
||||
[['op',' '], ['id','octaves'], ['op','='], ['num','2'], ['op',','],
|
||||
['id','gate'], ['op','='], ['num','0.18'], ['op',')']],
|
||||
];
|
||||
const glass = document.getElementById('glass');
|
||||
let lineNum = 0;
|
||||
for (const line of PATCH_LINES) {
|
||||
for (const line of PATCH) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'code-line';
|
||||
if (line === null) {
|
||||
lineNum++;
|
||||
div.innerHTML = `<span class="ln">${lineNum}</span><span> </span>`;
|
||||
} else if (line[0] === 'com') {
|
||||
div.innerHTML = `<span class="ln">${lineNum}</span><span> </span>`;
|
||||
} else if (Array.isArray(line) && typeof line[0] === 'string' && line[1] === 'com') {
|
||||
lineNum++;
|
||||
div.innerHTML = `<span class="ln">${lineNum}</span><span class="syn-com">${line[1]}</span>`;
|
||||
} else if (line[0] === 'mix') {
|
||||
div.innerHTML = `<span class="ln">${lineNum}</span><span class="syn-com">${line[0]}</span>`;
|
||||
} else {
|
||||
lineNum++;
|
||||
let html = `<span class="ln">${lineNum}</span><span>`;
|
||||
for (let i = 1; i < line.length; i++) {
|
||||
const [cls, txt] = line[i];
|
||||
html += `<span class="syn-${cls}">${txt}</span>${cls !== 'op' ? ' ' : ''}`;
|
||||
for (const [cls, txt] of line) {
|
||||
const sep = cls === 'op' ? '' : ' ';
|
||||
const klass = cls === 'arrow' ? 'syn-arrow' : `syn-${cls}`;
|
||||
html += `<span class="${klass}">${txt}</span>${sep}`;
|
||||
}
|
||||
html += `</span>`;
|
||||
div.innerHTML = html;
|
||||
@@ -390,9 +403,10 @@ for (const line of PATCH_LINES) {
|
||||
}
|
||||
|
||||
// ===========================================================================
|
||||
// knob drawing — metallic radial gradient + amber indicator
|
||||
// knob — restrained: dark gradient + thin amber arc + single tickmark.
|
||||
// No knurled ridges, no brushed metal. Closer to the reference image.
|
||||
// ===========================================================================
|
||||
const KNOB_SIZE = 64;
|
||||
const KNOB_SIZE = 50;
|
||||
function setupCanvas(canvas, size) {
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.style.width = size + 'px';
|
||||
@@ -404,107 +418,74 @@ function setupCanvas(canvas, size) {
|
||||
return ctx;
|
||||
}
|
||||
|
||||
function drawHwKnob(ctx, size, norm) {
|
||||
function drawKnob(ctx, size, norm) {
|
||||
const cx = size / 2, cy = size / 2 + 1;
|
||||
const outerR = size * 0.46;
|
||||
const bezelR = size * 0.42;
|
||||
const dialR = size * 0.34;
|
||||
const dialR = size * 0.40;
|
||||
ctx.clearRect(0, 0, size, size);
|
||||
|
||||
// outer bezel (darker ring)
|
||||
const bezel = ctx.createRadialGradient(cx - outerR*0.4, cy - outerR*0.5, 0, cx, cy, outerR);
|
||||
bezel.addColorStop(0, '#3a342c');
|
||||
bezel.addColorStop(0.6, '#1f1b16');
|
||||
bezel.addColorStop(1, '#0c0a07');
|
||||
ctx.fillStyle = bezel;
|
||||
// soft outer drop shadow under the knob (sits ON the panel)
|
||||
ctx.save();
|
||||
ctx.shadowColor = 'rgba(0,0,0,0.6)';
|
||||
ctx.shadowBlur = 6;
|
||||
ctx.shadowOffsetY = 2;
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, outerR, 0, Math.PI * 2);
|
||||
ctx.arc(cx, cy, dialR, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
|
||||
// value arc — amber, with glow
|
||||
// value arc — amber, only the active portion is drawn (no background track)
|
||||
const startA = Math.PI * 0.78, endA = Math.PI * 2.22;
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeStyle = 'rgba(255,174,92,0.18)';
|
||||
ctx.lineWidth = 1.6;
|
||||
ctx.strokeStyle = 'rgba(232,160,80,0.10)'; // very faint full track
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, bezelR + 2, startA, endA);
|
||||
ctx.arc(cx, cy, dialR + 2.5, startA, endA);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = '#ffae5c';
|
||||
ctx.shadowBlur = 5;
|
||||
ctx.shadowColor = 'rgba(255,174,92,0.7)';
|
||||
ctx.strokeStyle = '#e8a050';
|
||||
ctx.shadowBlur = 3;
|
||||
ctx.shadowColor = 'rgba(232,160,80,0.5)';
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, bezelR + 2, startA, startA + norm * (endA - startA));
|
||||
ctx.arc(cx, cy, dialR + 2.5, startA, startA + norm * (endA - startA));
|
||||
ctx.stroke();
|
||||
ctx.shadowBlur = 0;
|
||||
|
||||
// inner dial — brushed metal radial gradient
|
||||
const dial = ctx.createRadialGradient(
|
||||
cx - dialR * 0.45, cy - dialR * 0.55, dialR * 0.05,
|
||||
// dial body — neutral charcoal black, NOT warm brown
|
||||
const grad = ctx.createRadialGradient(
|
||||
cx - dialR * 0.35, cy - dialR * 0.5, 0,
|
||||
cx, cy, dialR * 1.1
|
||||
);
|
||||
dial.addColorStop(0, '#5a5246');
|
||||
dial.addColorStop(0.45, '#2c2820');
|
||||
dial.addColorStop(1, '#0a0805');
|
||||
ctx.fillStyle = dial;
|
||||
grad.addColorStop(0, '#2a2a28'); // top-left highlight
|
||||
grad.addColorStop(0.5, '#141312');
|
||||
grad.addColorStop(1, '#040404');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, dialR, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
// brushed metal striations (faint concentric arcs)
|
||||
ctx.strokeStyle = 'rgba(255,220,180,0.04)';
|
||||
ctx.lineWidth = 0.5;
|
||||
for (let i = 0; i < 5; i++) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, dialR * (0.55 + i * 0.07), -0.3, 0.3 + Math.PI);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// knurled edge (small ridges around perimeter)
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0.55)';
|
||||
// outer dark ring (separates dial from panel)
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0.85)';
|
||||
ctx.lineWidth = 1;
|
||||
for (let i = 0; i < 36; i++) {
|
||||
const a = (i / 36) * Math.PI * 2;
|
||||
const r1 = dialR * 0.94, r2 = dialR * 1.0;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(cx + Math.cos(a) * r1, cy + Math.sin(a) * r1);
|
||||
ctx.lineTo(cx + Math.cos(a) * r2, cy + Math.sin(a) * r2);
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.strokeStyle = 'rgba(255,220,180,0.08)';
|
||||
for (let i = 0; i < 36; i++) {
|
||||
const a = (i / 36 + 0.5/36) * Math.PI * 2;
|
||||
const r1 = dialR * 0.94, r2 = dialR * 1.0;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(cx + Math.cos(a) * r1, cy + Math.sin(a) * r1);
|
||||
ctx.lineTo(cx + Math.cos(a) * r2, cy + Math.sin(a) * r2);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// specular highlight from NW
|
||||
const hl = ctx.createRadialGradient(
|
||||
cx - dialR * 0.4, cy - dialR * 0.55, 0,
|
||||
cx - dialR * 0.4, cy - dialR * 0.55, dialR
|
||||
);
|
||||
hl.addColorStop(0, 'rgba(255,220,180,0.18)');
|
||||
hl.addColorStop(0.5, 'rgba(255,220,180,0.04)');
|
||||
hl.addColorStop(1, 'rgba(0,0,0,0)');
|
||||
ctx.fillStyle = hl;
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, dialR, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
// indicator notch (engraved, white-warm)
|
||||
// glossy top crescent — short bright arc on the upper half
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.08)';
|
||||
ctx.lineWidth = 0.8;
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, dialR - 1.0, Math.PI * 1.18, Math.PI * 1.82);
|
||||
ctx.stroke();
|
||||
|
||||
// indicator: short cream tick from edge inward
|
||||
const ang = startA + norm * (endA - startA);
|
||||
ctx.strokeStyle = 'rgba(255,235,210,0.85)';
|
||||
ctx.shadowBlur = 3;
|
||||
ctx.shadowColor = 'rgba(0,0,0,0.7)';
|
||||
ctx.lineWidth = 2.2;
|
||||
ctx.strokeStyle = 'rgba(245,235,215,0.92)';
|
||||
ctx.lineWidth = 1.6;
|
||||
ctx.lineCap = 'round';
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(cx + Math.cos(ang) * dialR * 0.45, cy + Math.sin(ang) * dialR * 0.45);
|
||||
ctx.moveTo(cx + Math.cos(ang) * dialR * 0.55, cy + Math.sin(ang) * dialR * 0.55);
|
||||
ctx.lineTo(cx + Math.cos(ang) * dialR * 0.88, cy + Math.sin(ang) * dialR * 0.88);
|
||||
ctx.stroke();
|
||||
ctx.shadowBlur = 0;
|
||||
}
|
||||
|
||||
document.querySelectorAll('canvas.hw-knob').forEach((canvas) => {
|
||||
@@ -515,9 +496,9 @@ document.querySelectorAll('canvas.hw-knob').forEach((canvas) => {
|
||||
let value = parseFloat(canvas.dataset.value);
|
||||
const ctx = setupCanvas(canvas, KNOB_SIZE);
|
||||
const fmt = (v) => v.toFixed(dec);
|
||||
const norm = () => (value - min) / (max - min);
|
||||
const redraw = () => {
|
||||
drawHwKnob(ctx, KNOB_SIZE, Math.max(0, Math.min(1, norm())));
|
||||
const norm = Math.max(0, Math.min(1, (value - min) / (max - min)));
|
||||
drawKnob(ctx, KNOB_SIZE, norm);
|
||||
if (valueEl) valueEl.textContent = fmt(value);
|
||||
};
|
||||
redraw();
|
||||
@@ -555,7 +536,7 @@ document.querySelectorAll('canvas.hw-knob').forEach((canvas) => {
|
||||
});
|
||||
|
||||
// ===========================================================================
|
||||
// step LEDs — render from data-pattern, click to toggle, animated playhead
|
||||
// step LEDs
|
||||
// ===========================================================================
|
||||
document.querySelectorAll('.seq-row').forEach((row) => {
|
||||
const pattern = row.dataset.pattern.split('').map((c) => c === '1' ? 1 : 0);
|
||||
@@ -574,7 +555,6 @@ document.querySelectorAll('.seq-row').forEach((row) => {
|
||||
row._cells = cells;
|
||||
});
|
||||
|
||||
// global playhead at 120 BPM 1/16 (≈ 8 steps/sec)
|
||||
let phStep = 0;
|
||||
const allRows = document.querySelectorAll('.seq-row');
|
||||
setInterval(() => {
|
||||
|
||||
Reference in New Issue
Block a user