2026-03-21 23:57:58 +01:00
<!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 >
2026-03-22 00:36:00 +01:00
< 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" >
2026-03-21 23:57:58 +01:00
< 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" >
2026-03-22 00:36:00 +01:00
< 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 >
2026-03-21 23:57:58 +01:00
< / 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 >
