Hugging Face's logo

Spaces:
matthewspring
/
anycoder-50949dd7
Running

App Files Community
matthewspring commited on
Commit
709d489
·
verified ·
1 Parent(s): 6c5be41

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1143 -19
index.html CHANGED
@@ -1,19 +1,1143 @@
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
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
8
+ <meta name="description" content="Hardened Gemma 3 LLM Container Security Dashboard">
9
+ <title>Gemma 3 Hardened Container Dashboard</title>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ :root {
13
+ --primary: #1a1a2e;
14
+ --secondary: #16213e;
15
+ --accent: #0f3460;
16
+ --highlight: #e94560;
17
+ --success: #00d9a0;
18
+ --warning: #ffc107;
19
+ --danger: #dc3545;
20
+ --info: #17a2b8;
21
+ --light: #f8f9fa;
22
+ --dark: #0a0a0f;
23
+ --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
24
+ --radius: 12px;
25
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
26
+ }
27
+
28
+ * {
29
+ margin: 0;
30
+ padding: 0;
31
+ box-sizing: border-box;
32
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
33
+ }
34
+
35
+ body {
36
+ background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 50%, var(--secondary) 100%);
37
+ color: var(--light);
38
+ line-height: 1.6;
39
+ min-height: 100vh;
40
+ display: flex;
41
+ flex-direction: column;
42
+ }
43
+
44
+ /* Header Styles */
45
+ header {
46
+ background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
47
+ backdrop-filter: blur(10px);
48
+ color: white;
49
+ padding: 1rem 2rem;
50
+ box-shadow: var(--shadow);
51
+ position: sticky;
52
+ top: 0;
53
+ z-index: 1000;
54
+ border-bottom: 1px solid rgba(233, 69, 96, 0.3);
55
+ }
56
+
57
+ .header-content {
58
+ display: flex;
59
+ justify-content: space-between;
60
+ align-items: center;
61
+ max-width: 1600px;
62
+ margin: 0 auto;
63
+ width: 100%;
64
+ }
65
+
66
+ .logo-container {
67
+ display: flex;
68
+ align-items: center;
69
+ gap: 1rem;
70
+ }
71
+
72
+ .logo {
73
+ font-size: 1.6rem;
74
+ font-weight: 700;
75
+ display: flex;
76
+ align-items: center;
77
+ gap: 0.8rem;
78
+ text-decoration: none;
79
+ color: white;
80
+ }
81
+
82
+ .logo-icon {
83
+ background: linear-gradient(135deg, var(--highlight), #ff6b6b);
84
+ padding: 0.6rem;
85
+ border-radius: 50%;
86
+ display: flex;
87
+ align-items: center;
88
+ justify-content: center;
89
+ box-shadow: 0 0 20px rgba(233, 69, 96, 0.4);
90
+ }
91
+
92
+ .model-badge {
93
+ background: linear-gradient(135deg, var(--accent), var(--secondary));
94
+ padding: 0.3rem 0.8rem;
95
+ border-radius: 20px;
96
+ font-size: 0.75rem;
97
+ font-weight: 600;
98
+ border: 1px solid rgba(233, 69, 96, 0.5);
99
+ color: var(--highlight);
100
+ }
101
+
102
+ .built-with {
103
+ font-size: 0.85rem;
104
+ opacity: 0.9;
105
+ display: flex;
106
+ align-items: center;
107
+ gap: 0.5rem;
108
+ }
109
+
110
+ .built-with a {
111
+ color: var(--highlight);
112
+ text-decoration: none;
113
+ font-weight: 500;
114
+ transition: var(--transition);
115
+ }
116
+
117
+ .built-with a:hover {
118
+ text-decoration: underline;
119
+ text-shadow: 0 0 10px rgba(233, 69, 96, 0.5);
120
+ }
121
+
122
+ /* Navigation */
123
+ nav {
124
+ display: flex;
125
+ gap: 1.5rem;
126
+ }
127
+
128
+ nav ul {
129
+ display: flex;
130
+ list-style: none;
131
+ gap: 0.5rem;
132
+ }
133
+
134
+ nav a {
135
+ color: white;
136
+ text-decoration: none;
137
+ padding: 0.5rem 1rem;
138
+ border-radius: var(--radius);
139
+ transition: var(--transition);
140
+ font-weight: 500;
141
+ font-size: 0.9rem;
142
+ position: relative;
143
+ overflow: hidden;
144
+ }
145
+
146
+ nav a:hover {
147
+ background: rgba(233, 69, 96, 0.2);
148
+ transform: translateY(-2px);
149
+ }
150
+
151
+ nav a::after {
152
+ content: '';
153
+ position: absolute;
154
+ bottom: 0;
155
+ left: 0;
156
+ width: 100%;
157
+ height: 2px;
158
+ background: var(--highlight);
159
+ transform: scaleX(0);
160
+ transform-origin: right;
161
+ transition: var(--transition);
162
+ }
163
+
164
+ nav a:hover::after {
165
+ transform: scaleX(1);
166
+ transform-origin: left;
167
+ }
168
+
169
+ /* Main Content */
170
+ main {
171
+ flex: 1;
172
+ max-width: 1600px;
173
+ margin: 2rem auto;
174
+ padding: 0 1.5rem;
175
+ width: 100%;
176
+ }
177
+
178
+ /* Section Title */
179
+ .section-title-main {
180
+ font-size: 1.8rem;
181
+ margin-bottom: 1.5rem;
182
+ color: var(--light);
183
+ display: flex;
184
+ align-items: center;
185
+ gap: 0.8rem;
186
+ }
187
+
188
+ .section-title-main i {
189
+ color: var(--highlight);
190
+ }
191
+
192
+ /* Dashboard Grid */
193
+ .dashboard-grid {
194
+ display: grid;
195
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
196
+ gap: 1.5rem;
197
+ margin-bottom: 2.5rem;
198
+ }
199
+
200
+ /* Card Styles */
201
+ .card {
202
+ background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);
203
+ backdrop-filter: blur(10px);
204
+ border-radius: var(--radius);
205
+ box-shadow: var(--shadow);
206
+ padding: 1.5rem;
207
+ transition: var(--transition);
208
+ position: relative;
209
+ overflow: hidden;
210
+ display: flex;
211
+ flex-direction: column;
212
+ border: 1px solid rgba(255, 255, 255, 0.1);
213
+ }
214
+
215
+ .card:hover {
216
+ transform: translateY(-5px);
217
+ box-shadow: 0 8px 30px rgba(233, 69, 96, 0.2);
218
+ border-color: rgba(233, 69, 96, 0.3);
219
+ }
220
+
221
+ .card::before {
222
+ content: '';
223
+ position: absolute;
224
+ top: 0;
225
+ left: 0;
226
+ width: 100%;
227
+ height: 3px;
228
+ background: linear-gradient(90deg, var(--highlight), var(--success));
229
+ }
230
+
231
+ .card-icon {
232
+ width: 48px;
233
+ height: 48px;
234
+ border-radius: 50%;
235
+ display: flex;
236
+ align-items: center;
237
+ justify-content: center;
238
+ font-size: 1.3rem;
239
+ margin-bottom: 1rem;
240
+ background: linear-gradient(135deg, var(--highlight), #ff6b6b);
241
+ color: white;
242
+ box-shadow: 0 4px 15px rgba(233, 69, 96, 0.3);
243
+ }
244
+
245
+ .card-title {
246
+ font-size: 1.15rem;
247
+ margin-bottom: 0.6rem;
248
+ color: var(--light);
249
+ font-weight: 600;
250
+ }
251
+
252
+ .card-description {
253
+ color: rgba(255, 255, 255, 0.7);
254
+ margin-bottom: 1rem;
255
+ flex: 1;
256
+ font-size: 0.9rem;
257
+ }
258
+
259
+ .card-status {
260
+ display: flex;
261
+ align-items: center;
262
+ gap: 0.5rem;
263
+ margin-top: auto;
264
+ }
265
+
266
+ .status-indicator {
267
+ width: 10px;
268
+ height: 10px;
269
+ border-radius: 50%;
270
+ background: var(--success);
271
+ box-shadow: 0 0 10px rgba(0, 217, 160, 0.5);
272
+ animation: pulse 2s infinite;
273
+ }
274
+
275
+ @keyframes pulse {
276
+ 0%, 100% { opacity: 1; }
277
+ 50% { opacity: 0.6; }
278
+ }
279
+
280
+ .status-warning .status-indicator {
281
+ background: var(--warning);
282
+ box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
283
+ }
284
+
285
+ .status-danger .status-indicator {
286
+ background: var(--danger);
287
+ box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
288
+ }
289
+
290
+ .status-text {
291
+ font-size: 0.85rem;
292
+ font-weight: 500;
293
+ }
294
+
295
+ /* Security Controls Section */
296
+ .security-section {
297
+ background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
298
+ backdrop-filter: blur(10px);
299
+ border-radius: var(--radius);
300
+ box-shadow: var(--shadow);
301
+ padding: 1.5rem;
302
+ margin-bottom: 2rem;
303
+ border: 1px solid rgba(255, 255, 255, 0.1);
304
+ }
305
+
306
+ .section-header {
307
+ display: flex;
308
+ justify-content: space-between;
309
+ align-items: center;
310
+ margin-bottom: 1.5rem;
311
+ padding-bottom: 1rem;
312
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
313
+ flex-wrap: wrap;
314
+ gap: 1rem;
315
+ }
316
+
317
+ .section-title {
318
+ font-size: 1.3rem;
319
+ color: var(--light);
320
+ font-weight: 600;
321
+ display: flex;
322
+ align-items: center;
323
+ gap: 0.5rem;
324
+ }
325
+
326
+ .section-title i {
327
+ color: var(--highlight);
328
+ }
329
+
330
+ .section-actions {
331
+ display: flex;
332
+ gap: 0.8rem;
333
+ flex-wrap: wrap;
334
+ }
335
+
336
+ .btn {
337
+ padding: 0.5rem 1rem;
338
+ border-radius: 8px;
339
+ text-decoration: none;
340
+ font-weight: 500;
341
+ transition: var(--transition);
342
+ border: none;
343
+ cursor: pointer;
344
+ display: flex;
345
+ align-items: center;
346
+ gap: 0.5rem;
347
+ font-size: 0.85rem;
348
+ }
349
+
350
+ .btn-primary {
351
+ background: linear-gradient(135deg, var(--highlight), #ff6b6b);
352
+ color: white;
353
+ }
354
+
355
+ .btn-primary:hover {
356
+ transform: translateY(-2px);
357
+ box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
358
+ }
359
+
360
+ .btn-secondary {
361
+ background: rgba(255, 255, 255, 0.1);
362
+ color: var(--light);
363
+ border: 1px solid rgba(255, 255, 255, 0.2);
364
+ }
365
+
366
+ .btn-secondary:hover {
367
+ background: rgba(255, 255, 255, 0.2);
368
+ }
369
+
370
+ /* Security Item */
371
+ .security-item {
372
+ margin-bottom: 1rem;
373
+ padding: 1.2rem;
374
+ border-radius: var(--radius);
375
+ background: rgba(255, 255, 255, 0.05);
376
+ border-left: 4px solid var(--success);
377
+ transition: var(--transition);
378
+ }
379
+
380
+ .security-item:hover {
381
+ background: rgba(255, 255, 255, 0.08);
382
+ transform: translateX(5px);
383
+ }
384
+
385
+ .security-item.warning {
386
+ border-left-color: var(--warning);
387
+ }
388
+
389
+ .security-item.danger {
390
+ border-left-color: var(--danger);
391
+ }
392
+
393
+ .security-header {
394
+ display: flex;
395
+ justify-content: space-between;
396
+ align-items: center;
397
+ margin-bottom: 0.8rem;
398
+ flex-wrap: wrap;
399
+ gap: 0.5rem;
400
+ }
401
+
402
+ .security-title {
403
+ font-weight: 600;
404
+ color: var(--light);
405
+ display: flex;
406
+ align-items: center;
407
+ gap: 0.5rem;
408
+ }
409
+
410
+ .security-title i {
411
+ color: var(--highlight);
412
+ font-size: 0.9rem;
413
+ }
414
+
415
+ .security-status {
416
+ display: flex;
417
+ align-items: center;
418
+ gap: 0.5rem;
419
+ font-size: 0.85rem;
420
+ }
421
+
422
+ .security-content {
423
+ display: grid;
424
+ grid-template-columns: 1fr auto;
425
+ gap: 1rem;
426
+ }
427
+
428
+ .security-details {
429
+ color: rgba(255, 255, 255, 0.7);
430
+ margin-bottom: 0.4rem;
431
+ font-size: 0.85rem;
432
+ }
433
+
434
+ .security-details strong {
435
+ color: var(--light);
436
+ }
437
+
438
+ .security-actions {
439
+ display: flex;
440
+ flex-direction: column;
441
+ gap: 0.5rem;
442
+ align-items: flex-end;
443
+ }
444
+
445
+ .btn-sm {
446
+ padding: 0.3rem 0.6rem;
447
+ font-size: 0.75rem;
448
+ }
449
+
450
+ /* Code Block */
451
+ .code-block {
452
+ background: rgba(0, 0, 0, 0.4);
453
+ border-radius: 8px;
454
+ padding: 1rem;
455
+ font-family: 'Courier New', monospace;
456
+ font-size: 0.8rem;
457
+ overflow-x: auto;
458
+ border: 1px solid rgba(255, 255, 255, 0.1);
459
+ margin: 0.5rem 0;
460
+ white-space: pre-wrap;
461
+ word-break: break-all;
462
+ }
463
+
464
+ .code-block .comment {
465
+ color: #6a9955;
466
+ }
467
+
468
+ .code-block .keyword {
469
+ color: var(--highlight);
470
+ }
471
+
472
+ .code-block .string {
473
+ color: #ce9178;
474
+ }
475
+
476
+ .code-block .flag {
477
+ color: #4ec9b0;
478
+ }
479
+
480
+ /* System Health Section */
481
+ .health-section {
482
+ display: grid;
483
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
484
+ gap: 1rem;
485
+ margin-bottom: 2rem;
486
+ }
487
+
488
+ .health-card {
489
+ background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);
490
+ border-radius: var(--radius);
491
+ padding: 1.2rem;
492
+ text-align: center;
493
+ box-shadow: var(--shadow);
494
+ transition: var(--transition);
495
+ border: 1px solid rgba(255, 255, 255, 0.1);
496
+ }
497
+
498
+ .health-card:hover {
499
+ transform: translateY(-3px);
500
+ border-color: rgba(233, 69, 96, 0.3);
501
+ }
502
+
503
+ .health-value {
504
+ font-size: 1.8rem;
505
+ font-weight: 700;
506
+ color: var(--success);
507
+ margin-bottom: 0.3rem;
508
+ }
509
+
510
+ .health-value.warning {
511
+ color: var(--warning);
512
+ }
513
+
514
+ .health-value.danger {
515
+ color: var(--danger);
516
+ }
517
+
518
+ .health-label {
519
+ color: rgba(255, 255, 255, 0.7);
520
+ font-size: 0.8rem;
521
+ text-transform: uppercase;
522
+ letter-spacing: 1px;
523
+ }
524
+
525
+ /* Script Section */
526
+ .script-section {
527
+ background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
528
+ border-radius: var(--radius);
529
+ padding: 1.5rem;
530
+ margin-bottom: 2rem;
531
+ border: 1px solid rgba(255, 255, 255, 0.1);
532
+ }
533
+
534
+ .script-header {
535
+ display: flex;
536
+ justify-content: space-between;
537
+ align-items: center;
538
+ margin-bottom: 1rem;
539
+ flex-wrap: wrap;
540
+ gap: 1rem;
541
+ }
542
+
543
+ .script-title {
544
+ font-size: 1.2rem;
545
+ color: var(--light);
546
+ display: flex;
547
+ align-items: center;
548
+ gap: 0.5rem;
549
+ }
550
+
551
+ .script-title i {
552
+ color: var(--highlight);
553
+ }
554
+
555
+ .script-container {
556
+ background: rgba(0, 0, 0, 0.5);
557
+ border-radius: 8px;
558
+ overflow: hidden;
559
+ border: 1px solid rgba(255, 255, 255, 0.1);
560
+ }
561
+
562
+ .script-tabs {
563
+ display: flex;
564
+ background: rgba(0, 0, 0, 0.3);
565
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
566
+ }
567
+
568
+ .script-tab {
569
+ padding: 0.8rem 1.2rem;
570
+ background: none;
571
+ border: none;
572
+ color: rgba(255, 255, 255, 0.7);
573
+ cursor: pointer;
574
+ transition: var(--transition);
575
+ font-size: 0.85rem;
576
+ border-bottom: 2px solid transparent;
577
+ }
578
+
579
+ .script-tab:hover {
580
+ color: var(--light);
581
+ background: rgba(255, 255, 255, 0.05);
582
+ }
583
+
584
+ .script-tab.active {
585
+ color: var(--highlight);
586
+ border-bottom-color: var(--highlight);
587
+ background: rgba(233, 69, 96, 0.1);
588
+ }
589
+
590
+ .script-content {
591
+ padding: 1rem;
592
+ max-height: 500px;
593
+ overflow-y: auto;
594
+ }
595
+
596
+ .script-content pre {
597
+ margin: 0;
598
+ font-family: 'Courier New', monospace;
599
+ font-size: 0.75rem;
600
+ line-height: 1.5;
601
+ color: #d4d4d4;
602
+ }
603
+
604
+ /* Alert Box */
605
+ .alert {
606
+ padding: 1rem 1.2rem;
607
+ border-radius: 8px;
608
+ margin-bottom: 1rem;
609
+ display: flex;
610
+ align-items: flex-start;
611
+ gap: 0.8rem;
612
+ }
613
+
614
+ .alert-warning {
615
+ background: rgba(255, 193, 7, 0.15);
616
+ border: 1px solid rgba(255, 193, 7, 0.3);
617
+ color: var(--warning);
618
+ }
619
+
620
+ .alert-success {
621
+ background: rgba(0, 217, 160, 0.15);
622
+ border: 1px solid rgba(0, 217, 160, 0.3);
623
+ color: var(--success);
624
+ }
625
+
626
+ .alert-danger {
627
+ background: rgba(220, 53, 69, 0.15);
628
+ border: 1px solid rgba(220, 53, 69, 0.3);
629
+ color: var(--danger);
630
+ }
631
+
632
+ .alert-info {
633
+ background: rgba(23, 162, 184, 0.15);
634
+ border: 1px solid rgba(23, 162, 184, 0.3);
635
+ color: var(--info);
636
+ }
637
+
638
+ .alert i {
639
+ font-size: 1.2rem;
640
+ margin-top: 0.1rem;
641
+ }
642
+
643
+ .alert-content {
644
+ flex: 1;
645
+ }
646
+
647
+ .alert-title {
648
+ font-weight: 600;
649
+ margin-bottom: 0.3rem;
650
+ }
651
+
652
+ .alert-text {
653
+ font-size: 0.85rem;
654
+ opacity: 0.9;
655
+ }
656
+
657
+ /* Modal */
658
+ .modal {
659
+ position: fixed;
660
+ top: 0;
661
+ left: 0;
662
+ width: 100%;
663
+ height: 100%;
664
+ background: rgba(0, 0, 0, 0.8);
665
+ display: flex;
666
+ align-items: center;
667
+ justify-content: center;
668
+ z-index: 2000;
669
+ opacity: 0;
670
+ visibility: hidden;
671
+ transition: var(--transition);
672
+ backdrop-filter: blur(5px);
673
+ }
674
+
675
+ .modal.active {
676
+ opacity: 1;
677
+ visibility: visible;
678
+ }
679
+
680
+ .modal-content {
681
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
682
+ border-radius: var(--radius);
683
+ padding: 1.5rem;
684
+ width: 90%;
685
+ max-width: 900px;
686
+ max-height: 90vh;
687
+ overflow-y: auto;
688
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
689
+ transform: scale(0.9);
690
+ transition: var(--transition);
691
+ border: 1px solid rgba(255, 255, 255, 0.1);
692
+ }
693
+
694
+ .modal.active .modal-content {
695
+ transform: scale(1);
696
+ }
697
+
698
+ .modal-header {
699
+ display: flex;
700
+ justify-content: space-between;
701
+ align-items: center;
702
+ margin-bottom: 1.5rem;
703
+ padding-bottom: 1rem;
704
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
705
+ }
706
+
707
+ .modal-title {
708
+ font-size: 1.3rem;
709
+ color: var(--light);
710
+ font-weight: 600;
711
+ }
712
+
713
+ .close-btn {
714
+ background: none;
715
+ border: none;
716
+ font-size: 1.3rem;
717
+ color: rgba(255, 255, 255, 0.7);
718
+ cursor: pointer;
719
+ transition: var(--transition);
720
+ padding: 0.3rem;
721
+ }
722
+
723
+ .close-btn:hover {
724
+ color: var(--danger);
725
+ }
726
+
727
+ .modal-body {
728
+ margin-bottom: 1.5rem;
729
+ }
730
+
731
+ .detail-section {
732
+ margin-bottom: 1.5rem;
733
+ }
734
+
735
+ .detail-title {
736
+ font-weight: 600;
737
+ color: var(--highlight);
738
+ margin-bottom: 0.5rem;
739
+ font-size: 1rem;
740
+ }
741
+
742
+ .detail-content {
743
+ color: rgba(255, 255, 255, 0.8);
744
+ line-height: 1.7;
745
+ font-size: 0.9rem;
746
+ }
747
+
748
+ .detail-content ul {
749
+ margin-left: 1.5rem;
750
+ margin-top: 0.5rem;
751
+ }
752
+
753
+ .detail-content li {
754
+ margin-bottom: 0.3rem;
755
+ }
756
+
757
+ .modal-footer {
758
+ display: flex;
759
+ justify-content: flex-end;
760
+ gap: 1rem;
761
+ }
762
+
763
+ /* Footer */
764
+ footer {
765
+ background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);
766
+ color: white;
767
+ text-align: center;
768
+ padding: 1.5rem;
769
+ margin-top: auto;
770
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
771
+ }
772
+
773
+ .footer-content {
774
+ max-width: 1600px;
775
+ margin: 0 auto;
776
+ }
777
+
778
+ .footer-links {
779
+ display: flex;
780
+ justify-content: center;
781
+ gap: 1.5rem;
782
+ margin-bottom: 1rem;
783
+ flex-wrap: wrap;
784
+ }
785
+
786
+ .footer-links a {
787
+ color: rgba(255, 255, 255, 0.7);
788
+ text-decoration: none;
789
+ padding: 0.4rem 0.8rem;
790
+ border-radius: 6px;
791
+ transition: var(--transition);
792
+ font-size: 0.85rem;
793
+ }
794
+
795
+ .footer-links a:hover {
796
+ color: var(--highlight);
797
+ background: rgba(255, 255, 255, 0.05);
798
+ }
799
+
800
+ .copyright {
801
+ opacity: 0.6;
802
+ font-size: 0.8rem;
803
+ }
804
+
805
+ /* Responsive Design */
806
+ @media (max-width: 1024px) {
807
+ .header-content {
808
+ flex-direction: column;
809
+ gap: 1rem;
810
+ }
811
+
812
+ nav ul {
813
+ flex-wrap: wrap;
814
+ justify-content: center;
815
+ }
816
+
817
+ .security-content {
818
+ grid-template-columns: 1fr;
819
+ }
820
+
821
+ .security-actions {
822
+ align-items: flex-start;
823
+ flex-direction: row;
824
+ }
825
+ }
826
+
827
+ @media (max-width: 768px) {
828
+ .dashboard-grid {
829
+ grid-template-columns: 1fr;
830
+ }
831
+
832
+ .health-section {
833
+ grid-template-columns: 1fr 1fr;
834
+ }
835
+
836
+ header {
837
+ padding: 1rem;
838
+ }
839
+
840
+ main {
841
+ padding: 0 1rem;
842
+ }
843
+
844
+ .script-content pre {
845
+ font-size: 0.65rem;
846
+ }
847
+ }
848
+
849
+ @media (max-width: 480px) {
850
+ .health-section {
851
+ grid-template-columns: 1fr;
852
+ }
853
+
854
+ .logo {
855
+ font-size: 1.3rem;
856
+ }
857
+
858
+ nav a {
859
+ padding: 0.4rem 0.6rem;
860
+ font-size: 0.8rem;
861
+ }
862
+
863
+ .section-title-main {
864
+ font-size: 1.4rem;
865
+ }
866
+ }
867
+
868
+ /* Animations */
869
+ @keyframes fadeIn {
870
+ from {
871
+ opacity: 0;
872
+ transform: translateY(20px);
873
+ }
874
+ to {
875
+ opacity: 1;
876
+ transform: translateY(0);
877
+ }
878
+ }
879
+
880
+ .fade-in {
881
+ animation: fadeIn 0.5s ease-out forwards;
882
+ }
883
+
884
+ /* Scrollbar */
885
+ ::-webkit-scrollbar {
886
+ width: 8px;
887
+ height: 8px;
888
+ }
889
+
890
+ ::-webkit-scrollbar-track {
891
+ background: rgba(0, 0, 0, 0.2);
892
+ }
893
+
894
+ ::-webkit-scrollbar-thumb {
895
+ background: var(--highlight);
896
+ border-radius: 4px;
897
+ }
898
+
899
+ ::-webkit-scrollbar-thumb:hover {
900
+ background: #ff6b6b;
901
+ }
902
+
903
+ /* Notification */
904
+ .notification {
905
+ position: fixed;
906
+ top: 100px;
907
+ right: 20px;
908
+ padding: 1rem 1.5rem;
909
+ border-radius: 8px;
910
+ background: var(--secondary);
911
+ color: var(--light);
912
+ box-shadow: var(--shadow);
913
+ transform: translateX(150%);
914
+ transition: var(--transition);
915
+ z-index: 3000;
916
+ display: flex;
917
+ align-items: center;
918
+ gap: 0.8rem;
919
+ border: 1px solid rgba(255, 255, 255, 0.1);
920
+ }
921
+
922
+ .notification.show {
923
+ transform: translateX(0);
924
+ }
925
+
926
+ .notification.success {
927
+ border-left: 4px solid var(--success);
928
+ }
929
+
930
+ .notification.warning {
931
+ border-left: 4px solid var(--warning);
932
+ }
933
+
934
+ .notification.error {
935
+ border-left: 4px solid var(--danger);
936
+ }
937
+
938
+ .notification.info {
939
+ border-left: 4px solid var(--info);
940
+ }
941
+ </style>
942
+ </head>
943
+
944
+ <body>
945
+ <header>
946
+ <div class="header-content">
947
+ <div class="logo-container">
948
+ <a href="#" class="logo">
949
+ <div class="logo-icon">
950
+ <i class="fas fa-shield-alt"></i>
951
+ </div>
952
+ <span>Gemma 3 Hardened</span>
953
+ </a>
954
+ <span class="model-badge">gemma-3-12b-it-abliterated-v2.q4_k_m.gguf</span>
955
+ <div class="built-with">
956
+ <i class="fas fa-code"></i>
957
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
958
+ </div>
959
+ </div>
960
+ <nav>
961
+ <ul>
962
+ <li><a href="#dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
963
+ <li><a href="#security-controls"><i class="fas fa-lock"></i> Security</a></li>
964
+ <li><a href="#deployment-script"><i class="fas fa-terminal"></i> Script</a></li>
965
+ <li><a href="#system-health"><i class="fas fa-heartbeat"></i> Health</a></li>
966
+ </ul>
967
+ </nav>
968
+ </div>
969
+ </header>
970
+
971
+ <main>
972
+ <!-- Alerts Section -->
973
+ <section id="alerts" class="fade-in">
974
+ <div class="alert alert-success">
975
+ <i class="fas fa-check-circle"></i>
976
+ <div class="alert-content">
977
+ <div class="alert-title">Security Improvements Applied</div>
978
+ <div class="alert-text">All three security concerns have been addressed: Enhanced entropy handling, dual MAC/Seccomp hardening, and persistent forensic logging.</div>
979
+ </div>
980
+ </div>
981
+ </section>
982
+
983
+ <!-- Dashboard Section -->
984
+ <section id="dashboard" class="fade-in">
985
+ <h1 class="section-title-main"><i class="fas fa-shield-alt"></i> Security Overview - Gemma 3 Model</h1>
986
+ <div class="dashboard-grid">
987
+ <!-- Entropy Card -->
988
+ <div class="card">
989
+ <div class="card-icon">
990
+ <i class="fas fa-random"></i>
991
+ </div>
992
+ <h3 class="card-title">Entropy Management</h3>
993
+ <p class="card-description">Hardware entropy mirroring via /dev/random bind mount from host. rngd sidecar container ensures continuous entropy pool replenishment for cryptographic operations.</p>
994
+ <div class="card-status">
995
+ <div class="status-indicator"></div>
996
+ <span class="status-text">Healthy (>3000 bits)</span>
997
+ </div>
998
+ </div>
999
+
1000
+ <!-- Dual MAC/Seccomp Card -->
1001
+ <div class="card">
1002
+ <div class="card-icon">
1003
+ <i class="fas fa-layer-group"></i>
1004
+ </div>
1005
+ <h3 class="card-title">Dual Security Layers</h3>
1006
+ <p class="card-description">Combined AppArmor profile (usr.bin.gemma) AND Seccomp filter (45 syscalls allowlist) for maximum defense-in-depth protection.</p>
1007
+ <div class="card-status">
1008
+ <div class="status-indicator"></div>
1009
+ <span class="status-text">Both Active</span>
1010
+ </div>
1011
+ </div>
1012
+
1013
+ <!-- Forensic Logging Card -->
1014
+ <div class="card">
1015
+ <div class="card-icon">
1016
+ <i class="fas fa-file-alt"></i>
1017
+ </div>
1018
+ <h3 class="card-title">Forensic Logging</h3>
1019
+ <p class="card-description">Persistent log storage via host-mounted /var/log directory. Logs survive container restarts and are available for forensic analysis.</p>
1020
+ <div class="card-status">
1021
+ <div class="status-indicator"></div>
1022
+ <span class="status-text">Persistent</span>
1023
+ </div>
1024
+ </div>
1025
+
1026
+ <!-- Network Isolation Card -->
1027
+ <div class="card">
1028
+ <div class="card-icon">
1029
+ <i class="fas fa-network-wired"></i>
1030
+ </div>
1031
+ <h3 class="card-title">Network Isolation</h3>
1032
+ <p class="card-description">Strict network blockade with allowlisted single API port on loopback interface only. All external connections blocked by default.</p>
1033
+ <div class="card-status">
1034
+ <div class="status-indicator"></div>
1035
+ <span class="status-text">Active</span>
1036
+ </div>
1037
+ </div>
1038
+
1039
+ <!-- Non-Root Execution Card -->
1040
+ <div class="card">
1041
+ <div class="card-icon">
1042
+ <i class="fas fa-user-shield"></i>
1043
+ </div>
1044
+ <h3 class="card-title">Non-Root Execution</h3>
1045
+ <p class="card-description">Application runs as dedicated unprivileged user (llm_agent) with minimal capabilities. No root access or privilege escalation possible.</p>
1046
+ <div class="card-status">
1047
+ <div class="status-indicator"></div>
1048
+ <span class="status-text">Secure</span>
1049
+ </div>
1050
+ </div>
1051
+
1052
+ <!-- Read-Only Filesystem Card -->
1053
+ <div class="card">
1054
+ <div class="card-icon">
1055
+ <i class="fas fa-hdd"></i>
1056
+ </div>
1057
+ <h3 class="card-title">Read-Only Filesystem</h3>
1058
+ <p class="card-description">Complete read-only root filesystem with tmpfs mounts for temporary files. Prevents persistent modifications to system files.</p>
1059
+ <div class="card-status">
1060
+ <div class="status-indicator"></div>
1061
+ <span class="status-text">Protected</span>
1062
+ </div>
1063
+ </div>
1064
+ </div>
1065
+ </section>
1066
+
1067
+ <!-- Security Controls Section -->
1068
+ <section id="security-controls" class="security-section fade-in">
1069
+ <div class="section-header">
1070
+ <h2 class="section-title"><i class="fas fa-cogs"></i> Security Controls</h2>
1071
+ <div class="section-actions">
1072
+ <button class="btn btn-secondary" id="refresh-btn">
1073
+ <i class="fas fa-sync-alt"></i> Refresh
1074
+ </button>
1075
+ <button class="btn btn-primary" id="run-audit">
1076
+ <i class="fas fa-search"></i> Run Audit
1077
+ </button>
1078
+ </div>
1079
+ </div>
1080
+
1081
+ <!-- Entropy Security Item -->
1082
+ <div class="security-item">
1083
+ <div class="security-header">
1084
+ <h3 class="security-title"><i class="fas fa-random"></i> Entropy Source (FIXED)</h3>
1085
+ <div class="security-status">
1086
+ <div class="status-indicator"></div>
1087
+ <span>Healthy</span>
1088
+ </div>
1089
+ </div>
1090
+ <div class="security-content">
1091
+ <div>
1092
+ <p class="security-details"><strong>Implementation:</strong> Host entropy mirroring + rngd sidecar container</p>
1093
+ <p class="security-details"><strong>Mount:</strong> /dev/random and /dev/urandom bind-mounted from host</p>
1094
+ <p class="security-details"><strong>Current Pool:</strong> 3847 bits available</p>
1095
+ <p class="security-details"><strong>Sidecar:</strong> rngd actively feeding entropy from hardware sources</p>
1096
+ </div>
1097
+ <div class="security-actions">
1098
+ <button class="btn btn-sm btn-secondary view-details" data-target="entropy">
1099
+ <i class="fas fa-info-circle"></i> Details
1100
+ </button>
1101
+ </div>
1102
+ </div>
1103
+ </div>
1104
+
1105
+ <!-- Dual Security Layers Item -->
1106
+ <div class="security-item">
1107
+ <div class="security-header">
1108
+ <h3 class="security-title"><i class="fas fa-layer-group"></i> Dual MAC + Seccomp (FIXED)</h3>
1109
+ <div class="security-status">
1110
+ <div class="status-indicator"></div>
1111
+ <span>Both Active</span>
1112
+ </div>
1113
+ </div>
1114
+ <div class="security-content">
1115
+ <div>
1116
+ <p class="security-details"><strong>AppArmor Profile:</strong> usr.bin.gemma (enforce mode)</p>
1117
+ <p class="security-details"><strong>Seccomp Filter:</strong> 45 syscalls allowlist (strict mode)</p>
1118
+ <p class="security-details"><strong>Defense Layers:</strong> Mandatory Access Control + System Call Filtering</p>
1119
+ <p class="security-details"><strong>Block Rate:</strong> 85.6% of syscalls blocked</p>
1120
+ </div>
1121
+ <div class="security-actions">
1122
+ <button class="btn btn-sm btn-secondary view-details" data-target="dual-security">
1123
+ <i class="fas fa-info-circle"></i> Details
1124
+ </button>
1125
+ </div>
1126
+ </div>
1127
+ </div>
1128
+
1129
+ <!-- Forensic Logging Item -->
1130
+ <div class="security-item">
1131
+ <div class="security-header">
1132
+ <h3 class="security-title"><i class="fas fa-file-alt"></i> Forensic Logging (FIXED)</h3>
1133
+ <div class="security-status">
1134
+ <div class="status-indicator"></div>
1135
+ <span>Persistent</span>
1136
+ </div>
1137
+ </div>
1138
+ <div class="security-content">
1139
+ <div>
1140
+ <p class="security-details"><strong>Log Mount:</strong> Host directory bind-mounted to /var/log</p>
1141
+ <p class="security-details"><strong>Host Path:</strong> /var/log/gemma-container/</p>
1142
+ <p class="security-details"><strong>Retention:</strong> Logs persist across container restarts</p>
1143
+ <p class="security