Hugging Face's logo

Spaces:
caustino
/
anycoder-b52eb31d
Running

App Files Community
caustino commited on
Commit
d86efd5
·
verified ·
1 Parent(s): 405376f

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +946 -19
index.html CHANGED
@@ -1,19 +1,946 @@
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>Baltimore Secure Backbone System (BSBS) - Portfolio</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --primary: #1a365d;
11
+ --primary-light: #2c5282;
12
+ --secondary: #2d3748;
13
+ --accent: #3182ce;
14
+ --accent-glow: #4299e1;
15
+ --surface: #ffffff;
16
+ --surface-alt: #f7fafc;
17
+ --border: #e2e8f0;
18
+ --text: #1a202c;
19
+ --text-muted: #718096;
20
+ --success: #38a169;
21
+ --warning: #d69e2e;
22
+ --danger: #e53e3e;
23
+ --code-bg: #1a202c;
24
+ --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
25
+ --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
26
+ --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
27
+ --radius: 8px;
28
+ --radius-lg: 12px;
29
+ }
30
+
31
+ * {
32
+ margin: 0;
33
+ padding: 0;
34
+ box-sizing: border-box;
35
+ }
36
+
37
+ body {
38
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
39
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
40
+ color: var(--text);
41
+ line-height: 1.6;
42
+ min-height: 100vh;
43
+ }
44
+
45
+ /* Header */
46
+ .header {
47
+ background: rgba(15, 23, 42, 0.95);
48
+ backdrop-filter: blur(20px);
49
+ border-bottom: 1px solid rgba(255,255,255,0.1);
50
+ position: sticky;
51
+ top: 0;
52
+ z-index: 100;
53
+ padding: 0 2rem;
54
+ }
55
+
56
+ .header-content {
57
+ max-width: 1400px;
58
+ margin: 0 auto;
59
+ display: flex;
60
+ align-items: center;
61
+ justify-content: space-between;
62
+ height: 70px;
63
+ }
64
+
65
+ .logo-section {
66
+ display: flex;
67
+ align-items: center;
68
+ gap: 1rem;
69
+ }
70
+
71
+ .logo {
72
+ width: 40px;
73
+ height: 40px;
74
+ background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
75
+ border-radius: var(--radius);
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ font-weight: 700;
80
+ color: white;
81
+ font-size: 1.2rem;
82
+ }
83
+
84
+ .brand h1 {
85
+ font-size: 1.1rem;
86
+ font-weight: 600;
87
+ color: white;
88
+ }
89
+
90
+ .brand span {
91
+ font-size: 0.75rem;
92
+ color: var(--text-muted);
93
+ display: block;
94
+ }
95
+
96
+ .header-links {
97
+ display: flex;
98
+ align-items: center;
99
+ gap: 1.5rem;
100
+ }
101
+
102
+ .anycoder-link {
103
+ color: var(--accent-glow);
104
+ text-decoration: none;
105
+ font-size: 0.85rem;
106
+ font-weight: 500;
107
+ padding: 0.5rem 1rem;
108
+ border-radius: var(--radius);
109
+ background: rgba(66, 153, 225, 0.1);
110
+ border: 1px solid rgba(66, 153, 225, 0.2);
111
+ transition: all 0.2s ease;
112
+ }
113
+
114
+ .anycoder-link:hover {
115
+ background: rgba(66, 153, 225, 0.2);
116
+ border-color: rgba(66, 153, 225, 0.4);
117
+ }
118
+
119
+ .user-info {
120
+ display: flex;
121
+ align-items: center;
122
+ gap: 0.75rem;
123
+ color: white;
124
+ font-size: 0.85rem;
125
+ }
126
+
127
+ .user-avatar {
128
+ width: 32px;
129
+ height: 32px;
130
+ border-radius: 50%;
131
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: center;
135
+ font-weight: 600;
136
+ font-size: 0.75rem;
137
+ }
138
+
139
+ /* Main Layout */
140
+ .main-container {
141
+ max-width: 1400px;
142
+ margin: 0 auto;
143
+ display: grid;
144
+ grid-template-columns: 280px 1fr;
145
+ gap: 2rem;
146
+ padding: 2rem;
147
+ }
148
+
149
+ /* Sidebar */
150
+ .sidebar {
151
+ background: rgba(255,255,255,0.03);
152
+ border: 1px solid rgba(255,255,255,0.06);
153
+ border-radius: var(--radius-lg);
154
+ padding: 1.5rem;
155
+ height: fit-content;
156
+ position: sticky;
157
+ top: 90px;
158
+ max-height: calc(100vh - 110px);
159
+ overflow-y: auto;
160
+ }
161
+
162
+ .sidebar::-webkit-scrollbar {
163
+ width: 4px;
164
+ }
165
+
166
+ .sidebar::-webkit-scrollbar-track {
167
+ background: transparent;
168
+ }
169
+
170
+ .sidebar::-webkit-scrollbar-thumb {
171
+ background: rgba(255,255,255,0.2);
172
+ border-radius: 2px;
173
+ }
174
+
175
+ .sidebar-title {
176
+ font-size: 0.7rem;
177
+ text-transform: uppercase;
178
+ letter-spacing: 0.1em;
179
+ color: var(--text-muted);
180
+ margin-bottom: 1rem;
181
+ font-weight: 600;
182
+ }
183
+
184
+ .nav-section {
185
+ margin-bottom: 1.5rem;
186
+ }
187
+
188
+ .nav-item {
189
+ display: flex;
190
+ align-items: center;
191
+ gap: 0.75rem;
192
+ padding: 0.6rem 0.75rem;
193
+ color: rgba(255,255,255,0.7);
194
+ text-decoration: none;
195
+ font-size: 0.85rem;
196
+ border-radius: var(--radius);
197
+ transition: all 0.2s ease;
198
+ cursor: pointer;
199
+ margin-bottom: 0.25rem;
200
+ }
201
+
202
+ .nav-item:hover {
203
+ background: rgba(255,255,255,0.05);
204
+ color: white;
205
+ }
206
+
207
+ .nav-item.active {
208
+ background: linear-gradient(135deg, rgba(49, 130, 206, 0.2) 0%, rgba(26, 54, 93, 0.2) 100%);
209
+ color: white;
210
+ border: 1px solid rgba(49, 130, 206, 0.3);
211
+ }
212
+
213
+ .nav-icon {
214
+ width: 18px;
215
+ height: 18px;
216
+ opacity: 0.8;
217
+ }
218
+
219
+ .nav-badge {
220
+ margin-left: auto;
221
+ background: var(--accent);
222
+ color: white;
223
+ font-size: 0.65rem;
224
+ padding: 0.15rem 0.4rem;
225
+ border-radius: 10px;
226
+ font-weight: 600;
227
+ }
228
+
229
+ /* Content Area */
230
+ .content {
231
+ background: var(--surface);
232
+ border-radius: var(--radius-lg);
233
+ box-shadow: var(--shadow-lg);
234
+ overflow: hidden;
235
+ }
236
+
237
+ .content-header {
238
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
239
+ padding: 2rem;
240
+ color: white;
241
+ }
242
+
243
+ .content-header h2 {
244
+ font-size: 1.75rem;
245
+ font-weight: 700;
246
+ margin-bottom: 0.5rem;
247
+ }
248
+
249
+ .content-header p {
250
+ opacity: 0.9;
251
+ font-size: 0.95rem;
252
+ }
253
+
254
+ .content-body {
255
+ padding: 2rem;
256
+ }
257
+
258
+ /* Section Styling */
259
+ .section {
260
+ margin-bottom: 2.5rem;
261
+ padding-bottom: 2rem;
262
+ border-bottom: 1px solid var(--border);
263
+ }
264
+
265
+ .section:last-child {
266
+ border-bottom: none;
267
+ margin-bottom: 0;
268
+ }
269
+
270
+ .section-title {
271
+ font-size: 1.25rem;
272
+ font-weight: 600;
273
+ color: var(--primary);
274
+ margin-bottom: 1rem;
275
+ display: flex;
276
+ align-items: center;
277
+ gap: 0.75rem;
278
+ }
279
+
280
+ .section-title::before {
281
+ content: '';
282
+ width: 4px;
283
+ height: 24px;
284
+ background: linear-gradient(180deg, var(--accent) 0%, var(--primary) 100%);
285
+ border-radius: 2px;
286
+ }
287
+
288
+ .section-content {
289
+ color: var(--secondary);
290
+ font-size: 0.95rem;
291
+ }
292
+
293
+ .section-content p {
294
+ margin-bottom: 1rem;
295
+ }
296
+
297
+ /* Cover Page */
298
+ .cover-page {
299
+ background: linear-gradient(135deg, var(--primary) 0%, #1a365d 100%);
300
+ color: white;
301
+ padding: 3rem;
302
+ border-radius: var(--radius-lg);
303
+ text-align: center;
304
+ margin-bottom: 2rem;
305
+ }
306
+
307
+ .cover-page h1 {
308
+ font-size: 2.5rem;
309
+ font-weight: 700;
310
+ margin-bottom: 0.5rem;
311
+ letter-spacing: -0.02em;
312
+ }
313
+
314
+ .cover-page .subtitle {
315
+ font-size: 1.25rem;
316
+ opacity: 0.9;
317
+ margin-bottom: 2rem;
318
+ }
319
+
320
+ .cover-meta {
321
+ display: grid;
322
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
323
+ gap: 1.5rem;
324
+ text-align: left;
325
+ background: rgba(255,255,255,0.1);
326
+ padding: 1.5rem;
327
+ border-radius: var(--radius);
328
+ }
329
+
330
+ .meta-item label {
331
+ display: block;
332
+ font-size: 0.75rem;
333
+ text-transform: uppercase;
334
+ letter-spacing: 0.05em;
335
+ opacity: 0.7;
336
+ margin-bottom: 0.25rem;
337
+ }
338
+
339
+ .meta-item span {
340
+ font-weight: 500;
341
+ }
342
+
343
+ /* Tables */
344
+ .data-table {
345
+ width: 100%;
346
+ border-collapse: collapse;
347
+ margin: 1rem 0;
348
+ font-size: 0.9rem;
349
+ }
350
+
351
+ .data-table th {
352
+ background: var(--surface-alt);
353
+ padding: 0.75rem 1rem;
354
+ text-align: left;
355
+ font-weight: 600;
356
+ color: var(--primary);
357
+ border-bottom: 2px solid var(--border);
358
+ }
359
+
360
+ .data-table td {
361
+ padding: 0.75rem 1rem;
362
+ border-bottom: 1px solid var(--border);
363
+ }
364
+
365
+ .data-table tr:hover td {
366
+ background: var(--surface-alt);
367
+ }
368
+
369
+ /* Cards */
370
+ .card-grid {
371
+ display: grid;
372
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
373
+ gap: 1.5rem;
374
+ margin: 1.5rem 0;
375
+ }
376
+
377
+ .card {
378
+ background: var(--surface-alt);
379
+ border: 1px solid var(--border);
380
+ border-radius: var(--radius);
381
+ padding: 1.25rem;
382
+ transition: all 0.2s ease;
383
+ }
384
+
385
+ .card:hover {
386
+ border-color: var(--accent);
387
+ box-shadow: var(--shadow-md);
388
+ }
389
+
390
+ .card h4 {
391
+ color: var(--primary);
392
+ font-size: 1rem;
393
+ margin-bottom: 0.5rem;
394
+ }
395
+
396
+ .card p {
397
+ color: var(--text-muted);
398
+ font-size: 0.85rem;
399
+ }
400
+
401
+ /* Code Blocks */
402
+ .code-block {
403
+ background: var(--code-bg);
404
+ border-radius: var(--radius);
405
+ padding: 1rem;
406
+ margin: 1rem 0;
407
+ overflow-x: auto;
408
+ }
409
+
410
+ .code-block pre {
411
+ font-family: 'JetBrains Mono', monospace;
412
+ font-size: 0.85rem;
413
+ color: #e2e8f0;
414
+ white-space: pre;
415
+ }
416
+
417
+ /* Lists */
418
+ .styled-list {
419
+ list-style: none;
420
+ padding: 0;
421
+ }
422
+
423
+ .styled-list li {
424
+ padding: 0.75rem 0;
425
+ padding-left: 1.5rem;
426
+ position: relative;
427
+ border-bottom: 1px solid var(--border);
428
+ }
429
+
430
+ .styled-list li::before {
431
+ content: '▸';
432
+ position: absolute;
433
+ left: 0;
434
+ color: var(--accent);
435
+ font-weight: bold;
436
+ }
437
+
438
+ .styled-list li:last-child {
439
+ border-bottom: none;
440
+ }
441
+
442
+ /* Abstract Box */
443
+ .abstract-box {
444
+ background: linear-gradient(135deg, rgba(49, 130, 206, 0.08) 0%, rgba(26, 54, 93, 0.08) 100%);
445
+ border-left: 4px solid var(--accent);
446
+ padding: 1.5rem;
447
+ border-radius: 0 var(--radius) var(--radius) 0;
448
+ margin: 1.5rem 0;
449
+ }
450
+
451
+ .abstract-box h4 {
452
+ color: var(--primary);
453
+ margin-bottom: 0.75rem;
454
+ }
455
+
456
+ /* TOC */
457
+ .toc {
458
+ background: var(--surface-alt);
459
+ border-radius: var(--radius);
460
+ padding: 1.5rem;
461
+ margin-bottom: 2rem;
462
+ }
463
+
464
+ .toc h3 {
465
+ font-size: 1rem;
466
+ color: var(--primary);
467
+ margin-bottom: 1rem;
468
+ }
469
+
470
+ .toc-list {
471
+ columns: 2;
472
+ column-gap: 2rem;
473
+ }
474
+
475
+ .toc-list a {
476
+ display: block;
477
+ padding: 0.4rem 0;
478
+ color: var(--secondary);
479
+ text-decoration: none;
480
+ font-size: 0.85rem;
481
+ break-inside: avoid;
482
+ }
483
+
484
+ .toc-list a:hover {
485
+ color: var(--accent);
486
+ }
487
+
488
+ /* Tags */
489
+ .tag {
490
+ display: inline-block;
491
+ padding: 0.25rem 0.75rem;
492
+ background: rgba(49, 130, 206, 0.1);
493
+ color: var(--accent);
494
+ border-radius: 20px;
495
+ font-size: 0.75rem;
496
+ font-weight: 500;
497
+ margin-right: 0.5rem;
498
+ margin-bottom: 0.5rem;
499
+ }
500
+
501
+ /* Responsive */
502
+ @media (max-width: 1024px) {
503
+ .main-container {
504
+ grid-template-columns: 1fr;
505
+ }
506
+
507
+ .sidebar {
508
+ position: static;
509
+ max-height: none;
510
+ }
511
+
512
+ .toc-list {
513
+ columns: 1;
514
+ }
515
+ }
516
+
517
+ @media (max-width: 768px) {
518
+ .header-content {
519
+ flex-direction: column;
520
+ height: auto;
521
+ padding: 1rem 0;
522
+ gap: 1rem;
523
+ }
524
+
525
+ .header-links {
526
+ flex-wrap: wrap;
527
+ justify-content: center;
528
+ }
529
+
530
+ .main-container {
531
+ padding: 1rem;
532
+ }
533
+
534
+ .content-body {
535
+ padding: 1.5rem;
536
+ }
537
+
538
+ .cover-page {
539
+ padding: 2rem 1.5rem;
540
+ }
541
+
542
+ .cover-page h1 {
543
+ font-size: 1.75rem;
544
+ }
545
+
546
+ .card-grid {
547
+ grid-template-columns: 1fr;
548
+ }
549
+ }
550
+
551
+ /* Animations */
552
+ @keyframes fadeIn {
553
+ from { opacity: 0; transform: translateY(10px); }
554
+ to { opacity: 1; transform: translateY(0); }
555
+ }
556
+
557
+ .content {
558
+ animation: fadeIn 0.4s ease-out;
559
+ }
560
+
561
+ /* Print Styles */
562
+ @media print {
563
+ body {
564
+ background: white;
565
+ }
566
+
567
+ .header, .sidebar {
568
+ display: none;
569
+ }
570
+
571
+ .main-container {
572
+ display: block;
573
+ }
574
+
575
+ .content {
576
+ box-shadow: none;
577
+ }
578
+ }
579
+
580
+ /* Highlight Box */
581
+ .highlight-box {
582
+ background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
583
+ border: 1px solid #68d391;
584
+ border-radius: var(--radius);
585
+ padding: 1.25rem;
586
+ margin: 1rem 0;
587
+ }
588
+
589
+ .highlight-box.warning {
590
+ background: linear-gradient(135deg, #fffaf0 0%, #feebc8 100%);
591
+ border-color: #f6ad55;
592
+ }
593
+
594
+ .highlight-box.danger {
595
+ background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
596
+ border-color: #fc8182;
597
+ }
598
+ </style>
599
+ </head>
600
+ <body>
601
+ <header class="header">
602
+ <div class="header-content">
603
+ <div class="logo-section">
604
+ <div class="logo">BS</div>
605
+ <div class="brand">
606
+ <h1>Baltimore Secure Backbone System</h1>
607
+ <span>Municipal Cybersecurity Governance Framework v1.2</span>
608
+ </div>
609
+ </div>
610
+ <div class="header-links">
611
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
612
+ Built with anycoder
613
+ </a>
614
+ <div class="user-info">
615
+ <div class="user-avatar">CL</div>
616
+ <span>caustin lee mclaughlin</span>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </header>
621
+
622
+ <div class="main-container">
623
+ <nav class="sidebar">
624
+ <div class="nav-section">
625
+ <div class="sidebar-title">Main Sections</div>
626
+ <a class="nav-item active" data-section="cover">
627
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
628
+ Cover Page
629
+ </a>
630
+ <a class="nav-item" data-section="abstract">
631
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
632
+ Abstract
633
+ </a>
634
+ <a class="nav-item" data-section="toc">
635
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
636
+ Table of Contents
637
+ </a>
638
+ </div>
639
+
640
+ <div class="nav-section">
641
+ <div class="sidebar-title">Governance & Legal</div>
642
+ <a class="nav-item" data-section="objectives">
643
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
644
+ Objectives & Outcomes
645
+ </a>
646
+ <a class="nav-item" data-section="governance">
647
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
648
+ Governance Architecture
649
+ </a>
650
+ <a class="nav-item" data-section="threat">
651
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
652
+ Threat Model
653
+ </a>
654
+ </div>
655
+
656
+ <div class="nav-section">
657
+ <div class="sidebar-title">Technical Architecture</div>
658
+ <a class="nav-item" data-section="technical">
659
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path></svg>
660
+ Technical Architecture
661
+ </a>
662
+ <a class="nav-item" data-section="pqc">
663
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
664
+ Post-Quantum Strategy
665
+ </a>
666
+ <a class="nav-item" data-section="apie">
667
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
668
+ APIE System
669
+ </a>
670
+ <a class="nav-item" data-section="rust">
671
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
672
+ Rust HSPA Emulator
673
+ </a>
674
+ </div>
675
+
676
+ <div class="nav-section">
677
+ <div class="sidebar-title">Operations & Compliance</div>
678
+ <a class="nav-item" data-section="incident">
679
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
680
+ Incident Response
681
+ </a>
682
+ <a class="nav-item" data-section="nist">
683
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
684
+ NIST Alignment
685
+ </a>
686
+ <a class="nav-item" data-section="roadmap">
687
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
688
+ Implementation Roadmap
689
+ </a>
690
+ </div>
691
+
692
+ <div class="nav-section">
693
+ <div class="sidebar-title">Additional Sections</div>
694
+ <a class="nav-item" data-section="budget">
695
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
696
+ Budget & Feasibility
697
+ </a>
698
+ <a class="nav-item" data-section="ethics">
699
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
700
+ Ethical Considerations
701
+ </a>
702
+ <a class="nav-item" data-section="reflection">
703
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
704
+ Portfolio Reflection
705
+ </a>
706
+ <a class="nav-item" data-section="conclusion">
707
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path></svg>
708
+ Conclusion
709
+ </a>
710
+ <a class="nav-item" data-section="references">
711
+ <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
712
+ References
713
+ </a>
714
+ </div>
715
+ </nav>
716
+
717
+ <main class="content">
718
+ <div id="content-body" class="content-body">
719
+ <!-- Content will be dynamically inserted here -->
720
+ </div>
721
+ </main>
722
+ </div>
723
+
724
+ <script>
725
+ const contentData = {
726
+ cover: `
727
+ <div class="cover-page">
728
+ <h1>Baltimore Secure Backbone System</h1>
729
+ <p class="subtitle">Policy Addendum, Technical Architecture, and Portfolio Submission Framework</p>
730
+ <div class="cover-meta">
731
+ <div class="meta-item">
732
+ <label>Student</label>
733
+ <span>caustin lee mclaughlin</span>
734
+ </div>
735
+ <div class="meta-item">
736
+ <label>Degree Program</label>
737
+ <span>Bachelors Data Science</span>
738
+ </div>
739
+ <div class="meta-item">
740
+ <label>Institution</label>
741
+ <span>UMGC</span>
742
+ </div>
743
+ <div class="meta-item">
744
+ <label>Submission Date</label>
745
+ <span>June 026</span>
746
+ </div>
747
+ </div>
748
+ </div>
749
+ `,
750
+ abstract: `
751
+ <div class="section">
752
+ <h3 class="section-title">Abstract</h3>
753
+ <div class="abstract-box">
754
+ <h4>Executive Summary</h4>
755
+ <p>The Baltimore Secure Backbone System (BSBS) is a jurisprudentially informed municipal cybersecurity governance and technical architecture framework designed to secure critical city infrastructure against both contemporary cyber threats and emerging post-quantum cryptographic risks.</p>
756
+ </div>
757
+ <p>BSBS addresses operational realities facing modern municipalities, including ransomware attacks against operational technology (OT), legacy infrastructure dependency, insider threats, and long-term cryptographic exposure through store-now-decrypt-later (SNDL) adversarial strategies.</p>
758
+
759
+ <h4 style="margin-top:1.5rem;margin-bottom:1rem;color:var(--primary);">Key Competencies Demonstrated</h4>
760
+ <div class="card-grid">
761
+ <div class="card">
762
+ <h4>Cybersecurity Governance</h4>
763
+ <p>Policy development and municipal governance hierarchy implementation</p>
764
+ </div>
765
+ <div class="card">
766
+ <h4>Secure Systems Architecture</h4>
767
+ <p>Concentric Harbor network segmentation design</p>
768
+ </div>
769
+ <div class="card">
770
+ <h4>Zero-Trust Engineering</h4>
771
+ <p>Continuous identity validation and least-privilege access</p>
772
+ </div>
773
+ <div class="card">
774
+ <h4>PQC Transition Planning</h4>
775
+ <p>Hybrid post-quantum cryptographic migration strategy</p>
776
+ </div>
777
+ <div class="card">
778
+ <h4>Risk Assessment</h4>
779
+ <p>NIST SP 800-30 derived scoring methodology</p>
780
+ </div>
781
+ <div class="card">
782
+ <h4>Legal Compliance</h4>
783
+ <p>Fourth Amendment minimization and CJIS integration</p>
784
+ </div>
785
+ <div class="card">
786
+ <h4>OT/ICS Security</h4>
787
+ <p>Air-gapped enclave strategies for critical infrastructure</p>
788
+ </div>
789
+ <div class="card">
790
+ <h4>Secure Software Engineering</h4>
791
+ <p>Rust-based memory-safe HSPA emulator</p>
792
+ </div>
793
+ <div class="card">
794
+ <h4>AI Security</h4>
795
+ <p>APIE anomaly detection with federated learning</p>
796
+ </div>
797
+ </div>
798
+ </div>
799
+ `,
800
+ toc: `
801
+ <div class="section">
802
+ <h3 class="section-title">Table of Contents</h3>
803
+ <div class="toc">
804
+ <div class="toc-list">
805
+ <a href="#objectives">1. Executive Summary</a>
806
+ <a href="#objectives">2. Project Objectives and Learning Outcomes</a>
807
+ <a href="#governance">3. Governance and Legal Architecture</a>
808
+ <a href="#threat">4. Threat Model and Risk Framework</a>
809
+ <a href="#technical">5. Technical Architecture</a>
810
+ <a href="#pqc">6. Post-Quantum Cryptographic Strategy</a>
811
+ <a href="#apie">7. Core Block / APIE Threat Inference System</a>
812
+ <a href="#rust">8. Pure Rust HSPA Emulator</a>
813
+ <a href="#incident">9. Incident Response and Resilience Planning</a>
814
+ <a href="#nist">10. NIST and Regulatory Alignment</a>
815
+ <a href="#roadmap">11. Implementation Roadmap</a>
816
+ <a href="#budget">12. Budgetary and Operational Feasibility</a>
817
+ <a href="#ethics">13. Ethical and Constitutional Considerations</a>
818
+ <a href="#reflection">14. Portfolio Reflection and Technical Competencies</a>
819
+ <a href="#conclusion">15. Conclusion</a>
820
+ <a href="#references">16. References</a>
821
+ <a href="#references">17. Appendices</a>
822
+ </div>
823
+ </div>
824
+ </div>
825
+ `,
826
+ objectives: `
827
+ <div class="section">
828
+ <h3 class="section-title">1. Executive Summary & 2. Project Objectives</h3>
829
+
830
+ <h4>Strategic Goals</h4>
831
+ <p>BSBS was designed around five strategic objectives:</p>
832
+ <ul class="styled-list">
833
+ <li>Reduce municipal cyberattack surface area through segmentation and zero-trust architecture</li>
834
+ <li>Prepare municipal infrastructure for post-quantum cryptographic transition</li>
835
+ <li>Preserve constitutional and civil-liberty protections during cybersecurity operations</li>
836
+ <li>Protect legacy operational systems through memory-safe gateway architectures</li>
837
+ <li>Improve municipal cyber resilience and incident response maturity</li>
838
+ </ul>
839
+
840
+ <h4 style="margin-top:1.5rem;">Learning Outcomes Demonstrated</h4>
841
+ <table class="data-table">
842
+ <thead>
843
+ <tr>
844
+ <th>Learning Outcome</th>
845
+ <th>Demonstrated Through</th>
846
+ </tr>
847
+ </thead>
848
+ <tbody>
849
+ <tr>
850
+ <td>Risk Management</td>
851
+ <td>NIST SP 800-30 derived scoring framework</td>
852
+ </tr>
853
+ <tr>
854
+ <td>Secure Systems Design</td>
855
+ <td>Concentric Harbor network architecture</td>
856
+ </tr>
857
+ <tr>
858
+ <td>Cryptography</td>
859
+ <td>Hybrid post-quantum implementation strategy</td>
860
+ </tr>
861
+ <tr>
862
+ <td>Legal/Ethical Analysis</td>
863
+ <td>Fourth Amendment minimization protocol</td>
864
+ </tr>
865
+ <tr>
866
+ <td>Secure Software Development</td>
867
+ <td>Rust HSPA emulator design</td>
868
+ </tr>
869
+ <tr>
870
+ <td>Governance & Policy</td>
871
+ <td>Municipal governance hierarchy</td>
872
+ </tr>
873
+ <tr>
874
+ <td>AI/ML Security</td>
875
+ <td>APIE anomaly detection system</td>
876
+ </tr>
877
+ <tr>
878
+ <td>Incident Response</td>
879
+ <td>BMIRP framework</td>
880
+ </tr>
881
+ <tr>
882
+ <td>Regulatory Compliance</td>
883
+ <td>CJIS/HIPAA/NIST mappings</td>
884
+ </tr>
885
+ <tr>
886
+ <td>Critical Infrastructure Security</td>
887
+ <td>OT/ICS segmentation strategy</td>
888
+ </tr>
889
+ </tbody>
890
+ </table>
891
+
892
+ <h4 style="margin-top:1.5rem;">Research Questions</h4>
893
+ <ol style="padding-left:1.5rem;margin-top:1rem;">
894
+ <li style="margin-bottom:0.5rem;">How can municipalities adopt post-quantum cryptography without disrupting legacy infrastructure?</li>
895
+ <li style="margin-bottom:0.5rem;">How should constitutional protections influence cybersecurity monitoring architectures?</li>
896
+ <li style="margin-bottom:0.5rem;">Can AI-assisted anomaly detection operate effectively while preserving privacy minimization principles?</li>
897
+ <li style="margin-bottom:0.5rem;">What role should memory-safe programming languages play in critical infrastructure modernization?</li>
898
+ <li>How can mid-sized cities balance fiscal constraints against advanced cybersecurity requirements?</li>
899
+ </ol>
900
+ </div>
901
+ `,
902
+ governance: `
903
+ <div class="section">
904
+ <h3 class="section-title">3. Governance and Legal Architecture</h3>
905
+
906
+ <h4>Governance Structure</h4>
907
+ <table class="data-table">
908
+ <thead>
909
+ <tr>
910
+ <th>Layer</th>
911
+ <th>Entity</th>
912
+ <th>Function</th>
913
+ </tr>
914
+ </thead>
915
+ <tbody>
916
+ <tr>
917
+ <td><strong>Strategic</strong></td>
918
+ <td>Mayor's Office of Cybersecurity (MOC)</td>
919
+ <td>Policy authorization, budgeting, intergovernmental coordination</td>
920
+ </tr>
921
+ <tr>
922
+ <td><strong>Tactical</strong></td>
923
+ <td>BSBS Security Operations Center (BSOC)</td>
924
+ <td>24/7 monitoring, incident response, threat intelligence</td>
925
+ </tr>
926
+ <tr>
927
+ <td><strong>Operational</strong></td>
928
+ <td>Departmental Information Security Officers (DISOs)</td>
929
+ <td>Access governance, departmental controls</td>
930
+ </tr>
931
+ <tr>
932
+ <td><strong>Audit</strong></td>
933
+ <td>Inspector General + External Assessors</td>
934
+ <td>Independent control validation and constitutional review</td>
935
+ </tr>
936
+ </tbody>
937
+ </table>
938
+
939
+ <h4 style="margin-top:1.5rem;">Constitutional Compliance Framework</h4>
940
+ <div class="card-grid">
941
+ <div class="card">
942
+ <h4>Fourth Amendment</h4>
943
+ <p>Minimization framework with metadata-first analysis, differential privacy aggregation, warrant-trigger escalation pathways, and immutable audit records.</p>
944
+ </div>
945
+ <div class="card">
946
+ <