jawhng/404-Layers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
12a86fb5db9395619e20e00455bff3d7335853c6
404-Layers/design/canvas/ManualDrill.dc.html
ncode 12a86fb5db Design canvas, third pass: usable screen, fix label overflow 
RESAMPLE was overflowing its button and REMAIN was touching its
borders. Both lack a space, so unlike PTN EDIT or BPM SYNC they cannot
wrap. Restored the soft hyphens the reference already uses
(RE-SAMPLE, RE-MAIN, RE-VERSE) plus hyphens:manual on the key style.

The screen was faithful to the object but too small for the job it does
here. The circle no longer encloses the display: a 124px circle sits
behind a 168x84 LCD, so it reads as two 20px caps above and below with
no ring around the rectangle. Area goes up 2.4x, enough for the display
to name the layer and list what is on it, or show the card and verdict
when drilling.

Room came from the control rows (-6), knobs (-2), info card (-4) and
tab bar (-4):
  8 + 44 + 8 + 525 + 8 + 84 + 8 + 50 = 735
  8 + 36 + 8 + 124 + 10 + 134 + 10 + 187 + 8 = 525
Pad rows are 43px.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-17 00:15:45 +03:00

203 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; }
.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:8px;
line-height:1.02; letter-spacing:.03em; padding:2px 2px; box-sizing:border-box; font-weight:500;
hyphens:manual; overflow-wrap:break-word; }
.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