Update index.html

Author: AionSystem

AION-PAGE/AION.AI/index.html

@@ -11,14 +11,6 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-  <!-- Three.js for 3D background -->
-  <script type="importmap">
-    {
-      "imports": {
-        "three": "https://unpkg.com/three@0.128.0/build/three.module.js"
-      }
-    }
-  </script>
   <style>
     /* ========== GLOBAL STYLES – BLACKSITE POLISH ========== */
     * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -54,7 +46,7 @@
       position: relative;
     }
 
-    /* 3D Canvas (background) */
+    /* Background Canvas */
     #bg-canvas {
       position: fixed;
       top: 0;
@@ -963,7 +955,7 @@ <h3>🐛 Bloodhound Debugger – ADA‑Powered Forensic Analysis</h3>
       </div>
       <div class="field-group">
         <label>Domain (optional)</label>
-        <select id="debuggerDomain">
+      <select id="debuggerDomain">
           <option value="code">General Code</option>
           <option value="security">Security Critical</option>
           <option value="financial">Financial</option>
@@ -990,75 +982,61 @@ <h4>Results</h4>
   </div>
 </div>
 
-<script type="module">
-  import * as THREE from 'three';
-
-  // ========== THREE.JS BACKGROUND ==========
-  const canvas = document.getElementById('bg-canvas');
-  const renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
-  renderer.setSize(window.innerWidth, window.innerHeight);
-  renderer.setClearColor(0x000000, 0); // transparent
-
-  const scene = new THREE.Scene();
-  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-  camera.position.z = 15;
-
-  // Starfield (points)
-  const starGeometry = new THREE.BufferGeometry();
-  const starCount = 2000;
-  const starPositions = new Float32Array(starCount * 3);
-  for (let i = 0; i < starCount; i++) {
-    starPositions[i*3] = (Math.random() - 0.5) * 2000;
-    starPositions[i*3+1] = (Math.random() - 0.5) * 2000;
-    starPositions[i*3+2] = (Math.random() - 0.5) * 500;
-  }
-  starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3));
-  const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.5, transparent: true, opacity: 0.8 });
-  const stars = new THREE.Points(starGeometry, starMaterial);
-  scene.add(stars);
-
-  // Orbital ring
-  const ringGeometry = new THREE.TorusGeometry(4.5, 0.08, 64, 300);
-  const ringMaterial = new THREE.MeshBasicMaterial({ color: 0xc9a028, transparent: true, opacity: 0.4 });
-  const ring = new THREE.Mesh(ringGeometry, ringMaterial);
-  scene.add(ring);
-
-  // Floating particles (small spheres)
-  const particleCount = 300;
-  const particleGeometry = new THREE.BufferGeometry();
-  const particlePositions = new Float32Array(particleCount * 3);
-  for (let i = 0; i < particleCount; i++) {
-    particlePositions[i*3] = (Math.random() - 0.5) * 30;
-    particlePositions[i*3+1] = (Math.random() - 0.5) * 20;
-    particlePositions[i*3+2] = (Math.random() - 0.5) * 20;
-  }
-  particleGeometry.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3));
-  const particleMaterial = new THREE.PointsMaterial({ color: 0xffaa33, size: 0.08, transparent: true, opacity: 0.3 });
-  const particles = new THREE.Points(particleGeometry, particleMaterial);
-  scene.add(particles);
-
-  function animate() {
-    requestAnimationFrame(animate);
-    stars.rotation.y += 0.0005;
-    stars.rotation.x += 0.0003;
-    ring.rotation.x += 0.003;
-    ring.rotation.z += 0.002;
-    particles.rotation.y += 0.001;
-    particles.rotation.x += 0.0005;
-    renderer.render(scene, camera);
-  }
-  animate();
-
-  window.addEventListener('resize', onWindowResize, false);
-  function onWindowResize() {
-    camera.aspect = window.innerWidth / window.innerHeight;
-    camera.updateProjectionMatrix();
-    renderer.setSize(window.innerWidth, window.innerHeight);
-  }
-</script>
-
 <script>
   (function() {
+    // ---------- BACKGROUND (particle canvas) ----------
+    const canvas = document.getElementById('bg-canvas');
+    const ctx = canvas.getContext('2d');
+    let width, height, animFrame;
+    let particles = [];
+    const PARTICLE_COUNT = 120;
+
+    function resize() {
+      width = window.innerWidth;
+      height = window.innerHeight;
+      canvas.width = width;
+      canvas.height = height;
+    }
+
+    function initParticles() {
+      particles = [];
+      for (let i = 0; i < PARTICLE_COUNT; i++) {
+        particles.push({
+          x: Math.random() * width,
+          y: Math.random() * height,
+          radius: 1 + Math.random() * 2,
+          alpha: 0.3 + Math.random() * 0.5,
+          speed: 0.2 + Math.random() * 0.8,
+        });
+      }
+    }
+
+    function draw() {
+      ctx.clearRect(0, 0, width, height);
+      ctx.fillStyle = '#050508';
+      ctx.fillRect(0, 0, width, height);
+      for (let p of particles) {
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(201, 160, 40, ${p.alpha})`;
+        ctx.fill();
+        p.y += p.speed;
+        if (p.y > height) p.y = 0;
+      }
+      animFrame = requestAnimationFrame(draw);
+    }
+
+    function startBackground() {
+      resize();
+      initParticles();
+      draw();
+      window.addEventListener('resize', () => {
+        resize();
+        initParticles();
+      });
+    }
+    startBackground();
+
     // ---------- CUSTOM CURSOR ----------
     const cursor = document.getElementById('custom-cursor');
     if (cursor) {
@@ -1443,7 +1421,8 @@ <h3>🌌 Structured Mode</h3>
       messagesDiv.appendChild(div);
       // Attach event listeners
       div.querySelectorAll('.badge.ada').forEach(b => b.onclick = () => showModal('ADA Loop Details', JSON.stringify(JSON.parse(b.dataset.ada), null, 2)));
-      div.querySelectorAll('.badge.receipt').forEach(b => b.onclick = () => showModal('Checkpoint Receipt', JSON.stringify(JSON.parse(b.dataset.receipt), null, 2)));
+
+div.querySelectorAll('.badge.receipt').forEach(b => b.onclick = () => showModal('Checkpoint Receipt', JSON.stringify(JSON.parse(b.dataset.receipt), null, 2)));
       div.querySelectorAll('.badge.seal-btn').forEach(b => b.onclick = () => sealMessage(b.dataset.content));
       div.querySelectorAll('.badge.ada-vela').forEach(b => { const execId = b.dataset.executionId; if (execId) b.onclick = () => showAdaVelaModal(execId); else b.onclick = () => showModal('Ada‑VELA', 'Execution ID not available.'); });
       div.querySelectorAll('.feedback-badge').forEach(b => {