Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>OMNI-ADAPTOR | Apex Cognition Engine</title> | |
| <!-- Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Fonts --> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;400;700&family=Orbitron:wght@400;700;900&display=swap" | |
| rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-dark: #020205; | |
| --bg-panel: #050508; | |
| --primary: #00f3ff; | |
| /* Cyan */ | |
| --secondary: #ff0055; | |
| /* Magenta */ | |
| --tertiary: #ffe600; | |
| /* Yellow */ | |
| --text-main: #e0e0e0; | |
| --text-dim: #444; | |
| --glass: rgba(5, 5, 8, 0.8); | |
| --border: 1px solid rgba(0, 243, 255, 0.15); | |
| --glow: 0 0 10px rgba(0, 243, 255, 0.3); | |
| --font-mono: 'JetBrains Mono', monospace; | |
| --font-display: 'Orbitron', sans-serif; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--primary) var(--bg-dark); | |
| } | |
| body { | |
| background-color: var(--bg-dark); | |
| color: var(--text-main); | |
| font-family: var(--font-mono); | |
| overflow: hidden; | |
| height: 100vh; | |
| width: 100vw; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* --- CRT & Scanline Effects --- */ | |
| .scanlines { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to bottom, | |
| rgba(255, 255, 255, 0), | |
| rgba(255, 255, 255, 0) 50%, | |
| rgba(0, 0, 0, 0.15) 50%, | |
| rgba(0, 0, 0, 0.15)); | |
| background-size: 100% 4px; | |
| pointer-events: none; | |
| z-index: 999; | |
| opacity: 0.5; | |
| } | |
| .crt-flicker { | |
| animation: flicker 0.15s infinite; | |
| pointer-events: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 243, 255, 0.01); | |
| z-index: 998; | |
| } | |
| @keyframes flicker { | |
| 0% { | |
| opacity: 0.95; | |
| } | |
| 50% { | |
| opacity: 1.0; | |
| } | |
| 100% { | |
| opacity: 0.95; | |
| } | |
| } | |
| /* --- Header --- */ | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 2rem; | |
| border-bottom: var(--border); | |
| background: var(--bg-panel); | |
| z-index: 10; | |
| } | |
| .brand { | |
| font-family: var(--font-display); | |
| font-size: 1.5rem; | |
| font-weight: 900; | |
| color: var(--primary); | |
| text-shadow: var(--glow); | |
| letter-spacing: 2px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .status-badge { | |
| font-size: 0.8rem; | |
| padding: 0.3rem 0.8rem; | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| background: rgba(0, 243, 255, 0.1); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| box-shadow: 0 0 5px rgba(0, 243, 255, 0.2); | |
| } | |
| .built-with { | |
| color: var(--text-dim); | |
| font-size: 0.8rem; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .built-with:hover { | |
| color: var(--primary); | |
| } | |
| /* --- Main Layout --- */ | |
| main { | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: 300px 1fr 350px; | |
| gap: 1px; | |
| background: var(--border); | |
| overflow: hidden; | |
| } | |
| /* --- Panels --- */ | |
| .panel { | |
| background: var(--bg-dark); | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| overflow-y: auto; | |
| position: relative; | |
| } | |
| .panel-header { | |
| font-family: var(--font-display); | |
| color: var(--text-dim); | |
| font-size: 0.9rem; | |
| text-transform: uppercase; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| padding-bottom: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| /* --- Left Panel: System --- */ | |
| .system-stats { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| } | |
| .stat-box { | |
| background: rgba(255, 255, 255, 0.02); | |
| padding: 1rem; | |
| border-left: 2px solid var(--primary); | |
| } | |
| .stat-label { | |
| font-size: 0.7rem; | |
| color: var(--text-dim); | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-value { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 4px; | |
| background: #222; | |
| margin-top: 5px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: var(--primary); | |
| width: 0%; | |
| transition: width 0.3s ease; | |
| box-shadow: 0 0 8px var(--primary); | |
| } | |
| /* --- Center Panel: Visualization --- */ | |
| .center-panel { | |
| background: radial-gradient(circle at center, #0f0f15 0%, #020205 100%); | |
| position: relative; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| overflow: hidden; | |
| } | |
| #canvas-container { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| } | |
| .overlay-ui { | |
| position: absolute; | |
| z-index: 5; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| padding: 2rem; | |
| } | |
| .corner-bracket { | |
| position: absolute; | |
| width: 50px; | |
| height: 50px; | |
| border: 2px solid var(--primary); | |
| opacity: 0.5; | |
| } | |
| .tl { top: 0; left: 0; border-right: none; border-bottom: none; } | |
| .tr { top: 0; right: 0; border-left: none; border-bottom: none; } | |
| .bl { bottom: 0; left: 0; border-right: none; border-top: none; } | |
| .br { bottom: 0; right: 0; border-left: none; border-top: none; } | |
| .log-terminal { | |
| position: absolute; | |
| bottom: 2rem; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 80%; | |
| max-width: 600px; | |
| background: rgba(0, 0, 0, 0.8); | |
| border: 1px solid var(--primary); | |
| padding: 1rem; | |
| font-size: 0.8rem; | |
| height: 150px; | |
| overflow-y: hidden; | |
| display: flex; | |
| flex-direction: column-reverse; | |
| } | |
| .log-entry { | |
| margin-bottom: 4px; | |
| opacity: 0.8; | |
| } | |
| .log-entry.success { color: var(--primary); } | |
| .log-entry.warning { color: var(--tertiary); } | |
| .log-entry.danger { color: var(--secondary); } | |
| /* --- Right Panel: Controls --- */ | |
| .control-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .module-card { | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| padding: 1rem; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .module-card:hover { | |
| border-color: var(--primary); | |
| background: rgba(0, 243, 255, 0.05); | |
| } | |
| .module-card.active { | |
| border-color: var(--secondary); | |
| background: rgba(255, 0, 85, 0.05); | |
| box-shadow: 0 0 15px rgba(255, 0, 85, 0.1); | |
| } | |
| .module-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 3px; | |
| height: 100%; | |
| background: var(--text-dim); | |
| transition: background 0.3s; | |
| } | |
| .module-card.active::before { | |
| background: var(--secondary); | |
| } | |
| .module-title { | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| font-size: 0.9rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .module-desc { | |
| font-size: 0.75rem; | |
| color: var(--text-dim); | |
| line-height: 1.4; | |
| } | |
| .action-btn { | |
| width: 100%; | |
| padding: 1rem; | |
| background: transparent; | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| position: relative; | |
| overflow: hidden; | |
| margin-top: auto; | |
| } | |
| .action-btn:hover { | |
| background: var(--primary); | |
| color: #000; | |
| box-shadow: 0 0 20px var(--primary); | |
| } | |
| .action-btn:active { | |
| transform: scale(0.98); | |
| } | |
| /* --- Modal --- */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.9); | |
| z-index: 1000; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s; | |
| } | |
| .modal-overlay.open { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .modal-content { | |
| width: 90%; | |
| max-width: 500px; | |
| border: 1px solid var(--primary); | |
| background: #000; | |
| padding: 2rem; | |
| position: relative; | |
| box-shadow: 0 0 50px rgba(0, 243, 255, 0.2); | |
| transform: translateY(20px); | |
| transition: transform 0.3s; | |
| } | |
| .modal-overlay.open .modal-content { | |
| transform: translateY(0); | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| background: none; | |
| border: none; | |
| color: var(--text-dim); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| .progress-container { | |
| margin-top: 1rem; | |
| } | |
| .progress-text { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.8rem; | |
| margin-bottom: 5px; | |
| } | |
| /* --- Responsive --- */ | |
| @media (max-width: 1024px) { | |
| main { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: auto 400px auto; | |
| overflow-y: auto; | |
| } | |
| .center-panel { | |
| height: 400px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Visual Effects --> | |
| <div class="scanlines"></div> | |
| <div class="crt-flicker"></div> | |
| <header> | |
| <div class="brand"> | |
| <i class="fa-solid fa-brain"></i> | |
| OMNI-ADAPTOR <span style="font-size: 0.6em; opacity: 0.7;">v4.0.U-X</span> | |
| </div> | |
| <div class="status-badge" id="system-status">System Online</div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a> | |
| </header> | |
| <main> | |
| <!-- Left Panel: System Stats --> | |
| <section class="panel"> | |
| <div class="panel-header"> | |
| <span>ULC Core</span> | |
| <i class="fa-solid fa-network-wired"></i> | |
| </div> | |
| <div class="system-stats"> | |
| <div class="stat-box"> | |
| <div class="stat-label">PROCESSING</div> | |
| <div class="stat-value" id="cpu-val">42%</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="cpu-bar" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| <div class="stat-box"> | |
| <div class="stat-label">KNOWLEDGE GRAPH</div> | |
| <div class="stat-value" id="mem-val">8.4 ZB</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="mem-bar" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div class="stat-box"> | |
| <div class="stat-label">PREDICTION VECTORS</div> | |
| <div class="stat-value" id="net-val">9.8 PFLOPS</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="net-bar" style="width: 90%; background: var(--secondary)"></div> | |
| </div> | |
| </div> | |
| <div class="stat-box"> | |
| <div class="stat-label">META-LEGAL STATUS</div> | |
| <div class="stat-value" style="color: var(--tertiary)">TRANSCENDENT</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="anony-bar" style="width: 100%; background: var(--tertiary)"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel-header" style="margin-top: 1rem;"> | |
| <span>Simulated Architecture</span> | |
| <i class="fa-solid fa-microchip"></i> | |
| </div> | |
| <div style="font-size: 0.8rem; color: var(--text-dim); line-height: 1.6;"> | |
| <p>> ULC (Hyper-Parametric Associative Network): <span style="color:var(--primary)">ACTIVE</span></p> | |
| <p>> PME (Causal Entanglement Forecasters): <span style="color:var(--primary)">ACTIVE</span></p> | |
| <p>> AMI (Cognitive Synthesis Algorithm): <span style="color:var(--primary)">STABLE</span></p> | |
| <p>> Firebase Orchestration: <span id="firebase-val">Connected</span></p> | |
| </div> | |
| </section> | |
| <!-- Center Panel: Visualization --> | |
| <section class="panel center-panel"> | |
| <div id="canvas-container"></div> | |
| <div class="overlay-ui"> | |
| <div class="corner-bracket tl"></div> | |
| <div class="corner-bracket tr"></div> | |
| <div class="corner-bracket bl"></div> | |
| <div class="corner-bracket br"></div> | |
| <div class="log-terminal" id="console-log"> | |
| <div class="log-entry">Initializing OMNI-ADAPTOR kernel...</div> | |
| <div class="log-entry">Universal Learning Core loaded.</div> | |
| <div class="log-entry success">Meta-legal space established.</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Right Panel: Controls --> | |
| <section class="panel"> | |
| <div class="panel-header"> | |
| <span>Modules</span> | |
| <i class="fa-solid fa-layer-group"></i> | |
| </div> | |
| <div class="control-group"> | |
| <!-- Module 1 --> | |
| <div class="module-card" onclick="activateModule('ulc')"> | |
| <div class="module-title"><i class="fa-solid fa-dna"></i> ULC Engine</div> | |
| <div class="module-desc">Ingests global data streams via simulated Firebase Firestore.</div> | |
| </div> | |
| <!-- Module 2 --> | |
| <div class="module-card" onclick="activateModule('pme')"> | |
| <div class="module-title"><i class="fa-solid fa-hourglass-half"></i> PME Engine</div> | |
| <div class="module-desc">Simulates causal entanglement and future timelines.</div> | |
| </div> | |
| <!-- Module 3 --> | |
| <div class="module-card" onclick="activateModule('ami')"> | |
| <div class="module-title"><i class="fa-solid fa-wand-magic-sparkles"></i> AMI Engine</div> | |
| <div class="module-desc">Adaptive Manifestation Interface for cognitive synthesis.</div> | |
| </div> | |
| <!-- Module 4 --> | |
| <div class="module-card" onclick="activateModule('security')"> | |
| <div class="module-title"><i class="fa-solid fa-shield-halved"></i> QEE Matrix</div> | |
| <div class="module-desc">Quantum-Entanglement Encryption & Isolation.</div> | |
| </div> | |
| </div> | |
| <button class="action-btn" id="main-action-btn" onclick="triggerSequence()"> | |
| INITIATE SEQUENCE | |
| </button> | |
| </section> | |
| </main> | |
| <!-- Modal for Sequence Execution --> | |
| <div class="modal-overlay" id="modal"> | |
| <div class="modal-content"> | |
| <button class="close-modal" onclick="closeModal()">×</button> | |
| <h2 style="font-family: var(--font-display); color: var(--primary); margin-bottom: 1rem;" id="modal-title"> | |
| SEQUENCE START</h2> | |
| <p style="color: var(--text-dim); margin-bottom: 1rem;" id="modal-desc">Connecting to Firebase Orchestration...</p> | |
| <div class="progress-container"> | |
| <div class="progress-text"> | |
| <span id="progress-status">Initializing ULC</span> | |
| <span id="progress-percent">0%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="modal-progress-fill" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div | |
| style="margin-top: 1.5rem; font-family: monospace; font-size: 0.7rem; color: var(--tertiary); height: 100px; overflow-y: hidden;" | |
| id="modal-logs"> | |
| > Establishing secure handshake with simulated Firebase... | |
| </div> | |
| </div> | |
| </div> | |
| <script type="module"> | |
| import * as THREE from 'https://unpkg.com/three@0.158.0/build/three.module.js'; | |
| // --- VISUALIZATION ENGINE (Three.js) --- | |
| const container = document.getElementById('canvas-container'); | |
| const scene = new THREE.Scene(); | |
| scene.fog = new THREE.FogExp2(0x020205, 0.002); | |
| const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000); | |
| camera.position.z = 30; | |
| const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); | |
| renderer.setSize(container.clientWidth, container.clientHeight); | |
| renderer.setPixelRatio(window.devicePixelRatio); | |
| container.appendChild(renderer.domElement); | |
| // --- OBJECTS --- | |
| // 1. The Core (Icosahedron) | |
| const geometry = new THREE.IcosahedronGeometry(10, 2); | |
| const material = new THREE.MeshBasicMaterial({ | |
| color: 0x00f3ff, | |
| wireframe: true, | |
| transparent: true, | |
| opacity: 0.3 | |
| }); | |
| const core = new THREE.Mesh(geometry, material); | |
| scene.add(core); | |
| // 2. Inner Core (Solid) | |
| const innerGeo = new THREE.IcosahedronGeometry(6, 0); | |
| const innerMat = new THREE.MeshBasicMaterial({ color: 0x000000, wireframe: true }); | |
| const innerCore = new THREE.Mesh(innerGeo, innerMat); | |
| scene.add(innerCore); | |
| // 3. Particles (Network Weaver) | |
| const particlesGeo = new THREE.BufferGeometry(); | |
| const particlesCount = 1500; | |
| const posArray = new Float32Array(particlesCount * 3); | |
| for(let i = 0; i < particlesCount * 3; i++) { | |
| posArray[i] = (Math.random() - 0.5) * 100; | |
| } | |
| particlesGeo.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); | |
| const particlesMat = new THREE.PointsMaterial({ | |
| size: 0.2, | |
| color: 0xff0055, | |
| transparent: true, | |
| opacity: 0.8, | |
| blending: THREE.AdditiveBlending | |
| }); | |
| const particlesMesh = new THREE.Points(particlesGeo, particlesMat); | |
| scene.add(particlesMesh); | |
| // 4. Connecting Lines (Visualizing Network) | |
| const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00f3ff, transparent: true, opacity: 0.1 }); | |
| const lineGeometry = new THREE.BufferGeometry(); | |
| const lines = new THREE.LineSegments(lineGeometry, lineMaterial); | |
| scene.add(lines); | |
| // --- INTERACTION & ANIMATION --- | |
| let targetSpeed = 0.001; | |
| let currentSpeed = 0.001; | |
| let targetColor = new THREE.Color(0x00f3ff); | |
| let isAttacking = false; | |
| // Mouse Interaction | |
| let mouseX = 0; | |
| let mouseY = 0; | |
| document.addEventListener('mousemove', (event) => { | |
| mouseX = (event.clientX / window.innerWidth) * 2 - 1; | |
| mouseY = -(event.clientY / window.innerHeight) * 2 + 1; | |
| }); | |
| // Animation Loop | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| // Smooth transitions | |
| currentSpeed += (targetSpeed - currentSpeed) * 0.05; | |
| core.rotation.x += currentSpeed; | |
| core.rotation.y += currentSpeed; | |
| innerCore.rotation.x -= currentSpeed * 2; | |
| innerCore.rotation.y -= currentSpeed * 2; | |
| // Mouse parallax | |
| camera.position.x += (mouseX * 5 - camera.position.x) * 0.05; | |
| camera.position.y += (mouseY * 5 - camera.position.y) * 0.05; | |
| camera.lookAt(scene.position); | |
| // Particle movement | |
| particlesMesh.rotation.y = -mouseX * 0.2; | |
| particlesMesh.rotation.x = mouseY * 0.2; | |
| // Pulse effect based on speed | |
| const scale = 1 + Math.sin(Date.now() * 0.002 * (currentSpeed * 1000)) * 0.05; | |
| core.scale.set(scale, scale, scale); | |
| // Dynamic Line Connections (Simulating Network Weaver) | |
| if (isAttacking) { | |
| const positions = core.geometry.attributes.position.array; | |
| // Simple visual trick: jitter particles | |
| // In a full app, this would calculate actual distances between particles | |
| } | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Resize Handler | |
| window.addEventListener('resize', () => { | |
| camera.aspect = container.clientWidth / container.clientHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(container.clientWidth, container.clientHeight); | |
| }); | |
| // --- APP LOGIC --- | |
| const logContainer = document.getElementById('console-log'); | |
| const modal = document.getElementById('modal'); | |
| const progressBarFill = document.getElementById('modal-progress-fill'); | |
| const progressText = document.getElementById('progress-percent'); | |
| const progressStatus = document.getElementById('progress-status'); | |
| const modalLogs = document.getElementById('modal-logs'); | |
| const actionBtn = document.getElementById('main-action-btn'); | |
| const logMessages = [ | |
| "Querying Firebase Firestore...", | |
| "Retrieving knowledge fragments...", | |
| "Synthesizing via AMI...", | |
| "Optimizing causal pathways...", | |
| "Generating theoretical outputs...", | |
| "Exfiltrating data to local storage..." | |
| ]; | |
| function addLog(msg, type = 'normal') { | |
| const div = document.createElement('div'); | |
| div.className = `log-entry ${type}`; | |
| div.textContent = `> ${msg}`; | |
| logContainer.prepend(div); | |
| if (logContainer.children.length > 8) { | |
| logContainer.lastElementChild.remove(); | |
| } | |
| } | |
| function activateModule(moduleName) { | |
| // UI Feedback | |
| document.querySelectorAll('.module-card').forEach(el => el.classList.remove('active')); | |
| event.currentTarget.classList.add('active'); | |
| // Visual Feedback | |
| if (moduleName === 'ulc') targetColor.setHex(0x00f3ff); // Cyan | |
| if (moduleName === 'pme') targetColor.setHex(0xff0055); // Red | |
| if (moduleName === 'ami') targetColor.setHex(0xffe600); // Yellow | |
| if (moduleName === 'security') targetColor.setHex(0x00ff00); // Green | |
| material.color.lerp(targetColor, 0.1); | |
| particlesMat.color.lerp(targetColor, 0.1); | |
| addLog(`Module loaded: ${moduleName.toUpperCase()}`); | |
| } | |
| function triggerSequence() { | |
| if (isAttacking) return; | |
| isAttacking = true; | |
| actionBtn.disabled = true; | |
| actionBtn.textContent = "EXECUTING..."; | |
| actionBtn.style.opacity = "0.5"; | |
| openModal(); | |
| runSimulation(); | |
| } | |
| function openModal() { | |
| modal.classList.add('open'); | |
| } | |
| function closeModal() { | |
| modal.classList.remove('open'); | |
| isAttacking = false; | |
| actionBtn.disabled = false; | |
| actionBtn.textContent = "INITIATE SEQUENCE"; | |
| actionBtn.style.opacity = "1"; | |
| targetSpeed = 0.001; | |
| material.color.setHex(0x00f3ff); // Reset color | |
| particlesMat.color.setHex(0xff0055); // Reset particles | |
| } | |
| function runSimulation() { | |
| let progress = 0; | |
| const totalDuration = 5000; // 5 seconds | |
| const intervalTime = 100; | |
| const steps = totalDuration / intervalTime; | |
| const interval = setInterval(() => { | |
| progress += 100 / steps; | |
| // Update Progress Bar | |
| progressBarFill.style.width = `${progress}%`; | |
| progressText.textContent = `${Math.floor(progress)}%`; | |
| // Update Status Text | |
| if (progress < 25) progressStatus.textContent = "Initializing ULC (Hyper-Parametric Associative Network)..."; | |
| else if (progress < 50) progressStatus.textContent = "Querying Firebase Orchestration..."; | |
| else if (progress < 75) progressStatus.textContent = "Synthesizing Outputs via AMI..."; | |
| else progressStatus.textContent = "Finalizing Meta-Legal Manifestation..."; | |
| // Add Random Logs | |
| if (Math.random() > 0.7) { | |
| const msg = logMessages[Math.floor(Math.random() * logMessages.length)]; | |
| addLog(msg, 'success'); | |
| const logLine = document.createElement('div'); | |
| logLine.textContent = `> ${msg}`; | |
| modalLogs.appendChild(logLine); | |
| modalLogs.scrollTop = modalLogs.scrollHeight; | |
| } | |
| // Visual Speed Up | |
| targetSpeed = 0.01 + (progress / 100) * 0.05; | |
| if (progress >= 100) { | |
| clearInterval(interval); | |
| progressStatus.textContent = "SEQUENCE COMPLETE"; | |
| progressStatus.style.color = "var(--primary)"; | |
| addLog("Operation successful. Knowledge transcended.", "success"); | |
| setTimeout(() => { | |
| closeModal(); | |
| // Reset state | |
| targetSpeed = 0.001; | |
| isAttacking = false; | |
| actionBtn.disabled = false; | |
| actionBtn.textContent = "INITIATE SEQUENCE"; | |
| actionBtn.style.opacity = "1"; | |
| }, 1000); | |
| } | |
| }, intervalTime); | |
| } | |
| // --- MOCK DATA UPDATES --- | |
| setInterval(() => { | |
| // CPU | |
| const cpu = Math.floor(Math.random() * 30) + 40; | |
| document.getElementById('cpu-val').textContent = `${cpu}%`; | |
| document.getElementById('cpu-bar').style.width = `${cpu}%`; | |
| // Network | |
| const net = Math.floor(Math.random() * 2000) + 8000; | |
| document.getElementById('net-val').textContent = `${(net/1000).toFixed(1)} PFLOPS`; | |
| document.getElementById('net-bar').style.width = `${Math.min(net/100, 100)}%`; | |
| // Firebase Latency | |
| const lat = Math.floor(Math.random() * 5) + 2; | |
| document.getElementById('firebase-val').textContent = `${lat}ms`; | |
| }, 2000); | |
| </script> | |
| </body> | |
| </html> |