| <!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 (admin@corp.local)</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 jdoe@corp.local 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> |
