Update capabilities.html

capabilities.html

@@ -78,6 +78,13 @@
       background-size: 40px 40px;
       background-position: center;
     }
+
+    /* Active card state (minimal, consistent with design) */
+    .program-card.is-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>
 
@@ -97,12 +104,13 @@
     <div class="flex items-center space-x-3">
       <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"
-        aria-label="Open Lab Navigator" title="Lab Navigator">
+        aria-label="Open Lab Navigator" title="Lab Navigator" aria-controls="lab-navigator" aria-haspopup="dialog">
         <i class="fas fa-asterisk text-indigo-300 text-sm"></i>
       </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">
+        class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition"
+        aria-controls="access-modal" aria-haspopup="dialog">
         Access
       </button>
     </div>
@@ -157,7 +165,7 @@
               <!-- MCAP -->
               <button type="button"
                 class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
-                data-dossier="mcap">
+                data-dossier="mcap" aria-label="Open dossier: MCAP">
                 <div class="flex items-start justify-between gap-4">
                   <div>
                     <div class="text-lg font-semibold text-gray-100">MCAP</div>
@@ -177,7 +185,7 @@
               <!-- CHAI -->
               <button type="button"
                 class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
-                data-dossier="chai">
+                data-dossier="chai" aria-label="Open dossier: CHAI">
                 <div class="flex items-start justify-between gap-4">
                   <div>
                     <div class="text-lg font-semibold text-gray-100">CHAI</div>
@@ -197,7 +205,7 @@
               <!-- Quantum Lambda -->
               <button type="button"
                 class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
-                data-dossier="quantum_lambda">
+                data-dossier="quantum_lambda" aria-label="Open dossier: Quantum Lambda">
                 <div class="flex items-start justify-between gap-4">
                   <div>
                     <div class="text-lg font-semibold text-gray-100">Quantum Lambda</div>
@@ -217,7 +225,7 @@
               <!-- AI Scientist -->
               <button type="button"
                 class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
-                data-dossier="ai_scientist">
+                data-dossier="ai_scientist" aria-label="Open dossier: AI Scientist">
                 <div class="flex items-start justify-between gap-4">
                   <div>
                     <div class="text-lg font-semibold text-gray-100">AI Scientist</div>
@@ -237,7 +245,7 @@
               <!-- Agentic Workforce -->
               <button type="button"
                 class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element md:col-span-2"
-                data-dossier="agentic_workforce">
+                data-dossier="agentic_workforce" aria-label="Open dossier: Agentic Workforce">
                 <div class="flex items-start justify-between gap-4">
                   <div>
                     <div class="text-lg font-semibold text-gray-100">Agentic Workforce</div>
@@ -396,18 +404,23 @@
           </button>
         </div>
 
-        <form id="access-form" class="space-y-4">
+        <!-- Inline feedback (replaces alert) -->
+        <div id="access-feedback"
+          class="hidden mb-4 rounded-lg border border-gray-800 bg-black/25 px-4 py-3 text-sm"
+          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">
+            <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">
           </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">
+            <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">
           </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">
+            <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">
           </div>
           <div>
             <label for="purpose" class="block text-sm font-medium mb-1">Purpose</label>
@@ -516,7 +529,9 @@
   </div>
 
   <script>
-    /* VANTA BACKGROUND */
+    /* -------------------------------------------------------------
+       VANTA BACKGROUND
+    ------------------------------------------------------------- */
     const vantaEffect = VANTA.NET({
       el: "#vanta-bg",
       mouseControls: true,
@@ -534,7 +549,9 @@
     });
     window.addEventListener('resize', () => vantaEffect.resize());
 
-    /* MODAL HELPERS */
+    /* -------------------------------------------------------------
+       MODAL HELPERS
+    ------------------------------------------------------------- */
     function trapFocus(modal) {
       const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
       if (!focusable.length) return;
@@ -555,12 +572,14 @@
       modal.addEventListener('keydown', handler);
       modal._focusHandler = handler;
     }
+
     function untrapFocus(modal) {
       if (modal._focusHandler) {
         modal.removeEventListener('keydown', modal._focusHandler);
         delete modal._focusHandler;
       }
     }
+
     const toggleModal = (modal, show) => {
       if (show) {
         modal.classList.remove('modal-hidden');
@@ -575,34 +594,82 @@
       }
     };
 
-    /* ACCESS MODAL */
+    /* -------------------------------------------------------------
+       ACCESS MODAL + INLINE FEEDBACK (replaces alerts)
+    ------------------------------------------------------------- */
     const accessModal = document.getElementById('access-modal');
     const accessBtn = document.getElementById('access-btn');
     const closeAccessModal = document.getElementById('close-access-modal');
+    const accessForm = document.getElementById('access-form');
+    const accessFeedback = document.getElementById('access-feedback');
+
+    function setAccessFeedback(kind, text) {
+      // kind: 'error' | 'success' | 'info'
+      accessFeedback.classList.remove('hidden');
+      accessFeedback.classList.remove('border-red-500/30', 'bg-red-900/10', 'text-red-200');
+      accessFeedback.classList.remove('border-emerald-500/30', 'bg-emerald-900/10', 'text-emerald-200');
+      accessFeedback.classList.remove('border-indigo-500/30', 'bg-indigo-900/10', 'text-indigo-200');
+
+      if (kind === 'error') {
+        accessFeedback.classList.add('border-red-500/30', 'bg-red-900/10', 'text-red-200');
+      } else if (kind === 'success') {
+        accessFeedback.classList.add('border-emerald-500/30', 'bg-emerald-900/10', 'text-emerald-200');
+      } else {
+        accessFeedback.classList.add('border-indigo-500/30', 'bg-indigo-900/10', 'text-indigo-200');
+      }
+
+      accessFeedback.textContent = text;
+    }
+
+    function clearAccessFeedback() {
+      accessFeedback.classList.add('hidden');
+      accessFeedback.textContent = '';
+      accessFeedback.className = 'hidden mb-4 rounded-lg border border-gray-800 bg-black/25 px-4 py-3 text-sm';
+      // Restore base classes in case they were overwritten by className (above line sets baseline)
+    }
 
     accessBtn.addEventListener('click', () => {
+      clearAccessFeedback();
       toggleModal(accessModal, true);
       setTimeout(() => document.getElementById('name').focus(), 50);
     });
+
     closeAccessModal.addEventListener('click', () => toggleModal(accessModal, false));
     accessModal.addEventListener('click', (e) => { if (e.target === accessModal) toggleModal(accessModal, false); });
 
-    document.getElementById('access-form').addEventListener('submit', (e) => {
+    function isValidEmail(email) {
+      // Lightweight sanity check (not exhaustive)
+      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    }
+
+    accessForm.addEventListener('submit', (e) => {
       e.preventDefault();
+
       const name = document.getElementById('name').value.trim();
       const email = document.getElementById('email').value.trim();
       const institution = document.getElementById('institution').value.trim();
       const purpose = document.getElementById('purpose').value;
+
       if (!name || !email || !institution || !purpose) {
-        alert('Please fill in all fields.');
+        setAccessFeedback('error', 'Please fill in all fields.');
+        return;
+      }
+      if (!isValidEmail(email)) {
+        setAccessFeedback('error', 'Please enter a valid email address.');
         return;
       }
-      alert('Request received. You will be contacted after review.');
-      e.target.reset();
-      toggleModal(accessModal, false);
+
+      // Static-only behavior: confirm receipt, keep it calm and “lab-like”.
+      setAccessFeedback('success', 'Request received. You will be contacted after review.');
+      accessForm.reset();
+
+      // Optional auto-close after a brief pause (keeps the flow, but not abrupt)
+      setTimeout(() => toggleModal(accessModal, false), 900);
     });
 
-    /* LAB NAVIGATOR */
+    /* -------------------------------------------------------------
+       LAB NAVIGATOR
+    ------------------------------------------------------------- */
     const labNav = document.getElementById('lab-navigator');
     const labNavBtn = document.getElementById('lab-nav-btn');
     const labNavClose = document.getElementById('lab-nav-close');
@@ -625,7 +692,11 @@
       });
     });
 
-    /* DOSSIERS */
+    /* -------------------------------------------------------------
+       DOSSIERS
+       + Hash deep-linking (#mcap, #chai, etc.)
+       + Active-card state
+    ------------------------------------------------------------- */
     const DOSSIERS = {
       mcap: {
         title: "MCAP",
@@ -735,7 +806,31 @@
     const dossierSecondary = document.getElementById('dossier-secondary');
     const dossierMeta = document.getElementById('dossier-meta');
 
-    function renderDossier(key) {
+    const programCards = Array.from(document.querySelectorAll('.program-card'));
+
+    function setActiveCard(key) {
+      programCards.forEach(btn => {
+        const isMatch = btn.getAttribute('data-dossier') === key;
+        btn.classList.toggle('is-active', isMatch);
+        btn.setAttribute('aria-current', isMatch ? 'true' : 'false');
+      });
+    }
+
+    function updateHash(key, replace = false) {
+      const nextHash = `#${key}`;
+      if (replace) {
+        history.replaceState(null, '', nextHash);
+      } else {
+        history.pushState(null, '', nextHash);
+      }
+    }
+
+    function normalizeHashToKey() {
+      const raw = (window.location.hash || '').replace('#', '').trim().toLowerCase();
+      return raw && DOSSIERS[raw] ? raw : null;
+    }
+
+    function renderDossier(key, opts = { setHash: true, replaceHash: false, setActive: true }) {
       const d = DOSSIERS[key];
       if (!d) return;
 
@@ -762,22 +857,55 @@
       dossierSecondary.onclick = d.secondary.action;
 
       dossierMeta.innerHTML = `Last updated: <span class="text-gray-300">${d.updated}</span>`;
+
+      if (opts.setActive) setActiveCard(key);
+      if (opts.setHash) updateHash(key, opts.replaceHash);
+
+      // Keep the dossier panel in view on small screens without changing layout
+      // (only when user selects a card)
+      if (!opts.replaceHash) {
+        const isSmall = window.matchMedia && window.matchMedia('(max-width: 1023px)').matches;
+        if (isSmall) {
+          // subtle nudge: bring dossier header into view
+          dossierTitle.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      }
     }
 
-    document.querySelectorAll('.program-card').forEach(btn => {
-      btn.addEventListener('click', () => renderDossier(btn.getAttribute('data-dossier')));
+    // Card click: render dossier + update hash + active state
+    programCards.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const key = btn.getAttribute('data-dossier');
+        if (!key) return;
+        renderDossier(key, { setHash: true, replaceHash: false, setActive: true });
+      });
+    });
+
+    // Hash deep-link: initial load
+    (function initFromHashOrDefault() {
+      const keyFromHash = normalizeHashToKey();
+      const key = keyFromHash || 'mcap';
+      // replaceHash avoids adding an extra history entry on first load
+      renderDossier(key, { setHash: true, replaceHash: true, setActive: true });
+    })();
+
+    // Respond to manual hash changes / back-forward navigation
+    window.addEventListener('hashchange', () => {
+      const keyFromHash = normalizeHashToKey();
+      if (keyFromHash) {
+        renderDossier(keyFromHash, { setHash: false, replaceHash: false, setActive: true });
+      }
     });
 
-    /* ESC behavior */
+    /* -------------------------------------------------------------
+       GLOBAL ESC BEHAVIOR
+    ------------------------------------------------------------- */
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {
         if (labNav && !labNav.classList.contains('modal-hidden')) closeLabNav();
         if (accessModal && !accessModal.classList.contains('modal-hidden')) toggleModal(accessModal, false);
       }
     });
-
-    /* Default dossier */
-    renderDossier('mcap');
   </script>
 </body>
 </html>