Add design canvas: two TE-inspired directions before the React port
Design inspiration is the Teenage Engineering EP-133 manual: flat fills, heavy outlines, hard zero-blur offset shadows, one orange accent, uppercase technical type, monospaced numerals. Six artboards drawn at the real measured 360x735 with the actual vertical budget (44px pickers, 485px panel, 116px info, 58px tabs), so a mockup cannot fit in a way the device won't: - Current the app as it stands, for comparison - A Manual light ground, 2px black outlines, black pads - B Blueprint pure black, 1px white hairlines, no fills - Specimen type candidates and palette, incl. which orange Type is identical across both directions so the light/dark choice is not confounded with the font choice. Green/red drill feedback is replaced by orange fill vs dashed outline - neither exists in this palette. The seeded canvas payload is gitignored; these files are its source. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
161
design/canvas/Main.dc.html
Normal file
161
design/canvas/Main.dc.html
Normal file
@@ -0,0 +1,161 @@
|
||||
<!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; 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; }
|
||||
.pad { background:#1B1B1B; border:2px solid #111111; color:#EDEDEB; font-size:9px; }
|
||||
.num { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:#6E6E69; }
|
||||
.row { display:flex; gap:4px; flex:1; }
|
||||
</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;">
|
||||
|
||||
<!-- pickers -->
|
||||
<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;">SAMPLE MODE</span>
|
||||
<span style="font-size:9px; color:#6E6E69;">▼</span>
|
||||
</div>
|
||||
<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;">NO MODIFIER</span>
|
||||
<span style="font-family:'Space Mono',monospace; font-size:10px; color:#FF4A00;">3</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- the unit -->
|
||||
<div style="height:485px; 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; gap:7px;">
|
||||
|
||||
<!-- knobs -->
|
||||
<div style="height:36px; display:flex; justify-content:space-between; align-items:center; padding:0 2px;">
|
||||
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#F5F5F2;
|
||||
display:flex; align-items:center; justify-content:center; font-size:7px; letter-spacing:.02em;">VOLUME</div>
|
||||
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#F5F5F2;
|
||||
display:flex; align-items:center; justify-content:center; font-size:7px; letter-spacing:.02em;">CTRL 1</div>
|
||||
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#F5F5F2;
|
||||
display:flex; align-items:center; justify-content:center; font-size:7px; letter-spacing:.02em;">CTRL 2</div>
|
||||
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#F5F5F2;
|
||||
display:flex; align-items:center; justify-content:center; font-size:7px; letter-spacing:.02em;">CTRL 3</div>
|
||||
</div>
|
||||
|
||||
<!-- fx + screen -->
|
||||
<div style="height:100px; display:grid; grid-template-columns:64px 1fr 64px; gap:6px;">
|
||||
<div style="display:flex; flex-direction:column; gap:5px;">
|
||||
<div class="k">FILTER +DRIVE</div>
|
||||
<div class="k">RESONATOR</div>
|
||||
<div class="k">DELAY</div>
|
||||
</div>
|
||||
<div style="background:#111111; border:2px solid #111111; border-radius:50%/42%; color:#EDEDEB;
|
||||
display:flex; flex-direction:column; align-items:center; justify-content:center;
|
||||
text-align:center; padding:6px 10px; box-sizing:border-box;">
|
||||
<div style="font-family:'Space Mono',monospace; font-size:8px; letter-spacing:.14em; color:#8A8A85;">SAMPLE MODE</div>
|
||||
<div style="font-size:20px; font-weight:700; line-height:1.1; margin:2px 0;">—</div>
|
||||
<div style="font-size:9px; color:#BDBDB8;">3 functions here</div>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; gap:5px;">
|
||||
<div class="k">ISOLATOR</div>
|
||||
<div class="k">DJFX LOOPER</div>
|
||||
<div class="k">MFX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- control block -->
|
||||
<div style="height:118px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:6px;">
|
||||
<div style="display:flex; flex-direction:column; gap:5px;">
|
||||
<div class="row"><div class="k">PTN SEL</div><div class="k">PTN EDIT</div><div class="k">REC SET</div></div>
|
||||
<div class="row"><div class="k">DEL</div><div class="k">REC</div><div class="k">RESAMPLE</div></div>
|
||||
<div class="row"><div class="k lit">STOP ×4</div><div class="k">COPY</div><div class="k lit">INFO</div></div>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; gap:5px;">
|
||||
<div class="row">
|
||||
<div class="k">START /END</div><div class="k">PITCH /SPEED</div><div class="k lit">SKIPBACK</div>
|
||||
<div style="width:32px; flex:0 0 auto; border-radius:50%; border:2px solid #111111; background:#F5F5F2;
|
||||
display:flex; align-items:center; justify-content:center; font-size:7px;">VALUE</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<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 class="row">
|
||||
<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>
|
||||
|
||||
<!-- pads -->
|
||||
<div style="height:194px; display:grid; grid-template-columns:repeat(4,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">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">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">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">SUB PAD</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- info -->
|
||||
<div style="height:116px; flex:0 0 auto; background:#F5F5F2; border:2px solid #111111;
|
||||
box-shadow:3px 3px 0 #111111; box-sizing:border-box; padding:8px 10px;
|
||||
display:flex; flex-direction:column; gap:4px;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:baseline;">
|
||||
<span style="font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.12em; color:#6E6E69;">TOP SCREEN, PADS ORANGE</span>
|
||||
<span style="border:2px solid #111111; padding:2px 6px; font-size:9px; font-weight:700; letter-spacing:.06em;">LIST 3</span>
|
||||
</div>
|
||||
<div style="font-size:13px; line-height:1.3; text-wrap:pretty;">
|
||||
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 style="margin-top:auto; display:flex; gap:6px; align-items:center;">
|
||||
<span style="font-family:'Space Mono',monospace; font-size:9px; color:#6E6E69; letter-spacing:.1em;">LAYER</span>
|
||||
<span style="height:2px; flex:1; background:#111111;"></span>
|
||||
<span style="font-family:'Space Mono',monospace; font-size:9px; color:#FF4A00; letter-spacing:.1em;">3 FUNCTIONS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- tabs -->
|
||||
<div style="height:58px; 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; 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 #111111;
|
||||
color:#6E6E69; 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 #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
Block a user