|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CyberSecure | Forensic Agent</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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Roboto:wght@300;400;500;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #2563eb; |
|
|
--primary-dark: #1d4ed8; |
|
|
--secondary: #7c3aed; |
|
|
--danger: #dc2626; |
|
|
--success: #16a34a; |
|
|
--warning: #d97706; |
|
|
--dark: #1e293b; |
|
|
--light: #f8fafc; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background-color: #f1f5f9; |
|
|
color: var(--dark); |
|
|
} |
|
|
|
|
|
.mono { |
|
|
font-family: 'Roboto Mono', monospace; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.timeline-item::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
width: 3px; |
|
|
height: 100%; |
|
|
background-color: var(--primary); |
|
|
} |
|
|
|
|
|
.evidence-card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
transition: width 0.5s ease; |
|
|
} |
|
|
|
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.tab-content.active { |
|
|
display: block; |
|
|
animation: fadeIn 0.3s ease; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
|
|
|
.tooltip { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.tooltip-text { |
|
|
visibility: hidden; |
|
|
width: 200px; |
|
|
background-color: var(--dark); |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 5px; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.tooltip:hover .tooltip-text { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen flex"> |
|
|
|
|
|
<div class="sidebar w-64 bg-white shadow-lg flex flex-col"> |
|
|
<div class="p-4 border-b border-gray-200 flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-xl">CS</div> |
|
|
<h1 class="text-xl font-bold ml-3">CyberSecure Forensics</h1> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-b border-gray-200"> |
|
|
<div class="text-xs uppercase text-gray-500 font-semibold mb-2">Current Investigation</div> |
|
|
<div class="bg-blue-50 p-3 rounded-lg"> |
|
|
<div class="text-sm font-medium text-blue-800">Case #INC-2023-1567</div> |
|
|
<div class="text-xs text-blue-600 mt-1">Advanced Persistent Threat</div> |
|
|
<div class="text-xs text-gray-500 mt-2 flex items-center"> |
|
|
<span class="w-2 h-2 rounded-full bg-green-500 mr-1"></span> |
|
|
Active Collection |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<nav class="flex-1 overflow-y-auto p-4"> |
|
|
<div class="mb-6"> |
|
|
<div class="text-xs uppercase text-gray-500 font-semibold mb-2">Investigation</div> |
|
|
<ul> |
|
|
<li class="mb-1"> |
|
|
<a href="#" class="flex items-center p-2 text-sm rounded-lg text-blue-700 bg-blue-100"> |
|
|
<i class="fas fa-home mr-3"></i> |
|
|
Dashboard |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-1"> |
|
|
<a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100"> |
|
|
<i class="fas fa-clipboard-list mr-3"></i> |
|
|
Case Details |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-1"> |
|
|
<a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100"> |
|
|
<i class="fas fa-bolt mr-3"></i> |
|
|
Incident Timeline |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="text-xs uppercase text-gray-500 font-semibold mb-2">Evidence</div> |
|
|
<ul> |
|
|
<li class="mb-1"> |
|
|
<a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100"> |
|
|
<i class="fas fa-hdd mr-3"></i> |
|
|
Collection Jobs |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-1"> |
|
|
<a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100"> |
|
|
<i class="fas fa-box-open mr-3"></i> |
|
|
Evidence Inventory |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-1"> |
|
|
<a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100"> |
|
|
<i class="fas fa-link mr-3"></i> |
|
|
Chain of Custody |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="text-xs uppercase text-gray-500 font-semibold mb-2">Analysis</div> |
|
|
<ul> |
|
|
<li class="mb-1"> |
|
|
<a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100"> |
|
|
<i class="fas fa-brain mr-3"></i> |
|
|
Memory Forensics |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-1"> |
|
|
<a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100"> |
|
|
<i class="fas fa-file-alt mr-3"></i> |
|
|
File Analysis |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-1"> |
|
|
<a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100"> |
|
|
<i class="fas fa-network-wired mr-3"></i> |
|
|
Network Analysis |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="text-xs uppercase text-gray-500 font-semibold mb-2">Reports</div> |
|
|
<ul> |
|
|
<li class="mb-1"> |
|
|
<a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100"> |
|
|
<i class="fas fa-file-signature mr-3"></i> |
|
|
Findings Report |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-1"> |
|
|
<a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100"> |
|
|
<i class="fas fa-shield-alt mr-3"></i> |
|
|
Recommendations |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-1"> |
|
|
<a href="#" class="flex items-center p-2 text-sm rounded-lg text-gray-700 hover:bg-gray-100"> |
|
|
<i class="fas fa-file-export mr-3"></i> |
|
|
Export Packages |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<div class="p-4 border-t border-gray-200"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-gray-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<div class="text-sm font-medium">Dr. Sarah Chen</div> |
|
|
<div class="text-xs text-gray-500">Lead Forensic Investigator</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-auto"> |
|
|
|
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
|
|
<div> |
|
|
<h2 class="text-xl font-bold text-gray-800">Post-Incident Forensic Agent</h2> |
|
|
<div class="text-sm text-gray-600">Case #INC-2023-1567 | APT Investigation</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i class="fas fa-bell text-gray-600"></i> |
|
|
<span class="absolute top-0 right-0 w-2 h-2 rounded-full bg-red-500"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<button class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i class="fas fa-question-circle text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<button class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i class="fas fa-cog text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="p-6"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6 mb-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold">Case Overview</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 flex items-center"> |
|
|
<i class="fas fa-plus mr-1"></i> New Collection |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50 flex items-center"> |
|
|
<i class="fas fa-file-export mr-1"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> |
|
|
<div class="bg-blue-50 p-4 rounded-lg border border-blue-100"> |
|
|
<div class="text-sm text-blue-800 font-medium mb-1">Affected Systems</div> |
|
|
<div class="text-2xl font-bold text-blue-900">12</div> |
|
|
<div class="text-xs text-blue-600 mt-1">3 critical, 5 high priority</div> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-4 rounded-lg border border-purple-100"> |
|
|
<div class="text-sm text-purple-800 font-medium mb-1">Evidence Items</div> |
|
|
<div class="text-2xl font-bold text-purple-900">247</div> |
|
|
<div class="text-xs text-purple-600 mt-1">32 memory dumps, 45 log files</div> |
|
|
</div> |
|
|
<div class="bg-green-50 p-4 rounded-lg border border-green-100"> |
|
|
<div class="text-sm text-green-800 font-medium mb-1">Collection Progress</div> |
|
|
<div class="text-2xl font-bold text-green-900">78%</div> |
|
|
<div class="text-xs text-green-600 mt-1">3 jobs remaining</div> |
|
|
</div> |
|
|
<div class="bg-orange-50 p-4 rounded-lg border border-orange-100"> |
|
|
<div class="text-sm text-orange-800 font-medium mb-1">IoC Matches</div> |
|
|
<div class="text-2xl font-bold text-orange-900">14</div> |
|
|
<div class="text-xs text-orange-600 mt-1">5 confirmed malicious</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-200 pt-4"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h4 class="text-sm font-semibold text-gray-700">Recent Collection Jobs</h4> |
|
|
<a href="#" class="text-xs text-blue-600 hover:underline">View All</a> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Job ID</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Target System</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scope</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">JOB-2023-567</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SRV-DB-01 (192.168.1.45)</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Memory, Logs, Registry</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-green-600 h-2 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
|
<button class="text-purple-600 hover:text-purple-900"><i class="fas fa-download"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">JOB-2023-568</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">WS-JDOE-07 (192.168.1.78)</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Full disk image</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">In Progress</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-yellow-500 h-2 rounded-full" style="width: 65%"></div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
|
<button class="text-gray-400 cursor-not-allowed"><i class="fas fa-download"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">JOB-2023-569</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">FW-MAIN (192.168.1.1)</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Network captures, Logs</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Pending</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-blue-500 h-2 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
|
<button class="text-gray-400 cursor-not-allowed"><i class="fas fa-download"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6 mb-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold">New Evidence Collection</h3> |
|
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<div class="flex border-b border-gray-200"> |
|
|
<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> |
|
|
<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> |
|
|
<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> |
|
|
<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> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="p-4"> |
|
|
|
|
|
<div id="step1" class="tab-content active"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Affected Systems</label> |
|
|
<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"> |
|
|
<option>SRV-DB-01 (192.168.1.45)</option> |
|
|
<option>SRV-WEB-02 (192.168.1.46)</option> |
|
|
<option>WS-JDOE-07 (192.168.1.78)</option> |
|
|
<option>WS-RSMITH-12 (192.168.1.79)</option> |
|
|
<option>FW-MAIN (192.168.1.1)</option> |
|
|
<option>SRV-FILE-03 (192.168.1.47)</option> |
|
|
</select> |
|
|
<p class="mt-1 text-xs text-gray-500">Select all systems requiring forensic collection</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end"> |
|
|
<button class="next-step px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"> |
|
|
Next <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step2" class="tab-content"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Evidence Types</label> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="border rounded-lg p-3 hover:border-blue-500"> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
|
|
<span class="ml-2 block text-sm font-medium text-gray-700">Memory Dump</span> |
|
|
</label> |
|
|
<p class="mt-1 text-xs text-gray-500">Capture volatile memory for analysis of running processes</p> |
|
|
</div> |
|
|
|
|
|
<div class="border rounded-lg p-3 hover:border-blue-500"> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
|
|
<span class="ml-2 block text-sm font-medium text-gray-700">Disk Image</span> |
|
|
</label> |
|
|
<p class="mt-1 text-xs text-gray-500">Create forensic copy of storage media (bit-for-bit)</p> |
|
|
</div> |
|
|
|
|
|
<div class="border rounded-lg p-3 hover:border-blue-500"> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
|
|
<span class="ml-2 block text-sm font-medium text-gray-700">System Logs</span> |
|
|
</label> |
|
|
<p class="mt-1 text-xs text-gray-500">Collect event logs, application logs, and system logs</p> |
|
|
</div> |
|
|
|
|
|
<div class="border rounded-lg p-3 hover:border-blue-500"> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
|
|
<span class="ml-2 block text-sm font-medium text-gray-700">Network Captures</span> |
|
|
</label> |
|
|
<p class="mt-1 text-xs text-gray-500">PCAP files and network connection information</p> |
|
|
</div> |
|
|
|
|
|
<div class="border rounded-lg p-3 hover:border-blue-500"> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
|
|
<span class="ml-2 block text-sm font-medium text-gray-700">Registry Hives</span> |
|
|
</label> |
|
|
<p class="mt-1 text-xs text-gray-500">System and user registry hives for configuration analysis</p> |
|
|
</div> |
|
|
|
|
|
<div class="border rounded-lg p-3 hover:border-blue-500"> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
|
|
<span class="ml-2 block text-sm font-medium text-gray-700">Browser Artifacts</span> |
|
|
</label> |
|
|
<p class="mt-1 text-xs text-gray-500">History, cookies, downloads and cache from web browsers</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between"> |
|
|
<button class="prev-step px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50"> |
|
|
<i class="fas fa-arrow-left mr-1"></i> Back |
|
|
</button> |
|
|
<button class="next-step px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"> |
|
|
Next <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step3" class="tab-content"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Collection Timeframe</label> |
|
|
<p class="text-xs text-gray-500 mb-3">Define the timeframe for evidence collection (UTC)</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Start Time</label> |
|
|
<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"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">End Time</label> |
|
|
<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"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
|
|
<span class="ml-2 block text-sm font-medium text-gray-700">Include pre-incident baseline (7 days prior)</span> |
|
|
</label> |
|
|
<p class="mt-1 text-xs text-gray-500">Collect system state information from before the incident for comparison</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between"> |
|
|
<button class="prev-step px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50"> |
|
|
<i class="fas fa-arrow-left mr-1"></i> Back |
|
|
</button> |
|
|
<button class="next-step px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"> |
|
|
Next <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step4" class="tab-content"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Authentication Method</label> |
|
|
<div class="mt-1"> |
|
|
<select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
|
|
<option>Domain Administrator Credentials</option> |
|
|
<option>Local Administrator Credentials</option> |
|
|
<option>SSH Key Authentication</option> |
|
|
<option>Forensic Agent Token</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Username</label> |
|
|
<input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Password/Token</label> |
|
|
<input type="password" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
|
|
<span class="ml-2 block text-sm font-medium text-gray-700">Store credentials securely in vault for future use</span> |
|
|
</label> |
|
|
<p class="mt-1 text-xs text-gray-500">Credentials will be encrypted with AES-256 and access-controlled</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between"> |
|
|
<button class="prev-step px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50"> |
|
|
<i class="fas fa-arrow-left mr-1"></i> Back |
|
|
</button> |
|
|
<button class="next-step px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"> |
|
|
Next <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step5" class="tab-content"> |
|
|
<div class="mb-6"> |
|
|
<h4 class="text-md font-semibold mb-3">Collection Summary</h4> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg mb-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<h5 class="text-sm font-medium text-gray-700 mb-2">Target Systems</h5> |
|
|
<ul class="text-sm text-gray-600 space-y-1"> |
|
|
<li>SRV-DB-01 (192.168.1.45)</li> |
|
|
<li>WS-JDOE-07 (192.168.1.78)</li> |
|
|
<li>FW-MAIN (192.168.1.1)</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h5 class="text-sm font-medium text-gray-700 mb-2">Evidence Types</h5> |
|
|
<ul class="text-sm text-gray-600 space-y-1"> |
|
|
<li>Memory Dump</li> |
|
|
<li>System Logs</li> |
|
|
<li>Network Captures</li> |
|
|
<li>Registry Hives</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4"> |
|
|
<div> |
|
|
<h5 class="text-sm font-medium text-gray-700 mb-2">Timeframe</h5> |
|
|
<p class="text-sm text-gray-600">2023-06-15 14:30 UTC to 2023-06-16 08:45 UTC</p> |
|
|
<p class="text-xs text-gray-500 mt-1">+7 days pre-incident baseline</p> |
|
|
</div> |
|
|
<div> |
|
|
<h5 class="text-sm font-medium text-gray-700 mb-2">Authentication</h5> |
|
|
<p class="text-sm text-gray-600">Domain Administrator ([email protected])</p> |
|
|
<p class="text-xs text-gray-500 mt-1">Credentials will be stored securely</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Collection Priority</label> |
|
|
<select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
|
|
<option>Critical (Immediate collection)</option> |
|
|
<option>High (Within 1 hour)</option> |
|
|
<option>Medium (Within 4 hours)</option> |
|
|
<option>Low (Within 24 hours)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Case Reference</label> |
|
|
<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"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" required> |
|
|
<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> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between"> |
|
|
<button class="prev-step px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50"> |
|
|
<i class="fas fa-arrow-left mr-1"></i> Back |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-green-600 text-white text-sm rounded hover:bg-green-700"> |
|
|
<i class="fas fa-play mr-1"></i> Start Collection |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold">Incident Timeline</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50 flex items-center"> |
|
|
<i class="fas fa-filter mr-1"></i> Filter |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50 flex items-center"> |
|
|
<i class="fas fa-download mr-1"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-l border-gray-200 pl-6 ml-4 space-y-8"> |
|
|
|
|
|
<div class="relative timeline-item pl-6"> |
|
|
<div class="absolute -left-1.5 top-0 w-3 h-3 rounded-full bg-blue-600 border-4 border-white"></div> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<time class="text-sm font-medium text-gray-700">2023-06-15 14:32:18 UTC</time> |
|
|
<h4 class="text-base font-semibold mt-1">Initial Compromise</h4> |
|
|
<p class="text-sm text-gray-600 mt-1">Spear phishing email delivered to [email protected] with malicious attachment</p> |
|
|
<div class="mt-2 flex flex-wrap gap-2"> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">High Confidence</span> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Email</span> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">WS-JDOE-07</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-blue-600 hover:text-blue-900 text-sm flex items-center"> |
|
|
<i class="fas fa-link mr-1"></i> View Evidence |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative timeline-item pl-6"> |
|
|
<div class="absolute -left-1.5 top-0 w-3 h-3 rounded-full bg-blue-600 border-4 border-white"></div> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<time class="text-sm font-medium text-gray-700">2023-06-15 14:45:22 UTC</time> |
|
|
<h4 class="text-base font-semibold mt-1">Malware Execution</h4> |
|
|
<p class="text-sm text-gray-600 mt-1">Malicious payload executed, establishing C2 connection to 185.143.223.67</p> |
|
|
<div class="mt-2 flex flex-wrap gap-2"> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Medium Confidence</span> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Process</span> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Network</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-blue-600 hover:text-blue-900 text-sm flex items-center"> |
|
|
<i class="fas fa-link mr-1"></i> View Evidence |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative timeline-item pl-6"> |
|
|
<div class="absolute -left-1.5 top-0 w-3 h-3 rounded-full bg-blue-600 border-4 border-white"></div> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<time class="text-sm font-medium text-gray-700">2023-06-15 15:18:41 UTC</time> |
|
|
<h4 class="text-base font-semibold mt-1">Lateral Movement</h4> |
|
|
<p class="text-sm text-gray-600 mt-1">RDP connection established from WS-JDOE-07 to SRV-DB-01 using compromised credentials</p> |
|
|
<div class="mt-2 flex flex-wrap gap-2"> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">High Confidence</span> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Authentication</span> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Network</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-blue-600 hover:text-blue-900 text-sm flex items-center"> |
|
|
<i class="fas fa-link mr-1"></i> View Evidence |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative timeline-item pl-6"> |
|
|
<div class="absolute -left-1.5 top-0 w-3 h-3 rounded-full bg-blue-600 border-4 border-white"></div> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<time class="text-sm font-medium text-gray-700">2023-06-15 16:02:15 UTC</time> |
|
|
<h4 class="text-base font-semibold mt-1">Data Exfiltration</h4> |
|
|
<p class="text-sm text-gray-600 mt-1">Large volume of database records transferred to external IP via encrypted channel</p> |
|
|
<div class="mt-2 flex flex-wrap gap-2"> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Medium Confidence</span> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Network</span> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">SRV-DB-01</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-blue-600 hover:text-blue-900 text-sm flex items-center"> |
|
|
<i class="fas fa-link mr-1"></i> View Evidence |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative timeline-item pl-6"> |
|
|
<div class="absolute -left-1.5 top-0 w-3 h-3 rounded-full bg-blue-600 border-4 border-white"></div> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<time class="text-sm font-medium text-gray-700">2023-06-16 08:30:00 UTC</time> |
|
|
<h4 class="text-base font-semibold mt-1">Containment Initiated</h4> |
|
|
<p class="text-sm text-gray-600 mt-1">Security team isolated affected systems and began forensic collection</p> |
|
|
<div class="mt-2 flex flex-wrap gap-2"> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Confirmed</span> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Response</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-blue-600 hover:text-blue-900 text-sm flex items-center"> |
|
|
<i class="fas fa-link mr-1"></i> View Evidence |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.tab-btn').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
const tabId = btn.getAttribute('data-tab'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-content').forEach(content => { |
|
|
content.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById(tabId).classList.add('active'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-btn').forEach(tabBtn => { |
|
|
tabBtn.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600'); |
|
|
tabBtn.classList.add('text-gray-500', 'hover:text-gray-700'); |
|
|
}); |
|
|
|
|
|
btn.classList.remove('text-gray-500', 'hover:text-gray-700'); |
|
|
btn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.next-step').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
const currentTab = btn.closest('.tab-content'); |
|
|
const nextTab = currentTab.nextElementSibling; |
|
|
|
|
|
if (nextTab) { |
|
|
currentTab.classList.remove('active'); |
|
|
nextTab.classList.add('active'); |
|
|
|
|
|
|
|
|
const currentTabBtn = document.querySelector(`.tab-btn[data-tab="${currentTab.id}"]`); |
|
|
const nextTabBtn = document.querySelector(`.tab-btn[data-tab="${nextTab.id}"]`); |
|
|
|
|
|
currentTabBtn.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600'); |
|
|
currentTabBtn.classList.add('text-gray-500', 'hover:text-gray-700'); |
|
|
|
|
|
nextTabBtn.classList.remove('text-gray-500', 'hover:text-gray-700'); |
|
|
nextTabBtn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.prev-step').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
const currentTab = btn.closest('.tab-content'); |
|
|
const prevTab = currentTab.previousElementSibling; |
|
|
|
|
|
if (prevTab) { |
|
|
currentTab.classList.remove('active'); |
|
|
prevTab.classList.add('active'); |
|
|
|
|
|
|
|
|
const currentTabBtn = document.querySelector(`.tab-btn[data-tab="${currentTab.id}"]`); |
|
|
const prevTabBtn = document.querySelector(`.tab-btn[data-tab="${prevTab.id}"]`); |
|
|
|
|
|
currentTabBtn.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600'); |
|
|
currentTabBtn.classList.add('text-gray-500', 'hover:text-gray-700'); |
|
|
|
|
|
prevTabBtn.classList.remove('text-gray-500', 'hover:text-gray-700'); |
|
|
prevTabBtn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
