File size: 16,348 Bytes
39edf13
 
 
2229534
 
 
 
 
 
 
 
 
 
 
39edf13
2229534
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39edf13
2229534
 
 
 
 
 
 
 
 
 
 
 
 
 
39edf13
2229534
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39edf13
2229534
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39edf13
2229534
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>SILENTPATTERN β€” Contact</title>

  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
  <link rel="stylesheet" href="assets/site.css">
</head>

<body class="bg-black text-white overflow-x-hidden">
  <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>

  <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
    <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">
        <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
      </div>
      <span class="text-xl font-semibold">SILENTPATTERN</span>
    </a>

    <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">
        <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">
        Access
      </button>
    </div>
  </nav>

  <section class="relative z-10 px-6 py-16">
    <div class="max-w-4xl mx-auto">
      <div class="inline-flex items-center space-x-3 px-4 py-2 rounded-full border border-gray-800 bg-gray-900/20 backdrop-blur-sm">
        <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
        <span class="text-xs text-gray-300 tracking-widest uppercase">Contact</span>
        <span class="text-xs text-gray-500">Coordination channel</span>
      </div>

      <h1 class="mt-6 text-3xl md:text-5xl font-bold">
        <span class="gradient-text">Contact</span>
      </h1>
      <p class="mt-3 text-gray-300 max-w-2xl">
        Use this channel for qualified requests, partnerships, and high-signal feedback.
      </p>

      <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="rounded-2xl border border-gray-800 bg-gray-900/20 p-6 aura">
          <div class="text-sm text-gray-200 font-semibold">Email</div>
          <p class="mt-2 text-gray-300">
            <a class="text-indigo-400 hover:underline" href="mailto:[email protected]">[email protected]</a>
          </p>
          <p class="mt-3 text-xs text-gray-500">
            Replace this address with your production inbox (e.g., research@ / partnerships@).
          </p>
        </div>

        <div class="rounded-2xl border border-gray-800 bg-gray-900/20 p-6 aura">
          <div class="text-sm text-gray-200 font-semibold">Notes</div>
          <ul class="mt-3 text-sm text-gray-300 space-y-2">
            <li class="flex gap-2"><span class="text-indigo-300">β€’</span><span>Do not send secrets or credentials.</span></li>
            <li class="flex gap-2"><span class="text-indigo-300">β€’</span><span>Include your intended evaluation scope and timeline.</span></li>
            <li class="flex gap-2"><span class="text-indigo-300">β€’</span><span>Link to relevant artifacts (papers, protocols, repos).</span></li>
          </ul>
          <div class="mt-5">
            <button id="access-cta"
              class="px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition">
              Request Access
            </button>
          </div>
        </div>
      </div>

      <div class="mt-10 text-xs text-gray-500">
        This site is a research interface. No investment advice, solicitation, or performance claims are provided.
      </div>
    </div>
  </section>

  <footer class="relative z-10 px-6 pb-10">
    <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">
      <div class="text-sm text-gray-500">Β© 2025 SILENTPATTERN. All rights reserved.</div>
      <div class="text-sm text-gray-500 flex gap-6">
        <a href="research.html" class="hover:text-indigo-400 transition">Research</a>
        <a href="privacy.html" class="hover:text-indigo-400 transition">Privacy</a>
        <a href="terms.html" class="hover:text-indigo-400 transition">Terms</a>
        <a href="contact.html" class="hover:text-indigo-400 transition">Contact</a>
      </div>
    </div>
  </footer>

  <!-- ACCESS MODAL -->
  <div id="access-modal"
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
    role="dialog" aria-modal="true" aria-labelledby="access-modal-title" tabindex="-1">
    <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">
          <div>
            <h3 class="text-xl font-bold" id="access-modal-title">Request Access</h3>
            <p class="text-gray-400 mt-1">Curated access for research and evaluation</p>
          </div>
          <button id="close-access-modal" class="text-gray-400 hover:text-white" aria-label="Close">
            <i class="fas fa-times"></i>
          </button>
        </div>

        <form id="access-form" class="space-y-4">
          <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">
          </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">
          </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">
          </div>
          <div>
            <label for="purpose" class="block text-sm font-medium mb-1">Purpose</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 / Independent Research</option>
              <option value="development">Engineering / Product Evaluation</option>
              <option value="partnership">Partnership</option>
              <option value="other">Other</option>
            </select>
          </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>
        </form>
      </div>
    </div>
  </div>

  <!-- LAB NAVIGATOR (same structure as other pages; keep consistent) -->
  <div id="lab-navigator"
    class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-md modal modal-hidden"
    role="dialog" aria-modal="true" aria-label="Lab Navigator" tabindex="-1">
    <div class="absolute inset-0" data-lab-close="true"></div>
    <div class="relative w-full h-full flex items-center justify-center p-6">
      <div class="w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="relative rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
          <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800/60">
            <div class="flex items-center space-x-3">
              <div class="w-7 h-7 rounded-full bg-indigo-600 flex items-center justify-center">
                <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div>
              </div>
              <div>
                <div class="text-sm text-gray-300 tracking-wide">SILENTPATTERN</div>
                <div class="text-xs text-gray-500">Lab Navigator</div>
              </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"
              aria-label="Close Lab Navigator">
              <i class="fas fa-times text-gray-300 text-sm"></i>
            </button>
          </div>

          <div class="relative p-6 min-h-[420px]">
            <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">Entry interface</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">Program Bay dossiers</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="console">
                <div class="text-sm text-gray-200 font-medium">Console</div>
                <div class="text-xs text-gray-500 mt-1">Controlled chat</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="contact">
                <div class="text-sm text-gray-200 font-medium">Contact</div>
                <div class="text-xs text-gray-500 mt-1">This page</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">Curated entry</div>
              </button>
            </div>
            <div class="relative mt-6 text-xs text-gray-500">
              Tip: Press <span class="text-gray-300">Esc</span> to close.
            </div>
          </div>
        </div>

        <div class="relative rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
          <div class="px-6 py-5 border-b border-gray-800/60">
            <div class="flex items-start justify-between gap-4">
              <div>
                <div id="dossier-title" class="text-lg font-semibold text-gray-100">Lab Dossier</div>
                <div id="dossier-subtitle" class="text-xs text-gray-500 mt-1">Select a node to load details.</div>
              </div>
              <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">
                READY
              </div>
            </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"></div>
            <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
              <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evidence Capsule</div>
              <ul id="dossier-evidence" class="text-sm text-gray-300 space-y-1"></ul>
            </div>
            <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>
            <div id="dossier-meta" class="text-xs text-gray-500"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="assets/site.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      SilentPattern.initVanta();
      SilentPattern.setupAccessModal();

      const DOSSIERS = {
        start: {
          title: "Start Here",
          subtitle: "Entry interface",
          status: "ACTIVE",
          body: "Return to the main interface.",
          evidence: ["Public entry layer", "Programs as dossiers", "Console for controlled interaction"],
          primary: { label: "Go to Index", action: () => { window.location.href = "index.html"; } },
          secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } },
          updated: "β€”"
        },
        programs: {
          title: "Programs",
          subtitle: "Program Bay dossiers",
          status: "ACTIVE",
          body: "Programs are exposed as dossiers: scope, assumptions, evaluation protocol, and access gates.",
          evidence: ["MCAP Β· CHAI Β· Quantum Lambda", "AI Scientist", "Agentic Workforce"],
          primary: { label: "Open Programs", action: () => { window.location.href = "capabilities.html"; } },
          secondary: { label: "Console", action: () => { window.location.href = "chat.html"; } },
          updated: "β€”"
        },
        console: {
          title: "Console",
          subtitle: "Controlled interaction channel",
          status: "DRAFT",
          body: "Controlled chat with exportable transcripts. Model access must remain server-side.",
          evidence: ["No client-side secrets", "Audit-ready transcripts", "Fail-closed behaviors"],
          primary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
          secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
          updated: "β€”"
        },
        contact: {
          title: "Contact",
          subtitle: "Direct channel",
          status: "ACTIVE",
          body: "This page. Use it for qualified requests, partnerships, and high-signal feedback.",
          evidence: ["Curated inbound", "Scope alignment", "Responsible scaling"],
          primary: { label: "Close Navigator", action: () => SilentPattern.toggleModal(document.getElementById('lab-navigator'), false) },
          secondary: { label: "Request Access", action: () => { SilentPattern.toggleModal(document.getElementById('lab-navigator'), false); document.getElementById('access-btn').click(); } },
          updated: "β€”"
        },
        access: {
          title: "Access",
          subtitle: "Curated entry",
          status: "ACTIVE",
          body: "Request access for controlled demos and evaluation workflows.",
          evidence: ["Application-based", "Segmented by intent", "Controlled demos"],
          primary: { label: "Request Access", action: () => { SilentPattern.toggleModal(document.getElementById('lab-navigator'), false); document.getElementById('access-btn').click(); } },
          secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } },
          updated: "β€”"
        }
      };

      SilentPattern.setupLabNavigator(DOSSIERS, 'contact');
    });
  </script>
</body>
</html>