Hugging Face's logo

Spaces:
Testing347
/
Copy-ava-testing
Running

App Files Community
Testing347 commited on
Commit
2229534
·
verified ·
1 Parent(s): 25e2014

Update contact.html

Browse files
Files changed (1) hide show
  1. contact.html +307 -28
contact.html CHANGED
@@ -1,36 +1,315 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>SI - Contact</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
- <style>body{font-family:'Inter',sans-serif;} .gradient-text{background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;}</style>
 
 
 
 
11
  </head>
12
- <body class="bg-black text-white">
13
- <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
14
- <div class="flex items-center space-x-2">
15
- <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>
16
- <span class="text-xl font-semibold">SI</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  </div>
18
- <div class="hidden md:flex space-x-8">
19
- <a href="capabilities.html" class="hover:text-indigo-400 transition">Capabilities</a>
20
- <a href="consciousness.html" class="hover:text-indigo-400 transition">Consciousness</a>
21
- <a href="chat.html" class="hover:text-indigo-400 transition">Chat</a>
22
- <a href="about.html" class="hover:text-indigo-400 transition">About</a>
 
 
 
 
 
 
 
 
 
23
  </div>
24
- <a href="access.html" class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">Access</a>
25
- </nav>
26
- <section class="py-24 px-6">
27
- <div class="max-w-3xl mx-auto">
28
- <h1 class="text-4xl font-bold mb-6 gradient-text">Contact Us</h1>
29
- <p class="text-gray-300 mb-4">For inquiries, please email <a href="mailto:info@example.com" class="text-indigo-400 hover:underline">info@example.com</a>.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  </div>
31
- </section>
32
- <footer class="relative z-10 py-12 px-6 border-t border-gray-800/50 text-center text-gray-500 text-sm">
33
- <p>© 2023 Super Intelligence. All rights reserved.</p>
34
- </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  </body>
36
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width,initial-scale=1.0" />
6
+ <title>SILENTPATTERN — Contact</title>
7
+
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
11
+
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
14
+ <link rel="stylesheet" href="assets/site.css">
15
  </head>
16
+
17
+ <body class="bg-black text-white overflow-x-hidden">
18
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
19
+
20
+ <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
21
+ <a href="index.html" class="flex items-center space-x-2">
22
+ <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
23
+ <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
24
+ </div>
25
+ <span class="text-xl font-semibold">SILENTPATTERN</span>
26
+ </a>
27
+
28
+ <div class="flex items-center space-x-3">
29
+ <button id="lab-nav-btn"
30
+ 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"
31
+ aria-label="Open Lab Navigator" title="Lab Navigator">
32
+ <i class="fas fa-asterisk text-indigo-300 text-sm"></i>
33
+ </button>
34
+
35
+ <button id="access-btn"
36
+ class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">
37
+ Access
38
+ </button>
39
+ </div>
40
+ </nav>
41
+
42
+ <section class="relative z-10 px-6 py-16">
43
+ <div class="max-w-4xl mx-auto">
44
+ <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">
45
+ <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
46
+ <span class="text-xs text-gray-300 tracking-widest uppercase">Contact</span>
47
+ <span class="text-xs text-gray-500">Coordination channel</span>
48
+ </div>
49
+
50
+ <h1 class="mt-6 text-3xl md:text-5xl font-bold">
51
+ <span class="gradient-text">Contact</span>
52
+ </h1>
53
+ <p class="mt-3 text-gray-300 max-w-2xl">
54
+ Use this channel for qualified requests, partnerships, and high-signal feedback.
55
+ </p>
56
+
57
+ <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
58
+ <div class="rounded-2xl border border-gray-800 bg-gray-900/20 p-6 aura">
59
+ <div class="text-sm text-gray-200 font-semibold">Email</div>
60
+ <p class="mt-2 text-gray-300">
61
+ <a class="text-indigo-400 hover:underline" href="mailto:info@example.com">info@example.com</a>
62
+ </p>
63
+ <p class="mt-3 text-xs text-gray-500">
64
+ Replace this address with your production inbox (e.g., research@ / partnerships@).
65
+ </p>
66
  </div>
67
+
68
+ <div class="rounded-2xl border border-gray-800 bg-gray-900/20 p-6 aura">
69
+ <div class="text-sm text-gray-200 font-semibold">Notes</div>
70
+ <ul class="mt-3 text-sm text-gray-300 space-y-2">
71
+ <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Do not send secrets or credentials.</span></li>
72
+ <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Include your intended evaluation scope and timeline.</span></li>
73
+ <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Link to relevant artifacts (papers, protocols, repos).</span></li>
74
+ </ul>
75
+ <div class="mt-5">
76
+ <button id="access-cta"
77
+ class="px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition">
78
+ Request Access
79
+ </button>
80
+ </div>
81
  </div>
82
+ </div>
83
+
84
+ <div class="mt-10 text-xs text-gray-500">
85
+ This site is a research interface. No investment advice, solicitation, or performance claims are provided.
86
+ </div>
87
+ </div>
88
+ </section>
89
+
90
+ <footer class="relative z-10 px-6 pb-10">
91
+ <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">
92
+ <div class="text-sm text-gray-500">© 2025 SILENTPATTERN. All rights reserved.</div>
93
+ <div class="text-sm text-gray-500 flex gap-6">
94
+ <a href="research.html" class="hover:text-indigo-400 transition">Research</a>
95
+ <a href="privacy.html" class="hover:text-indigo-400 transition">Privacy</a>
96
+ <a href="terms.html" class="hover:text-indigo-400 transition">Terms</a>
97
+ <a href="contact.html" class="hover:text-indigo-400 transition">Contact</a>
98
+ </div>
99
+ </div>
100
+ </footer>
101
+
102
+ <!-- ACCESS MODAL -->
103
+ <div id="access-modal"
104
+ class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
105
+ role="dialog" aria-modal="true" aria-labelledby="access-modal-title" tabindex="-1">
106
+ <div class="bg-gray-900/90 border border-gray-800 rounded-xl max-w-md w-full mx-4 relative overflow-hidden">
107
+ <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-600 to-purple-600"></div>
108
+ <div class="p-6">
109
+ <div class="flex justify-between items-start mb-6">
110
+ <div>
111
+ <h3 class="text-xl font-bold" id="access-modal-title">Request Access</h3>
112
+ <p class="text-gray-400 mt-1">Curated access for research and evaluation</p>
113
+ </div>
114
+ <button id="close-access-modal" class="text-gray-400 hover:text-white" aria-label="Close">
115
+ <i class="fas fa-times"></i>
116
+ </button>
117
  </div>
118
+
119
+ <form id="access-form" class="space-y-4">
120
+ <div>
121
+ <label for="name" class="block text-sm font-medium mb-1">Full Name</label>
122
+ <input type="text" id="name" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
123
+ </div>
124
+ <div>
125
+ <label for="email" class="block text-sm font-medium mb-1">Email</label>
126
+ <input type="email" id="email" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
127
+ </div>
128
+ <div>
129
+ <label for="institution" class="block text-sm font-medium mb-1">Institution/Organization</label>
130
+ <input type="text" id="institution" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
131
+ </div>
132
+ <div>
133
+ <label for="purpose" class="block text-sm font-medium mb-1">Purpose</label>
134
+ <select id="purpose" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
135
+ <option value="">Select a purpose</option>
136
+ <option value="research">Academic / Independent Research</option>
137
+ <option value="development">Engineering / Product Evaluation</option>
138
+ <option value="partnership">Partnership</option>
139
+ <option value="other">Other</option>
140
+ </select>
141
+ </div>
142
+ <div class="pt-2">
143
+ <button type="submit" class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 transition">
144
+ Submit Request
145
+ </button>
146
+ </div>
147
+ </form>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- LAB NAVIGATOR (same structure as other pages; keep consistent) -->
153
+ <div id="lab-navigator"
154
+ class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-md modal modal-hidden"
155
+ role="dialog" aria-modal="true" aria-label="Lab Navigator" tabindex="-1">
156
+ <div class="absolute inset-0" data-lab-close="true"></div>
157
+ <div class="relative w-full h-full flex items-center justify-center p-6">
158
+ <div class="w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
159
+ <div class="relative rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
160
+ <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800/60">
161
+ <div class="flex items-center space-x-3">
162
+ <div class="w-7 h-7 rounded-full bg-indigo-600 flex items-center justify-center">
163
+ <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div>
164
+ </div>
165
+ <div>
166
+ <div class="text-sm text-gray-300 tracking-wide">SILENTPATTERN</div>
167
+ <div class="text-xs text-gray-500">Lab Navigator</div>
168
+ </div>
169
+ </div>
170
+ <button id="lab-nav-close"
171
+ 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"
172
+ aria-label="Close Lab Navigator">
173
+ <i class="fas fa-times text-gray-300 text-sm"></i>
174
+ </button>
175
+ </div>
176
+
177
+ <div class="relative p-6 min-h-[420px]">
178
+ <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3">
179
+ <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"
180
+ data-dossier="start">
181
+ <div class="text-sm text-gray-200 font-medium">Start Here</div>
182
+ <div class="text-xs text-gray-500 mt-1">Entry interface</div>
183
+ </button>
184
+
185
+ <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"
186
+ data-dossier="programs">
187
+ <div class="text-sm text-gray-200 font-medium">Programs</div>
188
+ <div class="text-xs text-gray-500 mt-1">Program Bay dossiers</div>
189
+ </button>
190
+
191
+ <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"
192
+ data-dossier="console">
193
+ <div class="text-sm text-gray-200 font-medium">Console</div>
194
+ <div class="text-xs text-gray-500 mt-1">Controlled chat</div>
195
+ </button>
196
+
197
+ <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"
198
+ data-dossier="contact">
199
+ <div class="text-sm text-gray-200 font-medium">Contact</div>
200
+ <div class="text-xs text-gray-500 mt-1">This page</div>
201
+ </button>
202
+
203
+ <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"
204
+ data-dossier="access">
205
+ <div class="text-sm text-gray-200 font-medium">Access</div>
206
+ <div class="text-xs text-gray-500 mt-1">Curated entry</div>
207
+ </button>
208
+ </div>
209
+ <div class="relative mt-6 text-xs text-gray-500">
210
+ Tip: Press <span class="text-gray-300">Esc</span> to close.
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <div class="relative rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
216
+ <div class="px-6 py-5 border-b border-gray-800/60">
217
+ <div class="flex items-start justify-between gap-4">
218
+ <div>
219
+ <div id="dossier-title" class="text-lg font-semibold text-gray-100">Lab Dossier</div>
220
+ <div id="dossier-subtitle" class="text-xs text-gray-500 mt-1">Select a node to load details.</div>
221
+ </div>
222
+ <div id="dossier-status"
223
+ class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
224
+ READY
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <div class="p-6 space-y-5 max-h-[560px] overflow-auto thin-scroll">
230
+ <div id="dossier-body" class="text-sm text-gray-300 leading-relaxed"></div>
231
+ <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
232
+ <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evidence Capsule</div>
233
+ <ul id="dossier-evidence" class="text-sm text-gray-300 space-y-1"></ul>
234
+ </div>
235
+ <div class="flex flex-col sm:flex-row gap-3">
236
+ <button id="dossier-primary"
237
+ class="flex-1 px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition">
238
+ Open
239
+ </button>
240
+ <button id="dossier-secondary"
241
+ class="flex-1 px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition">
242
+ View Note
243
+ </button>
244
+ </div>
245
+ <div id="dossier-meta" class="text-xs text-gray-500"></div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <script src="assets/site.js"></script>
253
+ <script>
254
+ document.addEventListener('DOMContentLoaded', () => {
255
+ SilentPattern.initVanta();
256
+ SilentPattern.setupAccessModal();
257
+
258
+ const DOSSIERS = {
259
+ start: {
260
+ title: "Start Here",
261
+ subtitle: "Entry interface",
262
+ status: "ACTIVE",
263
+ body: "Return to the main interface.",
264
+ evidence: ["Public entry layer", "Programs as dossiers", "Console for controlled interaction"],
265
+ primary: { label: "Go to Index", action: () => { window.location.href = "index.html"; } },
266
+ secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } },
267
+ updated: "—"
268
+ },
269
+ programs: {
270
+ title: "Programs",
271
+ subtitle: "Program Bay dossiers",
272
+ status: "ACTIVE",
273
+ body: "Programs are exposed as dossiers: scope, assumptions, evaluation protocol, and access gates.",
274
+ evidence: ["MCAP · CHAI · Quantum Lambda", "AI Scientist", "Agentic Workforce"],
275
+ primary: { label: "Open Programs", action: () => { window.location.href = "capabilities.html"; } },
276
+ secondary: { label: "Console", action: () => { window.location.href = "chat.html"; } },
277
+ updated: "—"
278
+ },
279
+ console: {
280
+ title: "Console",
281
+ subtitle: "Controlled interaction channel",
282
+ status: "DRAFT",
283
+ body: "Controlled chat with exportable transcripts. Model access must remain server-side.",
284
+ evidence: ["No client-side secrets", "Audit-ready transcripts", "Fail-closed behaviors"],
285
+ primary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
286
+ secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
287
+ updated: "—"
288
+ },
289
+ contact: {
290
+ title: "Contact",
291
+ subtitle: "Direct channel",
292
+ status: "ACTIVE",
293
+ body: "This page. Use it for qualified requests, partnerships, and high-signal feedback.",
294
+ evidence: ["Curated inbound", "Scope alignment", "Responsible scaling"],
295
+ primary: { label: "Close Navigator", action: () => SilentPattern.toggleModal(document.getElementById('lab-navigator'), false) },
296
+ secondary: { label: "Request Access", action: () => { SilentPattern.toggleModal(document.getElementById('lab-navigator'), false); document.getElementById('access-btn').click(); } },
297
+ updated: "—"
298
+ },
299
+ access: {
300
+ title: "Access",
301
+ subtitle: "Curated entry",
302
+ status: "ACTIVE",
303
+ body: "Request access for controlled demos and evaluation workflows.",
304
+ evidence: ["Application-based", "Segmented by intent", "Controlled demos"],
305
+ primary: { label: "Request Access", action: () => { SilentPattern.toggleModal(document.getElementById('lab-navigator'), false); document.getElementById('access-btn').click(); } },
306
+ secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } },
307
+ updated: "—"
308
+ }
309
+ };
310
+
311
+ SilentPattern.setupLabNavigator(DOSSIERS, 'contact');
312
+ });
313
+ </script>
314
  </body>
315
+ </html>