Spaces:

Testing347
/

Copy-ava-testing

Running

App Files Files Community

Testing347 commited on Dec 15, 2025

Commit

5c3088c

verified ·

1 Parent(s): 9cc835c

Update index.html

Browse files

Files changed (1) hide show

index.html +262 -155

index.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -133,6 +134,24 @@
             animation: orb-breathe 2.5s ease-in-out infinite, orb-glow 1.5s ease-in-out infinite;
             filter: drop-shadow(0 0 40px #a21cafee) brightness(1.12);
         }
     </style>
 </head>
@@ -140,22 +159,16 @@
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
-    <!-- NAVIGATION BAR (kept for now; we are not converting to standard nav — only adding a single glyph trigger) -->
     <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
         <!-- Logo + mini orb -->
         <div class="flex items-center space-x-2">
-            <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center conscious-orb">
-                <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
-            </div>
-            <span class="text-xl font-semibold">SILENTPATTERN</span>
-        </div>
-        <!-- Existing navigation links (we will phase these out later after the Lab Navigator is fully adopted) -->
-        <div class="hidden md:flex space-x-8">
-            <a href="capabilities.html" class="hover:text-indigo-400 transition">Capabilities</a>
-            <a href="consciousness.html" class="hover:text-indigo-400 transition">Consciousness</a>
-            <a href="chat.html" class="hover:text-indigo-400 transition">Chat</a>
-            <a href="about.html" class="hover:text-indigo-400 transition">About</a>
         </div>
         <!-- Right controls: single Constellation glyph + Access -->
@@ -168,7 +181,7 @@
                 <i class="fas fa-asterisk text-indigo-300 text-sm"></i>
             </button>
-            <!-- “Access” button -->
             <button id="access-btn" class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">
                 Access
             </button>
@@ -405,7 +418,7 @@
                 <div class="px-6 py-4 border-t border-gray-800">
                     <form id="chat-form" class="flex items-center" autocomplete="off" aria-label="Send message to SI">
                         <input id="chat-input" type="text" placeholder="Ask SI anything..."
-                            class="flex-1 bg-gray-800/50 border border-gray-700 rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"
                             aria-label="Type your message here">
                         <button id="send-btn" type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-r-lg transition" aria-label="Send message">
                             <i class="fas fa-paper-plane"></i>
@@ -579,15 +592,15 @@
                 </div>
                 <div class="flex space-x-6">
-                    <a href="#" class="text-gray-400 hover:text-indigo-400 transition">Privacy</a>
-                    <a href="#" class="text-gray-400 hover:text-indigo-400 transition">Terms</a>
-                    <a href="#" class="text-gray-400 hover:text-indigo-400 transition">Research</a>
-                    <a href="#" class="text-gray-400 hover:text-indigo-400 transition">Contact</a>
                 </div>
             </div>
             <div class="mt-8 pt-8 border-t border-gray-800/50 text-center text-gray-500 text-sm">
-                <p>© 2023 Super Intelligence. All rights reserved.</p>
                 <p class="mt-2">The future of consciousness is here.</p>
             </div>
         </div>
@@ -605,40 +618,40 @@
                         <h3 class="text-xl font-bold" id="access-modal-title">Request SI Access</h3>
                         <p class="text-gray-400 mt-1">Limited availability for qualified researchers</p>
                     </div>
-                    <button id="close-modal" class="text-gray-400 hover:text-white" aria-label="Close request access modal">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
-                <!-- Inline form feedback (added; minimal footprint) -->
                 <div id="access-form-feedback" class="hidden mb-4 text-sm rounded-lg border border-gray-800 bg-black/20 p-3" role="status" aria-live="polite"></div>
                 <form id="access-form" class="space-y-4" novalidate>
                     <div>
                         <label for="name" class="block text-sm font-medium mb-1">Full Name</label>
                         <input type="text" id="name"
-                               class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"
                                autocomplete="name">
                         <p id="name-error" class="hidden mt-1 text-xs text-red-300">Please enter your full name.</p>
                     </div>
                     <div>
                         <label for="email" class="block text-sm font-medium mb-1">Email</label>
                         <input type="email" id="email"
-                               class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"
                                autocomplete="email">
                         <p id="email-error" class="hidden mt-1 text-xs text-red-300">Please enter a valid email address.</p>
                     </div>
                     <div>
                         <label for="institution" class="block text-sm font-medium mb-1">Institution/Organization</label>
                         <input type="text" id="institution"
-                               class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"
                                autocomplete="organization">
                         <p id="institution-error" class="hidden mt-1 text-xs text-red-300">Please enter your institution/organization.</p>
                     </div>
                     <div>
                         <label for="purpose" class="block text-sm font-medium mb-1">Purpose of Access</label>
                         <select id="purpose"
-                                class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent">
                             <option value="">Select a purpose</option>
                             <option value="research">Academic Research</option>
                             <option value="development">AI Development</option>
@@ -648,7 +661,7 @@
                         <p id="purpose-error" class="hidden mt-1 text-xs text-red-300">Please select a purpose.</p>
                     </div>
                     <div class="pt-2">
-                        <button type="submit" class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 transition">
                             Submit Request
                         </button>
                     </div>
@@ -673,7 +686,7 @@
                         <h3 class="text-xl font-bold" id="consciousness-modal-title">Consciousness Demonstration</h3>
                         <p class="text-gray-400 mt-1">Experience a simulation of artificial qualia</p>
                     </div>
-                    <button id="close-consciousness-modal" class="text-gray-400 hover:text-white" aria-label="Close consciousness demo modal">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
@@ -709,7 +722,7 @@
                         <div class="relative h-64 bg-gray-800/30 rounded-lg border border-dashed border-gray-700 flex items-center justify-center">
                             <div id="demo-visualization" class="w-full h-full"></div>
                             <div class="absolute inset-0 flex items-center justify-center">
-                                <button id="start-demo" class="px-6 py-3 bg-indigo-600 rounded-lg hover:bg-indigo-700 transition">
                                     <i class="fas fa-play mr-2"></i> Start Simulation
                                 </button>
                             </div>
@@ -722,7 +735,7 @@
                         <div class="text-sm text-gray-400">
                             <i class="fas fa-info-circle mr-1"></i> This is a simplified representation
                         </div>
-                        <button id="learn-more-demo" class="text-indigo-400 hover:text-indigo-300 text-sm">
                             Learn more about artificial consciousness <i class="fas fa-arrow-right ml-1"></i>
                         </button>
                     </div>
@@ -755,7 +768,7 @@
                         </div>
                         <button id="lab-nav-close"
-                                class="w-9 h-9 rounded-full border border-gray-800 bg-gray-900/30 hover:bg-gray-900/50 transition flex items-center justify-center"
                                 aria-label="Close Lab Navigator">
                             <i class="fas fa-times text-gray-300 text-sm"></i>
                         </button>
@@ -767,44 +780,44 @@
                                     radial-gradient(circle at 70% 70%, rgba(236,72,153,0.10), transparent 50%);"></div>
                         <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3">
-                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                                    data-dossier="start">
                                 <div class="text-sm text-gray-200 font-medium">Start Here</div>
                                 <div class="text-xs text-gray-500 mt-1">A guided entry into the lab</div>
                             </button>
-                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                                    data-dossier="programs">
                                 <div class="text-sm text-gray-200 font-medium">Programs</div>
                                 <div class="text-xs text-gray-500 mt-1">MCAP · CHAI · Quantum Lambda</div>
                             </button>
-                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                                    data-dossier="ai_scientist">
                                 <div class="text-sm text-gray-200 font-medium">AI Scientist</div>
                                 <div class="text-xs text-gray-500 mt-1">Hypothesis → experiment → report</div>
                             </button>
-                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                                    data-dossier="agents">
                                 <div class="text-sm text-gray-200 font-medium">Agents</div>
                                 <div class="text-xs text-gray-500 mt-1">Role-based, auditable autonomy</div>
                             </button>
-                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                                    data-dossier="research">
                                 <div class="text-sm text-gray-200 font-medium">Research Notes</div>
                                 <div class="text-xs text-gray-500 mt-1">Technical notes and evaluations</div>
                             </button>
-                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                                    data-dossier="safety">
                                 <div class="text-sm text-gray-200 font-medium">Safety / System Card</div>
                                 <div class="text-xs text-gray-500 mt-1">Constraints, evaluations, governance</div>
                             </button>
-                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 sm:col-span-2"
-                                    data-dossier="access">
                                 <div class="text-sm text-gray-200 font-medium">Access</div>
                                 <div class="text-xs text-gray-500 mt-1">Request access to demos and research</div>
                             </button>
@@ -831,8 +844,7 @@
                         </div>
                     </div>
-                    <div class="p-6 space-y-5 max-h-[560px] overflow-auto"
-                         style="scrollbar-width: thin; scrollbar-color: #4f46e5 #1e1b4b;">
                         <div id="dossier-body" class="text-sm text-gray-300 leading-relaxed">
                             This interface reveals SILENTPATTERN as a set of research programs and operational systems.
                             The public layer is minimal by design; depth is opened intentionally.
@@ -847,11 +859,11 @@
                         <div class="flex flex-col sm:flex-row gap-3">
                             <button id="dossier-primary"
-                                    class="flex-1 px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition">
                                 Open
                             </button>
                             <button id="dossier-secondary"
-                                    class="flex-1 px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition">
                                 View Note
                             </button>
                         </div>
@@ -868,44 +880,41 @@
     <!-- MAIN JAVASCRIPT -->
     <script>
-        /* -----------------------------------------------------------------
-           VANTA.JS “NET” BACKGROUND INIT
-        ----------------------------------------------------------------- */
-        const vantaEffect = VANTA.NET({
-            el: "#vanta-bg",
-            mouseControls: true,
-            touchControls: true,
-            gyroControls: false,
-            minHeight: 200.00,
-            minWidth: 200.00,
-            scale: 1.00,
-            scaleMobile: 1.00,
-            color: 0x4f46e5,
-            backgroundColor: 0x020617,
-            points: 12.00,
-            maxDistance: 20.00,
-            spacing: 15.00
-        });
-        window.addEventListener('resize', () => {
-            vantaEffect.resize();
-        });
         /* -----------------------------------------------------------------
-           HASH DEEP-LINKING (modals only)
-           Supported: #lab, #access, #consciousness-demo
         ----------------------------------------------------------------- */
-        const MODAL_HASHES = new Set(['lab', 'access', 'consciousness-demo']);
         function currentHashKey() {
             const h = (window.location.hash || '').replace('#', '').trim();
             return h;
         }
-        function setHash(key) {
             if (!key) return;
             if (window.location.hash.replace('#', '') === key) return;
-            window.location.hash = key;
         }
         function clearHashIf(key) {
@@ -917,7 +926,7 @@
         }
         /* -----------------------------------------------------------------
-           MODAL ACCESSIBILITY HELPER FUNCTIONS
         ----------------------------------------------------------------- */
         function trapFocus(modal) {
             const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -969,22 +978,56 @@
         };
         /* -----------------------------------------------------------------
-           ORB TILT INTERACTION
         ----------------------------------------------------------------- */
-        const orbContainer = document.getElementById('conscious-orb-container');
-        orbContainer.addEventListener('mousemove', (e) => {
-            const rect = orbContainer.getBoundingClientRect();
-            const x = (e.clientX - rect.left) / rect.width;
-            const y = (e.clientY - rect.top) / rect.height;
-            orbContainer.style.transform =
-                `perspective(1000px) rotateX(${(y - 0.5) * 12}deg) rotateY(${(x - 0.5) * 12}deg) scale(1.03)`;
         });
-        orbContainer.addEventListener('mouseleave', () => {
-            orbContainer.style.transform =
-                'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
-        });
         /* -----------------------------------------------------------------
            SIMPLE CONSCIOUSNESS VISUALIZATION
@@ -1065,7 +1108,7 @@
         ----------------------------------------------------------------- */
         const accessModal = document.getElementById('access-modal');
         const accessBtn = document.getElementById('access-btn');
-        const closeModal = document.getElementById('close-modal');
         const requestAccessBtn = document.getElementById('request-access-btn');
         const accessForm = document.getElementById('access-form');
@@ -1086,7 +1129,6 @@
             accessFeedback.classList.remove('hidden');
             accessFeedback.textContent = message;
-            // Tone is informational; minimal styling change (keeps current design language)
             accessFeedback.classList.remove('border-red-500/40', 'border-green-500/40');
             accessFeedback.classList.remove('text-red-200', 'text-green-200');
             accessFeedback.classList.add('text-gray-200');
@@ -1118,11 +1160,6 @@
             }
         }
-        function isValidEmail(email) {
-            // Conservative sanity check; server should do final validation.
-            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-        }
         function resetAccessErrors() {
             hideAccessFeedback();
             setFieldError(nameEl, nameErr, false);
@@ -1162,7 +1199,6 @@
             [nameEl, emailEl, institutionEl, purposeEl].forEach(el => {
                 if (!el) return;
                 el.addEventListener('input', () => {
-                    // field-level re-validation light
                     if (el === nameEl) setFieldError(nameEl, nameErr, !nameEl.value.trim());
                     if (el === emailEl) setFieldError(emailEl, emailErr, !isValidEmail(emailEl.value.trim()));
                     if (el === institutionEl) setFieldError(institutionEl, institutionErr, !institutionEl.value.trim());
@@ -1192,13 +1228,8 @@
                     return;
                 }
-                // Static demo success path (no network)
                 showAccessFeedback('Request received. You will be contacted after review.', 'success');
                 accessForm.reset();
-                // Keep modal open for review; user can close manually.
-                // If you prefer auto-close: uncomment below.
-                // setTimeout(() => closeAccessModal(true), 700);
             });
         }
@@ -1318,8 +1349,6 @@
         /* -----------------------------------------------------------------
            CHAT FUNCTIONALITY (static-safe)
-           - Preferred: POST /api/chat
-           - Fallback: local demo reply
         ----------------------------------------------------------------- */
         const chatForm = document.getElementById('chat-form');
         const chatInput = document.getElementById('chat-input');
@@ -1327,15 +1356,6 @@
         const typingIndicator = document.getElementById('typing-indicator');
         const sendBtn = document.getElementById('send-btn');
-        function escapeHtml(str) {
-            return String(str)
-                .replaceAll('&', '&amp;')
-                .replaceAll('<', '&lt;')
-                .replaceAll('>', '&gt;')
-                .replaceAll('"', '&quot;')
-                .replaceAll("'", '&#039;');
-        }
         function addMessage(text, isUser = false) {
             const safe = escapeHtml(text);
             const messageDiv = document.createElement('div');
@@ -1376,25 +1396,9 @@
         }
         async function callServerChat(userMessage) {
-            const res = await fetch('/api/chat', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    message: userMessage,
-                    meta: { page: 'index.html', product: 'silentpattern' }
-                })
-            });
-            if (!res.ok) {
-                const txt = await res.text().catch(() => '');
-                throw new Error(`Server error (${res.status}). ${txt}`.trim());
-            }
-            const data = await res.json();
-            if (!data || typeof data.reply !== 'string') {
-                throw new Error('Invalid response format from /api/chat');
-            }
-            return data.reply;
         }
         function localDemoResponse(userMessage) {
@@ -1452,14 +1456,81 @@
         const whitePaperBtn = document.getElementById('white-paper-btn');
         if (whitePaperBtn) {
             whitePaperBtn.addEventListener('click', () => {
-                alert('The SI White Paper will open in a new window. (This is a demo)');
             });
         }
         const ethicsBtn = document.getElementById('ethics-btn');
         if (ethicsBtn) {
             ethicsBtn.addEventListener('click', () => {
-                alert('The full ethical framework documentation will be displayed. (This is a demo)');
             });
         }
@@ -1470,8 +1541,10 @@
         const neuralCtx = neuralCanvas.getContext('2d');
         function resizeNeuralCanvas() {
-            neuralCanvas.width = neuralCanvas.offsetWidth;
-            neuralCanvas.height = neuralCanvas.offsetHeight;
         }
         resizeNeuralCanvas();
         window.addEventListener('resize', () => {
@@ -1498,9 +1571,10 @@
             }
         }
         setupNeurons();
-        window.addEventListener('resize', setupNeurons);
         function drawNeuralActivity(time) {
             const w = neuralCanvas.width;
             const h = neuralCanvas.height;
             neuralCtx.clearRect(0, 0, w, h);
@@ -1566,7 +1640,9 @@
             requestAnimationFrame(drawNeuralActivity);
         }
-        requestAnimationFrame(drawNeuralActivity);
         /* -----------------------------------------------------------------
            LAB NAVIGATOR (hash + active node + dossier)
@@ -1601,7 +1677,42 @@
                     "Quantum Lambda: high-frequency decision systems (concept/prototype)"
                 ],
                 primary: { label: "Open Programs", action: () => { window.location.href = "capabilities.html"; } },
-                secondary: { label: "View Note", action: () => { alert("Program technical notes will be linked here (PDF/HTML)."); } },
                 updated: "—"
             },
             ai_scientist: {
@@ -1614,7 +1725,7 @@
                     "Reproducible runs + audit logs",
                     "Report generation with citations and uncertainty"
                 ],
-                primary: { label: "Open", action: () => { alert("AI Scientist dossier will become a dedicated module next."); } },
                 secondary: { label: "Research Notes", action: () => { window.location.href = "research.html"; } },
                 updated: "—"
             },
@@ -1628,7 +1739,7 @@
                     "Permissioning + audit trails",
                     "Human-in-the-loop checkpoints"
                 ],
-                primary: { label: "Open", action: () => { alert("Agents dossier will be implemented next."); } },
                 secondary: { label: "Safety", action: () => { window.location.href = "about.html"; } },
                 updated: "—"
             },
@@ -1643,7 +1754,7 @@
                     "Limitations and failure modes"
                 ],
                 primary: { label: "Open", action: () => { window.location.href = "research.html"; } },
-                secondary: { label: "White Paper", action: () => { alert("White paper link will be wired here."); } },
                 updated: "—"
             },
             safety: {
@@ -1657,7 +1768,7 @@
                     "Data handling and access controls"
                 ],
                 primary: { label: "Open", action: () => { window.location.href = "about.html"; } },
-                secondary: { label: "Ethics", action: () => { document.getElementById('ethics-btn')?.click(); } },
                 updated: "—"
             },
             access: {
@@ -1688,15 +1799,8 @@
         function setActiveLabNode(key) {
             document.querySelectorAll('.lab-node').forEach(btn => {
                 const isActive = btn.getAttribute('data-dossier') === key;
-                if (isActive) {
-                    btn.classList.add('border-indigo-500/60');
-                    btn.classList.add('bg-gray-900/45');
-                    btn.classList.add('ring-2', 'ring-indigo-500/20');
-                } else {
-                    btn.classList.remove('border-indigo-500/60');
-                    btn.classList.remove('bg-gray-900/45');
-                    btn.classList.remove('ring-2', 'ring-indigo-500/20');
-                }
             });
         }
@@ -1733,7 +1837,7 @@
             setTimeout(() => labNav.focus(), 0);
             // Ensure a stable default selection when opened
-            const alreadyActive = document.querySelector('.lab-node.border-indigo-500\\/60');
             if (!alreadyActive) renderDossier('start');
         }
@@ -1773,7 +1877,7 @@
             const key = currentHashKey();
             // If hash is not a modal hash, do not force-close other modals.
-            if (!MODAL_HASHES.has(key)) return;
             // Ensure only the requested overlay is open.
             closeAllOverlaysIfNeeded();
@@ -1807,6 +1911,9 @@
                 return;
             }
         });
     </script>
 </body>
-</html>

+<!-- SILENTPATTERN FINAL BUILD: 2025-12-15 | pages: 10 | features: hash-deep-linking, lab-navigator, access-modal, form-validation, chat-console, neural-visualization -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
             animation: orb-breathe 2.5s ease-in-out infinite, orb-glow 1.5s ease-in-out infinite;
             filter: drop-shadow(0 0 40px #a21cafee) brightness(1.12);
         }
+        /* Site-wide consistency styles */
+        .focus-ring:focus { outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,0.65); }
+        .thin-scroll {
+            scrollbar-width: thin;
+            scrollbar-color: #4f46e5 #1e1b4b;
+        }
+        .thin-scroll::-webkit-scrollbar { width: 6px; }
+        .thin-scroll::-webkit-scrollbar-track { background: #1e1b4b; }
+        .thin-scroll::-webkit-scrollbar-thumb { background-color: #4f46e5; border-radius: 3px; }
+        /* Active states */
+        .lab-node.active,
+        .program-card.active {
+            border-color: rgba(99,102,241,0.55) !important;
+            box-shadow: 0 0 0 1px rgba(99,102,241,0.22), 0 0 28px rgba(99,102,241,0.08);
+            transform: translateY(-1px);
+        }
     </style>
 </head>
     <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">
         <!-- Logo + mini orb -->
         <div class="flex items-center space-x-2">
+            <a href="index.html" class="flex items-center space-x-2">
+                <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center conscious-orb">
+                    <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
+                </div>
+                <span class="text-xl font-semibold">SILENTPATTERN</span>
+            </a>
         </div>
         <!-- Right controls: single Constellation glyph + Access -->
                 <i class="fas fa-asterisk text-indigo-300 text-sm"></i>
             </button>
+            <!-- "Access" button -->
             <button id="access-btn" class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">
                 Access
             </button>
                 <div class="px-6 py-4 border-t border-gray-800">
                     <form id="chat-form" class="flex items-center" autocomplete="off" aria-label="Send message to SI">
                         <input id="chat-input" type="text" placeholder="Ask SI anything..."
+                            class="flex-1 bg-gray-800/50 border border-gray-700 rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent focus-ring"
                             aria-label="Type your message here">
                         <button id="send-btn" type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-r-lg transition" aria-label="Send message">
                             <i class="fas fa-paper-plane"></i>
                 </div>
                 <div class="flex space-x-6">
+                    <a href="research.html" class="text-gray-400 hover:text-indigo-400 transition">Research</a>
+                    <a href="privacy.html" class="text-gray-400 hover:text-indigo-400 transition">Privacy</a>
+                    <a href="terms.html" class="text-gray-400 hover:text-indigo-400 transition">Terms</a>
+                    <a href="contact.html" class="text-gray-400 hover:text-indigo-400 transition">Contact</a>
                 </div>
             </div>
             <div class="mt-8 pt-8 border-t border-gray-800/50 text-center text-gray-500 text-sm">
+                <p>© 2025 SILENTPATTERN. All rights reserved.</p>
                 <p class="mt-2">The future of consciousness is here.</p>
             </div>
         </div>
                         <h3 class="text-xl font-bold" id="access-modal-title">Request SI Access</h3>
                         <p class="text-gray-400 mt-1">Limited availability for qualified researchers</p>
                     </div>
+                    <button id="close-access-modal" class="text-gray-400 hover:text-white focus-ring" aria-label="Close request access modal">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
+                <!-- Inline form feedback -->
                 <div id="access-form-feedback" class="hidden mb-4 text-sm rounded-lg border border-gray-800 bg-black/20 p-3" role="status" aria-live="polite"></div>
                 <form id="access-form" class="space-y-4" novalidate>
                     <div>
                         <label for="name" class="block text-sm font-medium mb-1">Full Name</label>
                         <input type="text" id="name"
+                               class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring"
                                autocomplete="name">
                         <p id="name-error" class="hidden mt-1 text-xs text-red-300">Please enter your full name.</p>
                     </div>
                     <div>
                         <label for="email" class="block text-sm font-medium mb-1">Email</label>
                         <input type="email" id="email"
+                               class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring"
                                autocomplete="email">
                         <p id="email-error" class="hidden mt-1 text-xs text-red-300">Please enter a valid email address.</p>
                     </div>
                     <div>
                         <label for="institution" class="block text-sm font-medium mb-1">Institution/Organization</label>
                         <input type="text" id="institution"
+                               class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring"
                                autocomplete="organization">
                         <p id="institution-error" class="hidden mt-1 text-xs text-red-300">Please enter your institution/organization.</p>
                     </div>
                     <div>
                         <label for="purpose" class="block text-sm font-medium mb-1">Purpose of Access</label>
                         <select id="purpose"
+                                class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
                             <option value="">Select a purpose</option>
                             <option value="research">Academic Research</option>
                             <option value="development">AI Development</option>
                         <p id="purpose-error" class="hidden mt-1 text-xs text-red-300">Please select a purpose.</p>
                     </div>
                     <div class="pt-2">
+                        <button type="submit" class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 transition focus-ring">
                             Submit Request
                         </button>
                     </div>
                         <h3 class="text-xl font-bold" id="consciousness-modal-title">Consciousness Demonstration</h3>
                         <p class="text-gray-400 mt-1">Experience a simulation of artificial qualia</p>
                     </div>
+                    <button id="close-consciousness-modal" class="text-gray-400 hover:text-white focus-ring" aria-label="Close consciousness demo modal">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
                         <div class="relative h-64 bg-gray-800/30 rounded-lg border border-dashed border-gray-700 flex items-center justify-center">
                             <div id="demo-visualization" class="w-full h-full"></div>
                             <div class="absolute inset-0 flex items-center justify-center">
+                                <button id="start-demo" class="px-6 py-3 bg-indigo-600 rounded-lg hover:bg-indigo-700 transition focus-ring">
                                     <i class="fas fa-play mr-2"></i> Start Simulation
                                 </button>
                             </div>
                         <div class="text-sm text-gray-400">
                             <i class="fas fa-info-circle mr-1"></i> This is a simplified representation
                         </div>
+                        <button id="learn-more-demo" class="text-indigo-400 hover:text-indigo-300 text-sm focus-ring">
                             Learn more about artificial consciousness <i class="fas fa-arrow-right ml-1"></i>
                         </button>
                     </div>
                         </div>
                         <button id="lab-nav-close"
+                                class="w-9 h-9 rounded-full border border-gray-800 bg-gray-900/30 hover:bg-gray-900/50 transition flex items-center justify-center focus-ring"
                                 aria-label="Close Lab Navigator">
                             <i class="fas fa-times text-gray-300 text-sm"></i>
                         </button>
                                     radial-gradient(circle at 70% 70%, rgba(236,72,153,0.10), transparent 50%);"></div>
                         <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3">
+                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring"
+                                    data-dossier="start" aria-current="false">
                                 <div class="text-sm text-gray-200 font-medium">Start Here</div>
                                 <div class="text-xs text-gray-500 mt-1">A guided entry into the lab</div>
                             </button>
+                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring"
+                                    data-dossier="programs" aria-current="false">
                                 <div class="text-sm text-gray-200 font-medium">Programs</div>
                                 <div class="text-xs text-gray-500 mt-1">MCAP · CHAI · Quantum Lambda</div>
                             </button>
+                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring"
+                                    data-dossier="ai_scientist" aria-current="false">
                                 <div class="text-sm text-gray-200 font-medium">AI Scientist</div>
                                 <div class="text-xs text-gray-500 mt-1">Hypothesis → experiment → report</div>
                             </button>
+                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring"
+                                    data-dossier="agents" aria-current="false">
                                 <div class="text-sm text-gray-200 font-medium">Agents</div>
                                 <div class="text-xs text-gray-500 mt-1">Role-based, auditable autonomy</div>
                             </button>
+                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring"
+                                    data-dossier="research" aria-current="false">
                                 <div class="text-sm text-gray-200 font-medium">Research Notes</div>
                                 <div class="text-xs text-gray-500 mt-1">Technical notes and evaluations</div>
                             </button>
+                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring"
+                                    data-dossier="safety" aria-current="false">
                                 <div class="text-sm text-gray-200 font-medium">Safety / System Card</div>
                                 <div class="text-xs text-gray-500 mt-1">Constraints, evaluations, governance</div>
                             </button>
+                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 sm:col-span-2 focus-ring"
+                                    data-dossier="access" aria-current="false">
                                 <div class="text-sm text-gray-200 font-medium">Access</div>
                                 <div class="text-xs text-gray-500 mt-1">Request access to demos and research</div>
                             </button>
                         </div>
                     </div>
+                    <div class="p-6 space-y-5 max-h-[560px] overflow-auto thin-scroll">
                         <div id="dossier-body" class="text-sm text-gray-300 leading-relaxed">
                             This interface reveals SILENTPATTERN as a set of research programs and operational systems.
                             The public layer is minimal by design; depth is opened intentionally.
                         <div class="flex flex-col sm:flex-row gap-3">
                             <button id="dossier-primary"
+                                    class="flex-1 px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition focus-ring">
                                 Open
                             </button>
                             <button id="dossier-secondary"
+                                    class="flex-1 px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition focus-ring">
                                 View Note
                             </button>
                         </div>
     <!-- MAIN JAVASCRIPT -->
     <script>
+        // Site-wide configuration
+        const CONFIG = {
+            MODAL_HASHES: new Set(['lab', 'access', 'consciousness-demo']),
+            DOSSIER_HASHES: new Set(['mcap', 'chai', 'quantum_lambda', 'ai_scientist', 'agentic_workforce'])
+        };
         /* -----------------------------------------------------------------
+           UTILITY FUNCTIONS (site-wide consistent)
         ----------------------------------------------------------------- */
+        function escapeHtml(str) {
+            return String(str)
+                .replaceAll('&', '&amp;')
+                .replaceAll('<', '&lt;')
+                .replaceAll('>', '&gt;')
+                .replaceAll('"', '&quot;')
+                .replaceAll("'", '&#039;');
+        }
+        function isValidEmail(email) {
+            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+        }
         function currentHashKey() {
             const h = (window.location.hash || '').replace('#', '').trim();
             return h;
         }
+        function setHash(key, replace = false) {
             if (!key) return;
             if (window.location.hash.replace('#', '') === key) return;
+            if (replace) {
+                history.replaceState(null, '', '#' + key);
+            } else {
+                history.pushState(null, '', '#' + key);
+            }
         }
         function clearHashIf(key) {
         }
         /* -----------------------------------------------------------------
+           MODAL ACCESSIBILITY HELPER FUNCTIONS (site-wide consistent)
         ----------------------------------------------------------------- */
         function trapFocus(modal) {
             const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
         };
         /* -----------------------------------------------------------------
+           VANTA.JS "NET" BACKGROUND INIT
         ----------------------------------------------------------------- */
+        let vantaEffect = null;
+        try {
+            if (window.VANTA && typeof VANTA.NET === 'function') {
+                vantaEffect = VANTA.NET({
+                    el: "#vanta-bg",
+                    mouseControls: true,
+                    touchControls: true,
+                    gyroControls: false,
+                    minHeight: 200.00,
+                    minWidth: 200.00,
+                    scale: 1.00,
+                    scaleMobile: 1.00,
+                    color: 0x4f46e5,
+                    backgroundColor: 0x020617,
+                    points: 12.00,
+                    maxDistance: 20.00,
+                    spacing: 15.00
+                });
+            }
+        } catch (e) {
+            console.warn('Vanta background failed to initialize:', e);
+            vantaEffect = null;
+        }
+        window.addEventListener('resize', () => {
+            if (vantaEffect && typeof vantaEffect.resize === 'function') {
+                vantaEffect.resize();
+            }
         });
+        /* -----------------------------------------------------------------
+           ORB TILT INTERACTION
+        ----------------------------------------------------------------- */
+        const orbContainer = document.getElementById('conscious-orb-container');
+        if (orbContainer) {
+            orbContainer.addEventListener('mousemove', (e) => {
+                const rect = orbContainer.getBoundingClientRect();
+                const x = (e.clientX - rect.left) / rect.width;
+                const y = (e.clientY - rect.top) / rect.height;
+                orbContainer.style.transform =
+                    `perspective(1000px) rotateX(${(y - 0.5) * 12}deg) rotateY(${(x - 0.5) * 12}deg) scale(1.03)`;
+            });
+            orbContainer.addEventListener('mouseleave', () => {
+                orbContainer.style.transform =
+                    'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
+            });
+        }
         /* -----------------------------------------------------------------
            SIMPLE CONSCIOUSNESS VISUALIZATION
         ----------------------------------------------------------------- */
         const accessModal = document.getElementById('access-modal');
         const accessBtn = document.getElementById('access-btn');
+        const closeModal = document.getElementById('close-access-modal');
         const requestAccessBtn = document.getElementById('request-access-btn');
         const accessForm = document.getElementById('access-form');
             accessFeedback.classList.remove('hidden');
             accessFeedback.textContent = message;
             accessFeedback.classList.remove('border-red-500/40', 'border-green-500/40');
             accessFeedback.classList.remove('text-red-200', 'text-green-200');
             accessFeedback.classList.add('text-gray-200');
             }
         }
         function resetAccessErrors() {
             hideAccessFeedback();
             setFieldError(nameEl, nameErr, false);
             [nameEl, emailEl, institutionEl, purposeEl].forEach(el => {
                 if (!el) return;
                 el.addEventListener('input', () => {
                     if (el === nameEl) setFieldError(nameEl, nameErr, !nameEl.value.trim());
                     if (el === emailEl) setFieldError(emailEl, emailErr, !isValidEmail(emailEl.value.trim()));
                     if (el === institutionEl) setFieldError(institutionEl, institutionErr, !institutionEl.value.trim());
                     return;
                 }
                 showAccessFeedback('Request received. You will be contacted after review.', 'success');
                 accessForm.reset();
             });
         }
         /* -----------------------------------------------------------------
            CHAT FUNCTIONALITY (static-safe)
         ----------------------------------------------------------------- */
         const chatForm = document.getElementById('chat-form');
         const chatInput = document.getElementById('chat-input');
         const typingIndicator = document.getElementById('typing-indicator');
         const sendBtn = document.getElementById('send-btn');
         function addMessage(text, isUser = false) {
             const safe = escapeHtml(text);
             const messageDiv = document.createElement('div');
         }
         async function callServerChat(userMessage) {
+            // This would be a server endpoint in production
+            // For static demo, always fall back to local response
+            throw new Error('Server endpoint not available in static demo');
         }
         function localDemoResponse(userMessage) {
         const whitePaperBtn = document.getElementById('white-paper-btn');
         if (whitePaperBtn) {
             whitePaperBtn.addEventListener('click', () => {
+                // In a real site, this would open a PDF or external link
+                // For demo, we'll show a message
+                const modal = document.createElement('div');
+                modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-visible';
+                modal.innerHTML = `
+                    <div class="bg-gray-900/90 border border-gray-800 rounded-xl max-w-md w-full mx-4 relative overflow-hidden">
+                        <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-600 to-purple-600"></div>
+                        <div class="p-6">
+                            <div class="flex justify-between items-start mb-6">
+                                <h3 class="text-xl font-bold">White Paper</h3>
+                                <button class="text-gray-400 hover:text-white close-white-paper focus-ring">
+                                    <i class="fas fa-times"></i>
+                                </button>
+                            </div>
+                            <p class="text-gray-300 mb-6">The SI White Paper is available to qualified researchers upon request. Please use the Access form to request documentation.</p>
+                            <button class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 transition close-white-paper focus-ring">
+                                Close
+                            </button>
+                        </div>
+                    </div>
+                `;
+                document.body.appendChild(modal);
+                const closeBtn = modal.querySelector('.close-white-paper');
+                closeBtn.addEventListener('click', () => {
+                    toggleModal(modal, false);
+                    setTimeout(() => modal.remove(), 300);
+                });
+                modal.addEventListener('click', (e) => {
+                    if (e.target === modal) {
+                        toggleModal(modal, false);
+                        setTimeout(() => modal.remove(), 300);
+                    }
+                });
+                toggleModal(modal, true);
             });
         }
         const ethicsBtn = document.getElementById('ethics-btn');
         if (ethicsBtn) {
             ethicsBtn.addEventListener('click', () => {
+                // Similar to white paper button
+                const modal = document.createElement('div');
+                modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-visible';
+                modal.innerHTML = `
+                    <div class="bg-gray-900/90 border border-gray-800 rounded-xl max-w-md w-full mx-4 relative overflow-hidden">
+                        <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-green-600 to-emerald-600"></div>
+                        <div class="p-6">
+                            <div class="flex justify-between items-start mb-6">
+                                <h3 class="text-xl font-bold">Ethical Framework</h3>
+                                <button class="text-gray-400 hover:text-white close-ethics focus-ring">
+                                    <i class="fas fa-times"></i>
+                                </button>
+                            </div>
+                            <p class="text-gray-300 mb-6">The full ethical framework documentation outlines alignment protocols, safety measures, and governance structures. Available to research partners upon request.</p>
+                            <button class="w-full py-3 bg-gradient-to-r from-green-600 to-emerald-600 rounded-lg hover:opacity-90 transition close-ethics focus-ring">
+                                Close
+                            </button>
+                        </div>
+                    </div>
+                `;
+                document.body.appendChild(modal);
+                const closeBtn = modal.querySelector('.close-ethics');
+                closeBtn.addEventListener('click', () => {
+                    toggleModal(modal, false);
+                    setTimeout(() => modal.remove(), 300);
+                });
+                modal.addEventListener('click', (e) => {
+                    if (e.target === modal) {
+                        toggleModal(modal, false);
+                        setTimeout(() => modal.remove(), 300);
+                    }
+                });
+                toggleModal(modal, true);
             });
         }
         const neuralCtx = neuralCanvas.getContext('2d');
         function resizeNeuralCanvas() {
+            if (neuralCanvas && neuralCanvas.parentElement) {
+                neuralCanvas.width = neuralCanvas.parentElement.clientWidth;
+                neuralCanvas.height = neuralCanvas.parentElement.clientHeight;
+            }
         }
         resizeNeuralCanvas();
         window.addEventListener('resize', () => {
             }
         }
         setupNeurons();
         function drawNeuralActivity(time) {
+            if (!neuralCanvas || !neuralCtx) return;
             const w = neuralCanvas.width;
             const h = neuralCanvas.height;
             neuralCtx.clearRect(0, 0, w, h);
             requestAnimationFrame(drawNeuralActivity);
         }
+        if (neuralCanvas && neuralCtx) {
+            requestAnimationFrame(drawNeuralActivity);
+        }
         /* -----------------------------------------------------------------
            LAB NAVIGATOR (hash + active node + dossier)
                     "Quantum Lambda: high-frequency decision systems (concept/prototype)"
                 ],
                 primary: { label: "Open Programs", action: () => { window.location.href = "capabilities.html"; } },
+                secondary: { label: "View Note", action: () => {
+                    // Demo note viewer
+                    const modal = document.createElement('div');
+                    modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-visible';
+                    modal.innerHTML = `
+                        <div class="bg-gray-900/90 border border-gray-800 rounded-xl max-w-2xl w-full mx-4 relative overflow-hidden">
+                            <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-600 to-purple-600"></div>
+                            <div class="p-6">
+                                <div class="flex justify-between items-start mb-6">
+                                    <h3 class="text-xl font-bold">Program Technical Note</h3>
+                                    <button class="text-gray-400 hover:text-white close-note-viewer focus-ring">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                                <p class="text-gray-300 mb-4">Technical notes contain evaluation protocols, assumptions, and evidence capsules. Available to qualified researchers.</p>
+                                <button class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 transition close-note-viewer focus-ring">
+                                    Close
+                                </button>
+                            </div>
+                        </div>
+                    `;
+                    document.body.appendChild(modal);
+                    const closeBtn = modal.querySelector('.close-note-viewer');
+                    closeBtn.addEventListener('click', () => {
+                        toggleModal(modal, false);
+                        setTimeout(() => modal.remove(), 300);
+                    });
+                    modal.addEventListener('click', (e) => {
+                        if (e.target === modal) {
+                            toggleModal(modal, false);
+                            setTimeout(() => modal.remove(), 300);
+                        }
+                    });
+                    toggleModal(modal, true);
+                } },
                 updated: "—"
             },
             ai_scientist: {
                     "Reproducible runs + audit logs",
                     "Report generation with citations and uncertainty"
                 ],
+                primary: { label: "Open", action: () => { window.location.href = "research.html"; } },
                 secondary: { label: "Research Notes", action: () => { window.location.href = "research.html"; } },
                 updated: "—"
             },
                     "Permissioning + audit trails",
                     "Human-in-the-loop checkpoints"
                 ],
+                primary: { label: "Open", action: () => { window.location.href = "about.html#safety"; } },
                 secondary: { label: "Safety", action: () => { window.location.href = "about.html"; } },
                 updated: "—"
             },
                     "Limitations and failure modes"
                 ],
                 primary: { label: "Open", action: () => { window.location.href = "research.html"; } },
+                secondary: { label: "White Paper", action: () => { whitePaperBtn.click(); } },
                 updated: "—"
             },
             safety: {
                     "Data handling and access controls"
                 ],
                 primary: { label: "Open", action: () => { window.location.href = "about.html"; } },
+                secondary: { label: "Ethics", action: () => { ethicsBtn.click(); } },
                 updated: "—"
             },
             access: {
         function setActiveLabNode(key) {
             document.querySelectorAll('.lab-node').forEach(btn => {
                 const isActive = btn.getAttribute('data-dossier') === key;
+                btn.classList.toggle('active', isActive);
+                btn.setAttribute('aria-current', isActive ? 'true' : 'false');
             });
         }
             setTimeout(() => labNav.focus(), 0);
             // Ensure a stable default selection when opened
+            const alreadyActive = document.querySelector('.lab-node.active');
             if (!alreadyActive) renderDossier('start');
         }
             const key = currentHashKey();
             // If hash is not a modal hash, do not force-close other modals.
+            if (!CONFIG.MODAL_HASHES.has(key)) return;
             // Ensure only the requested overlay is open.
             closeAllOverlaysIfNeeded();
                 return;
             }
         });
+        // Initial dossier render
+        renderDossier('start');
     </script>
 </body>
+</html>