Update index.html

Author: AionSystem

AION-PAGE/AION.AI/index.html

@@ -11,6 +11,14 @@
   <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; }
@@ -46,7 +54,7 @@
       position: relative;
     }
 
-    /* Background Canvas */
+    /* 3D Canvas (background) */
     #bg-canvas {
       position: fixed;
       top: 0;
@@ -982,61 +990,75 @@ <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) {