jawhng/404-Layers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
6889167fcfdfb14266b3c82e21b5fbf161a76c56
404-Layers/design/canvas/ManualDrill.dc.html
ncode e2e9fcddb5 Design canvas: fix key label fit; direction settled 
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>
2026-09-17 00:24:57 +03:00

205 lines
12 KiB
HTML
Raw Blame History

<!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 — see Main.dc.html for the measurement. */
.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; }
.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; }
.chip { font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.04em;
background:#111111; color:#EDEDEB; padding:2px 6px; }
</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;">
<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;">SHIFT + PADS</span>
<span style="font-size:9px; color:#6E6E69;">&#9660;</span>
</div>
<div style="flex:0 0 112px; display:flex; align-items:center; gap:8px;
background:#F5F5F2; border:2px solid #111111; box-shadow:3px 3px 0 #111111;
padding:0 10px; box-sizing:border-box;">
<span style="display:flex; align-items:flex-end; gap:2px; height:18px;">
<span style="width:6px; height:14px; background:#111111;"></span>
<span style="width:6px; height:9px; background:#111111;"></span>
<span style="width:6px; height:5px; background:#111111;"></span>
<span style="width:6px; height:3px; background:#111111;"></span>
<span style="width:6px; height:6px; background:#FF4A00;"></span>
</span>
<span style="font-family:'Space Mono',monospace; font-size:11px; font-weight:700;">4/16</span>
</div>
</div>
<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;">
<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>
<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>P.24</span></div>
<div style="font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700;
text-align:center; line-height:1;">Fixed velocity</div>
<div class="lcdrow" style="gap:3px;">
<span class="inv">CORRECT</span><span>SHIFT + PAD 1</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>
<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">MARK</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&shy;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&shy;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">EXIT</div><div class="k">COPY</div><div class="k">RE&shy;MAIN</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 lit">SHIFT</div>
</div>
</div>
</div>
</div>
<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 lit" style="border-radius:4px; font-size:10px;">FIX VEL</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>
<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:5px;">
<div style="display:flex; align-items:center; gap:6px;">
<span style="font-size:11px; font-weight:700; letter-spacing:.12em; color:#FF4A00;">CORRECT</span>
<span class="chip">SHIFT</span>
<span style="font-size:10px; color:#6E6E69;">+</span>
<span class="chip">PAD 1</span>
<span style="margin-left:auto; background:#111111; color:#EDEDEB; font-size:10px; font-weight:700;
letter-spacing:.08em; padding:6px 12px;">NEXT &#8594;</span>
</div>
<div style="font-size:12px; line-height:1.3; color:#3A3A36; text-wrap:pretty;">
Every hit plays at 127. Stored per sample; same combo turns it off.
</div>
</div>
<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;
color:#6E6E69; font-size:11px; font-weight:500; letter-spacing:.08em;">EXPLORE</div>
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:2px solid #111111;
background:#FF4A00; color:#111111; font-size:11px; font-weight:700; 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>
Reference in New Issue View Git Blame Copy Permalink