Testing347 commited on
Commit
495b706
·
verified ·
1 Parent(s): 6b1bbc5

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +149 -113
index.html CHANGED
@@ -4,46 +4,150 @@
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
6
  <title>SILENTPATTERN — Lab Interface</title>
 
7
 
 
 
 
 
 
8
  <script src="https://cdn.tailwindcss.com"></script>
9
 
 
10
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
11
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
 
13
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
14
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
15
  <link rel="stylesheet" href="assets/site.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  </head>
17
 
18
  <body class="bg-black text-white overflow-x-hidden">
 
 
 
 
 
 
 
19
  <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
20
 
21
- <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
22
- <a href="index.html" class="flex items-center space-x-2">
23
- <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
 
24
  <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
25
  </div>
26
  <span class="text-xl font-semibold">SILENTPATTERN</span>
27
  </a>
28
 
29
  <div class="flex items-center space-x-3">
30
- <button id="lab-nav-btn"
31
  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"
32
  aria-label="Open Lab Navigator" title="Lab Navigator">
33
- <i class="fas fa-asterisk text-indigo-300 text-sm"></i>
34
  </button>
35
 
36
- <button id="access-btn"
37
  class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">
38
  Access
39
  </button>
40
  </div>
41
  </nav>
42
 
 
43
  <section class="relative z-10 px-6 pt-14 pb-10">
44
  <div class="max-w-6xl mx-auto">
45
  <div class="inline-flex items-center gap-3 self-start px-4 py-2 rounded-full border border-gray-800 bg-gray-900/20 backdrop-blur-sm">
46
- <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
47
  <span class="text-xs text-gray-300 tracking-widest uppercase">Start</span>
48
  <span class="text-xs text-gray-500">Lab interface</span>
49
  </div>
@@ -103,22 +207,30 @@
103
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
104
  <a href="capabilities.html"
105
  class="rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 conscious-element">
106
- <div class="text-sm font-semibold text-gray-100"><i class="fas fa-layer-group mr-2 text-indigo-300"></i>Programs</div>
 
 
107
  <div class="text-xs text-gray-500 mt-1">MCAP · CHAI · Quantum Lambda · AI Scientist</div>
108
  </a>
109
  <a href="chat.html"
110
  class="rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 conscious-element">
111
- <div class="text-sm font-semibold text-gray-100"><i class="fas fa-terminal mr-2 text-indigo-300"></i>Console</div>
 
 
112
  <div class="text-xs text-gray-500 mt-1">Controlled chat with exportable transcripts</div>
113
  </a>
114
  <a href="research.html"
115
  class="rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 conscious-element">
116
- <div class="text-sm font-semibold text-gray-100"><i class="fas fa-file-lines mr-2 text-indigo-300"></i>Research</div>
 
 
117
  <div class="text-xs text-gray-500 mt-1">Notes, briefs, and evaluation artifacts</div>
118
  </a>
119
  <a href="contact.html"
120
  class="rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 conscious-element">
121
- <div class="text-sm font-semibold text-gray-100"><i class="fas fa-inbox mr-2 text-indigo-300"></i>Contact</div>
 
 
122
  <div class="text-xs text-gray-500 mt-1">Direct channel and coordination</div>
123
  </a>
124
  </div>
@@ -136,6 +248,7 @@
136
  </div>
137
  </section>
138
 
 
139
  <section class="relative z-10 px-6 pb-16">
140
  <div class="max-w-6xl mx-auto">
141
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -143,7 +256,7 @@
143
  class="rounded-2xl border border-gray-800 bg-gray-900/20 hover:bg-gray-900/30 transition p-6 aura conscious-element">
144
  <div class="flex items-center justify-between">
145
  <div class="text-sm text-gray-200 font-semibold">Program Bay</div>
146
- <i class="fas fa-arrow-right text-gray-400"></i>
147
  </div>
148
  <div class="mt-3 text-gray-300">
149
  Dossiers for MCAP, CHAI, Quantum Lambda, AI Scientist, and Agentic Workforce.
@@ -155,7 +268,7 @@
155
  class="rounded-2xl border border-gray-800 bg-gray-900/20 hover:bg-gray-900/30 transition p-6 aura conscious-element">
156
  <div class="flex items-center justify-between">
157
  <div class="text-sm text-gray-200 font-semibold">Console</div>
158
- <i class="fas fa-arrow-right text-gray-400"></i>
159
  </div>
160
  <div class="mt-3 text-gray-300">
161
  Controlled interaction channel with exportable transcripts.
@@ -167,7 +280,7 @@
167
  class="rounded-2xl border border-gray-800 bg-gray-900/20 hover:bg-gray-900/30 transition p-6 text-left aura conscious-element">
168
  <div class="flex items-center justify-between">
169
  <div class="text-sm text-gray-200 font-semibold">Request Access</div>
170
- <i class="fas fa-lock text-gray-400"></i>
171
  </div>
172
  <div class="mt-3 text-gray-300">
173
  Curated access for research, evaluation, and controlled demos.
@@ -178,6 +291,7 @@
178
  </div>
179
  </section>
180
 
 
181
  <footer class="relative z-10 px-6 pb-10">
182
  <div class="max-w-6xl mx-auto border-t border-gray-800/60 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
183
  <div class="text-sm text-gray-500">© 2025 SILENTPATTERN. All rights reserved.</div>
@@ -193,7 +307,7 @@
193
  <!-- ACCESS MODAL -->
194
  <div id="access-modal"
195
  class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
196
- role="dialog" aria-modal="true" aria-labelledby="access-modal-title" tabindex="-1">
197
  <div class="bg-gray-900/90 border border-gray-800 rounded-xl max-w-md w-full mx-4 relative overflow-hidden">
198
  <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-600 to-purple-600"></div>
199
  <div class="p-6">
@@ -202,8 +316,8 @@
202
  <h3 class="text-xl font-bold" id="access-modal-title">Request Access</h3>
203
  <p class="text-gray-400 mt-1">Curated access for research and evaluation</p>
204
  </div>
205
- <button id="close-access-modal" class="text-gray-400 hover:text-white" aria-label="Close">
206
- <i class="fas fa-times"></i>
207
  </button>
208
  </div>
209
 
@@ -243,16 +357,17 @@
243
  <!-- LAB NAVIGATOR -->
244
  <div id="lab-navigator"
245
  class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-md modal modal-hidden"
246
- role="dialog" aria-modal="true" aria-label="Lab Navigator" tabindex="-1">
247
 
248
  <div class="absolute inset-0" data-lab-close="true"></div>
249
 
250
  <div class="relative w-full h-full flex items-center justify-center p-6">
251
  <div class="w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
 
252
  <div class="relative rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
253
  <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800/60">
254
  <div class="flex items-center space-x-3">
255
- <div class="w-7 h-7 rounded-full bg-indigo-600 flex items-center justify-center">
256
  <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div>
257
  </div>
258
  <div>
@@ -261,47 +376,41 @@
261
  </div>
262
  </div>
263
 
264
- <button id="lab-nav-close"
265
  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"
266
  aria-label="Close Lab Navigator">
267
- <i class="fas fa-times text-gray-300 text-sm"></i>
268
  </button>
269
  </div>
270
 
271
  <div class="relative p-6 min-h-[420px]">
272
  <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3">
273
- <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"
274
- data-dossier="start">
275
  <div class="text-sm text-gray-200 font-medium">Start Here</div>
276
  <div class="text-xs text-gray-500 mt-1">Entry interface</div>
277
  </button>
278
 
279
- <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"
280
- data-dossier="programs">
281
  <div class="text-sm text-gray-200 font-medium">Programs</div>
282
  <div class="text-xs text-gray-500 mt-1">Program Bay dossiers</div>
283
  </button>
284
 
285
- <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"
286
- data-dossier="console">
287
  <div class="text-sm text-gray-200 font-medium">Console</div>
288
  <div class="text-xs text-gray-500 mt-1">Controlled chat</div>
289
  </button>
290
 
291
- <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"
292
- data-dossier="research">
293
  <div class="text-sm text-gray-200 font-medium">Research</div>
294
  <div class="text-xs text-gray-500 mt-1">Notes and briefs</div>
295
  </button>
296
 
297
- <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"
298
- data-dossier="contact">
299
  <div class="text-sm text-gray-200 font-medium">Contact</div>
300
  <div class="text-xs text-gray-500 mt-1">Direct channel</div>
301
  </button>
302
 
303
- <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"
304
- data-dossier="access">
305
  <div class="text-sm text-gray-200 font-medium">Access</div>
306
  <div class="text-xs text-gray-500 mt-1">Curated entry</div>
307
  </button>
@@ -313,6 +422,7 @@
313
  </div>
314
  </div>
315
 
 
316
  <div class="relative rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
317
  <div class="px-6 py-5 border-b border-gray-800/60">
318
  <div class="flex items-start justify-between gap-4">
@@ -320,8 +430,7 @@
320
  <div id="dossier-title" class="text-lg font-semibold text-gray-100">Lab Dossier</div>
321
  <div id="dossier-subtitle" class="text-xs text-gray-500 mt-1">Select a node to load details.</div>
322
  </div>
323
- <div id="dossier-status"
324
- class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
325
  READY
326
  </div>
327
  </div>
@@ -340,11 +449,11 @@
340
  </div>
341
 
342
  <div class="flex flex-col sm:flex-row gap-3">
343
- <button id="dossier-primary"
344
  class="flex-1 px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition">
345
  Open
346
  </button>
347
- <button id="dossier-secondary"
348
  class="flex-1 px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition">
349
  View Note
350
  </button>
@@ -355,82 +464,9 @@
355
  </div>
356
  </div>
357
  </div>
 
358
  </div>
359
  </div>
360
  </div>
361
-
362
- <!-- Shared JS -->
363
- <script src="assets/site.js"></script>
364
- <script>
365
- document.addEventListener('DOMContentLoaded', () => {
366
- SilentPattern.initVanta();
367
- SilentPattern.setupAccessModal();
368
-
369
- const DOSSIERS = {
370
- start: {
371
- title: "Start Here",
372
- subtitle: "Entry interface",
373
- status: "ACTIVE",
374
- body: "This is the primary entry layer: minimal navigation surface, with modules accessible through dossiers.",
375
- evidence: ["Reduced surface area", "Conservative claims", "Evaluation posture visible"],
376
- primary: { label: "Close Navigator", action: () => SilentPattern.toggleModal(document.getElementById('lab-navigator'), false) },
377
- secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
378
- updated: "—"
379
- },
380
- programs: {
381
- title: "Programs",
382
- subtitle: "Program Bay dossiers",
383
- status: "ACTIVE",
384
- body: "Programs are exposed as dossiers: scope, assumptions, evaluation protocol, and access gates.",
385
- evidence: ["MCAP · CHAI · Quantum Lambda", "AI Scientist prototype", "Agentic Workforce concept"],
386
- primary: { label: "Open Programs", action: () => { window.location.href = "capabilities.html"; } },
387
- secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
388
- updated: "—"
389
- },
390
- console: {
391
- title: "Console",
392
- subtitle: "Controlled interaction channel",
393
- status: "DRAFT",
394
- body: "The console is UI-only by design and should call a server endpoint for any model access. Transcripts are exportable for auditability.",
395
- evidence: ["No client-side secrets", "Server endpoint integration", "Exportable transcript format"],
396
- primary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
397
- secondary: { label: "Close Navigator", action: () => SilentPattern.toggleModal(document.getElementById('lab-navigator'), false) },
398
- updated: "—"
399
- },
400
- research: {
401
- title: "Research",
402
- subtitle: "Notes and briefs",
403
- status: "DRAFT",
404
- body: "Research notes should remain evidence-first: protocols, results, uncertainty, and failure modes.",
405
- evidence: ["Evaluation artifacts", "Reproducibility hooks", "Conservative external wording"],
406
- primary: { label: "Open Research", action: () => { window.location.href = "research.html"; } },
407
- secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } },
408
- updated: "—"
409
- },
410
- contact: {
411
- title: "Contact",
412
- subtitle: "Direct channel",
413
- status: "ACTIVE",
414
- body: "A single coordination channel for qualified requests and high-signal feedback.",
415
- evidence: ["Curated inbound", "Clear scope alignment", "Responsible scaling"],
416
- primary: { label: "Open Contact", action: () => { window.location.href = "contact.html"; } },
417
- secondary: { label: "Request Access", action: () => { SilentPattern.toggleModal(document.getElementById('lab-navigator'), false); document.getElementById('access-btn').click(); } },
418
- updated: "—"
419
- },
420
- access: {
421
- title: "Access",
422
- subtitle: "Curated entry",
423
- status: "ACTIVE",
424
- body: "Access is curated to keep evaluation controlled: qualified users, high-signal feedback, and responsible iteration.",
425
- evidence: ["Application-based", "Segmented by intent", "Controlled demos"],
426
- primary: { label: "Request Access", action: () => { SilentPattern.toggleModal(document.getElementById('lab-navigator'), false); document.getElementById('access-btn').click(); } },
427
- secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } },
428
- updated: "—"
429
- }
430
- };
431
-
432
- SilentPattern.setupLabNavigator(DOSSIERS, 'start');
433
- });
434
- </script>
435
  </body>
436
  </html>
 
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
6
  <title>SILENTPATTERN — Lab Interface</title>
7
+ <meta name="description" content="SILENTPATTERN lab interface: programs as dossiers, evaluation-first posture, auditable outputs." />
8
 
9
+ <!-- Fonts + Icons -->
10
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+
13
+ <!-- Tailwind -->
14
  <script src="https://cdn.tailwindcss.com"></script>
15
 
16
+ <!-- Three.js + Vanta (required by assets/site.js initVanta) -->
17
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
18
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
19
 
20
+ <!-- Shared CSS -->
 
21
  <link rel="stylesheet" href="assets/site.css">
22
+
23
+ <!-- Minimal fallback if CSS misses body font -->
24
+ <style>
25
+ body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
26
+ </style>
27
+
28
+ <!-- Page dossiers (must exist before DOMContentLoaded; site.js reads these) -->
29
+ <script>
30
+ window.SilentPatternDefaultDossier = "start";
31
+ window.SilentPatternDossiers = {
32
+ start: {
33
+ title: "Start Here",
34
+ subtitle: "Entry interface",
35
+ status: "ACTIVE",
36
+ body: "This is the primary entry layer: minimal navigation surface, with modules accessible through dossiers.",
37
+ evidence: ["Reduced surface area", "Conservative claims", "Evaluation posture visible"],
38
+ primary: { label: "Close Navigator", action: () => window.SilentPattern?.toggleModal(document.getElementById("lab-navigator"), false) },
39
+ secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
40
+ updated: "—"
41
+ },
42
+ programs: {
43
+ title: "Programs",
44
+ subtitle: "Program Bay dossiers",
45
+ status: "ACTIVE",
46
+ body: "Programs are exposed as dossiers: scope, assumptions, evaluation protocol, and access gates.",
47
+ evidence: ["MCAP · CHAI · Quantum Lambda", "AI Scientist prototype", "Agentic Workforce concept"],
48
+ primary: { label: "Open Programs", action: () => { window.location.href = "capabilities.html"; } },
49
+ secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
50
+ updated: "—"
51
+ },
52
+ console: {
53
+ title: "Console",
54
+ subtitle: "Controlled interaction channel",
55
+ status: "DRAFT",
56
+ body: "The console is UI-only by design and should call a server endpoint for any model access. Transcripts are exportable for auditability.",
57
+ evidence: ["No client-side secrets", "Server endpoint integration", "Exportable transcript format"],
58
+ primary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
59
+ secondary: { label: "Close Navigator", action: () => window.SilentPattern?.toggleModal(document.getElementById("lab-navigator"), false) },
60
+ updated: "—"
61
+ },
62
+ research: {
63
+ title: "Research",
64
+ subtitle: "Notes and briefs",
65
+ status: "DRAFT",
66
+ body: "Research notes should remain evidence-first: protocols, results, uncertainty, and failure modes.",
67
+ evidence: ["Evaluation artifacts", "Reproducibility hooks", "Conservative external wording"],
68
+ primary: { label: "Open Research", action: () => { window.location.href = "research.html"; } },
69
+ secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } },
70
+ updated: "—"
71
+ },
72
+ contact: {
73
+ title: "Contact",
74
+ subtitle: "Direct channel",
75
+ status: "ACTIVE",
76
+ body: "A single coordination channel for qualified requests and high-signal feedback.",
77
+ evidence: ["Curated inbound", "Clear scope alignment", "Responsible scaling"],
78
+ primary: { label: "Open Contact", action: () => { window.location.href = "contact.html"; } },
79
+ secondary: {
80
+ label: "Request Access",
81
+ action: () => {
82
+ window.SilentPattern?.toggleModal(document.getElementById("lab-navigator"), false);
83
+ const btn = document.getElementById("access-btn");
84
+ if (btn) btn.click();
85
+ }
86
+ },
87
+ updated: "—"
88
+ },
89
+ access: {
90
+ title: "Access",
91
+ subtitle: "Curated entry",
92
+ status: "ACTIVE",
93
+ body: "Access is curated to keep evaluation controlled: qualified users, high-signal feedback, and responsible iteration.",
94
+ evidence: ["Application-based", "Segmented by intent", "Controlled demos"],
95
+ primary: {
96
+ label: "Request Access",
97
+ action: () => {
98
+ window.SilentPattern?.toggleModal(document.getElementById("lab-navigator"), false);
99
+ const btn = document.getElementById("access-btn");
100
+ if (btn) btn.click();
101
+ }
102
+ },
103
+ secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } },
104
+ updated: "—"
105
+ }
106
+ };
107
+ </script>
108
+
109
+ <!-- Shared JS (must be a real JS file; no <script> tags inside it) -->
110
+ <script src="assets/site.js" defer></script>
111
  </head>
112
 
113
  <body class="bg-black text-white overflow-x-hidden">
114
+ <noscript>
115
+ <div class="relative z-50 bg-black text-white p-4 border-b border-gray-800">
116
+ This site requires JavaScript for the animated background and modal navigation.
117
+ </div>
118
+ </noscript>
119
+
120
+ <!-- Animated background -->
121
  <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
122
 
123
+ <!-- Top bar -->
124
+ <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm" aria-label="Primary">
125
+ <a href="index.html" class="flex items-center space-x-2" aria-label="SILENTPATTERN home">
126
+ <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center" aria-hidden="true">
127
  <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
128
  </div>
129
  <span class="text-xl font-semibold">SILENTPATTERN</span>
130
  </a>
131
 
132
  <div class="flex items-center space-x-3">
133
+ <button id="lab-nav-btn" type="button"
134
  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"
135
  aria-label="Open Lab Navigator" title="Lab Navigator">
136
+ <i class="fas fa-asterisk text-indigo-300 text-sm" aria-hidden="true"></i>
137
  </button>
138
 
139
+ <button id="access-btn" type="button"
140
  class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">
141
  Access
142
  </button>
143
  </div>
144
  </nav>
145
 
146
+ <!-- HERO -->
147
  <section class="relative z-10 px-6 pt-14 pb-10">
148
  <div class="max-w-6xl mx-auto">
149
  <div class="inline-flex items-center gap-3 self-start px-4 py-2 rounded-full border border-gray-800 bg-gray-900/20 backdrop-blur-sm">
150
+ <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse" aria-hidden="true"></span>
151
  <span class="text-xs text-gray-300 tracking-widest uppercase">Start</span>
152
  <span class="text-xs text-gray-500">Lab interface</span>
153
  </div>
 
207
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
208
  <a href="capabilities.html"
209
  class="rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 conscious-element">
210
+ <div class="text-sm font-semibold text-gray-100">
211
+ <i class="fas fa-layer-group mr-2 text-indigo-300" aria-hidden="true"></i>Programs
212
+ </div>
213
  <div class="text-xs text-gray-500 mt-1">MCAP · CHAI · Quantum Lambda · AI Scientist</div>
214
  </a>
215
  <a href="chat.html"
216
  class="rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 conscious-element">
217
+ <div class="text-sm font-semibold text-gray-100">
218
+ <i class="fas fa-terminal mr-2 text-indigo-300" aria-hidden="true"></i>Console
219
+ </div>
220
  <div class="text-xs text-gray-500 mt-1">Controlled chat with exportable transcripts</div>
221
  </a>
222
  <a href="research.html"
223
  class="rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 conscious-element">
224
+ <div class="text-sm font-semibold text-gray-100">
225
+ <i class="fas fa-file-lines mr-2 text-indigo-300" aria-hidden="true"></i>Research
226
+ </div>
227
  <div class="text-xs text-gray-500 mt-1">Notes, briefs, and evaluation artifacts</div>
228
  </a>
229
  <a href="contact.html"
230
  class="rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 conscious-element">
231
+ <div class="text-sm font-semibold text-gray-100">
232
+ <i class="fas fa-inbox mr-2 text-indigo-300" aria-hidden="true"></i>Contact
233
+ </div>
234
  <div class="text-xs text-gray-500 mt-1">Direct channel and coordination</div>
235
  </a>
236
  </div>
 
248
  </div>
249
  </section>
250
 
251
+ <!-- QUICK ENTRY CARDS -->
252
  <section class="relative z-10 px-6 pb-16">
253
  <div class="max-w-6xl mx-auto">
254
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
256
  class="rounded-2xl border border-gray-800 bg-gray-900/20 hover:bg-gray-900/30 transition p-6 aura conscious-element">
257
  <div class="flex items-center justify-between">
258
  <div class="text-sm text-gray-200 font-semibold">Program Bay</div>
259
+ <i class="fas fa-arrow-right text-gray-400" aria-hidden="true"></i>
260
  </div>
261
  <div class="mt-3 text-gray-300">
262
  Dossiers for MCAP, CHAI, Quantum Lambda, AI Scientist, and Agentic Workforce.
 
268
  class="rounded-2xl border border-gray-800 bg-gray-900/20 hover:bg-gray-900/30 transition p-6 aura conscious-element">
269
  <div class="flex items-center justify-between">
270
  <div class="text-sm text-gray-200 font-semibold">Console</div>
271
+ <i class="fas fa-arrow-right text-gray-400" aria-hidden="true"></i>
272
  </div>
273
  <div class="mt-3 text-gray-300">
274
  Controlled interaction channel with exportable transcripts.
 
280
  class="rounded-2xl border border-gray-800 bg-gray-900/20 hover:bg-gray-900/30 transition p-6 text-left aura conscious-element">
281
  <div class="flex items-center justify-between">
282
  <div class="text-sm text-gray-200 font-semibold">Request Access</div>
283
+ <i class="fas fa-lock text-gray-400" aria-hidden="true"></i>
284
  </div>
285
  <div class="mt-3 text-gray-300">
286
  Curated access for research, evaluation, and controlled demos.
 
291
  </div>
292
  </section>
293
 
294
+ <!-- Footer -->
295
  <footer class="relative z-10 px-6 pb-10">
296
  <div class="max-w-6xl mx-auto border-t border-gray-800/60 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
297
  <div class="text-sm text-gray-500">© 2025 SILENTPATTERN. All rights reserved.</div>
 
307
  <!-- ACCESS MODAL -->
308
  <div id="access-modal"
309
  class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
310
+ role="dialog" aria-modal="true" aria-labelledby="access-modal-title" aria-hidden="true">
311
  <div class="bg-gray-900/90 border border-gray-800 rounded-xl max-w-md w-full mx-4 relative overflow-hidden">
312
  <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-600 to-purple-600"></div>
313
  <div class="p-6">
 
316
  <h3 class="text-xl font-bold" id="access-modal-title">Request Access</h3>
317
  <p class="text-gray-400 mt-1">Curated access for research and evaluation</p>
318
  </div>
319
+ <button id="close-access-modal" type="button" class="text-gray-400 hover:text-white" aria-label="Close">
320
+ <i class="fas fa-times" aria-hidden="true"></i>
321
  </button>
322
  </div>
323
 
 
357
  <!-- LAB NAVIGATOR -->
358
  <div id="lab-navigator"
359
  class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-md modal modal-hidden"
360
+ role="dialog" aria-modal="true" aria-label="Lab Navigator" aria-hidden="true">
361
 
362
  <div class="absolute inset-0" data-lab-close="true"></div>
363
 
364
  <div class="relative w-full h-full flex items-center justify-center p-6">
365
  <div class="w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
366
+ <!-- Left panel -->
367
  <div class="relative rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
368
  <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800/60">
369
  <div class="flex items-center space-x-3">
370
+ <div class="w-7 h-7 rounded-full bg-indigo-600 flex items-center justify-center" aria-hidden="true">
371
  <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div>
372
  </div>
373
  <div>
 
376
  </div>
377
  </div>
378
 
379
+ <button id="lab-nav-close" type="button"
380
  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"
381
  aria-label="Close Lab Navigator">
382
+ <i class="fas fa-times text-gray-300 text-sm" aria-hidden="true"></i>
383
  </button>
384
  </div>
385
 
386
  <div class="relative p-6 min-h-[420px]">
387
  <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3">
388
+ <button type="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">
 
389
  <div class="text-sm text-gray-200 font-medium">Start Here</div>
390
  <div class="text-xs text-gray-500 mt-1">Entry interface</div>
391
  </button>
392
 
393
+ <button type="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">
 
394
  <div class="text-sm text-gray-200 font-medium">Programs</div>
395
  <div class="text-xs text-gray-500 mt-1">Program Bay dossiers</div>
396
  </button>
397
 
398
+ <button type="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="console">
 
399
  <div class="text-sm text-gray-200 font-medium">Console</div>
400
  <div class="text-xs text-gray-500 mt-1">Controlled chat</div>
401
  </button>
402
 
403
+ <button type="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">
 
404
  <div class="text-sm text-gray-200 font-medium">Research</div>
405
  <div class="text-xs text-gray-500 mt-1">Notes and briefs</div>
406
  </button>
407
 
408
+ <button type="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="contact">
 
409
  <div class="text-sm text-gray-200 font-medium">Contact</div>
410
  <div class="text-xs text-gray-500 mt-1">Direct channel</div>
411
  </button>
412
 
413
+ <button type="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="access">
 
414
  <div class="text-sm text-gray-200 font-medium">Access</div>
415
  <div class="text-xs text-gray-500 mt-1">Curated entry</div>
416
  </button>
 
422
  </div>
423
  </div>
424
 
425
+ <!-- Right panel -->
426
  <div class="relative rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
427
  <div class="px-6 py-5 border-b border-gray-800/60">
428
  <div class="flex items-start justify-between gap-4">
 
430
  <div id="dossier-title" class="text-lg font-semibold text-gray-100">Lab Dossier</div>
431
  <div id="dossier-subtitle" class="text-xs text-gray-500 mt-1">Select a node to load details.</div>
432
  </div>
433
+ <div id="dossier-status" class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
 
434
  READY
435
  </div>
436
  </div>
 
449
  </div>
450
 
451
  <div class="flex flex-col sm:flex-row gap-3">
452
+ <button id="dossier-primary" type="button"
453
  class="flex-1 px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition">
454
  Open
455
  </button>
456
+ <button id="dossier-secondary" type="button"
457
  class="flex-1 px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition">
458
  View Note
459
  </button>
 
464
  </div>
465
  </div>
466
  </div>
467
+
468
  </div>
469
  </div>
470
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
471
  </body>
472
  </html>