Hugging Face's logo

Spaces:
caustino
/
anycoder-1b051992
Running

App Files Community
caustino commited on
Commit
61d2e20
·
verified ·
1 Parent(s): f7f12b3

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +799 -19
index.html CHANGED
@@ -1,19 +1,799 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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>PAC: Privacy, Accessibility & Modernization</title>
7
+ <!-- Importing RemixIcon for modern, accessible iconography -->
8
+ <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
9
+
10
+ <style>
11
+ /* --- CSS VARIABLES & RESET --- */
12
+ :root {
13
+ --primary: #0056b3; /* Government/Democratic Blue */
14
+ --primary-dark: #003d80;
15
+ --accent: #00d2ff; /* Cyber/Tech Blue */
16
+ --warning: #ff9800;
17
+ --danger: #dc3545;
18
+ --success: #28a745;
19
+ --bg-body: #f4f7f9;
20
+ --bg-card: #ffffff;
21
+ --text-main: #2c3e50;
22
+ --text-light: #6c757d;
23
+ --border: #e9ecef;
24
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
25
+ --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.15);
26
+ --radius: 8px;
27
+ --transition: all 0.3s ease;
28
+ }
29
+
30
+ * {
31
+ box-sizing: border-box;
32
+ margin: 0;
33
+ padding: 0;
34
+ }
35
+
36
+ body {
37
+ font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
38
+ background-color: var(--bg-body);
39
+ color: var(--text-main);
40
+ line-height: 1.6;
41
+ display: flex;
42
+ flex-direction: column;
43
+ min-height: 100vh;
44
+ }
45
+
46
+ a { text-decoration: none; color: inherit; transition: var(--transition); }
47
+ ul { list-style: none; }
48
+
49
+ /* --- HEADER & NAVIGATION --- */
50
+ header {
51
+ background: var(--bg-card);
52
+ box-shadow: var(--shadow);
53
+ position: sticky;
54
+ top: 0;
55
+ z-index: 1000;
56
+ padding: 0.75rem 1.5rem;
57
+ }
58
+
59
+ .header-container {
60
+ max-width: 1200px;
61
+ margin: 0 auto;
62
+ display: flex;
63
+ justify-content: space-between;
64
+ align-items: center;
65
+ }
66
+
67
+ .logo {
68
+ font-size: 1.5rem;
69
+ font-weight: 800;
70
+ color: var(--primary);
71
+ display: flex;
72
+ align-items: center;
73
+ gap: 0.5rem;
74
+ }
75
+
76
+ .logo i { color: var(--accent); }
77
+
78
+ nav ul {
79
+ display: flex;
80
+ gap: 1.5rem;
81
+ }
82
+
83
+ nav a {
84
+ font-weight: 500;
85
+ color: var(--text-main);
86
+ padding: 0.5rem 0.75rem;
87
+ border-radius: var(--radius);
88
+ }
89
+
90
+ nav a:hover, nav a.active {
91
+ color: var(--primary);
92
+ background-color: rgba(0, 86, 179, 0.05);
93
+ }
94
+
95
+ .built-with {
96
+ font-size: 0.85rem;
97
+ color: var(--text-light);
98
+ border: 1px solid var(--border);
99
+ padding: 0.25rem 0.75rem;
100
+ border-radius: 20px;
101
+ display: flex;
102
+ align-items: center;
103
+ gap: 0.3rem;
104
+ }
105
+
106
+ .built-with:hover {
107
+ border-color: var(--primary);
108
+ color: var(--primary);
109
+ }
110
+
111
+ /* --- MAIN CONTENT AREA --- */
112
+ main {
113
+ flex: 1;
114
+ max-width: 1200px;
115
+ width: 100%;
116
+ margin: 2rem auto;
117
+ padding: 0 1.5rem;
118
+ }
119
+
120
+ .tab-content {
121
+ display: none;
122
+ animation: fadeIn 0.5s ease;
123
+ }
124
+
125
+ .tab-content.active {
126
+ display: block;
127
+ }
128
+
129
+ @keyframes fadeIn {
130
+ from { opacity: 0; transform: translateY(10px); }
131
+ to { opacity: 1; transform: translateY(0); }
132
+ }
133
+
134
+ /* --- HERO SECTION (Home Tab) --- */
135
+ .hero {
136
+ text-align: center;
137
+ padding: 4rem 1rem;
138
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
139
+ color: white;
140
+ border-radius: var(--radius);
141
+ margin-bottom: 2rem;
142
+ position: relative;
143
+ overflow: hidden;
144
+ }
145
+
146
+ .hero::before {
147
+ content: '';
148
+ position: absolute;
149
+ top: 0; left: 0; right: 0; bottom: 0;
150
+ background: url('https://picsum.photos/seed/tech/1200/400') no-repeat center center/cover;
151
+ opacity: 0.1;
152
+ }
153
+
154
+ .hero-content {
155
+ position: relative;
156
+ z-index: 1;
157
+ }
158
+
159
+ .hero h1 {
160
+ font-size: 3rem;
161
+ margin-bottom: 1rem;
162
+ }
163
+
164
+ .hero p {
165
+ font-size: 1.25rem;
166
+ max-width: 800px;
167
+ margin: 0 auto 2rem;
168
+ opacity: 0.9;
169
+ }
170
+
171
+ .cta-button {
172
+ display: inline-block;
173
+ background: var(--accent);
174
+ color: var(--primary-dark);
175
+ padding: 0.75rem 2rem;
176
+ font-weight: 700;
177
+ border-radius: 30px;
178
+ box-shadow: 0 4px 15px rgba(0, 210, 255, 0.4);
179
+ }
180
+
181
+ .cta-button:hover {
182
+ transform: translateY(-2px);
183
+ box-shadow: 0 6px 20px rgba(0, 210, 255, 0.6);
184
+ }
185
+
186
+ /* --- PRESENTATION MODE (Slide Deck) --- */
187
+ .presentation-container {
188
+ background: var(--bg-card);
189
+ border-radius: var(--radius);
190
+ box-shadow: var(--shadow);
191
+ overflow: hidden;
192
+ min-height: 500px;
193
+ display: flex;
194
+ flex-direction: column;
195
+ }
196
+
197
+ .slides-wrapper {
198
+ flex: 1;
199
+ position: relative;
200
+ padding: 3rem;
201
+ overflow: hidden;
202
+ }
203
+
204
+ .slide {
205
+ display: none;
206
+ height: 100%;
207
+ flex-direction: column;
208
+ justify-content: center;
209
+ align-items: center;
210
+ text-align: center;
211
+ }
212
+
213
+ .slide.active { display: flex; }
214
+
215
+ .slide h2 { font-size: 2.5rem; color: var(--primary); margin-bottom: 1.5rem; }
216
+ .slide p { font-size: 1.1rem; max-width: 700px; margin-bottom: 1.5rem; }
217
+ .slide ul { text-align: left; max-width: 600px; margin-bottom: 1.5rem; }
218
+ .slide li { margin-bottom: 0.5rem; padding-left: 1rem; position: relative; }
219
+ .slide li::before { content: '•'; color: var(--accent); position: absolute; left: 0; font-weight: bold; }
220
+
221
+ .slide-controls {
222
+ background: var(--bg-body);
223
+ padding: 1rem;
224
+ display: flex;
225
+ justify-content: space-between;
226
+ align-items: center;
227
+ border-top: 1px solid var(--border);
228
+ }
229
+
230
+ .control-btn {
231
+ background: var(--bg-card);
232
+ border: 1px solid var(--border);
233
+ padding: 0.5rem 1rem;
234
+ border-radius: var(--radius);
235
+ cursor: pointer;
236
+ font-weight: 600;
237
+ color: var(--text-main);
238
+ display: flex;
239
+ align-items: center;
240
+ gap: 0.5rem;
241
+ }
242
+
243
+ .control-btn:hover { background: var(--border); }
244
+ .control-btn:disabled { opacity: 0.5; cursor: not-allowed; }
245
+
246
+ /* --- BLUEPRINTS (Grid Layout) --- */
247
+ .blueprint-grid {
248
+ display: grid;
249
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
250
+ gap: 1.5rem;
251
+ }
252
+
253
+ .blueprint-card {
254
+ background: var(--bg-card);
255
+ padding: 2rem;
256
+ border-radius: var(--radius);
257
+ box-shadow: var(--shadow);
258
+ border-top: 4px solid var(--primary);
259
+ transition: var(--transition);
260
+ }
261
+
262
+ .blueprint-card:hover {
263
+ transform: translateY(-5px);
264
+ box-shadow: var(--shadow-hover);
265
+ }
266
+
267
+ .blueprint-card h3 {
268
+ display: flex;
269
+ align-items: center;
270
+ gap: 0.75rem;
271
+ margin-bottom: 1rem;
272
+ color: var(--primary-dark);
273
+ }
274
+
275
+ .blueprint-card i { font-size: 1.5rem; color: var(--accent); }
276
+
277
+ .tag-container { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
278
+ .tag {
279
+ background: rgba(0, 86, 179, 0.1);
280
+ color: var(--primary);
281
+ padding: 0.25rem 0.75rem;
282
+ border-radius: 15px;
283
+ font-size: 0.8rem;
284
+ font-weight: 600;
285
+ }
286
+
287
+ /* --- BUSINESS PLAN (Timeline/Tables) --- */
288
+ .business-table {
289
+ width: 100%;
290
+ border-collapse: collapse;
291
+ background: var(--bg-card);
292
+ border-radius: var(--radius);
293
+ overflow: hidden;
294
+ box-shadow: var(--shadow);
295
+ margin-bottom: 2rem;
296
+ }
297
+
298
+ .business-table th, .business-table td {
299
+ padding: 1rem;
300
+ text-align: left;
301
+ border-bottom: 1px solid var(--border);
302
+ }
303
+
304
+ .business-table th {
305
+ background: var(--primary);
306
+ color: white;
307
+ font-weight: 600;
308
+ }
309
+
310
+ .business-table tr:hover { background-color: rgba(0,0,0,0.02); }
311
+
312
+ .budget-highlight {
313
+ font-weight: bold;
314
+ color: var(--success);
315
+ }
316
+
317
+ /* --- CONTACT FORM --- */
318
+ .contact-form {
319
+ max-width: 600px;
320
+ margin: 0 auto;
321
+ background: var(--bg-card);
322
+ padding: 2rem;
323
+ border-radius: var(--radius);
324
+ box-shadow: var(--shadow);
325
+ }
326
+
327
+ .form-group { margin-bottom: 1.5rem; }
328
+ .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; }
329
+
330
+ .form-control {
331
+ width: 100%;
332
+ padding: 0.75rem;
333
+ border: 1px solid var(--border);
334
+ border-radius: var(--radius);
335
+ font-family: inherit;
336
+ }
337
+
338
+ .form-control:focus {
339
+ outline: none;
340
+ border-color: var(--primary);
341
+ box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
342
+ }
343
+
344
+ button.submit-btn {
345
+ width: 100%;
346
+ background: var(--primary);
347
+ color: white;
348
+ border: none;
349
+ padding: 1rem;
350
+ border-radius: var(--radius);
351
+ font-weight: 700;
352
+ cursor: pointer;
353
+ transition: var(--transition);
354
+ }
355
+
356
+ button.submit-btn:hover { background: var(--primary-dark); }
357
+
358
+ /* --- TOAST NOTIFICATION --- */
359
+ #toast {
360
+ visibility: hidden;
361
+ min-width: 250px;
362
+ background-color: var(--text-main);
363
+ color: #fff;
364
+ text-align: center;
365
+ border-radius: var(--radius);
366
+ padding: 16px;
367
+ position: fixed;
368
+ z-index: 2000;
369
+ left: 50%;
370
+ bottom: 30px;
371
+ transform: translateX(-50%);
372
+ font-size: 1rem;
373
+ opacity: 0;
374
+ transition: opacity 0.5s, bottom 0.5s;
375
+ }
376
+
377
+ #toast.show {
378
+ visibility: visible;
379
+ opacity: 1;
380
+ bottom: 50px;
381
+ }
382
+
383
+ /* --- FOOTER --- */
384
+ footer {
385
+ background: var(--bg-card);
386
+ border-top: 1px solid var(--border);
387
+ padding: 2rem 1.5rem;
388
+ margin-top: auto;
389
+ text-align: center;
390
+ color: var(--text-light);
391
+ }
392
+
393
+ .footer-links {
394
+ display: flex;
395
+ justify-content: center;
396
+ gap: 1.5rem;
397
+ margin-bottom: 1rem;
398
+ }
399
+
400
+ /* --- RESPONSIVE --- */
401
+ @media (max-width: 768px) {
402
+ .header-container { flex-direction: column; gap: 1rem; }
403
+ nav ul { gap: 0.5rem; font-size: 0.9rem; }
404
+ .hero h1 { font-size: 2rem; }
405
+ .business-table { display: block; overflow-x: auto; }
406
+ }
407
+ </style>
408
+ </head>
409
+ <body>
410
+
411
+ <!-- Header -->
412
+ <header>
413
+ <div class="header-container">
414
+ <div class="logo">
415
+ <i class="ri-shield-check-fill"></i>
416
+ <span>PAC Platform</span>
417
+ </div>
418
+ <nav>
419
+ <ul>
420
+ <li><a href="#" class="nav-link active" data-target="home">Overview</a></li>
421
+ <li><a href="#" class="nav-link" data-target="presentation">Briefing</a></li>
422
+ <li><a href="#" class="nav-link" data-target="blueprint">Blueprints</a></li>
423
+ <li><a href="#" class="nav-link" data-target="business">Business</a></li>
424
+ <li><a href="#" class="nav-link" data-target="join">Join</a></li>
425
+ </ul>
426
+ </nav>
427
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
428
+ <i class="ri-code-s-slash-line"></i> Built with anycoder
429
+ </a>
430
+ </div>
431
+ </header>
432
+
433
+ <!-- Main Content -->
434
+ <main>
435
+
436
+ <!-- TAB 1: HOME / OVERVIEW -->
437
+ <section id="home" class="tab-content active">
438
+ <div class="hero">
439
+ <div class="hero-content">
440
+ <h1>Integrity, Access, & Future-Ready Security</h1>
441
+ <p>Advancing national reforms for disability adjudication, genetic privacy, and post-quantum government infrastructure.</p>
442
+ <a href="#" class="cta-button nav-link-trigger" data-target="presentation">View The Proposal</a>
443
+ </div>
444
+ </div>
445
+
446
+ <div class="blueprint-grid">
447
+ <article class="blueprint-card">
448
+ <h3><i class="ri-government-line"></i> Administrative Justice</h3>
449
+ <p>Modernizing federal benefit adjudication with transparent timelines, digital evidence manifests, and cognitive accessibility standards.</p>
450
+ <div class="tag-container">
451
+ <span class="tag">SSA Reform</span>
452
+ <span class="tag">Due Process</span>
453
+ </div>
454
+ </article>
455
+ <article class="blueprint-card">
456
+ <h3><i class="ri-eye-off-line"></i> Genetic Privacy (GPRS)</h3>
457
+ <p>Implementing secure, local genotype calling and PQC-aware data handling to protect ePHI and ensure compliance with GINA/HIPAA.</p>
458
+ <div class="tag-container">
459
+ <span class="tag">PQC</span>
460
+ <span class="tag">GINA</span>
461
+ <span class="tag">USB-Sensor</span>
462
+ </div>
463
+ </article>
464
+ <article class="blueprint-card">
465
+ <h3><i class="ri-lock-2-line"></i> Cybersecurity</h3>
466
+ <p>Mandating the transition to NIST-approved Post-Quantum Cryptography (Kyber/Dilithium) to neutralize "harvest now, decrypt later" threats.</p>
467
+ <div class="tag-container">
468
+ <span class="tag">NIST FIPS</span>
469
+ <span class="tag">Hybrid Keys</span>
470
+ </div>
471
+ </article>
472
+ </div>
473
+ </section>
474
+
475
+ <!-- TAB 2: PRESENTATION (Interactive Pamphlet) -->
476
+ <section id="presentation" class="tab-content">
477
+ <div class="presentation-container">
478
+ <div class="slides-wrapper">
479
+ <!-- Slide 1 -->
480
+ <div class="slide active">
481
+ <i class="ri-flag-2-fill" style="font-size: 4rem; color: var(--primary); margin-bottom: 1rem;"></i>
482
+ <h2>The Mission</h2>
483
+ <p>To advance enforceable, technology-grounded reforms in digital accessibility, disability adjudication integrity, and post-quantum security through issue advocacy and public education.</p>
484
+ </div>
485
+ <!-- Slide 2 -->
486
+ <div class="slide">
487
+ <i class="ri-alert-line" style="font-size: 4rem; color: var(--warning); margin-bottom: 1rem;"></i>
488
+ <h2>The Crisis</h2>
489
+ <ul>
490
+ <li><strong>Backlogs:</strong> 1M+ pending SSDI cases (24+ month wait times).</li>
491
+ <li><strong>Inaccessibility:</strong> Non-compliant WCAG 2.1 AA digital portals blocking disabled users.</li>
492
+ <li><strong>Quantum Threat:</strong> Legacy encryption (RSA/ECC) vulnerable to future decryption.</li>
493
+ </ul>
494
+ </div>
495
+ <!-- Slide 3 -->
496
+ <div class="slide">
497
+ <i class="ri-hammer-line" style="font-size: 4rem; color: var(--primary); margin-bottom: 1rem;"></i>
498
+ <h2>The Solution: 90-Day Sprint</h2>
499
+ <ul>
500
+ <li>Inventory critical apps & run automated/manual audits.</li>
501
+ <li>Fix top 20% of defects blocking core journeys.</li>
502
+ <li>Publish compliance dashboard & independent certification.</li>
503
+ </ul>
504
+ </div>
505
+ <!-- Slide 4 -->
506
+ <div class="slide">
507
+ <i class="ri-database-2-line" style="font-size: 4rem; color: var(--accent); margin-bottom: 1rem;"></i>
508
+ <h2>PQC Migration Roadmap</h2>
509
+ <ul>
510
+ <li><strong>Phase A:</strong> Crypto-asset inventory & threat modeling.</li>
511
+ <li><strong>Phase B:</strong> Pilot CRYSTALS-Kyber/Dilithium in non-prod.</li>
512
+ <li><strong>Phase C:</strong> Dual-stack rollout for all high-risk ePHI channels.</li>
513
+ </ul>
514
+ </div>
515
+ <!-- Slide 5 -->
516
+ <div class="slide">
517
+ <i class="ri-money-dollar-circle-line" style="font-size: 4rem; color: var(--success); margin-bottom: 1rem;"></i>
518
+ <h2>Investment & ROI</h2>
519
+ <p>Strategic $243M appropriation for remediation, training, and oversight.</p>
520
+ <div class="tag-container">
521
+ <span class="tag">$100M Accessibility</span>
522
+ <span class="tag">$68M PQC</span>
523
+ <span class="tag">$50M Training</span>
524
+ </div>
525
+ </div>
526
+ <!-- Slide 6 -->
527
+ <div class="slide">
528
+ <i class="ri-team-line" style="font-size: 4rem; color: var(--text-main); margin-bottom: 1rem;"></i>
529
+ <h2>Join the Coalition</h2>
530
+ <p>We are building a national network of technologists, legal experts, and disability advocates. Support our mission for a government that works for all abilities.</p>
531
+ <a href="#" class="cta-button nav-link-trigger" data-target="join">Sign Up Now</a>
532
+ </div>
533
+ </div>
534
+ <div class="slide-controls">
535
+ <button class="control-btn" id="prevSlide"><i class="ri-arrow-left-s-line"></i> Prev</button>
536
+ <span id="slideIndicator">1 / 6</span>
537
+ <button class="control-btn" id="nextSlide">Next <i class="ri-arrow-right-s-line"></i></button>
538
+ </div>
539
+ </div>
540
+ </section>
541
+
542
+ <!-- TAB 3: TECHNICAL BLUEPRINTS -->
543
+ <section id="blueprint" class="tab-content">
544
+ <h2 style="margin-bottom: 1.5rem; color: var(--primary);">Technical Architecture & Implementation</h2>
545
+
546
+ <div class="blueprint-grid">
547
+ <!-- Accessibility Blueprint -->
548
+ <article class="blueprint-card">
549
+ <h3><i class="ri-contrast-drop-2-line"></i> WCAG 2.1 AA Blueprint</h3>
550
+ <p>Enforcing accessibility as an engineering property, not a checklist.</p>
551
+ <ul style="margin-top: 1rem; padding-left: 1.2rem; list-style-type: disc; color: var(--text-light);">
552
+ <li>Automated PDF pipeline (OCR &rarr; Tagging)</li>
553
+ <li>CI/CD accessibility gates (Axe-core)</li>
554
+ <li>ARIA-first component library</li>
555
+ </ul>
556
+ </article>
557
+
558
+ <!-- PQC Blueprint -->
559
+ <article class="blueprint-card">
560
+ <h3><i class="ri-key-2-line"></i> PQC API Specification</h3>
561
+ <p>Deployable USB + PQC-aware API for secure genotyping sensors.</p>
562
+ <ul style="margin-top: 1rem; padding-left: 1.2rem; list-style-type: disc; color: var(--text-light);">
563
+ <li>Hybrid Key Exchange (X25519 + Kyber-768)</li>
564
+ <li>Consent Token Enforcement (CBOR-JWT)</li>
565
+ <li>Local Genotype Calling (On-MCU)</li>
566
+ </ul>
567
+ </article>
568
+
569
+ <!-- GPRS Blueprint -->
570
+ <article class="blueprint-card">
571
+ <h3><i class="ri-dna-line"></i> GPRS Integration</h3>
572
+ <p>Genetic Polygenic Risk Scoring as a lawful, privacy-preserving clinical adjunct.</p>
573
+ <ul style="margin-top: 1rem; padding-left: 1.2rem; list-style-type: disc; color: var(--text-light);">
574
+ <li>Privacy-preserving computational workflow</li>
575
+ <li>HIPAA/GINA compliant segregation</li>
576
+ <li>Probabilistic population-normalized risk indices</li>
577
+ </ul>
578
+ </article>
579
+
580
+ <!-- Oversight Blueprint -->
581
+ <article class="blueprint-card">
582
+ <h3><i class="ri-scales-3-line"></i> Special Master Model</h3>
583
+ <p>Court-grade monitoring with quarterly KPIs and transparency portals.</p>
584
+ <ul style="margin-top: 1rem; padding-left: 1.2rem; list-style-type: disc; color: var(--text-light);">
585
+ <li>Independent audits & public findings</li>
586
+ <li>Corrective-action deadlines</li>
587
+ <li>Tie funding tranches to audit outcomes</li>
588
+ </ul>
589
+ </article>
590
+ </div>
591
+ </section>
592
+
593
+ <!-- TAB 4: BUSINESS PLAN -->
594
+ <section id="business" class="tab-content">
595
+ <h2 style="margin-bottom: 1.5rem; color: var(--primary);">Strategic Business Plan</h2>
596
+
597
+ <div style="background: var(--bg-card); padding: 1.5rem; border-radius: var(--radius); margin-bottom: 2rem; box-shadow: var(--shadow);">
598
+ <h3 style="margin-bottom: 1rem;">Executive Thesis</h3>
599
+ <p>This system reduces three systemic risks simultaneously: Accessibility non-compliance exposure, Genetic data over-collection, and Cryptographic obsolescence under PQ threat. The PAC is the keystone converting policy obligations into enforced technical behavior.</p>
600
+ </div>
601
+
602
+ <h3 style="margin-bottom: 1rem;">One-Year $243M Appropriation Breakdown</h3>
603
+ <table class="business-table">
604
+ <thead>
605
+ <tr>
606
+ <th>Category</th>
607
+ <th>Initiative</th>
608
+ <th>Allocation</th>
609
+ </tr>
610
+ </thead>
611
+ <tbody>
612
+ <tr>
613
+ <td><strong>Digital Accessibility</strong></td>
614
+ <td>Audits, National Center, Automated PDF conversion</td>
615
+ <td class="budget-highlight">$100 Million</td>
616
+ </tr>
617
+ <tr>
618
+ <td><strong>PQC Implementation</strong></td>
619
+ <td>Crypto inventory, Migration, Pilot programs</td>
620
+ <td class="budget-highlight">$68 Million</td>
621
+ </tr>
622
+ <tr>
623
+ <td><strong>Staffing & Training</strong></td>
624
+ <td>Hiring specialists, Mandatory certification</td>
625
+ <td class="budget-highlight">$50 Million</td>
626
+ </tr>
627
+ <tr>
628
+ <td><strong>Enforcement & Oversight</strong></td>
629
+ <td>DOJ/OCR sweeps, Special Master, Transparency Portal</td>
630
+ <td class="budget-highlight">$25 Million</td>
631
+ </tr>
632
+ <tr>
633
+ <td><strong>Total</strong></td>
634
+ <td><strong>Comprehensive Remediation</strong></td>
635
+ <td class="budget-highlight">$243 Million</td>
636
+ </tr>
637
+ </tbody>
638
+ </table>
639
+
640
+ <div class="blueprint-grid">
641
+ <article class="blueprint-card">
642
+ <h3><i class="ri-funds-box-line"></i> Revenue Model</h3>
643
+ <p><strong>Reader Procurement:</strong> Agency/Institutional sales.<br>
644
+ <strong>Cartridge Revenue:</strong> Recurring consumables.<br>
645
+ <strong>Compliance Services:</strong> Audits and consulting.</p>
646
+ </article>
647
+ <article class="blueprint-card">
648
+ <h3><i class="ri-shield-star-line"></i> Risk Management</h3>
649
+ <p><strong>Vendor Lock:</strong> Mitigated via API wrappers.<br>
650
+ <strong>Performance:</strong> Hybrid keys reduce latency.<br>
651
+ <strong>Funding:</strong> Tranches tied to milestones.</p>
652
+ </article>
653
+ </div>
654
+ </section>
655
+
656
+ <!-- TAB 5: JOIN / CONTACT -->
657
+ <section id="join" class="tab-content">
658
+ <div class="contact-form">
659
+ <h2 style="text-align: center; margin-bottom: 1.5rem; color: var(--primary);">Join the Coalition</h2>
660
+ <p style="text-align: center; margin-bottom: 2rem; color: var(--text-light);">Support our mission for a government that works for all abilities.</p>
661
+
662
+ <form id="signupForm" onsubmit="handleSignup(event)">
663
+ <div class="form-group">
664
+ <label for="name">Full Name</label>
665
+ <input type="text" id="name" class="form-control" placeholder="Jane Doe" required>
666
+ </div>
667
+ <div class="form-group">
668
+ <label for="email">Email Address</label>
669
+ <input type="email" id="email" class="form-control" placeholder="jane@example.com" required>
670
+ </div>
671
+ <div class="form-group">
672
+ <label for="interest">Area of Interest</label>
673
+ <select id="interest" class="form-control">
674
+ <option>General Advocacy</option>
675
+ <option>Technical Expert (PQC/Accessibility)</option>
676
+ <option>Legal/Policy</option>
677
+ <option>Financial Support</option>
678
+ </select>
679
+ </div>
680
+ <button type="submit" class="submit-btn">Join the Campaign</button>
681
+ </form>
682
+ </div>
683
+ </section>
684
+
685
+ </main>
686
+
687
+ <!-- Footer -->
688
+ <footer>
689
+ <div class="footer-links">
690
+ <a href="#">Privacy Policy</a>
691
+ <a href="#">Terms of Service</a>
692
+ <a href="#">Accessibility Statement</a>
693
+ </div>
694
+ <p>&copy; 2025 Privacy Assurance & Accessibility Campaign. All rights reserved.</p>
695
+ </footer>
696
+
697
+ <!-- Toast Notification Element -->
698
+ <div id="toast">Thank you for joining the coalition!</div>
699
+
700
+ <!-- JavaScript Logic -->
701
+ <script>
702
+ // --- Navigation Logic ---
703
+ const navLinks = document.querySelectorAll('.nav-link, .nav-link-trigger');
704
+ const tabContents = document.querySelectorAll('.tab-content');
705
+
706
+ function switchTab(targetId) {
707
+ // Update Navigation
708
+ navLinks.forEach(link => {
709
+ if(link.getAttribute('data-target') === targetId) {
710
+ link.classList.add('active');
711
+ } else {
712
+ link.classList.remove('active');
713
+ }
714
+ });
715
+
716
+ // Update Content
717
+ tabContents.forEach(content => {
718
+ if(content.id === targetId) {
719
+ content.classList.add('active');
720
+ } else {
721
+ content.classList.remove('active');
722
+ }
723
+ });
724
+ }
725
+
726
+ navLinks.forEach(link => {
727
+ link.addEventListener('click', (e) => {
728
+ e.preventDefault();
729
+ const target = link.getAttribute('data-target');
730
+ switchTab(target);
731
+ });
732
+ });
733
+
734
+ // --- Presentation Slider Logic ---
735
+ let currentSlide = 0;
736
+ const slides = document.querySelectorAll('.slide');
737
+ const totalSlides = slides.length;
738
+ const prevBtn = document.getElementById('prevSlide');
739
+ const nextBtn = document.getElementById('nextSlide');
740
+ const indicator = document.getElementById('slideIndicator');
741
+
742
+ function updateSlide() {
743
+ slides.forEach((slide, index) => {
744
+ slide.classList.remove('active');
745
+ if(index === currentSlide) {
746
+ slide.classList.add('active');
747
+ }
748
+ });
749
+ indicator.textContent = `${currentSlide + 1} / ${totalSlides}`;
750
+
751
+ prevBtn.disabled = currentSlide === 0;
752
+ nextBtn.disabled = currentSlide === totalSlides - 1;
753
+ }
754
+
755
+ prevBtn.addEventListener('click', () => {
756
+ if(currentSlide > 0) {
757
+ currentSlide--;
758
+ updateSlide();
759
+ }
760
+ });
761
+
762
+ nextBtn.addEventListener('click', () => {
763
+ if(currentSlide < totalSlides - 1) {
764
+ currentSlide++;
765
+ updateSlide();
766
+ }
767
+ });
768
+
769
+ // --- Form Handling (Toast) ---
770
+ function handleSignup(e) {
771
+ e.preventDefault();
772
+ const toast = document.getElementById("toast");
773
+ const btn = e.target.querySelector('button');
774
+ const originalText = btn.innerText;
775
+
776
+ // Simulate API call
777
+ btn.innerText = "Processing...";
778
+ btn.disabled = true;
779
+
780
+ setTimeout(() => {
781
+ // Show toast
782
+ toast.className = "show";
783
+ setTimeout(() => { toast.className = toast.className.replace("show", ""); }, 3000);
784
+
785
+ // Reset form
786
+ e.target.reset();
787
+ btn.innerText = "Joined Successfully!";
788
+ btn.style.backgroundColor = "var(--success)";
789
+
790
+ setTimeout(() => {
791
+ btn.innerText = originalText;
792
+ btn.disabled = false;
793
+ btn.style.backgroundColor = "";
794
+ }, 3000);
795
+ }, 1000);
796
+ }
797
+ </script>
798
+ </body>
799
+ </html>