Hugging Face's logo

Spaces:
matthewspring
/
anycoder-08f3fd38
Running

App Files Community
matthewspring commited on
Commit
938924d
·
verified ·
1 Parent(s): ba98a4e

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +583 -1242
index.html CHANGED
@@ -1,1251 +1,592 @@
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
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
- <meta name="description" content="Comprehensive Security Dashboard with advanced protection measures">
8
- <title>Advanced Security Dashboard</title>
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
- <style>
11
- :root {
12
- --primary: #2c3e50;
13
- --secondary: #3498db;
14
- --success: #27ae60;
15
- --warning: #f39c12;
16
- --danger: #e74c3c;
17
- --info: #16a085;
18
- --light: #ecf0f1;
19
- --dark: #2c3e50;
20
- --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
21
- --radius: 10px;
22
- --transition: all 0.3s ease;
23
- }
24
-
25
- * {
26
- margin: 0;
27
- padding: 0;
28
- box-sizing: border-box;
29
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
30
- }
31
-
32
- body {
33
- background: linear-gradient(135deg, var(--light) 0%, #f8f9fa 100%);
34
- color: var(--dark);
35
- line-height: 1.6;
36
- min-height: 100vh;
37
- display: flex;
38
- flex-direction: column;
39
- }
40
-
41
- /* Header Styles */
42
- header {
43
- background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
44
- color: white;
45
- padding: 1.5rem 2rem;
46
- box-shadow: var(--shadow);
47
- position: sticky;
48
- top: 0;
49
- z-index: 1000;
50
- }
51
-
52
- .header-content {
53
- display: flex;
54
- justify-content: space-between;
55
- align-items: center;
56
- max-width: 1400px;
57
- margin: 0 auto;
58
- width: 100%;
59
- }
60
-
61
- .logo-container {
62
- display: flex;
63
- align-items: center;
64
- gap: 1rem;
65
- }
66
-
67
- .logo {
68
- font-size: 1.8rem;
69
- font-weight: 700;
70
- display: flex;
71
- align-items: center;
72
- gap: 0.8rem;
73
- text-decoration: none;
74
- color: white;
75
- }
76
-
77
- .logo-icon {
78
- background: rgba(255, 255, 255, 0.2);
79
- padding: 0.5rem;
80
- border-radius: 50%;
81
- display: flex;
82
- align-items: center;
83
- justify-content: center;
84
- }
85
-
86
- .built-with {
87
- font-size: 0.9rem;
88
- opacity: 0.9;
89
- display: flex;
90
- align-items: center;
91
- gap: 0.5rem;
92
- }
93
-
94
- .built-with a {
95
- color: white;
96
- text-decoration: none;
97
- font-weight: 500;
98
- transition: var(--transition);
99
- }
100
-
101
- .built-with a:hover {
102
- text-decoration: underline;
103
- opacity: 0.8;
104
- }
105
-
106
- /* Navigation */
107
- nav {
108
- display: flex;
109
- gap: 1.5rem;
110
- }
111
-
112
- nav ul {
113
- display: flex;
114
- list-style: none;
115
- gap: 1rem;
116
- }
117
-
118
- nav a {
119
- color: white;
120
- text-decoration: none;
121
- padding: 0.6rem 1.2rem;
122
- border-radius: var(--radius);
123
- transition: var(--transition);
124
- font-weight: 500;
125
- position: relative;
126
- overflow: hidden;
127
- }
128
-
129
- nav a:hover {
130
- background: rgba(255, 255, 255, 0.1);
131
- transform: translateY(-2px);
132
- }
133
-
134
- nav a::after {
135
- content: '';
136
- position: absolute;
137
- bottom: 0;
138
- left: 0;
139
- width: 100%;
140
- height: 2px;
141
- background: white;
142
- transform: scaleX(0);
143
- transform-origin: right;
144
- transition: var(--transition);
145
- }
146
-
147
- nav a:hover::after {
148
- transform: scaleX(1);
149
- transform-origin: left;
150
- }
151
-
152
- /* Main Content */
153
- main {
154
- flex: 1;
155
- max-width: 1400px;
156
- margin: 2rem auto;
157
- padding: 0 1.5rem;
158
- width: 100%;
159
- }
160
-
161
- /* Dashboard Grid */
162
- .dashboard-grid {
163
- display: grid;
164
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
165
- gap: 1.5rem;
166
- margin-bottom: 2.5rem;
167
- }
168
-
169
- /* Card Styles */
170
- .card {
171
- background: white;
172
- border-radius: var(--radius);
173
- box-shadow: var(--shadow);
174
- padding: 1.8rem;
175
- transition: var(--transition);
176
- position: relative;
177
- overflow: hidden;
178
- display: flex;
179
- flex-direction: column;
180
- }
181
-
182
- .card:hover {
183
- transform: translateY(-5px);
184
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
185
- }
186
-
187
- .card::before {
188
- content: '';
189
- position: absolute;
190
- top: 0;
191
- left: 0;
192
- width: 100%;
193
- height: 4px;
194
- background: linear-gradient(90deg, var(--secondary), var(--success));
195
- }
196
-
197
- .card-icon {
198
- width: 50px;
199
- height: 50px;
200
- border-radius: 50%;
201
- display: flex;
202
- align-items: center;
203
- justify-content: center;
204
- font-size: 1.5rem;
205
- margin-bottom: 1rem;
206
- background: linear-gradient(135deg, var(--secondary), var(--success));
207
- color: white;
208
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
209
- }
210
-
211
- .card-title {
212
- font-size: 1.3rem;
213
- margin-bottom: 0.8rem;
214
- color: var(--primary);
215
- font-weight: 600;
216
- }
217
-
218
- .card-description {
219
- color: #666;
220
- margin-bottom: 1rem;
221
- flex: 1;
222
- }
223
-
224
- .card-status {
225
- display: flex;
226
- align-items: center;
227
- gap: 0.5rem;
228
- margin-top: auto;
229
- }
230
-
231
- .status-indicator {
232
- width: 12px;
233
- height: 12px;
234
- border-radius: 50%;
235
- background: var(--success);
236
- box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.2);
237
- }
238
-
239
- .status-warning .status-indicator {
240
- background: var(--warning);
241
- box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.2);
242
- }
243
-
244
- .status-danger .status-indicator {
245
- background: var(--danger);
246
- box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
247
- }
248
-
249
- .status-text {
250
- font-size: 0.9rem;
251
- font-weight: 500;
252
- }
253
-
254
- /* Security Controls Section */
255
- .security-section {
256
- background: white;
257
- border-radius: var(--radius);
258
- box-shadow: var(--shadow);
259
- padding: 2rem;
260
- margin-bottom: 2rem;
261
- }
262
-
263
- .section-header {
264
- display: flex;
265
- justify-content: space-between;
266
- align-items: center;
267
- margin-bottom: 1.5rem;
268
- padding-bottom: 1rem;
269
- border-bottom: 2px solid #eee;
270
- }
271
-
272
- .section-title {
273
- font-size: 1.5rem;
274
- color: var(--primary);
275
- font-weight: 600;
276
- }
277
-
278
- .section-actions {
279
- display: flex;
280
- gap: 0.8rem;
281
- }
282
-
283
- .btn {
284
- padding: 0.5rem 1rem;
285
- border-radius: var(--radius);
286
- text-decoration: none;
287
- font-weight: 500;
288
- transition: var(--transition);
289
- border: none;
290
- cursor: pointer;
291
- display: flex;
292
- align-items: center;
293
- gap: 0.5rem;
294
- }
295
-
296
- .btn-primary {
297
- background: var(--secondary);
298
- color: white;
299
- }
300
-
301
- .btn-primary:hover {
302
- background: #2980b9;
303
- transform: translateY(-2px);
304
- }
305
-
306
- .btn-secondary {
307
- background: var(--light);
308
- color: var(--primary);
309
- }
310
-
311
- .btn-secondary:hover {
312
- background: #d5dbdb;
313
- }
314
-
315
- /* Security Item */
316
- .security-item {
317
- margin-bottom: 1.5rem;
318
- padding: 1.2rem;
319
- border-radius: var(--radius);
320
- background: #f8f9fa;
321
- border-left: 4px solid var(--success);
322
- transition: var(--transition);
323
- }
324
-
325
- .security-item:hover {
326
- background: #e8f4fc;
327
- transform: translateX(5px);
328
- }
329
-
330
- .security-item.warning {
331
- border-left-color: var(--warning);
332
- }
333
-
334
- .security-item.warning:hover {
335
- background: #fef5e7;
336
- }
337
-
338
- .security-item.danger {
339
- border-left-color: var(--danger);
340
- }
341
-
342
- .security-item.danger:hover {
343
- background: #fdecea;
344
- }
345
-
346
- .security-header {
347
- display: flex;
348
- justify-content: space-between;
349
- align-items: center;
350
- margin-bottom: 0.8rem;
351
- }
352
-
353
- .security-title {
354
- font-weight: 600;
355
- color: var(--primary);
356
- }
357
-
358
- .security-status {
359
- display: flex;
360
- align-items: center;
361
- gap: 0.5rem;
362
- }
363
-
364
- .security-content {
365
- display: grid;
366
- grid-template-columns: 1fr auto;
367
- gap: 1rem;
368
- }
369
-
370
- .security-details {
371
- color: #666;
372
- margin-bottom: 0.5rem;
373
- }
374
-
375
- .security-actions {
376
- display: flex;
377
- flex-direction: column;
378
- gap: 0.5rem;
379
- align-items: flex-end;
380
- }
381
-
382
- .btn-sm {
383
- padding: 0.3rem 0.6rem;
384
- font-size: 0.8rem;
385
- }
386
-
387
- /* Detailed View Modal */
388
- .modal {
389
- position: fixed;
390
- top: 0;
391
- left: 0;
392
- width: 100%;
393
- height: 100%;
394
- background: rgba(0, 0, 0, 0.5);
395
- display: flex;
396
- align-items: center;
397
- justify-content: center;
398
- z-index: 2000;
399
- opacity: 0;
400
- visibility: hidden;
401
- transition: var(--transition);
402
- }
403
-
404
- .modal.active {
405
- opacity: 1;
406
- visibility: visible;
407
- }
408
-
409
- .modal-content {
410
- background: white;
411
- border-radius: var(--radius);
412
- padding: 2rem;
413
- width: 90%;
414
- max-width: 800px;
415
- max-height: 90vh;
416
- overflow-y: auto;
417
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
418
- transform: scale(0.9);
419
- transition: var(--transition);
420
- }
421
-
422
- .modal.active .modal-content {
423
- transform: scale(1);
424
- }
425
-
426
- .modal-header {
427
- display: flex;
428
- justify-content: space-between;
429
- align-items: center;
430
- margin-bottom: 1.5rem;
431
- padding-bottom: 1rem;
432
- border-bottom: 1px solid #eee;
433
- }
434
-
435
- .modal-title {
436
- font-size: 1.5rem;
437
- color: var(--primary);
438
- font-weight: 600;
439
- }
440
-
441
- .close-btn {
442
- background: none;
443
- border: none;
444
- font-size: 1.5rem;
445
- color: #999;
446
- cursor: pointer;
447
- transition: var(--transition);
448
- }
449
-
450
- .close-btn:hover {
451
- color: var(--danger);
452
- }
453
-
454
- .modal-body {
455
- margin-bottom: 1.5rem;
456
- }
457
-
458
- .detail-section {
459
- margin-bottom: 1.5rem;
460
- }
461
-
462
- .detail-title {
463
- font-weight: 600;
464
- color: var(--primary);
465
- margin-bottom: 0.5rem;
466
- }
467
-
468
- .detail-content {
469
- color: #666;
470
- line-height: 1.8;
471
- }
472
-
473
- .modal-footer {
474
- display: flex;
475
- justify-content: flex-end;
476
- gap: 1rem;
477
- }
478
-
479
- /* System Health Section */
480
- .health-section {
481
- display: grid;
482
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
483
- gap: 1.5rem;
484
- margin-bottom: 2rem;
485
- }
486
-
487
- .health-card {
488
- background: white;
489
- border-radius: var(--radius);
490
- padding: 1.5rem;
491
- text-align: center;
492
- box-shadow: var(--shadow);
493
- transition: var(--transition);
494
- }
495
-
496
- .health-card:hover {
497
- transform: translateY(-5px);
498
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
499
- }
500
-
501
- .health-value {
502
- font-size: 2rem;
503
- font-weight: 700;
504
- color: var(--primary);
505
- margin-bottom: 0.5rem;
506
- }
507
-
508
- .health-label {
509
- color: #666;
510
- font-size: 0.9rem;
511
- text-transform: uppercase;
512
- letter-spacing: 1px;
513
- }
514
-
515
- /* Footer */
516
- footer {
517
- background: var(--primary);
518
- color: white;
519
- text-align: center;
520
- padding: 2rem;
521
- margin-top: auto;
522
- }
523
-
524
- .footer-content {
525
- max-width: 1400px;
526
- margin: 0 auto;
527
- }
528
-
529
- .footer-links {
530
- display: flex;
531
- justify-content: center;
532
- gap: 1.5rem;
533
- margin-bottom: 1.5rem;
534
- }
535
-
536
- .footer-links a {
537
- color: white;
538
- text-decoration: none;
539
- padding: 0.5rem 1rem;
540
- border-radius: var(--radius);
541
- transition: var(--transition);
542
- }
543
-
544
- .footer-links a:hover {
545
- background: rgba(255, 255, 255, 0.1);
546
- }
547
-
548
- .copyright {
549
- opacity: 0.8;
550
- font-size: 0.9rem;
551
- }
552
-
553
- /* Responsive Design */
554
- @media (max-width: 1024px) {
555
- .header-content {
556
- flex-direction: column;
557
- gap: 1rem;
558
- }
559
-
560
- nav ul {
561
- flex-wrap: wrap;
562
- justify-content: center;
563
- }
564
- }
565
-
566
- @media (max-width: 768px) {
567
- .dashboard-grid {
568
- grid-template-columns: 1fr;
569
- }
570
-
571
- .health-section {
572
- grid-template-columns: 1fr 1fr;
573
- }
574
-
575
- .security-content {
576
- grid-template-columns: 1fr;
577
- }
578
-
579
- .security-actions {
580
- align-items: flex-start;
581
- }
582
- }
583
-
584
- @media (max-width: 480px) {
585
- .health-section {
586
- grid-template-columns: 1fr;
587
- }
588
-
589
- .logo {
590
- font-size: 1.4rem;
591
- }
592
-
593
- nav a {
594
- padding: 0.4rem 0.8rem;
595
- font-size: 0.9rem;
596
- }
597
- }
598
-
599
- /* Animations */
600
- @keyframes fadeIn {
601
- from { opacity: 0; transform: translateY(20px); }
602
- to { opacity: 1; transform: translateY(0); }
603
- }
604
-
605
- .fade-in {
606
- animation: fadeIn 0.5s ease-out forwards;
607
- }
608
-
609
- /* Loading Spinner */
610
- .spinner {
611
- width: 40px;
612
- height: 40px;
613
- border: 4px solid rgba(255, 255, 255, 0.3);
614
- border-radius: 50%;
615
- border-top-color: white;
616
- animation: spin 1s ease-in-out infinite;
617
- }
618
-
619
- @keyframes spin {
620
- to { transform: rotate(360deg); }
621
- }
622
- </style>
623
  </head>
624
  <body>
625
- <header>
626
- <div class="header-content">
627
- <div class="logo-container">
628
- <a href="#" class="logo">
629
- <div class="logo-icon">
630
- <i class="fas fa-shield-alt"></i>
631
- </div>
632
- <span>SecureGuard</span>
633
- </a>
634
- <div class="built-with">
635
- <i class="fas fa-code"></i>
636
- Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
637
- </div>
638
- </div>
639
- <nav>
640
- <ul>
641
- <li><a href="#dashboard">Dashboard</a></li>
642
- <li><a href="#security-controls">Security Controls</a></li>
643
- <li><a href="#system-health">System Health</a></li>
644
- <li><a href="#audit-logs">Audit Logs</a></li>
645
- <li><a href="#settings">Settings</a></li>
646
- </ul>
647
- </nav>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
648
  </div>
649
- </header>
650
-
651
- <main>
652
- <!-- Dashboard Section -->
653
- <section id="dashboard" class="fade-in">
654
- <h1 style="margin-bottom: 1.5rem; color: var(--primary);">Security Overview</h1>
655
- <div class="dashboard-grid">
656
- <!-- Network Isolation Card -->
657
- <div class="card">
658
- <div class="card-icon">
659
- <i class="fas fa-network-wired"></i>
660
- </div>
661
- <h3 class="card-title">Network Isolation</h3>
662
- <p class="card-description">Strict blockade with allowlisted ports on loopback interface only. All external connections are blocked by default.</p>
663
- <div class="card-status">
664
- <div class="status-indicator"></div>
665
- <span class="status-text">Active</span>
666
- </div>
667
- </div>
668
-
669
- <!-- Non-Root Execution Card -->
670
- <div class="card">
671
- <div class="card-icon">
672
- <i class="fas fa-user-shield"></i>
673
- </div>
674
- <h3 class="card-title">Non-Root Execution</h3>
675
- <p class="card-description">Application runs as dedicated unprivileged user (llm_agent) with minimal capabilities. No root access or privilege escalation possible.</p>
676
- <div class="card-status">
677
- <div class="status-indicator"></div>
678
- <span class="status-text">Secure</span>
679
- </div>
680
- </div>
681
-
682
- <!-- Read-Only Filesystem Card -->
683
- <div class="card">
684
- <div class="card-icon">
685
- <i class="fas fa-file-lock"></i>
686
- </div>
687
- <h3 class="card-title">Read-Only Filesystem</h3>
688
- <p class="card-description">Complete read-only root filesystem with tmpfs mounts for temporary files. Prevents any persistent modifications to system files.</p>
689
- <div class="card-status">
690
- <div class="status-indicator"></div>
691
- <span class="status-text">Protected</span>
692
- </div>
693
- </div>
694
-
695
- <!-- Seccomp Filtering Card -->
696
- <div class="card">
697
- <div class="card-icon">
698
- <i class="fas fa-filter"></i>
699
- </div>
700
- <h3 class="card-title">Seccomp Filtering</h3>
701
- <p class="card-description">System call filtering with allowlisted essential syscalls only. Currently blocking over 80% of potential system calls.</p>
702
- <div class="card-status">
703
- <div class="status-indicator"></div>
704
- <span class="status-text">Filtering Active</span>
705
- </div>
706
- </div>
707
-
708
- <!-- AppArmor Card -->
709
- <div class="card">
710
- <div class="card-icon">
711
- <i class="fas fa-lock"></i>
712
- </div>
713
- <h3 class="card-title">AppArmor Profile</h3>
714
- <p class="card-description">Mandatory access control profile enforcing strict application behavior. Custom profile updated with each application version.</p>
715
- <div class="card-status">
716
- <div class="status-indicator"></div>
717
- <span class="status-text">Enforced</span>
718
- </div>
719
- </div>
720
-
721
- <!-- Capabilities Card -->
722
- <div class="card">
723
- <div class="card-icon">
724
- <i class="fas fa-shield-virus"></i>
725
- </div>
726
- <h3 class="card-title">Capability Restrictions</h3>
727
- <p class="card-description">All unnecessary Linux capabilities dropped. Only essential capabilities retained for minimal privilege operation.</p>
728
- <div class="card-status">
729
- <div class="status-indicator"></div>
730
- <span class="status-text">Minimal</span>
731
- </div>
732
- </div>
733
- </div>
734
- </section>
735
-
736
- <!-- Security Controls Section -->
737
- <section id="security-controls" class="security-section fade-in">
738
- <div class="section-header">
739
- <h2 class="section-title">Security Controls</h2>
740
- <div class="section-actions">
741
- <button class="btn btn-secondary" id="refresh-btn">
742
- <i class="fas fa-sync-alt"></i> Refresh Status
743
- </button>
744
- <button class="btn btn-primary" id="run-audit">
745
- <i class="fas fa-search"></i> Run Audit
746
- </button>
747
- </div>
748
- </div>
749
-
750
- <!-- Network Isolation Item -->
751
- <div class="security-item">
752
- <div class="security-header">
753
- <h3 class="security-title">Network Isolation</h3>
754
- <div class="security-status">
755
- <div class="status-indicator"></div>
756
- <span>Active</span>
757
- </div>
758
- </div>
759
- <div class="security-content">
760
- <div>
761
- <p class="security-details"><strong>Current Status:</strong> Strict blockade with allowlisted single API port (8080) on loopback interface</p>
762
- <p class="security-details"><strong>Configuration:</strong> All external connections blocked, only localhost:8080 permitted</p>
763
- <p class="security-details"><strong>Last Updated:</strong> 2023-11-15 14:30:45 UTC</p>
764
- </div>
765
- <div class="security-actions">
766
- <button class="btn btn-sm btn-secondary view-details" data-target="network-isolation">
767
- <i class="fas fa-info-circle"></i> Details
768
- </button>
769
- <button class="btn btn-sm btn-primary">
770
- <i class="fas fa-cog"></i> Configure
771
- </button>
772
- </div>
773
- </div>
774
- </div>
775
-
776
- <!-- Non-Root Execution Item -->
777
- <div class="security-item">
778
- <div class="security-header">
779
- <h3 class="security-title">Non-Root Execution</h3>
780
- <div class="security-status">
781
- <div class="status-indicator"></div>
782
- <span>Secure</span>
783
- </div>
784
- </div>
785
- <div class="security-content">
786
- <div>
787
- <p class="security-details"><strong>User:</strong> llm_agent (UID: 1001)</p>
788
- <p class="security-details"><strong>Capabilities:</strong> CAP_NET_BIND_SERVICE only</p>
789
- <p class="security-details"><strong>Shell:</strong> /sbin/nologin (no shell access)</p>
790
- </div>
791
- <div class="security-actions">
792
- <button class="btn btn-sm btn-secondary view-details" data-target="non-root">
793
- <i class="fas fa-info-circle"></i> Details
794
- </button>
795
- <button class="btn btn-sm btn-primary">
796
- <i class="fas fa-user-cog"></i> Manage
797
- </button>
798
- </div>
799
- </div>
800
- </div>
801
-
802
- <!-- Read-Only Filesystem Item -->
803
- <div class="security-item">
804
- <div class="security-header">
805
- <h3 class="security-title">Read-Only Filesystem</h3>
806
- <div class="security-status">
807
- <div class="status-indicator"></div>
808
- <span>Protected</span>
809
- </div>
810
- </div>
811
- <div class="security-content">
812
- <div>
813
- <p class="security-details"><strong>Mount Options:</strong> ro,nodev,nosuid</p>
814
- <p class="security-details"><strong>Tmpfs Mounts:</strong> /tmp, /var/tmp, /run</p>
815
- <p class="security-details"><strong>Usage:</strong> 45MB / 100MB (45%)</p>
816
- </div>
817
- <div class="security-actions">
818
- <button class="btn btn-sm btn-secondary view-details" data-target="read-only">
819
- <i class="fas fa-info-circle"></i> Details
820
- </button>
821
- <button class="btn btn-sm btn-primary">
822
- <i class="fas fa-hdd"></i> Monitor
823
- </button>
824
- </div>
825
- </div>
826
- </div>
827
-
828
- <!-- Seccomp Filtering Item -->
829
- <div class="security-item">
830
- <div class="security-header">
831
- <h3 class="security-title">Seccomp Filtering</h3>
832
- <div class="security-status">
833
- <div class="status-indicator"></div>
834
- <span>Active</span>
835
- </div>
836
- </div>
837
- <div class="security-content">
838
- <div>
839
- <p class="security-details"><strong>Filter Mode:</strong> Strict (allowlist only)</p>
840
- <p class="security-details"><strong>Block Rate:</strong> 82% of system calls</p>
841
- <p class="security-details"><strong>Allowed Calls:</strong> 45 essential syscalls</p>
842
- </div>
843
- <div class="security-actions">
844
- <button class="btn btn-sm btn-secondary view-details" data-target="seccomp">
845
- <i class="fas fa-info-circle"></i> Details
846
- </button>
847
- <button class="btn btn-sm btn-primary">
848
- <i class="fas fa-edit"></i> Edit Profile
849
- </button>
850
- </div>
851
- </div>
852
- </div>
853
-
854
- <!-- AppArmor Item -->
855
- <div class="security-item">
856
- <div class="security-header">
857
- <h3 class="security-title">AppArmor Profile</h3>
858
- <div class="security-status">
859
- <div class="status-indicator"></div>
860
- <span>Enforced</span>
861
- </div>
862
- </div>
863
- <div class="security-content">
864
- <div>
865
- <p class="security-details"><strong>Profile Name:</strong> usr.bin.llm_agent</p>
866
- <p class="security-details"><strong>Mode:</strong> Enforce</p>
867
- <p class="security-details"><strong>Last Updated:</strong> 2023-11-10</p>
868
- </div>
869
- <div class="security-actions">
870
- <button class="btn btn-sm btn-secondary view-details" data-target="apparmor">
871
- <i class="fas fa-info-circle"></i> Details
872
- </button>
873
- <button class="btn btn-sm btn-primary">
874
- <i class="fas fa-file-alt"></i> View Profile
875
- </button>
876
- </div>
877
- </div>
878
- </div>
879
-
880
- <!-- Capabilities Item -->
881
- <div class="security-item">
882
- <div class="security-header">
883
- <h3 class="security-title">Capability Restrictions</h3>
884
- <div class="security-status">
885
- <div class="status-indicator"></div>
886
- <span>Minimal</span>
887
- </div>
888
- </div>
889
- <div class="security-content">
890
- <div>
891
- <p class="security-details"><strong>Retained Capabilities:</strong> CAP_NET_BIND_SERVICE</p>
892
- <p class="security-details"><strong>Dropped Capabilities:</strong> All others (37 capabilities)</p>
893
- <p class="security-details"><strong>Effective:</strong> Full capability restrictions</p>
894
- </div>
895
- <div class="security-actions">
896
- <button class="btn btn-sm btn-secondary view-details" data-target="capabilities">
897
- <i class="fas fa-info-circle"></i> Details
898
- </button>
899
- <button class="btn btn-sm btn-primary">
900
- <i class="fas fa-lock"></i> Review
901
- </button>
902
- </div>
903
- </div>
904
- </div>
905
- </section>
906
-
907
- <!-- System Health Section -->
908
- <section id="system-health" class="fade-in">
909
- <h2 style="margin-bottom: 1.5rem; color: var(--primary);">System Health</h2>
910
- <div class="health-section">
911
- <div class="health-card">
912
- <div class="health-value">98%</div>
913
- <div class="health-label">Security Score</div>
914
- </div>
915
- <div class="health-card">
916
- <div class="health-value">0</div>
917
- <div class="health-label">Active Threats</div>
918
- </div>
919
- <div class="health-card">
920
- <div class="health-value">45</div>
921
- <div class="health-label">Blocked Syscalls</div>
922
- </div>
923
- <div class="health-card">
924
- <div class="health-value">100%</div>
925
- <div class="health-label">Network Security</div>
926
- </div>
927
- </div>
928
- </section>
929
- </main>
930
-
931
- <footer>
932
- <div class="footer-content">
933
- <div class="footer-links">
934
- <a href="#privacy">Privacy Policy</a>
935
- <a href="#terms">Terms of Service</a>
936
- <a href="#contact">Contact Support</a>
937
- <a href="#docs">Documentation</a>
938
- </div>
939
- <p class="copyright">© 2023 SecureGuard. All rights reserved.</p>
940
  </div>
941
- </footer>
942
-
943
- <!-- Modal for Detailed Views -->
944
- <div class="modal" id="detail-modal">
945
- <div class="modal-content">
946
- <div class="modal-header">
947
- <h2 class="modal-title" id="modal-title">Security Control Details</h2>
948
- <button class="close-btn" id="close-modal">
949
- <i class="fas fa-times"></i>
950
- </button>
951
- </div>
952
- <div class="modal-body" id="modal-body">
953
- <!-- Content will be loaded dynamically -->
954
- </div>
955
- <div class="modal-footer">
956
- <button class="btn btn-secondary" id="modal-close">Close</button>
957
- </div>
958
  </div>
959
- </div>
960
-
961
- <script>
962
- // DOM Content Loaded
963
- document.addEventListener('DOMContentLoaded', function() {
964
- // Initialize the application
965
- initSecurityDashboard();
966
-
967
- // Set up event listeners
968
- setupEventListeners();
969
-
970
- // Run initial security checks
971
- runSecurityChecks();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
972
  });
973
-
974
- function initSecurityDashboard() {
975
- // Add fade-in animation to sections as they come into view
976
- const observer = new IntersectionObserver((entries) => {
977
- entries.forEach(entry => {
978
- if (entry.isIntersecting) {
979
- entry.target.classList.add('fade-in');
980
- }
981
- });
982
- }, { threshold: 0.1 });
983
-
984
- document.querySelectorAll('section').forEach(section => {
985
- observer.observe(section);
986
- });
987
- }
988
-
989
- function setupEventListeners() {
990
- // Navigation smooth scrolling
991
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
992
- anchor.addEventListener('click', function(e) {
993
- e.preventDefault();
994
- const target = document.querySelector(this.getAttribute('href'));
995
- if (target) {
996
- target.scrollIntoView({
997
- behavior: 'smooth',
998
- block: 'start'
999
- });
1000
- }
1001
- });
1002
- });
1003
-
1004
- // Modal functionality
1005
- const modal = document.getElementById('detail-modal');
1006
- const closeModal = document.getElementById('close-modal');
1007
- const modalClose = document.getElementById('modal-close');
1008
- const viewDetailsButtons = document.querySelectorAll('.view-details');
1009
-
1010
- // Close modal handlers
1011
- closeModal.addEventListener('click', () => {
1012
- modal.classList.remove('active');
1013
- });
1014
-
1015
- modalClose.addEventListener('click', () => {
1016
- modal.classList.remove('active');
1017
- });
1018
-
1019
- // Click outside modal to close
1020
- modal.addEventListener('click', (e) => {
1021
- if (e.target === modal) {
1022
- modal.classList.remove('active');
1023
- }
1024
- });
1025
-
1026
- // View details buttons
1027
- viewDetailsButtons.forEach(button => {
1028
- button.addEventListener('click', () => {
1029
- const target = button.getAttribute('data-target');
1030
- loadModalContent(target);
1031
- modal.classList.add('active');
1032
- });
1033
- });
1034
-
1035
- // Refresh button
1036
- document.getElementById('refresh-btn').addEventListener('click', () => {
1037
- runSecurityChecks();
1038
- showNotification('Refreshing security status...', 'info');
1039
- });
1040
-
1041
- // Run audit button
1042
- document.getElementById('run-audit').addEventListener('click', () => {
1043
- runSecurityAudit();
1044
- });
1045
-
1046
- // Card click interactions
1047
- document.querySelectorAll('.card').forEach(card => {
1048
- card.addEventListener('click', () => {
1049
- card.style.transform = 'scale(0.98)';
1050
- setTimeout(() => {
1051
- card.style.transform = '';
1052
- }, 150);
1053
- });
1054
- });
1055
- }
1056
-
1057
- function loadModalContent(target) {
1058
- const modalTitle = document.getElementById('modal-title');
1059
- const modalBody = document.getElementById('modal-body');
1060
-
1061
- // Set title based on target
1062
- const titles = {
1063
- 'network-isolation': 'Network Isolation Details',
1064
- 'non-root': 'Non-Root Execution Details',
1065
- 'read-only': 'Read-Only Filesystem Details',
1066
- 'seccomp': 'Seccomp Filtering Details',
1067
- 'apparmor': 'AppArmor Profile Details',
1068
- 'capabilities': 'Capability Restrictions Details'
1069
- };
1070
-
1071
- modalTitle.textContent = titles[target] || 'Security Control Details';
1072
-
1073
- // Generate content based on target
1074
- let content = '';
1075
-
1076
- switch(target) {
1077
- case 'network-isolation':
1078
- content = `
1079
- <div class="detail-section">
1080
- <h3 class="detail-title">Configuration Overview</h3>
1081
- <p class="detail-content">The network isolation is configured to allow only essential local communications while blocking all external network access.</p>
1082
- </div>
1083
- <div class="detail-section">
1084
- <h3 class="detail-title">Allowed Connections</h3>
1085
- <ul style="margin-left: 1.5rem;">
1086
- <li>localhost:8080 (API endpoint)</li>
1087
- <li>127.0.0.1:6379 (Redis cache)</li>
1088
- </ul>
1089
- </div>
1090
- <div class="detail-section">
1091
- <h3 class="detail-title">Blocked Traffic</h3>
1092
- <ul style="margin-left: 1.5rem;">
1093
- <li>All outgoing internet connections</li>
1094
- <li>Incoming connections from external networks</li>
1095
- <li>All non-essential ports</li>
1096
- </ul>
1097
- </div>
1098
- <div class="detail-section">
1099
- <h3 class="detail-title">Implementation</h3>
1100
- <p class="detail-content">Implemented via iptables rules with strict allowlist policy. Rules are applied at container startup and cannot be modified during runtime.</p>
1101
- </div>
1102
- `;
1103
- break;
1104
-
1105
- case 'non-root':
1106
- content = `
1107
- <div class="detail-section">
1108
- <h3 class="detail-title">User Information</h3>
1109
- <p class="detail-content"><strong>Username:</strong> llm_agent</p>
1110
- <p class="detail-content"><strong>UID:</strong> 1001</p>
1111
- <p class="detail-content"><strong>GID:</strong> 1001</p>
1112
- <p class="detail-content"><strong>Home Directory:</strong> /home/llm_agent</p>
1113
- </div>
1114
- <div class="detail-section">
1115
- <h3 class="detail-title">Security Measures</h3>
1116
- <ul style="margin-left: 1.5rem;">
1117
- <li>No shell access (/sbin/nologin)</li>
1118
- <li>No password set (disabled)</li>
1119
- <li>No sudo privileges</li>
1120
- <li>Restricted to specific directories</li>
1121
- </ul>
1122
- </div>
1123
- <div class="detail-section">
1124
- <h3 class="detail-title">Capabilities</h3>
1125
- <p class="detail-content">Only essential capability retained:</p>
1126
- <ul style="margin-left: 1.5rem;">
1127
- <li>CAP_NET_BIND_SERVICE - Allow binding to privileged ports</li>
1128
- </ul>
1129
- <p class="detail-content">All other capabilities explicitly dropped.</p>
1130
- </div>
1131
- `;
1132
- break;
1133
-
1134
- case 'read-only':
1135
- content = `
1136
- <div class="detail-section">
1137
- <h3 class="detail-title">Filesystem Configuration</h3>
1138
- <p class="detail-content">The entire root filesystem is mounted as read-only with the following options:</p>
1139
- <ul style="margin-left: 1.5rem;">
1140
- <li>ro - Read-only mount</li>
1141
- <li>nodev - No device files</li>
1142
- <li>nosuid - No setuid/setgid</li>
1143
- <li>noexec - No execution</li>
1144
- </ul>
1145
- </div>
1146
- <div class="detail-section">
1147
- <h3 class="detail-title">Writable Areas</h3>
1148
- <p class="detail-content">Temporary writable areas mounted as tmpfs:</p>
1149
- <ul style="margin-left: 1.5rem;">
1150
- <li>/tmp - 50MB</li>
1151
- <li>/var/tmp - 30MB</li>
1152
- <li>/run - 20MB</li>
1153
- <li>/var/log - 10MB</li>
1154
- </ul>
1155
- </div>
1156
- <div class="detail-section">
1157
- <h3 class="detail-title">Current Usage</h3>
1158
- <table style="width: 100%; border-collapse: collapse;">
1159
- <tr style="background: #f8f9fa;">
1160
- <th style="padding: 0.5rem; text-align: left;">Mount Point</th>
1161
- <th style="padding: 0.5rem; text-align: left;">Size</th>
1162
- <th style="padding: 0.5rem; text-align: left;">Used</th>
1163
- <th style="padding: 0.5rem; text-align: left;">Available</th>
1164
- </tr>
1165
- <tr>
1166
- <td style="padding: 0.5rem;">/tmp</td>
1167
- <td style="padding: 0.5rem;">50MB</td>
1168
- <td style="padding: 0.5rem;">12MB (24%)</td>
1169
- <td style="padding: 0.5rem;">38MB</td>
1170
- </tr>
1171
- <tr>
1172
- <td style="padding: 0.5rem;">/var/tmp</td>
1173
- <td style="padding: 0.5rem;">30MB</td>
1174
- <td style="padding: 0.5rem;">5MB (17%)</td>
1175
- <td style="padding: 0.5rem;">25MB</td>
1176
- </tr>
1177
- </table>
1178
- </div>
1179
- `;
1180
- break;
1181
-
1182
- case 'seccomp':
1183
- content = `
1184
- <div class="detail-section">
1185
- <h3 class="detail-title">Filter Profile</h3>
1186
- <p class="detail-content">Strict allowlist-based seccomp filter with the following characteristics:</p>
1187
- <ul style="margin-left: 1.5rem;">
1188
- <li>Default action: SCMP_ACT_ERRNO (block)</li>
1189
- <li>Architectures: x86_64, x86, x32</li>
1190
- <li>Syscall compatibility: 3.10+</li>
1191
- </ul>
1192
- </div>
1193
- <div class="detail-section">
1194
- <h3 class="detail-title">Allowed System Calls</h3>
1195
- <p class="detail-content">Only 45 essential system calls are allowed:</p>
1196
- <div style="background: #f8f9fa; padding: 1rem; border-radius: 5px; max-height: 200px; overflow-y: auto;">
1197
- <p style="font-family: monospace; font-size: 0.8rem;">
1198
- read, write, open, close, stat, fstat, lstat, poll,<br>
1199
- mmap, mprotect, munmap, brk, rt_sigaction, rt_sigprocmask,<br>
1200
- rt_sigreturn, ioctl, pread64, pwrite64, readv, writev,<br>
1201
- access, pipe, dup, dup2, pause, nanosleep, getpid,<br>
1202
- gettid, getuid, getgid, geteuid, getegid, exit_group,<br>
1203
- set_tid_address, set_robust_list, rseq, clock_gettime,<br>
1204
- clock_getres, getrandom, prlimit64
1205
- </p>
1206
- </div>
1207
- </div>
1208
- <div class="detail-section">
1209
- <h3 class="detail-title">Statistics</h3>
1210
- <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
1211
- <div>
1212
- <p><strong>Total Syscalls:</strong> 313</p>
1213
- <p><strong>Allowed:</strong> 45</p>
1214
- <p><strong>Blocked:</strong> 268</p>
1215
- </div>
1216
- <div>
1217
- <p><strong>Block Rate:</strong> 85.6%</p>
1218
- <p><strong>Violations:</strong> 0</p>
1219
- <p><strong>Last Update:</strong> 2023-11-15</p>
1220
- </div>
1221
- </div>
1222
- </div>
1223
- `;
1224
- break;
1225
-
1226
- case 'apparmor':
1227
- content = `
1228
- <div class="detail-section">
1229
- <h3 class="detail-title">Profile Information</h3>
1230
- <p class="detail-content"><strong>Profile Name:</strong> usr.bin.llm_agent</p>
1231
- <p class="detail-content"><strong>Mode:</strong> enforce</p>
1232
- <p class="detail-content"><strong>Attachments:</strong> /usr/bin/llm_agent</p>
1233
- <p class="detail-content"><strong>Last Modified:</strong> 2023-11-10 08:45:22</p>
1234
- </div>
1235
- <div class="detail-section">
1236
- <h3 class="detail-title">Profile Rules</h3>
1237
- <p class="detail-content">Key restrictions enforced by the profile:</p>
1238
- <ul style="margin-left: 1.5rem;">
1239
- <li>No network access except localhost</li>
1240
- <li>Read-only access to system files</li>
1241
- <li>No execution of other binaries</li>
1242
- <li>Restricted file system access</li>
1243
- <li>No ptrace or debugging</li>
1244
- <li>No capability escalation</li>
1245
- </ul>
1246
- </div>
1247
- <div class="detail-section">
1248
- <h3 class="detail-title">Recent Events</h3>
1249
- <div style="background: #f8f9fa; padding: 1rem; border-radius: 5px;">
1250
- <p>No policy violations detected in the last 30 days.</p>
1251
- <p>Last profile update: Version 1.3.2 (2
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Hardened LLM Forge</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
11
+ <style>
12
+ :root{
13
+ --bg:#050710;
14
+ --card:#0d121f;
15
+ --muted:#7d8b9f;
16
+ --accent:#7f5af0;
17
+ --accent-2:#62f4f6;
18
+ --danger:#ff5470;
19
+ --success:#2cb67d;
20
+ --border:1px solid rgba(255,255,255,.08);
21
+ --radius:22px;
22
+ --shadow:0 20px 45px rgba(0,0,0,.35);
23
+ }
24
+ *{box-sizing:border-box;}
25
+ body{
26
+ margin:0;
27
+ font-family:'Space Grotesk',system-ui,sans-serif;
28
+ background:radial-gradient(circle at 20% 20%,rgba(127,90,240,.35),transparent 50%),
29
+ radial-gradient(circle at 80% 0%,rgba(98,244,246,.25),transparent 55%),
30
+ var(--bg);
31
+ color:#f8f9fb;
32
+ min-height:100vh;
33
+ display:flex;
34
+ flex-direction:column;
35
+ }
36
+ a{text-decoration:none;color:inherit;}
37
+ header{
38
+ position:sticky;
39
+ top:0;
40
+ z-index:10;
41
+ background:rgba(5,7,16,.8);
42
+ backdrop-filter:blur(12px);
43
+ border-bottom:var(--border);
44
+ padding:1.4rem clamp(1rem,4vw,3rem);
45
+ }
46
+ .header-inner{
47
+ display:flex;
48
+ gap:1rem;
49
+ align-items:center;
50
+ justify-content:space-between;
51
+ flex-wrap:wrap;
52
+ }
53
+ .brand{
54
+ display:flex;
55
+ align-items:center;
56
+ gap:.9rem;
57
+ font-size:1.1rem;
58
+ font-weight:600;
59
+ letter-spacing:.05em;
60
+ }
61
+ .brand i{
62
+ color:var(--accent-2);
63
+ font-size:1.2rem;
64
+ }
65
+ nav{
66
+ display:flex;
67
+ gap:.6rem;
68
+ flex-wrap:wrap;
69
+ }
70
+ nav a{
71
+ padding:.55rem 1rem;
72
+ border-radius:999px;
73
+ font-size:.9rem;
74
+ color:#cad3e0;
75
+ border:var(--border);
76
+ transition:.3s;
77
+ }
78
+ nav a:hover{
79
+ color:#fff;
80
+ border-color:rgba(255,255,255,.3);
81
+ background:rgba(255,255,255,.06);
82
+ }
83
+ .anycoder-link{
84
+ color:var(--accent);
85
+ font-weight:600;
86
+ text-decoration:underline;
87
+ }
88
+ main{
89
+ padding:2rem clamp(1rem,5vw,3.8rem) 4rem;
90
+ display:flex;
91
+ flex-direction:column;
92
+ gap:2rem;
93
+ }
94
+ .hero{
95
+ background:linear-gradient(135deg,rgba(127,90,240,.2),rgba(98,244,246,.08));
96
+ border-radius:var(--radius);
97
+ padding:2.5rem clamp(1.2rem,5vw,3.5rem);
98
+ border:var(--border);
99
+ position:relative;
100
+ overflow:hidden;
101
+ }
102
+ .hero::after{
103
+ content:'';
104
+ position:absolute;
105
+ inset:0;
106
+ background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.1),transparent 40%);
107
+ pointer-events:none;
108
+ }
109
+ .hero h1{
110
+ margin:0 0 1rem;
111
+ font-size:clamp(2rem,5vw,3.2rem);
112
+ }
113
+ .hero p{
114
+ max-width:720px;
115
+ color:var(--muted);
116
+ font-size:1.05rem;
117
+ line-height:1.6;
118
+ }
119
+ .cta-group{
120
+ margin-top:1.6rem;
121
+ display:flex;
122
+ gap:1rem;
123
+ flex-wrap:wrap;
124
+ position:relative;
125
+ z-index:2;
126
+ }
127
+ .btn{
128
+ border:none;
129
+ border-radius:999px;
130
+ padding:.85rem 1.9rem;
131
+ font-weight:600;
132
+ cursor:pointer;
133
+ font-size:.95rem;
134
+ transition:.3s;
135
+ display:flex;
136
+ align-items:center;
137
+ gap:.5rem;
138
+ }
139
+ .btn-primary{
140
+ background:var(--accent);
141
+ color:#050710;
142
+ box-shadow:0 15px 30px rgba(127,90,240,.35);
143
+ }
144
+ .btn-primary:hover{transform:translateY(-2px);}
145
+ .btn-ghost{
146
+ background:transparent;
147
+ border:1px solid rgba(255,255,255,.3);
148
+ color:#f6f7fb;
149
+ }
150
+ .grid{
151
+ display:grid;
152
+ gap:1.5rem;
153
+ }
154
+ .grid.stats{
155
+ grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
156
+ }
157
+ .card{
158
+ background:var(--card);
159
+ border-radius:var(--radius);
160
+ border:var(--border);
161
+ padding:1.4rem;
162
+ position:relative;
163
+ overflow:hidden;
164
+ }
165
+ .card h3{
166
+ margin:0 0 .4rem;
167
+ font-size:1rem;
168
+ color:#dfe7ff;
169
+ letter-spacing:.04em;
170
+ text-transform:uppercase;
171
+ }
172
+ .card strong{
173
+ font-size:1.4rem;
174
+ color:#fff;
175
+ }
176
+ .tag{
177
+ display:inline-flex;
178
+ align-items:center;
179
+ gap:.35rem;
180
+ font-size:.8rem;
181
+ padding:.25rem .7rem;
182
+ border-radius:999px;
183
+ background:rgba(98,244,246,.12);
184
+ color:var(--accent-2);
185
+ text-transform:uppercase;
186
+ letter-spacing:.08em;
187
+ }
188
+ .compare{
189
+ display:grid;
190
+ grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
191
+ gap:1.5rem;
192
+ }
193
+ .profile-card{
194
+ border-radius:var(--radius);
195
+ border:1px solid rgba(255,255,255,.1);
196
+ padding:1.5rem;
197
+ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(5,7,16,.2));
198
+ display:flex;
199
+ flex-direction:column;
200
+ gap:1rem;
201
+ position:relative;
202
+ }
203
+ .profile-card.active{
204
+ border-color:var(--accent);
205
+ box-shadow:0 0 35px rgba(127,90,240,.25);
206
+ }
207
+ .profile-card ul{
208
+ margin:0;
209
+ padding:0 0 0 1.2rem;
210
+ color:var(--muted);
211
+ line-height:1.5;
212
+ }
213
+ .profile-card .badge{
214
+ align-self:flex-start;
215
+ padding:.3rem .85rem;
216
+ border-radius:10px;
217
+ background:rgba(255,255,255,.08);
218
+ font-size:.8rem;
219
+ text-transform:uppercase;
220
+ letter-spacing:.08em;
221
+ color:#fff;
222
+ }
223
+ .timeline{
224
+ border-left:2px solid rgba(255,255,255,.15);
225
+ padding-left:1.4rem;
226
+ display:flex;
227
+ flex-direction:column;
228
+ gap:1.5rem;
229
+ }
230
+ .step{
231
+ position:relative;
232
+ }
233
+ .step::before{
234
+ content:'';
235
+ width:12px;
236
+ height:12px;
237
+ border-radius:50%;
238
+ background:var(--accent);
239
+ position:absolute;
240
+ left:-1.7rem;
241
+ top:5px;
242
+ box-shadow:0 0 18px rgba(127,90,240,.6);
243
+ }
244
+ .code-grid{
245
+ display:grid;
246
+ grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
247
+ gap:1.5rem;
248
+ }
249
+ pre{
250
+ background:#03050b;
251
+ padding:1.2rem;
252
+ border-radius:16px;
253
+ color:#9ad7ff;
254
+ font-size:.85rem;
255
+ line-height:1.5;
256
+ overflow:auto;
257
+ border:1px solid rgba(255,255,255,.08);
258
+ position:relative;
259
+ }
260
+ .copy-btn{
261
+ position:absolute;
262
+ top:.6rem;
263
+ right:.6rem;
264
+ border:none;
265
+ border-radius:8px;
266
+ padding:.3rem .7rem;
267
+ background:rgba(255,255,255,.1);
268
+ color:#fff;
269
+ cursor:pointer;
270
+ font-size:.75rem;
271
+ }
272
+ .matrix{
273
+ display:grid;
274
+ grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
275
+ gap:1rem;
276
+ }
277
+ .matrix div{
278
+ border:var(--border);
279
+ border-radius:14px;
280
+ padding:1rem;
281
+ background:rgba(255,255,255,.03);
282
+ }
283
+ .status-dot{
284
+ width:10px;
285
+ height:10px;
286
+ border-radius:50%;
287
+ display:inline-block;
288
+ margin-right:.4rem;
289
+ }
290
+ .ok{background:var(--success);}
291
+ .warn{background:var(--danger);}
292
+ .toggle-panel{
293
+ display:flex;
294
+ gap:1rem;
295
+ flex-wrap:wrap;
296
+ }
297
+ .toggle{
298
+ flex:1;
299
+ min-width:180px;
300
+ border-radius:14px;
301
+ padding:1rem 1.2rem;
302
+ border:var(--border);
303
+ display:flex;
304
+ align-items:center;
305
+ justify-content:space-between;
306
+ }
307
+ .switch{
308
+ position:relative;
309
+ width:46px;
310
+ height:24px;
311
+ }
312
+ .switch input{
313
+ opacity:0;
314
+ width:0;
315
+ height:0;
316
+ }
317
+ .slider{
318
+ position:absolute;
319
+ cursor:pointer;
320
+ inset:0;
321
+ background:#333b4a;
322
+ border-radius:999px;
323
+ transition:.3s;
324
+ }
325
+ .slider:before{
326
+ content:'';
327
+ position:absolute;
328
+ height:18px;
329
+ width:18px;
330
+ left:3px;
331
+ top:3px;
332
+ background:#fff;
333
+ border-radius:50%;
334
+ transition:.3s;
335
+ }
336
+ .switch input:checked + .slider{
337
+ background:var(--accent);
338
+ }
339
+ .switch input:checked + .slider:before{
340
+ transform:translateX(22px);
341
+ }
342
+ footer{
343
+ margin-top:auto;
344
+ text-align:center;
345
+ padding:2rem 1rem 2.5rem;
346
+ color:var(--muted);
347
+ font-size:.9rem;
348
+ }
349
+ @media(max-width:720px){
350
+ .timeline{border:none;padding-left:0;}
351
+ .step::before{left:-28px;}
352
+ }
353
+ </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
354
  </head>
355
  <body>
356
+ <header>
357
+ <div class="header-inner">
358
+ <div class="brand">
359
+ <i class="fas fa-vault"></i>
360
+ Hardened LLM Forge
361
+ </div>
362
+ <a class="anycoder-link" href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener">Built with anycoder</a>
363
+ <nav>
364
+ <a href="#overview">Overview</a>
365
+ <a href="#profiles">Profiles</a>
366
+ <a href="#blueprint">Blueprint</a>
367
+ <a href="#deploy">Deploy</a>
368
+ <a href="#posture">Posture</a>
369
+ </nav>
370
+ </div>
371
+ </header>
372
+
373
+ <main>
374
+ <section class="hero" id="overview">
375
+ <h1>Hardened Alpine Images for Qwen 3 & Gemma 3</h1>
376
+ <p>Deploy modern LLMs in zero-trust Alpine containers with immutable, read-only layers, local-only execution, and the strictest kernel hardening stack available. Choose between Qwen&nbsp;3 or Gemma&nbsp;3 builds—both running entirely offline while exposing only loopback ports and maintaining a forensic-friendly footprint.</p>
377
+ <div class="cta-group">
378
+ <button class="btn btn-primary"><i class="fas fa-shield-halved"></i>Provision Hardened Image</button>
379
+ <button class="btn btn-ghost"><i class="fas fa-terminal"></i>View Offline Runbook</button>
380
+ </div>
381
+ </section>
382
+
383
+ <section class="grid stats">
384
+ <div class="card">
385
+ <h3>Base Distribution</h3>
386
+ <strong>Alpine 3.19</strong>
387
+ <p class="tag"><i class="fas fa-snowflake"></i>musl + BusyBox</p>
388
+ </div>
389
+ <div class="card">
390
+ <h3>Filesystem Mode</h3>
391
+ <strong>read-only</strong>
392
+ <p class="tag"><i class="fas fa-ban"></i>noexec / nosuid</p>
393
+ </div>
394
+ <div class="card">
395
+ <h3>Network Surface</h3>
396
+ <strong>127.0.0.1</strong>
397
+ <p class="tag"><i class="fas fa-plug"></i>loopback only</p>
398
+ </div>
399
+ <div class="card">
400
+ <h3>Capability Budget</h3>
401
+ <strong>1 retained</strong>
402
+ <p class="tag"><i class="fas fa-key"></i>CAP_NET_BIND_SERVICE</p>
403
+ </div>
404
+ </section>
405
+
406
+ <section id="profiles">
407
+ <h2 style="margin:0 0 1rem;">Model Profiles</h2>
408
+ <div class="compare">
409
+ <article class="profile-card active">
410
+ <span class="badge">Qwen 3 Hardened</span>
411
+ <h3 style="margin:.2rem 0 0;">Qwen 3 (7B/14B)</h3>
412
+ <p style="color:var(--muted)">Optimized for multilingual reasoning with quantized weights (q4_0, q8_0) stored on a read-only volume. Includes hardware entropy mirroring for deterministic offline runs.</p>
413
+ <ul>
414
+ <li>Registry image: <code>registry.local/qwen3-alpine:secure</code></li>
415
+ <li>ClamAV sweep of weights & binaries</li>
416
+ <li>Seccomp allowlist (45 syscalls)</li>
417
+ <li>Wireguard-ready for air-gapped updates</li>
418
+ </ul>
419
+ </article>
420
+ <article class="profile-card">
421
+ <span class="badge">Gemma 3 Hardened</span>
422
+ <h3 style="margin:.2rem 0 0;">Gemma 3 (9B)</h3>
423
+ <p style="color:var(--muted)">Latency-focused variant using llama.cpp runtime compiled with RELRO, stack canaries, and FORTIFY. Ships with detached attestations for every artifact.</p>
424
+ <ul>
425
+ <li>Image: <code>registry.local/gemma3-alpine:ro</code></li>
426
+ <li>Read-only overlayfs with tmpfs scratch</li>
427
+ <li>AppArmor profile <code>usr.bin.gemma</code></li>
428
+ <li>Built for CPU-only, no CUDA dependency</li>
429
+ </ul>
430
+ </article>
431
+ </div>
432
+ </section>
433
+
434
+ <section id="blueprint">
435
+ <h2 style="margin:0 0 1rem;">Immutable Stack Blueprint</h2>
436
+ <div class="timeline">
437
+ <div class="step">
438
+ <h3>1. Minimal Alpine Layer</h3>
439
+ <p>apk add --no-cache bash tini curl; remove compilers, docs, and locales; enable <code>distroless</code>-style runtime.</p>
440
  </div>
441
+ <div class="step">
442
+ <h3>2. Model Injection (Read Only)</h3>
443
+ <p>Weights unpacked to <code>/opt/models</code>, signed tarball verified with cosign, then mounted read-only through <code>overlayfs</code>.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
444
  </div>
445
+ <div class="step">
446
+ <h3>3. Hardening Envelope</h3>
447
+ <p>seccomp.json, AppArmor policy, drop capabilities, disable ptrace, use unprivileged user <code>llm_runner</code> (UID 1100).</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
448
  </div>
449
+ <div class="step">
450
+ <h3>4. Offline Runtime Contract</h3>
451
+ <p>Entrypoint via <code>tini</code>, no DNS, <code>/etc/resolv.conf</code> emptied, firewall locks container to loopback, health checks executed locally.</p>
452
+ </div>
453
+ </div>
454
+ </section>
455
+
456
+ <section id="deploy">
457
+ <h2 style="margin:0 0 1rem;">Deployment Snippets (Copy & run)</h2>
458
+ <div class="code-grid">
459
+ <div class="card" style="padding:0;">
460
+ <pre><button class="copy-btn" data-target="dock">copy</button><code id="dock">FROM alpine:3.19
461
+
462
+ RUN addgroup -S llm && adduser -S llm -G llm \
463
+ && apk add --no-cache tini ca-certificates \
464
+ && apk add --no-cache --virtual .build-deps curl tar \
465
+ && curl -sS https://registry.local/qwen3.tar.gz | tar xz -C /opt \
466
+ && apk del .build-deps \
467
+ && chown -R llm:llm /opt
468
+
469
+ USER llm
470
+ WORKDIR /opt/runtime
471
+ ENTRYPOINT ["/sbin/tini","--"]
472
+ CMD ["./launch.sh","--offline","--rofs"]</code></pre>
473
+ </div>
474
+ <div class="card" style="padding:0;">
475
+ <pre><button class="copy-btn" data-target="compose">copy</button><code id="compose">services:
476
+ qwen3-hardened:
477
+ image: registry.local/qwen3-alpine:secure
478
+ read_only: true
479
+ tmpfs:
480
+ - /tmp:rw,noexec,nosuid,size=64m
481
+ - /run:rw,noexec,nosuid,size=16m
482
+ network_mode: "none"
483
+ security_opt:
484
+ - no-new-privileges:true
485
+ - apparmor=usr.bin.qwen3
486
+ - seccomp=/policies/seccomp.json
487
+ cap_drop: ["ALL"]
488
+ cap_add: ["NET_BIND_SERVICE"]
489
+ command: ["./serve","--port","8080","--bind","127.0.0.1"]</code></pre>
490
+ </div>
491
+ <div class="card" style="padding:0;">
492
+ <pre><button class="copy-btn" data-target="runtime">copy</button><code id="runtime">docker run \
493
+ --rm \
494
+ --read-only \
495
+ --tmpfs /tmp:rw,noexec,nosuid,size=64m \
496
+ --tmpfs /var/log:rw,noexec,nosuid,size=16m \
497
+ --cap-drop ALL \
498
+ --cap-add NET_BIND_SERVICE \
499
+ --security-opt seccomp=/policies/seccomp.json \
500
+ --security-opt apparmor=usr.bin.gemma \
501
+ --network none \
502
+ -p 127.0.0.1:8080:8080 \
503
+ registry.local/gemma3-alpine:ro \
504
+ ./serve --offline --model /opt/models/gemma3.bin</code></pre>
505
+ </div>
506
+ </div>
507
+ </section>
508
+
509
+ <section id="posture">
510
+ <h2 style="margin:0 0 1rem;">Security Posture Matrix</h2>
511
+ <div class="matrix">
512
+ <div>
513
+ <span class="status-dot ok"></span><strong>Filesystem</strong>
514
+ <p>Rootfs sealed read-only, tmpfs scratchpads with size quotas & noexec.</p>
515
+ </div>
516
+ <div>
517
+ <span class="status-dot ok"></span><strong>Network</strong>
518
+ <p>Docker network none; optional unix socket for supervisor only.</p>
519
+ </div>
520
+ <div>
521
+ <span class="status-dot ok"></span><strong>Supply Chain</strong>
522
+ <p>cosign attestations, SBOM exported via syft, images pinned by digest.</p>
523
+ </div>
524
+ <div>
525
+ <span class="status-dot ok"></span><strong>Runtime</strong>
526
+ <p>Seccomp allowlist, AppArmor enforce, kernel keyring disabled.</p>
527
+ </div>
528
+ <div>
529
+ <span class="status-dot warn"></span><strong>Entropy</strong>
530
+ <p>Optional rngd sidecar if hardware RNG unavailable (offline safe).</p>
531
+ </div>
532
+ <div>
533
+ <span class="status-dot ok"></span><strong>Observability</strong>
534
+ <p>Logs to stdout/stderr only; can be piped to local filebeat agent.</p>
535
+ </div>
536
+ </div>
537
+
538
+ <h3 style="margin:2rem 0 1rem;">Offline Controls</h3>
539
+ <div class="toggle-panel">
540
+ <div class="toggle">
541
+ <div>
542
+ <strong>Internet Egress</strong>
543
+ <p style="margin:0;color:var(--muted);font-size:.85rem;">Hard-blocked via iptables</p>
544
+ </div>
545
+ <label class="switch">
546
+ <input type="checkbox" checked disabled>
547
+ <span class="slider"></span>
548
+ </label>
549
+ </div>
550
+ <div class="toggle">
551
+ <div>
552
+ <strong>Model FS Mutations</strong>
553
+ <p style="margin:0;color:var(--muted);font-size:.85rem;">Overlay set as RO</p>
554
+ </div>
555
+ <label class="switch">
556
+ <input type="checkbox" checked disabled>
557
+ <span class="slider"></span>
558
+ </label>
559
+ </div>
560
+ <div class="toggle">
561
+ <div>
562
+ <strong>Local-only Serving</strong>
563
+ <p style="margin:0;color:var(--muted);font-size:.85rem;">127.0.0.1:8080</p>
564
+ </div>
565
+ <label class="switch">
566
+ <input type="checkbox" checked disabled>
567
+ <span class="slider"></span>
568
+ </label>
569
+ </div>
570
+ </div>
571
+ </section>
572
+ </main>
573
+
574
+ <footer>
575
+ <p>© 2024 Hardened LLM Forge — fully local, zero internet trust boundary maintained.</p>
576
+ </footer>
577
+
578
+ <script>
579
+ document.querySelectorAll('.copy-btn').forEach(btn=>{
580
+ btn.addEventListener('click',()=>{
581
+ const id=btn.getAttribute('data-target');
582
+ const text=document.getElementById(id).innerText;
583
+ navigator.clipboard.writeText(text).then(()=>{
584
+ const original=btn.textContent;
585
+ btn.textContent='copied!';
586
+ setTimeout(()=>btn.textContent='copy',1800);
587
  });
588
+ });
589
+ });
590
+ </script>
591
+ </body>
592
+ </html>