be00ebf097
- Concepts is now the landing (/): index.html is the form-factor gallery with the LIVE widget embedded in every box (editor/teacher/stage/micro/showcase/initial), on the shared header/footer. concepts.html retired; every "Concepts" link → /. - New shared chrome partials src/header.html, src/footer.html, src/chrome.js (assembled by build.sh) + .site-foot / details.spec styles in base.css. Applied to the landing + showcase this pass. - Showcase redesign per spec: the pendulum bar IS the display — each lane's subdivisions/accents ride along the rod as moving RGB light (all meters combined); transparent outside the body (no black window); a printed tempo scale on the vertical axis with a draggable weight to set tempo; start is an external button (the real unit starts when lifted from its holder). Next pass: roll the shared header/footer onto the remaining pages (incl. the editor header-above-toolbar), merge Open=Info into one page per form factor with the expandable Info & BOM, and add teacher-style dimensioned views to Stage/Micro/Showcase. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
99 lines
5.8 KiB
HTML
99 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>PE‑1 PolyMeter Editor — info — VARASYS</title>
|
||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,@BUILD:favicon@">
|
||
<script>
|
||
(function(){ try{ var p = localStorage.getItem("metronome.theme");
|
||
if (p!=="light" && p!=="dark" && p!=="system") p = "system";
|
||
document.documentElement.dataset.theme = p==="system" ? (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark") : p;
|
||
} catch(e){ document.documentElement.dataset.theme = "dark"; } })();
|
||
</script>
|
||
<style>
|
||
/*@BUILD:include:src/base.css@*/
|
||
:root{ --bg1:#12151c;--bg2:#05070a;--txt:#c7d0db;--muted:#7f8b9a;--link:#6cb6ff;--panel-bg:#161b22;--panel-bd:#2a313c;--field-bg:#0e1116; }
|
||
:root[data-theme="light"]{ --bg1:#f5f8fc;--bg2:#dde4ec;--txt:#1e2630;--muted:#5c6776;--link:#1769c4;--panel-bg:#fff;--panel-bd:#d2dae4;--field-bg:#f1f4f8; }
|
||
body{ margin:0; min-height:100vh; padding:22px 16px 56px; color:var(--txt); background:radial-gradient(circle at 50% -8%,var(--bg1),var(--bg2)); }
|
||
a{ color:var(--link); }
|
||
main{ width:100%; max-width:760px; margin:26px auto 0; }
|
||
h1{ font-size:24px; margin:0 0 4px; } h2{ font-size:16px; margin:28px 0 8px; }
|
||
p{ color:var(--muted); font-size:14px; line-height:1.6; } p.lead{ max-width:62ch; color:var(--txt); }
|
||
.tags{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 4px; }
|
||
.tag{ font-size:11px; color:var(--muted); border:1px solid var(--panel-bd); border-radius:999px; padding:2px 9px; }
|
||
.tag.app{ color:var(--cyan); border-color:rgba(10,179,247,.45); }
|
||
ul{ color:var(--muted); font-size:14px; line-height:1.7; padding-left:20px; } ul b{ color:var(--txt); }
|
||
.embed-wrap{ margin:16px 0 4px; }
|
||
.cap{ font-size:12px; color:var(--muted); }
|
||
.site-foot{ max-width:760px; margin:40px auto 0; font-size:12px; color:var(--muted); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="site-head">
|
||
<div class="head-left">
|
||
<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" />
|
||
</a>
|
||
<span class="page-name"><b>PE‑1</b> · PolyMeter Editor — info</span>
|
||
</div>
|
||
<nav class="site-nav">
|
||
<a href="/editor.html">Open ↗</a>
|
||
<a href="/">Concepts</a>
|
||
<a href="/embed.html">Embed</a>
|
||
<button id="themeBtn" class="tbtn" title="toggle light / dark theme">☀</button>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<h1>PE‑1 — PolyMeter Editor</h1>
|
||
<div class="tags"><span class="tag app">Web app</span><span class="tag">Free · no install</span><span class="tag">Open source</span></div>
|
||
<p class="lead">The full polymeter workbench, and the reference design for the whole PolyMeter family: build
|
||
grooves where each voice runs in its own meter and subdivision, audition them in the browser, and save the
|
||
result as a compact program string the hardware units play back verbatim.</p>
|
||
|
||
<div class="embed-wrap">
|
||
<div data-varasys-metronome="editor"
|
||
data-patch="v1;t120;b16;kick:4=X..x;snare:4=.X.X;hatClosed:4/4;tom:3" data-height="680"></div>
|
||
</div>
|
||
<p class="cap">Live widget (embedded). <a href="/editor.html">Open the full editor ↗</a> · <a href="/embed.html">embed this</a></p>
|
||
|
||
<h2>Designed for</h2>
|
||
<p>Anyone working in odd or layered meter — practising a 4‑over‑3, programming a polyrhythmic groove, or
|
||
sketching parts before a rehearsal. It's the authoring tool: everything the hardware devices play is
|
||
created here and shared as a program string or set‑list code.</p>
|
||
<ul>
|
||
<li><b>Per‑lane meter & subdivision</b> — each voice has its own beat count and subdivision, with a
|
||
pad grid for accents, ghosts, and mutes.</li>
|
||
<li><b>Drum & click voices</b> — synth and sampled sounds, swing, accent levels.</li>
|
||
<li><b>Trainer & ramp</b> — bar‑count automation, tempo ramps, and a countdown.</li>
|
||
<li><b>Program string</b> — the live patch is shown, editable, and copy/paste‑able; set‑lists encode to a
|
||
shareable code. This is the same string the <a href="/info-teacher.html">Teacher</a> and
|
||
<a href="/info-micro.html">Micro</a> units load.</li>
|
||
</ul>
|
||
|
||
<p class="sub" style="margin-top:18px">A web app — nothing to build, nothing to buy. (Bills of materials apply
|
||
only to the buildable hardware: <a href="/info-teacher.html">Teacher</a> and <a href="/info-micro.html">Micro</a>.)</p>
|
||
</main>
|
||
|
||
<div class="site-foot">VARASYS · Simplifying Complexity — <span id="appVersion">v0.0.1-dev</span></div>
|
||
|
||
<script>
|
||
const APP_VERSION = "v0.0.1-dev";
|
||
const $ = (id)=>document.getElementById(id);
|
||
try{ $("appVersion").textContent = "v"+APP_VERSION.replace(/^v/,""); }catch(e){}
|
||
const THEMES=["system","light","dark"];
|
||
function effectiveTheme(p){ return p==="system" ? (matchMedia("(prefers-color-scheme: light)").matches?"light":"dark") : p; }
|
||
function themePref(){ try{ const p=localStorage.getItem("metronome.theme"); return (p==="light"||p==="dark"||p==="system")?p:"system"; }catch(e){ return "system"; } }
|
||
function applyTheme(p){ try{ localStorage.setItem("metronome.theme",p); }catch(e){}
|
||
document.documentElement.dataset.theme = effectiveTheme(p);
|
||
$("themeBtn").textContent = p==="system" ? "◐" : p==="light" ? "☀" : "☾"; $("themeBtn").title="Theme: "+p; }
|
||
$("themeBtn").onclick = ()=> applyTheme(THEMES[(THEMES.indexOf(themePref())+1)%THEMES.length]);
|
||
matchMedia("(prefers-color-scheme: light)").addEventListener("change", ()=>{ if(themePref()==="system") applyTheme("system"); });
|
||
applyTheme(themePref());
|
||
</script>
|
||
<script src="/embed.js"></script>
|
||
</body>
|
||
</html>
|