jawhng/404-Layers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
470ebf41dc1a4faf556a177ab8e2657b49027626
404-Layers/design/canvas/Current.dc.html
ncode 091bdc2a96 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>
2026-09-16 23:56:04 +03:00

157 lines
9.7 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=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@500;600;700&display=swap">
<style>
body { margin: 0; }
a { color: #ff7a1a; } a:hover { color: #ffa05c; }
.k { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
background:#3d4145; border:0; border-radius:6px; color:#c3c8cc;
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:8.5px; line-height:1.05;
letter-spacing:.02em; padding:3px 2px; box-sizing:border-box; }
.pad { background:#34383c; font-size:11px; }
.num { font-family:'Barlow',sans-serif; font-size:17px; font-weight:700; color:#7b8288; }
.target { background:#5a3a22; color:#ffe3cc; box-shadow:inset 0 0 0 1px #ff7a1a, 0 0 12px rgba(255,122,26,.22); }
.row { display:flex; gap:4px; flex:1; }
</style>
</helmet>
<div style="width:360px; height:735px; box-sizing:border-box; background:#151719; color:#e3e6e9;
font-family:'Barlow',system-ui,sans-serif; font-size:16px; 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:#1d2023; border:1px solid #30353a; border-radius:10px; padding:8px 12px;
box-sizing:border-box; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px;">
<span>Sample mode</span><span style="color:#8f979e; font-size:11px;">&#9660;</span>
</div>
<div style="flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between;
background:#1d2023; border:1px solid #30353a; border-radius:10px; padding:8px 12px;
box-sizing:border-box; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px;">
<span>No modifier</span><span style="color:#8f979e; font-size:11px;">&#9660;</span>
</div>
</div>
<div style="height:485px; flex:0 0 auto; background:#26292c; border-radius:16px; box-sizing:border-box;
padding:8px; display:flex; flex-direction:column; gap:7px;">
<div style="height:36px; display:flex; justify-content:space-between; align-items:center; padding:0 6px;">
<div style="width:36px; height:36px; border-radius:50%; background:#1b1d1f; box-shadow:inset 0 0 0 3px #34383b;
display:flex; align-items:center; justify-content:center; color:#c3c8cc;
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:8px;">VOLUME</div>
<div style="width:36px; height:36px; border-radius:50%; background:#1b1d1f; box-shadow:inset 0 0 0 3px #34383b;
display:flex; align-items:center; justify-content:center; color:#c3c8cc;
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:8px;">CTRL 1</div>
<div style="width:36px; height:36px; border-radius:50%; background:#1b1d1f; box-shadow:inset 0 0 0 3px #34383b;
display:flex; align-items:center; justify-content:center; color:#c3c8cc;
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:8px;">CTRL 2</div>
<div style="width:36px; height:36px; border-radius:50%; background:#1b1d1f; box-shadow:inset 0 0 0 3px #34383b;
display:flex; align-items:center; justify-content:center; color:#c3c8cc;
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:8px;">CTRL 3</div>
</div>
<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" style="border-radius:14px;">FILTER +DRIVE</div>
<div class="k" style="border-radius:14px;">RESONATOR</div>
<div class="k" style="border-radius:14px;">DELAY</div>
</div>
<div style="background:#06080a; border-radius:50%/42%; color:#e4eef2;
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; padding:6px 10px; box-sizing:border-box; font-family:'Barlow Condensed',sans-serif;">
<div style="font-size:11px; opacity:.7; letter-spacing:.06em;">SAMPLE MODE</div>
<div style="font-size:19px; font-weight:700; line-height:1.05; margin:2px 0;">&#8212;</div>
<div style="font-size:11px; opacity:.75;">3 functions here</div>
</div>
<div style="display:flex; flex-direction:column; gap:5px;">
<div class="k" style="border-radius:14px;">ISOLATOR</div>
<div class="k" style="border-radius:14px;">DJFX LOOPER</div>
<div class="k" style="border-radius:14px;">MFX</div>
</div>
</div>
<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 target">STOP &#215;4</div><div class="k">COPY</div><div class="k target">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 target">SKIPBACK</div>
<div style="width:32px; flex:0 0 auto; border-radius:50%; background:#1b1d1f; box-shadow:inset 0 0 0 3px #34383b;
display:flex; align-items:center; justify-content:center; color:#c3c8cc;
font-family:'Barlow Condensed',sans-serif; font-weight:600; 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" style="font-size:8px;">A/F</div><div class="k" style="font-size:8px;">B/G</div>
<div class="k" style="font-size:8px;">C/H</div><div class="k" style="font-size:8px;">D/I</div>
<div class="k" style="font-size:8px;">E/J</div><div class="k" style="font-size:8px;">SHIFT</div>
</div>
</div>
</div>
<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 pad" style="font-size:10px;">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="font-size:10px;">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="font-size:10px;">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="font-size:10px;">SUB PAD</div>
</div>
</div>
<div style="height:116px; flex:0 0 auto; background:#1d2023; border-radius:10px; box-sizing:border-box;
padding:10px 12px; display:flex; flex-direction:column; gap:4px;">
<div style="display:flex; justify-content:space-between; align-items:flex-start; gap:8px;">
<span style="color:#8f979e; font-size:15px;">Top screen, pads orange.</span>
<span style="flex:0 0 auto; border-radius:8px; box-shadow:inset 0 0 0 1px #30353a; padding:5px 12px;
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:15px;">List 3</span>
</div>
<div style="font-size:15px; line-height:1.45;">
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:58px; flex:0 0 auto; display:flex; background:#1f2225; border-top:1px solid #30353a; box-sizing:border-box;">
<div style="flex:1; position:relative; display:flex; align-items:center; justify-content:center;
color:#e3e6e9; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px;">
<span style="position:absolute; top:0; left:30%; right:30%; height:3px; background:#ff7a1a; border-radius:0 0 3px 3px;"></span>
Explore
</div>
<div style="flex:1; display:flex; align-items:center; justify-content:center; color:#8f979e;
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px;">Drill</div>
<div style="flex:1; display:flex; align-items:center; justify-content:center; color:#8f979e;
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px;">Find</div>
<div style="flex:1; display:flex; align-items:center; justify-content:center; color:#8f979e;
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px;">Rules</div>
</div>
</div>
</x-dc>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink