122 أسطر
3.9 KiB
HTML
122 أسطر
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SIEM // Threat Console</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="console">
|
|
|
|
<header class="console-header">
|
|
<div class="brand">
|
|
<div class="brand-mark">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="9.5" stroke="#3FA7FF" stroke-width="1.4"/>
|
|
<circle cx="12" cy="12" r="5.5" stroke="#3FA7FF" stroke-width="1.1" opacity="0.55"/>
|
|
<circle cx="12" cy="12" r="1.6" fill="#FF3B4E"/>
|
|
<line x1="12" y1="12" x2="18.5" y2="8.2" stroke="#FF3B4E" stroke-width="1.4" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="brand-text">
|
|
<p class="eyebrow">Security Operations</p>
|
|
<h1>SIEM<span class="slash">/</span>Threat Console</h1>
|
|
</div>
|
|
</div>
|
|
<div class="header-status">
|
|
<div class="status-item">
|
|
<span>Status</span>
|
|
<span class="value live-dot">Monitoring</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span>Report generated</span>
|
|
<span class="value" id="generated-at">—</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span>Endpoints</span>
|
|
<span class="value" id="endpoint-count">—</span>
|
|
</div>
|
|
<button class="btn" id="refresh-btn" title="Reload siem_report.json">↻ Refresh</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="stat-grid" id="stat-grid" aria-label="Alert summary"></section>
|
|
|
|
<section class="panel-row">
|
|
<div class="panel">
|
|
<div class="panel-title">
|
|
<h2>Threat Radar</h2>
|
|
<span class="hint">closer = higher score</span>
|
|
</div>
|
|
<div class="radar-wrap">
|
|
<svg id="radar-svg" viewBox="0 0 300 300" width="280" height="280" role="img" aria-label="Radar plot of top malicious IPs"></svg>
|
|
</div>
|
|
<div class="radar-legend" id="radar-legend"></div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-title">
|
|
<h2>Top Malicious IPs</h2>
|
|
<span class="hint" id="ip-count-hint"></span>
|
|
</div>
|
|
<ul class="ip-list" id="ip-list"></ul>
|
|
|
|
<div class="sev-meter">
|
|
<div class="panel-title" style="margin-top:20px;">
|
|
<h2>Severity Mix</h2>
|
|
</div>
|
|
<div class="sev-meter-bar" id="sev-meter-bar"></div>
|
|
<div class="sev-meter-labels" id="sev-meter-labels"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="filter-bar">
|
|
<input type="text" id="search-input" placeholder="Search IP, alert type, or description…" aria-label="Search alerts">
|
|
<select id="severity-filter" aria-label="Filter by severity">
|
|
<option value="">All severities</option>
|
|
<option value="critical">Critical</option>
|
|
<option value="high">High</option>
|
|
<option value="medium">Medium</option>
|
|
<option value="low">Low</option>
|
|
</select>
|
|
<select id="endpoint-filter" aria-label="Filter by endpoint">
|
|
<option value="">All endpoints</option>
|
|
</select>
|
|
</section>
|
|
|
|
<section class="panel alerts-panel">
|
|
<div class="panel-title">
|
|
<h2>Alerts</h2>
|
|
<span class="hint" id="alert-count-hint"></span>
|
|
</div>
|
|
<div class="table-scroll">
|
|
<table class="alerts">
|
|
<thead>
|
|
<tr>
|
|
<th>Time</th>
|
|
<th>Severity</th>
|
|
<th>Type</th>
|
|
<th>Source IP</th>
|
|
<th>Endpoint</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="alerts-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="console-footer">
|
|
<span>siem_analyzer.py → dashboard · static demo, no backend required</span>
|
|
<span id="data-source-note">Loading data…</span>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<script src="data.js"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|