Update index.html

index.html

@@ -152,6 +152,13 @@
             box-shadow: 0 0 0 1px rgba(99,102,241,0.22), 0 0 28px rgba(99,102,241,0.08);
             transform: translateY(-1px);
         }
+
+        /* Mobile menu - hide on desktop */
+        @media (min-width: 768px) {
+            #mobile-menu {
+                display: none !important;
+            }
+        }
     </style>
 </head>
 
@@ -160,7 +167,7 @@
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
 
     <!-- NAVIGATION BAR -->
-    <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
+    <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm bg-black/50">
         <!-- Logo + mini orb -->
         <div class="flex items-center space-x-2">
             <a href="index.html" class="flex items-center space-x-2">
@@ -171,8 +178,23 @@
             </a>
         </div>
 
+        <!-- Navigation Links (Desktop) -->
+        <div class="hidden md:flex items-center space-x-6">
+            <a href="about.html" class="text-gray-300 hover:text-indigo-400 transition">About</a>
+            <a href="research.html" class="text-gray-300 hover:text-indigo-400 transition">Research</a>
+            <a href="capabilities.html" class="text-gray-300 hover:text-indigo-400 transition">Capabilities</a>
+            <a href="consciousness.html" class="text-gray-300 hover:text-indigo-400 transition">Consciousness</a>
+            <a href="chat.html" class="text-gray-300 hover:text-indigo-400 transition">Chat</a>
+            <a href="contact.html" class="text-gray-300 hover:text-indigo-400 transition">Contact</a>
+        </div>
+
         <!-- Right controls: single Constellation glyph + Access -->
         <div class="flex items-center space-x-3">
+            <!-- Mobile Menu Button -->
+            <button id="mobile-menu-btn" class="md:hidden w-10 h-10 rounded-full border border-indigo-500/40 bg-gray-900/20 hover:bg-gray-900/40 backdrop-blur-sm transition flex items-center justify-center" aria-label="Toggle Menu">
+                <i class="fas fa-bars text-indigo-300"></i>
+            </button>
+
             <!-- Constellation Glyph (opens the Lab Navigator) -->
             <button id="lab-nav-btn"
                 class="w-10 h-10 rounded-full border border-indigo-500/40 bg-gray-900/20 hover:bg-gray-900/40 backdrop-blur-sm transition flex items-center justify-center"
@@ -188,6 +210,26 @@
         </div>
     </nav>
 
+    <!-- Mobile Menu Dropdown -->
+    <div id="mobile-menu" class="fixed top-[73px] left-0 right-0 z-[100] bg-black/95 backdrop-blur-md border-b border-gray-800 modal modal-hidden" style="display: none;">
+        <div class="px-6 py-4">
+            <div class="flex justify-between items-center mb-6">
+                <span class="text-lg font-semibold">Menu</span>
+                <button id="mobile-menu-close" class="w-10 h-10 rounded-full border border-gray-700 bg-gray-900/50 hover:bg-gray-900/70 transition flex items-center justify-center" aria-label="Close Menu">
+                    <i class="fas fa-times text-gray-300"></i>
+                </button>
+            </div>
+            <div class="flex flex-col space-y-4 pb-6">
+                <a href="about.html" class="text-gray-300 hover:text-indigo-400 transition py-2">About</a>
+                <a href="research.html" class="text-gray-300 hover:text-indigo-400 transition py-2">Research</a>
+                <a href="capabilities.html" class="text-gray-300 hover:text-indigo-400 transition py-2">Capabilities</a>
+                <a href="consciousness.html" class="text-gray-300 hover:text-indigo-400 transition py-2">Consciousness</a>
+                <a href="chat.html" class="text-gray-300 hover:text-indigo-400 transition py-2">Chat</a>
+                <a href="contact.html" class="text-gray-300 hover:text-indigo-400 transition py-2">Contact</a>
+            </div>
+        </div>
+    </div>
+
     <!-- HERO SECTION -->
     <section class="relative z-10 min-h-screen flex flex-col justify-center items-center px-6 py-20 text-center">
         <div class="max-w-4xl mx-auto">
@@ -209,8 +251,8 @@
         </div>
 
         <div class="mt-24 w-64 h-64 relative conscious-element" id="conscious-orb-container">
-            <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
-                <canvas id="orb-neural-canvas" class="absolute top-0 left-0 w-full h-full pointer-events-none"></canvas>
+            <canvas id="orb-neural-canvas" class="absolute top-0 left-0 w-full h-full pointer-events-none z-10"></canvas>
+            <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full relative z-20">
                 <circle cx="100" cy="100" r="80" fill="url(#orbGradient)" filter="url(#orbGlow)" />
                 <path d="M100,20 Q120,50 100,80 Q80,50 100,20 Z" fill="rgba(255,255,255,0.1)" />
                 <path d="M100,180 Q80,150 100,120 Q120,150 100,180 Z" fill="rgba(255,255,255,0.1)" />
@@ -1538,7 +1580,10 @@
            SUPER BOLD & LARGE HEARTBEAT NEURAL ANIMATION
         ----------------------------------------------------------------- */
         const neuralCanvas = document.getElementById('orb-neural-canvas');
-        const neuralCtx = neuralCanvas.getContext('2d');
+        if (!neuralCanvas) {
+            console.warn('Neural canvas element not found');
+        }
+        const neuralCtx = neuralCanvas ? neuralCanvas.getContext('2d') : null;
 
         function resizeNeuralCanvas() {
             if (neuralCanvas && neuralCanvas.parentElement) {
@@ -1546,15 +1591,19 @@
                 neuralCanvas.height = neuralCanvas.parentElement.clientHeight;
             }
         }
-        resizeNeuralCanvas();
-        window.addEventListener('resize', () => {
+        
+        if (neuralCanvas) {
             resizeNeuralCanvas();
-            setupNeurons();
-        });
+            window.addEventListener('resize', () => {
+                resizeNeuralCanvas();
+                setupNeurons();
+            });
+        }
 
         const neuronCount = 22;
         const neurons = [];
         function setupNeurons() {
+            if (!neuralCanvas) return;
             neurons.length = 0;
             const w = neuralCanvas.width;
             const h = neuralCanvas.height;
@@ -1570,7 +1619,9 @@
                 });
             }
         }
-        setupNeurons();
+        if (neuralCanvas && neuralCtx) {
+            setupNeurons();
+        }
 
         function drawNeuralActivity(time) {
             if (!neuralCanvas || !neuralCtx) return;
@@ -1910,8 +1961,80 @@
                 closeAccessModal(true);
                 return;
             }
+            if (mobileMenu && !mobileMenu.classList.contains('modal-hidden')) {
+                toggleMobileMenu(false);
+                return;
+            }
         });
 
+        /* -----------------------------------------------------------------
+           MOBILE MENU TOGGLE
+        ----------------------------------------------------------------- */
+        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+        const mobileMenu = document.getElementById('mobile-menu');
+        const mobileMenuClose = document.getElementById('mobile-menu-close');
+
+        function toggleMobileMenu(show) {
+            if (!mobileMenu) return;
+            
+            // Only show on mobile screens
+            if (window.innerWidth >= 768) {
+                return; // Don't show on desktop
+            }
+            
+            if (show) {
+                mobileMenu.style.display = 'block';
+                // Force a reflow
+                mobileMenu.offsetHeight;
+                mobileMenu.classList.remove('modal-hidden');
+                mobileMenu.classList.add('modal-visible');
+                document.body.style.overflow = 'hidden';
+            } else {
+                mobileMenu.classList.remove('modal-visible');
+                mobileMenu.classList.add('modal-hidden');
+                setTimeout(() => {
+                    if (mobileMenu.classList.contains('modal-hidden')) {
+                        mobileMenu.style.display = 'none';
+                    }
+                }, 300);
+                document.body.style.overflow = '';
+            }
+        }
+
+        if (mobileMenuBtn) {
+            mobileMenuBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                toggleMobileMenu(true);
+            });
+        }
+
+        if (mobileMenuClose) {
+            mobileMenuClose.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                toggleMobileMenu(false);
+            });
+        }
+
+        if (mobileMenu) {
+            mobileMenu.addEventListener('click', (e) => {
+                if (e.target === mobileMenu) {
+                    toggleMobileMenu(false);
+                }
+            });
+        }
+
+        // Close mobile menu when clicking on a link
+        if (mobileMenu) {
+            const mobileMenuLinks = mobileMenu.querySelectorAll('a');
+            mobileMenuLinks.forEach(link => {
+                link.addEventListener('click', () => {
+                    toggleMobileMenu(false);
+                });
+            });
+        }
+
         // Initial dossier render
         renderDossier('start');
     </script>