+87
-30
@@ -5,7 +5,7 @@
|
||||
<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="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css" rel="stylesheet">
|
||||
<link href="assets/css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
@@ -13,7 +13,7 @@
|
||||
<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>
|
||||
<i class="fas fa-globe me-2 text-primary"></i>
|
||||
<span class="fw-bold">Neptune</span>
|
||||
<span class="badge bg-secondary ms-2 small">Cybersecurity Journal</span>
|
||||
</a>
|
||||
@@ -24,12 +24,12 @@
|
||||
<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
|
||||
<i class="fas fa-clock 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
|
||||
<i class="fas fa-project-diagram me-1"></i>Network Map
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -40,16 +40,14 @@
|
||||
<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>
|
||||
<h4><i class="fas fa-clock 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
|
||||
<i class="fas fa-plus me-1"></i> New Event
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,19 +71,21 @@
|
||||
</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>
|
||||
<h4><i class="fas fa-project-diagram text-primary"></i> Network Map</h4>
|
||||
<small class="text-secondary">Drag nodes & shapes · Resize via corner handles · <kbd class="bg-dark text-secondary">Del</kbd> to delete</small>
|
||||
</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
|
||||
<i class="fas fa-plus me-1"></i> Add Node
|
||||
</button>
|
||||
<button class="btn btn-info btn-sm text-dark" data-bs-toggle="modal" data-bs-target="#shapeModal">
|
||||
<i class="fas fa-vector-square me-1"></i> Add Shape
|
||||
</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
|
||||
<i class="fas fa-link me-1"></i> Add Link
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,13 +101,33 @@
|
||||
<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>
|
||||
<small class="fw-bold"><i class="fas fa-info-circle me-1"></i> Details</small>
|
||||
</div>
|
||||
<div class="card-body py-2" id="nodeDetails">
|
||||
<small class="text-secondary">Click a node to see details</small>
|
||||
<small class="text-secondary">Click a node or shape</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group list-group-flush bg-dark border-secondary rounded" id="nodeList" style="max-height: 50vh; overflow-y: auto;">
|
||||
|
||||
<ul class="nav nav-pills nav-fill mb-2 gap-1" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active py-1 small" id="nodes-tab" data-bs-toggle="tab" data-bs-target="#nodesPanel" type="button">
|
||||
<i class="fas fa-desktop me-1"></i> Nodes
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link py-1 small" id="shapes-tab" data-bs-toggle="tab" data-bs-target="#shapesPanel" type="button">
|
||||
<i class="fas fa-vector-square me-1"></i> Shapes
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="nodesPanel">
|
||||
<div class="list-group list-group-flush bg-dark border-secondary rounded" id="nodeList" style="max-height: 35vh; overflow-y: auto;"></div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="shapesPanel">
|
||||
<div class="list-group list-group-flush bg-dark border-secondary rounded" id="shapeList" style="max-height: 35vh; overflow-y: auto;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -115,12 +135,11 @@
|
||||
</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>
|
||||
<h5 class="modal-title"><i class="fas fa-plus-circle text-primary me-1"></i> New Event</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@@ -160,26 +179,21 @@
|
||||
</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>
|
||||
<button type="button" class="btn btn-sm btn-primary" id="saveEvent"><i class="fas fa-save me-1"></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>
|
||||
<h5 class="modal-title"><i class="fas fa-desktop text-primary me-1"></i> Add Network Node</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@@ -225,18 +239,61 @@
|
||||
</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>
|
||||
<button type="button" class="btn btn-sm btn-primary" id="saveNode"><i class="fas fa-save me-1"></i> Add Node</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="shapeModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content bg-dark">
|
||||
<div class="modal-header border-secondary">
|
||||
<h5 class="modal-title"><i class="fas fa-vector-square text-info me-1"></i> Add Shape</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="shapeForm">
|
||||
<div class="mb-2">
|
||||
<label class="form-label small">Label</label>
|
||||
<input type="text" class="form-control form-control-sm" id="shapeLabel" placeholder="DMZ, Internal Net, ...">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label small">Type</label>
|
||||
<select class="form-select form-select-sm" id="shapeType">
|
||||
<option value="rectangle">Rectangle / Box</option>
|
||||
<option value="ellipse">Ellipse</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col">
|
||||
<label class="form-label small">Fill</label>
|
||||
<input type="color" class="form-control form-control-color form-control-sm" id="shapeColor" value="#1e3a5f">
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="form-label small">Border</label>
|
||||
<input type="color" class="form-control form-control-color form-control-sm" id="shapeBorderColor" value="#3b82f6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label small">Opacity <span id="opacityVal">0.15</span></label>
|
||||
<input type="range" class="form-range" id="shapeOpacity" min="0.05" max="0.5" step="0.05" value="0.15">
|
||||
</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="saveShape"><i class="fas fa-save me-1"></i> Add Shape</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>
|
||||
<h5 class="modal-title"><i class="fas fa-link text-primary me-1"></i> Add Connection</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@@ -259,14 +316,14 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label small">Label (optional)</label>
|
||||
<label class="form-label small">Label</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>
|
||||
<button type="button" class="btn btn-sm btn-primary" id="saveLink"><i class="fas fa-save me-1"></i> Add Link</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user