Hugging Face's logo

Spaces:
matthewspring
/
anycoder-08f3fd38
Running

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

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1010 -203
index.html CHANGED
@@ -3,20 +3,23 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Secure Web Application</title>
 
 
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
9
  :root {
10
- --primary-color: #3498db;
11
- --secondary-color: #2980b9;
12
- --accent-color: #e74c3c;
13
- --light-color: #ecf0f1;
14
- --dark-color: #2c3e50;
15
- --success-color: #2ecc71;
16
- --warning-color: #f39c12;
17
- --danger-color: #e74c3c;
18
- --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
19
- --border-radius: 8px;
 
20
  }
21
 
22
  * {
@@ -27,57 +30,83 @@
27
  }
28
 
29
  body {
30
- background-color: var(--light-color);
31
- color: var(--dark-color);
32
  line-height: 1.6;
33
  min-height: 100vh;
34
  display: flex;
35
  flex-direction: column;
36
  }
37
 
 
38
  header {
39
- background-color: var(--dark-color);
40
  color: white;
41
- padding: 1rem;
42
  box-shadow: var(--shadow);
43
  position: sticky;
44
  top: 0;
45
- z-index: 100;
46
  }
47
 
48
- .header-container {
49
  display: flex;
50
  justify-content: space-between;
51
  align-items: center;
52
- max-width: 1200px;
53
  margin: 0 auto;
54
  width: 100%;
55
  }
56
 
 
 
 
 
 
 
57
  .logo {
58
- font-size: 1.5rem;
59
- font-weight: bold;
60
  display: flex;
61
  align-items: center;
62
- gap: 0.5rem;
 
 
63
  }
64
 
65
- .logo i {
66
- color: var(--primary-color);
 
 
 
 
 
67
  }
68
 
69
  .built-with {
70
- font-size: 0.8rem;
71
- opacity: 0.8;
 
 
 
72
  }
73
 
74
  .built-with a {
75
- color: var(--primary-color);
76
  text-decoration: none;
 
 
77
  }
78
 
79
  .built-with a:hover {
80
  text-decoration: underline;
 
 
 
 
 
 
 
81
  }
82
 
83
  nav ul {
@@ -89,161 +118,441 @@
89
  nav a {
90
  color: white;
91
  text-decoration: none;
92
- padding: 0.5rem 1rem;
93
- border-radius: var(--border-radius);
94
- transition: background-color 0.3s;
 
 
 
95
  }
96
 
97
  nav a:hover {
98
- background-color: var(--secondary-color);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  }
100
 
 
101
  main {
102
  flex: 1;
103
- max-width: 1200px;
104
  margin: 2rem auto;
105
- padding: 0 1rem;
106
  width: 100%;
107
  }
108
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
109
  .security-section {
110
- background-color: white;
111
- border-radius: var(--border-radius);
112
  box-shadow: var(--shadow);
113
  padding: 2rem;
114
  margin-bottom: 2rem;
115
  }
116
 
117
- .security-section h2 {
118
- color: var(--primary-color);
119
- margin-bottom: 1rem;
120
- border-bottom: 2px solid var(--primary-color);
121
- padding-bottom: 0.5rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
122
  }
123
 
 
124
  .security-item {
125
  margin-bottom: 1.5rem;
126
- padding-bottom: 1.5rem;
127
- border-bottom: 1px solid #eee;
 
 
 
 
 
 
 
 
 
 
 
 
128
  }
129
 
130
- .security-item:last-child {
131
- border-bottom: none;
132
- margin-bottom: 0;
133
- padding-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
134
  }
135
 
136
  .security-status {
137
  display: flex;
138
  align-items: center;
139
  gap: 0.5rem;
 
 
 
 
 
 
 
 
 
 
140
  margin-bottom: 0.5rem;
141
  }
142
 
143
- .status-icon {
144
- width: 20px;
145
- height: 20px;
146
- border-radius: 50%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
147
  display: flex;
148
  align-items: center;
149
  justify-content: center;
150
- font-size: 0.8rem;
 
 
 
151
  }
152
 
153
- .status-good {
154
- background-color: var(--success-color);
155
- color: white;
156
  }
157
 
158
- .status-warning {
159
- background-color: var(--warning-color);
160
- color: white;
 
 
 
 
 
 
 
 
161
  }
162
 
163
- .status-bad {
164
- background-color: var(--danger-color);
165
- color: white;
166
  }
167
 
168
- .security-title {
169
- font-weight: bold;
170
- margin-bottom: 0.5rem;
 
 
 
 
 
 
 
 
 
 
171
  }
172
 
173
- .security-description {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
174
  margin-bottom: 0.5rem;
175
  }
176
 
177
- .security-action {
178
- font-style: italic;
179
- color: var(--secondary-color);
180
  }
181
 
182
- .dashboard {
183
- display: grid;
184
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
185
  gap: 1rem;
186
- margin-top: 2rem;
187
  }
188
 
189
- .dashboard-card {
190
- background-color: white;
191
- border-radius: var(--border-radius);
192
- box-shadow: var(--shadow);
 
 
 
 
 
 
 
193
  padding: 1.5rem;
194
  text-align: center;
195
- transition: transform 0.3s, box-shadow 0.3s;
 
196
  }
197
 
198
- .dashboard-card:hover {
199
  transform: translateY(-5px);
200
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
201
  }
202
 
203
- .dashboard-card i {
204
  font-size: 2rem;
205
- margin-bottom: 1rem;
206
- color: var(--primary-color);
207
- }
208
-
209
- .dashboard-card h3 {
210
  margin-bottom: 0.5rem;
211
  }
212
 
213
- .dashboard-card p {
214
  color: #666;
215
  font-size: 0.9rem;
 
 
216
  }
217
 
 
218
  footer {
219
- background-color: var(--dark-color);
220
  color: white;
221
  text-align: center;
222
- padding: 1.5rem;
223
  margin-top: auto;
224
  }
225
 
 
 
 
 
 
226
  .footer-links {
227
  display: flex;
228
  justify-content: center;
229
- gap: 1rem;
230
- margin-bottom: 1rem;
231
  }
232
 
233
  .footer-links a {
234
  color: white;
235
  text-decoration: none;
236
  padding: 0.5rem 1rem;
237
- border-radius: var(--border-radius);
238
- transition: background-color 0.3s;
239
  }
240
 
241
  .footer-links a:hover {
242
- background-color: var(--secondary-color);
243
  }
244
 
245
- @media (max-width: 768px) {
246
- .header-container {
 
 
 
 
 
 
247
  flex-direction: column;
248
  gap: 1rem;
249
  }
@@ -252,193 +561,691 @@
252
  flex-wrap: wrap;
253
  justify-content: center;
254
  }
 
 
 
 
 
 
255
 
256
- .dashboard {
 
 
 
 
257
  grid-template-columns: 1fr;
258
  }
 
 
 
 
259
  }
260
 
261
  @media (max-width: 480px) {
262
- .logo {
263
- font-size: 1.2rem;
264
  }
265
 
266
- nav ul {
267
- gap: 0.5rem;
268
  }
269
 
270
  nav a {
271
- padding: 0.3rem 0.6rem;
272
  font-size: 0.9rem;
273
  }
274
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
275
  </style>
276
  </head>
277
  <body>
278
  <header>
279
- <div class="header-container">
280
- <div class="logo">
281
- <i class="fas fa-shield-alt"></i>
282
- <span>SecureApp</span>
 
 
 
 
 
 
 
 
283
  </div>
284
  <nav>
285
  <ul>
286
  <li><a href="#dashboard">Dashboard</a></li>
287
- <li><a href="#security">Security</a></li>
 
 
288
  <li><a href="#settings">Settings</a></li>
289
- <li><a href="#about">About</a></li>
290
  </ul>
291
  </nav>
292
- <div class="built-with">
293
- Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
294
- </div>
295
  </div>
296
  </header>
297
 
298
  <main>
299
- <section id="dashboard" class="dashboard">
300
- <div class="dashboard-card">
301
- <i class="fas fa-network-wired"></i>
302
- <h3>Network Isolation</h3>
303
- <p>Strict blockade with allowlisted ports</p>
304
- </div>
305
- <div class="dashboard-card">
306
- <i class="fas fa-user-shield"></i>
307
- <h3>Non-Root Execution</h3>
308
- <p>Least privilege user with minimal capabilities</p>
309
- </div>
310
- <div class="dashboard-card">
311
- <i class="fas fa-file-lock"></i>
312
- <h3>Read-Only Filesystem</h3>
313
- <p>Full read-only root with tmpfs for temporaries</p>
314
- </div>
315
- <div class="dashboard-card">
316
- <i class="fas fa-filter"></i>
317
- <h3>Seccomp Filtering</h3>
318
- <p>Allowlisted syscalls with >80% block rate</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
319
  </div>
320
  </section>
321
 
322
- <section id="security" class="security-section">
323
- <h2>Security Controls</h2>
 
 
 
 
 
 
 
 
 
 
 
324
 
 
325
  <div class="security-item">
326
- <div class="security-status">
327
- <div class="status-icon status-good">
328
- <i class="fas fa-check"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
329
  </div>
330
- <span class="security-title">Network Isolation</span>
331
  </div>
332
- <p class="security-description">Current: Strict Blockade with allowlisted single API port on loopback</p>
333
- <p class="security-action">Action: Maintain current configuration with periodic audits</p>
334
  </div>
335
 
 
336
  <div class="security-item">
337
- <div class="security-status">
338
- <div class="status-icon status-good">
339
- <i class="fas fa-check"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
340
  </div>
341
- <span class="security-title">Non-Root Execution</span>
342
  </div>
343
- <p class="security-description">Current: Dedicated unprivileged user (llm_agent) with minimal capabilities</p>
344
- <p class="security-action">Action: Regular capability audits and reduction</p>
345
  </div>
346
 
 
347
  <div class="security-item">
348
- <div class="security-status">
349
- <div class="status-icon status-good">
350
- <i class="fas fa-check"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
351
  </div>
352
- <span class="security-title">Read-Only Filesystem</span>
353
  </div>
354
- <p class="security-description">Current: Full read-only root with tmpfs for logs and cache</p>
355
- <p class="security-action">Action: Monitor tmpfs usage and adjust sizes as needed</p>
356
  </div>
357
 
 
358
  <div class="security-item">
359
- <div class="security-status">
360
- <div class="status-icon status-good">
361
- <i class="fas fa-check"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
362
  </div>
363
- <span class="security-title">Seccomp Filtering</span>
364
  </div>
365
- <p class="security-description">Current: Allowlisted essential syscalls with >80% block rate</p>
366
- <p class="security-action">Action: Regular syscall audit and profile updates</p>
367
  </div>
368
 
 
369
  <div class="security-item">
370
- <div class="security-status">
371
- <div class="status-icon status-good">
372
- <i class="fas fa-check"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
373
  </div>
374
- <span class="security-title">AppArmor/SELinux</span>
375
  </div>
376
- <p class="security-description">Current: Mandatory custom profile enforcing access controls</p>
377
- <p class="security-action">Action: Profile updates with each application version</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
378
  </div>
379
  </section>
380
  </main>
381
 
382
  <footer>
383
- <div class="footer-links">
384
- <a href="#privacy">Privacy Policy</a>
385
- <a href="#terms">Terms of Service</a>
386
- <a href="#contact">Contact Us</a>
 
 
 
 
387
  </div>
388
- <p>&copy; 2023 SecureApp. All rights reserved.</p>
389
  </footer>
390
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
391
  <script>
392
- // Security dashboard interaction
393
  document.addEventListener('DOMContentLoaded', function() {
394
- const dashboardCards = document.querySelectorAll('.dashboard-card');
 
395
 
396
- dashboardCards.forEach(card => {
397
- card.addEventListener('click', function() {
398
- // Simple visual feedback
399
- this.style.transform = 'scale(0.98)';
400
- setTimeout(() => {
401
- this.style.transform = '';
402
- }, 150);
 
 
 
 
 
 
 
403
  });
 
 
 
 
404
  });
 
405
 
406
- // Smooth scrolling for navigation links
 
407
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
408
- anchor.addEventListener('click', function (e) {
409
  e.preventDefault();
410
- const targetId = this.getAttribute('href');
411
- const targetElement = document.querySelector(targetId);
412
-
413
- if (targetElement) {
414
- targetElement.scrollIntoView({
415
- behavior: 'smooth'
416
  });
417
  }
418
  });
419
  });
420
- });
421
 
422
- // Security status checks (simulated)
423
- function checkSecurityStatus() {
424
- // In a real application, this would make API calls to check security status
425
- console.log('Performing security status checks...');
426
-
427
- // Simulate status updates
428
- setTimeout(() => {
429
- const statusIcons = document.querySelectorAll('.status-icon');
430
- statusIcons.forEach(icon => {
431
- if (Math.random() > 0.8) {
432
- icon.classList.remove('status-good');
433
- icon.classList.add('status-warning');
434
- icon.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
435
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
436
  });
437
- }, 2000);
438
  }
439
 
440
- // Initialize security checks
441
- checkSecurityStatus();
442
- </script>
443
- </body>
444
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
  * {
 
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 {
 
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
  }
 
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