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

191 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; }
.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: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:#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