Hugging Face's logo

Spaces:
CrypticallyRequie
/
post-incident-forensic-agent
Running

App Files Community
CrypticallyRequie commited on
Commit
80445c9
·
verified ·
1 Parent(s): b8c6327

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +821 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Post Incident Forensic Agent
3
- emoji: 👀
4
- colorFrom: green
5
- colorTo: pink
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: post-incident-forensic-agent
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: red
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,821 @@
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>CyberSecure | Forensic Agent</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Roboto:wght@300;400;500;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #2563eb;
14
+ --primary-dark: #1d4ed8;
15
+ --secondary: #7c3aed;
16
+ --danger: #dc2626;
17
+ --success: #16a34a;
18
+ --warning: #d97706;
19
+ --dark: #1e293b;
20
+ --light: #f8fafc;
21
+ }
22
+
23
+ body {
24
+ font-family: 'Roboto', sans-serif;
25
+ background-color: #f1f5f9;
26
+ color: var(--dark);
27
+ }
28
+
29
+ .mono {
30
+ font-family: 'Roboto Mono', monospace;
31
+ }
32
+
33
+ .sidebar {
34
+ transition: all 0.3s ease;
35
+ }
36
+
37
+ .timeline-item::before {
38
+ content: '';
39
+ position: absolute;
40
+ left: 0;
41
+ top: 0;
42
+ width: 3px;
43
+ height: 100%;
44
+ background-color: var(--primary);
45
+ }
46
+
47
+ .evidence-card:hover {
48
+ transform: translateY(-2px);
49
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
50
+ }
51
+
52
+ .progress-bar {
53
+ transition: width 0.5s ease;
54
+ }
55
+
56
+ .tab-content {
57
+ display: none;
58
+ }
59
+
60
+ .tab-content.active {
61
+ display: block;
62
+ animation: fadeIn 0.3s ease;
63
+ }
64
+
65
+ @keyframes fadeIn {
66
+ from { opacity: 0; }
67
+ to { opacity: 1; }
68
+ }
69
+
70
+ .tooltip {
71
+ position: relative;
72
+ }
73
+
74
+ .tooltip-text {
75
+ visibility: hidden;
76
+ width: 200px;
77
+ background-color: var(--dark);
78
+ color: #fff;
79
+ text-align: center;
80
+ border-radius: 6px;
81
+ padding: 5px;
82
+ position: absolute;
83
+ z-index: 1;
84
+ bottom: 125%;
85
+ left: 50%;
86
+ transform: translateX(-50%);
87
+ opacity: 0;
88
+ transition: opacity 0.3s;
89
+ }
90
+
91
+ .tooltip:hover .tooltip-text {
92
+ visibility: visible;
93
+ opacity: 1;
94
+ }
95
+ </style>
96
+ </head>
97
+ <body class="min-h-screen flex">
98
+ <!-- Sidebar Navigation -->
99
+ <div class="sidebar w-64 bg-white shadow-lg flex flex-col">
100
+ <div class="p-4 border-b border-gray-200 flex items-center">
101
+ <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-xl">CS</div>
102
+ <h1 class="text-xl font-bold ml-3">CyberSecure Forensics</h1>
103
+ </div>
104
+
105
+ <div class="p-4 border-b border-gray-200">
106
+ <div class="text-xs uppercase text-gray-500 font-semibold mb-2">Current Investigation</div>
107
+ <div class="bg-blue-50 p-3 rounded-lg">
108
+ <div class="text-sm font-medium text-blue-800">Case #INC-2023-1567</div>
109
+ <div class="text-xs text-blue-600 mt-1">Advanced Persistent Threat</div>
110
+ <div class="text-xs text-gray-500 mt-2 flex items-center">
111
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-1"></span>
112
+ Active Collection
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <nav class="flex-1 overflow-y-auto p-4">
118
+ <div class="mb-6">
119
+ <div class="text-xs uppercase text-gray-500 font-semibold mb-2">Investigation</div>
120
+ <ul>
121
+ <li class="mb-1">
122
+ <a href="#" class="flex items-center p-2 text-sm rounded-lg text-blue-700 bg-blue-100">
123
+ <i class="fas fa-home mr-3"></i>
124
+ Dashboard
125
+ </a>
126
+ </li>
127
+ <li class="mb-1">
128
+ <a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100">
129
+ <i class="fas fa-clipboard-list mr-3"></i>
130
+ Case Details
131
+ </a>
132
+ </li>
133
+ <li class="mb-1">
134
+ <a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100">
135
+ <i class="fas fa-bolt mr-3"></i>
136
+ Incident Timeline
137
+ </a>
138
+ </li>
139
+ </ul>
140
+ </div>
141
+
142
+ <div class="mb-6">
143
+ <div class="text-xs uppercase text-gray-500 font-semibold mb-2">Evidence</div>
144
+ <ul>
145
+ <li class="mb-1">
146
+ <a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100">
147
+ <i class="fas fa-hdd mr-3"></i>
148
+ Collection Jobs
149
+ </a>
150
+ </li>
151
+ <li class="mb-1">
152
+ <a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100">
153
+ <i class="fas fa-box-open mr-3"></i>
154
+ Evidence Inventory
155
+ </a>
156
+ </li>
157
+ <li class="mb-1">
158
+ <a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100">
159
+ <i class="fas fa-link mr-3"></i>
160
+ Chain of Custody
161
+ </a>
162
+ </li>
163
+ </ul>
164
+ </div>
165
+
166
+ <div class="mb-6">
167
+ <div class="text-xs uppercase text-gray-500 font-semibold mb-2">Analysis</div>
168
+ <ul>
169
+ <li class="mb-1">
170
+ <a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100">
171
+ <i class="fas fa-brain mr-3"></i>
172
+ Memory Forensics
173
+ </a>
174
+ </li>
175
+ <li class="mb-1">
176
+ <a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100">
177
+ <i class="fas fa-file-alt mr-3"></i>
178
+ File Analysis
179
+ </a>
180
+ </li>
181
+ <li class="mb-1">
182
+ <a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100">
183
+ <i class="fas fa-network-wired mr-3"></i>
184
+ Network Analysis
185
+ </a>
186
+ </li>
187
+ </ul>
188
+ </div>
189
+
190
+ <div>
191
+ <div class="text-xs uppercase text-gray-500 font-semibold mb-2">Reports</div>
192
+ <ul>
193
+ <li class="mb-1">
194
+ <a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100">
195
+ <i class="fas fa-file-signature mr-3"></i>
196
+ Findings Report
197
+ </a>
198
+ </li>
199
+ <li class="mb-1">
200
+ <a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100">
201
+ <i class="fas fa-shield-alt mr-3"></i>
202
+ Recommendations
203
+ </a>
204
+ </li>
205
+ <li class="mb-1">
206
+ <a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100">
207
+ <i class="fas fa-file-export mr-3"></i>
208
+ Export Packages
209
+ </a>
210
+ </li>
211
+ </ul>
212
+ </div>
213
+ </nav>
214
+
215
+ <div class="p-4 border-t border-gray-200">
216
+ <div class="flex items-center">
217
+ <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center">
218
+ <i class="fas fa-user text-gray-600"></i>
219
+ </div>
220
+ <div class="ml-3">
221
+ <div class="text-sm font-medium">Dr. Sarah Chen</div>
222
+ <div class="text-xs text-gray-500">Lead Forensic Investigator</div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Main Content -->
229
+ <div class="flex-1 overflow-auto">
230
+ <!-- Header -->
231
+ <header class="bg-white shadow-sm p-4 flex justify-between items-center">
232
+ <div>
233
+ <h2 class="text-xl font-bold text-gray-800">Post-Incident Forensic Agent</h2>
234
+ <div class="text-sm text-gray-600">Case #INC-2023-1567 | APT Investigation</div>
235
+ </div>
236
+
237
+ <div class="flex items-center space-x-4">
238
+ <div class="relative">
239
+ <button class="p-2 rounded-full hover:bg-gray-100">
240
+ <i class="fas fa-bell text-gray-600"></i>
241
+ <span class="absolute top-0 right-0 w-2 h-2 rounded-full bg-red-500"></span>
242
+ </button>
243
+ </div>
244
+ <div class="relative">
245
+ <button class="p-2 rounded-full hover:bg-gray-100">
246
+ <i class="fas fa-question-circle text-gray-600"></i>
247
+ </button>
248
+ </div>
249
+ <div class="relative">
250
+ <button class="p-2 rounded-full hover:bg-gray-100">
251
+ <i class="fas fa-cog text-gray-600"></i>
252
+ </button>
253
+ </div>
254
+ </div>
255
+ </header>
256
+
257
+ <!-- Dashboard Content -->
258
+ <main class="p-6">
259
+ <!-- Case Overview -->
260
+ <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
261
+ <div class="flex justify-between items-center mb-4">
262
+ <h3 class="text-lg font-semibold">Case Overview</h3>
263
+ <div class="flex space-x-2">
264
+ <button class="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 flex items-center">
265
+ <i class="fas fa-plus mr-1"></i> New Collection
266
+ </button>
267
+ <button class="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50 flex items-center">
268
+ <i class="fas fa-file-export mr-1"></i> Export
269
+ </button>
270
+ </div>
271
+ </div>
272
+
273
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
274
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
275
+ <div class="text-sm text-blue-800 font-medium mb-1">Affected Systems</div>
276
+ <div class="text-2xl font-bold text-blue-900">12</div>
277
+ <div class="text-xs text-blue-600 mt-1">3 critical, 5 high priority</div>
278
+ </div>
279
+ <div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
280
+ <div class="text-sm text-purple-800 font-medium mb-1">Evidence Items</div>
281
+ <div class="text-2xl font-bold text-purple-900">247</div>
282
+ <div class="text-xs text-purple-600 mt-1">32 memory dumps, 45 log files</div>
283
+ </div>
284
+ <div class="bg-green-50 p-4 rounded-lg border border-green-100">
285
+ <div class="text-sm text-green-800 font-medium mb-1">Collection Progress</div>
286
+ <div class="text-2xl font-bold text-green-900">78%</div>
287
+ <div class="text-xs text-green-600 mt-1">3 jobs remaining</div>
288
+ </div>
289
+ <div class="bg-orange-50 p-4 rounded-lg border border-orange-100">
290
+ <div class="text-sm text-orange-800 font-medium mb-1">IoC Matches</div>
291
+ <div class="text-2xl font-bold text-orange-900">14</div>
292
+ <div class="text-xs text-orange-600 mt-1">5 confirmed malicious</div>
293
+ </div>
294
+ </div>
295
+
296
+ <div class="border-t border-gray-200 pt-4">
297
+ <div class="flex justify-between items-center mb-3">
298
+ <h4 class="text-sm font-semibold text-gray-700">Recent Collection Jobs</h4>
299
+ <a href="#" class="text-xs text-blue-600 hover:underline">View All</a>
300
+ </div>
301
+
302
+ <div class="overflow-x-auto">
303
+ <table class="min-w-full divide-y divide-gray-200">
304
+ <thead class="bg-gray-50">
305
+ <tr>
306
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Job ID</th>
307
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Target System</th>
308
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scope</th>
309
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
310
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
311
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
312
+ </tr>
313
+ </thead>
314
+ <tbody class="bg-white divide-y divide-gray-200">
315
+ <tr>
316
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">JOB-2023-567</td>
317
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SRV-DB-01 (192.168.1.45)</td>
318
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Memory, Logs, Registry</td>
319
+ <td class="px-6 py-4 whitespace-nowrap">
320
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
321
+ </td>
322
+ <td class="px-6 py-4 whitespace-nowrap">
323
+ <div class="w-full bg-gray-200 rounded-full h-2">
324
+ <div class="bg-green-600 h-2 rounded-full" style="width: 100%"></div>
325
+ </div>
326
+ </td>
327
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
328
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
329
+ <button class="text-purple-600 hover:text-purple-900"><i class="fas fa-download"></i></button>
330
+ </td>
331
+ </tr>
332
+ <tr>
333
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">JOB-2023-568</td>
334
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">WS-JDOE-07 (192.168.1.78)</td>
335
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Full disk image</td>
336
+ <td class="px-6 py-4 whitespace-nowrap">
337
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">In Progress</span>
338
+ </td>
339
+ <td class="px-6 py-4 whitespace-nowrap">
340
+ <div class="w-full bg-gray-200 rounded-full h-2">
341
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 65%"></div>
342
+ </div>
343
+ </td>
344
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
345
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
346
+ <button class="text-gray-400 cursor-not-allowed"><i class="fas fa-download"></i></button>
347
+ </td>
348
+ </tr>
349
+ <tr>
350
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">JOB-2023-569</td>
351
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">FW-MAIN (192.168.1.1)</td>
352
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Network captures, Logs</td>
353
+ <td class="px-6 py-4 whitespace-nowrap">
354
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Pending</span>
355
+ </td>
356
+ <td class="px-6 py-4 whitespace-nowrap">
357
+ <div class="w-full bg-gray-200 rounded-full h-2">
358
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 0%"></div>
359
+ </div>
360
+ </td>
361
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
362
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
363
+ <button class="text-gray-400 cursor-not-allowed"><i class="fas fa-download"></i></button>
364
+ </td>
365
+ </tr>
366
+ </tbody>
367
+ </table>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Evidence Collection Panel -->
373
+ <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
374
+ <div class="flex justify-between items-center mb-4">
375
+ <h3 class="text-lg font-semibold">New Evidence Collection</h3>
376
+ </div>
377
+
378
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
379
+ <div class="flex border-b border-gray-200">
380
+ <button class="tab-btn px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600" data-tab="step1">1. Target Selection</button>
381
+ <button class="tab-btn px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="step2">2. Collection Scope</button>
382
+ <button class="tab-btn px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="step3">3. Timeframe</button>
383
+ <button class="tab-btn px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="step4">4. Credentials</button>
384
+ <button class="tab-btn px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="step5">5. Review</button>
385
+ </div>
386
+
387
+ <div class="p-4">
388
+ <!-- Step 1: Target Selection -->
389
+ <div id="step1" class="tab-content active">
390
+ <div class="mb-4">
391
+ <label class="block text-sm font-medium text-gray-700 mb-1">Affected Systems</label>
392
+ <select multiple class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 h-32">
393
+ <option>SRV-DB-01 (192.168.1.45)</option>
394
+ <option>SRV-WEB-02 (192.168.1.46)</option>
395
+ <option>WS-JDOE-07 (192.168.1.78)</option>
396
+ <option>WS-RSMITH-12 (192.168.1.79)</option>
397
+ <option>FW-MAIN (192.168.1.1)</option>
398
+ <option>SRV-FILE-03 (192.168.1.47)</option>
399
+ </select>
400
+ <p class="mt-1 text-xs text-gray-500">Select all systems requiring forensic collection</p>
401
+ </div>
402
+
403
+ <div class="flex justify-end">
404
+ <button class="next-step px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700">
405
+ Next <i class="fas fa-arrow-right ml-1"></i>
406
+ </button>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- Step 2: Collection Scope -->
411
+ <div id="step2" class="tab-content">
412
+ <div class="mb-4">
413
+ <label class="block text-sm font-medium text-gray-700 mb-2">Evidence Types</label>
414
+
415
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
416
+ <div class="border rounded-lg p-3 hover:border-blue-500">
417
+ <label class="flex items-center">
418
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
419
+ <span class="ml-2 block text-sm font-medium text-gray-700">Memory Dump</span>
420
+ </label>
421
+ <p class="mt-1 text-xs text-gray-500">Capture volatile memory for analysis of running processes</p>
422
+ </div>
423
+
424
+ <div class="border rounded-lg p-3 hover:border-blue-500">
425
+ <label class="flex items-center">
426
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
427
+ <span class="ml-2 block text-sm font-medium text-gray-700">Disk Image</span>
428
+ </label>
429
+ <p class="mt-1 text-xs text-gray-500">Create forensic copy of storage media (bit-for-bit)</p>
430
+ </div>
431
+
432
+ <div class="border rounded-lg p-3 hover:border-blue-500">
433
+ <label class="flex items-center">
434
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
435
+ <span class="ml-2 block text-sm font-medium text-gray-700">System Logs</span>
436
+ </label>
437
+ <p class="mt-1 text-xs text-gray-500">Collect event logs, application logs, and system logs</p>
438
+ </div>
439
+
440
+ <div class="border rounded-lg p-3 hover:border-blue-500">
441
+ <label class="flex items-center">
442
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
443
+ <span class="ml-2 block text-sm font-medium text-gray-700">Network Captures</span>
444
+ </label>
445
+ <p class="mt-1 text-xs text-gray-500">PCAP files and network connection information</p>
446
+ </div>
447
+
448
+ <div class="border rounded-lg p-3 hover:border-blue-500">
449
+ <label class="flex items-center">
450
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
451
+ <span class="ml-2 block text-sm font-medium text-gray-700">Registry Hives</span>
452
+ </label>
453
+ <p class="mt-1 text-xs text-gray-500">System and user registry hives for configuration analysis</p>
454
+ </div>
455
+
456
+ <div class="border rounded-lg p-3 hover:border-blue-500">
457
+ <label class="flex items-center">
458
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
459
+ <span class="ml-2 block text-sm font-medium text-gray-700">Browser Artifacts</span>
460
+ </label>
461
+ <p class="mt-1 text-xs text-gray-500">History, cookies, downloads and cache from web browsers</p>
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <div class="flex justify-between">
467
+ <button class="prev-step px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50">
468
+ <i class="fas fa-arrow-left mr-1"></i> Back
469
+ </button>
470
+ <button class="next-step px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700">
471
+ Next <i class="fas fa-arrow-right ml-1"></i>
472
+ </button>
473
+ </div>
474
+ </div>
475
+
476
+ <!-- Step 3: Timeframe -->
477
+ <div id="step3" class="tab-content">
478
+ <div class="mb-4">
479
+ <label class="block text-sm font-medium text-gray-700 mb-1">Collection Timeframe</label>
480
+ <p class="text-xs text-gray-500 mb-3">Define the timeframe for evidence collection (UTC)</p>
481
+
482
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
483
+ <div>
484
+ <label class="block text-sm font-medium text-gray-700 mb-1">Start Time</label>
485
+ <input type="datetime-local" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
486
+ </div>
487
+ <div>
488
+ <label class="block text-sm font-medium text-gray-700 mb-1">End Time</label>
489
+ <input type="datetime-local" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
490
+ </div>
491
+ </div>
492
+
493
+ <div class="mt-4">
494
+ <label class="flex items-center">
495
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
496
+ <span class="ml-2 block text-sm font-medium text-gray-700">Include pre-incident baseline (7 days prior)</span>
497
+ </label>
498
+ <p class="mt-1 text-xs text-gray-500">Collect system state information from before the incident for comparison</p>
499
+ </div>
500
+ </div>
501
+
502
+ <div class="flex justify-between">
503
+ <button class="prev-step px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50">
504
+ <i class="fas fa-arrow-left mr-1"></i> Back
505
+ </button>
506
+ <button class="next-step px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700">
507
+ Next <i class="fas fa-arrow-right ml-1"></i>
508
+ </button>
509
+ </div>
510
+ </div>
511
+
512
+ <!-- Step 4: Credentials -->
513
+ <div id="step4" class="tab-content">
514
+ <div class="mb-4">
515
+ <label class="block text-sm font-medium text-gray-700 mb-1">Authentication Method</label>
516
+ <div class="mt-1">
517
+ <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
518
+ <option>Domain Administrator Credentials</option>
519
+ <option>Local Administrator Credentials</option>
520
+ <option>SSH Key Authentication</option>
521
+ <option>Forensic Agent Token</option>
522
+ </select>
523
+ </div>
524
+ </div>
525
+
526
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
527
+ <div>
528
+ <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
529
+ <input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
530
+ </div>
531
+ <div>
532
+ <label class="block text-sm font-medium text-gray-700 mb-1">Password/Token</label>
533
+ <input type="password" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
534
+ </div>
535
+ </div>
536
+
537
+ <div class="mb-4">
538
+ <label class="flex items-center">
539
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
540
+ <span class="ml-2 block text-sm font-medium text-gray-700">Store credentials securely in vault for future use</span>
541
+ </label>
542
+ <p class="mt-1 text-xs text-gray-500">Credentials will be encrypted with AES-256 and access-controlled</p>
543
+ </div>
544
+
545
+ <div class="flex justify-between">
546
+ <button class="prev-step px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50">
547
+ <i class="fas fa-arrow-left mr-1"></i> Back
548
+ </button>
549
+ <button class="next-step px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700">
550
+ Next <i class="fas fa-arrow-right ml-1"></i>
551
+ </button>
552
+ </div>
553
+ </div>
554
+
555
+ <!-- Step 5: Review -->
556
+ <div id="step5" class="tab-content">
557
+ <div class="mb-6">
558
+ <h4 class="text-md font-semibold mb-3">Collection Summary</h4>
559
+
560
+ <div class="bg-gray-50 p-4 rounded-lg mb-4">
561
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
562
+ <div>
563
+ <h5 class="text-sm font-medium text-gray-700 mb-2">Target Systems</h5>
564
+ <ul class="text-sm text-gray-600 space-y-1">
565
+ <li>SRV-DB-01 (192.168.1.45)</li>
566
+ <li>WS-JDOE-07 (192.168.1.78)</li>
567
+ <li>FW-MAIN (192.168.1.1)</li>
568
+ </ul>
569
+ </div>
570
+ <div>
571
+ <h5 class="text-sm font-medium text-gray-700 mb-2">Evidence Types</h5>
572
+ <ul class="text-sm text-gray-600 space-y-1">
573
+ <li>Memory Dump</li>
574
+ <li>System Logs</li>
575
+ <li>Network Captures</li>
576
+ <li>Registry Hives</li>
577
+ </ul>
578
+ </div>
579
+ </div>
580
+
581
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
582
+ <div>
583
+ <h5 class="text-sm font-medium text-gray-700 mb-2">Timeframe</h5>
584
+ <p class="text-sm text-gray-600">2023-06-15 14:30 UTC to 2023-06-16 08:45 UTC</p>
585
+ <p class="text-xs text-gray-500 mt-1">+7 days pre-incident baseline</p>
586
+ </div>
587
+ <div>
588
+ <h5 class="text-sm font-medium text-gray-700 mb-2">Authentication</h5>
589
+ <p class="text-sm text-gray-600">Domain Administrator (admin@corp.local)</p>
590
+ <p class="text-xs text-gray-500 mt-1">Credentials will be stored securely</p>
591
+ </div>
592
+ </div>
593
+ </div>
594
+
595
+ <div class="mb-4">
596
+ <label class="block text-sm font-medium text-gray-700 mb-1">Collection Priority</label>
597
+ <select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
598
+ <option>Critical (Immediate collection)</option>
599
+ <option>High (Within 1 hour)</option>
600
+ <option>Medium (Within 4 hours)</option>
601
+ <option>Low (Within 24 hours)</option>
602
+ </select>
603
+ </div>
604
+
605
+ <div class="mb-4">
606
+ <label class="block text-sm font-medium text-gray-700 mb-1">Case Reference</label>
607
+ <input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="Case/Investigation number">
608
+ </div>
609
+
610
+ <div>
611
+ <label class="flex items-center">
612
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" required>
613
+ <span class="ml-2 block text-sm font-medium text-gray-700">I confirm this collection is authorized and complies with our forensic procedures</span>
614
+ </label>
615
+ </div>
616
+ </div>
617
+
618
+ <div class="flex justify-between">
619
+ <button class="prev-step px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50">
620
+ <i class="fas fa-arrow-left mr-1"></i> Back
621
+ </button>
622
+ <button class="px-4 py-2 bg-green-600 text-white text-sm rounded hover:bg-green-700">
623
+ <i class="fas fa-play mr-1"></i> Start Collection
624
+ </button>
625
+ </div>
626
+ </div>
627
+ </div>
628
+ </div>
629
+ </div>
630
+
631
+ <!-- Evidence Timeline -->
632
+ <div class="bg-white rounded-lg shadow-sm p-6">
633
+ <div class="flex justify-between items-center mb-4">
634
+ <h3 class="text-lg font-semibold">Incident Timeline</h3>
635
+ <div class="flex space-x-2">
636
+ <button class="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50 flex items-center">
637
+ <i class="fas fa-filter mr-1"></i> Filter
638
+ </button>
639
+ <button class="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50 flex items-center">
640
+ <i class="fas fa-download mr-1"></i> Export
641
+ </button>
642
+ </div>
643
+ </div>
644
+
645
+ <div class="border-l border-gray-200 pl-6 ml-4 space-y-8">
646
+ <!-- Timeline Item -->
647
+ <div class="relative timeline-item pl-6">
648
+ <div class="absolute -left-1.5 top-0 w-3 h-3 rounded-full bg-blue-600 border-4 border-white"></div>
649
+ <div class="flex justify-between items-start">
650
+ <div>
651
+ <time class="text-sm font-medium text-gray-700">2023-06-15 14:32:18 UTC</time>
652
+ <h4 class="text-base font-semibold mt-1">Initial Compromise</h4>
653
+ <p class="text-sm text-gray-600 mt-1">Spear phishing email delivered to jdoe@corp.local with malicious attachment</p>
654
+ <div class="mt-2 flex flex-wrap gap-2">
655
+ <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">High Confidence</span>
656
+ <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Email</span>
657
+ <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">WS-JDOE-07</span>
658
+ </div>
659
+ </div>
660
+ <button class="text-blue-600 hover:text-blue-900 text-sm flex items-center">
661
+ <i class="fas fa-link mr-1"></i> View Evidence
662
+ </button>
663
+ </div>
664
+ </div>
665
+
666
+ <!-- Timeline Item -->
667
+ <div class="relative timeline-item pl-6">
668
+ <div class="absolute -left-1.5 top-0 w-3 h-3 rounded-full bg-blue-600 border-4 border-white"></div>
669
+ <div class="flex justify-between items-start">
670
+ <div>
671
+ <time class="text-sm font-medium text-gray-700">2023-06-15 14:45:22 UTC</time>
672
+ <h4 class="text-base font-semibold mt-1">Malware Execution</h4>
673
+ <p class="text-sm text-gray-600 mt-1">Malicious payload executed, establishing C2 connection to 185.143.223.67</p>
674
+ <div class="mt-2 flex flex-wrap gap-2">
675
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Medium Confidence</span>
676
+ <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Process</span>
677
+ <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Network</span>
678
+ </div>
679
+ </div>
680
+ <button class="text-blue-600 hover:text-blue-900 text-sm flex items-center">
681
+ <i class="fas fa-link mr-1"></i> View Evidence
682
+ </button>
683
+ </div>
684
+ </div>
685
+
686
+ <!-- Timeline Item -->
687
+ <div class="relative timeline-item pl-6">
688
+ <div class="absolute -left-1.5 top-0 w-3 h-3 rounded-full bg-blue-600 border-4 border-white"></div>
689
+ <div class="flex justify-between items-start">
690
+ <div>
691
+ <time class="text-sm font-medium text-gray-700">2023-06-15 15:18:41 UTC</time>
692
+ <h4 class="text-base font-semibold mt-1">Lateral Movement</h4>
693
+ <p class="text-sm text-gray-600 mt-1">RDP connection established from WS-JDOE-07 to SRV-DB-01 using compromised credentials</p>
694
+ <div class="mt-2 flex flex-wrap gap-2">
695
+ <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">High Confidence</span>
696
+ <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Authentication</span>
697
+ <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Network</span>
698
+ </div>
699
+ </div>
700
+ <button class="text-blue-600 hover:text-blue-900 text-sm flex items-center">
701
+ <i class="fas fa-link mr-1"></i> View Evidence
702
+ </button>
703
+ </div>
704
+ </div>
705
+
706
+ <!-- Timeline Item -->
707
+ <div class="relative timeline-item pl-6">
708
+ <div class="absolute -left-1.5 top-0 w-3 h-3 rounded-full bg-blue-600 border-4 border-white"></div>
709
+ <div class="flex justify-between items-start">
710
+ <div>
711
+ <time class="text-sm font-medium text-gray-700">2023-06-15 16:02:15 UTC</time>
712
+ <h4 class="text-base font-semibold mt-1">Data Exfiltration</h4>
713
+ <p class="text-sm text-gray-600 mt-1">Large volume of database records transferred to external IP via encrypted channel</p>
714
+ <div class="mt-2 flex flex-wrap gap-2">
715
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Medium Confidence</span>
716
+ <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Network</span>
717
+ <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">SRV-DB-01</span>
718
+ </div>
719
+ </div>
720
+ <button class="text-blue-600 hover:text-blue-900 text-sm flex items-center">
721
+ <i class="fas fa-link mr-1"></i> View Evidence
722
+ </button>
723
+ </div>
724
+ </div>
725
+
726
+ <!-- Timeline Item -->
727
+ <div class="relative timeline-item pl-6">
728
+ <div class="absolute -left-1.5 top-0 w-3 h-3 rounded-full bg-blue-600 border-4 border-white"></div>
729
+ <div class="flex justify-between items-start">
730
+ <div>
731
+ <time class="text-sm font-medium text-gray-700">2023-06-16 08:30:00 UTC</time>
732
+ <h4 class="text-base font-semibold mt-1">Containment Initiated</h4>
733
+ <p class="text-sm text-gray-600 mt-1">Security team isolated affected systems and began forensic collection</p>
734
+ <div class="mt-2 flex flex-wrap gap-2">
735
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Confirmed</span>
736
+ <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Response</span>
737
+ </div>
738
+ </div>
739
+ <button class="text-blue-600 hover:text-blue-900 text-sm flex items-center">
740
+ <i class="fas fa-link mr-1"></i> View Evidence
741
+ </button>
742
+ </div>
743
+ </div>
744
+ </div>
745
+ </div>
746
+ </main>
747
+ </div>
748
+
749
+ <script>
750
+ // Tab navigation for evidence collection
751
+ document.querySelectorAll('.tab-btn').forEach(btn => {
752
+ btn.addEventListener('click', () => {
753
+ const tabId = btn.getAttribute('data-tab');
754
+
755
+ // Hide all tab contents
756
+ document.querySelectorAll('.tab-content').forEach(content => {
757
+ content.classList.remove('active');
758
+ });
759
+
760
+ // Show selected tab content
761
+ document.getElementById(tabId).classList.add('active');
762
+
763
+ // Update tab button styles
764
+ document.querySelectorAll('.tab-btn').forEach(tabBtn => {
765
+ tabBtn.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
766
+ tabBtn.classList.add('text-gray-500', 'hover:text-gray-700');
767
+ });
768
+
769
+ btn.classList.remove('text-gray-500', 'hover:text-gray-700');
770
+ btn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
771
+ });
772
+ });
773
+
774
+ // Next step button functionality
775
+ document.querySelectorAll('.next-step').forEach(btn => {
776
+ btn.addEventListener('click', () => {
777
+ const currentTab = btn.closest('.tab-content');
778
+ const nextTab = currentTab.nextElementSibling;
779
+
780
+ if (nextTab) {
781
+ currentTab.classList.remove('active');
782
+ nextTab.classList.add('active');
783
+
784
+ // Update tab button styles
785
+ const currentTabBtn = document.querySelector(`.tab-btn[data-tab="${currentTab.id}"]`);
786
+ const nextTabBtn = document.querySelector(`.tab-btn[data-tab="${nextTab.id}"]`);
787
+
788
+ currentTabBtn.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
789
+ currentTabBtn.classList.add('text-gray-500', 'hover:text-gray-700');
790
+
791
+ nextTabBtn.classList.remove('text-gray-500', 'hover:text-gray-700');
792
+ nextTabBtn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
793
+ }
794
+ });
795
+ });
796
+
797
+ // Previous step button functionality
798
+ document.querySelectorAll('.prev-step').forEach(btn => {
799
+ btn.addEventListener('click', () => {
800
+ const currentTab = btn.closest('.tab-content');
801
+ const prevTab = currentTab.previousElementSibling;
802
+
803
+ if (prevTab) {
804
+ currentTab.classList.remove('active');
805
+ prevTab.classList.add('active');
806
+
807
+ // Update tab button styles
808
+ const currentTabBtn = document.querySelector(`.tab-btn[data-tab="${currentTab.id}"]`);
809
+ const prevTabBtn = document.querySelector(`.tab-btn[data-tab="${prevTab.id}"]`);
810
+
811
+ currentTabBtn.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
812
+ currentTabBtn.classList.add('text-gray-500', 'hover:text-gray-700');
813
+
814
+ prevTabBtn.classList.remove('text-gray-500', 'hover:text-gray-700');
815
+ prevTabBtn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
816
+ }
817
+ });
818
+ });
819
+ </script>
820
+ <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/post-incident-forensic-agent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
821
+ </html>