Hugging Face's logo

Spaces:
udd542
/
anycoder-95d68642
Running

App Files Community
udd542 commited on
Commit
640bb6f
·
verified ·
1 Parent(s): 7469074

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +516 -415
index.html CHANGED
@@ -3,25 +3,24 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Nexus | Social Identity Manager</title>
7
  <!-- Importing FontAwesome for Icons -->
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
 
10
  <style>
11
  :root {
12
- /* Color Palette - Cyberpunk / Dark Tech Theme */
13
- --bg-dark: #050505;
14
- --bg-panel: #0f1115;
15
- --bg-panel-transparent: rgba(15, 17, 21, 0.85);
16
- --primary: #00ff9d; /* Neon Green */
17
- --primary-dim: rgba(0, 255, 157, 0.1);
18
- --secondary: #00d2ff; /* Cyan */
19
- --accent: #ff0055; /* Error/Alert Red */
20
- --text-main: #e0e0e0;
21
- --text-muted: #858585;
22
  --border-color: #333;
23
- --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
24
  --font-mono: 'Courier New', Courier, monospace;
 
25
  }
26
 
27
  * {
@@ -31,56 +30,130 @@
31
  }
32
 
33
  body {
34
- background-color: var(--bg-dark);
35
- color: var(--text-main);
36
- font-family: var(--font-main);
37
  height: 100vh;
38
  display: flex;
39
  flex-direction: column;
40
  overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  }
42
 
43
- /* --- Header --- */
44
  header {
45
- height: 60px;
46
  background: var(--bg-panel);
47
  border-bottom: 1px solid var(--border-color);
48
  display: flex;
49
  align-items: center;
50
  justify-content: space-between;
51
- padding: 0 20px;
52
- z-index: 10;
 
53
  }
54
 
55
- .brand {
56
- font-size: 1.2rem;
57
- font-weight: 700;
58
- letter-spacing: 1px;
59
- color: var(--primary);
60
  display: flex;
61
  align-items: center;
62
- gap: 10px;
63
  }
64
 
65
- .brand i {
66
- font-size: 1.4rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  }
68
 
69
  .header-links {
70
- font-size: 0.9rem;
 
 
 
71
  }
72
 
73
  .header-links a {
74
- color: var(--text-muted);
75
  text-decoration: none;
76
- transition: color 0.3s;
77
  }
78
 
79
  .header-links a:hover {
80
- color: var(--primary);
 
81
  }
82
 
83
- /* --- Layout --- */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
84
  .main-container {
85
  display: flex;
86
  flex: 1;
@@ -89,256 +162,226 @@
89
 
90
  /* --- Sidebar --- */
91
  aside {
92
- width: 250px;
93
  background: var(--bg-panel);
94
  border-right: 1px solid var(--border-color);
95
  display: flex;
96
  flex-direction: column;
97
  padding: 20px 0;
98
- transition: transform 0.3s ease;
99
  }
100
 
101
  .nav-item {
102
  padding: 15px 25px;
103
  cursor: pointer;
104
- color: var(--text-muted);
105
  display: flex;
106
  align-items: center;
107
- gap: 12px;
108
- transition: all 0.2s;
109
  border-left: 3px solid transparent;
 
 
110
  }
111
 
112
  .nav-item:hover {
113
- background: rgba(255, 255, 255, 0.05);
114
- color: var(--text-main);
 
115
  }
116
 
117
  .nav-item.active {
118
  background: var(--primary-dim);
119
- color: var(--primary);
120
- border-left-color: var(--primary);
 
121
  }
 
 
 
 
 
 
122
 
123
  /* --- Content Area --- */
124
  main {
125
  flex: 1;
126
  padding: 30px;
127
  overflow-y: auto;
128
- background-image:
129
- radial-gradient(circle at 10% 20%, rgba(0, 255, 157, 0.03) 0%, transparent 20%),
130
- radial-gradient(circle at 90% 80%, rgba(0, 210, 255, 0.03) 0%, transparent 20%);
131
  }
132
 
133
  .section {
134
  display: none;
135
- animation: fadeIn 0.4s ease;
 
 
136
  }
137
 
138
  .section.active {
139
  display: block;
140
- }
141
-
142
- @keyframes fadeIn {
143
- from { opacity: 0; transform: translateY(10px); }
144
- to { opacity: 1; transform: translateY(0); }
145
  }
146
 
147
  h2 {
148
- font-size: 1.8rem;
149
  margin-bottom: 20px;
150
- color: var(--text-main);
151
  border-bottom: 1px solid var(--border-color);
152
  padding-bottom: 10px;
 
 
153
  }
154
 
155
- /* --- Dashboard Cards --- */
156
- .dashboard-grid {
157
  display: grid;
158
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
159
  gap: 20px;
160
  margin-bottom: 30px;
161
  }
162
 
163
- .card {
164
- background: var(--bg-panel);
165
  border: 1px solid var(--border-color);
166
  padding: 20px;
167
- border-radius: 8px;
168
  position: relative;
169
- overflow: hidden;
170
  }
171
 
172
- .card::before {
173
  content: '';
174
  position: absolute;
175
- top: 0;
176
- left: 0;
177
- width: 100%;
178
- height: 2px;
179
- background: linear-gradient(90deg, var(--primary), var(--secondary));
 
 
 
 
 
 
 
180
  }
181
 
182
- .card h3 {
183
- font-size: 0.9rem;
184
- color: var(--text-muted);
185
- margin-bottom: 10px;
186
  text-transform: uppercase;
 
187
  }
188
 
189
- .card .value {
190
- font-size: 2rem;
191
- font-weight: 700;
192
- color: var(--text-main);
 
193
  }
194
 
195
- .card .trend {
196
  font-size: 0.8rem;
197
- margin-top: 5px;
198
  }
199
- .trend.up { color: var(--primary); }
200
- .trend.down { color: var(--accent); }
201
 
202
- /* --- Profile & Privacy Tool --- */
203
- .privacy-tool-container {
204
- display: grid;
205
- grid-template-columns: 1fr 1fr;
206
- gap: 30px;
207
- }
208
-
209
- .profile-preview {
210
- background: var(--bg-panel);
211
- border: 1px solid var(--border-color);
212
- border-radius: 8px;
213
  padding: 20px;
214
- text-align: center;
 
 
 
215
  }
216
-
217
- .avatar {
218
- width: 100px;
219
- height: 100px;
220
- border-radius: 50%;
221
- background: #333;
222
- margin: 0 auto 15px;
223
- border: 2px solid var(--primary);
224
  display: flex;
225
- align-items: center;
226
- justify-content: center;
227
- font-size: 2rem;
228
- color: #fff;
229
  }
230
 
231
- .profile-stats {
232
- display: flex;
233
- justify-content: space-around;
234
- margin-top: 20px;
235
- border-top: 1px solid var(--border-color);
236
- padding-top: 15px;
237
  }
238
 
239
- .stat-box strong { display: block; font-size: 1.2rem; }
240
- .stat-box span { font-size: 0.8rem; color: var(--text-muted); }
241
-
242
- .privacy-controls {
243
- background: var(--bg-panel);
244
- border: 1px solid var(--border-color);
245
- border-radius: 8px;
246
- padding: 20px;
247
  }
248
-
249
- .control-group {
250
- margin-bottom: 20px;
251
- display: flex;
252
- justify-content: space-between;
253
- align-items: center;
254
  }
255
-
256
- .switch {
257
- position: relative;
258
- display: inline-block;
259
- width: 50px;
260
- height: 24px;
261
- }
262
-
263
- .switch input { opacity: 0; width: 0; height: 0; }
264
-
265
- .slider {
266
- position: absolute;
267
- cursor: pointer;
268
- top: 0; left: 0; right: 0; bottom: 0;
269
- background-color: #333;
270
- transition: .4s;
271
- border-radius: 24px;
272
  }
273
 
274
- .slider:before {
275
- position: absolute;
276
- content: "";
277
- height: 16px;
278
- width: 16px;
279
- left: 4px;
280
- bottom: 4px;
281
- background-color: white;
282
- transition: .4s;
283
- border-radius: 50%;
284
  }
285
 
286
- input:checked + .slider { background-color: var(--primary); }
287
- input:checked + .slider:before { transform: translateX(26px); }
288
-
289
- /* --- Console / Logs --- */
290
- .console-window {
291
- background: #000;
292
- border: 1px solid var(--primary);
293
- border-radius: 4px;
294
  font-family: var(--font-mono);
295
- padding: 15px;
296
- height: 300px;
297
- overflow-y: auto;
298
- color: var(--primary);
299
- font-size: 0.9rem;
300
- box-shadow: 0 0 10px rgba(0, 255, 157, 0.1);
301
- }
302
-
303
- .console-line {
304
- margin-bottom: 5px;
305
- display: block;
306
  }
307
- .console-line.error { color: var(--accent); }
308
- .console-line.warn { color: #ffae00; }
309
- .console-line span.timestamp { color: #555; margin-right: 10px; }
310
 
311
- .console-controls {
312
- margin-top: 10px;
313
- display: flex;
314
- gap: 10px;
 
 
315
  }
316
 
317
- button {
318
- background: var(--bg-panel);
319
- color: var(--text-main);
320
- border: 1px solid var(--border-color);
321
- padding: 8px 16px;
 
322
  cursor: pointer;
323
- border-radius: 4px;
324
- font-family: var(--font-main);
325
- transition: all 0.2s;
 
 
326
  }
327
 
328
- button:hover {
329
- border-color: var(--primary);
330
- color: var(--primary);
 
331
  }
332
 
333
- button.primary {
334
- background: var(--primary);
335
- color: #000;
336
- border: none;
337
- font-weight: 600;
338
  }
339
- button.primary:hover {
340
- background: #00cc7d;
341
- color: #000;
 
342
  }
343
 
344
  /* --- Mobile Responsiveness --- */
@@ -350,23 +393,16 @@
350
  width: 100%;
351
  flex-direction: row;
352
  overflow-x: auto;
353
- padding: 10px;
354
  border-bottom: 1px solid var(--border-color);
355
  border-right: none;
 
356
  }
357
- .nav-item {
358
- white-space: nowrap;
359
- padding: 10px 15px;
360
- border-left: none;
361
- border-bottom: 3px solid transparent;
362
- }
363
- .nav-item.active {
364
- border-left: none;
365
- border-bottom-color: var(--primary);
366
- }
367
- .privacy-tool-container {
368
  grid-template-columns: 1fr;
369
  }
 
 
 
370
  }
371
  </style>
372
  </head>
@@ -374,29 +410,36 @@
374
 
375
  <!-- Header -->
376
  <header>
377
- <div class="brand">
378
- <i class="fa-solid fa-shield-halved"></i>
379
- NEXUS // ID MANAGER
380
  </div>
 
381
  <div class="header-links">
382
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
 
 
 
 
 
 
383
  </div>
384
  </header>
385
 
386
  <div class="main-container">
387
- <!-- Sidebar Navigation -->
388
  <aside>
389
- <div class="nav-item active" onclick="showSection('dashboard', this)">
390
- <i class="fa-solid fa-chart-line"></i> Dashboard
391
  </div>
392
- <div class="nav-item" onclick="showSection('profile', this)">
393
- <i class="fa-solid fa-user-lock"></i> Profile & Privacy
394
  </div>
395
- <div class="nav-item" onclick="showSection('console', this)">
396
- <i class="fa-solid fa-terminal"></i> System Console
397
  </div>
398
- <div class="nav-item" onclick="showSection('settings', this)">
399
- <i class="fa-solid fa-gears"></i> Settings
400
  </div>
401
  </aside>
402
 
@@ -404,167 +447,112 @@
404
  <main>
405
  <!-- DASHBOARD SECTION -->
406
  <section id="dashboard" class="section active">
407
- <h2>Overview</h2>
408
- <div class="dashboard-grid">
409
- <div class="card">
410
- <h3>Profile Status</h3>
411
- <div class="value">LOCKED</div>
412
- <div class="trend up"><i class="fa-solid fa-lock"></i> Secure</div>
 
 
 
 
413
  </div>
414
- <div class="card">
415
- <h3>Data Exposure Score</h3>
416
- <div class="value">12%</div>
417
- <div class="trend down"><i class="fa-solid fa-arrow-trend-down"></i> Low Risk</div>
 
 
 
 
418
  </div>
419
- <div class="card">
420
- <h3>Active Sessions</h3>
421
- <div class="value">3</div>
422
- <div class="trend warn"><i class="fa-solid fa-triangle-exclamation"></i> Check Console</div>
 
423
  </div>
424
  </div>
425
 
426
- <div class="card">
427
- <h3>Recent Activity Log</h3>
428
- <div style="margin-top: 15px; color: var(--text-muted); font-size: 0.9rem;">
429
- <div style="padding: 8px 0; border-bottom: 1px solid #222;">
430
- <span style="color: var(--primary);">[SUCCESS]</span> Privacy audit completed.
431
- </div>
432
- <div style="padding: 8px 0; border-bottom: 1px solid #222;">
433
- <span style="color: var(--secondary);">[INFO]</span> Profile visibility updated to "Private".
434
- </div>
435
- <div style="padding: 8px 0;">
436
- <span style="color: var(--accent);">[ALERT]</span> New login detected from IP 192.168.x.x
437
- </div>
438
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
439
  </div>
440
  </section>
441
 
442
- <!-- PROFILE & PRIVACY SECTION -->
443
- <section id="profile" class="section">
444
- <h2>Identity & Privacy Controls</h2>
445
- <div class="privacy-tool-container">
446
- <!-- Preview -->
447
- <div class="profile-preview">
448
- <div class="avatar"><i class="fa-solid fa-user-astronaut"></i></div>
449
- <h3>Operative_01</h3>
450
- <p style="color: var(--text-muted); font-size: 0.9rem; margin-top: 5px;">ID: #8842-AX-99</p>
451
-
452
- <div class="profile-stats">
453
- <div class="stat-box">
454
- <strong>240</strong>
455
- <span>Posts</span>
456
- </div>
457
- <div class="stat-box">
458
- <strong>12.5k</strong>
459
- <span>Reach</span>
460
- </div>
461
- <div class="stat-box">
462
- <strong>850</strong>
463
- <span>Connections</span>
464
- </div>
465
- </div>
466
- <div style="margin-top: 20px;">
467
- <button class="primary">Edit Avatar</button>
468
- </div>
469
  </div>
470
-
471
- <!-- Controls -->
472
- <div class="privacy-controls">
473
- <h3 style="margin-bottom: 20px; color: var(--primary);">Security Protocols</h3>
474
-
475
- <div class="control-group">
476
- <div>
477
- <strong>Lock Profile</strong>
478
- <div style="font-size: 0.8rem; color: var(--text-muted);">Prevent non-connections from seeing details</div>
479
- </div>
480
- <label class="switch">
481
- <input type="checkbox" checked onchange="logConsole('Profile Lock status toggled')">
482
- <span class="slider"></span>
483
- </label>
484
- </div>
485
-
486
- <div class="control-group">
487
- <div>
488
- <strong>Hide Activity Status</strong>
489
- <div style="font-size: 0.8rem; color: var(--text-muted);">Conceal "Online" status</div>
490
- </div>
491
- <label class="switch">
492
- <input type="checkbox" checked onchange="logConsole('Activity Status hidden')">
493
- <span class="slider"></span>
494
- </label>
495
- </div>
496
-
497
- <div class="control-group">
498
- <div>
499
- <strong>Two-Factor Auth</strong>
500
- <div style="font-size: 0.8rem; color: var(--text-muted);">Require code on login</div>
501
- </div>
502
- <label class="switch">
503
- <input type="checkbox" checked onchange="logConsole('2FA Verification re-verified')">
504
- <span class="slider"></span>
505
- </label>
506
- </div>
507
-
508
- <div class="control-group">
509
- <div>
510
- <strong>Data Scraping Protection</strong>
511
- <div style="font-size: 0.8rem; color: var(--text-muted);">Block automated bots</div>
512
- </div>
513
- <label class="switch">
514
- <input type="checkbox" onchange="logConsole('Bot protection settings updated')">
515
- <span class="slider"></span>
516
- </label>
517
- </div>
518
-
519
- <div style="margin-top: 30px; border-top: 1px solid var(--border-color); padding-top: 20px;">
520
- <button onclick="runAudit()" class="primary" style="width: 100%;">
521
- <i class="fa-solid fa-magnifying-glass"></i> Run Privacy Audit
522
- </button>
523
- </div>
524
  </div>
525
  </div>
526
- </section>
527
-
528
- <!-- CONSOLE SECTION -->
529
- <section id="console" class="section">
530
- <h2>System Console</h2>
531
- <p style="color: var(--text-muted); margin-bottom: 15px;">Real-time JavaScript execution logs and system events.</p>
532
 
533
- <div class="console-window" id="consoleOutput">
534
- <span class="console-line"><span class="timestamp">[SYSTEM]</span> Nexus Environment initialized...</span>
535
- <span class="console-line"><span class="timestamp">[SYSTEM]</span> Connecting to secure server...</span>
536
- <span class="console-line"><span class="timestamp">[SUCCESS]</span> Connection established. Protocol: HTTPS</span>
537
- <span class="console-line"><span class="timestamp">[INFO]</span> Waiting for user input...</span>
538
  </div>
 
539
 
540
- <div class="console-controls">
541
- <button onclick="clearConsole()">Clear Logs</button>
542
- <button onclick="simulateTraffic()">Simulate Traffic</button>
543
- <button class="primary" onclick="exportLogs()">Export Logs</button>
 
 
 
 
 
 
544
  </div>
545
  </section>
546
 
547
- <!-- SETTINGS SECTION -->
548
- <section id="settings" class="section">
549
- <h2>Settings</h2>
550
- <div class="card">
551
- <div class="control-group">
552
- <strong>Dark Mode</strong>
553
- <label class="switch">
554
- <input type="checkbox" checked disabled>
555
- <span class="slider"></span>
556
- </label>
557
- </div>
558
- <div class="control-group">
559
- <strong>Notifications</strong>
560
- <label class="switch">
561
- <input type="checkbox">
562
- <span class="slider"></span>
563
- </label>
564
- </div>
565
- <div style="margin-top: 20px;">
566
- <button class="primary">Save Changes</button>
567
- </div>
568
  </div>
569
  </section>
570
  </main>
@@ -572,81 +560,194 @@
572
 
573
  <script>
574
  // --- Navigation Logic ---
575
- function showSection(sectionId, navElement) {
576
- // Hide all sections
577
- document.querySelectorAll('.section').forEach(sec => {
578
- sec.classList.remove('active');
579
- });
580
- // Show target section
581
- document.getElementById(sectionId).classList.add('active');
 
582
 
583
- // Update Nav State
584
- document.querySelectorAll('.nav-item').forEach(item => {
585
- item.classList.remove('active');
586
- });
587
- navElement.classList.add('active');
 
 
 
588
 
589
- logConsole(`Navigated to view: [${sectionId.toUpperCase()}]`);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
590
  }
591
 
592
- // --- Console Logic ---
593
- const consoleOutput = document.getElementById('consoleOutput');
 
 
 
594
 
595
- function getTimestamp() {
596
- const now = new Date();
597
- return now.toLocaleTimeString('en-US', { hour12: false });
598
  }
599
 
600
- function logConsole(message, type = 'info') {
601
- const line = document.createElement('span');
602
- line.className = `console-line ${type}`;
603
- line.innerHTML = `<span class="timestamp">[${getTimestamp()}]</span> ${message}`;
604
- consoleOutput.appendChild(line);
605
- consoleOutput.scrollTop = consoleOutput.scrollHeight; // Auto scroll
 
 
 
 
 
 
606
  }
607
 
608
- function clearConsole() {
609
- consoleOutput.innerHTML = '';
610
- logConsole('Console logs cleared.', 'warn');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
611
  }
612
 
613
- function exportLogs() {
614
- logConsole('Exporting logs to local storage...', 'info');
615
- setTimeout(() => {
616
- logConsole('Export complete: logs_backup.json', 'success');
617
- }, 1000);
 
 
618
  }
619
 
620
- // --- Feature Logic ---
621
- function runAudit() {
622
- logConsole('Initializing Privacy Audit Protocol...', 'info');
623
 
624
- let progress = 0;
625
- const interval = setInterval(() => {
626
- progress += 20;
627
- logConsole(`Scanning user data nodes... ${progress}%`);
628
-
629
- if (progress >= 100) {
630
- clearInterval(interval);
631
- logConsole('Audit Complete. No vulnerabilities found.', 'success');
632
- alert("Audit Complete: Your profile is secure.");
 
 
 
 
 
 
 
 
 
 
633
  }
634
- }, 500);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
635
  }
636
 
637
- function simulateTraffic() {
638
- logConsole('Simulating incoming connection requests...', 'warn');
639
- setTimeout(() => {
640
- logConsole('Packet trace: 192.168.0.1 -> ALLOWED', 'info');
641
- logConsole('Packet trace: 10.0.0.5 -> BLOCKED (Suspicious)', 'error');
642
- }, 800);
643
- }
644
 
645
  // --- Initialization ---
646
  window.onload = () => {
647
- logConsole('System Ready. Welcome, Operative.');
 
 
648
  };
649
 
 
 
650
  </script>
651
  </body>
652
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>U X HACKER | Black Box AI Interface</title>
7
  <!-- Importing FontAwesome for Icons -->
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
 
10
  <style>
11
  :root {
12
+ --bg-black: #050505;
13
+ --bg-panel: #0a0a0a;
14
+ --bg-panel-light: #111111;
15
+ --primary-green: #00ff41;
16
+ --primary-dim: rgba(0, 255, 65, 0.1);
17
+ --accent-pink: #ff0055; /* The "Blush" */
18
+ --accent-white: #ffffff;
19
+ --text-gray: #888;
 
 
20
  --border-color: #333;
21
+ --scanline-color: rgba(0, 0, 0, 0.5);
22
  --font-mono: 'Courier New', Courier, monospace;
23
+ --font-ui: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
24
  }
25
 
26
  * {
 
30
  }
31
 
32
  body {
33
+ background-color: var(--bg-black);
34
+ color: var(--primary-green);
35
+ font-family: var(--font-mono);
36
  height: 100vh;
37
  display: flex;
38
  flex-direction: column;
39
  overflow: hidden;
40
+ /* CRT Scanline Effect */
41
+ background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
42
+ background-size: 100% 2px, 3px 100%;
43
+ }
44
+
45
+ /* --- Scrollbar --- */
46
+ ::-webkit-scrollbar {
47
+ width: 8px;
48
+ }
49
+ ::-webkit-scrollbar-track {
50
+ background: var(--bg-black);
51
+ }
52
+ ::-webkit-scrollbar-thumb {
53
+ background: var(--border-color);
54
+ border: 1px solid var(--primary-green);
55
  }
56
 
57
+ /* --- Header & Logo --- */
58
  header {
59
+ height: 70px;
60
  background: var(--bg-panel);
61
  border-bottom: 1px solid var(--border-color);
62
  display: flex;
63
  align-items: center;
64
  justify-content: space-between;
65
+ padding: 0 25px;
66
+ box-shadow: 0 0 15px rgba(0, 255, 65, 0.05);
67
+ z-index: 100;
68
  }
69
 
70
+ .logo-container {
 
 
 
 
71
  display: flex;
72
  align-items: center;
73
+ perspective: 500px;
74
  }
75
 
76
+ .logo-text {
77
+ font-size: 1.8rem;
78
+ font-weight: 900;
79
+ letter-spacing: 2px;
80
+ color: var(--accent-white);
81
+ text-transform: uppercase;
82
+ position: relative;
83
+ /* 3D Text Shadow Layering */
84
+ text-shadow:
85
+ 0 1px 0 #ccc,
86
+ 0 2px 0 #c9c9c9,
87
+ 0 3px 0 #bbb,
88
+ 0 4px 0 #b9b9b9,
89
+ 0 5px 0 #aaa,
90
+ 0 6px 1px rgba(0,0,0,.1),
91
+ 0 0 5px rgba(0,0,0,.1),
92
+ 0 1px 3px rgba(0,0,0,.3),
93
+ 0 3px 5px rgba(0,0,0,.2),
94
+ 0 5px 10px rgba(0,0,0,.25),
95
+ 0 10px 10px rgba(0,0,0,.2),
96
+ 0 20px 20px rgba(0,0,0,.15);
97
+ animation: shine 3s infinite linear;
98
+ }
99
+
100
+ .logo-blush {
101
+ color: var(--accent-white);
102
+ transition: all 0.5s ease;
103
+ }
104
+
105
+ /* The Blushing Effect Animation */
106
+ @keyframes shine {
107
+ 0%, 100% {
108
+ color: var(--accent-white);
109
+ text-shadow: 0 0 10px rgba(255,255,255,0.1), 0 0 20px var(--accent-pink);
110
+ }
111
+ 50% {
112
+ color: #ffcccc;
113
+ text-shadow: 0 0 20px rgba(255,255,255,0.8), 0 0 40px var(--accent-pink);
114
+ }
115
  }
116
 
117
  .header-links {
118
+ display: flex;
119
+ align-items: center;
120
+ gap: 20px;
121
+ font-size: 0.8rem;
122
  }
123
 
124
  .header-links a {
125
+ color: var(--text-gray);
126
  text-decoration: none;
127
+ transition: 0.3s;
128
  }
129
 
130
  .header-links a:hover {
131
+ color: var(--primary-green);
132
+ text-shadow: 0 0 8px var(--primary-green);
133
  }
134
 
135
+ .status-indicator {
136
+ display: flex;
137
+ align-items: center;
138
+ gap: 8px;
139
+ color: var(--primary-green);
140
+ font-weight: bold;
141
+ }
142
+
143
+ .blink {
144
+ width: 10px;
145
+ height: 10px;
146
+ background-color: var(--primary-green);
147
+ border-radius: 50%;
148
+ box-shadow: 0 0 10px var(--primary-green);
149
+ animation: blinker 1.5s linear infinite;
150
+ }
151
+
152
+ @keyframes blinker {
153
+ 50% { opacity: 0; }
154
+ }
155
+
156
+ /* --- Main Layout --- */
157
  .main-container {
158
  display: flex;
159
  flex: 1;
 
162
 
163
  /* --- Sidebar --- */
164
  aside {
165
+ width: 260px;
166
  background: var(--bg-panel);
167
  border-right: 1px solid var(--border-color);
168
  display: flex;
169
  flex-direction: column;
170
  padding: 20px 0;
 
171
  }
172
 
173
  .nav-item {
174
  padding: 15px 25px;
175
  cursor: pointer;
176
+ color: var(--text-gray);
177
  display: flex;
178
  align-items: center;
179
+ gap: 15px;
180
+ transition: all 0.3s;
181
  border-left: 3px solid transparent;
182
+ font-size: 0.9rem;
183
+ position: relative;
184
  }
185
 
186
  .nav-item:hover {
187
+ background: var(--bg-panel-light);
188
+ color: var(--accent-white);
189
+ padding-left: 30px;
190
  }
191
 
192
  .nav-item.active {
193
  background: var(--primary-dim);
194
+ color: var(--primary-green);
195
+ border-left-color: var(--primary-green);
196
+ box-shadow: 0 0 15px var(--primary-dim);
197
  }
198
+
199
+ .nav-item.active i {
200
+ animation: spin 4s linear infinite;
201
+ }
202
+
203
+ @keyframes spin { 100% { transform: rotate(360deg); } }
204
 
205
  /* --- Content Area --- */
206
  main {
207
  flex: 1;
208
  padding: 30px;
209
  overflow-y: auto;
210
+ position: relative;
 
 
211
  }
212
 
213
  .section {
214
  display: none;
215
+ opacity: 0;
216
+ transform: translateY(20px);
217
+ transition: opacity 0.5s ease, transform 0.5s ease;
218
  }
219
 
220
  .section.active {
221
  display: block;
222
+ opacity: 1;
223
+ transform: translateY(0);
 
 
 
224
  }
225
 
226
  h2 {
227
+ font-size: 1.5rem;
228
  margin-bottom: 20px;
229
+ color: var(--accent-white);
230
  border-bottom: 1px solid var(--border-color);
231
  padding-bottom: 10px;
232
+ text-transform: uppercase;
233
+ letter-spacing: 1px;
234
  }
235
 
236
+ /* --- Dashboard Grid --- */
237
+ .grid-container {
238
  display: grid;
239
+ grid-template-columns: repeat(3, 1fr);
240
  gap: 20px;
241
  margin-bottom: 30px;
242
  }
243
 
244
+ .panel {
245
+ background: rgba(10, 10, 10, 0.8);
246
  border: 1px solid var(--border-color);
247
  padding: 20px;
248
+ border-radius: 4px;
249
  position: relative;
250
+ backdrop-filter: blur(5px);
251
  }
252
 
253
+ .panel::before {
254
  content: '';
255
  position: absolute;
256
+ top: -1px; left: -1px;
257
+ width: 10px; height: 10px;
258
+ border-top: 2px solid var(--primary-green);
259
+ border-left: 2px solid var(--primary-green);
260
+ }
261
+ .panel::after {
262
+ content: '';
263
+ position: absolute;
264
+ bottom: -1px; right: -1px;
265
+ width: 10px; height: 10px;
266
+ border-bottom: 2px solid var(--primary-green);
267
+ border-right: 2px solid var(--primary-green);
268
  }
269
 
270
+ .panel h3 {
271
+ font-size: 0.8rem;
272
+ color: var(--text-gray);
 
273
  text-transform: uppercase;
274
+ margin-bottom: 15px;
275
  }
276
 
277
+ .metric-value {
278
+ font-size: 2.5rem;
279
+ font-weight: bold;
280
+ color: var(--accent-white);
281
+ margin-bottom: 5px;
282
  }
283
 
284
+ .metric-sub {
285
  font-size: 0.8rem;
286
+ color: var(--accent-pink);
287
  }
 
 
288
 
289
+ /* --- Black Box AI Terminal --- */
290
+ .terminal-container {
291
+ height: 500px;
292
+ background: #000;
293
+ border: 1px solid var(--primary-green);
 
 
 
 
 
 
294
  padding: 20px;
295
+ font-family: var(--font-mono);
296
+ overflow-y: auto;
297
+ position: relative;
298
+ box-shadow: inset 0 0 20px rgba(0,0,0,0.9);
299
  }
300
+
301
+ .terminal-header {
302
+ position: absolute;
303
+ top: 0; left: 0; right: 0;
304
+ background: var(--bg-panel-light);
305
+ padding: 5px 15px;
306
+ border-bottom: 1px solid var(--border-color);
 
307
  display: flex;
308
+ justify-content: space-between;
309
+ font-size: 0.7rem;
310
+ color: var(--text-gray);
 
311
  }
312
 
313
+ .terminal-content {
314
+ margin-top: 30px;
315
+ line-height: 1.5;
 
 
 
316
  }
317
 
318
+ .cmd-line {
319
+ color: var(--primary-green);
 
 
 
 
 
 
320
  }
321
+ .cmd-line::before {
322
+ content: '> ';
323
+ color: var(--accent-pink);
 
 
 
324
  }
325
+
326
+ .ai-response {
327
+ color: #ccc;
328
+ margin-bottom: 15px;
329
+ white-space: pre-wrap;
 
 
 
 
 
 
 
 
 
 
 
 
330
  }
331
 
332
+ .input-area {
333
+ display: flex;
334
+ margin-top: 10px;
335
+ border-top: 1px solid #222;
336
+ padding-top: 10px;
 
 
 
 
 
337
  }
338
 
339
+ .input-area input {
340
+ flex: 1;
341
+ background: transparent;
342
+ border: none;
343
+ color: var(--primary-green);
 
 
 
344
  font-family: var(--font-mono);
345
+ font-size: 1rem;
346
+ outline: none;
 
 
 
 
 
 
 
 
 
347
  }
 
 
 
348
 
349
+ /* --- Network Canvas --- */
350
+ #networkCanvas {
351
+ width: 100%;
352
+ height: 400px;
353
+ background: #000;
354
+ border: 1px solid var(--border-color);
355
  }
356
 
357
+ /* --- Buttons --- */
358
+ .btn {
359
+ background: transparent;
360
+ border: 1px solid var(--primary-green);
361
+ color: var(--primary-green);
362
+ padding: 8px 20px;
363
  cursor: pointer;
364
+ font-family: var(--font-mono);
365
+ text-transform: uppercase;
366
+ font-size: 0.8rem;
367
+ transition: all 0.3s;
368
+ margin-top: 10px;
369
  }
370
 
371
+ .btn:hover {
372
+ background: var(--primary-green);
373
+ color: #000;
374
+ box-shadow: 0 0 15px var(--primary-green);
375
  }
376
 
377
+ .btn-danger {
378
+ border-color: var(--accent-pink);
379
+ color: var(--accent-pink);
 
 
380
  }
381
+ .btn-danger:hover {
382
+ background: var(--accent-pink);
383
+ color: #fff;
384
+ box-shadow: 0 0 15px var(--accent-pink);
385
  }
386
 
387
  /* --- Mobile Responsiveness --- */
 
393
  width: 100%;
394
  flex-direction: row;
395
  overflow-x: auto;
 
396
  border-bottom: 1px solid var(--border-color);
397
  border-right: none;
398
+ padding: 10px;
399
  }
400
+ .grid-container {
 
 
 
 
 
 
 
 
 
 
401
  grid-template-columns: 1fr;
402
  }
403
+ .logo-text {
404
+ font-size: 1.2rem;
405
+ }
406
  }
407
  </style>
408
  </head>
 
410
 
411
  <!-- Header -->
412
  <header>
413
+ <div class="logo-container">
414
+ <!-- The Requested Logo -->
415
+ <div class="logo-text logo-blush">U X HACKER</div>
416
  </div>
417
+
418
  <div class="header-links">
419
+ <div class="status-indicator">
420
+ <div class="blink"></div>
421
+ SYSTEM: ONLINE
422
+ </div>
423
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--primary-green); font-weight: bold;">
424
+ Built with anycoder
425
+ </a>
426
  </div>
427
  </header>
428
 
429
  <div class="main-container">
430
+ <!-- Sidebar -->
431
  <aside>
432
+ <div class="nav-item active" onclick="switchTab('dashboard', this)">
433
+ <i class="fa-solid fa-gauge-high"></i> Dashboard
434
  </div>
435
+ <div class="nav-item" onclick="switchTab('blackbox', this)">
436
+ <i class="fa-solid fa-microchip"></i> Black Box AI
437
  </div>
438
+ <div class="nav-item" onclick="switchTab('network', this)">
439
+ <i class="fa-solid fa-network-wired"></i> Network Map
440
  </div>
441
+ <div class="nav-item" onclick="switchTab('logs', this)">
442
+ <i class="fa-solid fa-file-code"></i> Kernel Logs
443
  </div>
444
  </aside>
445
 
 
447
  <main>
448
  <!-- DASHBOARD SECTION -->
449
  <section id="dashboard" class="section active">
450
+ <h2>System Overview</h2>
451
+
452
+ <div class="grid-container">
453
+ <div class="panel">
454
+ <h3>CPU Load</h3>
455
+ <div class="metric-value" id="cpuValue">34%</div>
456
+ <div class="metric-sub"><i class="fa-solid fa-arrow-up"></i> Optimal</div>
457
+ <div style="width: 100%; height: 4px; background: #333; margin-top: 15px;">
458
+ <div style="width: 34%; height: 100%; background: var(--primary-green);"></div>
459
+ </div>
460
  </div>
461
+
462
+ <div class="panel">
463
+ <h3>Threat Level</h3>
464
+ <div class="metric-value" style="color: var(--accent-pink);">CRITICAL</div>
465
+ <div class="metric-sub">Intrusion Detected</div>
466
+ <div style="width: 100%; height: 4px; background: #333; margin-top: 15px;">
467
+ <div style="width: 89%; height: 100%; background: var(--accent-pink);"></div>
468
+ </div>
469
  </div>
470
+
471
+ <div class="panel">
472
+ <h3>Encrypted Packets</h3>
473
+ <div class="metric-value">4,092</div>
474
+ <div class="metric-sub">/sec</div>
475
  </div>
476
  </div>
477
 
478
+ <div class="panel">
479
+ <h3>Active Processes</h3>
480
+ <table style="width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem;">
481
+ <tr style="border-bottom: 1px solid #222; color: var(--text-gray);">
482
+ <td style="padding: 8px;">PID</td>
483
+ <td>USER</td>
484
+ <td>PROCESS</td>
485
+ <td>STATUS</td>
486
+ </tr>
487
+ <tr>
488
+ <td style="padding: 8px; color: var(--primary-green);">001</td>
489
+ <td>root</td>
490
+ <td>black_box_ai_core</td>
491
+ <td style="color: var(--primary-green);">RUNNING</td>
492
+ </tr>
493
+ <tr>
494
+ <td style="padding: 8px; color: var(--primary-green);">042</td>
495
+ <td>system</td>
496
+ <td>network_monitor</td>
497
+ <td style="color: var(--primary-green);">RUNNING</td>
498
+ </tr>
499
+ <tr>
500
+ <td style="padding: 8px; color: var(--accent-pink);">999</td>
501
+ <td>unknown</td>
502
+ <td>injection_attempt</td>
503
+ <td style="color: var(--accent-pink);">BLOCKED</td>
504
+ </tr>
505
+ </table>
506
+ <button class="btn btn-danger" style="margin-top: 15px;">Kill Process 999</button>
507
  </div>
508
  </section>
509
 
510
+ <!-- BLACK BOX AI SECTION -->
511
+ <section id="blackbox" class="section">
512
+ <h2>Black Box AI Interface</h2>
513
+ <p style="color: var(--text-gray); margin-bottom: 15px;">Direct neural link established. Queries are unlogged and ephemeral.</p>
514
+
515
+ <div class="terminal-container" id="terminal">
516
+ <div class="terminal-header">
517
+ <span>ROOT@UX-HACKER:~</span>
518
+ <span>TTY/1</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
519
  </div>
520
+ <div class="terminal-content" id="terminalOutput">
521
+ <div class="ai-response">Initializing Black Box Logic Core...</div>
522
+ <div class="ai-response">Encryption keys rotated. Identity masked.</div>
523
+ <div class="ai-response">Awaiting input...</div>
524
+ </div>
525
+ <div class="input-area">
526
+ <span style="color: var(--accent-pink); margin-right: 10px;">></span>
527
+ <input type="text" id="terminalInput" placeholder="Enter command or query..." autocomplete="off">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
528
  </div>
529
  </div>
 
 
 
 
 
 
530
 
531
+ <div style="display: flex; gap: 10px; margin-top: 15px;">
532
+ <button class="btn" onclick="runPreset('Analyze Network Topology')">Run Diagnostics</button>
533
+ <button class="btn" onclick="runPreset('Bypass Firewall Simulation')">Simulate Breach</button>
534
+ <button class="btn btn-danger" onclick="clearTerminal()">Purge Memory</button>
 
535
  </div>
536
+ </section>
537
 
538
+ <!-- NETWORK VISUALIZER SECTION -->
539
+ <section id="network" class="section">
540
+ <h2>Global Network Topology</h2>
541
+ <div class="panel">
542
+ <canvas id="networkCanvas"></canvas>
543
+ <div style="display: flex; justify-content: space-between; margin-top: 10px; color: var(--text-gray); font-size: 0.8rem;">
544
+ <span>NODES: <span id="nodeCount" style="color: var(--primary-green);">0</span></span>
545
+ <span>LATENCY: <span style="color: var(--accent-pink);">12ms</span></span>
546
+ <span>PROTOCOL: UDP/TCP</span>
547
+ </div>
548
  </div>
549
  </section>
550
 
551
+ <!-- KERNEL LOGS SECTION -->
552
+ <section id="logs" class="section">
553
+ <h2>Kernel Logs</h2>
554
+ <div class="panel" style="font-family: var(--font-mono); font-size: 0.85rem; height: 500px; overflow-y: auto; color: #aaa;" id="logContainer">
555
+ <!-- Logs generated by JS -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
556
  </div>
557
  </section>
558
  </main>
 
560
 
561
  <script>
562
  // --- Navigation Logic ---
563
+ function switchTab(tabId, element) {
564
+ // Remove active class from all sections and nav items
565
+ document.querySelectorAll('.section').forEach(sec => sec.classList.remove('active'));
566
+ document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
567
+
568
+ // Add active class to target
569
+ document.getElementById(tabId).classList.add('active');
570
+ element.classList.add('active');
571
 
572
+ if(tabId === 'network') {
573
+ resizeCanvas();
574
+ }
575
+ }
576
+
577
+ // --- Terminal Logic ---
578
+ const terminalInput = document.getElementById('terminalInput');
579
+ const terminalOutput = document.getElementById('terminalOutput');
580
 
581
+ terminalInput.addEventListener('keypress', function (e) {
582
+ if (e.key === 'Enter') {
583
+ const command = this.value;
584
+ if (command.trim() !== "") {
585
+ addToTerminal(command, true);
586
+ processCommand(command);
587
+ this.value = '';
588
+ }
589
+ }
590
+ });
591
+
592
+ function addToTerminal(text, isCommand = false) {
593
+ const div = document.createElement('div');
594
+ if (isCommand) {
595
+ div.className = 'cmd-line';
596
+ div.textContent = text;
597
+ } else {
598
+ div.className = 'ai-response';
599
+ div.textContent = text;
600
+ }
601
+ terminalOutput.appendChild(div);
602
+ const container = document.getElementById('terminal');
603
+ container.scrollTop = container.scrollHeight;
604
+ }
605
+
606
+ function processCommand(cmd) {
607
+ // Simulated AI responses
608
+ const responses = [
609
+ "Analyzing vector...",
610
+ "Access granted. Decrypting payload.",
611
+ "Trace complete. Origin: Unknown.",
612
+ "Logic sub-routine executed successfully.",
613
+ "Firewall rules updated.",
614
+ "Signal masked. Proceeding.",
615
+ "Data packet intercepted."
616
+ ];
617
+
618
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)];
619
+
620
+ setTimeout(() => {
621
+ addToTerminal(randomResponse);
622
+ }, 600 + Math.random() * 500);
623
  }
624
 
625
+ function runPreset(text) {
626
+ terminalInput.value = text;
627
+ addToTerminal(text, true);
628
+ processCommand(text);
629
+ }
630
 
631
+ function clearTerminal() {
632
+ terminalOutput.innerHTML = '<div class="ai-response">Memory purged.</div>';
 
633
  }
634
 
635
+ // --- Canvas Network Animation ---
636
+ const canvas = document.getElementById('networkCanvas');
637
+ const ctx = canvas.getContext('2d');
638
+ let width, height;
639
+ let particles = [];
640
+
641
+ function resizeCanvas() {
642
+ width = canvas.parentElement.clientWidth;
643
+ height = 400;
644
+ canvas.width = width;
645
+ canvas.height = height;
646
+ initParticles();
647
  }
648
 
649
+ class Particle {
650
+ constructor() {
651
+ this.x = Math.random() * width;
652
+ this.y = Math.random() * height;
653
+ this.vx = (Math.random() - 0.5) * 1.5;
654
+ this.vy = (Math.random() - 0.5) * 1.5;
655
+ this.size = Math.random() * 2 + 1;
656
+ }
657
+
658
+ update() {
659
+ this.x += this.vx;
660
+ this.y += this.vy;
661
+
662
+ if (this.x < 0 || this.x > width) this.vx *= -1;
663
+ if (this.y < 0 || this.y > height) this.vy *= -1;
664
+ }
665
+
666
+ draw() {
667
+ ctx.fillStyle = '#00ff41';
668
+ ctx.beginPath();
669
+ ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
670
+ ctx.fill();
671
+ }
672
  }
673
 
674
+ function initParticles() {
675
+ particles = [];
676
+ const count = Math.floor(width / 10); // Responsive particle count
677
+ document.getElementById('nodeCount').innerText = count;
678
+ for (let i = 0; i < count; i++) {
679
+ particles.push(new Particle());
680
+ }
681
  }
682
 
683
+ function animateNetwork() {
684
+ ctx.clearRect(0, 0, width, height);
 
685
 
686
+ // Draw connections
687
+ ctx.strokeStyle = 'rgba(0, 255, 65, 0.15)';
688
+ ctx.lineWidth = 1;
689
+
690
+ for (let i = 0; i < particles.length; i++) {
691
+ particles[i].update();
692
+ particles[i].draw();
693
+
694
+ for (let j = i; j < particles.length; j++) {
695
+ const dx = particles[i].x - particles[j].x;
696
+ const dy = particles[i].y - particles[j].y;
697
+ const distance = Math.sqrt(dx * dx + dy * dy);
698
+
699
+ if (distance < 100) {
700
+ ctx.beginPath();
701
+ ctx.moveTo(particles[i].x, particles[i].y);
702
+ ctx.lineTo(particles[j].x, particles[j].y);
703
+ ctx.stroke();
704
+ }
705
  }
706
+ }
707
+ requestAnimationFrame(animateNetwork);
708
+ }
709
+
710
+ // --- Logs Generator ---
711
+ function generateLogs() {
712
+ const logContainer = document.getElementById('logContainer');
713
+ const messages = [
714
+ "[INFO] System check... OK",
715
+ "[WARN] Port 8080 scan detected",
716
+ "[INFO] Handshake verified",
717
+ "[NET] Packet loss 0.01%",
718
+ "[SEC] Updating firewall rules...",
719
+ "[INFO] CPU temp: 45C",
720
+ "[INFO] Memory usage stable",
721
+ "[NET] New node connected: 192.168.0.x",
722
+ "[INFO] Syncing with mainframe...",
723
+ "[SEC] Brute force attempt blocked"
724
+ ];
725
+
726
+ let html = "";
727
+ for(let i=0; i<50; i++) {
728
+ const msg = messages[Math.floor(Math.random() * messages.length)];
729
+ const time = new Date().toISOString().split('T')[1].split('.')[0];
730
+ const color = msg.includes('WARN') ? '#ffae00' : (msg.includes('SEC') ? '#ff0055' : '#aaa');
731
+ html += `<div style="border-bottom: 1px solid #111; padding: 4px 0;"><span style="color: #555;">[${time}]</span> <span style="color: ${color};">${msg}</span></div>`;
732
+ }
733
+ logContainer.innerHTML = html;
734
  }
735
 
736
+ // --- Dashboard Live Updates ---
737
+ setInterval(() => {
738
+ const cpu = Math.floor(Math.random() * 30) + 20;
739
+ document.getElementById('cpuValue').innerText = cpu + "%";
740
+ }, 2000);
 
 
741
 
742
  // --- Initialization ---
743
  window.onload = () => {
744
+ resizeCanvas();
745
+ animateNetwork();
746
+ generateLogs();
747
  };
748
 
749
+ window.onresize = resizeCanvas;
750
+
751
  </script>
752
  </body>
753
  </html>