jawhng/404-Layers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
4961500fa756f9baac76a1d7ed8650efa031ca44
404-Layers/design/canvas/DarkExplore.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

193 lines
11 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: #FF7A45; }
/* 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:#3E3E3A; border:2px solid #000000; border-radius:3px; color:#EDEDEB; 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:#0E0E0C; border:2px solid #000000; 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:#0E0E0C; border:2px solid #000000; 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:#8A8A85; white-space:nowrap; }
.rule { flex:1; height:1px; background:#4A4A46; }
.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:#1A1A17; color:#EDEDEB;
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:#2E2E2A; border:2px solid #000000; box-shadow:3px 3px 0 #000000;
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:#8A8A85;">&#9660;</span>
</div>
<div style="flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between;
background:#2E2E2A; border:2px solid #000000; box-shadow:3px 3px 0 #000000;
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>
<div style="height:525px; flex:0 0 auto; background:#2E2E2A; border:2px solid #000000;
box-shadow:5px 5px 0 #000000; 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 #000000; background:#0E0E0C;
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 #000000; background:#0E0E0C;
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 #000000; background:#0E0E0C;
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 #000000; background:#0E0E0C;
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:#0E0E0C; border:2px solid #000000; box-sizing:border-box;"></div>
<div style="position:relative; width:168px; height:84px; background:#C9D2C4; border:2px solid #000000;
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:&#8212;</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&#215;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>
<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 #000000; background:#0E0E0C;
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 lit">STOP &#215;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>
<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>
<div style="height:84px; flex:0 0 auto; background:#2E2E2A; border:2px solid #000000;
box-shadow:3px 3px 0 #000000; 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:#8A8A85;">TOP SCREEN, PADS ORANGE</span>
<span style="flex:0 0 auto; border:2px solid #000000; background:#3E3E3A; 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; color:#E4E4E0;">
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>
<div style="height:50px; flex:0 0 auto; display:flex; border:2px solid #000000; background:#2E2E2A; 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 #000000;
color:#8A8A85; 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 #000000;
color:#8A8A85; 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 #000000;
color:#8A8A85; 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