Hugging Face's logo

Spaces:
gametimeb
/
anycoder-9e85c613
Running

App Files Community
gametimeb commited on
Commit
9f14ad2
·
verified ·
1 Parent(s): 4fd7b91

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1350 -19
index.html CHANGED
@@ -1,19 +1,1350 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Ubuntu Network Manager</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
+ --bg-primary: #1e1e1e;
11
+ --bg-secondary: #2d2d2d;
12
+ --bg-tertiary: #3d3d3d;
13
+ --accent: #E95420;
14
+ --accent-hover: #ff6b35;
15
+ --text-primary: #ffffff;
16
+ --text-secondary: #b0b0b0;
17
+ --success: #4caf50;
18
+ --warning: #ff9800;
19
+ --danger: #f44336;
20
+ --border-color: #404040;
21
+ }
22
+
23
+ * {
24
+ margin: 0;
25
+ padding: 0;
26
+ box-sizing: border-box;
27
+ }
28
+
29
+ body {
30
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
31
+ background: var(--bg-primary);
32
+ color: var(--text-primary);
33
+ min-height: 100vh;
34
+ overflow-x: hidden;
35
+ }
36
+
37
+ /* Header */
38
+ .header {
39
+ background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
40
+ padding: 15px 30px;
41
+ display: flex;
42
+ justify-content: space-between;
43
+ align-items: center;
44
+ border-bottom: 1px solid var(--border-color);
45
+ position: sticky;
46
+ top: 0;
47
+ z-index: 100;
48
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
49
+ }
50
+
51
+ .logo-section {
52
+ display: flex;
53
+ align-items: center;
54
+ gap: 15px;
55
+ }
56
+
57
+ .ubuntu-logo {
58
+ width: 45px;
59
+ height: 45px;
60
+ background: var(--accent);
61
+ border-radius: 12px;
62
+ display: flex;
63
+ align-items: center;
64
+ justify-content: center;
65
+ font-size: 24px;
66
+ font-weight: bold;
67
+ color: white;
68
+ box-shadow: 0 4px 10px rgba(233, 84, 32, 0.4);
69
+ }
70
+
71
+ .app-title h1 {
72
+ font-size: 1.4rem;
73
+ font-weight: 600;
74
+ }
75
+
76
+ .app-title span {
77
+ font-size: 0.8rem;
78
+ color: var(--text-secondary);
79
+ }
80
+
81
+ .header-actions {
82
+ display: flex;
83
+ align-items: center;
84
+ gap: 20px;
85
+ }
86
+
87
+ .status-indicator {
88
+ display: flex;
89
+ align-items: center;
90
+ gap: 8px;
91
+ padding: 8px 16px;
92
+ background: rgba(76, 175, 80, 0.15);
93
+ border-radius: 20px;
94
+ border: 1px solid rgba(76, 175, 80, 0.3);
95
+ }
96
+
97
+ .status-dot {
98
+ width: 10px;
99
+ height: 10px;
100
+ background: var(--success);
101
+ border-radius: 50%;
102
+ animation: pulse 2s infinite;
103
+ }
104
+
105
+ @keyframes pulse {
106
+ 0%, 100% { opacity: 1; transform: scale(1); }
107
+ 50% { opacity: 0.7; transform: scale(1.1); }
108
+ }
109
+
110
+ .anycoder-link {
111
+ color: var(--text-secondary);
112
+ text-decoration: none;
113
+ font-size: 0.85rem;
114
+ padding: 6px 12px;
115
+ border-radius: 6px;
116
+ transition: all 0.3s ease;
117
+ border: 1px solid transparent;
118
+ }
119
+
120
+ .anycoder-link:hover {
121
+ color: var(--accent);
122
+ border-color: var(--accent);
123
+ background: rgba(233, 84, 32, 0.1);
124
+ }
125
+
126
+ /* Main Container */
127
+ .main-container {
128
+ display: flex;
129
+ min-height: calc(100vh - 80px);
130
+ }
131
+
132
+ /* Sidebar */
133
+ .sidebar {
134
+ width: 250px;
135
+ background: var(--bg-secondary);
136
+ padding: 20px 0;
137
+ border-right: 1px solid var(--border-color);
138
+ }
139
+
140
+ .nav-item {
141
+ display: flex;
142
+ align-items: center;
143
+ gap: 12px;
144
+ padding: 14px 25px;
145
+ cursor: pointer;
146
+ transition: all 0.3s ease;
147
+ border-left: 3px solid transparent;
148
+ color: var(--text-secondary);
149
+ }
150
+
151
+ .nav-item:hover {
152
+ background: rgba(255, 255, 255, 0.05);
153
+ color: var(--text-primary);
154
+ }
155
+
156
+ .nav-item.active {
157
+ background: rgba(233, 84, 32, 0.1);
158
+ border-left-color: var(--accent);
159
+ color: var(--accent);
160
+ }
161
+
162
+ .nav-item i {
163
+ width: 24px;
164
+ text-align: center;
165
+ }
166
+
167
+ /* Content Area */
168
+ .content {
169
+ flex: 1;
170
+ padding: 30px;
171
+ overflow-y: auto;
172
+ }
173
+
174
+ .page {
175
+ display: none;
176
+ animation: fadeIn 0.4s ease;
177
+ }
178
+
179
+ .page.active {
180
+ display: block;
181
+ }
182
+
183
+ @keyframes fadeIn {
184
+ from { opacity: 0; transform: translateY(10px); }
185
+ to { opacity: 1; transform: translateY(0); }
186
+ }
187
+
188
+ .page-title {
189
+ font-size: 1.8rem;
190
+ margin-bottom: 10px;
191
+ }
192
+
193
+ .page-subtitle {
194
+ color: var(--text-secondary);
195
+ margin-bottom: 25px;
196
+ }
197
+
198
+ /* Cards */
199
+ .card {
200
+ background: var(--bg-secondary);
201
+ border-radius: 16px;
202
+ padding: 20px;
203
+ margin-bottom: 20px;
204
+ border: 1px solid var(--border-color);
205
+ transition: all 0.3s ease;
206
+ }
207
+
208
+ .card:hover {
209
+ transform: translateY(-2px);
210
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
211
+ }
212
+
213
+ .card-header {
214
+ display: flex;
215
+ justify-content: space-between;
216
+ align-items: center;
217
+ margin-bottom: 15px;
218
+ }
219
+
220
+ .card-title {
221
+ font-size: 1.1rem;
222
+ font-weight: 600;
223
+ }
224
+
225
+ /* Connection Status Card */
226
+ .connection-overview {
227
+ display: grid;
228
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
229
+ gap: 20px;
230
+ margin-bottom: 30px;
231
+ }
232
+
233
+ .status-card {
234
+ background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
235
+ border-radius: 16px;
236
+ padding: 25px;
237
+ border: 1px solid var(--border-color);
238
+ position: relative;
239
+ overflow: hidden;
240
+ }
241
+
242
+ .status-card::before {
243
+ content: '';
244
+ position: absolute;
245
+ top: 0;
246
+ left: 0;
247
+ right: 0;
248
+ height: 4px;
249
+ background: var(--accent);
250
+ }
251
+
252
+ .status-card.connected::before {
253
+ background: var(--success);
254
+ }
255
+
256
+ .status-card.disconnected::before {
257
+ background: var(--danger);
258
+ }
259
+
260
+ .status-icon {
261
+ width: 60px;
262
+ height: 60px;
263
+ border-radius: 14px;
264
+ display: flex;
265
+ align-items: center;
266
+ justify-content: center;
267
+ font-size: 28px;
268
+ margin-bottom: 15px;
269
+ }
270
+
271
+ .status-card.wifi .status-icon {
272
+ background: rgba(33, 150, 243, 0.15);
273
+ color: #2196f3;
274
+ }
275
+
276
+ .status-card.ethernet .status-icon {
277
+ background: rgba(76, 175, 80, 0.15);
278
+ color: #4caf50;
279
+ }
280
+
281
+ .status-card.vpn .status-icon {
282
+ background: rgba(156, 39, 176, 0.15);
283
+ color: #9c27b0;
284
+ }
285
+
286
+ .status-info h3 {
287
+ font-size: 1.2rem;
288
+ margin-bottom: 5px;
289
+ }
290
+
291
+ .status-info p {
292
+ color: var(--text-secondary);
293
+ font-size: 0.9rem;
294
+ margin-bottom: 15px;
295
+ }
296
+
297
+ /* Buttons */
298
+ .btn {
299
+ padding: 10px 20px;
300
+ border: none;
301
+ border-radius: 8px;
302
+ cursor: pointer;
303
+ font-size: 0.9rem;
304
+ font-weight: 500;
305
+ transition: all 0.3s ease;
306
+ display: inline-flex;
307
+ align-items: center;
308
+ gap: 8px;
309
+ }
310
+
311
+ .btn-primary {
312
+ background: var(--accent);
313
+ color: white;
314
+ }
315
+
316
+ .btn-primary:hover {
317
+ background: var(--accent-hover);
318
+ transform: translateY(-2px);
319
+ box-shadow: 0 4px 15px rgba(233, 84, 32, 0.4);
320
+ }
321
+
322
+ .btn-secondary {
323
+ background: var(--bg-tertiary);
324
+ color: var(--text-primary);
325
+ border: 1px solid var(--border-color);
326
+ }
327
+
328
+ .btn-secondary:hover {
329
+ background: var(--border-color);
330
+ }
331
+
332
+ .btn-danger {
333
+ background: rgba(244, 67, 54, 0.15);
334
+ color: var(--danger);
335
+ border: 1px solid rgba(244, 67, 54, 0.3);
336
+ }
337
+
338
+ .btn-danger:hover {
339
+ background: var(--danger);
340
+ color: white;
341
+ }
342
+
343
+ .btn-sm {
344
+ padding: 6px 12px;
345
+ font-size: 0.8rem;
346
+ }
347
+
348
+ /* WiFi Networks List */
349
+ .network-list {
350
+ display: flex;
351
+ flex-direction: column;
352
+ gap: 10px;
353
+ }
354
+
355
+ .network-item {
356
+ display: flex;
357
+ align-items: center;
358
+ justify-content: space-between;
359
+ padding: 15px 20px;
360
+ background: var(--bg-tertiary);
361
+ border-radius: 12px;
362
+ cursor: pointer;
363
+ transition: all 0.3s ease;
364
+ border: 1px solid transparent;
365
+ }
366
+
367
+ .network-item:hover {
368
+ border-color: var(--accent);
369
+ transform: translateX(5px);
370
+ }
371
+
372
+ .network-item.connected {
373
+ border-color: var(--success);
374
+ background: rgba(76, 175, 80, 0.1);
375
+ }
376
+
377
+ .network-left {
378
+ display: flex;
379
+ align-items: center;
380
+ gap: 15px;
381
+ }
382
+
383
+ .network-icon {
384
+ width: 45px;
385
+ height: 45px;
386
+ border-radius: 10px;
387
+ display: flex;
388
+ align-items: center;
389
+ justify-content: center;
390
+ font-size: 22px;
391
+ }
392
+
393
+ .network-icon.secure {
394
+ background: rgba(33, 150, 243, 0.15);
395
+ color: #2196f3;
396
+ }
397
+
398
+ .network-icon.open {
399
+ background: rgba(76, 175, 80, 0.15);
400
+ color: #4caf50;
401
+ }
402
+
403
+ .network-details h4 {
404
+ font-size: 1rem;
405
+ margin-bottom: 4px;
406
+ }
407
+
408
+ .network-details span {
409
+ font-size: 0.8rem;
410
+ color: var(--text-secondary);
411
+ }
412
+
413
+ .signal-strength {
414
+ display: flex;
415
+ flex-direction: column;
416
+ align-items: flex-end;
417
+ gap: 5px;
418
+ }
419
+
420
+ .signal-bars {
421
+ display: flex;
422
+ gap: 3px;
423
+ align-items: flex-end;
424
+ height: 20px;
425
+ }
426
+
427
+ .signal-bar {
428
+ width: 4px;
429
+ background: var(--border-color);
430
+ border-radius: 2px;
431
+ transition: all 0.3s ease;
432
+ }
433
+
434
+ .signal-bar.active {
435
+ background: var(--accent);
436
+ }
437
+
438
+ .signal-bar:nth-child(1) { height: 6px; }
439
+ .signal-bar:nth-child(2) { height: 10px; }
440
+ .signal-bar:nth-child(3) { height: 14px; }
441
+ .signal-bar:nth-child(4) { height: 18px; }
442
+
443
+ .network-item.connected .signal-bar.active {
444
+ background: var(--success);
445
+ }
446
+
447
+ /* Ethernet Section */
448
+ .ethernet-info {
449
+ display: grid;
450
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
451
+ gap: 15px;
452
+ }
453
+
454
+ .info-item {
455
+ background: var(--bg-tertiary);
456
+ padding: 15px;
457
+ border-radius: 10px;
458
+ }
459
+
460
+ .info-item label {
461
+ display: block;
462
+ font-size: 0.8rem;
463
+ color: var(--text-secondary);
464
+ margin-bottom: 5px;
465
+ }
466
+
467
+ .info-item span {
468
+ font-size: 0.95rem;
469
+ word-break: break-all;
470
+ }
471
+
472
+ /* VPN Section */
473
+ .vpn-list {
474
+ display: flex;
475
+ flex-direction: column;
476
+ gap: 12px;
477
+ }
478
+
479
+ .vpn-item {
480
+ display: flex;
481
+ align-items: center;
482
+ justify-content: space-between;
483
+ padding: 18px 20px;
484
+ background: var(--bg-tertiary);
485
+ border-radius: 12px;
486
+ border: 1px solid transparent;
487
+ transition: all 0.3s ease;
488
+ }
489
+
490
+ .vpn-item:hover {
491
+ border-color: #9c27b0;
492
+ }
493
+
494
+ .vpn-item.active {
495
+ border-color: var(--success);
496
+ background: rgba(76, 175, 80, 0.1);
497
+ }
498
+
499
+ .vpn-left {
500
+ display: flex;
501
+ align-items: center;
502
+ gap: 15px;
503
+ }
504
+
505
+ .vpn-icon {
506
+ width: 50px;
507
+ height: 50px;
508
+ background: rgba(156, 39, 176, 0.15);
509
+ border-radius: 12px;
510
+ display: flex;
511
+ align-items: center;
512
+ justify-content: center;
513
+ font-size: 24px;
514
+ color: #9c27b0;
515
+ }
516
+
517
+ .toggle-switch {
518
+ position: relative;
519
+ width: 52px;
520
+ height: 28px;
521
+ }
522
+
523
+ .toggle-switch input {
524
+ opacity: 0;
525
+ width: 0;
526
+ height: 0;
527
+ }
528
+
529
+ .toggle-slider {
530
+ position: absolute;
531
+ cursor: pointer;
532
+ top: 0;
533
+ left: 0;
534
+ right: 0;
535
+ bottom: 0;
536
+ background: var(--bg-primary);
537
+ border-radius: 28px;
538
+ transition: all 0.3s ease;
539
+ border: 1px solid var(--border-color);
540
+ }
541
+
542
+ .toggle-slider::before {
543
+ content: '';
544
+ position: absolute;
545
+ height: 22px;
546
+ width: 22px;
547
+ left: 2px;
548
+ bottom: 2px;
549
+ background: white;
550
+ border-radius: 50%;
551
+ transition: all 0.3s ease;
552
+ }
553
+
554
+ .toggle-switch input:checked + .toggle-slider {
555
+ background: var(--success);
556
+ border-color: var(--success);
557
+ }
558
+
559
+ .toggle-switch input:checked + .toggle-slider::before {
560
+ transform: translateX(24px);
561
+ }
562
+
563
+ /* Modal */
564
+ .modal-overlay {
565
+ position: fixed;
566
+ top: 0;
567
+ left: 0;
568
+ right: 0;
569
+ bottom: 0;
570
+ background: rgba(0, 0, 0, 0.7);
571
+ display: none;
572
+ align-items: center;
573
+ justify-content: center;
574
+ z-index: 1000;
575
+ backdrop-filter: blur(5px);
576
+ }
577
+
578
+ .modal-overlay.active {
579
+ display: flex;
580
+ }
581
+
582
+ .modal {
583
+ background: var(--bg-secondary);
584
+ border-radius: 20px;
585
+ padding: 30px;
586
+ width: 90%;
587
+ max-width: 500px;
588
+ border: 1px solid var(--border-color);
589
+ animation: modalSlide 0.3s ease;
590
+ }
591
+
592
+ @keyframes modalSlide {
593
+ from { opacity: 0; transform: scale(0.9) translateY(-20px); }
594
+ to { opacity: 1; transform: scale(1) translateY(0); }
595
+ }
596
+
597
+ .modal-header {
598
+ display: flex;
599
+ justify-content: space-between;
600
+ align-items: center;
601
+ margin-bottom: 25px;
602
+ }
603
+
604
+ .modal-header h2 {
605
+ font-size: 1.4rem;
606
+ }
607
+
608
+ .modal-close {
609
+ width: 36px;
610
+ height: 36px;
611
+ border-radius: 50%;
612
+ background: var(--bg-tertiary);
613
+ border: none;
614
+ color: var(--text-secondary);
615
+ cursor: pointer;
616
+ transition: all 0.3s ease;
617
+ display: flex;
618
+ align-items: center;
619
+ justify-content: center;
620
+ }
621
+
622
+ .modal-close:hover {
623
+ background: var(--danger);
624
+ color: white;
625
+ }
626
+
627
+ .form-group {
628
+ margin-bottom: 20px;
629
+ }
630
+
631
+ .form-group label {
632
+ display: block;
633
+ margin-bottom: 8px;
634
+ font-size: 0.9rem;
635
+ color: var(--text-secondary);
636
+ }
637
+
638
+ .form-group input,
639
+ .form-group select {
640
+ width: 100%;
641
+ padding: 12px 16px;
642
+ background: var(--bg-tertiary);
643
+ border: 1px solid var(--border-color);
644
+ border-radius: 10px;
645
+ color: var(--text-primary);
646
+ font-size: 1rem;
647
+ transition: all 0.3s ease;
648
+ }
649
+
650
+ .form-group input:focus,
651
+ .form-group select:focus {
652
+ outline: none;
653
+ border-color: var(--accent);
654
+ box-shadow: 0 0 0 3px rgba(233, 84, 32, 0.2);
655
+ }
656
+
657
+ .modal-actions {
658
+ display: flex;
659
+ gap: 12px;
660
+ justify-content: flex-end;
661
+ margin-top: 25px;
662
+ }
663
+
664
+ /* Quick Actions */
665
+ .quick-actions {
666
+ display: grid;
667
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
668
+ gap: 15px;
669
+ margin-bottom: 30px;
670
+ }
671
+
672
+ .action-card {
673
+ background: var(--bg-secondary);
674
+ border-radius: 12px;
675
+ padding: 20px;
676
+ text-align: center;
677
+ cursor: pointer;
678
+ border: 1px solid var(--border-color);
679
+ transition: all 0.3s ease;
680
+ }
681
+
682
+ .action-card:hover {
683
+ border-color: var(--accent);
684
+ transform: translateY(-3px);
685
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
686
+ }
687
+
688
+ .action-card i {
689
+ font-size: 28px;
690
+ color: var(--accent);
691
+ margin-bottom: 10px;
692
+ }
693
+
694
+ .action-card h4 {
695
+ font-size: 0.95rem;
696
+ margin-bottom: 5px;
697
+ }
698
+
699
+ .action-card p {
700
+ font-size: 0.8rem;
701
+ color: var(--text-secondary);
702
+ }
703
+
704
+ /* Toast Notifications */
705
+ .toast-container {
706
+ position: fixed;
707
+ bottom: 30px;
708
+ right: 30px;
709
+ z-index: 2000;
710
+ display: flex;
711
+ flex-direction: column;
712
+ gap: 10px;
713
+ }
714
+
715
+ .toast {
716
+ background: var(--bg-secondary);
717
+ border-radius: 12px;
718
+ padding: 16px 20px;
719
+ display: flex;
720
+ align-items: center;
721
+ gap: 12px;
722
+ min-width: 300px;
723
+ border: 1px solid var(--border-color);
724
+ animation: toastSlide 0.4s ease;
725
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
726
+ }
727
+
728
+ @keyframes toastSlide {
729
+ from { opacity: 0; transform: translateX(100px); }
730
+ to { opacity: 1; transform: translateX(0); }
731
+ }
732
+
733
+ .toast.success {
734
+ border-left: 4px solid var(--success);
735
+ }
736
+
737
+ .toast.error {
738
+ border-left: 4px solid var(--danger);
739
+ }
740
+
741
+ .toast.info {
742
+ border-left: 4px solid #2196f3;
743
+ }
744
+
745
+ .toast-icon {
746
+ font-size: 20px;
747
+ }
748
+
749
+ .toast.success .toast-icon { color: var(--success); }
750
+ .toast.error .toast-icon { color: var(--danger); }
751
+ .toast.info .toast-icon { color: #2196f3; }
752
+
753
+ /* Progress Ring */
754
+ .loading-overlay {
755
+ position: fixed;
756
+ top: 0;
757
+ left: 0;
758
+ right: 0;
759
+ bottom: 0;
760
+ background: rgba(0, 0, 0, 0.8);
761
+ display: none;
762
+ align-items: center;
763
+ justify-content: center;
764
+ z-index: 3000;
765
+ }
766
+
767
+ .loading-overlay.active {
768
+ display: flex;
769
+ }
770
+
771
+ .loader {
772
+ width: 60px;
773
+ height: 60px;
774
+ border: 4px solid var(--bg-tertiary);
775
+ border-top-color: var(--accent);
776
+ border-radius: 50%;
777
+ animation: spin 1s linear infinite;
778
+ }
779
+
780
+ @keyframes spin {
781
+ to { transform: rotate(360deg); }
782
+ }
783
+
784
+ /* Responsive */
785
+ @media (max-width: 768px) {
786
+ .sidebar {
787
+ display: none;
788
+ }
789
+
790
+ .header {
791
+ padding: 12px 20px;
792
+ }
793
+
794
+ .content {
795
+ padding: 20px;
796
+ }
797
+
798
+ .anycoder-link {
799
+ display: none;
800
+ }
801
+
802
+ .connection-overview {
803
+ grid-template-columns: 1fr;
804
+ }
805
+ }
806
+
807
+ /* Terminal Simulation */
808
+ .terminal {
809
+ background: #0d0d0d;
810
+ border-radius: 12px;
811
+ padding: 20px;
812
+ font-family: 'Courier New', monospace;
813
+ margin-top: 20px;
814
+ max-height: 300px;
815
+ overflow-y: auto;
816
+ }
817
+
818
+ .terminal-line {
819
+ margin-bottom: 5px;
820
+ font-size: 0.9rem;
821
+ }
822
+
823
+ .terminal-line .prompt {
824
+ color: #4caf50;
825
+ }
826
+
827
+ .terminal-line .command {
828
+ color: #2196f3;
829
+ }
830
+
831
+ .terminal-line .output {
832
+ color: var(--text-secondary);
833
+ }
834
+
835
+ /* Scrollbar */
836
+ ::-webkit-scrollbar {
837
+ width: 8px;
838
+ }
839
+
840
+ ::-webkit-scrollbar-track {
841
+ background: var(--bg-primary);
842
+ }
843
+
844
+ ::-webkit-scrollbar-thumb {
845
+ background: var(--border-color);
846
+ border-radius: 4px;
847
+ }
848
+
849
+ ::-webkit-scrollbar-thumb:hover {
850
+ background: var(--text-secondary);
851
+ }
852
+ </style>
853
+ </head>
854
+ <body>
855
+ <!-- Header -->
856
+ <header class="header">
857
+ <div class="logo-section">
858
+ <div class="ubuntu-logo">
859
+ <i class="fab fa-ubuntu"></i>
860
+ </div>
861
+ <div class="app-title">
862
+ <h1>Network Manager</h1>
863
+ <span>Ubuntu Connection Manager</span>
864
+ </div>
865
+ </div>
866
+ <div class="header-actions">
867
+ <div class="status-indicator">
868
+ <div class="status-dot"></div>
869
+ <span>System Online</span>
870
+ </div>
871
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
872
+ Built with anycoder
873
+ </a>
874
+ </div>
875
+ </header>
876
+
877
+ <!-- Main Container -->
878
+ <div class="main-container">
879
+ <!-- Sidebar -->
880
+ <nav class="sidebar">
881
+ <div class="nav-item active" data-page="overview">
882
+ <i class="fas fa-home"></i>
883
+ <span>Overview</span>
884
+ </div>
885
+ <div class="nav-item" data-page="wifi">
886
+ <i class="fas fa-wifi"></i>
887
+ <span>WiFi Networks</span>
888
+ </div>
889
+ <div class="nav-item" data-page="ethernet">
890
+ <i class="fas fa-ethernet"></i>
891
+ <span>Ethernet</span>
892
+ </div>
893
+ <div class="nav-item" data-page="vpn">
894
+ <i class="fas fa-shield-alt"></i>
895
+ <span>VPN Connections</span>
896
+ </div>
897
+ <div class="nav-item" data-page="hotspot">
898
+ <i class="fas fa-wifi"></i>
899
+ <span>Hotspot</span>
900
+ </div>
901
+ <div class="nav-item" data-page="terminal">
902
+ <i class="fas fa-terminal"></i>
903
+ <span>Network Tools</span>
904
+ </div>
905
+ </nav>
906
+
907
+ <!-- Content Area -->
908
+ <main class="content">
909
+ <!-- Overview Page -->
910
+ <div class="page active" id="overview">
911
+ <h2 class="page-title">Network Overview</h2>
912
+ <p class="page-subtitle">Monitor and manage your network connections</p>
913
+
914
+ <div class="connection-overview">
915
+ <div class="status-card connected">
916
+ <div class="status-icon">
917
+ <i class="fas fa-wifi"></i>
918
+ </div>
919
+ <div class="status-info">
920
+ <h3>WiFi Connected</h3>
921
+ <p>Home_Network_5G - Excellent signal</p>
922
+ <button class="btn btn-secondary btn-sm" onclick="disconnectWifi()">
923
+ <i class="fas fa-power-off"></i> Disconnect
924
+ </button>
925
+ </div>
926
+ </div>
927
+ <div class="status-card connected">
928
+ <div class="status-icon">
929
+ <i class="fas fa-ethernet"></i>
930
+ </div>
931
+ <div class="status-info">
932
+ <h3>Ethernet Active</h3>
933
+ <p>enp3s0 - 1 Gbps link</p>
934
+ <button class="btn btn-secondary btn-sm" onclick="showToast('Ethernet cable connected', 'info')">
935
+ <i class="fas fa-info-circle"></i> Details
936
+ </button>
937
+ </div>
938
+ </div>
939
+ <div class="status-card disconnected">
940
+ <div class="status-icon">
941
+ <i class="fas fa-shield-alt"></i>
942
+ </div>
943
+ <div class="status-info">
944
+ <h3>VPN Disconnected</h3>
945
+ <p>No active VPN tunnel</p>
946
+ <button class="btn btn-primary btn-sm" onclick="switchPage('vpn')">
947
+ <i class="fas fa-connectdevelop"></i> Connect
948
+ </button>
949
+ </div>
950
+ </div>
951
+ </div>
952
+
953
+ <div class="quick-actions">
954
+ <div class="action-card" onclick="switchPage('wifi')">
955
+ <i class="fas fa-wifi"></i>
956
+ <h4>Scan WiFi</h4>
957
+ <p>Find networks</p>
958
+ </div>
959
+ <div class="action-card" onclick="openModal('hotspotModal')">
960
+ <i class="fas fa-broadcast-tower"></i>
961
+ <h4>Create Hotspot</h4>
962
+ <p>Share connection</p>
963
+ </div>
964
+ <div class="action-card" onclick="openModal('vpnModal')">
965
+ <i class="fas fa-plus-circle"></i>
966
+ <h4>Add VPN</h4>
967
+ <p>New connection</p>
968
+ </div>
969
+ <div class="action-card" onclick="refreshNetworks()">
970
+ <i class="fas fa-sync-alt"></i>
971
+ <h4>Refresh</h4>
972
+ <p>Update status</p>
973
+ </div>
974
+ </div>
975
+
976
+ <div class="card">
977
+ <div class="card-header">
978
+ <h3 class="card-title">Connection Statistics</h3>
979
+ </div>
980
+ <div class="ethernet-info">
981
+ <div class="info-item">
982
+ <label>Download Speed</label>
983
+ <span style="color: var(--success); font-weight: bold;">125.4 Mbps</span>
984
+ </div>
985
+ <div class="info-item">
986
+ <label>Upload Speed</label>
987
+ <span style="color: #2196f3; font-weight: bold;">45.2 Mbps</span>
988
+ </div>
989
+ <div class="info-item">
990
+ <label>Latency</label>
991
+ <span style="color: var(--warning); font-weight: bold;">12 ms</span>
992
+ </div>
993
+ <div class="info-item">
994
+ <label>Packet Loss</label>
995
+ <span style="color: var(--success); font-weight: bold;">0.0%</span>
996
+ </div>
997
+ </div>
998
+ </div>
999
+ </div>
1000
+
1001
+ <!-- WiFi Page -->
1002
+ <div class="page" id="wifi">
1003
+ <h2 class="page-title">WiFi Networks</h2>
1004
+ <p class="page-subtitle">Available wireless networks in your area</p>
1005
+
1006
+ <div class="card">
1007
+ <div class="card-header">
1008
+ <h3 class="card-title">Saved Networks</h3>
1009
+ <button class="btn btn-primary btn-sm" onclick="scanWifi()">
1010
+ <i class="fas fa-sync-alt"></i> Scan
1011
+ </button>
1012
+ </div>
1013
+ <div class="network-list" id="wifiList">
1014
+ <!-- Networks will be populated by JS -->
1015
+ </div>
1016
+ </div>
1017
+ </div>
1018
+
1019
+ <!-- Ethernet Page -->
1020
+ <div class="page" id="ethernet">
1021
+ <h2 class="page-title">Ethernet Connections</h2>
1022
+ <p class="page-subtitle">Wired network configuration</p>
1023
+
1024
+ <div class="card">
1025
+ <div class="card-header">
1026
+ <h3 class="card-title">Active Connection</h3>
1027
+ <span class="status-indicator" style="background: rgba(76, 175, 80, 0.15); border-color: rgba(76, 175, 80, 0.3);">
1028
+ <div class="status-dot"></div>
1029
+ <span>Connected</span>
1030
+ </span>
1031
+ </div>
1032
+ <div class="ethernet-info">
1033
+ <div class="info-item">
1034
+ <label>Interface</label>
1035
+ <span>enp3s0</span>
1036
+ </div>
1037
+ <div class="info-item">
1038
+ <label>IP Address</label>
1039
+ <span>192.168.1.105</span>
1040
+ </div>
1041
+ <div class="info-item">
1042
+ <label>Subnet Mask</label>
1043
+ <span>255.255.255.0</span>
1044
+ </div>
1045
+ <div class="info-item">
1046
+ <label>Gateway</label>
1047
+ <span>192.168.1.1</span>
1048
+ </div>
1049
+ <div class="info-item">
1050
+ <label>DNS Servers</label>
1051
+ <span>8.8.8.8, 8.8.4.4</span>
1052
+ </div>
1053
+ <div class="info-item">
1054
+ <label>MAC Address</label>
1055
+ <span>00:1A:2B:3C:4D:5E</span>
1056
+ </div>
1057
+ <div class="info-item">
1058
+ <label>Link Speed</label>
1059
+ <span>1000 Mbps (Full Duplex)</span>
1060
+ </div>
1061
+ <div class="info-item">
1062
+ <label>MTU</label>
1063
+ <span>1500</span>
1064
+ </div>
1065
+ </div>
1066
+ <div style="margin-top: 20px; display: flex; gap: 12px;">
1067
+ <button class="btn btn-secondary" onclick="renewIP()">
1068
+ <i class="fas fa-redo"></i> Renew IP
1069
+ </button>
1070
+ <button class="btn btn-secondary" onclick="openModal('ethernetModal')">
1071
+ <i class="fas fa-cog"></i> Configure
1072
+ </button>
1073
+ </div>
1074
+ </div>
1075
+
1076
+ <div class="card">
1077
+ <div class="card-header">
1078
+ <h3 class="card-title">Interface Statistics</h3>
1079
+ </div>
1080
+ <div class="ethernet-info">
1081
+ <div class="info-item">
1082
+ <label>Bytes Received</label>
1083
+ <span>2,547,892,341</span>
1084
+ </div>
1085
+ <div class="info-item">
1086
+ <label>Bytes Sent</label>
1087
+ <span>1,892,547,234</span>
1088
+ </div>
1089
+ <div class="info-item">
1090
+ <label>Packets Received</label>
1091
+ <span>18,492,734</span>
1092
+ </div>
1093
+ <div class="info-item">
1094
+ <label>Packets Sent</label>
1095
+ <span>12,847,291</span>
1096
+ </div>
1097
+ <div class="info-item">
1098
+ <label>RX Errors</label>
1099
+ <span style="color: var(--success);">0</span>
1100
+ </div>
1101
+ <div class="info-item">
1102
+ <label>TX Errors</label>
1103
+ <span style="color: var(--success);">0</span>
1104
+ </div>
1105
+ </div>
1106
+ </div>
1107
+ </div>
1108
+
1109
+ <!-- VPN Page -->
1110
+ <div class="page" id="vpn">
1111
+ <h2 class="page-title">VPN Connections</h2>
1112
+ <p class="page-subtitle">Manage your virtual private network connections</p>
1113
+
1114
+ <div class="card">
1115
+ <div class="card-header">
1116
+ <h3 class="card-title">VPN Tunnels</h3>
1117
+ <button class="btn btn-primary btn-sm" onclick="openModal('vpnModal')">
1118
+ <i class="fas fa-plus"></i> Add VPN
1119
+ </button>
1120
+ </div>
1121
+ <div class="vpn-list" id="vpnList">
1122
+ <!-- VPNs will be populated by JS -->
1123
+ </div>
1124
+ </div>
1125
+
1126
+ <div class="card">
1127
+ <div class="card-header">
1128
+ <h3 class="card-title">VPN Configuration</h3>
1129
+ </div>
1130
+ <div class="form-group">
1131
+ <label>VPN Type</label>
1132
+ <select id="vpnType">
1133
+ <option value="openvpn">OpenVPN</option>
1134
+ <option value="wireguard">WireGuard</option>
1135
+ <option value="pptp">PPTP</option>
1136
+ <option value="ipsec">IPSec/L2TP</option>
1137
+ </select>
1138
+ </div>
1139
+ <div class="form-group">
1140
+ <label>Gateway</label>
1141
+ <input type="text" placeholder="vpn.example.com">
1142
+ </div>
1143
+ <div class="form-group">
1144
+ <label>Authentication</label>
1145
+ <select>
1146
+ <option>Username/Password</option>
1147
+ <option>Certificate</option>
1148
+ <option>Pre-shared Key</option>
1149
+ </select>
1150
+ </div>
1151
+ </div>
1152
+ </div>
1153
+
1154
+ <!-- Hotspot Page -->
1155
+ <div class="page" id="hotspot">
1156
+ <h2 class="page-title">WiFi Hotspot</h2>
1157
+ <p class="page-subtitle">Share your internet connection with other devices</p>
1158
+
1159
+ <div class="card">
1160
+ <div class="card-header">
1161
+ <h3 class="card-title">Hotspot Status</h3>
1162
+ <label class="toggle-switch">
1163
+ <input type="checkbox" id="hotspotToggle" onchange="toggleHotspot()">
1164
+ <span class="toggle-slider"></span>
1165
+ </label>
1166
+ </div>
1167
+ <div id="hotspotInfo">
1168
+ <div class="form-group">
1169
+ <label>Network Name (SSID)</label>
1170
+ <input type="text" value="Ubuntu_Hotspot" id="ssidInput">
1171
+ </div>
1172
+ <div class="form-group">
1173
+ <label>Password</label>
1174
+ <input type="password" value="securepass123" id="passwordInput">
1175
+ </div>
1176
+ <div class="form-group">
1177
+ <label>Security</label>
1178
+ <select>
1179
+ <option>WPA2/WPA3</option>
1180
+ <option>WPA2 Only</option>
1181
+ <option>Open (No Password)</option>
1182
+ </select>
1183
+ </div>
1184
+ <div style="margin-top: 20px; padding: 15px; background: var(--bg-tertiary); border-radius: 10px;">
1185
+ <p style="margin-bottom: 10px;"><strong>Connected Devices:</strong> <span id="deviceCount">0</span></p>
1186
+ <p style="color: var(--text-secondary); font-size: 0.9rem;">
1187
+ <i class="fas fa-info-circle"></i>
1188
+ Your hotspot will use the currently active internet connection to share with other devices.
1189
+ </p>
1190
+ </div>
1191
+ </div>
1192
+ </div>
1193
+ </div>
1194
+
1195
+ <!-- Terminal Tools Page -->
1196
+ <div class="page" id="terminal">
1197
+ <h2 class="page-title">Network Tools</h2>
1198
+ <p class="page-subtitle">Command-line diagnostic tools</p>
1199
+
1200
+ <div class="card">
1201
+ <div class="card-header">
1202
+ <h3 class="card-title">Quick Commands</h3>
1203
+ </div>
1204
+ <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;">
1205
+ <button class="btn btn-secondary" onclick="runCommand('ping')">
1206
+ <i class="fas fa-crosshairs"></i> Ping
1207
+ </button>
1208
+ <button class="btn btn-secondary" onclick="runCommand('traceroute')">
1209
+ <i class="fas fa-route"></i> Traceroute
1210
+ </button>
1211
+ <button class="btn btn-secondary" onclick="runCommand('dns')">
1212
+ <i class="fas fa-globe"></i> DNS Lookup
1213
+ </button>
1214
+ <button class="btn btn-secondary" onclick="runCommand('speedtest')">
1215
+ <i class="fas fa-tachometer-alt"></i> Speed Test
1216
+ </button>
1217
+ <button class="btn btn-secondary" onclick="runCommand('netstat')">
1218
+ <i class="fas fa-list"></i> Netstat
1219
+ </button>
1220
+ <button class="btn btn-secondary" onclick="runCommand('arp')">
1221
+ <i class="fas fa-network-wired"></i> ARP Table
1222
+ </button>
1223
+ </div>
1224
+ <div class="form-group">
1225
+ <label>Custom Command</label>
1226
+ <div style="display: flex; gap: 10px;">
1227
+ <input type="text" id="customCmd" placeholder="Enter command (e.g., ifconfig, ip addr)">
1228
+ <button class="btn btn-primary" onclick="runCustomCommand()">
1229
+ <i class="fas fa-play"></i> Run
1230
+ </button>
1231
+ </div>
1232
+ </div>
1233
+ </div>
1234
+
1235
+ <div class="card">
1236
+ <div class="card-header">
1237
+ <h3 class="card-title">Terminal Output</h3>
1238
+ <button class="btn btn-secondary btn-sm" onclick="clearTerminal()">
1239
+ <i class="fas fa-trash"></i> Clear
1240
+ </button>
1241
+ </div>
1242
+ <div class="terminal" id="terminalOutput">
1243
+ <div class="terminal-line">
1244
+ <span class="prompt">user@ubuntu:~$</span>
1245
+ <span class="command">nmcli general status</span>
1246
+ </div>
1247
+ <div class="terminal-line">
1248
+ <span class="output">STATE CONNECTIVITY WIFI-HW WIFI WWAN-HW WWAN </span>
1249
+ </div>
1250
+ <div class="terminal-line">
1251
+ <span class="output">connected full enabled enabled enabled enabled </span>
1252
+ </div>
1253
+ <div class="terminal-line">
1254
+ <span class="prompt">user@ubuntu:~$</span>
1255
+ </div>
1256
+ </div>
1257
+ </div>
1258
+ </div>
1259
+ </main>
1260
+ </div>
1261
+
1262
+ <!-- Modals -->
1263
+ <!-- WiFi Connect Modal -->
1264
+ <div class="modal-overlay" id="wifiConnectModal">
1265
+ <div class="modal">
1266
+ <div class="modal-header">
1267
+ <h2>Connect to WiFi</h2>
1268
+ <button class="modal-close" onclick="closeModal('wifiConnectModal')">
1269
+ <i class="fas fa-times"></i>
1270
+ </button>
1271
+ </div>
1272
+ <div class="form-group">
1273
+ <label>Network Name</label>
1274
+ <input type="text" id="connectSsid" readonly>
1275
+ </div>
1276
+ <div class="form-group">
1277
+ <label>Password</label>
1278
+ <input type="password" id="connectPassword" placeholder="Enter network password">
1279
+ </div>
1280
+ <div class="form-group">
1281
+ <label>
1282
+ <input type="checkbox" id="showPassword"> Show password
1283
+ </label>
1284
+ </div>
1285
+ <div class="modal-actions">
1286
+ <button class="btn btn-secondary" onclick="closeModal('wifiConnectModal')">Cancel</button>
1287
+ <button class="btn btn-primary" onclick="connectToWifi()">Connect</button>
1288
+ </div>
1289
+ </div>
1290
+ </div>
1291
+
1292
+ <!-- Add VPN Modal -->
1293
+ <div class="modal-overlay" id="vpnModal">
1294
+ <div class="modal">
1295
+ <div class="modal-header">
1296
+ <h2>Add VPN Connection</h2>
1297
+ <button class="modal-close" onclick="closeModal('vpnModal')">
1298
+ <i class="fas fa-times"></i>
1299
+ </button>
1300
+ </div>
1301
+ <div class="form-group">
1302
+ <label>Connection Name</label>
1303
+ <input type="text" placeholder="My VPN">
1304
+ </div>
1305
+ <div class="form-group">
1306
+ <label>Gateway</label>
1307
+ <input type="text" placeholder="vpn.example.com">
1308
+ </div>
1309
+ <div class="form-group">
1310
+ <label>VPN Type</label>
1311
+ <select>
1312
+ <option>OpenVPN</option>
1313
+ <option>WireGuard</option>
1314
+ <option>PPTP</option>
1315
+ </select>
1316
+ </div>
1317
+ <div class="form-group">
1318
+ <label>Username</label>
1319
+ <input type="text" placeholder="your-username">
1320
+ </div>
1321
+ <div class="form-group">
1322
+ <label>Password</label>
1323
+ <input type="password" placeholder="••••••••">
1324
+ </div>
1325
+ <div class="modal-actions">
1326
+ <button class="btn btn-secondary" onclick="closeModal('vpnModal')">Cancel</button>
1327
+ <button class="btn btn-primary" onclick="addVpn()">Add VPN</button>
1328
+ </div>
1329
+ </div>
1330
+ </div>
1331
+
1332
+ <!-- Hotspot Modal -->
1333
+ <div class="modal-overlay" id="hotspotModal">
1334
+ <div class="modal">
1335
+ <div class="modal-header">
1336
+ <h2>Create Hotspot</h2>
1337
+ <button class="modal-close" onclick="closeModal('hotspotModal')">
1338
+ <i class="fas fa-times"></i>
1339
+ </button>
1340
+ </div>
1341
+ <div class="form-group">
1342
+ <label>Hotspot Name</label>
1343
+ <input type="text" value="Ubuntu_Hotspot">
1344
+ </div>
1345
+ <div class="form-group">
1346
+ <label>Password</label>
1347
+ <input type="password" value="securepass123">
1348
+ </div>
1349
+ <div class="modal-actions">
1350
+ <button class="btn btn-secondary" onclick="closeModal('hotspotModal')">