Hugging Face's logo

Spaces:
CrypticallyRequie
/
malwarecorrelator
Running

App Files Community
CrypticallyRequie commited on
Commit
51ffe61
·
verified ·
1 Parent(s): aed3f2d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1140 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Malwarecorrelator
3
- emoji: 🌍
4
- colorFrom: gray
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: malwarecorrelator
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1140 @@
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>Malware Variant Correlation Agent</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ .sidebar {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .graph-container {
16
+ height: 600px;
17
+ background-color: #1a202c;
18
+ border-radius: 0.5rem;
19
+ }
20
+ .malware-card:hover {
21
+ transform: translateY(-5px);
22
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
23
+ }
24
+ .timeline-item:not(:last-child)::after {
25
+ content: '';
26
+ position: absolute;
27
+ left: 11px;
28
+ top: 24px;
29
+ height: 100%;
30
+ width: 2px;
31
+ background: #4a5568;
32
+ }
33
+ .code-viewer {
34
+ font-family: 'Courier New', monospace;
35
+ font-size: 0.875rem;
36
+ }
37
+ .draggable-node {
38
+ cursor: move;
39
+ }
40
+ .tabs-container .tab-content {
41
+ display: none;
42
+ }
43
+ .tabs-container .tab-content.active {
44
+ display: block;
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-900 text-gray-200">
49
+ <div class="flex h-screen overflow-hidden">
50
+ <!-- Sidebar -->
51
+ <div class="sidebar w-64 bg-gray-800 text-gray-200 flex-shrink-0">
52
+ <div class="p-4 border-b border-gray-700">
53
+ <h1 class="text-xl font-bold flex items-center">
54
+ <i class="fas fa-shield-virus mr-2 text-blue-400"></i>
55
+ <span>MalwareCorrelator</span>
56
+ </h1>
57
+ <p class="text-xs text-gray-400 mt-1">Variant Correlation Agent v2.1</p>
58
+ </div>
59
+ <div class="p-4">
60
+ <div class="mb-6">
61
+ <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Analysis</h2>
62
+ <ul>
63
+ <li class="mb-1">
64
+ <a href="#" class="flex items-center px-3 py-2 rounded bg-gray-700 text-blue-300">
65
+ <i class="fas fa-project-diagram mr-2"></i>
66
+ <span>Variant Mapping</span>
67
+ </a>
68
+ </li>
69
+ <li class="mb-1">
70
+ <a href="#" class="flex items-center px-3 py-2 rounded hover:bg-gray-700">
71
+ <i class="fas fa-fingerprint mr-2"></i>
72
+ <span>IOC Correlation</span>
73
+ </a>
74
+ </li>
75
+ <li class="mb-1">
76
+ <a href="#" class="flex items-center px-3 py-2 rounded hover:bg-gray-700">
77
+ <i class="fas fa-route mr-2"></i>
78
+ <span>TTP Analysis</span>
79
+ </a>
80
+ </li>
81
+ <li class="mb-1">
82
+ <a href="#" class="flex items-center px-3 py-2 rounded hover:bg-gray-700">
83
+ <i class="fas fa-history mr-2"></i>
84
+ <span>Evolution Timeline</span>
85
+ </a>
86
+ </li>
87
+ </ul>
88
+ </div>
89
+ <div class="mb-6">
90
+ <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Threat Intelligence</h2>
91
+ <ul>
92
+ <li class="mb-1">
93
+ <a href="#" class="flex items-center px-3 py-2 rounded hover:bg-gray-700">
94
+ <i class="fas fa-database mr-2"></i>
95
+ <span>Malware Database</span>
96
+ </a>
97
+ </li>
98
+ <li class="mb-1">
99
+ <a href="#" class="flex items-center px-3 py-2 rounded hover:bg-gray-700">
100
+ <i class="fas fa-user-secret mr-2"></i>
101
+ <span>Threat Actors</span>
102
+ </a>
103
+ </li>
104
+ <li class="mb-1">
105
+ <a href="#" class="flex items-center px-3 py-2 rounded hover:bg-gray-700">
106
+ <i class="fas fa-flag mr-2"></i>
107
+ <span>Campaigns</span>
108
+ </a>
109
+ </li>
110
+ </ul>
111
+ </div>
112
+ <div>
113
+ <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Tools</h2>
114
+ <ul>
115
+ <li class="mb-1">
116
+ <a href="#" class="flex items-center px-3 py-2 rounded hover:bg-gray-700">
117
+ <i class="fas fa-search mr-2"></i>
118
+ <span>Sample Search</span>
119
+ </a>
120
+ </li>
121
+ <li class="mb-1">
122
+ <a href="#" class="flex items-center px-3 py-2 rounded hover:bg-gray-700">
123
+ <i class="fas fa-file-export mr-2"></i>
124
+ <span>Report Generator</span>
125
+ </a>
126
+ </li>
127
+ <li class="mb-1">
128
+ <a href="#" class="flex items-center px-3 py-2 rounded hover:bg-gray-700">
129
+ <i class="fas fa-cog mr-2"></i>
130
+ <span>Settings</span>
131
+ </a>
132
+ </li>
133
+ </ul>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Main Content -->
139
+ <div class="flex-1 overflow-auto">
140
+ <!-- Header -->
141
+ <header class="bg-gray-800 border-b border-gray-700 p-4 flex justify-between items-center">
142
+ <div class="flex items-center">
143
+ <button class="mr-4 text-gray-400 hover:text-white">
144
+ <i class="fas fa-bars"></i>
145
+ </button>
146
+ <h2 class="text-lg font-semibold">Malware Variant Correlation Dashboard</h2>
147
+ </div>
148
+ <div class="flex items-center space-x-4">
149
+ <div class="relative">
150
+ <input type="text" placeholder="Search samples, IOCs..."
151
+ class="bg-gray-700 rounded-full py-2 px-4 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-64">
152
+ <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
153
+ </div>
154
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
155
+ <i class="fas fa-plus mr-2"></i>
156
+ <span>New Analysis</span>
157
+ </button>
158
+ <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center">
159
+ <i class="fas fa-user"></i>
160
+ </div>
161
+ </div>
162
+ </header>
163
+
164
+ <!-- Dashboard Content -->
165
+ <main class="p-6">
166
+ <!-- Stats Cards -->
167
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
168
+ <div class="bg-gray-800 rounded-lg p-4 border-l-4 border-blue-500">
169
+ <div class="flex justify-between items-start">
170
+ <div>
171
+ <p class="text-sm text-gray-400">Analyzed Samples</p>
172
+ <h3 class="text-2xl font-bold">12,847</h3>
173
+ </div>
174
+ <i class="fas fa-file-code text-blue-400 text-xl"></i>
175
+ </div>
176
+ <p class="text-xs text-gray-400 mt-2">+124 new today</p>
177
+ </div>
178
+ <div class="bg-gray-800 rounded-lg p-4 border-l-4 border-green-500">
179
+ <div class="flex justify-between items-start">
180
+ <div>
181
+ <p class="text-sm text-gray-400">Identified Families</p>
182
+ <h3 class="text-2xl font-bold">328</h3>
183
+ </div>
184
+ <i class="fas fa-sitemap text-green-400 text-xl"></i>
185
+ </div>
186
+ <p class="text-xs text-gray-400 mt-2">+3 new this week</p>
187
+ </div>
188
+ <div class="bg-gray-800 rounded-lg p-4 border-l-4 border-purple-500">
189
+ <div class="flex justify-between items-start">
190
+ <div>
191
+ <p class="text-sm text-gray-400">Active Campaigns</p>
192
+ <h3 class="text-2xl font-bold">47</h3>
193
+ </div>
194
+ <i class="fas fa-flag text-purple-400 text-xl"></i>
195
+ </div>
196
+ <p class="text-xs text-gray-400 mt-2">2 new campaigns detected</p>
197
+ </div>
198
+ <div class="bg-gray-800 rounded-lg p-4 border-l-4 border-yellow-500">
199
+ <div class="flex justify-between items-start">
200
+ <div>
201
+ <p class="text-sm text-gray-400">Threat Actors</p>
202
+ <h3 class="text-2xl font-bold">89</h3>
203
+ </div>
204
+ <i class="fas fa-user-secret text-yellow-400 text-xl"></i>
205
+ </div>
206
+ <p class="text-xs text-gray-400 mt-2">5 new attributions</p>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Main Analysis Section -->
211
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
212
+ <!-- Variant Relationship Graph -->
213
+ <div class="lg:col-span-2 bg-gray-800 rounded-lg p-4">
214
+ <div class="flex justify-between items-center mb-4">
215
+ <h3 class="font-semibold">Malware Variant Relationship Map</h3>
216
+ <div class="flex space-x-2">
217
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">
218
+ <i class="fas fa-expand mr-1"></i> Fullscreen
219
+ </button>
220
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">
221
+ <i class="fas fa-download mr-1"></i> Export
222
+ </button>
223
+ </div>
224
+ </div>
225
+ <div class="graph-container rounded-lg" id="relationshipGraph">
226
+ <!-- This will be populated by JavaScript with the graph visualization -->
227
+ <div class="flex items-center justify-center h-full">
228
+ <div class="text-center">
229
+ <i class="fas fa-project-diagram text-4xl text-gray-600 mb-2"></i>
230
+ <p class="text-gray-400">Loading variant relationship visualization...</p>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Sample Details -->
237
+ <div class="bg-gray-800 rounded-lg p-4">
238
+ <div class="flex justify-between items-center mb-4">
239
+ <h3 class="font-semibold">Selected Sample Details</h3>
240
+ <span class="bg-red-500 text-white text-xs px-2 py-1 rounded">Malicious</span>
241
+ </div>
242
+ <div class="space-y-4">
243
+ <div>
244
+ <p class="text-sm text-gray-400">Sample Hash</p>
245
+ <p class="font-mono text-sm bg-gray-900 p-2 rounded">a1b2c3d4e5f6...7890</p>
246
+ </div>
247
+ <div>
248
+ <p class="text-sm text-gray-400">File Type</p>
249
+ <p>Windows PE Executable (64-bit)</p>
250
+ </div>
251
+ <div>
252
+ <p class="text-sm text-gray-400">First Seen</p>
253
+ <p>2023-05-15 14:32:10 UTC</p>
254
+ </div>
255
+ <div>
256
+ <p class="text-sm text-gray-400">Malware Family</p>
257
+ <div class="flex items-center">
258
+ <span class="bg-blue-900 text-blue-200 px-2 py-1 rounded text-xs mr-2">TrickBot</span>
259
+ <span class="text-xs text-gray-400">(92% confidence)</span>
260
+ </div>
261
+ </div>
262
+ <div>
263
+ <p class="text-sm text-gray-400">Associated Campaign</p>
264
+ <div class="flex items-center">
265
+ <span class="bg-purple-900 text-purple-200 px-2 py-1 rounded text-xs mr-2">Operation Cobalt Strike</span>
266
+ <span class="text-xs text-gray-400">(87% confidence)</span>
267
+ </div>
268
+ </div>
269
+ <div>
270
+ <p class="text-sm text-gray-400">Threat Actor</p>
271
+ <div class="flex items-center">
272
+ <span class="bg-yellow-900 text-yellow-200 px-2 py-1 rounded text-xs mr-2">Wizard Spider</span>
273
+ <span class="text-xs text-gray-400">(78% confidence)</span>
274
+ </div>
275
+ </div>
276
+ <div class="pt-4 border-t border-gray-700">
277
+ <p class="text-sm text-gray-400 mb-2">Similarity Scores</p>
278
+ <div class="space-y-2">
279
+ <div>
280
+ <div class="flex justify-between text-xs mb-1">
281
+ <span>Sample XZ-124 (TrickBot)</span>
282
+ <span>94%</span>
283
+ </div>
284
+ <div class="w-full bg-gray-700 rounded-full h-2">
285
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 94%"></div>
286
+ </div>
287
+ </div>
288
+ <div>
289
+ <div class="flex justify-between text-xs mb-1">
290
+ <span>Sample AB-789 (BazarLoader)</span>
291
+ <span>82%</span>
292
+ </div>
293
+ <div class="w-full bg-gray-700 rounded-full h-2">
294
+ <div class="bg-blue-400 h-2 rounded-full" style="width: 82%"></div>
295
+ </div>
296
+ </div>
297
+ <div>
298
+ <div class="flex justify-between text-xs mb-1">
299
+ <span>Sample CD-456 (Ryuk)</span>
300
+ <span>67%</span>
301
+ </div>
302
+ <div class="w-full bg-gray-700 rounded-full h-2">
303
+ <div class="bg-blue-300 h-2 rounded-full" style="width: 67%"></div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Tabs Section -->
313
+ <div class="bg-gray-800 rounded-lg mb-6">
314
+ <div class="tabs-container">
315
+ <div class="flex border-b border-gray-700">
316
+ <button class="tab-button px-4 py-3 font-medium text-sm border-b-2 border-blue-500 text-blue-400" data-tab="ttp">TTP Analysis</button>
317
+ <button class="tab-button px-4 py-3 font-medium text-sm text-gray-400 hover:text-white" data-tab="ioc">IOC Correlation</button>
318
+ <button class="tab-button px-4 py-3 font-medium text-sm text-gray-400 hover:text-white" data-tab="timeline">Evolution Timeline</button>
319
+ <button class="tab-button px-4 py-3 font-medium text-sm text-gray-400 hover:text-white" data-tab="code">Code Similarity</button>
320
+ </div>
321
+
322
+ <!-- TTP Analysis Tab -->
323
+ <div id="ttp" class="tab-content active p-4">
324
+ <h4 class="font-semibold mb-4">Tactics, Techniques, and Procedures (MITRE ATT&CK Framework)</h4>
325
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
326
+ <div>
327
+ <h5 class="text-sm font-medium text-gray-400 mb-2">Common TTPs Across Related Samples</h5>
328
+ <div class="bg-gray-900 rounded-lg p-3">
329
+ <div class="mb-3">
330
+ <div class="flex items-center mb-1">
331
+ <span class="bg-red-500 text-white text-xs px-2 py-0.5 rounded mr-2">Tactic</span>
332
+ <span class="font-medium">Execution</span>
333
+ </div>
334
+ <ul class="text-sm space-y-1 ml-8">
335
+ <li class="flex items-center">
336
+ <span class="w-2 h-2 bg-blue-400 rounded-full mr-2"></span>
337
+ <span>Command-Line Interface (T1059)</span>
338
+ <span class="ml-auto text-xs text-gray-400">92% match</span>
339
+ </li>
340
+ <li class="flex items-center">
341
+ <span class="w-2 h-2 bg-blue-400 rounded-full mr-2"></span>
342
+ <span>Windows Management Instrumentation (T1047)</span>
343
+ <span class="ml-auto text-xs text-gray-400">87% match</span>
344
+ </li>
345
+ </ul>
346
+ </div>
347
+ <div class="mb-3">
348
+ <div class="flex items-center mb-1">
349
+ <span class="bg-purple-500 text-white text-xs px-2 py-0.5 rounded mr-2">Tactic</span>
350
+ <span class="font-medium">Persistence</span>
351
+ </div>
352
+ <ul class="text-sm space-y-1 ml-8">
353
+ <li class="flex items-center">
354
+ <span class="w-2 h-2 bg-blue-400 rounded-full mr-2"></span>
355
+ <span>Registry Run Keys (T1547.001)</span>
356
+ <span class="ml-auto text-xs text-gray-400">95% match</span>
357
+ </li>
358
+ <li class="flex items-center">
359
+ <span class="w-2 h-2 bg-blue-400 rounded-full mr-2"></span>
360
+ <span>Scheduled Task (T1053)</span>
361
+ <span class="ml-auto text-xs text-gray-400">83% match</span>
362
+ </li>
363
+ </ul>
364
+ </div>
365
+ <div>
366
+ <div class="flex items-center mb-1">
367
+ <span class="bg-yellow-500 text-white text-xs px-2 py-0.5 rounded mr-2">Tactic</span>
368
+ <span class="font-medium">Defense Evasion</span>
369
+ </div>
370
+ <ul class="text-sm space-y-1 ml-8">
371
+ <li class="flex items-center">
372
+ <span class="w-2 h-2 bg-blue-400 rounded-full mr-2"></span>
373
+ <span>Process Injection (T1055)</span>
374
+ <span class="ml-auto text-xs text-gray-400">89% match</span>
375
+ </li>
376
+ <li class="flex items-center">
377
+ <span class="w-2 h-2 bg-blue-400 rounded-full mr-2"></span>
378
+ <span>Obfuscated Files (T1027)</span>
379
+ <span class="ml-auto text-xs text-gray-400">91% match</span>
380
+ </li>
381
+ </ul>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ <div>
386
+ <h5 class="text-sm font-medium text-gray-400 mb-2">TTP Heatmap Across Variants</h5>
387
+ <div class="bg-gray-900 rounded-lg p-4">
388
+ <canvas id="ttpHeatmap" height="300"></canvas>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <!-- IOC Correlation Tab -->
395
+ <div id="ioc" class="tab-content p-4">
396
+ <h4 class="font-semibold mb-4">Indicator of Compromise Correlation</h4>
397
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
398
+ <div>
399
+ <h5 class="text-sm font-medium text-gray-400 mb-2">Shared IOCs</h5>
400
+ <div class="bg-gray-900 rounded-lg p-3">
401
+ <div class="mb-4">
402
+ <div class="flex items-center mb-2">
403
+ <i class="fas fa-globe mr-2 text-blue-400"></i>
404
+ <span class="font-medium">Domains</span>
405
+ </div>
406
+ <ul class="text-sm space-y-1">
407
+ <li class="flex items-center justify-between bg-gray-800 p-2 rounded">
408
+ <span class="font-mono">malware-c2[.]com</span>
409
+ <span class="text-xs bg-blue-900 text-blue-200 px-2 py-0.5 rounded">5 variants</span>
410
+ </li>
411
+ <li class="flex items-center justify-between bg-gray-800 p-2 rounded">
412
+ <span class="font-mono">download-update[.]net</span>
413
+ <span class="text-xs bg-blue-900 text-blue-200 px-2 py-0.5 rounded">3 variants</span>
414
+ </li>
415
+ <li class="flex items-center justify-between bg-gray-800 p-2 rounded">
416
+ <span class="font-mono">secure-payment[.]xyz</span>
417
+ <span class="text-xs bg-blue-900 text-blue-200 px-2 py-0.5 rounded">2 variants</span>
418
+ </li>
419
+ </ul>
420
+ </div>
421
+ <div class="mb-4">
422
+ <div class="flex items-center mb-2">
423
+ <i class="fas fa-server mr-2 text-blue-400"></i>
424
+ <span class="font-medium">IP Addresses</span>
425
+ </div>
426
+ <ul class="text-sm space-y-1">
427
+ <li class="flex items-center justify-between bg-gray-800 p-2 rounded">
428
+ <span class="font-mono">185.143.223.47</span>
429
+ <span class="text-xs bg-blue-900 text-blue-200 px-2 py-0.5 rounded">4 variants</span>
430
+ </li>
431
+ <li class="flex items-center justify-between bg-gray-800 p-2 rounded">
432
+ <span class="font-mono">91.234.56.178</span>
433
+ <span class="text-xs bg-blue-900 text-blue-200 px-2 py-0.5 rounded">3 variants</span>
434
+ </li>
435
+ </ul>
436
+ </div>
437
+ <div>
438
+ <div class="flex items-center mb-2">
439
+ <i class="fas fa-file-signature mr-2 text-blue-400"></i>
440
+ <span class="font-medium">File Hashes</span>
441
+ </div>
442
+ <ul class="text-sm space-y-1">
443
+ <li class="flex items-center justify-between bg-gray-800 p-2 rounded">
444
+ <span class="font-mono">a1b2c3...7890 (DLL)</span>
445
+ <span class="text-xs bg-blue-900 text-blue-200 px-2 py-0.5 rounded">3 variants</span>
446
+ </li>
447
+ <li class="flex items-center justify-between bg-gray-800 p-2 rounded">
448
+ <span class="font-mono">x7y8z9...1234 (EXE)</span>
449
+ <span class="text-xs bg-blue-900 text-blue-200 px-2 py-0.5 rounded">2 variants</span>
450
+ </li>
451
+ </ul>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ <div>
456
+ <h5 class="text-sm font-medium text-gray-400 mb-2">IOC Timeline</h5>
457
+ <div class="bg-gray-900 rounded-lg p-4">
458
+ <div id="iocTimelineChart" style="height: 300px;"></div>
459
+ </div>
460
+ <div class="mt-4">
461
+ <h5 class="text-sm font-medium text-gray-400 mb-2">YARA Rule Matches</h5>
462
+ <div class="bg-gray-900 rounded-lg p-3">
463
+ <div class="flex items-center justify-between mb-2">
464
+ <span class="text-sm font-medium">TrickBot v4 Loader</span>
465
+ <span class="text-xs bg-green-900 text-green-200 px-2 py-0.5 rounded">98% match</span>
466
+ </div>
467
+ <div class="flex items-center justify-between mb-2">
468
+ <span class="text-sm font-medium">BazarBackdoor C2</span>
469
+ <span class="text-xs bg-green-900 text-green-200 px-2 py-0.5 rounded">87% match</span>
470
+ </div>
471
+ <div class="flex items-center justify-between">
472
+ <span class="text-sm font-medium">Ryuk Encryption</span>
473
+ <span class="text-xs bg-yellow-900 text-yellow-200 px-2 py-0.5 rounded">72% match</span>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+
481
+ <!-- Evolution Timeline Tab -->
482
+ <div id="timeline" class="tab-content p-4">
483
+ <h4 class="font-semibold mb-4">Malware Family Evolution Timeline</h4>
484
+ <div class="bg-gray-900 rounded-lg p-4">
485
+ <div class="timeline-container">
486
+ <div class="timeline-item relative pl-8 pb-6">
487
+ <div class="absolute left-0 top-0 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center">
488
+ <i class="fas fa-code text-xs text-white"></i>
489
+ </div>
490
+ <div class="bg-gray-800 rounded-lg p-3">
491
+ <div class="flex justify-between items-start">
492
+ <div>
493
+ <h5 class="font-medium">TrickBot v1.0</h5>
494
+ <p class="text-xs text-gray-400">2016-10-15</p>
495
+ </div>
496
+ <span class="text-xs bg-blue-900 text-blue-200 px-2 py-0.5 rounded">Initial Version</span>
497
+ </div>
498
+ <p class="text-sm mt-1">First observed banking Trojan with web injects and form grabbing capabilities.</p>
499
+ </div>
500
+ </div>
501
+ <div class="timeline-item relative pl-8 pb-6">
502
+ <div class="absolute left-0 top-0 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center">
503
+ <i class="fas fa-plus text-xs text-white"></i>
504
+ </div>
505
+ <div class="bg-gray-800 rounded-lg p-3">
506
+ <div class="flex justify-between items-start">
507
+ <div>
508
+ <h5 class="font-medium">TrickBot v2.4</h5>
509
+ <p class="text-xs text-gray-400">2017-05-22</p>
510
+ </div>
511
+ <span class="text-xs bg-purple-900 text-purple-200 px-2 py-0.5 rounded">Modular Update</span>
512
+ </div>
513
+ <p class="text-sm mt-1">Added modular architecture with plugin support for extended functionality.</p>
514
+ </div>
515
+ </div>
516
+ <div class="timeline-item relative pl-8 pb-6">
517
+ <div class="absolute left-0 top-0 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center">
518
+ <i class="fas fa-network-wired text-xs text-white"></i>
519
+ </div>
520
+ <div class="bg-gray-800 rounded-lg p-3">
521
+ <div class="flex justify-between items-start">
522
+ <div>
523
+ <h5 class="font-medium">TrickBot v3.1</h5>
524
+ <p class="text-xs text-gray-400">2018-11-07</p>
525
+ </div>
526
+ <span class="text-xs bg-yellow-900 text-yellow-200 px-2 py-0.5 rounded">Lateral Movement</span>
527
+ </div>
528
+ <p class="text-sm mt-1">Incorporated worm-like spreading capabilities and SMB propagation.</p>
529
+ </div>
530
+ </div>
531
+ <div class="timeline-item relative pl-8">
532
+ <div class="absolute left-0 top-0 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center">
533
+ <i class="fas fa-bolt text-xs text-white"></i>
534
+ </div>
535
+ <div class="bg-gray-800 rounded-lg p-3">
536
+ <div class="flex justify-between items-start">
537
+ <div>
538
+ <h5 class="font-medium">TrickBot v4.2</h5>
539
+ <p class="text-xs text-gray-400">2020-03-18</p>
540
+ </div>
541
+ <span class="text-xs bg-red-900 text-red-200 px-2 py-0.5 rounded">Ransomware</span>
542
+ </div>
543
+ <p class="text-sm mt-1">Integrated with Ryuk ransomware for double extortion attacks.</p>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+
550
+ <!-- Code Similarity Tab -->
551
+ <div id="code" class="tab-content p-4">
552
+ <h4 class="font-semibold mb-4">Code Similarity Analysis</h4>
553
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
554
+ <div>
555
+ <h5 class="text-sm font-medium text-gray-400 mb-2">Fuzzy Hashing Comparison</h5>
556
+ <div class="bg-gray-900 rounded-lg p-4">
557
+ <canvas id="similarityChart" height="250"></canvas>
558
+ </div>
559
+ <div class="mt-4">
560
+ <h5 class="text-sm font-medium text-gray-400 mb-2">Shared Code Fragments</h5>
561
+ <div class="bg-gray-800 rounded-lg p-3">
562
+ <div class="flex justify-between items-center mb-2">
563
+ <span class="text-sm font-medium">Encryption Routine</span>
564
+ <span class="text-xs bg-blue-900 text-blue-200 px-2 py-0.5 rounded">91% match</span>
565
+ </div>
566
+ <div class="flex justify-between items-center mb-2">
567
+ <span class="text-sm font-medium">C2 Communication</span>
568
+ <span class="text-xs bg-blue-900 text-blue-200 px-2 py-0.5 rounded">87% match</span>
569
+ </div>
570
+ <div class="flex justify-between items-center">
571
+ <span class="text-sm font-medium">Persistence Mechanism</span>
572
+ <span class="text-xs bg-blue-900 text-blue-200 px-2 py-0.5 rounded">83% match</span>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ <div>
578
+ <h5 class="text-sm font-medium text-gray-400 mb-2">Code Comparison Viewer</h5>
579
+ <div class="bg-gray-900 rounded-lg overflow-hidden">
580
+ <div class="flex bg-gray-800 text-sm">
581
+ <div class="w-1/2 p-2 font-medium border-r border-gray-700">Current Sample</div>
582
+ <div class="w-1/2 p-2 font-medium">Related Sample (TrickBot v3.1)</div>
583
+ </div>
584
+ <div class="code-viewer grid grid-cols-2 divide-x divide-gray-700">
585
+ <div class="p-2 overflow-auto max-h-64">
586
+ <pre class="text-gray-300"><code>void encryptFiles(string path) {
587
+ for (auto &entry : fs::directory_iterator(path)) {
588
+ if (entry.is_directory()) {
589
+ encryptFiles(entry.path());
590
+ } else {
591
+ auto file = entry.path();
592
+ if (isValidTarget(file)) {
593
+ RSAEncrypt(file);
594
+ rename(file, file += ".encrypted");
595
+ }
596
+ }
597
+ }
598
+ }</code></pre>
599
+ </div>
600
+ <div class="p-2 overflow-auto max-h-64">
601
+ <pre class="text-gray-300"><code>void encryptFiles(string path) {
602
+ for (auto &entry : fs::directory_iterator(path)) {
603
+ if (entry.is_directory()) {
604
+ encryptFiles(entry.path());
605
+ } else {
606
+ auto file = entry.path();
607
+ if (shouldEncrypt(file)) {
608
+ RSAEncrypt(file);
609
+ rename(file, file += ".locked");
610
+ }
611
+ }
612
+ }
613
+ }</code></pre>
614
+ </div>
615
+ </div>
616
+ <div class="bg-gray-800 p-2 text-xs text-gray-400">
617
+ <i class="fas fa-info-circle mr-1 text-blue-400"></i> Highlighted code shows 91% similarity in encryption routines
618
+ </div>
619
+ </div>
620
+ <div class="mt-4">
621
+ <h5 class="text-sm font-medium text-gray-400 mb-2">Import Address Table (IAT) Comparison</h5>
622
+ <div class="bg-gray-900 rounded-lg p-3">
623
+ <div class="grid grid-cols-3 gap-2 text-xs mb-2 font-medium">
624
+ <div>Function</div>
625
+ <div class="text-center">Current</div>
626
+ <div class="text-center">Related</div>
627
+ </div>
628
+ <div class="space-y-2">
629
+ <div class="grid grid-cols-3 gap-2 items-center">
630
+ <div class="text-sm">CreateProcessW</div>
631
+ <div class="bg-gray-800 p-1 rounded text-center">✓</div>
632
+ <div class="bg-gray-800 p-1 rounded text-center">✓</div>
633
+ </div>
634
+ <div class="grid grid-cols-3 gap-2 items-center">
635
+ <div class="text-sm">RegSetValueEx</div>
636
+ <div class="bg-gray-800 p-1 rounded text-center">✓</div>
637
+ <div class="bg-gray-800 p-1 rounded text-center">✓</div>
638
+ </div>
639
+ <div class="grid grid-cols-3 gap-2 items-center">
640
+ <div class="text-sm">WSASend</div>
641
+ <div class="bg-gray-800 p-1 rounded text-center">✓</div>
642
+ <div class="bg-gray-800 p-1 rounded text-center">✓</div>
643
+ </div>
644
+ <div class="grid grid-cols-3 gap-2 items-center">
645
+ <div class="text-sm">CryptEncrypt</div>
646
+ <div class="bg-gray-800 p-1 rounded text-center">✓</div>
647
+ <div class="bg-gray-800 p-1 rounded text-center">✓</div>
648
+ </div>
649
+ </div>
650
+ </div>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ </div>
657
+
658
+ <!-- Related Samples -->
659
+ <div class="bg-gray-800 rounded-lg p-4 mb-6">
660
+ <div class="flex justify-between items-center mb-4">
661
+ <h3 class="font-semibold">Related Malware Samples</h3>
662
+ <div class="flex items-center space-x-2">
663
+ <span class="text-xs text-gray-400">Sort by:</span>
664
+ <select class="bg-gray-700 border border-gray-600 text-sm rounded px-2 py-1">
665
+ <option>Similarity Score</option>
666
+ <option>First Seen</option>
667
+ <option>Campaign</option>
668
+ <option>Threat Actor</option>
669
+ </select>
670
+ </div>
671
+ </div>
672
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
673
+ <div class="malware-card bg-gray-900 rounded-lg p-4 border border-gray-700 transition duration-300">
674
+ <div class="flex justify-between items-start mb-2">
675
+ <div>
676
+ <h4 class="font-medium">TrickBot v3.1</h4>
677
+ <p class="text-xs text-gray-400">First seen: 2018-11-07</p>
678
+ </div>
679
+ <span class="text-xs bg-blue-900 text-blue-200 px-2 py-0.5 rounded">94% match</span>
680
+ </div>
681
+ <div class="flex items-center mb-3">
682
+ <span class="bg-blue-500 text-white text-xs px-2 py-0.5 rounded mr-2">TrickBot</span>
683
+ <span class="bg-purple-500 text-white text-xs px-2 py-0.5 rounded mr-2">Operation Cobalt</span>
684
+ <span class="bg-yellow-500 text-white text-xs px-2 py-0.5 rounded">Wizard Spider</span>
685
+ </div>
686
+ <div class="text-sm mb-3">
687
+ <p class="text-gray-400">Shared characteristics:</p>
688
+ <ul class="list-disc list-inside text-gray-300 text-xs space-y-1 mt-1">
689
+ <li>Identical C2 communication pattern</li>
690
+ <li>Similar persistence mechanism</li>
691
+ <li>Shared encryption algorithm</li>
692
+ </ul>
693
+ </div>
694
+ <div class="flex justify-between items-center text-xs">
695
+ <a href="#" class="text-blue-400 hover:underline">View analysis</a>
696
+ <button class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded">Compare</button>
697
+ </div>
698
+ </div>
699
+ <div class="malware-card bg-gray-900 rounded-lg p-4 border border-gray-700 transition duration-300">
700
+ <div class="flex justify-between items-start mb-2">
701
+ <div>
702
+ <h4 class="font-medium">BazarLoader v2</h4>
703
+ <p class="text-xs text-gray-400">First seen: 2020-02-14</p>
704
+ </div>
705
+ <span class="text-xs bg-blue-900 text-blue-200 px-2 py-0.5 rounded">82% match</span>
706
+ </div>
707
+ <div class="flex items-center mb-3">
708
+ <span class="bg-green-500 text-white text-xs px-2 py-0.5 rounded mr-2">BazarLoader</span>
709
+ <span class="bg-purple-500 text-white text-xs px-2 py-0.5 rounded mr-2">Operation Cobalt</span>
710
+ <span class="bg-yellow-500 text-white text-xs px-2 py-0.5 rounded">Wizard Spider</span>
711
+ </div>
712
+ <div class="text-sm mb-3">
713
+ <p class="text-gray-400">Shared characteristics:</p>
714
+ <ul class="list-disc list-inside text-gray-300 text-xs space-y-1 mt-1">
715
+ <li>Similar initial loader code</li>
716
+ <li>Common C2 infrastructure</li>
717
+ <li>Overlapping TTPs</li>
718
+ </ul>
719
+ </div>
720
+ <div class="flex justify-between items-center text-xs">
721
+ <a href="#" class="text-blue-400 hover:underline">View analysis</a>
722
+ <button class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded">Compare</button>
723
+ </div>
724
+ </div>
725
+ <div class="malware-card bg-gray-900 rounded-lg p-4 border border-gray-700 transition duration-300">
726
+ <div class="flex justify-between items-start mb-2">
727
+ <div>
728
+ <h4 class="font-medium">Ryuk v1.3</h4>
729
+ <p class="text-xs text-gray-400">First seen: 2019-08-22</p>
730
+ </div>
731
+ <span class="text-xs bg-blue-900 text-blue-200 px-2 py-0.5 rounded">67% match</span>
732
+ </div>
733
+ <div class="flex items-center mb-3">
734
+ <span class="bg-red-500 text-white text-xs px-2 py-0.5 rounded mr-2">Ryuk</span>
735
+ <span class="bg-purple-500 text-white text-xs px-2 py-0.5 rounded mr-2">Operation Cobalt</span>
736
+ <span class="bg-yellow-500 text-white text-xs px-2 py-0.5 rounded">Wizard Spider</span>
737
+ </div>
738
+ <div class="text-sm mb-3">
739
+ <p class="text-gray-400">Shared characteristics:</p>
740
+ <ul class="list-disc list-inside text-gray-300 text-xs space-y-1 mt-1">
741
+ <li>Similar encryption implementation</li>
742
+ <li>Common lateral movement techniques</li>
743
+ <li>Shared infrastructure components</li>
744
+ </ul>
745
+ </div>
746
+ <div class="flex justify-between items-center text-xs">
747
+ <a href="#" class="text-blue-400 hover:underline">View analysis</a>
748
+ <button class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded">Compare</button>
749
+ </div>
750
+ </div>
751
+ </div>
752
+ </div>
753
+
754
+ <!-- Actionable Intelligence -->
755
+ <div class="bg-gray-800 rounded-lg p-4">
756
+ <div class="flex justify-between items-center mb-4">
757
+ <h3 class="font-semibold">Actionable Intelligence</h3>
758
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm flex items-center">
759
+ <i class="fas fa-file-export mr-1"></i>
760
+ <span>Generate Report</span>
761
+ </button>
762
+ </div>
763
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
764
+ <div class="bg-gray-900 rounded-lg p-4">
765
+ <div class="flex items-center mb-3">
766
+ <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center mr-3">
767
+ <i class="fas fa-search text-blue-400"></i>
768
+ </div>
769
+ <h4 class="font-medium">Threat Hunting</h4>
770
+ </div>
771
+ <ul class="text-sm space-y-2">
772
+ <li class="flex items-start">
773
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
774
+ <span>Search for IOCs in your environment: <span class="font-mono text-blue-300">malware-c2[.]com</span>, <span class="font-mono text-blue-300">185.143.223.47</span></span>
775
+ </li>
776
+ <li class="flex items-start">
777
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
778
+ <span>Look for processes with command-line parameters matching known patterns</span>
779
+ </li>
780
+ <li class="flex items-start">
781
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
782
+ <span>Monitor registry keys for persistence mechanisms</span>
783
+ </li>
784
+ </ul>
785
+ </div>
786
+ <div class="bg-gray-900 rounded-lg p-4">
787
+ <div class="flex items-center mb-3">
788
+ <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center mr-3">
789
+ <i class="fas fa-shield-alt text-purple-400"></i>
790
+ </div>
791
+ <h4 class="font-medium">Detection Rules</h4>
792
+ </div>
793
+ <ul class="text-sm space-y-2">
794
+ <li class="flex items-start">
795
+ <i class="fas fa-file-code text-yellow-400 mt-1 mr-2"></i>
796
+ <span>YARA rule: <span class="font-mono text-purple-300">TrickBot_Loader_v4</span> (92% match)</span>
797
+ </li>
798
+ <li class="flex items-start">
799
+ <i class="fas fa-file-code text-yellow-400 mt-1 mr-2"></i>
800
+ <span>Sigma rule: <span class="font-mono text-purple-300">Ryuk_Encryption_Process</span></span>
801
+ </li>
802
+ <li class="flex items-start">
803
+ <i class="fas fa-file-code text-yellow-400 mt-1 mr-2"></i>
804
+ <span>Suricata rule: <span class="font-mono text-purple-300">ET MALWARE TrickBot C2 Beacon</span></span>
805
+ </li>
806
+ </ul>
807
+ </div>
808
+ <div class="bg-gray-900 rounded-lg p-4">
809
+ <div class="flex items-center mb-3">
810
+ <div class="w-10 h-10 rounded-full bg-red-900 flex items-center justify-center mr-3">
811
+ <i class="fas fa-user-shield text-red-400"></i>
812
+ </div>
813
+ <h4 class="font-medium">Mitigation</h4>
814
+ </div>
815
+ <ul class="text-sm space-y-2">
816
+ <li class="flex items-start">
817
+ <i class="fas fa-ban text-red-400 mt-1 mr-2"></i>
818
+ <span>Block communication to known C2 domains/IPs</span>
819
+ </li>
820
+ <li class="flex items-start">
821
+ <i class="fas fa-ban text-red-400 mt-1 mr-2"></i>
822
+ <span>Disable SMBv1 and restrict RDP access</span>
823
+ </li>
824
+ <li class="flex items-start">
825
+ <i class="fas fa-ban text-red-400 mt-1 mr-2"></i>
826
+ <span>Implement application whitelisting for critical directories</span>
827
+ </li>
828
+ </ul>
829
+ </div>
830
+ </div>
831
+ </div>
832
+ </main>
833
+ </div>
834
+ </div>
835
+
836
+ <script>
837
+ // Tab functionality
838
+ document.querySelectorAll('.tab-button').forEach(button => {
839
+ button.addEventListener('click', () => {
840
+ // Remove active class from all tabs and buttons
841
+ document.querySelectorAll('.tab-button').forEach(btn => {
842
+ btn.classList.remove('border-blue-500', 'text-blue-400');
843
+ btn.classList.add('text-gray-400');
844
+ });
845
+
846
+ document.querySelectorAll('.tab-content').forEach(content => {
847
+ content.classList.remove('active');
848
+ });
849
+
850
+ // Add active class to clicked tab
851
+ button.classList.add('border-blue-500', 'text-blue-400');
852
+ button.classList.remove('text-gray-400');
853
+
854
+ const tabId = button.getAttribute('data-tab');
855
+ document.getElementById(tabId).classList.add('active');
856
+ });
857
+ });
858
+
859
+ // Sample visualization for relationship graph
860
+ setTimeout(() => {
861
+ const graphContainer = document.getElementById('relationshipGraph');
862
+ graphContainer.innerHTML = `
863
+ <div class="relative h-full">
864
+ <div class="draggable-node absolute top-1/4 left-1/4 w-24 h-24 rounded-full bg-blue-900 border-2 border-blue-400 flex flex-col items-center justify-center cursor-move" style="transform: translate(-50%, -50%)">
865
+ <i class="fas fa-bug text-xl text-blue-300 mb-1"></i>
866
+ <span class="text-xs font-medium">Current Sample</span>
867
+ <span class="text-xxs text-gray-300">TrickBot v4.2</span>
868
+ </div>
869
+
870
+ <div class="draggable-node absolute top-1/3 left-1/2 w-20 h-20 rounded-full bg-blue-800 border-2 border-blue-400 flex flex-col items-center justify-center cursor-move" style="transform: translate(-50%, -50%)">
871
+ <i class="fas fa-bug text-lg text-blue-300 mb-1"></i>
872
+ <span class="text-xs">TrickBot v3.1</span>
873
+ <span class="text-xxs text-gray-300">94%</span>
874
+ </div>
875
+
876
+ <div class="draggable-node absolute top-2/3 left-1/3 w-20 h-20 rounded-full bg-green-800 border-2 border-green-400 flex flex-col items-center justify-center cursor-move" style="transform: translate(-50%, -50%)">
877
+ <i class="fas fa-bug text-lg text-green-300 mb-1"></i>
878
+ <span class="text-xs">BazarLoader</span>
879
+ <span class="text-xxs text-gray-300">82%</span>
880
+ </div>
881
+
882
+ <div class="draggable-node absolute top-3/4 left-3/4 w-20 h-20 rounded-full bg-red-800 border-2 border-red-400 flex flex-col items-center justify-center cursor-move" style="transform: translate(-50%, -50%)">
883
+ <i class="fas fa-bug text-lg text-red-300 mb-1"></i>
884
+ <span class="text-xs">Ryuk v1.3</span>
885
+ <span class="text-xxs text-gray-300">67%</span>
886
+ </div>
887
+
888
+ <svg class="absolute inset-0 w-full h-full" style="z-index: 0;">
889
+ <line x1="25%" y1="25%" x2="50%" y2="33%" stroke="#3B82F6" stroke-width="2" stroke-dasharray="5,5" />
890
+ <line x1="25%" y1="25%" x2="33%" y2="75%" stroke="#10B981" stroke-width="2" stroke-dasharray="5,5" />
891
+ <line x1="25%" y1="25%" x2="75%" y2="75%" stroke="#EF4444" stroke-width="2" stroke-dasharray="5,5" />
892
+ </svg>
893
+ </div>
894
+ `;
895
+
896
+ // Make nodes draggable
897
+ document.querySelectorAll('.draggable-node').forEach(node => {
898
+ let isDragging = false;
899
+ let offsetX, offsetY;
900
+
901
+ node.addEventListener('mousedown', (e) => {
902
+ isDragging = true;
903
+ const rect = node.getBoundingClientRect();
904
+ offsetX = e.clientX - rect.left;
905
+ offsetY = e.clientY - rect.top;
906
+ node.style.zIndex = '10';
907
+ node.style.cursor = 'grabbing';
908
+ });
909
+
910
+ document.addEventListener('mousemove', (e) => {
911
+ if (!isDragging) return;
912
+
913
+ const container = graphContainer.getBoundingClientRect();
914
+ let x = e.clientX - container.left - offsetX;
915
+ let y = e.clientY - container.top - offsetY;
916
+
917
+ // Constrain to container
918
+ x = Math.max(0, Math.min(x, container.width - node.offsetWidth));
919
+ y = Math.max(0, Math.min(y, container.height - node.offsetHeight));
920
+
921
+ node.style.left = `${x}px`;
922
+ node.style.top = `${y}px`;
923
+ node.style.transform = 'translate(0, 0)';
924
+ });
925
+
926
+ document.addEventListener('mouseup', () => {
927
+ isDragging = false;
928
+ node.style.zIndex = '1';
929
+ node.style.cursor = 'move';
930
+ });
931
+ });
932
+ }, 1000);
933
+
934
+ // Charts
935
+ document.addEventListener('DOMContentLoaded', function() {
936
+ // TTP Heatmap
937
+ const ttpCtx = document.getElementById('ttpHeatmap').getContext('2d');
938
+ const ttpHeatmap = new Chart(ttpCtx, {
939
+ type: 'bar',
940
+ data: {
941
+ labels: ['Execution', 'Persistence', 'Defense Evasion', 'Cred Access', 'Discovery', 'Lateral Movement', 'Collection', 'Exfiltration', 'Impact'],
942
+ datasets: [
943
+ {
944
+ label: 'Current Sample',
945
+ data: [92, 95, 89, 45, 78, 82, 60, 55, 85],
946
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
947
+ borderColor: 'rgba(59, 130, 246, 1)',
948
+ borderWidth: 1
949
+ },
950
+ {
951
+ label: 'Family Average',
952
+ data: [85, 90, 82, 40, 75, 78, 55, 50, 80],
953
+ backgroundColor: 'rgba(16, 185, 129, 0.7)',
954
+ borderColor: 'rgba(16, 185, 129, 1)',
955
+ borderWidth: 1
956
+ }
957
+ ]
958
+ },
959
+ options: {
960
+ responsive: true,
961
+ maintainAspectRatio: false,
962
+ scales: {
963
+ y: {
964
+ beginAtZero: true,
965
+ max: 100,
966
+ grid: {
967
+ color: 'rgba(255, 255, 255, 0.1)'
968
+ },
969
+ ticks: {
970
+ color: 'rgba(255, 255, 255, 0.7)'
971
+ }
972
+ },
973
+ x: {
974
+ grid: {
975
+ display: false
976
+ },
977
+ ticks: {
978
+ color: 'rgba(255, 255, 255, 0.7)'
979
+ }
980
+ }
981
+ },
982
+ plugins: {
983
+ legend: {
984
+ labels: {
985
+ color: 'rgba(255, 255, 255, 0.7)'
986
+ }
987
+ }
988
+ }
989
+ }
990
+ });
991
+
992
+ // Similarity Chart
993
+ const similarityCtx = document.getElementById('similarityChart').getContext('2d');
994
+ const similarityChart = new Chart(similarityCtx, {
995
+ type: 'radar',
996
+ data: {
997
+ labels: ['Code Structure', 'Imports', 'Strings', 'Encryption', 'C2 Comms', 'Persistence', 'Lateral Movement'],
998
+ datasets: [
999
+ {
1000
+ label: 'Current vs TrickBot v3.1',
1001
+ data: [94, 89, 92, 91, 95, 87, 82],
1002
+ backgroundColor: 'rgba(59, 130, 246, 0.2)',
1003
+ borderColor: 'rgba(59, 130, 246, 1)',
1004
+ borderWidth: 2,
1005
+ pointBackgroundColor: 'rgba(59, 130, 246, 1)'
1006
+ },
1007
+ {
1008
+ label: 'Current vs BazarLoader',
1009
+ data: [82, 75, 78, 68, 72, 80, 65],
1010
+ backgroundColor: 'rgba(16, 185, 129, 0.2)',
1011
+ borderColor: 'rgba(16, 185, 129, 1)',
1012
+ borderWidth: 2,
1013
+ pointBackgroundColor: 'rgba(16, 185, 129, 1)'
1014
+ }
1015
+ ]
1016
+ },
1017
+ options: {
1018
+ responsive: true,
1019
+ maintainAspectRatio: false,
1020
+ scales: {
1021
+ r: {
1022
+ angleLines: {
1023
+ color: 'rgba(255, 255, 255, 0.1)'
1024
+ },
1025
+ grid: {
1026
+ color: 'rgba(255, 255, 255, 0.1)'
1027
+ },
1028
+ pointLabels: {
1029
+ color: 'rgba(255, 255, 255, 0.7)'
1030
+ },
1031
+ ticks: {
1032
+ backdropColor: 'rgba(0, 0, 0, 0)',
1033
+ color: 'rgba(255, 255, 255, 0.5)',
1034
+ stepSize: 20
1035
+ }
1036
+ }
1037
+ },
1038
+ plugins: {
1039
+ legend: {
1040
+ labels: {
1041
+ color: 'rgba(255, 255, 255, 0.7)'
1042
+ }
1043
+ }
1044
+ }
1045
+ }
1046
+ });
1047
+
1048
+ // IOC Timeline Chart
1049
+ const iocTimelineOptions = {
1050
+ series: [{
1051
+ name: 'IOC Occurrences',
1052
+ data: [
1053
+ { x: '2020-01', y: 5 },
1054
+ { x: '2020-04', y: 8 },
1055
+ { x: '2020-07', y: 12 },
1056
+ { x: '2020-10', y: 18 },
1057
+ { x: '2021-01', y: 15 },
1058
+ { x: '2021-04', y: 22 },
1059
+ { x: '2021-07', y: 28 },
1060
+ { x: '2021-10', y: 32 },
1061
+ { x: '2022-01', y: 25 },
1062
+ { x: '2022-04', y: 18 },
1063
+ { x: '2022-07', y: 14 },
1064
+ { x: '2022-10', y: 10 },
1065
+ { x: '2023-01', y: 8 },
1066
+ { x: '2023-04', y: 12 }
1067
+ ]
1068
+ }],
1069
+ chart: {
1070
+ height: '100%',
1071
+ type: 'area',
1072
+ foreColor: '#CBD5E0',
1073
+ toolbar: {
1074
+ show: true,
1075
+ tools: {
1076
+ download: true,
1077
+ selection: true,
1078
+ zoom: true,
1079
+ zoomin: true,
1080
+ zoomout: true,
1081
+ pan: true,
1082
+ reset: true
1083
+ }
1084
+ },
1085
+ zoom: {
1086
+ enabled: true
1087
+ }
1088
+ },
1089
+ dataLabels: {
1090
+ enabled: false
1091
+ },
1092
+ stroke: {
1093
+ curve: 'smooth',
1094
+ width: 2,
1095
+ colors: ['#3B82F6']
1096
+ },
1097
+ fill: {
1098
+ type: 'gradient',
1099
+ gradient: {
1100
+ shadeIntensity: 1,
1101
+ opacityFrom: 0.7,
1102
+ opacityTo: 0.3,
1103
+ stops: [0, 90, 100]
1104
+ },
1105
+ colors: ['#3B82F6']
1106
+ },
1107
+ xaxis: {
1108
+ type: 'category',
1109
+ axisBorder: {
1110
+ show: false
1111
+ },
1112
+ axisTicks: {
1113
+ show: false
1114
+ }
1115
+ },
1116
+ yaxis: {
1117
+ labels: {
1118
+ formatter: function(val) {
1119
+ return val.toFixed(0);
1120
+ }
1121
+ }
1122
+ },
1123
+ tooltip: {
1124
+ enabled: true,
1125
+ theme: 'dark',
1126
+ x: {
1127
+ format: 'MMM yyyy'
1128
+ }
1129
+ },
1130
+ grid: {
1131
+ borderColor: 'rgba(255, 255, 255, 0.1)'
1132
+ }
1133
+ };
1134
+
1135
+ const iocTimelineChart = new ApexCharts(document.querySelector("#iocTimelineChart"), iocTimelineOptions);
1136
+ iocTimelineChart.render();
1137
+ });
1138
+ </script>
1139
+ <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=CrypticallyRequie/malwarecorrelator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1140
+ </html>