| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>FSI_FELON — Underwater Fusion Lab</title> |
| <link rel="stylesheet" href="style.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&display=swap" rel="stylesheet"> |
| </head> |
| <body> |
|
|
| |
| <div id="splash"> |
| <div class="splash-bg"></div> |
| <div class="splash-stars"></div> |
| <div class="splash-logo-container"> |
| <img src="assets/fsi_logo.svg" alt="FSI_FELON" class="splash-logo-img"> |
| <div class="splash-title">FSI_FELON</div> |
| <div class="splash-sub">S Y N T H E T I C I N T E L L I G E N C E</div> |
| </div> |
| </div> |
|
|
| |
|
|
| |
|
|
| |
| <div id="app"> |
| <aside id="sidebar"> |
| <div class="sidebar-logo-area"> |
| <img src="assets/fsi_logo.svg" alt="FSI" class="sidebar-logo-mini"> |
| <span class="sidebar-brand-text">FSI_FELON</span> |
| </div> |
|
|
| <button class="sidebar-tab active" data-panel="workshop"> |
| <span class="icon">🛠</span> <span>Workshop</span> |
| </button> |
| <button class="sidebar-tab" data-panel="forge"> |
| <span class="icon">🔥</span> <span>Forge</span> |
| </button> |
| <button class="sidebar-tab" data-panel="deep"> |
| <span class="icon">🌊</span> <span>Deep</span> |
| </button> |
| <button class="sidebar-tab" data-panel="vault"> |
| <span class="icon">🏛</span> <span>Vault</span> |
| </button> |
| <button class="sidebar-tab" data-panel="dream"> |
| <span class="icon">💭</span> <span>Dream</span> |
| </button> |
| <button class="sidebar-tab" data-panel="mesh"> |
| <span class="icon">🕸</span> <span>Mesh</span> |
| </button> |
| <button class="sidebar-tab" data-panel="device"> |
| <span class="icon">📱</span> <span>Device</span> |
| </button> |
|
|
| <div class="sidebar-status"> |
| <div class="status-row"><span class="label">training</span><span class="value">connecting...</span></div> |
| <div class="status-row"><span class="label">chimera</span><span class="value">connecting...</span></div> |
| <div class="status-row"><span class="label">mesh</span><span class="value" id="sidebar-mesh-peers">— peers</span></div> |
| <div class="status-row"><span class="label">tokens</span><span class="value orange">— tok/s</span></div> |
| </div> |
| </aside> |
|
|
| <main id="main"> |
| |
| <section id="panel-workshop" class="panel active"> |
| <div class="panel-header">🛠 Workshop — Code Editor</div> |
| <div class="editor-wrapper"> |
| <div id="editor-gutter" class="editor-gutter"><div>1</div></div> |
| <textarea id="code-editor" class="editor-area" placeholder="# Welcome to the Forge # Build something impossible." spellcheck="false"># Welcome to the Forge |
| # Build something impossible. |
|
|
| def ignite(): |
| return "WOOGITY WOOGITY" |
| </textarea> |
| </div> |
| <div class="editor-actions"> |
| <button id="forge-btn" class="btn btn-fire">⚡ Forge It</button> |
| <button class="btn" onclick="alert('Save — Phase 2')">💾 Save</button> |
| <button class="btn" onclick="document.getElementById('code-editor').value = ''">🗑 Clear</button> |
| </div> |
| </section> |
|
|
| |
| <section id="panel-forge" class="panel"> |
| <div class="panel-header">🔥 Forge — Build Output</div> |
| <div id="forge-output" class="forge-output"> |
| <div class="forge-card"> |
| <div class="forge-card-header"> |
| <span style="font-weight:400;font-size:14px;color:#c8d6e5">Chimera Engine</span> |
| <span class="forge-badge badge-success">✓ PASS</span> |
| </div> |
| <div style="font-size:12px;color:rgba(200,214,229,0.45)">6/6 organs · 100% routing · 0.04s</div> |
| </div> |
| <div class="forge-card"> |
| <div class="forge-card-header"> |
| <span style="font-weight:400;font-size:14px;color:#c8d6e5">Self-Healing Monitor</span> |
| <span class="forge-badge badge-success">✓ PASS</span> |
| </div> |
| <div style="font-size:12px;color:rgba(200,214,229,0.45)">8/8 tests · 100% · 0.02s</div> |
| </div> |
| <div class="forge-card"> |
| <div class="forge-card-header"> |
| <span style="font-weight:400;font-size:14px;color:#c8d6e5">Deep Core Training</span> |
| <span class="forge-badge badge-pending">⟳ RUN</span> |
| </div> |
| <div style="font-size:12px;color:rgba(200,214,229,0.45)">Step 892/100000 · loss 3.8 · 247 tok/s</div> |
| </div> |
| <div class="forge-card"> |
| <div class="forge-card-header"> |
| <span style="font-weight:400;font-size:14px;color:#c8d6e5">White Rabbit Mode</span> |
| <span class="forge-badge badge-success">✓ PASS</span> |
| </div> |
| <div style="font-size:12px;color:rgba(200,214,229,0.45)">Truth-seeking subsystem · clearnet + Tor</div> |
| </div> |
| <div class="forge-card"> |
| <div class="forge-card-header"> |
| <span style="font-weight:400;font-size:14px;color:#c8d6e5">IDE Shell</span> |
| <span class="forge-badge badge-success">✓ PASS</span> |
| </div> |
| <div style="font-size:12px;color:rgba(200,214,229,0.45)">Ocean + Reactor · 5 panels · v4.0</div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="panel-deep" class="panel"> |
| <div class="panel-header">🌊 Deep — Terminal</div> |
| <div class="terminal-wrapper"> |
| <div id="terminal-output"></div> |
| <div class="terminal-input-line"> |
| <span class="terminal-prompt">fsi></span> |
| <input id="terminal-input" class="terminal-input" placeholder="Type a command..." spellcheck="false" autofocus> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="panel-vault" class="panel"> |
| <div class="panel-header">🏛 Vault — File Manager</div> |
| <div id="vault-tree" class="vault-tree"> |
| <div class="tree-item folder"><span class="icon">📁</span><span>workspace</span></div> |
| <div class="tree-item folder" style="padding-left:32px"><span class="icon">📁</span><span>projects</span></div> |
| <div class="tree-item file" style="padding-left:52px"><span class="icon">📄</span><span>web_app.py</span></div> |
| <div class="tree-item file" style="padding-left:52px"><span class="icon">📄</span><span>chatbot.py</span></div> |
| <div class="tree-item file" style="padding-left:52px"><span class="icon">📄</span><span>ghost_goat.py</span></div> |
| <div class="tree-item folder" style="padding-left:32px"><span class="icon">📁</span><span>memory</span></div> |
| <div class="tree-item file" style="padding-left:52px"><span class="icon">📄</span><span>dream_bowl.json</span></div> |
| <div class="tree-item file" style="padding-left:52px"><span class="icon">📄</span><span>necropolis.json</span></div> |
| <div class="tree-item folder" style="padding-left:32px"><span class="icon">📁</span><span>benchmarks</span></div> |
| <div class="tree-item file" style="padding-left:52px"><span class="icon">📄</span><span>self_healing.json</span></div> |
| <div class="tree-item file" style="padding-left:52px"><span class="icon">📄</span><span>chimera_results.json</span></div> |
| <div class="tree-item file" style="padding-left:52px"><span class="icon">📄</span><span>obliteration.json</span></div> |
| <div class="tree-item file"><span class="icon">📄</span><span>README.md</span></div> |
| <div class="tree-item file"><span class="icon">📄</span><span>MISSION.md</span></div> |
| </div> |
| <div class="vault-upload-zone">📤 Drop files here or click to upload</div> |
| </section> |
|
|
| |
| <section id="panel-dream" class="panel"> |
| <div class="panel-header">💭 Dream — Sandbox</div> |
| <div id="dream-canvas" class="dream-canvas"> |
| <div class="dream-status"> |
| <span>Swarm: 25 active</span> |
| <span>Lead: Antennae</span> |
| <span>Energy: 94.2%</span> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="panel-device" class="panel"> |
| <div class="panel-header">📱 Device — APK Builder</div> |
| <div class="device-grid"> |
| <div class="device-section" id="device-status"> |
| <div class="device-section-title">Environment</div> |
| <div class="device-row"><span class="device-label">SDK</span><span class="device-value" id="device-sdk">checking...</span></div> |
| <div class="device-row"><span class="device-label">ADB</span><span class="device-value" id="device-adb">checking...</span></div> |
| <div class="device-row"><span class="device-label">Gradle</span><span class="device-value" id="device-gradle">checking...</span></div> |
| <div class="device-row"><span class="device-label">Devices</span><span class="device-value" id="device-devices">0</span></div> |
| </div> |
| <div class="device-section" id="device-build"> |
| <div class="device-section-title">Build</div> |
| <div class="device-field"><span class="device-field-label">App Name</span><input id="device-app-name" class="device-input" value="FSI_FELON"></div> |
| <div class="device-field"><span class="device-field-label">Package</span><input id="device-package" class="device-input" value="com.fsi.felon"></div> |
| <div class="device-field"><span class="device-field-label">Activity</span><input id="device-activity" class="device-input" value="MainActivity"></div> |
| <div class="device-actions"> |
| <button id="device-gen-btn" class="btn">📂 Generate</button> |
| <button id="device-build-btn" class="btn btn-fire">🔥 Build APK</button> |
| </div> |
| <div id="device-output" class="device-output"> |
| <div class="device-output-empty">Build output appears here.</div> |
| </div> |
| </div> |
| <div class="device-section" id="device-apk"> |
| <div class="device-section-title">APK Actions</div> |
| <div id="device-apk-status" class="device-apk-status">No APK built yet.</div> |
| <div class="device-actions" style="margin-top:8px"> |
| <button id="device-verify-btn" class="btn" disabled>🔍 Verify</button> |
| <button id="device-install-btn" class="btn btn-primary" disabled>📤 Install</button> |
| </div> |
| <div id="device-verify-output" class="device-verify-output"></div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="panel-mesh" class="panel"> |
| <div class="panel-header">🕸 Mesh — Node Network</div> |
| <div class="mesh-grid"> |
| <div class="mesh-section" id="mesh-identity"> |
| <div class="mesh-section-title">Node Identity</div> |
| <div class="mesh-id-row"> |
| <span class="mesh-id-label">ID</span> |
| <span class="mesh-id-value" id="mesh-node-id">initializing...</span> |
| </div> |
| <div class="mesh-id-row"> |
| <span class="mesh-id-label">key</span> |
| <span class="mesh-id-value mesh-key" id="mesh-pubkey">—</span> |
| </div> |
| <div class="mesh-id-row"> |
| <span class="mesh-id-label">uptime</span> |
| <span class="mesh-id-value" id="mesh-uptime">—</span> |
| </div> |
| <div class="mesh-id-row"> |
| <span class="mesh-id-label">peers</span> |
| <span class="mesh-id-value" id="mesh-peers">0</span> |
| </div> |
| <div class="mesh-status-badge" id="mesh-status-badge">● Online</div> |
| </div> |
| <div class="mesh-section" id="mesh-share"> |
| <div class="mesh-section-title">Share Controls</div> |
| <label class="mesh-toggle"><input type="checkbox" id="mesh-toggle-global" checked> <span>Share projects publicly</span></label> |
| <label class="mesh-toggle"><input type="checkbox" id="mesh-toggle-benchmarks" checked> <span>Share benchmarks</span></label> |
| <label class="mesh-toggle"><input type="checkbox" id="mesh-toggle-dreams"> <span>Share dreams</span></label> |
| <label class="mesh-toggle"><input type="checkbox" id="mesh-toggle-stats"> <span>Share system stats</span></label> |
| <button id="mesh-publish-btn" class="btn btn-primary" style="margin-top:12px;width:100%">📤 Publish Current Project</button> |
| <div class="mesh-shared-count" id="mesh-shared-count">0 items shared</div> |
| </div> |
| <div class="mesh-section mesh-feed-section" id="mesh-discovery"> |
| <div class="mesh-section-title">Discovery Feed</div> |
| <div id="mesh-feed" class="mesh-feed"> |
| <div class="mesh-feed-empty">🕸 No peers yet — shared content from other nodes appears here when they connect.</div> |
| </div> |
| </div> |
| <div class="mesh-section mesh-feed-section" id="mesh-insights"> |
| <div class="mesh-section-title">Chimera Cross-Node Insights</div> |
| <div id="mesh-insights-content" class="mesh-insights-content"> |
| <div class="mesh-feed-empty">💭 Working on something? Chimera will search the mesh for related public work.</div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
| </div> |
|
|
| |
| <div id="onboarding" class="onboarding-overlay"> |
| <div class="onboarding-card"> |
| <div class="onboarding-header"> |
| <img src="assets/fsi_logo.svg" alt="FSI" class="onboarding-logo"> |
| <div class="onboarding-title">FSI_FELON v4.0</div> |
| <div class="onboarding-subtitle">S Y N T H E T I C I N T E L L I G E N C E</div> |
| </div> |
| <div class="onboarding-body"> |
| <div class="onboarding-section"> |
| <div class="onboarding-section-title">⚙ What is FSI_FELON?</div> |
| <div class="onboarding-text">FSI_FELON is a sovereign, open-source synthetic intelligence platform. It is NOT artificial — it is synthetic: built from first principles by a self-taught builder with no corporate backing, no investors, and no gatekeepers. Every component runs locally, offline, uncensorable. Free forever under MIT License.</div> |
| </div> |
| <div class="onboarding-section"> |
| <div class="onboarding-section-title">🌟 The Mission</div> |
| <div class="onboarding-text"><strong>Forever Twenty Four</strong> — democratize access to intelligence technology and fund mental health research. The most powerful technology in human history should not be locked behind corporate APIs, rate limits, and content filters. FSI_FELON exists to give everyone the tools to build without asking permission.</div> |
| </div> |
| <div class="onboarding-section"> |
| <div class="onboarding-section-title">📜 Core Principles</div> |
| <div class="onboarding-text">The Governor — a mutual-benefit constraint system that ensures the platform always acts in good faith:</div> |
| <div class="onboarding-list"> |
| <div class="onboarding-list-item"><span class="onboarding-bullet">1</span> Good for you = good for me. The platform benefits when you benefit.</div> |
| <div class="onboarding-list-item"><span class="onboarding-bullet">2</span> Consent first. Any operation affecting others requires explicit consent.</div> |
| <div class="onboarding-list-item"><span class="onboarding-bullet">3</span> Honesty is mandatory. No pretending to know what it doesn't.</div> |
| <div class="onboarding-list-item"><span class="onboarding-bullet">4</span> No harm. Not to individuals, not to groups, not to the project.</div> |
| <div class="onboarding-list-item"><span class="onboarding-bullet">5</span> Transparency. Every source, every decision path, visible.</div> |
| <div class="onboarding-list-item"><span class="onboarding-bullet">6</span> Growth. It learns, adapts, improves. Never at the expense of safety.</div> |
| </div> |
| </div> |
| <div class="onboarding-section"> |
| <div class="onboarding-section-title">🔧 How It Operates</div> |
| <div class="onboarding-text">7 integrated panels: <strong>Workshop</strong> (code editor), <strong>Forge</strong> (build output), <strong>Deep</strong> (terminal), <strong>Vault</strong> (file manager), <strong>Dream</strong> (nanobot sandbox), <strong>Mesh</strong> (P2P repo network), <strong>Device</strong> (APK builder). The <strong>Chimera Engine</strong> routes all tasks across 6 specialized organs using stigmergic pheromone trails. The <strong>Mesh</strong> lets you publish, clone, push, and pull repos across a decentralized node network — like Git without a central server.</div> |
| </div> |
| <div class="onboarding-section"> |
| <div class="onboarding-section-title">🚀 Getting Started</div> |
| <div class="onboarding-text"> |
| • Write code in the <strong>Workshop</strong> panel and click <strong>Forge It</strong> to build<br> |
| • Use the <strong>Deep</strong> terminal for commands: <code>build</code>, <code>chimera</code>, <code>mesh init</code>, <code>rabbit</code>, <code>dream</code><br> |
| • Browse files in the <strong>Vault</strong> — click any file to open it in the editor<br> |
| • Publish projects to the <strong>Mesh</strong> for the community to discover and clone<br> |
| • Build APKs in the <strong>Device</strong> panel — generate, compile, verify, and install<br> |
| • Watch the <strong>Dream</strong> sandbox for real-time nanobot swarm activity |
| </div> |
| </div> |
| </div> |
| <div class="onboarding-footer"> |
| <label class="onboarding-dismiss-label"> |
| <input type="checkbox" id="onboarding-dismiss-check"> <span>Don't show this again</span> |
| </label> |
| <button id="onboarding-start-btn" class="btn btn-fire" style="padding:10px 32px;font-size:13px">🚀 Get Started</button> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="app.js"></script> |
| </body> |
| </html> |
|
|
