286 lines
14 KiB
HTML
286 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<title>Zhila · descent 04</title>
|
||
<meta name="description" content="Zhila — a DAW where sound is terrain. The choir above, your hands below, agents in the protocol.">
|
||
<meta name="color-scheme" content="dark">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;1,300;1,400&family=JetBrains+Mono:wght@200;300;400;500&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%230c0908'/%3E%3Ccircle cx='16' cy='16' r='9' fill='none' stroke='%23e8432a' stroke-width='.8'/%3E%3Ccircle cx='16' cy='16' r='5.5' fill='%23000'/%3E%3C/svg%3E">
|
||
</head>
|
||
<body data-mode="choir" data-view="nave">
|
||
|
||
<div class="vignette" aria-hidden="true"></div>
|
||
<div class="grain" aria-hidden="true"></div>
|
||
<canvas id="terrain" aria-hidden="true"></canvas>
|
||
<canvas id="breath" aria-hidden="true"></canvas>
|
||
<div class="quarry-dim" aria-hidden="true"></div>
|
||
|
||
<div class="shell">
|
||
|
||
<header class="rail rail--top">
|
||
<a class="brand" href="#" aria-label="Zhila, version 0.4">ZHILA<span class="brand-v">0.4</span></a>
|
||
<div class="doc">
|
||
<span class="doc-name">descent 04</span>
|
||
<span class="doc-rule" aria-hidden="true"></span>
|
||
<span class="doc-meta">A minor<i class="doc-dot"></i>4/4<i class="doc-dot"></i>5 veins</span>
|
||
</div>
|
||
<div class="views" role="group" aria-label="Room">
|
||
<button class="view-btn is-on" type="button" data-view-btn="nave" aria-pressed="true">nave</button>
|
||
<span class="mode-slash" aria-hidden="true">/</span>
|
||
<button class="view-btn" type="button" data-view-btn="quarry" aria-pressed="false">quarry</button>
|
||
</div>
|
||
<div class="mode" role="group" aria-label="Who is playing">
|
||
<button class="mode-btn is-on" type="button" data-mode-btn="choir" aria-pressed="true">choir</button>
|
||
<span class="mode-slash" aria-hidden="true">/</span>
|
||
<button class="mode-btn" type="button" data-mode-btn="hand" aria-pressed="false">hand</button>
|
||
</div>
|
||
<div class="net" id="net">
|
||
<span class="led" aria-hidden="true"></span>
|
||
<span class="net-tag">api</span>
|
||
<i class="net-rule" aria-hidden="true"></i>
|
||
<span id="net-text">connecting</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="sky" aria-label="The eye and the voice">
|
||
<div class="sky-inner">
|
||
<div class="void-wrap">
|
||
<canvas id="halo" aria-hidden="true"></canvas>
|
||
<button class="void" id="void" type="button" aria-label="Call the choir: make a layer from your words">
|
||
<span class="void-word" id="void-word" aria-hidden="true">entry</span>
|
||
<span class="void-label" aria-hidden="true">scene</span>
|
||
<span class="void-hint" aria-hidden="true">call</span>
|
||
</button>
|
||
</div>
|
||
<form class="invocation" id="invocation">
|
||
<label class="sr" for="prompt">What should sound</label>
|
||
<input id="prompt" name="prompt" type="text" placeholder="say what you want to hear" autocomplete="off" spellcheck="false">
|
||
<button class="invoke" type="submit">call</button>
|
||
</form>
|
||
<p class="hint hint--choir"><kbd>⏎</kbd> call <span class="hint-rule" aria-hidden="true"></span> <kbd>space</kbd> play</p>
|
||
<p class="hint hint--hand">drag cilia <span class="hint-rule" aria-hidden="true"></span> click the nave</p>
|
||
</div>
|
||
</section>
|
||
|
||
<main class="deck">
|
||
|
||
<aside class="agent rail" data-pool="0.95" aria-label="Choir — agent console">
|
||
<div class="head">
|
||
<h2 class="title">choir</h2>
|
||
<span class="chips">
|
||
<span class="chip" title="Embedded agent: a live model when the local server runs">api</span>
|
||
<span class="chip" title="Model Context Protocol — the same tools for external agents (not wired yet)">mcp</span>
|
||
</span>
|
||
</div>
|
||
<div class="state" id="agent-state">
|
||
<span class="led" aria-hidden="true"></span>
|
||
<span id="agent-state-text">listening</span>
|
||
<span class="state-meta">tools</span>
|
||
</div>
|
||
<ol class="log" id="log" aria-live="polite"></ol>
|
||
<div class="shape" aria-label="Shape of the next layer">
|
||
<div class="shape-head"><span>shape</span><span>next</span></div>
|
||
<label class="slider"><span class="slider-name">density</span><input type="range" min="0" max="100" value="62" id="s-density"><output for="s-density">0.62</output></label>
|
||
<label class="slider"><span class="slider-name">depth</span><input type="range" min="0" max="100" value="78" id="s-depth"><output for="s-depth">0.78</output></label>
|
||
<label class="slider"><span class="slider-name">grain</span><input type="range" min="0" max="100" value="31" id="s-grain"><output for="s-grain">0.31</output></label>
|
||
</div>
|
||
</aside>
|
||
|
||
<section class="corridor" data-pool="0.42" aria-label="Nave — the arrangement">
|
||
<div class="head corridor-head">
|
||
<h2 class="title">nave</h2>
|
||
<span class="sub corridor-sub"><span>5 veins</span><i class="sub-rule"></i><span id="corridor-read">bar 7.3</span></span>
|
||
</div>
|
||
<div class="stage" id="stage">
|
||
<canvas id="spires" aria-hidden="true"></canvas>
|
||
<svg id="nave" role="img" aria-label="Five veins running toward the city at the end of the road"></svg>
|
||
<span class="now-label" aria-hidden="true">now</span>
|
||
</div>
|
||
</section>
|
||
|
||
<aside class="side" aria-label="Hands">
|
||
<section class="crystal rail" data-pool="0.95" aria-label="Crystal — notes">
|
||
<div class="head">
|
||
<h2 class="title">crystal</h2>
|
||
<span class="sub">notes</span>
|
||
</div>
|
||
<div class="crystal-meta"><span id="crystal-bars">bars 5–8</span><span>A minor</span></div>
|
||
<div class="lattice" id="lattice"></div>
|
||
</section>
|
||
<section class="cilia rail" data-pool="0.95" aria-label="Cilia — levels">
|
||
<div class="head">
|
||
<h2 class="title">cilia</h2>
|
||
<span class="sub">levels</span>
|
||
</div>
|
||
<div class="faders" id="faders"></div>
|
||
</section>
|
||
</aside>
|
||
|
||
</main>
|
||
|
||
<section class="quarry-tray" id="quarry-tray" aria-label="Core tray">
|
||
<div class="head tray-head">
|
||
<div class="tray-id">
|
||
<h2 class="title">core tray</h2>
|
||
<span class="sub" id="tray-name">stairwell, 3rd floor</span>
|
||
</div>
|
||
<div class="tray-meta">
|
||
<span class="seal" id="tray-seal"><i aria-hidden="true"></i><span>taken</span></span>
|
||
<i class="sub-rule" aria-hidden="true"></i>
|
||
<span class="tray-num" id="tray-dur">12.4 s</span>
|
||
<i class="sub-rule" aria-hidden="true"></i>
|
||
<span class="tray-num" id="tray-pos">0.84 s</span>
|
||
<i class="sub-rule" aria-hidden="true"></i>
|
||
<button class="ghost ghost--small" id="fracture" type="button" title="Cut this core into sixteen faces">fracture</button>
|
||
</div>
|
||
</div>
|
||
<div class="tray-stage" id="tray-stage">
|
||
<canvas id="tray" aria-hidden="true"></canvas>
|
||
<svg id="tray-overlay" aria-hidden="true"></svg>
|
||
<p class="tray-hint" aria-hidden="true">drag the lens to read the core</p>
|
||
</div>
|
||
</section>
|
||
|
||
<main class="quarry-deck" id="quarry-deck" aria-label="Quarry">
|
||
|
||
<aside class="store rail" aria-label="Core store">
|
||
<div class="head">
|
||
<h2 class="title">store</h2>
|
||
<span class="sub">cores</span>
|
||
</div>
|
||
<div class="store-list" id="store"></div>
|
||
<form class="choir-call" id="choir-call">
|
||
<input id="choir-input" type="text" placeholder="send the choir for…" autocomplete="off" spellcheck="false">
|
||
<button type="submit">call</button>
|
||
</form>
|
||
<button class="ghost ghost--small extract-btn" id="extract" type="button">extract by hand</button>
|
||
</aside>
|
||
|
||
<section class="faces" aria-label="The face">
|
||
<div class="head faces-head">
|
||
<h2 class="title">the face</h2>
|
||
<span class="sub" id="faces-read">16 faces</span>
|
||
</div>
|
||
<div class="face-wall" id="face-wall"></div>
|
||
<div class="face-foot">
|
||
<span class="face-status" id="face-status">strike a stone</span>
|
||
<span class="place-group">
|
||
<button class="ghost ghost--small" id="place" type="button" disabled>place</button>
|
||
<button class="ghost ghost--small" id="place-ring" type="button" disabled>loop</button>
|
||
</span>
|
||
</div>
|
||
</section>
|
||
|
||
<aside class="weather rail" aria-label="Weather">
|
||
<div class="head">
|
||
<h2 class="title">weather</h2>
|
||
<span class="sub">climate</span>
|
||
</div>
|
||
<div class="weather-list">
|
||
<label class="slider"><span class="slider-name">age</span><input type="range" min="0" max="100" value="34" id="w-age"><output for="w-age">0.34</output></label>
|
||
<label class="slider"><span class="slider-name">pressure</span><input type="range" min="0" max="100" value="52" id="w-pressure"><output for="w-pressure">0.52</output></label>
|
||
<label class="slider"><span class="slider-name">air</span><input type="range" min="0" max="100" value="41" id="w-air"><output for="w-air">0.41</output></label>
|
||
<label class="slider"><span class="slider-name">heat</span><input type="range" min="0" max="100" value="28" id="w-heat"><output for="w-heat">0.28</output></label>
|
||
</div>
|
||
<div class="climate" id="climate">young, damp, cold</div>
|
||
|
||
<div class="ring-block">
|
||
<div class="ring-head"><span class="tp-label">ring</span><strong id="ring-count">04</strong></div>
|
||
<div class="ring-visual" id="ring-visual"></div>
|
||
<button class="ghost ghost--small" id="grow" type="button">grow ring</button>
|
||
</div>
|
||
|
||
<div class="ghost-toggle">
|
||
<span class="tp-label">ghost</span>
|
||
<button class="toggle" id="ghost" type="button" aria-pressed="true">on</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="ledger" aria-label="Ledger">
|
||
<div class="ledger-head">
|
||
<span>ledger</span>
|
||
<span class="ledger-sub">the memory of taking</span>
|
||
</div>
|
||
<ol class="ledger-list" id="ledger"></ol>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<footer class="rail rail--transport" aria-label="Pulse">
|
||
<input type="file" id="file-in" accept="audio/*" hidden>
|
||
<div class="tp tp--go">
|
||
<button class="play" id="play" type="button" aria-label="Play" aria-pressed="false">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path class="i-play" d="M8.5 5.2v13.6L19 12z"/><g class="i-pause"><path d="M9 5.5v13"/><path d="M15 5.5v13"/></g></svg>
|
||
</button>
|
||
<button class="icon" id="stop" type="button" aria-label="Stop">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="7" width="10" height="10"/></svg>
|
||
</button>
|
||
<button class="icon icon--rec" id="rec" type="button" aria-label="Record" aria-pressed="false">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.2"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="tp tp--clock">
|
||
<span class="tp-label">bar</span>
|
||
<span class="tp-bars" id="bars">7.3</span>
|
||
<span class="tp-time" id="time">00:12.66</span>
|
||
</div>
|
||
|
||
<div class="tp tp--tempo">
|
||
<span class="tp-label">tempo</span>
|
||
<div class="tempo-stack">
|
||
<button class="tp-num" id="bpm" type="button" aria-label="Tempo 128 — drag up or down">128.00</button>
|
||
<span class="tp-sub">4/4<i class="tp-rule" aria-hidden="true"></i>A minor</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tp tp--knobs" aria-label="Nodes">
|
||
<div class="knob" data-knob="warmth" data-value="0.58"><svg viewBox="0 0 34 34" aria-hidden="true"><circle class="k-track" cx="17" cy="17" r="13"/><path class="k-arc" d=""/><path class="k-tick" d=""/></svg><span class="knob-name">warmth</span></div>
|
||
<div class="knob" data-knob="dust" data-value="0.34"><svg viewBox="0 0 34 34" aria-hidden="true"><circle class="k-track" cx="17" cy="17" r="13"/><path class="k-arc" d=""/><path class="k-tick" d=""/></svg><span class="knob-name">dust</span></div>
|
||
<div class="knob" data-knob="threshold" data-value="0.72"><svg viewBox="0 0 34 34" aria-hidden="true"><circle class="k-track" cx="17" cy="17" r="13"/><path class="k-arc" d=""/><path class="k-tick" d=""/></svg><span class="knob-name">threshold</span></div>
|
||
</div>
|
||
|
||
<div class="tp tp--in" role="group" aria-label="What the instrument listens to">
|
||
<span class="tp-label">extract</span>
|
||
<div class="srcs">
|
||
<button class="src is-on" type="button" data-src="drone" aria-pressed="true" title="Generate a core from the instrument">core</button>
|
||
<button class="src" type="button" data-src="file" aria-pressed="false" title="Import an audio file as a core">file</button>
|
||
<button class="src" type="button" data-src="room" aria-pressed="false" title="Record the room into a core">room</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tp tp--scope">
|
||
<span class="tp-label">signal</span>
|
||
<canvas id="scope" aria-hidden="true"></canvas>
|
||
</div>
|
||
|
||
<div class="tp tp--master">
|
||
<div class="master-top">
|
||
<span class="tp-label">master</span>
|
||
<span class="tp-db" id="master-db">−∞ dB</span>
|
||
<button class="snd" id="snd" type="button" aria-pressed="true" aria-label="Audio on">audio</button>
|
||
</div>
|
||
<div class="meter" aria-hidden="true"><i class="meter-fill" id="meter-fill"></i><b class="meter-peak" id="meter-peak"></b></div>
|
||
</div>
|
||
|
||
<div class="tp tp--end">
|
||
<button class="ghost" type="button">layer</button>
|
||
<button class="ghost ghost--ember" type="button">render</button>
|
||
</div>
|
||
</footer>
|
||
|
||
</div>
|
||
|
||
<script src="terrain.js"></script>
|
||
<script src="engine.js"></script>
|
||
<script src="app.js"></script>
|
||
<script src="quarry.js"></script>
|
||
<script src="agent.js"></script>
|
||
</body>
|
||
</html>
|