278 lines
14 KiB
HTML
278 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Neptune - Cybersecurity Incident Journal</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="assets/css/style.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark border-bottom border-secondary">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand d-flex align-items-center" href="#">
|
|
<i class="bi bi-globe2 me-2 text-primary"></i>
|
|
<span class="fw-bold">Neptune</span>
|
|
<span class="badge bg-secondary ms-2 small">Cybersecurity Journal</span>
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="nav nav-tabs border-0 ms-3" id="mainTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="timeline-tab" data-bs-toggle="tab" data-bs-target="#timeline" type="button" role="tab">
|
|
<i class="bi bi-clock-history me-1"></i>Timeline
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="network-tab" data-bs-toggle="tab" data-bs-target="#network" type="button" role="tab">
|
|
<i class="bi bi-diagram-3 me-1"></i>Network Map
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid mt-3">
|
|
<div class="tab-content" id="mainTabContent">
|
|
|
|
<!-- ==================== TIMELINE TAB ==================== -->
|
|
<div class="tab-pane fade show active" id="timeline" role="tabpanel">
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<h4><i class="bi bi-clock-history text-primary"></i> Incident Timeline</h4>
|
|
</div>
|
|
<div class="col-md-6 text-end">
|
|
<button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#eventModal">
|
|
<i class="bi bi-plus-lg"></i> New Event
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<select class="form-select form-select-sm" id="teamFilter">
|
|
<option value="">All Teams</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<input type="text" class="form-control form-control-sm" id="searchEvents" placeholder="Search events...">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="timelineContainer">
|
|
<div class="text-center text-secondary py-5">
|
|
<div class="spinner-border" role="status"></div>
|
|
<p class="mt-2">Loading events...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== NETWORK MAP TAB ==================== -->
|
|
<div class="tab-pane fade" id="network" role="tabpanel">
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<h4><i class="bi bi-diagram-3 text-primary"></i> Network Map</h4>
|
|
</div>
|
|
<div class="col-md-6 text-end">
|
|
<button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#nodeModal">
|
|
<i class="bi bi-plus-lg"></i> Add Node
|
|
</button>
|
|
<button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#linkModal">
|
|
<i class="bi bi-link-45deg"></i> Add Link
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-9">
|
|
<div class="card bg-dark border-secondary">
|
|
<div class="card-body p-0" id="networkCanvasWrapper" style="height: 70vh; position: relative; overflow: hidden;">
|
|
<canvas id="networkCanvas" style="width: 100%; height: 100%;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card bg-dark border-secondary mb-2">
|
|
<div class="card-header py-2">
|
|
<small class="fw-bold">Node Details</small>
|
|
</div>
|
|
<div class="card-body py-2" id="nodeDetails">
|
|
<small class="text-secondary">Click a node to see details</small>
|
|
</div>
|
|
</div>
|
|
<div class="list-group list-group-flush bg-dark border-secondary rounded" id="nodeList" style="max-height: 50vh; overflow-y: auto;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== EVENT MODAL ==================== -->
|
|
<div class="modal fade" id="eventModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark">
|
|
<div class="modal-header border-secondary">
|
|
<h5 class="modal-title"><i class="bi bi-plus-circle text-primary"></i> New Event</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="eventForm">
|
|
<div class="mb-2">
|
|
<label class="form-label small">Team</label>
|
|
<select class="form-select form-select-sm" id="eventTeam" required></select>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label small">Title</label>
|
|
<input type="text" class="form-control form-control-sm" id="eventTitle" required>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label small">Description</label>
|
|
<textarea class="form-control form-control-sm" id="eventDescription" rows="3"></textarea>
|
|
</div>
|
|
<div class="row mb-2">
|
|
<div class="col">
|
|
<label class="form-label small">Severity</label>
|
|
<select class="form-select form-select-sm" id="eventSeverity">
|
|
<option value="info">Info</option>
|
|
<option value="low">Low</option>
|
|
<option value="medium">Medium</option>
|
|
<option value="high">High</option>
|
|
<option value="critical">Critical</option>
|
|
</select>
|
|
</div>
|
|
<div class="col">
|
|
<label class="form-label small">Type</label>
|
|
<select class="form-select form-select-sm" id="eventType">
|
|
<option value="general">General</option>
|
|
<option value="detection">Detection</option>
|
|
<option value="incident">Incident</option>
|
|
<option value="remediation">Remediation</option>
|
|
<option value="intel">Threat Intel</option>
|
|
<option value="exercise">Exercise</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label small">Occurred At</label>
|
|
<input type="datetime-local" class="form-control form-control-sm" id="eventTime">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer border-secondary">
|
|
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-sm btn-primary" id="saveEvent"><i class="bi bi-save"></i> Save Event</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== NODE MODAL ==================== -->
|
|
<div class="modal fade" id="nodeModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark">
|
|
<div class="modal-header border-secondary">
|
|
<h5 class="modal-title"><i class="bi bi-plus-circle text-primary"></i> Add Network Node</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="nodeForm">
|
|
<div class="mb-2">
|
|
<label class="form-label small">Label</label>
|
|
<input type="text" class="form-control form-control-sm" id="nodeLabel" required>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label small">IP Address</label>
|
|
<input type="text" class="form-control form-control-sm" id="nodeIp">
|
|
</div>
|
|
<div class="row mb-2">
|
|
<div class="col">
|
|
<label class="form-label small">Type</label>
|
|
<select class="form-select form-select-sm" id="nodeType">
|
|
<option value="host">Host</option>
|
|
<option value="server">Server</option>
|
|
<option value="router">Router</option>
|
|
<option value="firewall">Firewall</option>
|
|
<option value="switch">Switch</option>
|
|
<option value="cloud">Cloud</option>
|
|
<option value="endpoint">Endpoint</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
</div>
|
|
<div class="col">
|
|
<label class="form-label small">Status</label>
|
|
<select class="form-select form-select-sm" id="nodeStatus">
|
|
<option value="unknown">Unknown</option>
|
|
<option value="online">Online</option>
|
|
<option value="offline">Offline</option>
|
|
<option value="monitoring">Monitoring</option>
|
|
<option value="compromised">Compromised</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label small">Group</label>
|
|
<input type="text" class="form-control form-control-sm" id="nodeGroup" placeholder="e.g. DMZ, Internal, Cloud">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer border-secondary">
|
|
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-sm btn-primary" id="saveNode"><i class="bi bi-save"></i> Add Node</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== LINK MODAL ==================== -->
|
|
<div class="modal fade" id="linkModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark">
|
|
<div class="modal-header border-secondary">
|
|
<h5 class="modal-title"><i class="bi bi-link-45deg text-primary"></i> Add Connection</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="linkForm">
|
|
<div class="mb-2">
|
|
<label class="form-label small">Source Node</label>
|
|
<select class="form-select form-select-sm" id="linkSource" required></select>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label small">Target Node</label>
|
|
<select class="form-select form-select-sm" id="linkTarget" required></select>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label small">Connection Type</label>
|
|
<select class="form-select form-select-sm" id="linkType">
|
|
<option value="direct">Direct</option>
|
|
<option value="vpn">VPN</option>
|
|
<option value="wireless">Wireless</option>
|
|
<option value="monitored">Monitored</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label small">Label (optional)</label>
|
|
<input type="text" class="form-control form-control-sm" id="linkLabel" placeholder="e.g. 1 Gbps, SSH Tunnel">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer border-secondary">
|
|
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-sm btn-primary" id="saveLink"><i class="bi bi-save"></i> Add Link</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/js/app.js"></script>
|
|
</body>
|
|
</html> |