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

Proper VARASYS logo (wordmark + tagline) everywhere; embed defaults to the set lists

Browse source 
Logos: the brand is now a consistent lockup — wordmark image + a crisp CSS
"Simplifying Complexity" tagline — in the shared header, device silkscreens
(teacher/stage/micro), the player (was a CSS text box) and the showcase canvas
(was drawn text; now the real logo image + tagline). Cropped the baked tagline
out of logo-light.b64 so both themes render the tagline once. Renamed device
silk logos to .dev-logo so they no longer shrink the shared header logo.

Embeds: every form factor now loads its default set lists when embedded with no
config — and the Concepts landing embeds them that way (viewport loads
<device>?embed=1 with no forced #p=; the program box reflects what the device
reports and only overrides on explicit Load).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Me Here 2026-05-28 12:48:44 -05:00
parent 18eed37d97
commit dc936fdc11
9 changed files with 36 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/logo-light.b64
View file

File diff suppressed because one or more lines are too long

8
index.html
View file

@ -158,8 +158,8 @@ function renderPanes() {
</div>`).join("");
$("panes").querySelectorAll(".pane").forEach((el) => {
const k = el.dataset.key;
el.addEventListener("click", () => loadVersion(k, (box.value || "").trim() || DEFAULT_PROG));
el.addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); loadVersion(k, (box.value || "").trim() || DEFAULT_PROG); } });
el.addEventListener("click", () => loadVersion(k));
el.addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); loadVersion(k); } });
});
}
function loadVersion(key, prog) {
@ -211,8 +211,8 @@ addEventListener("message", (e) => {
});
renderPanes();
box.value = DEFAULT_PROG;
loadVersion("editor", DEFAULT_PROG);
// default = each device's built-in set lists (no forced program); the box fills from what the device reports
loadVersion("editor");
/*@BUILD:include:src/chrome.js@*/
</script>
</body>

4
micro.html
View file

@ -82,7 +82,7 @@
linear-gradient(180deg, #2b2d33, #161719); /* matte anodised graphite */
box-shadow:0 24px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -2px 8px rgba(0,0,0,.5) }
.brandrow{ display:flex; align-items:center; justify-content:space-between; margin:0 }
.brand-logo{ height:13px; width:auto; display:block }
.dev-logo{ height:13px }
.silk{ display:flex; align-items:center; gap:7px; color:var(--silk) }
.silk .model{ font-size:8.5px; text-transform:uppercase; letter-spacing:.16em; opacity:.85 }
.meta{ display:flex; align-items:center; gap:12px }
@ -140,7 +140,7 @@
<!-- TOP FACE: display + roller + speaker -->
<div class="face">
<div class="brandrow">
<div class="silk"><img class="brand-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="model">PM_P‑1 Practice</span></div>
<div class="silk"><span class="dev-lock"><img class="dev-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="dev-tag">Simplifying Complexity</span></span><span class="model">PM_P‑1 Practice</span></div>
<div class="meta">
<div class="pwr" title="Powered over USB‑C — wall adapter or power bank"><span class="dot"></span>USB‑C&nbsp;PWR</div>
</div>

8
player.html
View file

@ -83,9 +83,9 @@
.screw.bl{ bottom:11px; left:11px } .screw.br{ bottom:11px; right:11px }
.brandrow{ display:flex; align-items:center; justify-content:space-between; margin:2px 6px 16px; }
.logo{ display:flex; align-items:baseline; gap:9px }
.logo .vk{ font-weight:800; letter-spacing:.22em; color:#fff; font-size:17px;
background:var(--cyan); padding:2px 8px; border-radius:4px; box-shadow:0 0 10px rgba(10,179,247,.5) }
.logo{ display:flex; align-items:center; gap:11px }
.logo .dev-logo{ height:19px }
.logo .dev-tag{ color:var(--dmuted) }
.logo .model{ color:var(--dmuted); font-size:12px; letter-spacing:.04em }
.pwr{ display:flex; align-items:center; gap:7px; font-size:10px; color:var(--dmuted); text-transform:uppercase; letter-spacing:.12em }
.pwr .dot{ width:8px; height:8px; border-radius:50%; background:#2fe07a; box-shadow:0 0 8px #2fe07a }
@ -222,7 +222,7 @@
<span class="screw bl"></span><span class="screw br"></span>
<div class="brandrow">
<div class="logo"><span class="vk">VARASYS</span><span class="model">PM_C‑1 · Concept</span></div>
<div class="logo"><span class="dev-lock"><img class="dev-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="dev-tag">Simplifying Complexity</span></span><span class="model">PM_C‑1 · Concept</span></div>
<div class="pwr"><span class="dot"></span>PWR</div>
</div>

13
showcase.html
View file

@ -214,6 +214,7 @@ const F_FAST=0.30, F_SLOW=0.94; // weight fraction along rod
let beatCount=-1, lastBeatTime=0, pend=0, flash=0, flashAccent=false;
function audioLatency(){ return audioCtx ? (audioCtx.outputLatency || audioCtx.baseLatency || 0) : 0; }
const LEVELCOL = { 2:[255,155,46], 1:[51,208,255], 3:[155,123,255], 0:[70,80,95] }; // accent / normal / ghost / mute (rgb)
const LOGO = new Image(); let logoReady=false; LOGO.onload=function(){ logoReady=true; }; LOGO.src = "data:image/png;base64,@BUILD:logo-dark@";
function bpmToFrac(b){ return F_SLOW - (Math.max(40,Math.min(240,b))-40)/200*(F_SLOW-F_FAST); }
function fracToBpm(f){ return Math.round(240 - (Math.max(F_FAST,Math.min(F_SLOW,f))-F_FAST)/(F_SLOW-F_FAST)*200); }
@ -225,9 +226,15 @@ function drawBody(){
g.beginPath(); g.moveTo(tlx,topY); g.lineTo(trx,topY); g.lineTo(brx,botY); g.lineTo(blx,botY); g.closePath();
g.fillStyle=grd; g.fill(); g.lineWidth=1.5; g.strokeStyle="rgba(255,255,255,.06)"; g.stroke();
g.beginPath(); g.moveTo(tlx,topY); g.lineTo(blx,botY); g.lineWidth=2; g.strokeStyle="rgba(255,255,255,.05)"; g.stroke();
g.textAlign="center"; g.fillStyle="#aab2bc";
g.font="700 9px 'Segoe UI',Roboto,Arial,sans-serif"; g.fillText("V A R A S Y S", CW/2, 33);
g.globalAlpha=.8; g.font="600 7.5px 'Segoe UI',Roboto,Arial,sans-serif"; g.fillText("PM_D‑1 DISPLAY", CW/2, 44); g.globalAlpha=1;
// proper VARASYS logo (wordmark image) + tagline + model
const lw=60, lh=Math.round(lw*82/304), lx=CW/2-lw/2, ly=15;
if(logoReady) g.drawImage(LOGO, lx, ly, lw, lh);
g.textAlign="center";
g.fillStyle="#8f9aa6"; g.font="600 5px 'Segoe UI',Roboto,Arial,sans-serif"; g.globalAlpha=.85;
try{ g.letterSpacing="1.4px"; }catch(e){}
g.fillText("SIMPLIFYING COMPLEXITY", CW/2, ly+lh+7);
try{ g.letterSpacing="0px"; }catch(e){} g.globalAlpha=1;
g.fillStyle="#aab2bc"; g.font="600 7px 'Segoe UI',Roboto,Arial,sans-serif"; g.fillText("PM_D‑1 DISPLAY", CW/2, ly+lh+17);
}
function drawPendulum(){

12
src/base.css
View file

@ -11,12 +11,18 @@ body {
-webkit-font-smoothing: antialiased;
}
/* ---- VARASYS site header (shared across every page) ---- */
.brand { display:inline-flex; align-items:center; flex:0 0 auto; }
.brand-logo { height:30px; width:auto; display:block; }
/* ---- VARASYS brand lockup: wordmark + "Simplifying Complexity" tagline beneath ---- */
.brand { display:inline-flex; flex-direction:column; align-items:stretch; flex:0 0 auto; gap:2px; text-decoration:none; }
.brand-logo { height:28px; width:auto; display:block; }
.brand-light { display:none; }
:root[data-theme="light"] .brand-dark { display:none; }
:root[data-theme="light"] .brand-light { display:block; }
.brand-tag { font-size:7px; line-height:1; letter-spacing:.26em; text-transform:uppercase; text-align:center;
color:var(--muted,#7f8b9a); white-space:nowrap; }
/* on-device silkscreen brand lockup (wordmark image + tagline) — used in device brandrows */
.dev-lock { display:inline-flex; flex-direction:column; align-items:stretch; gap:1px; }
.dev-logo { display:block; width:auto; height:14px; }
.dev-tag { font-size:5px; line-height:1; letter-spacing:.16em; text-transform:uppercase; text-align:center; opacity:.8; white-space:nowrap; }
.site-head { width:100%; max-width:980px; margin:0 auto; display:flex; align-items:center;
justify-content:space-between; gap:10px 16px; flex-wrap:wrap; }
.head-left { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

3
src/header.html
View file

@ -1,9 +1,10 @@
<!-- Shared site header — assembled into every page by build.sh.
Brand goes to Concepts (the landing); nav: Concepts / Editor / Embed / Theme. -->
<header class="site-head">
<a class="brand" href="/" title="VARASYS PolyMeter — Concepts (home)">
<a class="brand" href="/" title="VARASYS — Simplifying Complexity">
<img class="brand-logo brand-dark" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS — Simplifying Complexity" />
<img class="brand-logo brand-light" src="data:image/png;base64,@BUILD:logo-light@" alt="VARASYS — Simplifying Complexity" />
<span class="brand-tag">Simplifying Complexity</span>
</a>
<nav class="site-nav">
<a href="/">Concepts</a>

4
stage.html
View file

@ -59,7 +59,7 @@
.jk b{ font-size:6.5px; font-weight:700; color:var(--silk); letter-spacing:.03em; text-transform:uppercase; opacity:.9; text-align:center; line-height:1.2 }
.brandrow{ display:flex; align-items:center; justify-content:space-between; margin:13px 16px 10px }
.brand-logo{ height:13px; width:auto; display:block }
.dev-logo{ height:13px }
.silk{ display:flex; align-items:center; gap:7px; color:var(--silk) }
.silk .model{ font-size:8.5px; text-transform:uppercase; letter-spacing:.16em; opacity:.85 }
.pwr{ display:flex; align-items:center; gap:5px; font-size:7.5px; color:var(--silk); text-transform:uppercase; letter-spacing:.12em; opacity:.85 }
@ -126,7 +126,7 @@
</div>
<div class="brandrow">
<div class="silk"><img class="brand-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="model">PM_S‑1 Stage</span></div>
<div class="silk"><span class="dev-lock"><img class="dev-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="dev-tag">Simplifying Complexity</span></span><span class="model">PM_S‑1 Stage</span></div>
<div class="pwr"><span class="dot"></span>USB‑C&nbsp;PWR</div>
</div>

4
teacher.html
View file

@ -89,7 +89,7 @@
}
.brandrow{ display:flex; align-items:flex-end; justify-content:space-between; margin:0 2px 12px; }
.silk{ display:flex; align-items:center; gap:8px; color:var(--silk); letter-spacing:.04em }
.brand-logo{ height:16px; width:auto; display:block }
.dev-logo{ height:16px }
.silk .model{ font-size:10px; text-transform:uppercase; letter-spacing:.18em; opacity:.8 }
.pwr{ display:flex; align-items:center; gap:6px; font-size:9px; color:var(--silk); text-transform:uppercase; letter-spacing:.14em; opacity:.85 }
.pwr .dot{ width:7px; height:7px; border-radius:50%; background:#2fe07a; box-shadow:0 0 7px #2fe07a }
@ -231,7 +231,7 @@
<div class="device">
<div class="brandrow">
<div class="silk"><img class="brand-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="model">PM_T‑1 Teacher</span></div>
<div class="silk"><span class="dev-lock"><img class="dev-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="dev-tag">Simplifying Complexity</span></span><span class="model">PM_T‑1 Teacher</span></div>
<div class="pwr"><span class="dot"></span>PWR</div>
</div>