VARASYS/metronome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Bigger display + legend text; switch play/stop from Space to P (Space conflicted with focused controls)

Browse source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Me Here 2026-05-25 07:39:21 -05:00
parent 333477afdb
commit 1be6920827
1 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
index.html
View file

@ -46,7 +46,7 @@
} }
h1 { font-size:18px; font-weight:600; letter-spacing:.5px; margin:0 0 2px; } h1 { font-size:18px; font-weight:600; letter-spacing:.5px; margin:0 0 2px; }
.sub { color:var(--muted); font-size:12px; margin-bottom:18px; } .sub { color:var(--muted); font-size:12px; margin-bottom:18px; }
.kbd-legend { color:var(--muted); font-size:11px; font-family:"Courier New",monospace; text-align:right; } .kbd-legend { color:var(--muted); font-size:13px; font-family:"Courier New",monospace; text-align:right; }
#app { display:flex; gap:18px; max-width:1400px; margin:0 auto; align-items:flex-start; justify-content:center; } #app { display:flex; gap:18px; max-width:1400px; margin:0 auto; align-items:flex-start; justify-content:center; }
.device { flex:1 1 auto; min-width:0; max-width:1000px; background:linear-gradient(180deg, var(--panel), var(--bg)); .device { flex:1 1 auto; min-width:0; max-width:1000px; background:linear-gradient(180deg, var(--panel), var(--bg));
border:1px solid var(--edge); border-radius:16px; padding:18px; box-shadow:0 18px 50px rgba(0,0,0,.5); } border:1px solid var(--edge); border-radius:16px; padding:18px; box-shadow:0 18px 50px rgba(0,0,0,.5); }
@ -54,10 +54,10 @@
.card { background:var(--panel-2); border:1px solid var(--edge); border-radius:12px; padding:13px; flex:1; min-width:240px; } .card { background:var(--panel-2); border:1px solid var(--edge); border-radius:12px; padding:13px; flex:1; min-width:240px; }
.card h2 { font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin:0 0 14px; } .card h2 { font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin:0 0 14px; }
.display { background:#0a0d11; border:1px solid #000; border-radius:8px; padding:8px 14px; text-align:center; box-shadow:inset 0 2px 10px rgba(0,0,0,.7); } .display { background:#0a0d11; border:1px solid #000; border-radius:8px; padding:8px 14px; text-align:center; box-shadow:inset 0 2px 10px rgba(0,0,0,.7); }
.display .big { font-family:"Courier New",monospace; font-weight:700; font-size:40px; color:#ffd166; letter-spacing:3px; text-shadow:0 0 12px rgba(255,209,102,.5); } .display .big { font-family:"Courier New",monospace; font-weight:700; font-size:58px; color:#ffd166; letter-spacing:2px; line-height:1.05; text-shadow:0 0 12px rgba(255,209,102,.5); }
.display .dtimers { font-family:"Courier New",monospace; font-size:13px; color:#4dd0e1; margin:3px 0; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .display .dtimers { font-family:"Courier New",monospace; font-size:18px; color:#4dd0e1; margin:4px 0; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.display .dtimers[hidden] { display:none; } .display .dtimers[hidden] { display:none; }
.display .ctx { font-family:"Courier New",monospace; font-size:12px; color:#4dd0e1; min-height:15px; line-height:1.3; } .display .ctx { font-family:"Courier New",monospace; font-size:15px; color:#4dd0e1; min-height:18px; line-height:1.3; }
.display .ctx.muted-cue { color:#ffb454; } .display .ctx.muted-cue { color:#ffb454; }
.knob { margin-bottom:10px; } .knob { margin-bottom:10px; }
.knob label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; } .knob label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; }
@ -180,7 +180,7 @@
<div class="row" style="align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:12px"> <div class="row" style="align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:12px">
<h1 style="margin:0">Stackable Metronome <span class="lane-meta" id="appVersion" title="build version">v0.0.1-dev</span></h1> <h1 style="margin:0">Stackable Metronome <span class="lane-meta" id="appVersion" title="build version">v0.0.1-dev</span></h1>
<div style="display:flex; align-items:center; gap:10px"> <div style="display:flex; align-items:center; gap:10px">
<span class="kbd-legend">Space play · T tap · ↑↓ tempo (⇧×10) · A add · N next · ? help</span> <span class="kbd-legend">P play · T tap · ↑↓ tempo (⇧×10) · A add · N next · ? help</span>
<button id="themeBtn" title="toggle light / dark theme">☀</button> <button id="themeBtn" title="toggle light / dark theme">☀</button>
<button id="helpBtn" title="keyboard shortcuts (?)">?</button> <button id="helpBtn" title="keyboard shortcuts (?)">?</button>
</div> </div>
@ -190,7 +190,7 @@
<div class="row"> <div class="row">
<div class="card" style="flex:1"> <div class="card" style="flex:1">
<div class="row" style="gap:22px; align-items:flex-start"> <div class="row" style="gap:22px; align-items:flex-start">
<div style="flex:0 0 190px; min-width:170px"> <div style="flex:0 0 212px; min-width:190px">
<div class="display"> <div class="display">
<div class="big" id="bpmDisplay">120</div> <div class="big" id="bpmDisplay">120</div>
<div class="dtimers" id="dtimers"> <div class="dtimers" id="dtimers">
@ -302,7 +302,7 @@
<div class="overlay-box"> <div class="overlay-box">
<div class="tray-head"><h2 style="margin:0">Keyboard shortcuts</h2><button class="x" id="shortcutsClose" style="margin-left:0">✕</button></div> <div class="tray-head"><h2 style="margin:0">Keyboard shortcuts</h2><button class="x" id="shortcutsClose" style="margin-left:0">✕</button></div>
<table class="kbd-table"> <table class="kbd-table">
<tr><td><kbd>Space</kbd></td><td>Start / stop</td></tr> <tr><td><kbd>P</kbd></td><td>Play / stop</td></tr>
<tr><td><kbd>T</kbd></td><td>Tap tempo</td></tr> <tr><td><kbd>T</kbd></td><td>Tap tempo</td></tr>
<tr><td><kbd>↑</kbd> <kbd>↓</kbd></td><td>Tempo ±1 BPM</td></tr> <tr><td><kbd>↑</kbd> <kbd>↓</kbd></td><td>Tempo ±1 BPM</td></tr>
<tr><td><kbd>⇧↑</kbd> <kbd>⇧↓</kbd></td><td>Tempo ±10 BPM</td></tr> <tr><td><kbd>⇧↑</kbd> <kbd>⇧↓</kbd></td><td>Tempo ±10 BPM</td></tr>
@ -1128,7 +1128,7 @@ window.addEventListener("keydown", (e) => {
const k = e.key; const k = e.key;
if (e.altKey && (k === "ArrowUp" || k === "ArrowDown")) { e.preventDefault(); moveActiveItem(k === "ArrowUp" ? -1 : 1); return; } // reorder selected item if (e.altKey && (k === "ArrowUp" || k === "ArrowDown")) { e.preventDefault(); moveActiveItem(k === "ArrowUp" ? -1 : 1); return; } // reorder selected item
if (e.metaKey || e.ctrlKey || e.altKey) return; if (e.metaKey || e.ctrlKey || e.altKey) return;
if (e.code === "Space") { e.preventDefault(); toggleTransport(); } if (k === "p" || k === "P") { e.preventDefault(); toggleTransport(); }
else if (k === "t" || k === "T") { tapTempo(); } else if (k === "t" || k === "T") { tapTempo(); }
else if (k === "ArrowUp") { e.preventDefault(); setBpm(state.bpm + (e.shiftKey ? 10 : 1)); } else if (k === "ArrowUp") { e.preventDefault(); setBpm(state.bpm + (e.shiftKey ? 10 : 1)); }
else if (k === "ArrowDown") { e.preventDefault(); setBpm(state.bpm - (e.shiftKey ? 10 : 1)); } else if (k === "ArrowDown") { e.preventDefault(); setBpm(state.bpm - (e.shiftKey ? 10 : 1)); }