|
|
<!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; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<div class="text-center mb-10"> |
|
|
<h1 class="text-3xl font-bold text-gray-800 mb-2">Advanced Persistent Threat Kill Chain</h1> |
|
|
<p class="text-gray-600 max-w-3xl mx-auto">Visualization of the complete attack flow with interactive defense detection points</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-xl font-semibold text-gray-800">Attack Flow Timeline</h2> |
|
|
<p class="text-gray-500 text-sm">Click on any attack phase to view detailed forensic evidence</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"> |
|
|
<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"> |
|
|
<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"> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="timeline-connector w-24" style="background: linear-gradient(90deg, #3b82f6, #9ca3af);"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
<div class="lg:col-span-2"> |
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> |
|
|
<div class="border-b border-gray-200 px-6 py-4 bg-gray-50"> |
|
|
<h3 class="font-semibold text-gray-800">Attack Phase Forensic Details</h3> |
|
|
</div> |
|
|
<div id="attack-details" class="p-6"> |
|
|
<div class="text-center py-12"> |
|
|
<div class="mx-auto w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-mouse-pointer text-blue-500 text-2xl"></i> |
|
|
</div> |
|
|
<h4 class="text-lg font-medium text-gray-700 mb-2">Select an attack phase</h4> |
|
|
<p class="text-gray-500 max-w-md mx-auto">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> |
|
|
|
|
|
<div> |
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> |
|
|
<div class="border-b border-gray-200 px-6 py-4 bg-gray-50"> |
|
|
<h3 class="font-semibold text-gray-800">Defense Detection Summary</h3> |
|
|
</div> |
|
|
<div id="defense-summary" class="p-6"> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500 animate-pulse-slow"></div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="text-sm font-medium text-gray-800">7 Attack Phases Detected</h4> |
|
|
<p class="text-xs text-gray-500 mt-1">Complete kill chain visibility</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="text-sm font-medium text-gray-800">6 Security Products Triggered</h4> |
|
|
<p class="text-xs text-gray-500 mt-1">Multi-layer defense detection</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="text-sm font-medium text-gray-800">100% Phases Logged</h4> |
|
|
<p class="text-xs text-gray-500 mt-1">Comprehensive forensic evidence</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3">Defense Coverage</h4> |
|
|
<div class="space-y-3"> |
|
|
<div> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-1"> |
|
|
<span>Email Security</span> |
|
|
<span>Phase 1</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-red-500 h-2 rounded-full" style="width: 14%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-1"> |
|
|
<span>Endpoint Protection</span> |
|
|
<span>Phase 2</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-yellow-500 h-2 rounded-full" style="width: 28%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-1"> |
|
|
<span>Network Analysis</span> |
|
|
<span>Phase 3</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-green-500 h-2 rounded-full" style="width: 42%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-1"> |
|
|
<span>User Behavior</span> |
|
|
<span>Phase 4</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-blue-500 h-2 rounded-full" style="width: 56%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-1"> |
|
|
<span>Data Protection</span> |
|
|
<span>Phase 5</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-purple-500 h-2 rounded-full" style="width: 70%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-1"> |
|
|
<span>Host Detection</span> |
|
|
<span>Phase 6</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-pink-500 h-2 rounded-full" style="width: 84%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-1"> |
|
|
<span>Full Traffic Analysis</span> |
|
|
<span>Phase 7</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-indigo-500 h-2 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
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", |
|
|
defenses: "Email Security Gateway", |
|
|
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" |
|
|
} |
|
|
], |
|
|
forensic: [ |
|
|
"Sender IP: 192.168.1.45 (Bulgaria)", |
|
|
"Attachment SHA256: a1b2c3d4e5f6...", |
|
|
"Email headers show DKIM failure", |
|
|
"Matched known Emotet template (90% similarity)" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
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", |
|
|
defenses: "Endpoint Detection & Response (EDR)", |
|
|
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" |
|
|
} |
|
|
], |
|
|
forensic: [ |
|
|
"Process tree: files.zip → powershell.exe → explorer.exe", |
|
|
"DLL memory allocation pattern matches Cobalt Strike", |
|
|
"Network connection attempt to 185.123.32.1", |
|
|
"Registry key modification: HKLM\\Software\\Microsoft\\Windows" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
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", |
|
|
defenses: "Network Traffic Analysis (NTA)", |
|
|
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)" |
|
|
} |
|
|
], |
|
|
forensic: [ |
|
|
"C2 Domain: api.cloudfront[.]com (resolved to 54.231.1.1)", |
|
|
"HTTPS traffic pattern: 5KB every 17 seconds", |
|
|
"Certificate issuer: Let's Encrypt (unusual for CDN)", |
|
|
"SSH tunnel established to 10.8.8.12 (internal jump server)" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
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)", |
|
|
defenses: "User Behavior Analytics (UEBA)", |
|
|
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)" |
|
|
} |
|
|
], |
|
|
forensic: [ |
|
|
"Mimikatz process detected in memory (obfuscated as svchost.exe)", |
|
|
"Chrome cookie database accessed", |
|
|
"User-Agent changed to match victim's original browser", |
|
|
"New login session from 172.16.1.23 with VM fingerprint" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
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)", |
|
|
defenses: "Data Loss Prevention (DLP)", |
|
|
alerts: [ |
|
|
{ |
|
|
severity: "critical", |
|
|
message: "Sensitive data access | User: Victim_Account | Action: Downloaded document ID: YUQUE-1234 | Content matched keyword: 'prod_ssh_private_key'" |
|
|
} |
|
|
], |
|
|
forensic: [ |
|
|
"API call to yuque.com/v2/api/documents/YUQUE-1234", |
|
|
"Document contains Base64 encoded SSH key", |
|
|
"Key belongs to dba_admin@10.8.8.88", |
|
|
"Unusual access time: 02:37 AM local time" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
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)", |
|
|
defenses: "Host Intrusion Detection (HIDS)", |
|
|
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" |
|
|
} |
|
|
], |
|
|
forensic: [ |
|
|
"SSH login at 03:12 AM from 10.8.8.12", |
|
|
"Executed commands: SHOW DATABASES, SELECT * FROM users", |
|
|
"Session duration: 8 minutes 23 seconds", |
|
|
"Unusual query pattern (scanning all tables)" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
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", |
|
|
defenses: "Full Traffic Threat Analysis", |
|
|
alerts: [ |
|
|
{ |
|
|
severity: "critical", |
|
|
message: "Abnormal data transfer | Protocol: DNS TXT records | Target domain: xyz.attacker[.]com | Data volume: 142MB (500% above threshold)" |
|
|
} |
|
|
], |
|
|
forensic: [ |
|
|
"Data file created: /tmp/taobaodata.tar.gz.enc", |
|
|
"DNS queries to xyz.attacker[.]com (TXT records)", |
|
|
"Data transfer rate: 18.5KB per query", |
|
|
"Total exfiltrated: 142MB in 8,234 DNS requests" |
|
|
] |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
const timelineContainer = document.querySelector('.attack-flow-container .flex'); |
|
|
|
|
|
attackSteps.forEach((step, index) => { |
|
|
const card = document.createElement('div'); |
|
|
card.className = `attack-card w-64 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-5"> |
|
|
<div class="flex items-center justify-between mb-3"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full ${step.color} flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-${step.icon}"></i> |
|
|
</div> |
|
|
<span class="text-xs 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="font-semibold text-gray-800 mb-2">${step.title}</h3> |
|
|
<p class="text-sm text-gray-600 line-clamp-2 mb-3">${step.behavior}</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="defense-badge bg-gray-100 text-gray-800 rounded-full">${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', () => { |
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
const detailsContainer = document.getElementById('attack-details'); |
|
|
detailsContainer.innerHTML = ` |
|
|
<div> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-12 h-12 rounded-full ${step.color} flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-${step.icon} text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-gray-800">${step.title}</h3> |
|
|
<p class="text-sm text-gray-500">Attack Phase ${step.id}</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="font-medium text-gray-700 mb-3">Attack Behavior</h4> |
|
|
<div class="bg-gray-50 p-4 rounded-lg text-sm text-gray-700">${step.behavior}</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="font-medium text-gray-700 mb-3">Triggered Defenses</h4> |
|
|
<div class="flex items-center"> |
|
|
<span class="defense-badge bg-gray-100 text-gray-800 rounded-full mr-2">${step.defenses}</span> |
|
|
<span class="text-xs text-gray-500">Detected at ${step.id < 10 ? '0' + step.id : step.id}:00</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="font-medium text-gray-700 mb-3">Security Alerts</h4> |
|
|
<div class="space-y-3"> |
|
|
${step.alerts.map(alert => ` |
|
|
<div class="p-3 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-0.5"> |
|
|
<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-3"> |
|
|
<div class="text-sm font-medium text-gray-800">${alert.message}</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`).join('')} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-medium text-gray-700 mb-3">Forensic Evidence</h4> |
|
|
<div class="space-y-2"> |
|
|
${step.forensic.map(item => ` |
|
|
<div class="flex items-start text-sm"> |
|
|
<div class="flex-shrink-0 mt-1.5 mr-2"> |
|
|
<div class="w-1.5 h-1.5 rounded-full bg-gray-400"></div> |
|
|
</div> |
|
|
<div class="text-gray-700">${item}</div> |
|
|
</div> |
|
|
`).join('')} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
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' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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-24"></div>'; |
|
|
timelineContainer.appendChild(connector); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('scroll-left').addEventListener('click', () => { |
|
|
document.querySelector('.attack-flow-container').scrollBy({ |
|
|
left: -200, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.getElementById('scroll-right').addEventListener('click', () => { |
|
|
document.querySelector('.attack-flow-container').scrollBy({ |
|
|
left: 200, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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/bas3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
