Theemptylogfile commited on
Commit
0dcadc2
·
verified ·
1 Parent(s): eaf59ce

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +367 -482
index.html CHANGED
@@ -1,665 +1,550 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
-
4
  <head>
5
  <meta charset="UTF-8">
6
- <!-- FIXED: Enhanced viewport for better iOS 2025+ compatibility -->
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
8
- <!-- iOS specific meta tags for "App" feel -->
9
  <meta name="apple-mobile-web-app-capable" content="yes">
10
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
11
-
12
- <title>TROJANER | iOS Monitor</title>
13
-
14
  <!-- Import FontAwesome -->
15
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
16
 
17
  <style>
18
- /* --- FIXED: Global Box Sizing Reset --- */
19
- html {
20
- box-sizing: border-box;
21
- }
22
-
23
- *, *:before, *:after {
24
- box-sizing: inherit; /* Inherits border-box */
25
- }
26
-
27
  :root {
28
- --bg-color: #000000;
29
- --panel-bg: rgba(20, 22, 28, 0.6);
30
- --accent-primary: #00ff9d;
31
- --accent-secondary: #ff2a6d;
32
- --accent-tertiary: #05d5aa;
33
- --text-main: #e0e0e0;
34
- --text-dim: #8a9ba8;
35
- --ios-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
36
- --mono-font: 'Courier New', Courier, monospace;
37
- --ios-radius: 16px;
38
- }
39
-
40
- * {
41
- margin: 0;
42
- padding: 0;
43
- /* Prevent text selection on touch */
44
- -webkit-touch-callout: none;
45
- -webkit-user-select: none;
46
- user-select: none;
47
- }
48
-
49
  body {
50
- background-color: var(--bg-color);
51
- /* iOS background gradient */
52
- background-image: radial-gradient(circle at 50% 0%, #1a1c24 0%, #000000 70%);
53
- color: var(--text-main);
54
- font-family: var(--ios-font);
55
- height: 100vh;
56
- width: 100vw;
 
57
  overflow: hidden;
58
  display: flex;
59
  flex-direction: column;
60
- /* Safe area handling for iPhone X+ */
61
  padding-top: env(safe-area-inset-top);
62
  padding-bottom: env(safe-area-inset-bottom);
63
  }
64
 
65
- /* --- Header --- */
66
  header {
 
 
 
 
 
67
  display: flex;
68
  justify-content: space-between;
69
  align-items: center;
70
- padding: 10px 20px;
71
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
72
- background: rgba(0, 0, 0, 0.4);
73
- backdrop-filter: blur(20px);
74
- -webkit-backdrop-filter: blur(20px);
75
  z-index: 100;
76
- height: 50px;
77
  }
78
 
79
  .brand {
80
- font-family: var(--mono-font);
81
- font-size: 1.1rem;
82
- font-weight: bold;
83
- color: var(--accent-primary);
84
- letter-spacing: 1px;
85
  display: flex;
86
  align-items: center;
87
- gap: 8px;
 
88
  }
89
 
 
 
 
 
 
 
 
 
90
  .anycoder-link {
91
  font-size: 0.7rem;
92
- color: var(--text-dim);
93
  text-decoration: none;
94
- background: rgba(255, 255, 255, 0.1);
95
- padding: 4px 8px;
96
- border-radius: 6px;
97
  transition: all 0.2s ease;
98
  font-weight: 600;
 
 
 
 
99
  }
100
 
101
  .anycoder-link:hover {
102
- color: var(--accent-primary);
103
- background: rgba(0, 255, 157, 0.15);
 
104
  }
105
 
106
- /* --- Layout --- */
107
  main {
 
108
  display: flex;
109
  flex-direction: column;
110
- height: 100%;
111
- overflow: hidden;
112
  position: relative;
113
  }
114
 
115
- /* Central Visualization Area (Top Half) */
116
- .visualizer-container {
117
- flex: 1.2;
118
- position: relative;
119
  display: flex;
120
  justify-content: center;
121
  align-items: center;
122
- border-bottom: 1px solid rgba(255, 255, 255, 0.05);
123
- background: radial-gradient(circle at center, rgba(0, 255, 157, 0.05) 0%, transparent 70%);
 
 
 
 
 
124
  }
125
 
126
- .radar-wrapper {
127
  position: relative;
128
- width: 240px;
129
- height: 240px;
 
 
 
 
 
 
 
 
 
130
  }
131
 
132
  .radar-container {
133
  width: 100%;
134
  height: 100%;
135
- border: 1px solid rgba(0, 255, 157, 0.3);
136
  border-radius: 50%;
137
  position: relative;
138
- background: radial-gradient(circle, transparent 20%, rgba(0, 255, 157, 0.1) 21%, transparent 22%, rgba(0, 255, 157, 0.1) 40%, transparent 41%);
139
- box-shadow: 0 0 30px rgba(0, 255, 157, 0.05);
 
 
 
140
  }
141
 
142
  .radar-sweep {
143
- width: 100%;
144
- height: 100%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
145
  border-radius: 50%;
146
- background: conic-gradient(from 0deg, transparent 0deg, rgba(0, 255, 157, 0.6) 100deg, transparent 100deg);
 
 
 
 
147
  position: absolute;
148
- top: 0;
149
- left: 0;
150
- animation: sweep 2s linear infinite;
151
- opacity: 0.8;
 
 
 
152
  }
153
 
154
- /* iOS specific info cards inside radar */
155
  .status-overlay {
156
  position: absolute;
157
- top: 20px;
158
- width: 100%;
 
159
  display: flex;
160
- justify-content: space-between;
161
- padding: 0 10px;
162
- box-sizing: content-box;
163
  }
164
 
165
  .status-badge {
166
- background: rgba(0, 0, 0, 0.6);
167
- padding: 4px 8px;
168
- border-radius: 6px;
169
- font-family: var(--mono-font);
170
- font-size: 0.7rem;
171
- border: 1px solid rgba(255, 255, 255, 0.1);
172
- backdrop-filter: blur(4px);
173
- }
174
-
175
- .threat-point {
176
- width: 8px;
177
- height: 8px;
178
- background: var(--accent-secondary);
179
- border-radius: 50%;
180
- position: absolute;
181
- box-shadow: 0 0 10px var(--accent-secondary);
182
- transform: scale(0);
183
- animation: pop-in 0.3s forwards, blink 1s infinite;
184
  }
185
 
186
- /* Bottom Panel (Scrollable Content) */
187
- .dashboard-panel {
188
  flex: 1;
189
- padding: 15px;
 
 
190
  display: flex;
191
  flex-direction: column;
192
- gap: 15px;
193
- overflow-y: auto;
194
- background: linear-gradient(to top, #000000 0%, #0a0b10 100%);
195
  }
 
196
 
197
- /* iOS Card Style */
198
  .card {
199
- background: var(--panel-bg);
200
- border-radius: var(--ios-radius);
201
- padding: 15px;
202
- border: 1px solid rgba(255, 255, 255, 0.08);
203
- backdrop-filter: blur(10px);
204
- -webkit-backdrop-filter: blur(10px);
205
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 
206
  }
207
 
208
  .card-header {
209
  display: flex;
210
  justify-content: space-between;
211
  align-items: center;
212
- margin-bottom: 12px;
213
- font-size: 0.9rem;
214
  font-weight: 600;
215
- color: var(--text-main);
216
- letter-spacing: 0.5px;
 
217
  }
218
 
219
- /* Terminal */
220
  .terminal {
221
- background: rgba(0, 0, 0, 0.4);
222
- border-radius: 8px;
223
- padding: 10px;
224
- font-family: var(--mono-font);
225
- font-size: 0.75rem;
226
- color: var(--accent-tertiary);
227
- height: 120px;
 
228
  overflow-y: auto;
229
- border: 1px solid rgba(255, 255, 255, 0.05);
230
- line-height: 1.4;
231
- }
232
-
233
- .terminal-line {
234
- margin-bottom: 4px;
235
- opacity: 0.9;
236
- }
237
-
238
- .terminal-line.error {
239
- color: var(--accent-secondary);
240
- }
241
-
242
- .terminal-line.warn {
243
- color: #ffaa00;
244
- }
245
-
246
- /* Stats */
247
- .stat-row {
248
- margin-bottom: 12px;
249
- }
250
-
251
- .stat-label {
252
- display: flex;
253
- justify-content: space-between;
254
- font-size: 0.75rem;
255
- margin-bottom: 6px;
256
- color: var(--text-dim);
257
- font-weight: 500;
258
- }
259
-
260
- .progress-bar {
261
- height: 6px;
262
- background: rgba(255, 255, 255, 0.1);
263
- border-radius: 3px;
264
- overflow: hidden;
265
- }
266
-
267
- .progress-fill {
268
- height: 100%;
269
- background: var(--accent-primary);
270
- width: 0%;
271
- transition: width 0.4s ease;
272
- box-shadow: 0 0 8px var(--accent-primary);
273
- }
274
-
275
- /* Action Button (iOS Style) */
276
- .scan-btn-container {
277
- margin-top: 5px;
278
  }
279
 
280
  .scan-btn {
281
  width: 100%;
282
- background: rgba(0, 255, 157, 0.1);
283
- color: var(--accent-primary);
284
- border: 1px solid var(--accent-primary);
285
- padding: 14px;
286
- /* Larger for touch */
287
- font-family: var(--ios-font);
288
- font-weight: 600;
289
- font-size: 0.9rem;
290
- cursor: pointer;
291
- border-radius: 12px;
292
- transition: all 0.2s;
293
  text-transform: uppercase;
294
- letter-spacing: 1px;
295
- backdrop-filter: blur(4px);
296
- -webkit-backdrop-filter: blur(4px);
297
- /* iOS active state */
298
- -webkit-tap-highlight-color: transparent;
299
  }
300
 
301
  .scan-btn:active {
302
- /* IMPROVED: Better scale and transition for iOS feel */
303
- background: var(--accent-primary);
304
  color: #000;
305
- transform: scale(0.95);
306
- transition: transform 0.1s;
307
  }
308
 
309
  .scan-btn.scanning {
310
- background: var(--accent-primary);
311
  color: #000;
312
- animation: pulse-glow 1s infinite;
313
  }
314
 
315
- /* Animations */
316
- @keyframes sweep {
317
- 0% {
318
- transform: rotate(0deg);
319
- }
320
-
321
- 100% {
322
- transform: rotate(360deg);
323
- }
324
  }
325
 
326
- @keyframes blink {
327
-
328
- 0%,
329
- 100% {
330
- opacity: 1;
331
- }
332
-
333
- 50% {
334
- opacity: 0.5;
335
- }
336
  }
337
 
338
- @keyframes pop-in {
339
- 0% {
340
- transform: scale(0);
341
- }
 
342
 
343
- 100% {
344
- transform: scale(1);
345
- }
 
346
  }
347
 
348
- @keyframes pulse-glow {
349
- 0% {
350
- box-shadow: 0 0 0 0 rgba(0, 255, 157, 0.4);
351
- }
352
 
353
- 70% {
354
- box-shadow: 0 0 0 10px rgba(0, 255, 157, 0);
355
- }
 
356
 
357
- 100% {
358
- box-shadow: 0 0 0 0 rgba(0, 255, 157, 0);
359
- }
360
  }
361
 
362
- /* --- Media Queries for Tablet/Desktop --- */
363
  @media (min-width: 768px) {
364
- body {
365
- background: #0a0b10;
366
- }
367
-
368
- main {
369
- display: grid;
370
- grid-template-columns: 250px 1fr 300px;
371
- grid-template-rows: 1fr;
372
- padding: 20px;
373
- gap: 20px;
374
- }
375
-
376
- .visualizer-container {
377
- grid-column: 2;
378
- grid-row: 1;
379
- border: 1px solid rgba(255, 255, 255, 0.05);
380
- }
381
-
382
- .dashboard-panel {
383
- grid-column: 3;
384
- grid-row: 1;
385
- overflow-y: none;
386
- /* Reset scroll for desktop grid */
387
- background: transparent;
388
- display: flex;
389
- flex-direction: column;
390
- gap: 20px;
391
  }
392
-
393
- .sidebar {
394
- grid-column: 1;
395
- grid-row: 1;
396
- display: flex;
397
- flex-direction: column;
398
- gap: 10px;
399
- background: var(--panel-bg);
400
- border-radius: var(--ios-radius);
401
- padding: 20px;
402
- border: 1px solid rgba(255, 255, 255, 0.05);
403
- }
404
-
405
- .nav-item {
406
- padding: 12px;
407
- color: var(--text-dim);
408
- cursor: pointer;
409
- border-radius: 8px;
410
- transition: 0.2s;
411
- font-size: 0.9rem;
412
- display: flex;
413
- align-items: center;
414
- gap: 10px;
415
- }
416
-
417
- .nav-item:hover,
418
- .nav-item.active {
419
- background: rgba(0, 255, 157, 0.1);
420
- color: var(--accent-primary);
421
- }
422
-
423
- header {
424
- display: none;
425
- /* Hide header on desktop layout */
426
- }
427
-
428
- /* Desktop Branding - FIXED Visibility */
429
- .desktop-brand {
430
  display: flex !important;
431
- grid-column: 1 / 3;
432
- grid-row: 0;
433
  justify-content: space-between;
434
- padding-bottom: 20px;
 
 
 
435
  }
436
  }
 
 
437
  </style>
438
  </head>
439
-
440
  <body>
441
 
442
- <!-- Header (Mobile Only) -->
443
  <header>
444
  <div class="brand">
445
  <i class="fa-solid fa-shield-halved"></i>
446
  TROJANER
447
  </div>
448
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
 
 
 
449
  </header>
450
 
451
- <!-- Desktop Branding Placeholder (Hidden on mobile via CSS) -->
452
- <div class="desktop-brand" style="display:none;">
453
- <div class="brand" style="font-size: 1.5rem;">TROJANER
454
- <span style="font-size:0.8rem; color:var(--text-dim);">v.2.0 iOS</span>
 
455
  </div>
456
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
 
 
457
  </div>
458
 
459
  <main>
460
-
461
- <!-- Sidebar (Desktop Only) -->
462
- <nav class="sidebar">
463
- <div class="nav-item active"><i class="fa-solid fa-chart-line"></i> Dashboard</div>
464
- <div class="nav-item"><i class="fa-solid fa-bug"></i> Quarantine</div>
465
- <div class="nav-item"><i class="fa-solid fa-network-wired"></i> Network</div>
466
- <div class="nav-item"><i class="fa-solid fa-file-shield"></i> Logs</div>
467
- </nav>
468
-
469
- <!-- Central Visualizer -->
470
- <section class="visualizer-container">
471
- <div class="radar-wrapper">
472
  <div class="radar-container">
473
  <div class="radar-sweep"></div>
474
- <!-- Threat points injected by JS -->
475
  </div>
476
 
477
- <!-- Overlay Stats -->
478
  <div class="status-overlay">
479
- <div class="status-badge" style="color: var(--accent-primary)">
480
- <i class="fa-solid fa-check-circle"></i> SECURE
481
  </div>
482
- <div class="status-badge" id="scan-status-badge" style="color: var(--accent-secondary)">
483
- OFFLINE
484
  </div>
485
  </div>
486
  </div>
487
- </section>
488
-
489
- <!-- Bottom Dashboard Panel -->
490
- <div class="dashboard-panel">
491
 
492
- <!-- Terminal Log -->
 
493
  <div class="card">
494
  <div class="card-header">
495
  <span><i class="fa-solid fa-terminal"></i> SYSTEM LOGS</span>
496
- <i class="fa-solid fa-ellipsis" style="color: var(--text-dim)"></i>
497
  </div>
498
  <div class="terminal" id="terminal">
499
- <div class="terminal-line">> Trojaner Core loaded...</div>
500
- <div class="terminal-line">> Waiting for input...</div>
501
- </div>
502
- <div class="scan-btn-container">
503
- <button class="scan-btn" id="scanBtn" onclick="toggleScan()">INITIATE SCAN</button>
504
  </div>
 
 
 
505
  </div>
506
 
507
- <!-- System Resources -->
508
  <div class="card">
509
  <div class="card-header">
510
- <span><i class="fa-solid fa-microchip"></i> RESOURCES</span>
511
  </div>
512
-
513
- <div class="stat-row">
514
- <div class="stat-label">
515
- <span>CPU LOAD</span>
516
- <span id="cpu-val">12%</span>
517
- </div>
518
- <div class="progress-bar">
519
- <div class="progress-fill" id="cpu-bar" style="width: 12%;"></div>
520
- </div>
521
- </div>
522
-
523
- <div class="stat-row">
524
- <div class="stat-label">
525
- <span>RAM USAGE</span>
526
- <span id="ram-val">24%</span>
527
- </div>
528
- <div class="progress-bar">
529
- <div class="progress-fill" id="ram-bar" style="width: 24%; background-color: #ffaa00;"></div>
530
- </div>
531
- </div>
532
-
533
- <div class="stat-row">
534
- <div class="stat-label">
535
- <span>NETWORK</span>
536
- <span id="net-val">5%</span>
537
- </div>
538
- <div class="progress-bar">
539
- <div class="progress-fill" id="net-bar" style="width: 5%; background-color: #00ff9d;"></div>
540
- </div>
541
  </div>
542
  </div>
543
-
544
  </div>
545
  </main>
546
 
547
  <script>
548
- // --- Logic for the Trojaner Dashboard ---
549
-
550
  const terminal = document.getElementById('terminal');
551
  const scanBtn = document.getElementById('scanBtn');
552
- const scanStatusBadge = document.getElementById('scan-status-badge');
553
  const radarContainer = document.querySelector('.radar-container');
554
-
555
  let isScanning = false;
556
  let scanInterval;
557
 
558
- // Helper to add log lines
559
- function addLog(message, type = 'normal') {
560
- // IMPROVED: Limit log history to 15 lines to prevent overflow
561
- if(terminal.children.length > 15) {
562
- terminal.removeChild(terminal.firstChild);
563
- }
564
-
565
- const line = document.createElement('div');
566
- line.classList.add('terminal-line');
567
- if(type === 'error') line.classList.add('error');
568
- if(type === 'warn') line.classList.add('warn');
569
-
570
- // Add timestamp
571
- const time = new Date().toLocaleTimeString();
572
- line.innerText = `[${time}] ${message}`;
573
-
574
- terminal.appendChild(line);
575
- terminal.scrollTop = terminal.scrollHeight; // Auto scroll
576
  }
577
 
578
- // Helper to create a visual threat point on radar
579
  function createThreat() {
580
- if(!isScanning) return;
581
-
582
- const threat = document.createElement('div');
583
- threat.classList.add('threat-point');
584
-
585
- // IMPROVED: Safer positioning calculation
586
- const size = 240; // Container size
587
- const center = size / 2; // Center point (120)
588
- const r = 0.38 * center; // Radius constraint (approx 45px) to keep inside
589
-
590
- const theta = Math.random() * 360;
591
- const x = Math.cos(theta * Math.PI / 180) * r + center;
592
- const y = Math.sin(theta * Math.PI / 180) * r + center;
593
-
594
- threat.style.left = `${x}px`;
595
- threat.style.top = `${y}px`;
596
-
597
- radarContainer.appendChild(threat);
598
 
599
- // Log the threat
600
- const threats = ["Trojan.Win32", "Malware.Generic", "Suspicious.exe", "Rootkit.Agent", "Keylogger.Detected"];
601
- const randomThreat = threats[Math.floor(Math.random() * threats.length)];
602
- addLog(`> Threat Detected: ${randomThreat}`, 'error');
603
 
604
- // Remove point after animation
605
- setTimeout(() => {
606
- threat.remove();
607
- }, 1000);
 
 
 
 
 
608
  }
609
 
610
  function toggleScan() {
611
- isScanning = !isScanning;
612
-
613
- if (isScanning) {
614
- scanBtn.innerText = "STOP SCAN";
615
- scanBtn.classList.add('scanning');
616
- scanStatusBadge.innerText = "ACTIVE";
617
- scanStatusBadge.style.color = "var(--accent-primary)";
618
- scanStatusBadge.style.borderColor = "var(--accent-primary)";
619
- addLog("> Starting deep system scan...", 'warn');
620
-
621
- // Start generating threats periodically
622
- scanInterval = setInterval(createThreat, 800);
623
- } else {
624
- scanBtn.innerText = "INITIATE SCAN";
625
- scanBtn.classList.remove('scanning');
626
- scanStatusBadge.innerText = "OFFLINE";
627
- scanStatusBadge.style.color = "var(--accent-secondary)";
628
- scanStatusBadge.style.borderColor = "var(--accent-secondary)";
629
- addLog("> Scan terminated.");
630
- clearInterval(scanInterval);
631
-
632
- // Clear radar
633
- const points = document.querySelectorAll('.threat-point');
634
- points.forEach(p => p.remove());
635
- }
636
- }
637
-
638
- // --- Simulate System Stats Fluctuation ---
639
- function updateStats() {
640
- const cpu = Math.floor(Math.random() * 40) + 10; // 10-50%
641
- const ram = Math.floor(Math.random() * 30) + 20; // 20-50%
642
- const net = Math.floor(Math.random() * 20) + 2; // 2-22%
643
-
644
- document.getElementById('cpu-bar').style.width = `${cpu}%`;
645
- document.getElementById('cpu-val').innerText = `${cpu}%`;
646
-
647
- document.getElementById('ram-bar').style.width = `${ram}%`;
648
- document.getElementById('ram-val').innerText = `${ram}%`;
649
-
650
- document.getElementById('net-bar').style.width = `${net}%`;
651
- document.getElementById('net-val').innerText = `${net}%`;
652
- }
653
-
654
- // Update stats every 2 seconds
655
- setInterval(updateStats, 2000);
656
-
657
- // Initial random log entry
658
- setTimeout(() => {
659
- addLog("> System integrity verified.");
660
- }, 1000);
661
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
662
  </script>
663
  </body>
664
-
665
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="de">
 
3
  <head>
4
  <meta charset="UTF-8">
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
 
6
  <meta name="apple-mobile-web-app-capable" content="yes">
7
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
8
+
9
+ <title>TROJANER v2.1 | iOS MONITOR</title>
10
+
11
  <!-- Import FontAwesome -->
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
13
 
14
  <style>
 
 
 
 
 
 
 
 
 
15
  :root {
16
+ --bg: #000000;
17
+ --panel: rgba(15, 18, 25, 0.75);
18
+ --primary: #00ff9d;
19
+ --danger: #ff2a6d;
20
+ --accent: #05d5aa;
21
+ --text: #e0e0e0;
22
+ --dim: #8899aa;
23
+ --radius: 18px;
24
+ --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
25
+ --font-mono: 'Courier New', Courier, monospace;
26
+ }
27
+
28
+ * { margin: 0; padding: 0; box-sizing: border-box; }
29
+
 
 
 
 
 
 
 
30
  body {
31
+ background: var(--bg);
32
+ /* Advanced Background Gradient for "Cyber" feel */
33
+ background-image:
34
+ radial-gradient(circle at 50% 10%, rgba(0, 255, 157, 0.08) 0%, transparent 50%),
35
+ radial-gradient(circle at 80% 90%, rgba(255, 42, 109, 0.06) 0%, transparent 60%);
36
+ color: var(--text);
37
+ font-family: var(--font-main);
38
+ height: 100dvh;
39
  overflow: hidden;
40
  display: flex;
41
  flex-direction: column;
42
+ /* iOS Safe Area */
43
  padding-top: env(safe-area-inset-top);
44
  padding-bottom: env(safe-area-inset-bottom);
45
  }
46
 
47
+ /* --- HEADER --- */
48
  header {
49
+ padding: 12px 20px;
50
+ background: rgba(0,0,0,0.6);
51
+ backdrop-filter: blur(30px);
52
+ -webkit-backdrop-filter: blur(30px);
53
+ border-bottom: 1px solid rgba(255,255,255,0.08);
54
  display: flex;
55
  justify-content: space-between;
56
  align-items: center;
 
 
 
 
 
57
  z-index: 100;
 
58
  }
59
 
60
  .brand {
61
+ font-family: var(--font-mono);
62
+ font-size: 1.35rem;
63
+ font-weight: 700;
64
+ letter-spacing: 2px;
65
+ color: var(--primary);
66
  display: flex;
67
  align-items: center;
68
+ gap: 10px;
69
+ text-shadow: 0 0 10px rgba(0,255,157,0.3);
70
  }
71
 
72
+ .brand::after {
73
+ content: "●";
74
+ color: var(--danger);
75
+ animation: pulse 2s infinite;
76
+ font-size: 0.8rem;
77
+ }
78
+
79
+ /* The Mandatory Link Styling */
80
  .anycoder-link {
81
  font-size: 0.7rem;
82
+ color: var(--dim);
83
  text-decoration: none;
84
+ background: rgba(255, 255, 255, 0.05);
85
+ padding: 4px 10px;
86
+ border-radius: 20px;
87
  transition: all 0.2s ease;
88
  font-weight: 600;
89
+ border: 1px solid rgba(255,255,255,0.1);
90
+ display: flex;
91
+ align-items: center;
92
+ gap: 6px;
93
  }
94
 
95
  .anycoder-link:hover {
96
+ color: var(--primary);
97
+ background: rgba(0, 255, 157, 0.1);
98
+ border-color: var(--primary);
99
  }
100
 
101
+ /* --- MAIN LAYOUT --- */
102
  main {
103
+ flex: 1;
104
  display: flex;
105
  flex-direction: column;
 
 
106
  position: relative;
107
  }
108
 
109
+ /* RADAR - OP Visual */
110
+ .visualizer {
111
+ flex: 1.4;
 
112
  display: flex;
113
  justify-content: center;
114
  align-items: center;
115
+ position: relative;
116
+ background: radial-gradient(circle at center, rgba(0,255,157,0.06) 0%, transparent 70%);
117
+ /* Grid pattern overlay */
118
+ background-image:
119
+ linear-gradient(rgba(0, 255, 157, 0.03) 1px, transparent 1px),
120
+ linear-gradient(90deg, rgba(0, 255, 157, 0.03) 1px, transparent 1px);
121
+ background-size: 40px 40px;
122
  }
123
 
124
+ .radar {
125
  position: relative;
126
+ width: 270px;
127
+ height: 270px;
128
+ perspective: 1000px;
129
+ }
130
+
131
+ .radar-ring {
132
+ position: absolute;
133
+ inset: 0;
134
+ border: 2px solid rgba(0,255,157,0.25);
135
+ border-radius: 50%;
136
+ pointer-events: none;
137
  }
138
 
139
  .radar-container {
140
  width: 100%;
141
  height: 100%;
142
+ border: 1.5px solid rgba(0,255,157,0.4);
143
  border-radius: 50%;
144
  position: relative;
145
+ overflow: hidden;
146
+ box-shadow:
147
+ 0 0 40px rgba(0,255,157,0.15),
148
+ inset 0 0 60px rgba(0,255,157,0.08);
149
+ background: radial-gradient(circle, rgba(0,0,0,0.8) 0%, transparent 100%);
150
  }
151
 
152
  .radar-sweep {
153
+ position: absolute;
154
+ inset: 0;
155
+ background: conic-gradient(
156
+ from 0deg,
157
+ transparent 0deg,
158
+ rgba(0,255,157,0.9) 40deg,
159
+ transparent 120deg
160
+ );
161
+ animation: sweep 1.6s linear infinite;
162
+ opacity: 0.85;
163
+ }
164
+
165
+ .radar-center {
166
+ position: absolute;
167
+ top: 50%;
168
+ left: 50%;
169
+ transform: translate(-50%, -50%);
170
+ width: 18px;
171
+ height: 18px;
172
+ background: var(--primary);
173
  border-radius: 50%;
174
+ box-shadow: 0 0 25px var(--primary);
175
+ z-index: 10;
176
+ }
177
+
178
+ .threat-point {
179
  position: absolute;
180
+ width: 11px;
181
+ height: 11px;
182
+ background: var(--danger);
183
+ border-radius: 50%;
184
+ box-shadow: 0 0 15px var(--danger), 0 0 25px var(--danger);
185
+ animation: threatPop 0.4s forwards, threatBlink 1s infinite;
186
+ z-index: 5;
187
  }
188
 
189
+ /* STATUS */
190
  .status-overlay {
191
  position: absolute;
192
+ top: 30px;
193
+ left: 50%;
194
+ transform: translateX(-50%);
195
  display: flex;
196
+ gap: 12px;
197
+ z-index: 20;
 
198
  }
199
 
200
  .status-badge {
201
+ padding: 6px 14px;
202
+ border-radius: 30px;
203
+ font-size: 0.78rem;
204
+ font-family: var(--font-mono);
205
+ font-weight: 600;
206
+ backdrop-filter: blur(10px);
207
+ -webkit-backdrop-filter: blur(10px);
208
+ box-shadow: 0 4px 10px rgba(0,0,0,0.3);
 
 
 
 
 
 
 
 
 
 
209
  }
210
 
211
+ /* DASHBOARD */
212
+ .dashboard {
213
  flex: 1;
214
+ padding: 18px;
215
+ overflow-y: auto;
216
+ background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.95));
217
  display: flex;
218
  flex-direction: column;
219
+ gap: 18px;
220
+ /* Hide scrollbar for cleaner look */
221
+ scrollbar-width: none;
222
  }
223
+ .dashboard::-webkit-scrollbar { display: none; }
224
 
 
225
  .card {
226
+ background: var(--panel);
227
+ border-radius: var(--radius);
228
+ padding: 18px;
229
+ border: 1px solid rgba(255,255,255,0.07);
230
+ backdrop-filter: blur(15px);
231
+ -webkit-backdrop-filter: blur(15px);
232
+ box-shadow: 0 8px 32px rgba(0,0,0,0.4);
233
+ transition: transform 0.2s ease;
234
  }
235
 
236
  .card-header {
237
  display: flex;
238
  justify-content: space-between;
239
  align-items: center;
240
+ margin-bottom: 16px;
241
+ font-size: 0.95rem;
242
  font-weight: 600;
243
+ color: var(--text);
244
+ text-transform: uppercase;
245
+ letter-spacing: 1px;
246
  }
247
 
 
248
  .terminal {
249
+ background: #0a0c12;
250
+ border: 1px solid rgba(0,255,157,0.15);
251
+ border-radius: 10px;
252
+ padding: 14px;
253
+ height: 160px;
254
+ font-family: var(--font-mono);
255
+ font-size: 0.78rem;
256
+ color: var(--accent);
257
  overflow-y: auto;
258
+ line-height: 1.5;
259
+ box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
260
  }
261
 
262
  .scan-btn {
263
  width: 100%;
264
+ padding: 16px;
265
+ margin-top: 12px;
266
+ background: rgba(0,255,157,0.12);
267
+ color: var(--primary);
268
+ border: 2px solid var(--primary);
269
+ border-radius: 14px;
270
+ font-weight: 700;
271
+ font-size: 1rem;
272
+ letter-spacing: 1.5px;
 
 
273
  text-transform: uppercase;
274
+ transition: all 0.25s ease;
275
+ cursor: pointer;
276
+ position: relative;
277
+ overflow: hidden;
 
278
  }
279
 
280
  .scan-btn:active {
281
+ transform: scale(0.96);
282
+ background: var(--primary);
283
  color: #000;
 
 
284
  }
285
 
286
  .scan-btn.scanning {
287
+ background: var(--primary);
288
  color: #000;
289
+ animation: scanPulse 1.2s infinite;
290
  }
291
 
292
+ /* PROGRESS BARS */
293
+ .progress-bar {
294
+ height: 7px;
295
+ background: rgba(255,255,255,0.08);
296
+ border-radius: 4px;
297
+ overflow: hidden;
298
+ margin: 8px 0;
 
 
299
  }
300
 
301
+ .progress-fill {
302
+ height: 100%;
303
+ background: linear-gradient(90deg, var(--primary), #00cc7a);
304
+ box-shadow: 0 0 12px var(--primary);
305
+ transition: width 0.5s ease;
 
 
 
 
 
306
  }
307
 
308
+ /* ANIMATIONS */
309
+ @keyframes sweep {
310
+ from { transform: rotate(0deg); }
311
+ to { transform: rotate(360deg); }
312
+ }
313
 
314
+ @keyframes threatPop {
315
+ 0% { transform: scale(0); }
316
+ 70% { transform: scale(1.3); }
317
+ 100% { transform: scale(1); }
318
  }
319
 
320
+ @keyframes threatBlink {
321
+ 0%, 100% { opacity: 1; }
322
+ 50% { opacity: 0.3; }
323
+ }
324
 
325
+ @keyframes pulse {
326
+ 0%, 100% { opacity: 1; }
327
+ 50% { opacity: 0.4; }
328
+ }
329
 
330
+ @keyframes scanPulse {
331
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,157,0.6); }
332
+ 70% { box-shadow: 0 0 0 20px rgba(0,255,157,0); }
333
  }
334
 
335
+ /* DESKTOP IMPROVEMENT */
336
  @media (min-width: 768px) {
337
+ main {
338
+ flex-direction: row;
339
+ padding: 25px;
340
+ gap: 25px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
341
  }
342
+ .visualizer { flex: 1; }
343
+ .dashboard { flex: 0.9; }
344
+
345
+ header { display: none; } /* Hide mobile header on desktop */
346
+
347
+ /* Desktop Header replacement */
348
+ .desktop-header {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
349
  display: flex !important;
 
 
350
  justify-content: space-between;
351
+ align-items: center;
352
+ padding: 20px;
353
+ background: rgba(0,0,0,0.8);
354
+ border-bottom: 1px solid rgba(255,255,255,0.1);
355
  }
356
  }
357
+
358
+ .desktop-header { display: none; }
359
  </style>
360
  </head>
 
361
  <body>
362
 
363
+ <!-- Mobile Header -->
364
  <header>
365
  <div class="brand">
366
  <i class="fa-solid fa-shield-halved"></i>
367
  TROJANER
368
  </div>
369
+ <!-- Mandatory Link -->
370
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">
371
+ Built with anycoder
372
+ </a>
373
  </header>
374
 
375
+ <!-- Desktop Header (Hidden on mobile) -->
376
+ <div class="desktop-header">
377
+ <div class="brand" style="font-size: 1.8rem;">
378
+ <i class="fa-solid fa-network-wired"></i>
379
+ TROJANER v2.1
380
  </div>
381
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" style="font-size: 0.9rem; padding: 8px 16px;">
382
+ <i class="fa-solid fa-code"></i> Built with anycoder
383
+ </a>
384
  </div>
385
 
386
  <main>
387
+ <!-- Radar -->
388
+ <div class="visualizer">
389
+ <div class="radar">
390
+ <div class="radar-ring" style="inset: 15px;"></div>
391
+ <div class="radar-ring" style="inset: 45px;"></div>
392
+
 
 
 
 
 
 
393
  <div class="radar-container">
394
  <div class="radar-sweep"></div>
395
+ <div class="radar-center"></div>
396
  </div>
397
 
 
398
  <div class="status-overlay">
399
+ <div class="status-badge" style="background: rgba(0,255,157,0.15); color: var(--primary); border: 1px solid var(--primary);">
400
+ <i class="fa-solid fa-shield-halved"></i> SYSTEM SECURE
401
  </div>
402
+ <div class="status-badge" id="scan-status" style="background: rgba(255,42,109,0.15); color: var(--danger); border: 1px solid var(--danger);">
403
+ SCAN OFFLINE
404
  </div>
405
  </div>
406
  </div>
407
+ </div>
 
 
 
408
 
409
+ <!-- Dashboard -->
410
+ <div class="dashboard">
411
  <div class="card">
412
  <div class="card-header">
413
  <span><i class="fa-solid fa-terminal"></i> SYSTEM LOGS</span>
414
+ <i class="fa-solid fa-circle" style="color: var(--primary); font-size: 10px;"></i>
415
  </div>
416
  <div class="terminal" id="terminal">
417
+ <div class="terminal-line">> TROJANER CORE v2.1 INITIALIZED</div>
418
+ <div class="terminal-line">> Awaiting command...</div>
 
 
 
419
  </div>
420
+ <button class="scan-btn" id="scanBtn" onclick="toggleScan()">
421
+ INITIATE DEEP SCAN
422
+ </button>
423
  </div>
424
 
 
425
  <div class="card">
426
  <div class="card-header">
427
+ <span><i class="fa-solid fa-microchip"></i> SYSTEM RESOURCES</span>
428
  </div>
429
+ <div id="resources">
430
+ <!-- JS fills this -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
431
  </div>
432
  </div>
 
433
  </div>
434
  </main>
435
 
436
  <script>
 
 
437
  const terminal = document.getElementById('terminal');
438
  const scanBtn = document.getElementById('scanBtn');
439
+ const scanStatus = document.getElementById('scan-status');
440
  const radarContainer = document.querySelector('.radar-container');
441
+
442
  let isScanning = false;
443
  let scanInterval;
444
 
445
+ function addLog(msg, type = '') {
446
+ if (terminal.children.length > 16) terminal.removeChild(terminal.firstChild);
447
+
448
+ const line = document.createElement('div');
449
+ line.className = `terminal-line ${type}`;
450
+ const time = new Date().toLocaleTimeString('de-DE', {hour: '2-digit', minute: '2-digit'});
451
+ line.innerHTML = `<span style="color:#555">[${time}]</span> ${msg}`;
452
+ terminal.appendChild(line);
453
+ terminal.scrollTop = terminal.scrollHeight;
 
 
 
 
 
 
 
 
 
454
  }
455
 
 
456
  function createThreat() {
457
+ if (!isScanning) return;
458
+
459
+ const threat = document.createElement('div');
460
+ threat.className = 'threat-point';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
461
 
462
+ const angle = Math.random() * 360;
463
+ const distance = 50 + Math.random() * 75;
464
+ const x = 135 + Math.cos(angle * Math.PI / 180) * distance;
465
+ const y = 135 + Math.sin(angle * Math.PI / 180) * distance;
466
 
467
+ threat.style.left = `${x}px`;
468
+ threat.style.top = `${y}px`;
469
+
470
+ radarContainer.appendChild(threat);
471
+
472
+ const threats = ["Trojan.Win32", "Rootkit.Agent", "Keylogger.Detected", "RAT.Generic", "Spyware.IO", "Backdoor.PS"];
473
+ addLog(`THREAT DETECTED → <span style="color:#ff2a6d">${threats[Math.floor(Math.random()*threats.length)]}</span>`, 'error');
474
+
475
+ setTimeout(() => threat.remove(), 1400);
476
  }
477
 
478
  function toggleScan() {
479
+ isScanning = !isScanning;
480
+
481
+ if (isScanning) {
482
+ scanBtn.textContent = "ABORT SCAN";
483
+ scanBtn.classList.add('scanning');
484
+ scanStatus.textContent = "SCAN ACTIVE";
485
+ scanStatus.style.color = "#00ff9d";
486
+ scanStatus.style.borderColor = "#00ff9d";
487
+ addLog("DEEP SYSTEM SCAN INITIATED...", "warn");
488
+ scanInterval = setInterval(createThreat, 650);
489
+ } else {
490
+ scanBtn.textContent = "INITIATE DEEP SCAN";
491
+ scanBtn.classList.remove('scanning');
492
+ scanStatus.textContent = "SCAN OFFLINE";
493
+ scanStatus.style.color = "#ff2a6d";
494
+ scanStatus.style.borderColor = "#ff2a6d";
495
+ addLog("SCAN ABORTED BY USER");
496
+ clearInterval(scanInterval);
497
+ document.querySelectorAll('.threat-point').forEach(el => el.remove());
498
+ }
499
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
500
 
501
+ // Resources Simulation
502
+ function updateResources() {
503
+ const resourcesHTML = `
504
+ <div style="margin-bottom:14px">
505
+ <div style="display:flex;justify-content:space-between;font-size:0.82rem;margin-bottom:6px">
506
+ <span>CPU LOAD</span><span id="cpu">23%</span>
507
+ </div>
508
+ <div class="progress-bar"><div class="progress-fill" id="cpuBar" style="width:23%"></div></div>
509
+ </div>
510
+ <div style="margin-bottom:14px">
511
+ <div style="display:flex;justify-content:space-between;font-size:0.82rem;margin-bottom:6px">
512
+ <span>RAM USAGE</span><span id="ram">47%</span>
513
+ </div>
514
+ <div class="progress-bar"><div class="progress-fill" id="ramBar" style="width:47%;background:#ffaa00"></div></div>
515
+ </div>
516
+ <div>
517
+ <div style="display:flex;justify-content:space-between;font-size:0.82rem;margin-bottom:6px">
518
+ <span>NETWORK ACTIVITY</span><span id="net">12%</span>
519
+ </div>
520
+ <div class="progress-bar"><div class="progress-fill" id="netBar" style="width:12%"></div></div>
521
+ </div>
522
+ `;
523
+ document.getElementById('resources').innerHTML = resourcesHTML;
524
+ }
525
+
526
+ function fluctuateResources() {
527
+ const cpu = 15 + Math.random() * 45;
528
+ const ram = 30 + Math.random() * 45;
529
+ const net = 5 + Math.random() * 25;
530
+
531
+ document.getElementById('cpu').textContent = Math.floor(cpu) + '%';
532
+ document.getElementById('cpuBar').style.width = cpu + '%';
533
+
534
+ document.getElementById('ram').textContent = Math.floor(ram) + '%';
535
+ document.getElementById('ramBar').style.width = ram + '%';
536
+
537
+ document.getElementById('net').textContent = Math.floor(net) + '%';
538
+ document.getElementById('netBar').style.width = net + '%';
539
+ }
540
+
541
+ // Init
542
+ updateResources();
543
+ setInterval(fluctuateResources, 1400);
544
+
545
+ setTimeout(() => {
546
+ addLog("SYSTEM INTEGRITY CHECK PASSED", "warn");
547
+ }, 800);
548
  </script>
549
  </body>
 
550
  </html>