d9be808aaa
- Replace fragmented green/blue/orange accent scheme with unified hacker orange (#ff6a00) across all CSS, JS canvas drawing, and param palettes - Redesign designs.html: monospace font, clickable cards, grid background, remove A/B/C labels; copy to index.html as landing page - Add JetBrains Mono font across all views for consistent techy aesthetic - Sharpen border-radius (pills 20px→6px, back buttons→6px) for angular feel - Restructure RL buttons: key numbers inside buttons (larger, white), teal-green for thumbs-up, dark red-orange for thumbs-down - Fix RL button z-index (25→45) so they render above the bottom sheet - Add Xavier-scaled weight randomization (spread parameter)
188 lines
7.9 KiB
HTML
188 lines
7.9 KiB
HTML
<!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="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<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"><span class="rl-icon">👎</span><span class="key-hint">1</span></button>
|
|
<button class="rl-btn up" id="btn-thumbs-up" title="Keep this"><span class="rl-icon">👍</span><span class="key-hint">2</span></button>
|
|
</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>
|