jawhng/404-Layers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
ae142cdf52f042bebeddf7dd9f9b17b64d347a6a
404-Layers/design/canvas/ManualDrill.dc.html
ncode ae142cdf52 Design canvas, second pass: direction A settled, drawn from the hardware 
Feedback: direction A (light manual) is right; the control block reads
as busy; the screen should match the real assembly; the dark option was
flat because it had no shadows.

Screen — the hardware's actual arrangement: a black circular housing
with a small rectangular positive LCD inset (dark text on pale
grey-green), status line top and bottom, replacing the ellipse with
floating text.

Control block — grouped as the device is silkscreened (PATTERN
SEQUENCER, SAMPLING, SAMPLE EDIT, BANK), each group a hairline bracket
caption over its row, with 10px between the two blocks and 7px between
groups instead of three undifferentiated rows.

FX buttons are now dark with orange text, as on the unit.

Dark mode replaces Blueprint: A's counterpart with filled bodies and
hard black offset shadows, the panel lighter than the ground so the
shadows read. Blueprint and the current app move to an 'Earlier' page.

Room came from trimming the info card 116->88 and the tab bar 58->54,
so the panel grows 485->517 and pad rows stay at exactly 44px:
  8 + 44 + 8 + 517 + 8 + 88 + 8 + 54 = 735
  8 + 38 + 8 + 104 + 10 + 140 + 10 + 191 + 8 = 517

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

196 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.05; letter-spacing:.03em; padding:2px 1px; box-sizing:border-box; font-weight:500; }
.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:34px; display:flex; gap:5px; }
.grp { height:42px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:10px; }
.col { display:flex; flex-direction:column; }
.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:517px; 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:38px; display:flex; justify-content:space-between; align-items:center; padding:0 4px;">
<div style="width:36px; height:36px; 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:36px; height:36px; 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:36px; height:36px; 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:36px; height:36px; 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:104px; 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="display:flex; align-items:center; justify-content:center;">
<div style="width:104px; height:104px; border-radius:50%; background:#1B1B1B; border:2px solid #111111;
display:flex; align-items:center; justify-content:center; box-sizing:border-box;">
<div style="width:76px; height:48px; background:#C9D2C4; border:1px solid #111111; box-sizing:border-box;
padding:3px 5px; display:flex; flex-direction:column; justify-content:space-between;
font-family:'Space Mono',monospace; color:#111111;">
<div style="font-size:5.5px; letter-spacing:.08em; display:flex; justify-content:space-between;">
<span>SAMPLE</span><span>P.24</span>
</div>
<div style="font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700; text-align:center; line-height:1.05;">Fixed<br>velocity</div>
<div style="font-size:5.5px; letter-spacing:.08em; text-align:center; background:#111111; color:#C9D2C4;">CORRECT</div>
</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:140px; 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">RESAMPLE</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">REVERSE</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">REMAIN</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:191px; 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:88px; 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:54px; 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