ncode
e2e9fcddb5
RESAMPLE still sat flush against its border after the soft hyphen, because the type was simply too large for the button. A left-block button is 35.9px wide, leaving 27.9px of usable text width once the 2px borders and padding are removed; SAMPLE at 8px with .03em tracking measured ~27.8px. Key labels drop to 7px with no tracking and 1px side padding, which gives SAMPLE 6.8px of headroom and REVERSE 2.3px. SHIFT, the longest label in the six-button bank row, gets flex:1.25 - the hardware makes that button wider too. Direction settled: A (manual, light) with the dark counterpart. It will be implemented in the React port rather than retrofitted onto the Phase 1 vanilla app, so the UI is only built once. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
209 lines
12 KiB
HTML
209 lines
12 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="./support.js"></script>
|
|
</head>
|
|
<body>
|
|
<x-dc>
|
|
<helmet>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap">
|
|
<style>
|
|
body { margin: 0; }
|
|
a { color: #FF4A00; } a:hover { color: #C43900; }
|
|
/* 7px, no tracking, 1px side padding: a left-block button is 35.9px wide, so only
|
|
27.9px is usable text width once border and padding are taken out. At 8px with
|
|
tracking, SAMPLE measured 27.8px and sat flush against the border. */
|
|
.k { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
|
|
background:#F5F5F2; border:2px solid #111111; border-radius:3px; color:#111111; font-size:7px;
|
|
line-height:1.05; letter-spacing:0; padding:2px 1px; box-sizing:border-box; font-weight:500;
|
|
hyphens:manual; overflow-wrap:break-word; }
|
|
/* SHIFT is the longest label in the six-button bank row; give it a little more width,
|
|
as the hardware does. */
|
|
.grp:last-child .col:last-child .btnrow .k:last-child { flex:1.25; }
|
|
.lit { background:#FF4A00; color:#111111; font-weight:700; }
|
|
.pad { background:#1B1B1B; border:2px solid #111111; border-radius:4px; color:#EDEDEB; font-size:9px; }
|
|
.num { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:#6E6E69; }
|
|
.fxk { flex:1; display:flex; align-items:center; justify-content:center; text-align:center;
|
|
background:#1B1B1B; border:2px solid #111111; border-radius:10px; color:#FF4A00;
|
|
font-size:7.5px; font-weight:700; letter-spacing:.04em; line-height:1.05; padding:2px; box-sizing:border-box; }
|
|
.cap { font-family:'Space Mono',monospace; font-size:6px; letter-spacing:.11em; color:#6E6E69; white-space:nowrap; }
|
|
.rule { flex:1; height:1px; background:#B5B5B0; }
|
|
.caprow { height:8px; display:flex; align-items:center; gap:4px; }
|
|
.btnrow { height:32px; display:flex; gap:5px; }
|
|
.grp { height:40px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:10px; }
|
|
.col { display:flex; flex-direction:column; }
|
|
.lcdrow { display:flex; justify-content:space-between; align-items:center;
|
|
font-family:'Space Mono',monospace; font-size:6.5px; letter-spacing:.06em; }
|
|
.inv { background:#111111; color:#C9D2C4; padding:1px 4px; }
|
|
</style>
|
|
</helmet>
|
|
|
|
<div style="width:360px; height:735px; box-sizing:border-box; background:#E9E9E6; color:#111111;
|
|
font-family:'Space Grotesk',system-ui,sans-serif; padding:8px 8px 0; display:flex;
|
|
flex-direction:column; gap:8px;">
|
|
|
|
<!-- pickers -->
|
|
<div style="height:44px; display:flex; gap:8px; flex:0 0 auto;">
|
|
<div style="flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between;
|
|
background:#F5F5F2; border:2px solid #111111; box-shadow:3px 3px 0 #111111;
|
|
padding:0 10px; box-sizing:border-box;">
|
|
<span style="font-size:12px; font-weight:700; letter-spacing:.06em;">SAMPLE MODE</span>
|
|
<span style="font-size:9px; color:#6E6E69;">▼</span>
|
|
</div>
|
|
<div style="flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between;
|
|
background:#F5F5F2; border:2px solid #111111; box-shadow:3px 3px 0 #111111;
|
|
padding:0 10px; box-sizing:border-box;">
|
|
<span style="font-size:12px; font-weight:700; letter-spacing:.06em;">NO MODIFIER</span>
|
|
<span style="font-family:'Space Mono',monospace; font-size:10px; color:#FF4A00;">3</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- the unit -->
|
|
<div style="height:525px; flex:0 0 auto; background:#D2D2CE; border:2px solid #111111;
|
|
box-shadow:4px 4px 0 #111111; box-sizing:border-box; padding:8px;
|
|
display:flex; flex-direction:column;">
|
|
|
|
<!-- knobs -->
|
|
<div style="height:36px; display:flex; justify-content:space-between; align-items:center; padding:0 4px;">
|
|
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
|
|
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">VOLUME</div>
|
|
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
|
|
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 1</div>
|
|
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
|
|
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 2</div>
|
|
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
|
|
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 3</div>
|
|
</div>
|
|
|
|
<!-- fx + screen: circle shows only as caps above and below the display -->
|
|
<div style="height:124px; margin-top:8px; display:grid; grid-template-columns:62px minmax(0,1fr) 62px; gap:8px;">
|
|
<div style="display:flex; flex-direction:column; gap:5px;">
|
|
<div class="fxk">FILTER<br>+DRIVE</div>
|
|
<div class="fxk">RESONATOR</div>
|
|
<div class="fxk">DELAY</div>
|
|
</div>
|
|
|
|
<div style="position:relative; display:flex; align-items:center; justify-content:center;">
|
|
<div style="position:absolute; left:50%; top:0; width:124px; height:124px; margin-left:-62px;
|
|
border-radius:50%; background:#1B1B1B; border:2px solid #111111; box-sizing:border-box;"></div>
|
|
<div style="position:relative; width:168px; height:84px; background:#C9D2C4; border:2px solid #111111;
|
|
box-sizing:border-box; padding:4px 6px; display:flex; flex-direction:column;
|
|
justify-content:space-between; color:#111111;">
|
|
<div class="lcdrow"><span>MODE:SAMPLE</span><span>LAYER:—</span></div>
|
|
<div style="font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:700;
|
|
text-align:center; line-height:1;">3 functions</div>
|
|
<div class="lcdrow" style="gap:3px;">
|
|
<span class="inv">STOP×4</span><span class="inv">INFO</span><span class="inv">SKIPBACK</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:5px;">
|
|
<div class="fxk">ISOLATOR</div>
|
|
<div class="fxk">DJFX<br>LOOPER</div>
|
|
<div class="fxk">MFX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- control block, grouped as the hardware is silkscreened -->
|
|
<div style="height:134px; margin-top:10px; display:flex; flex-direction:column; gap:7px;">
|
|
|
|
<div class="grp">
|
|
<div class="col">
|
|
<div class="caprow"><span class="cap">PATTERN SEQUENCER</span><span class="rule"></span></div>
|
|
<div class="btnrow"><div class="k">PTN SEL</div><div class="k">PTN EDIT</div><div class="k">REC SET</div></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="caprow"><span class="cap">SAMPLE EDIT</span><span class="rule"></span></div>
|
|
<div class="btnrow">
|
|
<div class="k">START /END</div><div class="k">PITCH /SPEED</div><div class="k lit">SKIPBACK</div>
|
|
<div style="width:30px; flex:0 0 auto; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
|
|
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:6.5px;">VALUE</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grp">
|
|
<div class="col">
|
|
<div class="caprow"><span class="cap">SAMPLING</span><span class="rule"></span></div>
|
|
<div class="btnrow"><div class="k">DEL</div><div class="k">REC</div><div class="k">RE­SAMPLE</div></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="caprow"><span class="rule"></span></div>
|
|
<div class="btnrow">
|
|
<div class="k">BPM SYNC</div><div class="k">GATE</div><div class="k">LOOP</div>
|
|
<div class="k">RE­VERSE</div><div class="k">ROLL</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grp">
|
|
<div class="col">
|
|
<div class="caprow"><span class="rule"></span></div>
|
|
<div class="btnrow"><div class="k lit">STOP ×4</div><div class="k">COPY</div><div class="k lit">INFO</div></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="caprow"><span class="cap">BANK</span><span class="rule"></span></div>
|
|
<div class="btnrow">
|
|
<div class="k">A/F</div><div class="k">B/G</div><div class="k">C/H</div><div class="k">D/I</div><div class="k">E/J</div><div class="k">SHIFT</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- pads -->
|
|
<div style="height:187px; margin-top:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) .9fr;
|
|
grid-auto-rows:1fr; gap:5px;">
|
|
<div class="k pad"><span class="num">1</span></div>
|
|
<div class="k pad"><span class="num">2</span></div>
|
|
<div class="k pad"><span class="num">3</span></div>
|
|
<div class="k pad"><span class="num">4</span></div>
|
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">BUS FX</div>
|
|
<div class="k pad"><span class="num">5</span></div>
|
|
<div class="k pad"><span class="num">6</span></div>
|
|
<div class="k pad"><span class="num">7</span></div>
|
|
<div class="k pad"><span class="num">8</span></div>
|
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">HOLD</div>
|
|
<div class="k pad"><span class="num">9</span></div>
|
|
<div class="k pad"><span class="num">10</span></div>
|
|
<div class="k pad"><span class="num">11</span></div>
|
|
<div class="k pad"><span class="num">12</span></div>
|
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">EXT SOURCE</div>
|
|
<div class="k pad"><span class="num">13</span></div>
|
|
<div class="k pad"><span class="num">14</span></div>
|
|
<div class="k pad"><span class="num">15</span></div>
|
|
<div class="k pad"><span class="num">16</span></div>
|
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">SUB PAD</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- info -->
|
|
<div style="height:84px; flex:0 0 auto; background:#F5F5F2; border:2px solid #111111;
|
|
box-shadow:3px 3px 0 #111111; box-sizing:border-box; padding:7px 10px;
|
|
display:flex; flex-direction:column; gap:4px;">
|
|
<div style="display:flex; justify-content:space-between; align-items:baseline; gap:8px;">
|
|
<span style="font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.12em; color:#6E6E69;">TOP SCREEN, PADS ORANGE</span>
|
|
<span style="flex:0 0 auto; border:2px solid #111111; padding:2px 6px; font-size:9px; font-weight:700; letter-spacing:.06em;">LIST 3</span>
|
|
</div>
|
|
<div style="font-size:12.5px; line-height:1.3; text-wrap:pretty;">
|
|
Hold a button to peek at its layer, tap it to lock, tap again to release. Tap a lit control to read it.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- tabs -->
|
|
<div style="height:50px; flex:0 0 auto; display:flex; border:2px solid #111111; background:#F5F5F2; box-sizing:border-box;">
|
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; background:#FF4A00;
|
|
color:#111111; font-size:11px; font-weight:700; letter-spacing:.08em;">EXPLORE</div>
|
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:2px solid #111111;
|
|
color:#6E6E69; font-size:11px; font-weight:500; letter-spacing:.08em;">DRILL</div>
|
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:2px solid #111111;
|
|
color:#6E6E69; font-size:11px; font-weight:500; letter-spacing:.08em;">FIND</div>
|
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:2px solid #111111;
|
|
color:#6E6E69; font-size:11px; font-weight:500; letter-spacing:.08em;">RULES</div>
|
|
</div>
|
|
</div>
|
|
</x-dc>
|
|
</body>
|
|
</html>
|