feat(playground): add three alternative UI design explorations
Three redesigns of the playground UI, each exploring a different interaction philosophy for the NISPS interactive ML engine: A) Immersive — fullscreen canvas with floating glassmorphism overlays B) Workbench — dashboard with 2D mapping heatmap as centerpiece C) Journey — phased UI that dissolves (Explore → Teach → Perform) All share the same 126-output MLP ([32,48,64] hidden layers), C15 synth bridge, and flow field visualizer. Each adds: - SynthVisualizer (126 grouped vertical bars) replacing particles in synth mode - RL as default learning mode with keyboard shortcuts (1/2) - Follow mode for trackpad exploration - ?tame= URL param for safe-range constraining - localStorage persistence (random on first boot) - Live iframe previews on designs.html homepage See devlog/2026-03-21-ui-redesign-explorations.md and meml-2c3 for remaining refinements identified during browser testing.
This commit is contained in:
w1n5t0n
parent
925ddc5be6
commit
a669a54543
11 changed files with 7186 additions and 0 deletions
155
playground/a-immersive.html
Normal file
155
playground/a-immersive.html
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<title>NISPS Immersive</title>
|
||||
<link rel="stylesheet" href="css/a-immersive.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Back button -->
|
||||
<a href="designs.html" class="back-btn" title="Back to designs">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M10 2L4 8l6 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Synth quick controls (play button + drawer, next to back button) -->
|
||||
<div class="synth-quick-controls hidden" id="synth-quick-controls">
|
||||
<button class="play-btn" id="quick-play" title="Start audio + arpeggiator">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" id="quick-play-icon"><path d="M4 2l10 6-10 6z"/></svg>
|
||||
</button>
|
||||
<div class="play-drawer" id="play-drawer">
|
||||
<label>Vol <input type="range" id="quick-vol" min="0" max="1" step="0.01" value="0.5"></label>
|
||||
<label>BPM <input type="range" id="quick-bpm" min="40" max="240" step="1" value="120"><span id="quick-bpm-val">120</span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fullscreen flow field canvas -->
|
||||
<canvas id="vis-canvas"></canvas>
|
||||
|
||||
<!-- Synth visualization canvas -->
|
||||
<canvas id="synth-vis-canvas"></canvas>
|
||||
|
||||
<!-- Heatmap strip (top) -->
|
||||
<div class="heatmap-strip" id="heatmap-strip">
|
||||
<div class="heatmap-cells" id="heatmap-cells"></div>
|
||||
<div class="heatmap-tooltip" id="heatmap-tooltip"></div>
|
||||
</div>
|
||||
|
||||
<!-- Floating joystick with integrated map -->
|
||||
<div class="joystick-container" id="joystick-container">
|
||||
<div class="joystick-glow" id="joystick-glow"></div>
|
||||
<canvas id="joy-map" width="160" height="160"></canvas>
|
||||
<div class="noise-ring" id="noise-ring"></div>
|
||||
<div class="follow-badge hidden" id="follow-badge">FOLLOW</div>
|
||||
</div>
|
||||
|
||||
<!-- RL floating buttons -->
|
||||
<div class="rl-buttons" id="rl-buttons">
|
||||
<button class="rl-btn rl-down" id="btn-thumbsdown" title="Explore more">− <span class="key-num">1</span></button>
|
||||
<button class="rl-btn rl-up" id="btn-thumbsup" title="Keep this">+ <span class="key-num">2</span></button>
|
||||
</div>
|
||||
|
||||
<!-- Bottom sheet -->
|
||||
<div class="bottom-sheet collapsed" id="bottom-sheet">
|
||||
<!-- Floating mode bar (sticky inside sheet) -->
|
||||
<div class="floating-bar" id="floating-bar">
|
||||
<div class="pill-toggle" id="learning-toggle">
|
||||
<button class="pill-opt" data-mode="examples">Examples</button>
|
||||
<button class="pill-opt active" data-mode="rl">RL</button>
|
||||
</div>
|
||||
<button class="float-btn" id="btn-randomize-bar" title="Randomize weights">Randomize</button>
|
||||
<button class="follow-pill" id="follow-pill" title="Toggle follow mode">Follow</button>
|
||||
<button class="chevron-btn" id="chevron-btn" title="Expand panel">▲</button>
|
||||
</div>
|
||||
|
||||
<!-- Status line -->
|
||||
<div class="sheet-status" id="sheet-status">
|
||||
<span id="status-text">0 examples · untrained</span>
|
||||
</div>
|
||||
|
||||
<!-- Sheet content -->
|
||||
<div class="sheet-content" id="sheet-content">
|
||||
<!-- Output mode toggle -->
|
||||
<div class="mode-row">
|
||||
<div class="pill-toggle" id="output-toggle">
|
||||
<button class="pill-opt active" data-mode="visual">Visual</button>
|
||||
<button class="pill-opt" data-mode="synth">Synth</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Examples mode actions -->
|
||||
<div class="action-row" id="examples-actions" style="display:none;">
|
||||
<button class="action-btn" id="btn-add-example">Add Example</button>
|
||||
<button class="action-btn accent" id="btn-train">Train</button>
|
||||
<button class="action-btn dim" id="btn-clear">Clear</button>
|
||||
<button class="action-btn dim" id="btn-randomize">Randomize</button>
|
||||
</div>
|
||||
|
||||
<!-- Preset palette -->
|
||||
<div class="preset-row" id="preset-row" style="display:none;">
|
||||
<span class="preset-label">Presets</span>
|
||||
<button class="preset-chip" data-preset="calm-to-chaotic">Calm/Chaos</button>
|
||||
<button class="preset-chip" data-preset="rainbow-sweep">Rainbow</button>
|
||||
<button class="preset-chip" data-preset="vortex">Vortex</button>
|
||||
<button class="preset-chip" data-preset="spiral">Spiral</button>
|
||||
<button class="preset-chip" data-preset="embers">Embers</button>
|
||||
</div>
|
||||
|
||||
<!-- Synth controls -->
|
||||
<div class="synth-panel hidden" id="synth-panel">
|
||||
<div class="synth-row">
|
||||
<button class="action-btn accent" id="synth-start">Start Audio</button>
|
||||
<span class="synth-status" id="synth-status">Stopped</span>
|
||||
</div>
|
||||
<div class="synth-row">
|
||||
<label>Volume</label>
|
||||
<input type="range" id="synth-volume" min="0" max="1" step="0.01" value="0.5">
|
||||
</div>
|
||||
<div class="synth-row">
|
||||
<label>Arpeggiator</label>
|
||||
<button class="action-btn" id="arp-toggle">Play</button>
|
||||
</div>
|
||||
<div class="synth-row">
|
||||
<label>Progression</label>
|
||||
<select id="arp-progression">
|
||||
<option value="I-vi-IV-V">I-vi-IV-V</option>
|
||||
<option value="I-IV-vi-V">I-IV-vi-V</option>
|
||||
<option value="i-VI-III-VII">i-VI-III-VII</option>
|
||||
<option value="I-V-vi-IV">I-V-vi-IV</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="synth-row">
|
||||
<label>Tempo <span id="tempo-val">120</span></label>
|
||||
<input type="range" id="arp-tempo" min="40" max="240" step="1" value="120">
|
||||
</div>
|
||||
<div class="synth-row">
|
||||
<label>Octaves <span id="octaves-val">2</span></label>
|
||||
<input type="range" id="arp-octaves" min="1" max="5" step="1" value="2">
|
||||
</div>
|
||||
<div class="synth-row">
|
||||
<label>Oct Offset <span id="offset-val">0</span></label>
|
||||
<input type="range" id="arp-offset" min="-2" max="3" step="1" value="0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loss plot -->
|
||||
<div class="loss-section">
|
||||
<label>Loss History</label>
|
||||
<canvas id="loss-canvas" width="280" height="80"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Advanced: raw param sliders -->
|
||||
<details class="advanced-section">
|
||||
<summary>Advanced: Raw Parameters</summary>
|
||||
<div class="raw-params" id="raw-params"></div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="js/a-app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
191
playground/b-workbench.html
Normal file
191
playground/b-workbench.html
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<title>NISPS Workbench</title>
|
||||
<link rel="stylesheet" href="css/b-workbench.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="workbench">
|
||||
|
||||
<!-- Header -->
|
||||
<header class="wb-header">
|
||||
<div class="wb-header-left">
|
||||
<a href="designs.html" class="wb-back-btn" title="Back">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10 2L4 8l6 6"/></svg>
|
||||
</a>
|
||||
<h1 class="wb-title">NISPS <span class="wb-title-accent">Workbench</span></h1>
|
||||
</div>
|
||||
<div class="wb-header-right">
|
||||
<span class="wb-mode-badge" id="mode-badge">Visual</span>
|
||||
<button class="wb-help-btn" id="help-btn" title="Help">?</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main grid -->
|
||||
<div class="wb-grid">
|
||||
|
||||
<!-- Left column: Canvas -->
|
||||
<section class="wb-panel wb-canvas-panel">
|
||||
<div class="wb-panel-header">
|
||||
<span class="wb-panel-title">Flow Field</span>
|
||||
<div class="presets" id="presets-visual">
|
||||
<button class="preset-pill" data-preset="calm-to-chaotic">Calm/Chaos</button>
|
||||
<button class="preset-pill" data-preset="rainbow-sweep">Rainbow</button>
|
||||
<button class="preset-pill" data-preset="vortex">Vortex</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wb-canvas-wrap">
|
||||
<canvas id="visual-canvas"></canvas>
|
||||
<canvas id="synth-vis-canvas" class="hidden"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Right column: Input Space (merged joystick + mapping) -->
|
||||
<section class="wb-panel wb-mapping-panel">
|
||||
<div class="wb-panel-header">
|
||||
<span class="wb-panel-title">Input Space</span>
|
||||
<button class="wb-follow-toggle-btn" id="follow-toggle-btn">Follow</button>
|
||||
</div>
|
||||
<div class="wb-mapping-area">
|
||||
<div class="wb-heatmap-wrap">
|
||||
<canvas id="mapping-canvas" width="280" height="280"></canvas>
|
||||
<div class="wb-follow-badge hidden" id="follow-badge">FOLLOW</div>
|
||||
<div class="wb-heatmap-label">Drag to explore · double-click or <kbd>f</kbd> to toggle follow</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Constellation -->
|
||||
<div class="wb-constellation-wrap">
|
||||
<canvas id="constellation-canvas" width="120" height="120"></canvas>
|
||||
<span class="wb-constellation-label" id="constellation-label">20 parameters</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bottom left: Param Groups -->
|
||||
<section class="wb-panel wb-params-panel">
|
||||
<div class="wb-panel-header">
|
||||
<span class="wb-panel-title">Parameters</span>
|
||||
<div class="wb-output-toggle">
|
||||
<button class="wb-toggle-btn active" id="toggle-visual" data-mode="visual">Visual</button>
|
||||
<button class="wb-toggle-btn" id="toggle-synth" data-mode="synth">Synth</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wb-param-groups" id="param-groups"></div>
|
||||
</section>
|
||||
|
||||
<!-- Bottom right: Controls + Metrics -->
|
||||
<section class="wb-panel wb-controls-panel">
|
||||
<div class="wb-panel-header">
|
||||
<span class="wb-panel-title">Controls</span>
|
||||
</div>
|
||||
|
||||
<!-- Learning mode toggle -->
|
||||
<div class="wb-mode-toggle">
|
||||
<button class="wb-mode-btn" id="mode-examples">Examples</button>
|
||||
<button class="wb-mode-btn active" id="mode-rl">RL</button>
|
||||
</div>
|
||||
|
||||
<!-- Examples mode controls -->
|
||||
<div class="wb-action-group hidden" id="examples-controls">
|
||||
<button class="wb-btn wb-btn-primary" id="btn-add">Add Example</button>
|
||||
<button class="wb-btn wb-btn-accent" id="btn-train">Train</button>
|
||||
<button class="wb-btn" id="btn-randomize">Randomize</button>
|
||||
<button class="wb-btn wb-btn-danger" id="btn-clear">Clear</button>
|
||||
</div>
|
||||
|
||||
<!-- RL mode controls -->
|
||||
<div class="wb-action-group" id="rl-controls">
|
||||
<button class="wb-btn wb-btn-bad" id="btn-thumbsdown">− Explore</button>
|
||||
<span class="wb-key-hint">1</span>
|
||||
<button class="wb-btn wb-btn-good" id="btn-thumbsup">+ Good</button>
|
||||
<span class="wb-key-hint">2</span>
|
||||
<button class="wb-btn" id="btn-randomize-rl">Randomize</button>
|
||||
</div>
|
||||
|
||||
<!-- Synth controls (shown in synth mode) -->
|
||||
<div class="wb-synth-controls hidden" id="synth-controls">
|
||||
<div class="wb-synth-row">
|
||||
<button class="wb-btn wb-btn-primary" id="synth-start">Start Audio</button>
|
||||
<span class="wb-synth-status" id="synth-status">Stopped</span>
|
||||
</div>
|
||||
<div class="wb-synth-row">
|
||||
<label>Volume</label>
|
||||
<input type="range" id="synth-volume" min="0" max="1" step="0.01" value="0.5">
|
||||
</div>
|
||||
<div class="wb-synth-row">
|
||||
<button class="wb-btn" id="arp-toggle">Arp: Play</button>
|
||||
<select id="arp-progression">
|
||||
<option value="I-vi-IV-V">I-vi-IV-V</option>
|
||||
<option value="I-IV-vi-V">I-IV-vi-V</option>
|
||||
<option value="i-VI-III-VII">i-VI-III-VII</option>
|
||||
<option value="I-V-vi-IV">I-V-vi-IV</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="wb-synth-row">
|
||||
<label>Tempo <span id="tempo-val">120</span></label>
|
||||
<input type="range" id="arp-tempo" min="40" max="240" step="1" value="120">
|
||||
</div>
|
||||
<div class="wb-synth-row">
|
||||
<label>Octaves <span id="octaves-val">2</span></label>
|
||||
<input type="range" id="arp-octaves" min="1" max="5" step="1" value="2">
|
||||
</div>
|
||||
<div class="wb-synth-row">
|
||||
<label>Offset <span id="offset-val">0</span></label>
|
||||
<input type="range" id="arp-offset" min="-2" max="3" step="1" value="0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loss plot -->
|
||||
<div class="wb-loss-wrap">
|
||||
<div class="wb-loss-label">Loss</div>
|
||||
<canvas id="loss-canvas" width="280" height="60"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Status metrics -->
|
||||
<div class="wb-metrics" id="metrics">
|
||||
<div class="wb-metric"><span class="wb-metric-label">Examples</span><span class="wb-metric-value" id="metric-examples">0</span></div>
|
||||
<div class="wb-metric"><span class="wb-metric-label">Loss</span><span class="wb-metric-value" id="metric-loss">—</span></div>
|
||||
<div class="wb-metric"><span class="wb-metric-label">Noise</span><span class="wb-metric-value" id="metric-noise">0.050</span></div>
|
||||
<div class="wb-metric"><span class="wb-metric-label">Joy X,Y</span><span class="wb-metric-value" id="metric-joy">0.50, 0.50</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div><!-- /wb-grid -->
|
||||
|
||||
<!-- Toast notification -->
|
||||
<div class="wb-toast hidden" id="toast"></div>
|
||||
|
||||
<!-- Help overlay -->
|
||||
<div class="wb-help-overlay hidden" id="help-overlay">
|
||||
<div class="wb-help-content" onclick="event.stopPropagation()">
|
||||
<h2>NISPS Workbench</h2>
|
||||
<p>Train a neural network to map 2D joystick positions to output parameters using interactive machine learning.</p>
|
||||
<h3>Input Space</h3>
|
||||
<p>The heatmap shows what the network has learned across the input space. Bright dots show training examples. Drag anywhere on the map to move the input position. Double-click or press Follow to toggle follow mode.</p>
|
||||
<h3>Examples Mode</h3>
|
||||
<ol>
|
||||
<li>Drag on the input space to a position</li>
|
||||
<li>Expand a parameter group and drag bars to set desired outputs</li>
|
||||
<li>Press <strong>Add Example</strong></li>
|
||||
<li>Repeat, then <strong>Train</strong></li>
|
||||
</ol>
|
||||
<h3>RL Mode</h3>
|
||||
<ol>
|
||||
<li>Move around the input space — the network produces outputs</li>
|
||||
<li>Like it? Press <strong>+ Good</strong></li>
|
||||
<li>Not quite? Press <strong>− Explore</strong> for variation</li>
|
||||
</ol>
|
||||
<h3>Output Modes</h3>
|
||||
<p><strong>Visual</strong>: 20 params control the flow-field particle system. <strong>Synth</strong>: 126 params control a C15 synthesizer engine.</p>
|
||||
<p style="margin-top:16px;text-align:center;color:#555;">Tap outside to close</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="module" src="js/b-app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
189
playground/c-journey.html
Normal file
189
playground/c-journey.html
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<title>NISPS Journey</title>
|
||||
<link rel="stylesheet" href="css/c-journey.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" class="app phase-explore" data-phase="explore">
|
||||
|
||||
<!-- Back button -->
|
||||
<a href="designs.html" class="back-btn" title="Back">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10 2L4 8l6 6"/></svg>
|
||||
</a>
|
||||
|
||||
<!-- Flow field canvas — always present -->
|
||||
<canvas id="vis-canvas"></canvas>
|
||||
<!-- Synth visualizer canvas (shown in synth mode) -->
|
||||
<canvas id="synth-vis-canvas" class="synth-vis hidden"></canvas>
|
||||
|
||||
<!-- Phase indicator (3 dots, top-center) -->
|
||||
<div class="phase-dots" id="phase-dots">
|
||||
<button class="phase-dot active" data-phase="explore" title="Explore"></button>
|
||||
<button class="phase-dot" data-phase="teach" title="Teach"></button>
|
||||
<button class="phase-dot" data-phase="perform" title="Perform"></button>
|
||||
</div>
|
||||
|
||||
<!-- Heatmap strip (top) -->
|
||||
<div class="heatmap-strip" id="heatmap-strip">
|
||||
<div class="heatmap-cells" id="heatmap-cells"></div>
|
||||
<span class="heatmap-count" id="heatmap-count">20</span>
|
||||
<div class="heatmap-tooltip" id="heatmap-tooltip"></div>
|
||||
</div>
|
||||
|
||||
<!-- Output mode toggle (top-left pill) -->
|
||||
<div class="mode-pill" id="mode-pill">
|
||||
<button class="mode-opt active" data-mode="visual">Visual</button>
|
||||
<button class="mode-opt" data-mode="synth">Synth</button>
|
||||
</div>
|
||||
|
||||
<!-- Explore phase prompts -->
|
||||
<div class="explore-prompt" id="explore-prompt">
|
||||
<p class="prompt-text" id="prompt-text">Move the joystick to explore</p>
|
||||
</div>
|
||||
|
||||
<div class="explore-ctas hidden" id="explore-ctas">
|
||||
<button class="cta-pill" id="cta-preset">Try a preset</button>
|
||||
<button class="cta-pill primary" id="cta-teach">Teach it yourself</button>
|
||||
</div>
|
||||
|
||||
<!-- Joystick -->
|
||||
<div class="joystick-area" id="joystick-area">
|
||||
<canvas class="joystick-canvas" id="joystick-canvas" width="300" height="300"></canvas>
|
||||
<!-- Noise ring overlay for RL mode -->
|
||||
<div class="noise-ring" id="noise-ring"></div>
|
||||
<!-- Follow mode indicator -->
|
||||
<div class="follow-indicator hidden" id="follow-indicator">FOLLOW</div>
|
||||
<!-- Follow mode toggle pill -->
|
||||
<button class="follow-pill" id="follow-pill" title="Toggle follow mode (double-click joystick)">Follow</button>
|
||||
</div>
|
||||
|
||||
<!-- Teach phase panel -->
|
||||
<div class="teach-panel" id="teach-panel">
|
||||
<!-- Teaching mode tabs -->
|
||||
<div class="teach-tabs">
|
||||
<button class="teach-tab" data-tab="examples">Examples</button>
|
||||
<button class="teach-tab active" data-tab="rl">RL Feedback</button>
|
||||
</div>
|
||||
|
||||
<!-- Examples sub-mode -->
|
||||
<div class="teach-content hidden" id="teach-examples">
|
||||
<div class="teach-layout">
|
||||
<!-- Preset grid -->
|
||||
<div class="preset-grid" id="preset-grid">
|
||||
<button class="preset-thumb" data-preset="0">
|
||||
<canvas class="preset-canvas" width="60" height="60"></canvas>
|
||||
<span>Calm</span>
|
||||
</button>
|
||||
<button class="preset-thumb" data-preset="1">
|
||||
<canvas class="preset-canvas" width="60" height="60"></canvas>
|
||||
<span>Storm</span>
|
||||
</button>
|
||||
<button class="preset-thumb" data-preset="2">
|
||||
<canvas class="preset-canvas" width="60" height="60"></canvas>
|
||||
<span>Spiral</span>
|
||||
</button>
|
||||
<button class="preset-thumb" data-preset="3">
|
||||
<canvas class="preset-canvas" width="60" height="60"></canvas>
|
||||
<span>Pulse</span>
|
||||
</button>
|
||||
<button class="preset-thumb" data-preset="4">
|
||||
<canvas class="preset-canvas" width="60" height="60"></canvas>
|
||||
<span>Drift</span>
|
||||
</button>
|
||||
<button class="preset-thumb" data-preset="5">
|
||||
<canvas class="preset-canvas" width="60" height="60"></canvas>
|
||||
<span>Swarm</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="teach-actions">
|
||||
<button class="action-btn primary" id="btn-add-example">Add Example</button>
|
||||
<button class="action-btn accent" id="btn-train">Train</button>
|
||||
</div>
|
||||
|
||||
<!-- Training minimap -->
|
||||
<canvas class="minimap" id="minimap" width="120" height="120"></canvas>
|
||||
|
||||
<!-- Collapsible fine-tune -->
|
||||
<details class="fine-tune" id="fine-tune">
|
||||
<summary>Fine-tune parameters</summary>
|
||||
<div class="param-sliders" id="param-sliders"></div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RL sub-mode -->
|
||||
<div class="teach-content" id="teach-rl">
|
||||
<p class="rl-hint" id="rl-hint">Like what you see? <span class="thumb-icon">👍</span> Want something different? <span class="thumb-icon">👎</span></p>
|
||||
<div class="rl-buttons">
|
||||
<button class="rl-btn down" id="btn-thumbs-down" title="Explore more">👎</button>
|
||||
<button class="rl-btn up" id="btn-thumbs-up" title="Keep this">👍</button>
|
||||
</div>
|
||||
<div class="rl-key-hints">
|
||||
<span class="key-hint">1</span>
|
||||
<span class="key-hint">2</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Synth controls section (shown when synth mode active) -->
|
||||
<div class="synth-section hidden" id="synth-section">
|
||||
<div class="synth-row">
|
||||
<button class="action-btn accent" id="synth-start">Start Audio</button>
|
||||
<span class="synth-status" id="synth-status">Stopped</span>
|
||||
</div>
|
||||
<div class="synth-row">
|
||||
<label>Volume</label>
|
||||
<input type="range" id="synth-volume" min="0" max="1" step="0.01" value="0.5">
|
||||
</div>
|
||||
<div class="synth-row">
|
||||
<label>Arpeggiator</label>
|
||||
<button class="action-btn" id="arp-toggle">Play</button>
|
||||
</div>
|
||||
<div class="synth-row">
|
||||
<label>Progression</label>
|
||||
<select id="arp-progression">
|
||||
<option value="I-vi-IV-V">I-vi-IV-V</option>
|
||||
<option value="I-IV-vi-V">I-IV-vi-V</option>
|
||||
<option value="i-VI-III-VII">i-VI-III-VII</option>
|
||||
<option value="I-V-vi-IV">I-V-vi-IV</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="synth-row">
|
||||
<label>Tempo <span id="tempo-val">120</span></label>
|
||||
<input type="range" id="arp-tempo" min="40" max="240" step="1" value="120">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status bar -->
|
||||
<div class="teach-status" id="teach-status">
|
||||
<span id="status-text">0 examples</span>
|
||||
<button class="action-btn dim small" id="btn-randomize">Randomize</button>
|
||||
<button class="action-btn dim small" id="btn-clear">Clear</button>
|
||||
</div>
|
||||
|
||||
<!-- Done button -->
|
||||
<button class="done-btn" id="btn-done">Done teaching</button>
|
||||
</div>
|
||||
|
||||
<!-- Perform phase: Edit pill -->
|
||||
<div class="edit-pill-wrap" id="edit-pill-wrap">
|
||||
<button class="edit-pill" id="btn-edit">Edit</button>
|
||||
</div>
|
||||
|
||||
<!-- Perform phase: floating audio control -->
|
||||
<div class="audio-control hidden" id="audio-control">
|
||||
<button class="audio-btn" id="audio-toggle">▶</button>
|
||||
<input type="range" class="audio-vol" id="audio-vol" min="0" max="1" step="0.01" value="0.5">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="module" src="js/c-app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
809
playground/css/a-immersive.css
Normal file
809
playground/css/a-immersive.css
Normal file
|
|
@ -0,0 +1,809 @@
|
|||
/* NISPS Immersive — Design A */
|
||||
/* Full-viewport canvas with floating translucent overlays */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
:root {
|
||||
--glass-bg: rgba(13, 13, 13, 0.65);
|
||||
--glass-border: rgba(255, 255, 255, 0.08);
|
||||
--glass-blur: 16px;
|
||||
--accent: #00ff88;
|
||||
--accent-dim: rgba(0, 255, 136, 0.25);
|
||||
--danger: #ff4466;
|
||||
--text: #e0e0e0;
|
||||
--text-dim: #888;
|
||||
--radius: 12px;
|
||||
--radius-sm: 8px;
|
||||
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #0d0d0d;
|
||||
color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Segoe UI', system-ui, sans-serif;
|
||||
font-size: 14px;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* ---- Back button ---- */
|
||||
.back-btn {
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
left: 8px;
|
||||
z-index: 30;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border-radius: 18px;
|
||||
background: rgba(13, 13, 13, 0.65);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.back-btn:active {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
/* ---- Fullscreen canvas ---- */
|
||||
#vis-canvas,
|
||||
#synth-vis-canvas {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#synth-vis-canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#synth-vis-canvas.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#vis-canvas.hidden-canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ---- Glass mixin ---- */
|
||||
.glass {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
/* ---- Heatmap strip (top) ---- */
|
||||
.heatmap-strip {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 22px;
|
||||
z-index: 20;
|
||||
background: rgba(13, 13, 13, 0.5);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.heatmap-cells {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
height: 16px;
|
||||
gap: 1px;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.heatmap-cell {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: 16px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.heatmap-cell-bar {
|
||||
height: 100%;
|
||||
border-radius: 0 1px 1px 0;
|
||||
transition: width 0.15s;
|
||||
}
|
||||
|
||||
.heatmap-cell:hover .heatmap-cell-bar {
|
||||
filter: brightness(1.3);
|
||||
}
|
||||
|
||||
.heatmap-tooltip {
|
||||
position: fixed;
|
||||
top: 32px;
|
||||
padding: 4px 10px;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
z-index: 25;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.heatmap-tooltip.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ---- Floating joystick with integrated map ---- */
|
||||
.joystick-container {
|
||||
position: fixed;
|
||||
bottom: 136px;
|
||||
left: 24px;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
z-index: 30;
|
||||
touch-action: none;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#joy-map {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
#joy-map:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.joystick-glow {
|
||||
position: absolute;
|
||||
inset: -8px;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(circle, rgba(0,255,136,0.06) 0%, transparent 70%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Noise ring (RL exploration indicator) */
|
||||
.noise-ring {
|
||||
position: absolute;
|
||||
inset: -4px;
|
||||
border-radius: 50%;
|
||||
border: 0px solid rgba(255, 100, 50, 0.0);
|
||||
pointer-events: none;
|
||||
transition: border-width 0.3s, border-color 0.3s;
|
||||
}
|
||||
|
||||
.noise-ring.active {
|
||||
border-width: 3px;
|
||||
border-color: rgba(255, 100, 50, 0.5);
|
||||
}
|
||||
|
||||
.noise-ring.high {
|
||||
border-width: 6px;
|
||||
border-color: rgba(255, 60, 40, 0.6);
|
||||
}
|
||||
|
||||
/* Follow badge near joystick */
|
||||
.follow-badge {
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 255, 136, 0.15);
|
||||
border: 1px solid rgba(0, 255, 136, 0.4);
|
||||
color: var(--accent);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.follow-badge.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Joystick follow-mode pulsing border on canvas */
|
||||
.joystick-container.follow-active #joy-map {
|
||||
box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.5);
|
||||
animation: follow-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes follow-pulse {
|
||||
0%, 100% { box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.3); }
|
||||
50% { box-shadow: 0 0 12px 3px rgba(0, 255, 136, 0.5); }
|
||||
}
|
||||
|
||||
/* ---- RL floating buttons ---- */
|
||||
.rl-buttons {
|
||||
position: fixed;
|
||||
bottom: 170px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
z-index: 25;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.key-num {
|
||||
font-size: 10px;
|
||||
opacity: 0.5;
|
||||
margin-left: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.rl-buttons.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rl-btn {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--glass-border);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
color: var(--text);
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rl-btn:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.rl-up {
|
||||
border-color: rgba(0, 255, 136, 0.3);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.rl-up:active {
|
||||
background: rgba(0, 255, 136, 0.15);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
|
||||
}
|
||||
|
||||
.rl-down {
|
||||
border-color: rgba(255, 68, 102, 0.3);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.rl-down:active {
|
||||
background: rgba(255, 68, 102, 0.15);
|
||||
box-shadow: 0 0 20px rgba(255, 68, 102, 0.3);
|
||||
}
|
||||
|
||||
.rl-btn.flash {
|
||||
animation: rl-flash 0.25s ease-out;
|
||||
}
|
||||
|
||||
@keyframes rl-flash {
|
||||
0% { transform: scale(1.15); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* ---- Floating mode bar (sticky inside sheet) ---- */
|
||||
.floating-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 45;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 6px 12px;
|
||||
background: rgba(13, 13, 13, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
/* Float button (randomize in floating bar) */
|
||||
.float-btn {
|
||||
padding: 4px 12px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.float-btn:active {
|
||||
background: rgba(0, 255, 136, 0.15);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.follow-pill {
|
||||
padding: 4px 12px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.follow-pill.active {
|
||||
background: rgba(0, 255, 136, 0.15);
|
||||
border-color: rgba(0, 255, 136, 0.4);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.chevron-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--glass-border);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.chevron-btn:active {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.chevron-btn.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* ---- Bottom sheet ---- */
|
||||
.bottom-sheet {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 40;
|
||||
background: rgba(13, 13, 13, 0.75);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-top: 1px solid var(--glass-border);
|
||||
border-radius: 0;
|
||||
transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
height: 88px;
|
||||
overflow: hidden;
|
||||
padding-bottom: var(--safe-bottom);
|
||||
will-change: height;
|
||||
}
|
||||
|
||||
.bottom-sheet.expanded {
|
||||
height: 55vh;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Sheet status line */
|
||||
.sheet-status {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Sheet content */
|
||||
.sheet-content {
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
/* Mode row */
|
||||
.mode-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* Pill toggle */
|
||||
.pill-toggle {
|
||||
display: inline-flex;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--glass-border);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.pill-opt {
|
||||
padding: 6px 18px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.pill-opt.active {
|
||||
background: var(--accent-dim);
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Action buttons row */
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--glass-border);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.action-btn.accent {
|
||||
border-color: rgba(0, 255, 136, 0.3);
|
||||
color: var(--accent);
|
||||
background: rgba(0, 255, 136, 0.08);
|
||||
}
|
||||
|
||||
.action-btn.accent:active {
|
||||
background: rgba(0, 255, 136, 0.2);
|
||||
}
|
||||
|
||||
.action-btn.dim {
|
||||
color: var(--text-dim);
|
||||
border-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.action-btn.flash {
|
||||
animation: btn-flash 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes btn-flash {
|
||||
0% { background: rgba(0, 255, 136, 0.3); }
|
||||
100% { background: rgba(255, 255, 255, 0.06); }
|
||||
}
|
||||
|
||||
/* Preset row */
|
||||
.preset-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.preset-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.preset-chip {
|
||||
padding: 4px 12px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.preset-chip:active {
|
||||
background: rgba(0, 255, 136, 0.15);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Synth panel */
|
||||
.synth-panel {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.synth-panel.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.synth-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.synth-row label {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.synth-row input[type="range"] {
|
||||
flex: 1;
|
||||
accent-color: var(--accent);
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.synth-row select {
|
||||
flex: 1;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.synth-status {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* Loss section */
|
||||
.loss-section {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.loss-section label {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
#loss-canvas {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
/* Advanced section */
|
||||
.advanced-section {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.advanced-section summary {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.raw-params {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.raw-param {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.raw-param-label {
|
||||
width: 70px;
|
||||
color: var(--text-dim);
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.raw-param input[type="range"] {
|
||||
flex: 1;
|
||||
accent-color: var(--accent);
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.raw-param-val {
|
||||
width: 36px;
|
||||
color: var(--text-dim);
|
||||
text-align: left;
|
||||
flex-shrink: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ---- Synth quick controls (play button next to back) ---- */
|
||||
.synth-quick-controls {
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
left: 52px;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(13, 13, 13, 0.65);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.play-btn:active {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.play-btn.playing {
|
||||
border-color: rgba(0, 255, 136, 0.4);
|
||||
color: var(--accent);
|
||||
background: rgba(0, 255, 136, 0.12);
|
||||
}
|
||||
|
||||
.play-drawer {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 18px;
|
||||
background: rgba(13, 13, 13, 0.65);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
margin-left: 6px;
|
||||
height: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.play-drawer label {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.play-drawer input[type="range"] {
|
||||
width: 80px;
|
||||
accent-color: var(--accent);
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.play-drawer span {
|
||||
font-size: 10px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 24px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.synth-quick-controls:hover .play-drawer,
|
||||
.play-drawer.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* ---- Utility ---- */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ---- Scrollbar styling ---- */
|
||||
.bottom-sheet::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.bottom-sheet::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.bottom-sheet::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* ---- Media queries ---- */
|
||||
@media (min-width: 768px) {
|
||||
.joystick-container {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
bottom: 156px;
|
||||
left: 32px;
|
||||
}
|
||||
|
||||
#joy-map {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.rl-buttons {
|
||||
bottom: 196px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.rl-btn {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.bottom-sheet {
|
||||
max-width: 600px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
827
playground/css/b-workbench.css
Normal file
827
playground/css/b-workbench.css
Normal file
|
|
@ -0,0 +1,827 @@
|
|||
/* NISPS Workbench — Design B CSS */
|
||||
|
||||
/* === Reset & Base === */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg: #0d0d0d;
|
||||
--surface: #1a1a1a;
|
||||
--elevated: #252525;
|
||||
--border: #222;
|
||||
--border-light: #333;
|
||||
--text: #e0e0e0;
|
||||
--text-dim: #888;
|
||||
--text-muted: #555;
|
||||
--accent-visual: #00ff88;
|
||||
--accent-synth: #ff6b35;
|
||||
--accent: var(--accent-visual);
|
||||
--danger: #ff4444;
|
||||
--good: #00cc66;
|
||||
--bad: #ff6644;
|
||||
--radius: 8px;
|
||||
--radius-sm: 4px;
|
||||
--transition: 0.2s ease;
|
||||
/* Group accent colors */
|
||||
--group-motion: #00ccff;
|
||||
--group-color: #ff00cc;
|
||||
--group-particles: #ffcc00;
|
||||
--group-forces: #ff3366;
|
||||
--group-effects: #9b59b6;
|
||||
/* Synth group colors */
|
||||
--group-osc: #ff6b35;
|
||||
--group-shapers: #ff006e;
|
||||
--group-filters: #3a86ff;
|
||||
--group-comb: #06d6a0;
|
||||
--group-fx: #8338ec;
|
||||
--group-output: #ffd166;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
overflow-x: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body.synth-mode {
|
||||
--accent: var(--accent-synth);
|
||||
}
|
||||
|
||||
/* === Layout === */
|
||||
.workbench {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.wb-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.wb-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.wb-back-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid #333;
|
||||
background: var(--elevated);
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
transition: all var(--transition);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wb-back-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.wb-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.wb-title-accent {
|
||||
color: var(--accent);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.wb-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.wb-mode-badge {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
background: var(--accent);
|
||||
color: var(--bg);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.wb-mode-badge.synth {
|
||||
background: var(--accent-synth);
|
||||
}
|
||||
|
||||
.wb-help-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border-light);
|
||||
background: var(--elevated);
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.wb-help-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* === Grid === */
|
||||
.wb-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* === Panel === */
|
||||
.wb-panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wb-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.wb-panel-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* === Canvas Panel === */
|
||||
.wb-canvas-panel {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.wb-canvas-wrap {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.wb-canvas-wrap canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#synth-vis-canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
}
|
||||
#synth-vis-canvas.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Presets */
|
||||
.presets {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.preset-pill {
|
||||
font-size: 10px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border-light);
|
||||
background: var(--elevated);
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.preset-pill:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* === Mapping Panel === */
|
||||
.wb-mapping-panel {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.wb-mapping-panel.follow-active {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.wb-mapping-area {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wb-heatmap-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wb-heatmap-wrap canvas {
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border-light);
|
||||
cursor: crosshair;
|
||||
touch-action: none;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.wb-heatmap-label {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Follow toggle button */
|
||||
.wb-follow-toggle-btn {
|
||||
font-size: 10px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border-light);
|
||||
background: var(--bg);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
font-family: inherit;
|
||||
}
|
||||
.wb-follow-toggle-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
.wb-follow-toggle-btn.active {
|
||||
background: var(--accent);
|
||||
color: var(--bg);
|
||||
border-color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Follow badge */
|
||||
.wb-follow-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
background: var(--accent);
|
||||
color: var(--bg);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Constellation */
|
||||
.wb-constellation-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.wb-constellation-wrap canvas {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wb-constellation-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* === Params Panel === */
|
||||
.wb-params-panel {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.wb-output-toggle {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.wb-toggle-btn {
|
||||
font-size: 10px;
|
||||
padding: 2px 10px;
|
||||
border: 1px solid var(--border-light);
|
||||
background: var(--bg);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.wb-toggle-btn:first-child { border-radius: 10px 0 0 10px; }
|
||||
.wb-toggle-btn:last-child { border-radius: 0 10px 10px 0; }
|
||||
.wb-toggle-btn.active {
|
||||
background: var(--accent);
|
||||
color: var(--bg);
|
||||
border-color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wb-param-groups {
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
/* Param group card */
|
||||
.wb-group {
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.wb-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
.wb-group-header:hover {
|
||||
background: var(--elevated);
|
||||
}
|
||||
|
||||
.wb-group-accent {
|
||||
width: 3px;
|
||||
height: 18px;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wb-group-name {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wb-group-sparkline {
|
||||
width: 40px;
|
||||
height: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wb-group-chevron {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
.wb-group.open .wb-group-chevron {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.wb-group-body {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
}
|
||||
.wb-group.open .wb-group-body {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.wb-group-params {
|
||||
padding: 4px 8px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
/* Individual param bar */
|
||||
.wb-param {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.wb-param-name {
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
width: 60px;
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wb-param-track {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: var(--surface);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.wb-param-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.1s ease;
|
||||
min-width: 1px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wb-param-value {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
width: 32px;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* === Controls Panel === */
|
||||
.wb-controls-panel {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.wb-mode-toggle {
|
||||
display: flex;
|
||||
padding: 8px 12px 4px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.wb-mode-btn {
|
||||
flex: 1;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--border-light);
|
||||
background: var(--bg);
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.wb-mode-btn.active {
|
||||
background: var(--accent);
|
||||
color: var(--bg);
|
||||
border-color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wb-action-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
padding: 4px 12px 8px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.wb-btn {
|
||||
padding: 6px 14px;
|
||||
border: 1px solid var(--border-light);
|
||||
background: var(--elevated);
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wb-btn:hover { border-color: var(--text-muted); }
|
||||
.wb-btn:active { transform: scale(0.97); }
|
||||
|
||||
.wb-btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--bg);
|
||||
border-color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.wb-btn-primary:hover { filter: brightness(1.15); }
|
||||
|
||||
.wb-btn-accent {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
.wb-btn-accent:hover { background: var(--accent); color: var(--bg); }
|
||||
|
||||
.wb-btn-danger {
|
||||
border-color: var(--danger);
|
||||
color: var(--danger);
|
||||
}
|
||||
.wb-btn-danger:hover { background: var(--danger); color: var(--bg); }
|
||||
|
||||
.wb-btn-good {
|
||||
background: var(--good);
|
||||
color: var(--bg);
|
||||
border-color: var(--good);
|
||||
font-weight: 600;
|
||||
}
|
||||
.wb-btn-bad {
|
||||
background: var(--bad);
|
||||
color: var(--bg);
|
||||
border-color: var(--bad);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wb-btn.flash {
|
||||
filter: brightness(1.8);
|
||||
}
|
||||
|
||||
.wb-key-hint {
|
||||
font-size: 10px;
|
||||
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Synth controls */
|
||||
.wb-synth-controls {
|
||||
padding: 4px 12px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.wb-synth-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.wb-synth-row label {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
min-width: 70px;
|
||||
}
|
||||
.wb-synth-row input[type="range"] {
|
||||
flex: 1;
|
||||
accent-color: var(--accent);
|
||||
height: 4px;
|
||||
}
|
||||
.wb-synth-row select {
|
||||
flex: 1;
|
||||
background: var(--elevated);
|
||||
border: 1px solid var(--border-light);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
padding: 3px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.wb-synth-status {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Loss plot */
|
||||
.wb-loss-wrap {
|
||||
padding: 4px 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.wb-loss-label {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 2px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.wb-loss-wrap canvas {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: block;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* Metrics */
|
||||
.wb-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4px;
|
||||
padding: 8px 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.wb-metric {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wb-metric-label {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.wb-metric-value {
|
||||
font-size: 11px;
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* === Toast === */
|
||||
.wb-toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 8px 20px;
|
||||
border-radius: 20px;
|
||||
background: var(--accent);
|
||||
color: var(--bg);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 2000;
|
||||
pointer-events: none;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.wb-toast.fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* === Help Overlay === */
|
||||
.wb-help-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.wb-help-content {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius);
|
||||
max-width: 520px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
color: var(--text);
|
||||
}
|
||||
.wb-help-content h2 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--accent);
|
||||
}
|
||||
.wb-help-content h3 {
|
||||
font-size: 14px;
|
||||
margin: 16px 0 6px;
|
||||
color: var(--text);
|
||||
}
|
||||
.wb-help-content p, .wb-help-content ol {
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.wb-help-content ol {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.wb-help-content li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* === Utility === */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: var(--bg); }
|
||||
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
|
||||
|
||||
/* === Mobile: single column === */
|
||||
@media (max-width: 767px) {
|
||||
.workbench {
|
||||
padding: 4px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.wb-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto auto auto;
|
||||
}
|
||||
|
||||
.wb-canvas-panel { grid-column: 1; grid-row: 1; min-height: 220px; }
|
||||
.wb-mapping-panel { grid-column: 1; grid-row: 2; }
|
||||
.wb-params-panel { grid-column: 1; grid-row: 3; max-height: 300px; }
|
||||
.wb-controls-panel { grid-column: 1; grid-row: 4; }
|
||||
|
||||
.wb-mapping-area {
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#mapping-canvas {
|
||||
max-width: 220px !important;
|
||||
}
|
||||
|
||||
.wb-title { font-size: 14px; }
|
||||
.presets { display: none; }
|
||||
|
||||
/* Collapsible sections on mobile */
|
||||
.wb-panel.collapsible > .wb-panel-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
.wb-panel.collapsible.collapsed > *:not(.wb-panel-header) {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* === Tablet and up === */
|
||||
@media (min-width: 768px) {
|
||||
.wb-canvas-panel {
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.wb-mapping-area {
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large screens */
|
||||
@media (min-width: 1100px) {
|
||||
.wb-canvas-panel {
|
||||
min-height: 450px;
|
||||
}
|
||||
}
|
||||
999
playground/css/c-journey.css
Normal file
999
playground/css/c-journey.css
Normal file
|
|
@ -0,0 +1,999 @@
|
|||
/* NISPS Journey — Design C */
|
||||
/* Phases that dissolve: Explore -> Teach -> Perform */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg: #0d0d0d;
|
||||
--glass-bg: rgba(13, 13, 13, 0.6);
|
||||
--glass-border: rgba(255, 255, 255, 0.08);
|
||||
--glass-blur: 16px;
|
||||
--accent: #00ff88;
|
||||
--accent-dim: rgba(0, 255, 136, 0.2);
|
||||
--accent-glow: rgba(0, 255, 136, 0.4);
|
||||
--danger: #ff4466;
|
||||
--text: #e0e0e0;
|
||||
--text-dim: rgba(255, 255, 255, 0.45);
|
||||
--text-muted: rgba(255, 255, 255, 0.25);
|
||||
--radius: 12px;
|
||||
--radius-sm: 8px;
|
||||
--radius-pill: 20px;
|
||||
--transition: 400ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--transition-fast: 200ms ease-out;
|
||||
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Segoe UI', system-ui, sans-serif;
|
||||
font-size: 14px;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Canvas
|
||||
============================================================ */
|
||||
#vis-canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: 0;
|
||||
transition: height var(--transition);
|
||||
}
|
||||
|
||||
.app.phase-teach #vis-canvas,
|
||||
.app.phase-teach #synth-vis-canvas {
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
/* Synth visualizer canvas */
|
||||
#synth-vis-canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: 0;
|
||||
transition: height var(--transition);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Phase dots (top-center)
|
||||
============================================================ */
|
||||
.phase-dots {
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 6px 14px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-pill);
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.phase-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid var(--text-dim);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.phase-dot.active {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 8px var(--accent-glow);
|
||||
}
|
||||
|
||||
.phase-dot:hover {
|
||||
border-color: var(--text);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Heatmap strip
|
||||
============================================================ */
|
||||
.heatmap-strip {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 90;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: opacity var(--transition);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.heatmap-cells {
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.heatmap-cell {
|
||||
flex: 0 0 auto;
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.heatmap-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
transition: width 0.1s ease-out;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.heatmap-strip.wide .heatmap-cell {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.heatmap-count {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
white-space: nowrap;
|
||||
min-width: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.heatmap-tooltip {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 6px;
|
||||
padding: 4px 10px;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
.heatmap-tooltip.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Mode pill (top-left)
|
||||
============================================================ */
|
||||
.mode-pill {
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
left: 56px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-pill);
|
||||
overflow: hidden;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.mode-opt {
|
||||
padding: 5px 14px;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.mode-opt.active {
|
||||
color: var(--accent);
|
||||
background: var(--accent-dim);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Explore phase prompts
|
||||
============================================================ */
|
||||
.explore-prompt {
|
||||
position: fixed;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 50;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.prompt-text {
|
||||
font-size: 18px;
|
||||
color: var(--text-dim);
|
||||
animation: fadeSlideIn 800ms ease-out forwards;
|
||||
opacity: 0;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
@keyframes fadeSlideIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.explore-ctas {
|
||||
position: fixed;
|
||||
bottom: calc(180px + var(--safe-bottom));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 60;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.cta-pill {
|
||||
padding: 10px 22px;
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-pill);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cta-pill:hover, .cta-pill:active {
|
||||
border-color: var(--text-dim);
|
||||
}
|
||||
|
||||
.cta-pill.primary {
|
||||
background: var(--accent-dim);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.cta-pill.primary:hover, .cta-pill.primary:active {
|
||||
background: rgba(0, 255, 136, 0.3);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Joystick
|
||||
============================================================ */
|
||||
.joystick-area {
|
||||
position: fixed;
|
||||
z-index: 85;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
/* Phase 1: bottom-center */
|
||||
.app.phase-explore .joystick-area {
|
||||
bottom: calc(24px + var(--safe-bottom));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Phase 2: left side, smaller */
|
||||
.app.phase-teach .joystick-area {
|
||||
bottom: auto;
|
||||
top: calc(40vh + 16px);
|
||||
left: 16px;
|
||||
transform: none;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Phase 2 RL: left side, same as examples */
|
||||
.app.phase-teach[data-teach-mode="rl"] .joystick-area {
|
||||
left: 16px;
|
||||
transform: none;
|
||||
top: calc(40vh + 16px);
|
||||
}
|
||||
|
||||
/* Phase 3: ghost, bottom-center, smaller */
|
||||
.app.phase-perform .joystick-area {
|
||||
bottom: calc(60px + var(--safe-bottom));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.joystick-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
/* Noise ring for RL mode */
|
||||
.noise-ring {
|
||||
position: absolute;
|
||||
inset: -8px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--accent);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.app[data-teach-mode="rl"] .noise-ring {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Teach panel
|
||||
============================================================ */
|
||||
.teach-panel {
|
||||
position: fixed;
|
||||
top: 40vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 80;
|
||||
background: var(--bg);
|
||||
border-top: 1px solid var(--glass-border);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 0 16px 24px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(20px);
|
||||
transition: opacity var(--transition), transform var(--transition);
|
||||
}
|
||||
|
||||
.app.phase-teach .teach-panel {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Teach tabs */
|
||||
.teach-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin: 12px 0;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-radius: var(--radius-pill);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
.teach-tab {
|
||||
flex: 1;
|
||||
padding: 8px 0;
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.teach-tab.active {
|
||||
color: var(--accent);
|
||||
background: var(--accent-dim);
|
||||
}
|
||||
|
||||
/* Teach content sections */
|
||||
.teach-content {
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
.teach-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding-left: 136px; /* room for joystick on left */
|
||||
}
|
||||
|
||||
.app.phase-teach[data-teach-mode="rl"] .teach-layout {
|
||||
padding-left: 136px;
|
||||
}
|
||||
|
||||
/* Preset grid */
|
||||
.preset-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.preset-thumb {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1.5px solid var(--glass-border);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
color: var(--text-dim);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.preset-thumb.selected {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-dim);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.preset-thumb:hover {
|
||||
border-color: var(--text-dim);
|
||||
}
|
||||
|
||||
.preset-canvas {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 4px;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
/* Teach actions */
|
||||
.teach-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Minimap */
|
||||
.minimap {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid var(--glass-border);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* Fine-tune */
|
||||
.fine-tune {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.fine-tune summary {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.param-sliders {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4px 12px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.param-slider-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.param-slider-row label {
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
width: 50px;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.param-slider-row input[type="range"] {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.param-slider-row input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* RL sub-mode */
|
||||
#teach-rl {
|
||||
padding-left: 136px;
|
||||
}
|
||||
|
||||
.rl-hint {
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
font-size: 13px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.thumb-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.rl-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.rl-btn {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--glass-border);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rl-btn.up:hover, .rl-btn.up:active {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-dim);
|
||||
}
|
||||
|
||||
.rl-btn.down:hover, .rl-btn.down:active {
|
||||
border-color: var(--danger);
|
||||
background: rgba(255, 68, 102, 0.15);
|
||||
}
|
||||
|
||||
/* Synth section */
|
||||
.synth-section {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--glass-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.synth-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.synth-row label {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.synth-row input[type="range"] {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.synth-row input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.synth-row select {
|
||||
flex: 1;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-sm);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.synth-status {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* Teach status bar */
|
||||
.teach-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 8px;
|
||||
border-top: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
/* Done button */
|
||||
.done-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--bg);
|
||||
background: var(--accent);
|
||||
border: none;
|
||||
border-radius: var(--radius-pill);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.done-btn:hover, .done-btn:active {
|
||||
background: #33ffaa;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Buttons (shared)
|
||||
============================================================ */
|
||||
.action-btn {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-pill);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.action-btn:hover, .action-btn:active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: var(--text-dim);
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: var(--accent-dim);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.action-btn.primary:hover {
|
||||
background: rgba(0, 255, 136, 0.3);
|
||||
}
|
||||
|
||||
.action-btn.accent {
|
||||
background: rgba(0, 255, 136, 0.12);
|
||||
border-color: rgba(0, 255, 136, 0.3);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.action-btn.accent:hover {
|
||||
background: rgba(0, 255, 136, 0.2);
|
||||
}
|
||||
|
||||
.action-btn.dim {
|
||||
color: var(--text-dim);
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.action-btn.small {
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Train button pulse animation */
|
||||
.action-btn.accent.pulse {
|
||||
animation: trainPulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes trainPulse {
|
||||
0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
|
||||
50% { box-shadow: 0 0 12px 4px var(--accent-glow); }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Edit pill (Phase 3)
|
||||
============================================================ */
|
||||
.edit-pill-wrap {
|
||||
position: fixed;
|
||||
bottom: calc(16px + var(--safe-bottom));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 80;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.app.phase-perform .edit-pill-wrap {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.edit-pill {
|
||||
padding: 10px 28px;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-pill);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.edit-pill:hover {
|
||||
border-color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* Audio control (Phase 3, synth mode) */
|
||||
.audio-control {
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-pill);
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.audio-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--glass-border);
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.audio-vol {
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.audio-vol::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Phase visibility rules
|
||||
============================================================ */
|
||||
|
||||
/* Explore: show prompts, CTAs; hide teach panel, edit pill */
|
||||
.app.phase-explore .teach-panel,
|
||||
.app.phase-explore .edit-pill-wrap,
|
||||
.app.phase-explore .audio-control { opacity: 0; pointer-events: none; }
|
||||
|
||||
/* Teach: hide prompts, CTAs, edit pill */
|
||||
.app.phase-teach .explore-prompt,
|
||||
.app.phase-teach .explore-ctas,
|
||||
.app.phase-teach .edit-pill-wrap,
|
||||
.app.phase-teach .audio-control { opacity: 0; pointer-events: none; }
|
||||
|
||||
/* Perform: hide prompts, CTAs, teach panel */
|
||||
.app.phase-perform .explore-prompt,
|
||||
.app.phase-perform .explore-ctas,
|
||||
.app.phase-perform .teach-panel { opacity: 0; pointer-events: none; }
|
||||
|
||||
/* Perform phase: auto-fade idle elements */
|
||||
.app.phase-perform.idle .edit-pill-wrap {
|
||||
opacity: 0.1;
|
||||
}
|
||||
.app.phase-perform.idle .heatmap-strip {
|
||||
opacity: 0.15;
|
||||
}
|
||||
.app.phase-perform.idle .phase-dots {
|
||||
opacity: 0.15;
|
||||
}
|
||||
.app.phase-perform.idle .mode-pill {
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Back button
|
||||
============================================================ */
|
||||
.back-btn {
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
z-index: 110;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 50%;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
border-color: var(--text-dim);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
RL key hints
|
||||
============================================================ */
|
||||
.rl-key-hints {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.key-hint {
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-size: 10px;
|
||||
color: #555;
|
||||
width: 64px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Follow mode
|
||||
============================================================ */
|
||||
.follow-indicator {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 8px var(--accent-glow);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.follow-pill {
|
||||
position: absolute;
|
||||
bottom: -24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 2px 10px;
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-pill);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.follow-pill:hover {
|
||||
border-color: var(--text-dim);
|
||||
}
|
||||
|
||||
.follow-pill.active {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-dim);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Hidden utility
|
||||
============================================================ */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Responsive
|
||||
============================================================ */
|
||||
@media (min-width: 600px) {
|
||||
.teach-layout {
|
||||
padding-left: 140px;
|
||||
}
|
||||
|
||||
.preset-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.rl-buttons {
|
||||
gap: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.preset-canvas {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.teach-layout {
|
||||
padding-left: 110px;
|
||||
}
|
||||
|
||||
.cta-pill {
|
||||
padding: 8px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
192
playground/designs.html
Normal file
192
playground/designs.html
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>NISPS Playground</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body {
|
||||
background: #0d0d0d;
|
||||
color: #ccc;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Segoe UI', system-ui, sans-serif;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.page {
|
||||
max-width: 780px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 24px 64px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #00ff88;
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.tagline {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 32px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.intro {
|
||||
list-style: none;
|
||||
margin-bottom: 48px;
|
||||
padding: 0;
|
||||
}
|
||||
.intro li {
|
||||
font-size: 15px;
|
||||
color: #aaa;
|
||||
line-height: 1.6;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.intro li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #333;
|
||||
}
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
}
|
||||
.card {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.card:hover {
|
||||
border-color: #444;
|
||||
background: #1f1f1f;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.preview {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
border-radius: 16px 16px 0 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #111;
|
||||
}
|
||||
.preview iframe {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
transform: scale(0.5);
|
||||
transform-origin: top left;
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card-body {
|
||||
padding: 24px 28px 28px;
|
||||
position: relative;
|
||||
}
|
||||
.card-label {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.card:nth-child(1) .card-label { color: #00ff88; }
|
||||
.card:nth-child(2) .card-label { color: #3a86ff; }
|
||||
.card:nth-child(3) .card-label { color: #ff6b35; }
|
||||
.card-body h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #eee;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.card-body p {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.card-link {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #00ff88;
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
.card:nth-child(2) .card-link { color: #3a86ff; }
|
||||
.card:nth-child(3) .card-link { color: #ff6b35; }
|
||||
.card-link:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
.page { max-width: 1100px; }
|
||||
.cards {
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
}
|
||||
.card { flex: 1; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<h1>NISPS Playground</h1>
|
||||
<p class="tagline">Neural Interactive Shaping of Parameter Spaces</p>
|
||||
|
||||
<ul class="intro">
|
||||
<li>Map a 2D joystick to 20 visual parameters or 126 synthesizer parameters through a neural network</li>
|
||||
<li>Two learning modes: show examples of what you want, or give thumbs up/down feedback</li>
|
||||
<li>The network learns to interpolate — move the joystick and the entire parameter space responds</li>
|
||||
<li>You don't need to understand the parameters — just explore and teach</li>
|
||||
</ul>
|
||||
|
||||
<div class="cards">
|
||||
<div class="card">
|
||||
<div class="preview">
|
||||
<iframe src="a-immersive.html" loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-label">A</span>
|
||||
<h2>Immersive</h2>
|
||||
<p>Full-screen canvas with floating controls. The visualization IS the interface — everything else gets out of the way.</p>
|
||||
<a href="a-immersive.html" class="card-link">Try it →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="preview">
|
||||
<iframe src="b-workbench.html" loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-label">B</span>
|
||||
<h2>Workbench</h2>
|
||||
<p>Dashboard layout with a 2D heatmap showing what the network has learned. Built for understanding the mapping.</p>
|
||||
<a href="b-workbench.html" class="card-link">Try it →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="preview">
|
||||
<iframe src="c-journey.html" loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-label">C</span>
|
||||
<h2>Journey</h2>
|
||||
<p>Three phases — Explore, Teach, Perform — that dissolve as you master the mapping. The UI fades away after training.</p>
|
||||
<a href="c-journey.html" class="card-link">Try it →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
103
playground/devlog/2026-03-21-ui-redesign-explorations.md
Normal file
103
playground/devlog/2026-03-21-ui-redesign-explorations.md
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
# Playground UI Redesign Explorations
|
||||
|
||||
**Date**: 2026-03-21 → 2026-03-22
|
||||
**Status**: Three designs built and iterated through 4 rounds of feedback. Several refinements still open.
|
||||
|
||||
## Context
|
||||
|
||||
The existing playground UI (`index.html`) is a single-column mobile-first layout: header, canvas, 20 parameter bars, joystick + controls. It works but has several tensions:
|
||||
|
||||
- **Individual param bars dominate the screen** and are only interactive in Examples mode
|
||||
- **Two orthogonal mode axes** (learning mode: examples/RL, output mode: visual/synth) live in different places with different UI patterns
|
||||
- The synth side panel feels bolted on
|
||||
- The "teach then perform" arc isn't surfaced — new users don't know what to do first
|
||||
- Most importantly: **manually setting sliders contradicts the core thesis** — NISPS exists precisely because you *shouldn't* need to understand individual parameters
|
||||
|
||||
With the C15 synth mode now at **126 parameters**, the slider approach is impossible, making the ML mapping the only viable interface.
|
||||
|
||||
## Design Thesis
|
||||
|
||||
The three designs explore different answers to: **if users shouldn't set params directly, what DO they interact with?**
|
||||
|
||||
## Design A: "Immersive"
|
||||
|
||||
**File**: `a-immersive.html` | **Philosophy**: The canvas IS the app
|
||||
|
||||
The flow field fills the entire viewport. Everything else floats on top as translucent glassmorphism overlays:
|
||||
|
||||
- **Floating circular joystick** with integrated training-example minimap (merged into one control)
|
||||
- **Heatmap strip** at top — horizontal fill bars (like a tiny equalizer) showing output values at a glance. Hidden in synth mode since the full-screen synth visualizer serves this purpose.
|
||||
- **Bottom sheet** with chevron toggle (collapsed/expanded), mode toggles always visible in a sticky floating bar
|
||||
- **RL mode is default** — floating thumbs up/down buttons with key hints (1/2) built in
|
||||
- **Follow mode** for trackpad-friendly exploration without holding the mouse
|
||||
- **Synth mode**: full-screen parameter landscape (126 vertical bars grouped by synthesis section), interactive/draggable in examples mode, with a quick play button + hover drawer next to the back button
|
||||
|
||||
**Strengths**: Feels like an instrument. Canvas gets maximum space. The synth visualizer conveys the full 126-param scale.
|
||||
**Open issues**: See bd issue for remaining refinements (synth bar layout, slider interactivity, default mode).
|
||||
|
||||
## Design B: "Workbench"
|
||||
|
||||
**File**: `b-workbench.html` | **Philosophy**: Show the mapping, not the params
|
||||
|
||||
A CSS grid dashboard (2-column on desktop, single-column with collapsible sections on mobile):
|
||||
|
||||
- **Mapping heatmap** (the key innovation): a 2D canvas sampling a 20×20 grid through the network, showing the learned function as a color field. Training examples are visible dots. Click/drag anywhere to control position — the mapping IS the joystick (merged).
|
||||
- **Parameter constellation**: dots in a circle, sized by value, with a count label ("20 parameters" / "126 synth parameters")
|
||||
- **Semantic param groups**: collapsible cards with sparkline headers. 5 groups for visual mode, 17 groups for synth mode (covering all 126 params by synthesis section)
|
||||
- **Synth mode**: replaces the flow field canvas with a parameter landscape visualization (126 grouped bars)
|
||||
- **Softened heatmap colors** with grid overlay for readability
|
||||
|
||||
**Strengths**: The mapping heatmap makes the learned function tangible. Param groups reduce cognitive load.
|
||||
**Open issues**: Visual pill toggle reliability, heatmap color tuning.
|
||||
|
||||
## Design C: "Journey"
|
||||
|
||||
**File**: `c-journey.html` | **Philosophy**: The UI teaches you, then disappears
|
||||
|
||||
Three phases that transition based on user actions:
|
||||
|
||||
1. **Explore** (start): fullscreen canvas + floating joystick + gentle prompts. Minimal chrome.
|
||||
2. **Teach** (active training): canvas shrinks to ~40%. Teaching interface with mode tabs (Examples/RL). Preset snapshot grid. Minimap of examples. Collapsible raw sliders.
|
||||
3. **Perform** (post-training): canvas expands back to fullscreen. Controls fade to near-invisible after 5s inactivity.
|
||||
|
||||
- **RL mode is default** teach mode with keyboard shortcuts (1/2) working in all phases
|
||||
- **Heatmap strip** with horizontal fill bars, scales from 20 to 126 params
|
||||
- **Synth mode**: parameter landscape visualization replacing the flow field
|
||||
- **Follow mode** with double-click toggle and pill button
|
||||
|
||||
**Strengths**: Maps perfectly to the real user arc. Phase 3 auto-dissolve is genuinely novel.
|
||||
**Open issues**: RL mode joystick visibility, fine-tune slider style consistency.
|
||||
|
||||
## Shared Architecture
|
||||
|
||||
All three designs share unchanged modules:
|
||||
- `js/nisps/` — MLP, IML, Dataset, Layer, Node (the ML engine)
|
||||
- `js/ui/visualizer.js` — FlowFieldVisualizer (Canvas2D particle system)
|
||||
- `js/synth/` — C15Bridge (WASM synth), Arpeggiator, param-map (126 params)
|
||||
|
||||
Each design has its own HTML + CSS + app.js. The `designs.html` homepage links to all three with live iframe previews.
|
||||
|
||||
### Common features across all designs:
|
||||
- **126-output MLP** with `[32, 48, 64]` hidden layers
|
||||
- **Visual mode**: first 20 outputs → flow field particle system
|
||||
- **Synth mode**: all 126 outputs → SynthVisualizer (grouped bar chart) + C15 WASM engine
|
||||
- **`?tame=0.7`** URL parameter for safe-range constraining of synth params
|
||||
- **RL as default** learning mode with keyboard shortcuts (1=negative, 2=positive)
|
||||
- **Follow mode** for trackpad-friendly exploration
|
||||
- **localStorage persistence** (random on first boot, restores on refresh)
|
||||
- **Presets** padded from 20 to 126 outputs with 0.5 defaults
|
||||
|
||||
## Answered Questions
|
||||
|
||||
- **RL mode is now the default** across all designs — it's the purer expression of the NISPS thesis
|
||||
- **Network architecture scaled** from `[10, 10, 14]` (20 outputs) to `[32, 48, 64]` (126 outputs)
|
||||
- **Synth mode gets its own visualization** — parameter landscape with 126 grouped bars, not the particle system
|
||||
- **Snapshot teaching + fine-grained sliders coexist** — presets for quick setup, expandable raw params for power users
|
||||
|
||||
## Iteration History
|
||||
|
||||
1. **Initial build** (2026-03-21): Three designs from PRD, all functional
|
||||
2. **Round 1**: Added back buttons, follow mode, merged joystick+minimap (A), merged joystick+mapping (B), fixed RL functions (C)
|
||||
3. **Round 2**: Restored localStorage, added keyboard hints, fixed slider responsiveness (B), fixed Visual pill toggle (B), horizontal heatmap bars (A)
|
||||
4. **Round 3**: Upgraded to 126 outputs + `[32, 48, 64]` MLP, added SynthVisualizer to all designs, added randomize buttons, `?tame` URL param, back button SVGs
|
||||
5. **Round 4**: Homepage with live previews, synth quick-play button (A), interactive synth bars (A), heatmap hidden in synth mode (A), tame param to B+C
|
||||
1359
playground/js/a-app.js
Normal file
1359
playground/js/a-app.js
Normal file
File diff suppressed because it is too large
Load diff
1204
playground/js/b-app.js
Normal file
1204
playground/js/b-app.js
Normal file
File diff suppressed because it is too large
Load diff
1158
playground/js/c-app.js
Normal file
1158
playground/js/c-app.js
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue