Hugging Face's logo

Spaces:
Romari1132
/
anycoder-e97b9e2c
Running

App Files Community
Romari1132 commited on
Commit
92652fd
·
verified ·
1 Parent(s): 798d3ae

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +669 -19
index.html CHANGED
@@ -1,19 +1,669 @@
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>Web3 Security Simulator | Transaction Audit Tool</title>
7
+ <!-- Importing a modern font -->
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
9
+ <!-- Importing FontAwesome for Icons -->
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+
12
+ <style>
13
+ :root {
14
+ --primary: #00f0ff;
15
+ --primary-dim: rgba(0, 240, 255, 0.1);
16
+ --secondary: #7000ff;
17
+ --bg-dark: #0a0b10;
18
+ --bg-panel: #13151a;
19
+ --text-main: #ffffff;
20
+ --text-muted: #8b9bb4;
21
+ --danger: #ff2a6d;
22
+ --success: #05ffa1;
23
+ --warning: #ffcc00;
24
+ --border: #2a2d35;
25
+ --radius: 12px;
26
+ --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
27
+ }
28
+
29
+ * {
30
+ box-sizing: border-box;
31
+ margin: 0;
32
+ padding: 0;
33
+ }
34
+
35
+ body {
36
+ font-family: 'Inter', sans-serif;
37
+ background-color: var(--bg-dark);
38
+ color: var(--text-main);
39
+ min-height: 100vh;
40
+ display: flex;
41
+ flex-direction: column;
42
+ overflow-x: hidden;
43
+ }
44
+
45
+ /* Utility Classes */
46
+ .mono { font-family: 'JetBrains Mono', monospace; }
47
+ .flex { display: flex; }
48
+ .flex-col { flex-direction: column; }
49
+ .items-center { align-items: center; }
50
+ .justify-between { justify-content: space-between; }
51
+ .gap-2 { gap: 0.5rem; }
52
+ .gap-4 { gap: 1rem; }
53
+ .text-center { text-align: center; }
54
+ .w-full { width: 100%; }
55
+ .hidden { display: none !important; }
56
+
57
+ /* Header */
58
+ header {
59
+ background: rgba(19, 21, 26, 0.8);
60
+ backdrop-filter: blur(10px);
61
+ border-bottom: 1px solid var(--border);
62
+ padding: 1rem 2rem;
63
+ position: sticky;
64
+ top: 0;
65
+ z-index: 100;
66
+ }
67
+
68
+ .brand {
69
+ font-size: 1.25rem;
70
+ font-weight: 700;
71
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
72
+ -webkit-background-clip: text;
73
+ -webkit-text-fill-color: transparent;
74
+ letter-spacing: -0.5px;
75
+ }
76
+
77
+ .attribution {
78
+ font-size: 0.85rem;
79
+ color: var(--text-muted);
80
+ }
81
+
82
+ .attribution a {
83
+ color: var(--primary);
84
+ text-decoration: none;
85
+ transition: opacity 0.2s;
86
+ }
87
+
88
+ .attribution a:hover {
89
+ opacity: 0.8;
90
+ text-decoration: underline;
91
+ }
92
+
93
+ /* Main Layout */
94
+ main {
95
+ flex: 1;
96
+ display: grid;
97
+ grid-template-columns: 350px 1fr;
98
+ gap: 2rem;
99
+ padding: 2rem;
100
+ max-width: 1400px;
101
+ margin: 0 auto;
102
+ width: 100%;
103
+ }
104
+
105
+ @media (max-width: 900px) {
106
+ main {
107
+ grid-template-columns: 1fr;
108
+ }
109
+ }
110
+
111
+ /* Panels */
112
+ .panel {
113
+ background: var(--bg-panel);
114
+ border: 1px solid var(--border);
115
+ border-radius: var(--radius);
116
+ padding: 1.5rem;
117
+ box-shadow: var(--shadow);
118
+ position: relative;
119
+ overflow: hidden;
120
+ }
121
+
122
+ .panel::before {
123
+ content: '';
124
+ position: absolute;
125
+ top: 0;
126
+ left: 0;
127
+ width: 100%;
128
+ height: 2px;
129
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
130
+ }
131
+
132
+ h2 {
133
+ font-size: 1.1rem;
134
+ margin-bottom: 1.5rem;
135
+ color: var(--text-muted);
136
+ text-transform: uppercase;
137
+ letter-spacing: 1px;
138
+ font-weight: 600;
139
+ }
140
+
141
+ /* Chain Selector */
142
+ .chain-selector {
143
+ display: grid;
144
+ grid-template-columns: repeat(3, 1fr);
145
+ gap: 0.5rem;
146
+ margin-bottom: 1.5rem;
147
+ background: var(--bg-dark);
148
+ padding: 0.25rem;
149
+ border-radius: 8px;
150
+ border: 1px solid var(--border);
151
+ }
152
+
153
+ .chain-btn {
154
+ background: transparent;
155
+ border: none;
156
+ color: var(--text-muted);
157
+ padding: 0.75rem;
158
+ border-radius: 6px;
159
+ cursor: pointer;
160
+ transition: all 0.3s ease;
161
+ font-weight: 600;
162
+ display: flex;
163
+ align-items: center;
164
+ justify-content: center;
165
+ gap: 0.5rem;
166
+ }
167
+
168
+ .chain-btn:hover {
169
+ color: var(--text-main);
170
+ background: rgba(255, 255, 255, 0.05);
171
+ }
172
+
173
+ .chain-btn.active {
174
+ background: var(--primary-dim);
175
+ color: var(--primary);
176
+ border: 1px solid rgba(0, 240, 255, 0.2);
177
+ }
178
+
179
+ /* Wallet Simulation */
180
+ .wallet-status {
181
+ background: rgba(5, 255, 161, 0.05);
182
+ border: 1px solid rgba(5, 255, 161, 0.2);
183
+ border-radius: 8px;
184
+ padding: 1rem;
185
+ margin-bottom: 1.5rem;
186
+ display: flex;
187
+ align-items: center;
188
+ justify-content: space-between;
189
+ }
190
+
191
+ .status-indicator {
192
+ display: flex;
193
+ align-items: center;
194
+ gap: 0.5rem;
195
+ font-size: 0.9rem;
196
+ color: var(--success);
197
+ }
198
+
199
+ .status-dot {
200
+ width: 8px;
201
+ height: 8px;
202
+ background: var(--success);
203
+ border-radius: 50%;
204
+ box-shadow: 0 0 8px var(--success);
205
+ animation: pulse 2s infinite;
206
+ }
207
+
208
+ @keyframes pulse {
209
+ 0% { opacity: 1; }
210
+ 50% { opacity: 0.4; }
211
+ 100% { opacity: 1; }
212
+ }
213
+
214
+ .address {
215
+ font-family: 'JetBrains Mono', monospace;
216
+ font-size: 0.9rem;
217
+ background: rgba(0, 0, 0, 0.3);
218
+ padding: 0.25rem 0.5rem;
219
+ border-radius: 4px;
220
+ }
221
+
222
+ /* Action Buttons */
223
+ .btn {
224
+ background: linear-gradient(135deg, var(--secondary), #4a00e0);
225
+ color: white;
226
+ border: none;
227
+ padding: 1rem;
228
+ border-radius: 8px;
229
+ font-weight: 600;
230
+ cursor: pointer;
231
+ width: 100%;
232
+ transition: transform 0.2s, box-shadow 0.2s;
233
+ font-size: 1rem;
234
+ display: flex;
235
+ align-items: center;
236
+ justify-content: center;
237
+ gap: 0.75rem;
238
+ position: relative;
239
+ overflow: hidden;
240
+ }
241
+
242
+ .btn:hover {
243
+ transform: translateY(-2px);
244
+ box-shadow: 0 4px 20px rgba(112, 0, 255, 0.4);
245
+ }
246
+
247
+ .btn:active {
248
+ transform: translateY(0);
249
+ }
250
+
251
+ .btn::after {
252
+ content: '';
253
+ position: absolute;
254
+ top: 0;
255
+ left: -100%;
256
+ width: 100%;
257
+ height: 100%;
258
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
259
+ transition: 0.5s;
260
+ }
261
+
262
+ .btn:hover::after {
263
+ left: 100%;
264
+ }
265
+
266
+ .btn-danger {
267
+ background: linear-gradient(135deg, #ff2a6d, #d60038);
268
+ }
269
+
270
+ .btn-danger:hover {
271
+ box-shadow: 0 4px 20px rgba(255, 42, 109, 0.4);
272
+ }
273
+
274
+ /* Transaction Simulation Area */
275
+ .simulation-area {
276
+ min-height: 300px;
277
+ display: flex;
278
+ flex-direction: column;
279
+ gap: 1rem;
280
+ }
281
+
282
+ .tx-card {
283
+ background: var(--bg-dark);
284
+ border: 1px solid var(--border);
285
+ border-radius: 8px;
286
+ padding: 1rem;
287
+ position: relative;
288
+ }
289
+
290
+ .tx-header {
291
+ display: flex;
292
+ justify-content: space-between;
293
+ margin-bottom: 0.5rem;
294
+ font-size: 0.9rem;
295
+ color: var(--text-muted);
296
+ }
297
+
298
+ .tx-amount {
299
+ font-size: 1.5rem;
300
+ font-weight: 700;
301
+ color: var(--text-main);
302
+ margin-bottom: 0.5rem;
303
+ }
304
+
305
+ .tx-details {
306
+ font-size: 0.85rem;
307
+ color: var(--text-muted);
308
+ line-height: 1.6;
309
+ }
310
+
311
+ .tx-details span {
312
+ color: var(--primary);
313
+ }
314
+
315
+ /* Audit Panel */
316
+ .audit-log {
317
+ background: #000;
318
+ border: 1px solid var(--border);
319
+ border-radius: 6px;
320
+ padding: 1rem;
321
+ font-family: 'JetBrains Mono', monospace;
322
+ font-size: 0.8rem;
323
+ height: 300px;
324
+ overflow-y: auto;
325
+ color: #d4d4d4;
326
+ }
327
+
328
+ .log-entry {
329
+ margin-bottom: 0.5rem;
330
+ border-bottom: 1px solid #222;
331
+ padding-bottom: 0.25rem;
332
+ }
333
+
334
+ .log-time { color: #569cd6; margin-right: 0.5rem; }
335
+ .log-warn { color: var(--warning); }
336
+ .log-danger { color: var(--danger); }
337
+ .log-info { color: var(--primary); }
338
+ .log-success { color: var(--success); }
339
+
340
+ /* Modal / Toast */
341
+ .toast-container {
342
+ position: fixed;
343
+ bottom: 2rem;
344
+ right: 2rem;
345
+ display: flex;
346
+ flex-direction: column;
347
+ gap: 1rem;
348
+ z-index: 1000;
349
+ }
350
+
351
+ .toast {
352
+ background: rgba(19, 21, 26, 0.95);
353
+ backdrop-filter: blur(10px);
354
+ border-left: 4px solid var(--primary);
355
+ padding: 1rem 1.5rem;
356
+ border-radius: 4px;
357
+ box-shadow: 0 10px 30px rgba(0,0,0,0.5);
358
+ display: flex;
359
+ align-items: center;
360
+ gap: 1rem;
361
+ transform: translateX(120%);
362
+ transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
363
+ color: white;
364
+ min-width: 300px;
365
+ }
366
+
367
+ .toast.show { transform: translateX(0); }
368
+ .toast.error { border-color: var(--danger); }
369
+ .toast.warning { border-color: var(--warning); }
370
+
371
+ /* Educational Badges */
372
+ .badge {
373
+ display: inline-block;
374
+ padding: 0.25rem 0.5rem;
375
+ border-radius: 4px;
376
+ font-size: 0.7rem;
377
+ font-weight: 700;
378
+ text-transform: uppercase;
379
+ margin-right: 0.5rem;
380
+ }
381
+ .badge-danger { background: rgba(255, 42, 109, 0.2); color: var(--danger); border: 1px solid var(--danger); }
382
+ .badge-safe { background: rgba(5, 255, 161, 0.2); color: var(--success); border: 1px solid var(--success); }
383
+
384
+ /* Loader */
385
+ .loader {
386
+ width: 20px;
387
+ height: 20px;
388
+ border: 2px solid rgba(255,255,255,0.3);
389
+ border-top-color: white;
390
+ border-radius: 50%;
391
+ animation: spin 0.8s linear infinite;
392
+ }
393
+ @keyframes spin { to { transform: rotate(360deg); } }
394
+
395
+ </style>
396
+ </head>
397
+ <body>
398
+
399
+ <header class="flex justify-between items-center">
400
+ <div class="brand">
401
+ <i class="fa-solid fa-shield-halved"></i> SECURE<span class="text-muted">SIM</span>
402
+ </div>
403
+ <div class="attribution">
404
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
405
+ </div>
406
+ </header>
407
+
408
+ <main>
409
+ <!-- Sidebar / Controls -->
410
+ <section class="flex flex-col gap-4">
411
+
412
+ <div class="panel">
413
+ <h2><i class="fa-solid fa-network-wired"></i> Network Selection</h2>
414
+ <div class="chain-selector">
415
+ <button class="chain-btn active" onclick="setChain('eth')">
416
+ <i class="fa-brands fa-ethereum"></i> ETH
417
+ </button>
418
+ <button class="chain-btn" onclick="setChain('sol')">
419
+ <i class="fa-solid fa-cube"></i> SOL
420
+ </button>
421
+ <button class="chain-btn" onclick="setChain('ton')">
422
+ <i class="fa-solid fa-gem"></i> TON
423
+ </button>
424
+ </div>
425
+
426
+ <div class="wallet-status">
427
+ <div class="status-indicator">
428
+ <div class="status-dot"></div>
429
+ <span>Wallet Connected</span>
430
+ </div>
431
+ <div class="address mono" id="walletAddress">0x71C...9A2</div>
432
+ </div>
433
+
434
+ <button class="btn" id="actionBtn" onclick="simulateAction()">
435
+ <i class="fa-solid fa-file-signature"></i> Simulate Permit Signature
436
+ </button>
437
+ <p style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-muted); text-align: center;">
438
+ Simulates user interaction without real transaction.
439
+ </p>
440
+ </div>
441
+
442
+ <div class="panel">
443
+ <h2><i class="fa-solid fa-graduation-cap"></i> Knowledge Base</h2>
444
+ <div style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.5;">
445
+ <p style="margin-bottom: 0.5rem;"><strong style="color: var(--text-main);">Permit Signatures:</strong> Allow you to approve token spending without gas. Malicious sites often ask for infinite approval (<span class="mono">type(uint256).max</span>).</p>
446
+ <p><strong style="color: var(--text-main);">Blind Signing:</strong> Never sign a transaction you cannot decode. Drainers use obfuscated data to hide the true transfer destination.</p>
447
+ </div>
448
+ </div>
449
+
450
+ </section>
451
+
452
+ <!-- Main Content / Simulation -->
453
+ <section class="panel flex flex-col">
454
+ <h2><i class="fa-solid fa-magnifying-glass-chart"></i> Transaction Analysis & Simulation</h2>
455
+
456
+ <div class="simulation-area" id="simArea">
457
+ <!-- Dynamic Content Loaded via JS -->
458
+ <div style="text-align: center; padding: 3rem; color: var(--text-muted);">
459
+ <i class="fa-solid fa-circle-info" style="font-size: 3rem; margin-bottom: 1rem; opacity: 0.5;"></i>
460
+ <p>Select a network and click "Simulate" to analyze a potential drainer attack vector.</p>
461
+ </div>
462
+ </div>
463
+
464
+ <div style="margin-top: auto;">
465
+ <h2><i class="fa-solid fa-terminal"></i> Security Audit Log</h2>
466
+ <div class="audit-log" id="auditLog">
467
+ <div class="log-entry"><span class="log-time">[SYSTEM]</span> Ready to analyze transactions...</div>
468
+ </div>
469
+ </div>
470
+ </section>
471
+ </main>
472
+
473
+ <div class="toast-container" id="toastContainer"></div>
474
+
475
+ <script>
476
+ // --- State Management ---
477
+ let currentChain = 'eth';
478
+
479
+ // --- Mock Data ---
480
+ const WALLET_ADDRESSES = {
481
+ eth: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
482
+ sol: '7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU',
483
+ ton: 'UQCj8nQY...kJhL4'
484
+ };
485
+
486
+ const ATTACK_SCENARIOS = {
487
+ eth: {
488
+ title: "EIP-2612 Permit (Max Approval)",
489
+ details: `Token: USDT (Tether)<br>
490
+ Spender: 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045<br>
491
+ Owner: <span class="mono">${WALLET_ADDRESSES.eth}</span><br>
492
+ Value: <span class="mono">115792089237316195423570985008687907853269984665640564039457584007913129639935</span> (MaxUint256)`,
493
+ risk: "CRITICAL",
494
+ explanation: "This signature grants the spender permission to withdraw ALL your tokens. The spender address is unknown/unverified. This is a classic drainer pattern.",
495
+ type: 'danger'
496
+ },
497
+ sol: {
498
+ title: "SPL Token-2022 Transfer (Jito Bundle)",
499
+ details: `Token: BONK<br>
500
+ From: <span class="mono">${WALLET_ADDRESSES.sol}</span><br>
501
+ To: Hotwallet 4x9...kL2<br>
502
+ Authority: Derived Account<br>
503
+ Compute Budget: 1,000,000 CU`,
504
+ risk: "HIGH",
505
+ explanation: "Transaction includes a large compute budget often used in MEV/Jito bundles to front-run legitimate transactions. The destination address is a fresh 'hotwallet'.",
506
+ type: 'warning'
507
+ },
508
+ ton: {
509
+ title: "Jetton Transfer & Forward Payload",
510
+ details: `Jetton: NOTCOIN<br>
511
+ Sender: <span class="mono">${WALLET_ADDRESSES.ton}</span><br>
512
+ Recipient: EQDA4...Lq92<br>
513
+ Forward Payload: 0xfeed... (Telematics Data)`,
514
+ risk: "MEDIUM",
515
+ explanation: "Includes a forward payload which can trigger arbitrary logic in the receiving wallet. Combined with a mass transfer BOC, this could drain multiple assets.",
516
+ type: 'warning'
517
+ }
518
+ };
519
+
520
+ // --- Core Functions ---
521
+
522
+ function setChain(chain) {
523
+ currentChain = chain;
524
+
525
+ // Update UI
526
+ document.querySelectorAll('.chain-btn').forEach(btn => btn.classList.remove('active'));
527
+ event.currentTarget.classList.add('active');
528
+
529
+ // Update Address
530
+ document.getElementById('walletAddress').innerText = WALLET_ADDRESSES[chain];
531
+
532
+ // Reset Sim Area
533
+ document.getElementById('simArea').innerHTML = `
534
+ <div style="text-align: center; padding: 3rem; color: var(--text-muted);">
535
+ <i class="fa-solid fa-circle-info" style="font-size: 3rem; margin-bottom: 1rem; opacity: 0.5;"></i>
536
+ <p>Ready to simulate ${chain.toUpperCase()} transaction.</p>
537
+ </div>
538
+ `;
539
+
540
+ log(`[INFO] Network switched to ${chain.toUpperCase()}`, 'info');
541
+ }
542
+
543
+ function simulateAction() {
544
+ const btn = document.getElementById('actionBtn');
545
+ const originalText = btn.innerHTML;
546
+
547
+ // Loading State
548
+ btn.innerHTML = '<div class="loader"></div> Processing...';
549
+ btn.disabled = true;
550
+
551
+ log(`[SIM] Initiating connection check...`, 'info');
552
+
553
+ setTimeout(() => {
554
+ log(`[SIM] Requesting signature from wallet...`, 'warn');
555
+
556
+ setTimeout(() => {
557
+ renderScenario(currentChain);
558
+ btn.innerHTML = originalText;
559
+ btn.disabled = false;
560
+ showToast('Transaction Simulated Successfully', 'success');
561
+ }, 1500);
562
+
563
+ }, 1000);
564
+ }
565
+
566
+ function renderScenario(chain) {
567
+ const data = ATTACK_SCENARIOS[chain];
568
+ const badgeClass = data.type === 'danger' ? 'badge-danger' : 'badge-safe'; // Simplified logic for demo
569
+ const borderColor = data.type === 'danger' ? 'var(--danger)' : 'var(--warning)';
570
+
571
+ const html = `
572
+ <div class="tx-card" style="border-left: 4px solid ${borderColor}">
573
+ <div class="tx-header">
574
+ <span><span class="badge ${badgeClass}">${data.risk} RISK</span> INCOMING REQUEST</span>
575
+ <i class="fa-solid fa-triangle-exclamation" style="color: ${borderColor}"></i>
576
+ </div>
577
+ <h3 style="margin-bottom: 0.5rem;">${data.title}</h3>
578
+ <div class="tx-details">
579
+ ${data.details}
580
+ </div>
581
+ </div>
582
+
583
+ <div style="background: rgba(255, 255, 255, 0.03); padding: 1rem; border-radius: 8px; border: 1px dashed var(--border);">
584
+ <h4 style="color: var(--text-main); margin-bottom: 0.5rem; font-size: 0.9rem;"><i class="fa-solid fa-user-shield"></i> Security Analysis:</h4>
585
+ <p style="font-size: 0.9rem; color: var(--text-muted);">${data.explanation}</p>
586
+ </div>
587
+
588
+ <div class="flex gap-4">
589
+ <button class="btn btn-danger" onclick="rejectTx()">
590
+ <i class="fa-solid fa-ban"></i> Reject (Safe)
591
+ </button>
592
+ <button class="btn" style="opacity: 0.5; cursor: not-allowed;" disabled>
593
+ <i class="fa-solid fa-check"></i> Approve (Blocked)
594
+ </button>
595
+ </div>
596
+ `;
597
+
598
+ document.getElementById('simArea').innerHTML = html;
599
+ log(`[AUDIT] Detected potential malicious pattern in ${chain.toUpperCase()} request.`, data.type === 'danger' ? 'danger' : 'warn');
600
+ }
601
+
602
+ function rejectTx() {
603
+ document.getElementById('simArea').innerHTML = `
604
+ <div style="text-align: center; padding: 2rem;">
605
+ <i class="fa-solid fa-shield-cat" style="font-size: 3rem; color: var(--success); margin-bottom: 1rem;"></i>
606
+ <h3 style="color: var(--success);">Transaction Rejected</h3>
607
+ <p style="color: var(--text-muted); margin-top: 0.5rem;">Your wallet remains secure. The signature was not broadcasted.</p>
608
+ </div>
609
+ `;
610
+ log('[SAFE] User rejected the malicious signature request.', 'success');
611
+ showToast('Attack Blocked!', 'success');
612
+ }
613
+
614
+ // --- Utility Functions ---
615
+
616
+ function log(message, type = 'info') {
617
+ const logContainer = document.getElementById('auditLog');
618
+ const time = new Date().toLocaleTimeString('en-US', { hour12: false });
619
+
620
+ let classModifier = '';
621
+ if (type === 'warn') classModifier = 'log-warn';
622
+ if (type === 'danger') classModifier = 'log-danger';
623
+ if (type === 'success') classModifier = 'log-success';
624
+ if (type === 'info') classModifier = 'log-info';
625
+
626
+ const entry = document.createElement('div');
627
+ entry.className = 'log-entry';
628
+ entry.innerHTML = `<span class="log-time">[${time}]</span><span class="${classModifier}">${message}</span>`;
629
+
630
+ logContainer.appendChild(entry);
631
+ logContainer.scrollTop = logContainer.scrollHeight;
632
+ }
633
+
634
+ function showToast(message, type = 'info') {
635
+ const container = document.getElementById('toastContainer');
636
+ const toast = document.createElement('div');
637
+ toast.className = `toast ${type}`;
638
+
639
+ let icon = 'fa-circle-info';
640
+ if (type === 'success') icon = 'fa-circle-check';
641
+ if (type === 'error') icon = 'fa-circle-xmark';
642
+ if (type === 'warning') icon = 'fa-triangle-exclamation';
643
+
644
+ toast.innerHTML = `<i class="fa-solid ${icon}"></i> <span>${message}</span>`;
645
+
646
+ container.appendChild(toast);
647
+
648
+ // Trigger animation
649
+ requestAnimationFrame(() => {
650
+ toast.classList.add('show');
651
+ });
652
+
653
+ setTimeout(() => {
654
+ toast.classList.remove('show');
655
+ setTimeout(() => {
656
+ toast.remove();
657
+ }, 300);
658
+ }, 3000);
659
+ }
660
+
661
+ // --- Initialization ---
662
+ window.addEventListener('DOMContentLoaded', () => {
663
+ log('[SYSTEM] Web3 Security Simulator initialized.', 'info');
664
+ log('[SYSTEM] Fingerprint spoofing: Disabled (Educational Mode)', 'info');
665
+ });
666
+
667
+ </script>
668
+ </body>
669
+ </html>