410 lines
12 KiB
HTML
410 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<title>Corporate WAN Perimeter</title>
|
|
|
|
<style>
|
|
/* Reset-ish */
|
|
html, body { margin:0; padding:0; }
|
|
body {
|
|
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans",
|
|
"Liberation Sans", sans-serif, "Apple Color Emoji","Segoe UI Emoji";
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.45;
|
|
font-size: 14px;
|
|
}
|
|
table { border-collapse: collapse; width: 100%; }
|
|
th, td { vertical-align: top; }
|
|
|
|
/* Include palette */
|
|
:root {
|
|
--bg: #0b1220; /* slate-950ish */
|
|
--text: #e5e7eb; /* slate-200 */
|
|
--muted: #94a3b8; /* slate-400 */
|
|
|
|
--card-bg: #0f172a; /* slate-900 */
|
|
--border: #334155; /* slate-700 */
|
|
|
|
--accent: #38bdf8;
|
|
|
|
--ok: #16a34a;
|
|
--ok-on: #052e16;
|
|
--issue: #ef4444;
|
|
--issue-on: #450a0a;
|
|
|
|
--chip-bg: #1f2937; /* gray-800 */
|
|
|
|
/* Summary bar emphasis */
|
|
--summary-bg: #101a33; /* a touch brighter than --card-bg */
|
|
--summary-border: #2c3a56; /* slightly brighter border */
|
|
--summary-shadow: rgba(0, 0, 0, 0.5);
|
|
|
|
/* KPI chip fills (derived from status colors) */
|
|
--ok-bg-soft: color-mix(in srgb, var(--ok) 18%, transparent);
|
|
--issue-bg-soft: color-mix(in srgb, var(--issue) 18%, transparent);
|
|
--accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
|
|
|
|
/* Port table border accent (dark) */
|
|
--card-border: #2b3b5c; /* slightly brighter than main border */
|
|
}
|
|
/* Layout & components */
|
|
.container { max-width: 900px; margin: 24px auto; padding: 0 12px; }
|
|
|
|
.card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
}
|
|
.header {
|
|
background: var(--card-bg);
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.muted { color: var(--muted); }
|
|
.dash { color: var(--muted); } /* for em-dash placeholder */
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
line-height: 1.6;
|
|
border: 1px solid transparent;
|
|
margin-left: 6px;
|
|
}
|
|
.badge.ok { background: var(--ok); color: var(--ok-on); }
|
|
.badge.issue { background: var(--issue); color: var(--issue-on); }
|
|
|
|
.chip { display:inline-block; background: var(--chip-bg); padding: 2px 6px; border-radius: 6px; }
|
|
|
|
.section { margin: 0 0 18px 0; }
|
|
.table-clean { width:100%; }
|
|
.table-clean td { padding: 8px 10px; }
|
|
|
|
.host-title { font-size: 14px; }
|
|
.summary-row { padding: 10px; }
|
|
|
|
/* Utility helpers referenced by report_body.html.j2 */
|
|
.title-xl { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
|
|
.meta { font-size: 12px; }
|
|
.note { margin: 6px 0 12px 0; font-size: 12px; }
|
|
.subhead { font-weight: 600; margin: 8px 0; }
|
|
.pad-s { padding: 10px; }
|
|
.footer { margin-top: 18px; font-size: 11px; }
|
|
|
|
/* ===== Summary Bar (prominent) ===== */
|
|
.summary-row {
|
|
position: relative;
|
|
background: var(--summary-bg, var(--card-bg));
|
|
border: 1px solid var(--summary-border, var(--border));
|
|
border-radius: 12px;
|
|
padding: 14px 16px;
|
|
font-size: 14px;
|
|
color: var(--text);
|
|
box-shadow:
|
|
0 0 0 1px var(--summary-border, var(--border)) inset,
|
|
0 8px 24px var(--summary-shadow, rgba(0,0,0,0.25));
|
|
}
|
|
|
|
/* left accent bar */
|
|
.summary-row::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; top: 0; bottom: 0;
|
|
width: 6px;
|
|
border-radius: 12px 0 0 12px;
|
|
background: linear-gradient(
|
|
180deg,
|
|
color-mix(in srgb, var(--accent) 90%, transparent) 0%,
|
|
color-mix(in srgb, var(--accent) 60%, transparent) 100%
|
|
);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* tighten spacing between metrics */
|
|
.summary-row strong { margin-right: 8px; }
|
|
|
|
/* KPI “chips” for the numbers (no HTML changes needed) */
|
|
.text-strong,
|
|
.text-ok,
|
|
.text-issue {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
font-weight: 700;
|
|
line-height: 1.6;
|
|
border: 1px solid transparent;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Neutral total */
|
|
.text-strong {
|
|
background: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, transparent));
|
|
border-color: color-mix(in srgb, var(--accent) 45%, var(--summary-border, var(--border)));
|
|
}
|
|
|
|
/* OK / Issue map to your existing status colors */
|
|
.text-ok {
|
|
color: var(--text);
|
|
background: var(--ok-bg-soft, color-mix(in srgb, var(--ok) 18%, transparent));
|
|
border-color: color-mix(in srgb, var(--ok) 45%, var(--summary-border, var(--border)));
|
|
}
|
|
|
|
.text-issue {
|
|
color: var(--text);
|
|
background: var(--issue-bg-soft, color-mix(in srgb, var(--issue) 18%, transparent));
|
|
border-color: color-mix(in srgb, var(--issue) 45%, var(--summary-border, var(--border)));
|
|
}
|
|
|
|
/* ===== Port Table Card (bordered) ===== */
|
|
.table-ports {
|
|
position: relative;
|
|
margin-bottom: 24px;
|
|
border: 1px solid var(--card-border, var(--border));
|
|
border-radius: 12px;
|
|
background: var(--card-bg);
|
|
box-shadow:
|
|
0 0 0 1px var(--card-border, var(--border)) inset,
|
|
0 4px 12px rgba(0,0,0,0.25);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table-ports th,
|
|
.table-ports td {
|
|
border: 1px solid var(--border);
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.table-ports .th {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
border-bottom: 2px solid var(--border);
|
|
}
|
|
|
|
.table-ports .td {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.table-ports .td.num { white-space: nowrap; }
|
|
.table-ports .td.proto,
|
|
.table-ports .td.state,
|
|
.table-ports .td.expect {
|
|
text-align: center;
|
|
}
|
|
|
|
/* optional: subtle row separation */
|
|
.table-ports tr:nth-child(even) {
|
|
background: color-mix(in srgb, var(--card-bg) 92%, var(--border) 8%);
|
|
}
|
|
|
|
/* ===== Host Header Row (within table-ports) ===== */
|
|
.table-ports .header {
|
|
position: relative;
|
|
background: var(--header-bg, var(--card-bg));
|
|
color: var(--header-text, var(--text));
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
border-radius: 10px 10px 0 0;
|
|
padding: 12px 14px;
|
|
border-bottom: 2px solid var(--header-border, var(--border));
|
|
text-shadow: 0 1px 2px rgba(0,0,0,0.25);
|
|
box-shadow: 0 2px 8px var(--header-shadow, rgba(0,0,0,0.2));
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
/* Subtle left accent stripe (matches summary style) */
|
|
.table-ports .header::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0; bottom: 0; left: 0;
|
|
width: 5px;
|
|
border-radius: 10px 0 0 0;
|
|
background: linear-gradient(
|
|
180deg,
|
|
color-mix(in srgb, var(--accent) 85%, transparent) 0%,
|
|
color-mix(in srgb, var(--accent) 55%, transparent) 100%
|
|
);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
|
|
<table role="presentation" class="section table-clean">
|
|
<tr>
|
|
<td class="card">
|
|
<div class="title-xl">Corporate WAN Perimeter</div>
|
|
<div class="meta muted">Generated: 2025-10-22 04:02:59</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table role="presentation" class="section table-clean">
|
|
<tr>
|
|
<td class="card summary-row">
|
|
Total hosts:
|
|
<strong class="text-strong">3</strong>
|
|
Matching expected:
|
|
<strong class="text-ok">2</strong>
|
|
With issues:
|
|
<strong class="text-issue">1</strong>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
|
|
|
|
|
|
<table role="presentation" class="section table-clean table-ports">
|
|
<tr>
|
|
<td colspan="5" class="header">
|
|
10.10.20.12 <span class="badge issue">ISSUES</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td colspan="5" class="delta-row">
|
|
<strong>Unexpected TCP open ports:</strong>
|
|
<span class="muted">3128</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="5" class="delta-row">
|
|
<strong>Expected TCP ports not seen:</strong>
|
|
<span class="muted">none</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="5" class="delta-row">
|
|
<strong>Unexpected UDP open ports:</strong>
|
|
<span class="muted">none</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="5" class="delta-row">
|
|
<strong>Expected UDP ports not seen:</strong>
|
|
<span class="muted">none</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td colspan="5" class="pad-s">
|
|
<div class="subhead">Discovered Ports</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="th">Protocol</td>
|
|
<td class="th">Port</td>
|
|
<td class="th">State</td>
|
|
<td class="th">Service</td>
|
|
<td class="th">Expectation</td>
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
<td class="td proto"><span class="chip">tcp</span></td>
|
|
<td class="td num">22</td>
|
|
<td class="td state"><span class="badge ok">open</span></td>
|
|
<td class="td svc">ssh</td>
|
|
<td class="td expect"><span class="badge ok">Expected</span></td>
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
<td class="td proto"><span class="chip">tcp</span></td>
|
|
<td class="td num">111</td>
|
|
<td class="td state"><span class="badge ok">open</span></td>
|
|
<td class="td svc">rpcbind</td>
|
|
<td class="td expect"><span class="badge ok">Expected</span></td>
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
<td class="td proto"><span class="chip">tcp</span></td>
|
|
<td class="td num">3128</td>
|
|
<td class="td state"><span class="badge ok">open</span></td>
|
|
<td class="td svc">squid-http</td>
|
|
<td class="td expect"><span class="badge issue">Issue</span></td>
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
<td class="td proto"><span class="chip">tcp</span></td>
|
|
<td class="td num">8006</td>
|
|
<td class="td state"><span class="badge ok">open</span></td>
|
|
<td class="td svc">wpl-analytics</td>
|
|
<td class="td expect"><span class="badge ok">Expected</span></td>
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
<td class="td proto"><span class="chip">udp</span></td>
|
|
<td class="td num">111</td>
|
|
<td class="td state"><span class="badge ok">open</span></td>
|
|
<td class="td svc">rpcbind</td>
|
|
<td class="td expect"><span class="badge ok">Expected</span></td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
|
|
<table role="presentation" class="section table-clean">
|
|
<tr>
|
|
<td colspan="5" class="header">
|
|
10.10.20.4 <span class="badge ok">OK</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td colspan="5" class="pad-s">
|
|
<span class="badge ok">OK</span>
|
|
<span class="muted">Matches expected ports.</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table role="presentation" class="section table-clean">
|
|
<tr>
|
|
<td colspan="5" class="header">
|
|
10.10.20.5 <span class="badge ok">OK</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td colspan="5" class="pad-s">
|
|
<span class="badge ok">OK</span>
|
|
<span class="muted">Matches expected ports.</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="footer muted">
|
|
Report generated by mass-scan-v2 • 2025-10-22 04:02:59
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |