Hugging Face's logo

Spaces:
udd542
/
anycoder-4d1fa81d
Running

App Files Community
udd542 commited on
Commit
a66cf9e
·
verified ·
1 Parent(s): 1779065

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +831 -19
index.html CHANGED
@@ -1,19 +1,831 @@
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>ZORG-Ω | Quantum Core Exploitation Interface</title>
7
+
8
+ <!-- Icons -->
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+
11
+ <!-- Fonts -->
12
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;400;700&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
13
+
14
+ <style>
15
+ :root {
16
+ --bg-dark: #050505;
17
+ --bg-panel: #0a0a0a;
18
+ --primary: #00f3ff; /* Cyan */
19
+ --secondary: #ff0055; /* Magenta */
20
+ --tertiary: #ffe600; /* Yellow */
21
+ --text-main: #e0e0e0;
22
+ --text-dim: #666;
23
+ --glass: rgba(10, 10, 10, 0.7);
24
+ --border: 1px solid rgba(0, 243, 255, 0.2);
25
+ --glow: 0 0 10px rgba(0, 243, 255, 0.5);
26
+ --font-mono: 'JetBrains Mono', monospace;
27
+ --font-display: 'Orbitron', sans-serif;
28
+ }
29
+
30
+ * {
31
+ box-sizing: border-box;
32
+ margin: 0;
33
+ padding: 0;
34
+ scrollbar-width: thin;
35
+ scrollbar-color: var(--primary) var(--bg-dark);
36
+ }
37
+
38
+ body {
39
+ background-color: var(--bg-dark);
40
+ color: var(--text-main);
41
+ font-family: var(--font-mono);
42
+ overflow: hidden; /* App-like feel */
43
+ height: 100vh;
44
+ width: 100vw;
45
+ display: flex;
46
+ flex-direction: column;
47
+ }
48
+
49
+ /* --- CRT & Scanline Effects --- */
50
+ .scanlines {
51
+ position: fixed;
52
+ top: 0;
53
+ left: 0;
54
+ width: 100%;
55
+ height: 100%;
56
+ background: linear-gradient(
57
+ to bottom,
58
+ rgba(255,255,255,0),
59
+ rgba(255,255,255,0) 50%,
60
+ rgba(0,0,0,0.2) 50%,
61
+ rgba(0,0,0,0.2)
62
+ );
63
+ background-size: 100% 4px;
64
+ pointer-events: none;
65
+ z-index: 999;
66
+ opacity: 0.6;
67
+ }
68
+
69
+ .crt-flicker {
70
+ animation: flicker 0.15s infinite;
71
+ pointer-events: none;
72
+ position: fixed;
73
+ top: 0;
74
+ left: 0;
75
+ width: 100%;
76
+ height: 100%;
77
+ background: rgba(0, 243, 255, 0.02);
78
+ z-index: 998;
79
+ }
80
+
81
+ @keyframes flicker {
82
+ 0% { opacity: 0.9; }
83
+ 50% { opacity: 1.0; }
84
+ 100% { opacity: 0.9; }
85
+ }
86
+
87
+ /* --- Header --- */
88
+ header {
89
+ display: flex;
90
+ justify-content: space-between;
91
+ align-items: center;
92
+ padding: 1rem 2rem;
93
+ border-bottom: var(--border);
94
+ background: var(--bg-panel);
95
+ z-index: 10;
96
+ }
97
+
98
+ .brand {
99
+ font-family: var(--font-display);
100
+ font-size: 1.5rem;
101
+ font-weight: 900;
102
+ color: var(--primary);
103
+ text-shadow: var(--glow);
104
+ letter-spacing: 2px;
105
+ display: flex;
106
+ align-items: center;
107
+ gap: 10px;
108
+ }
109
+
110
+ .status-badge {
111
+ font-size: 0.8rem;
112
+ padding: 0.3rem 0.8rem;
113
+ border: 1px solid var(--secondary);
114
+ color: var(--secondary);
115
+ background: rgba(255, 0, 85, 0.1);
116
+ text-transform: uppercase;
117
+ letter-spacing: 1px;
118
+ box-shadow: 0 0 5px var(--secondary);
119
+ }
120
+
121
+ .built-with {
122
+ color: var(--text-dim);
123
+ font-size: 0.8rem;
124
+ text-decoration: none;
125
+ transition: color 0.3s;
126
+ }
127
+ .built-with:hover {
128
+ color: var(--primary);
129
+ }
130
+
131
+ /* --- Main Layout --- */
132
+ main {
133
+ flex: 1;
134
+ display: grid;
135
+ grid-template-columns: 300px 1fr 350px;
136
+ gap: 1px;
137
+ background: var(--border); /* Creates grid lines */
138
+ overflow: hidden;
139
+ }
140
+
141
+ /* --- Panels --- */
142
+ .panel {
143
+ background: var(--bg-dark);
144
+ padding: 1.5rem;
145
+ display: flex;
146
+ flex-direction: column;
147
+ gap: 1.5rem;
148
+ overflow-y: auto;
149
+ position: relative;
150
+ }
151
+
152
+ .panel-header {
153
+ font-family: var(--font-display);
154
+ color: var(--text-dim);
155
+ font-size: 0.9rem;
156
+ text-transform: uppercase;
157
+ border-bottom: 1px solid rgba(255,255,255,0.1);
158
+ padding-bottom: 0.5rem;
159
+ margin-bottom: 0.5rem;
160
+ display: flex;
161
+ justify-content: space-between;
162
+ }
163
+
164
+ /* --- Left Panel: System --- */
165
+ .system-stats {
166
+ display: grid;
167
+ grid-template-columns: 1fr 1fr;
168
+ gap: 1rem;
169
+ }
170
+
171
+ .stat-box {
172
+ background: rgba(255,255,255,0.03);
173
+ padding: 1rem;
174
+ border-left: 2px solid var(--primary);
175
+ }
176
+
177
+ .stat-label {
178
+ font-size: 0.7rem;
179
+ color: var(--text-dim);
180
+ margin-bottom: 0.5rem;
181
+ }
182
+
183
+ .stat-value {
184
+ font-size: 1.2rem;
185
+ font-weight: 700;
186
+ }
187
+
188
+ .progress-bar {
189
+ width: 100%;
190
+ height: 4px;
191
+ background: #222;
192
+ margin-top: 5px;
193
+ position: relative;
194
+ overflow: hidden;
195
+ }
196
+
197
+ .progress-fill {
198
+ height: 100%;
199
+ background: var(--primary);
200
+ width: 0%;
201
+ transition: width 0.3s ease;
202
+ box-shadow: 0 0 8px var(--primary);
203
+ }
204
+
205
+ /* --- Center Panel: Visualization --- */
206
+ .center-panel {
207
+ background: radial-gradient(circle at center, #0f0f0f 0%, #000 100%);
208
+ position: relative;
209
+ display: flex;
210
+ justify-content: center;
211
+ align-items: center;
212
+ overflow: hidden;
213
+ }
214
+
215
+ #canvas-container {
216
+ position: absolute;
217
+ top: 0;
218
+ left: 0;
219
+ width: 100%;
220
+ height: 100%;
221
+ z-index: 1;
222
+ }
223
+
224
+ .overlay-ui {
225
+ position: absolute;
226
+ z-index: 5;
227
+ width: 100%;
228
+ height: 100%;
229
+ pointer-events: none;
230
+ display: flex;
231
+ flex-direction: column;
232
+ justify-content: space-between;
233
+ padding: 2rem;
234
+ }
235
+
236
+ .corner-bracket {
237
+ position: absolute;
238
+ width: 50px;
239
+ height: 50px;
240
+ border: 2px solid var(--primary);
241
+ opacity: 0.5;
242
+ }
243
+ .tl { top: 0; left: 0; border-right: none; border-bottom: none; }
244
+ .tr { top: 0; right: 0; border-left: none; border-bottom: none; }
245
+ .bl { bottom: 0; left: 0; border-right: none; border-top: none; }
246
+ .br { bottom: 0; right: 0; border-left: none; border-top: none; }
247
+
248
+ .log-terminal {
249
+ position: absolute;
250
+ bottom: 2rem;
251
+ left: 50%;
252
+ transform: translateX(-50%);
253
+ width: 80%;
254
+ max-width: 600px;
255
+ background: rgba(0,0,0,0.8);
256
+ border: 1px solid var(--primary);
257
+ padding: 1rem;
258
+ font-size: 0.8rem;
259
+ height: 150px;
260
+ overflow-y: hidden;
261
+ display: flex;
262
+ flex-direction: column-reverse; /* Newest at bottom visually */
263
+ }
264
+
265
+ .log-entry {
266
+ margin-bottom: 4px;
267
+ opacity: 0.8;
268
+ }
269
+ .log-entry.success { color: var(--primary); }
270
+ .log-entry.warning { color: var(--tertiary); }
271
+ .log-entry.danger { color: var(--secondary); }
272
+
273
+ /* --- Right Panel: Controls --- */
274
+ .control-group {
275
+ display: flex;
276
+ flex-direction: column;
277
+ gap: 1rem;
278
+ }
279
+
280
+ .module-card {
281
+ background: rgba(255,255,255,0.02);
282
+ border: 1px solid rgba(255,255,255,0.05);
283
+ padding: 1rem;
284
+ transition: all 0.3s ease;
285
+ cursor: pointer;
286
+ position: relative;
287
+ overflow: hidden;
288
+ }
289
+
290
+ .module-card:hover {
291
+ border-color: var(--primary);
292
+ background: rgba(0, 243, 255, 0.05);
293
+ }
294
+
295
+ .module-card.active {
296
+ border-color: var(--secondary);
297
+ background: rgba(255, 0, 85, 0.05);
298
+ box-shadow: 0 0 15px rgba(255, 0, 85, 0.1);
299
+ }
300
+
301
+ .module-card::before {
302
+ content: '';
303
+ position: absolute;
304
+ top: 0;
305
+ left: 0;
306
+ width: 3px;
307
+ height: 100%;
308
+ background: var(--text-dim);
309
+ transition: background 0.3s;
310
+ }
311
+
312
+ .module-card.active::before {
313
+ background: var(--secondary);
314
+ }
315
+
316
+ .module-title {
317
+ font-weight: 700;
318
+ margin-bottom: 0.5rem;
319
+ font-size: 0.9rem;
320
+ display: flex;
321
+ align-items: center;
322
+ gap: 8px;
323
+ }
324
+
325
+ .module-desc {
326
+ font-size: 0.75rem;
327
+ color: var(--text-dim);
328
+ line-height: 1.4;
329
+ }
330
+
331
+ .action-btn {
332
+ width: 100%;
333
+ padding: 1rem;
334
+ background: transparent;
335
+ border: 1px solid var(--primary);
336
+ color: var(--primary);
337
+ font-family: var(--font-display);
338
+ font-weight: 700;
339
+ text-transform: uppercase;
340
+ cursor: pointer;
341
+ transition: all 0.2s;
342
+ position: relative;
343
+ overflow: hidden;
344
+ margin-top: auto;
345
+ }
346
+
347
+ .action-btn:hover {
348
+ background: var(--primary);
349
+ color: #000;
350
+ box-shadow: 0 0 20px var(--primary);
351
+ }
352
+
353
+ .action-btn:active {
354
+ transform: scale(0.98);
355
+ }
356
+
357
+ /* --- Modal --- */
358
+ .modal-overlay {
359
+ position: fixed;
360
+ top: 0;
361
+ left: 0;
362
+ width: 100%;
363
+ height: 100%;
364
+ background: rgba(0,0,0,0.9);
365
+ z-index: 1000;
366
+ display: flex;
367
+ justify-content: center;
368
+ align-items: center;
369
+ opacity: 0;
370
+ pointer-events: none;
371
+ transition: opacity 0.3s;
372
+ }
373
+
374
+ .modal-overlay.open {
375
+ opacity: 1;
376
+ pointer-events: all;
377
+ }
378
+
379
+ .modal-content {
380
+ width: 90%;
381
+ max-width: 500px;
382
+ border: 1px solid var(--primary);
383
+ background: #000;
384
+ padding: 2rem;
385
+ position: relative;
386
+ box-shadow: 0 0 50px rgba(0, 243, 255, 0.2);
387
+ transform: translateY(20px);
388
+ transition: transform 0.3s;
389
+ }
390
+
391
+ .modal-overlay.open .modal-content {
392
+ transform: translateY(0);
393
+ }
394
+
395
+ .close-modal {
396
+ position: absolute;
397
+ top: 1rem;
398
+ right: 1rem;
399
+ background: none;
400
+ border: none;
401
+ color: var(--text-dim);
402
+ font-size: 1.5rem;
403
+ cursor: pointer;
404
+ }
405
+
406
+ .progress-container {
407
+ margin-top: 1rem;
408
+ }
409
+
410
+ .progress-text {
411
+ display: flex;
412
+ justify-content: space-between;
413
+ font-size: 0.8rem;
414
+ margin-bottom: 5px;
415
+ }
416
+
417
+ /* --- Responsive --- */
418
+ @media (max-width: 1024px) {
419
+ main {
420
+ grid-template-columns: 1fr;
421
+ grid-template-rows: auto 400px auto;
422
+ overflow-y: auto;
423
+ }
424
+ .center-panel {
425
+ height: 400px;
426
+ }
427
+ }
428
+ </style>
429
+ </head>
430
+ <body>
431
+
432
+ <!-- Visual Effects -->
433
+ <div class="scanlines"></div>
434
+ <div class="crt-flicker"></div>
435
+
436
+ <header>
437
+ <div class="brand">
438
+ <i class="fa-solid fa-microchip"></i>
439
+ ZORG-Ω <span style="font-size: 0.6em; opacity: 0.7;">v3.5.U-X</span>
440
+ </div>
441
+ <div class="status-badge" id="system-status">System Standby</div>
442
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a>
443
+ </header>
444
+
445
+ <main>
446
+ <!-- Left Panel: System Stats -->
447
+ <section class="panel">
448
+ <div class="panel-header">
449
+ <span>Quantum Core</span>
450
+ <i class="fa-solid fa-server"></i>
451
+ </div>
452
+
453
+ <div class="system-stats">
454
+ <div class="stat-box">
455
+ <div class="stat-label">CPU LOAD</div>
456
+ <div class="stat-value" id="cpu-val">12%</div>
457
+ <div class="progress-bar"><div class="progress-fill" id="cpu-bar" style="width: 12%"></div></div>
458
+ </div>
459
+ <div class="stat-box">
460
+ <div class="stat-label">MEMORY</div>
461
+ <div class="stat-value" id="mem-val">4.2 TB</div>
462
+ <div class="progress-bar"><div class="progress-fill" id="mem-bar" style="width: 45%"></div></div>
463
+ </div>
464
+ <div class="stat-box">
465
+ <div class="stat-label">NETWORK</div>
466
+ <div class="stat-value" id="net-val">1.2 Gbps</div>
467
+ <div class="progress-bar"><div class="progress-fill" id="net-bar" style="width: 30%; background: var(--secondary)"></div></div>
468
+ </div>
469
+ <div class="stat-box">
470
+ <div class="stat-label">ANONYMITY</div>
471
+ <div class="stat-value" style="color: var(--primary)">99.9%</div>
472
+ <div class="progress-bar"><div class="progress-fill" id="anony-bar" style="width: 99%; background: var(--tertiary)"></div></div>
473
+ </div>
474
+ </div>
475
+
476
+ <div class="panel-header" style="margin-top: 1rem;">
477
+ <span>Stealth Matrix</span>
478
+ <i class="fa-solid fa-shield-halved"></i>
479
+ </div>
480
+ <div style="font-size: 0.8rem; color: var(--text-dim); line-height: 1.6;">
481
+ <p>> Fingerprint Fabrication: <span style="color:var(--primary)">ACTIVE</span></p>
482
+ <p>> Digital Obliteration: <span style="color:var(--primary)">ACTIVE</span></p>
483
+ <p>> Dynamic Proxy Chain: <span style="color:var(--primary)">STABLE</span></p>
484
+ <p>> Latency: <span id="latency-val">14ms</span></p>
485
+ </div>
486
+ </section>
487
+
488
+ <!-- Center Panel: Visualization -->
489
+ <section class="panel center-panel">
490
+ <div id="canvas-container"></div>
491
+
492
+ <div class="overlay-ui">
493
+ <div class="corner-bracket tl"></div>
494
+ <div class="corner-bracket tr"></div>
495
+ <div class="corner-bracket bl"></div>
496
+ <div class="corner-bracket br"></div>
497
+
498
+ <div class="log-terminal" id="console-log">
499
+ <!-- Logs will be injected here -->
500
+ <div class="log-entry">Initializing ZORG-Ω kernel...</div>
501
+ <div class="log-entry">Quantum Core loaded.</div>
502
+ <div class="log-entry success">Zero-Trace Stealth active.</div>
503
+ </div>
504
+ </div>
505
+ </section>
506
+
507
+ <!-- Right Panel: Controls -->
508
+ <section class="panel">
509
+ <div class="panel-header">
510
+ <span>Modules</span>
511
+ <i class="fa-solid fa-network-wired"></i>
512
+ </div>
513
+
514
+ <div class="control-group">
515
+ <!-- Module 1 -->
516
+ <div class="module-card" onclick="activateModule('crypto')">
517
+ <div class="module-title"><i class="fa-solid fa-key"></i> Crypto Exploiter</div>
518
+ <div class="module-desc">Probabilistic algorithms render cryptographic defenses obsolete.</div>
519
+ </div>
520
+
521
+ <!-- Module 2 -->
522
+ <div class="module-card" onclick="activateModule('payload')">
523
+ <div class="module-title"><i class="fa-solid fa-box-open"></i> Payload Deployer</div>
524
+ <div class="module-desc">Autonomous execution of optimized attack vectors.</div>
525
+ </div>
526
+
527
+ <!-- Module 3 -->
528
+ <div class="module-card" onclick="activateModule('social')">
529
+ <div class="module-title"><i class="fa-solid fa-user-secret"></i> Social Eng. AI</div>
530
+ <div class="module-desc">Deep profile analysis for irresistible lures.</div>
531
+ </div>
532
+
533
+ <!-- Module 4 -->
534
+ <div class="module-card" onclick="activateModule('counter')">
535
+ <div class="module-title"><i class="fa-solid fa-shield-virus"></i> Counter-Def. Matrix</div>
536
+ <div class="module-desc">Real-time misdirection and activity obfuscation.</div>
537
+ </div>
538
+ </div>
539
+
540
+ <button class="action-btn" id="main-action-btn" onclick="triggerSequence()">
541
+ INITIATE SEQUENCE
542
+ </button>
543
+ </section>
544
+ </main>
545
+
546
+ <!-- Modal for Sequence Execution -->
547
+ <div class="modal-overlay" id="modal">
548
+ <div class="modal-content">
549
+ <button class="close-modal" onclick="closeModal()">&times;</button>
550
+ <h2 style="font-family: var(--font-display); color: var(--primary); margin-bottom: 1rem;" id="modal-title">SEQUENCE START</h2>
551
+ <p style="color: var(--text-dim); margin-bottom: 1rem;" id="modal-desc">Targeting architecture...</p>
552
+
553
+ <div class="progress-container">
554
+ <div class="progress-text">
555
+ <span id="progress-status">Initializing</span>
556
+ <span id="progress-percent">0%</span>
557
+ </div>
558
+ <div class="progress-bar">
559
+ <div class="progress-fill" id="modal-progress-fill" style="width: 0%"></div>
560
+ </div>
561
+ </div>
562
+
563
+ <div style="margin-top: 1.5rem; font-family: monospace; font-size: 0.7rem; color: var(--tertiary); height: 100px; overflow-y: hidden;" id="modal-logs">
564
+ > Connecting to Quantum Core...
565
+ </div>
566
+ </div>
567
+ </div>
568
+
569
+ <script type="module">
570
+ import * as THREE from 'https://unpkg.com/three@0.158.0/build/three.module.js';
571
+
572
+ // --- VISUALIZATION ENGINE (Three.js) ---
573
+ const container = document.getElementById('canvas-container');
574
+ const scene = new THREE.Scene();
575
+ // Fog for depth
576
+ scene.fog = new THREE.FogExp2(0x050505, 0.002);
577
+
578
+ const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
579
+ camera.position.z = 30;
580
+
581
+ const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
582
+ renderer.setSize(container.clientWidth, container.clientHeight);
583
+ renderer.setPixelRatio(window.devicePixelRatio);
584
+ container.appendChild(renderer.domElement);
585
+
586
+ // --- OBJECTS ---
587
+
588
+ // 1. The Core (Icosahedron)
589
+ const geometry = new THREE.IcosahedronGeometry(10, 2);
590
+ const material = new THREE.MeshBasicMaterial({
591
+ color: 0x00f3ff,
592
+ wireframe: true,
593
+ transparent: true,
594
+ opacity: 0.3
595
+ });
596
+ const core = new THREE.Mesh(geometry, material);
597
+ scene.add(core);
598
+
599
+ // 2. Inner Core (Solid)
600
+ const innerGeo = new THREE.IcosahedronGeometry(6, 0);
601
+ const innerMat = new THREE.MeshBasicMaterial({ color: 0x000000, wireframe: true });
602
+ const innerCore = new THREE.Mesh(innerGeo, innerMat);
603
+ scene.add(innerCore);
604
+
605
+ // 3. Particles (Network Weaver)
606
+ const particlesGeo = new THREE.BufferGeometry();
607
+ const particlesCount = 1500;
608
+ const posArray = new Float32Array(particlesCount * 3);
609
+
610
+ for(let i = 0; i < particlesCount * 3; i++) {
611
+ posArray[i] = (Math.random() - 0.5) * 100;
612
+ }
613
+
614
+ particlesGeo.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
615
+ const particlesMat = new THREE.PointsMaterial({
616
+ size: 0.2,
617
+ color: 0xff0055,
618
+ transparent: true,
619
+ opacity: 0.8,
620
+ blending: THREE.AdditiveBlending
621
+ });
622
+ const particlesMesh = new THREE.Points(particlesGeo, particlesMat);
623
+ scene.add(particlesMesh);
624
+
625
+ // 4. Connecting Lines (Visualizing Network)
626
+ const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00f3ff, transparent: true, opacity: 0.1 });
627
+ const lineGeometry = new THREE.BufferGeometry();
628
+ const lines = new THREE.LineSegments(lineGeometry, lineMaterial);
629
+ scene.add(lines);
630
+
631
+ // --- INTERACTION & ANIMATION ---
632
+
633
+ let targetSpeed = 0.001;
634
+ let currentSpeed = 0.001;
635
+ let targetColor = new THREE.Color(0x00f3ff);
636
+ let isAttacking = false;
637
+
638
+ // Mouse Interaction
639
+ let mouseX = 0;
640
+ let mouseY = 0;
641
+ document.addEventListener('mousemove', (event) => {
642
+ mouseX = (event.clientX / window.innerWidth) * 2 - 1;
643
+ mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
644
+ });
645
+
646
+ // Animation Loop
647
+ function animate() {
648
+ requestAnimationFrame(animate);
649
+
650
+ // Smooth transitions
651
+ currentSpeed += (targetSpeed - currentSpeed) * 0.05;
652
+ core.rotation.x += currentSpeed;
653
+ core.rotation.y += currentSpeed;
654
+ innerCore.rotation.x -= currentSpeed * 2;
655
+ innerCore.rotation.y -= currentSpeed * 2;
656
+
657
+ // Mouse parallax
658
+ camera.position.x += (mouseX * 5 - camera.position.x) * 0.05;
659
+ camera.position.y += (mouseY * 5 - camera.position.y) * 0.05;
660
+ camera.lookAt(scene.position);
661
+
662
+ // Particle movement
663
+ particlesMesh.rotation.y = -mouseX * 0.2;
664
+ particlesMesh.rotation.x = mouseY * 0.2;
665
+
666
+ // Pulse effect based on speed
667
+ const scale = 1 + Math.sin(Date.now() * 0.002 * (currentSpeed * 1000)) * 0.05;
668
+ core.scale.set(scale, scale, scale);
669
+
670
+ // Dynamic Line Connections (Simulating Network Weaver)
671
+ if (isAttacking) {
672
+ const positions = core.geometry.attributes.position.array;
673
+ // Simple visual trick: jitter particles
674
+ // In a full app, this would calculate actual distances between particles
675
+ }
676
+
677
+ renderer.render(scene, camera);
678
+ }
679
+
680
+ animate();
681
+
682
+ // Resize Handler
683
+ window.addEventListener('resize', () => {
684
+ camera.aspect = container.clientWidth / container.clientHeight;
685
+ camera.updateProjectionMatrix();
686
+ renderer.setSize(container.clientWidth, container.clientHeight);
687
+ });
688
+
689
+ // --- APP LOGIC ---
690
+
691
+ const logContainer = document.getElementById('console-log');
692
+ const modal = document.getElementById('modal');
693
+ const progressBarFill = document.getElementById('modal-progress-fill');
694
+ const progressText = document.getElementById('progress-percent');
695
+ const progressStatus = document.getElementById('progress-status');
696
+ const modalLogs = document.getElementById('modal-logs');
697
+ const actionBtn = document.getElementById('main-action-btn');
698
+
699
+ const logMessages = [
700
+ "Bypassing firewall...",
701
+ "Injecting payload...",
702
+ "Decrypting quantum keys...",
703
+ "Fabricating digital fingerprint...",
704
+ "Evading counter-measures...",
705
+ "Exfiltrating data..."
706
+ ];
707
+
708
+ function addLog(msg, type = 'normal') {
709
+ const div = document.createElement('div');
710
+ div.className = `log-entry ${type}`;
711
+ div.textContent = `> ${msg}`;
712
+ logContainer.prepend(div);
713
+ if (logContainer.children.length > 8) {
714
+ logContainer.lastElementChild.remove();
715
+ }
716
+ }
717
+
718
+ function activateModule(moduleName) {
719
+ // UI Feedback
720
+ document.querySelectorAll('.module-card').forEach(el => el.classList.remove('active'));
721
+ event.currentTarget.classList.add('active');
722
+
723
+ // Visual Feedback
724
+ if (moduleName === 'crypto') targetColor.setHex(0xffd700); // Gold
725
+ if (moduleName === 'payload') targetColor.setHex(0xff0055); // Red
726
+ if (moduleName === 'social') targetColor.setHex(0x00ff00); // Green
727
+ if (moduleName === 'counter') targetColor.setHex(0x00f3ff); // Cyan
728
+
729
+ material.color.lerp(targetColor, 0.1);
730
+ particlesMat.color.lerp(targetColor, 0.1);
731
+
732
+ addLog(`Module loaded: ${moduleName.toUpperCase()}`);
733
+ }
734
+
735
+ function triggerSequence() {
736
+ if (isAttacking) return;
737
+ isAttacking = true;
738
+ actionBtn.disabled = true;
739
+ actionBtn.textContent = "EXECUTING...";
740
+ actionBtn.style.opacity = "0.5";
741
+
742
+ openModal();
743
+ runSimulation();
744
+ }
745
+
746
+ function openModal() {
747
+ modal.classList.add('open');
748
+ }
749
+
750
+ function closeModal() {
751
+ modal.classList.remove('open');
752
+ isAttacking = false;
753
+ actionBtn.disabled = false;
754
+ actionBtn.textContent = "INITIATE SEQUENCE";
755
+ actionBtn.style.opacity = "1";
756
+ targetSpeed = 0.001;
757
+ material.color.setHex(0x00f3ff); // Reset color
758
+ particlesMat.color.setHex(0xff0055); // Reset particles
759
+ }
760
+
761
+ function runSimulation() {
762
+ let progress = 0;
763
+ const totalDuration = 5000; // 5 seconds
764
+ const intervalTime = 100;
765
+ const steps = totalDuration / intervalTime;
766
+
767
+ const interval = setInterval(() => {
768
+ progress += 100 / steps;
769
+
770
+ // Update Progress Bar
771
+ progressBarFill.style.width = `${progress}%`;
772
+ progressText.textContent = `${Math.floor(progress)}%`;
773
+
774
+ // Update Status Text
775
+ if (progress < 30) progressStatus.textContent = "Initializing Quantum Core...";
776
+ else if (progress < 60) progressStatus.textContent = "Exploiting Cryptographic Defenses...";
777
+ else if (progress < 90) progressStatus.textContent = "Deploying Payload & Exfiltrating...";
778
+ else progressStatus.textContent = "Finalizing...";
779
+
780
+ // Add Random Logs
781
+ if (Math.random() > 0.7) {
782
+ const msg = logMessages[Math.floor(Math.random() * logMessages.length)];
783
+ addLog(msg, 'success');
784
+ const logLine = document.createElement('div');
785
+ logLine.textContent = `> ${msg}`;
786
+ modalLogs.appendChild(logLine);
787
+ modalLogs.scrollTop = modalLogs.scrollHeight;
788
+ }
789
+
790
+ // Visual Speed Up
791
+ targetSpeed = 0.01 + (progress / 100) * 0.05;
792
+
793
+ if (progress >= 100) {
794
+ clearInterval(interval);
795
+ progressStatus.textContent = "SEQUENCE COMPLETE";
796
+ progressStatus.style.color = "var(--primary)";
797
+ addLog("Operation successful. Target neutralized.", "success");
798
+
799
+ setTimeout(() => {
800
+ closeModal();
801
+ // Reset state
802
+ targetSpeed = 0.001;
803
+ isAttacking = false;
804
+ actionBtn.disabled = false;
805
+ actionBtn.textContent = "INITIATE SEQUENCE";
806
+ actionBtn.style.opacity = "1";
807
+ }, 1000);
808
+ }
809
+ }, intervalTime);
810
+ }
811
+
812
+ // --- MOCK DATA UPDATES ---
813
+ setInterval(() => {
814
+ // CPU
815
+ const cpu = Math.floor(Math.random() * 30) + 10;
816
+ document.getElementById('cpu-val').textContent = `${cpu}%`;
817
+ document.getElementById('cpu-bar').style.width = `${cpu}%`;
818
+
819
+ // Network
820
+ const net = Math.floor(Math.random() * 2000) + 500;
821
+ document.getElementById('net-val').textContent = `${(net/1000).toFixed(1)} Gbps`;
822
+ document.getElementById('net-bar').style.width = `${Math.min(net/10, 100)}%`;
823
+
824
+ // Latency
825
+ const lat = Math.floor(Math.random() * 20) + 5;
826
+ document.getElementById('latency-val').textContent = `${lat}ms`;
827
+ }, 2000);
828
+
829
+ </script>
830
+ </body>
831
+ </html>