Spaces:
Sleeping
Sleeping
Create style.css
Browse files- frontend/style.css +330 -0
frontend/style.css
ADDED
|
@@ -0,0 +1,330 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
/* ══════════════════════════════════════════
|
| 2 |
+
SentinelNet — style.css
|
| 3 |
+
Edit this file to change colors / layout
|
| 4 |
+
══════════════════════════════════════════ */
|
| 5 |
+
|
| 6 |
+
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
|
| 7 |
+
|
| 8 |
+
:root {
|
| 9 |
+
--bg:#04080d; --bg2:#080e16; --bg3:#0d1520;
|
| 10 |
+
--surface:#101d2e; --surface2:#162438;
|
| 11 |
+
--border:rgba(0,210,130,0.08);
|
| 12 |
+
--border2:rgba(0,210,130,0.18);
|
| 13 |
+
--border3:rgba(0,210,130,0.35);
|
| 14 |
+
--accent:#00e87a; --cyan:#00c8e8;
|
| 15 |
+
--red:#ff3d5a; --amber:#ffaa00; --purple:#b06fff;
|
| 16 |
+
--text:#d8eeff; --muted:#4a6a88; --muted2:#7a9ab8;
|
| 17 |
+
--mono:'IBM Plex Mono',monospace;
|
| 18 |
+
--sans:'Space Grotesk',sans-serif;
|
| 19 |
+
--glow-green:0 0 20px rgba(0,232,122,0.25);
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
html { scroll-behavior:smooth }
|
| 23 |
+
|
| 24 |
+
body {
|
| 25 |
+
background:var(--bg); color:var(--text);
|
| 26 |
+
font-family:var(--sans); min-height:100vh; overflow-x:hidden;
|
| 27 |
+
}
|
| 28 |
+
|
| 29 |
+
body::before {
|
| 30 |
+
content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
|
| 31 |
+
background:
|
| 32 |
+
radial-gradient(ellipse 60% 40% at 10% 20%,rgba(0,232,122,0.04) 0%,transparent 60%),
|
| 33 |
+
radial-gradient(ellipse 50% 50% at 90% 80%,rgba(0,200,232,0.03) 0%,transparent 60%),
|
| 34 |
+
repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(0,210,130,0.015) 40px,rgba(0,210,130,0.015) 41px),
|
| 35 |
+
repeating-linear-gradient(90deg,transparent,transparent 40px,rgba(0,210,130,0.015) 40px,rgba(0,210,130,0.015) 41px);
|
| 36 |
+
}
|
| 37 |
+
|
| 38 |
+
.app { position:relative; z-index:1; max-width:1500px; margin:0 auto; padding:0 24px 80px }
|
| 39 |
+
|
| 40 |
+
/* ── HEADER ── */
|
| 41 |
+
header {
|
| 42 |
+
display:flex; align-items:center; justify-content:space-between;
|
| 43 |
+
padding:20px 0; border-bottom:1px solid var(--border2);
|
| 44 |
+
margin-bottom:0; position:relative;
|
| 45 |
+
}
|
| 46 |
+
header::after {
|
| 47 |
+
content:''; position:absolute; bottom:-1px; left:0;
|
| 48 |
+
width:200px; height:1px;
|
| 49 |
+
background:linear-gradient(90deg,var(--accent),transparent);
|
| 50 |
+
}
|
| 51 |
+
.logo { display:flex; align-items:center; gap:14px }
|
| 52 |
+
.logo-shield {
|
| 53 |
+
width:44px; height:44px; border-radius:12px;
|
| 54 |
+
background:linear-gradient(135deg,#001a0d,#003020);
|
| 55 |
+
border:1px solid var(--border3); display:flex;
|
| 56 |
+
align-items:center; justify-content:center;
|
| 57 |
+
font-size:20px; box-shadow:var(--glow-green);
|
| 58 |
+
}
|
| 59 |
+
.logo-name { font-family:var(--mono); font-size:20px; font-weight:700; color:var(--accent); letter-spacing:-0.5px }
|
| 60 |
+
.logo-tag { font-size:10px; color:var(--muted); letter-spacing:3px; text-transform:uppercase; margin-top:3px; font-family:var(--mono) }
|
| 61 |
+
.header-right { display:flex; align-items:center; gap:14px }
|
| 62 |
+
.live-badge {
|
| 63 |
+
display:flex; align-items:center; gap:8px; padding:7px 16px;
|
| 64 |
+
border-radius:999px; border:1px solid var(--border2);
|
| 65 |
+
background:rgba(0,232,122,0.05);
|
| 66 |
+
font-family:var(--mono); font-size:11px; color:var(--accent);
|
| 67 |
+
}
|
| 68 |
+
.dot { width:7px; height:7px; border-radius:50%; background:var(--accent); animation:blink 1.4s ease-in-out infinite; flex-shrink:0 }
|
| 69 |
+
.dot.red { background:var(--red); animation:none; box-shadow:0 0 6px var(--red) }
|
| 70 |
+
.dot.amber { background:var(--amber); box-shadow:0 0 6px var(--amber) }
|
| 71 |
+
.dot.green { background:var(--accent); box-shadow:0 0 8px var(--accent) }
|
| 72 |
+
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
|
| 73 |
+
#sessionClock {
|
| 74 |
+
font-family:var(--mono); font-size:11px; color:var(--muted2);
|
| 75 |
+
background:var(--surface); padding:6px 12px;
|
| 76 |
+
border-radius:6px; border:1px solid var(--border);
|
| 77 |
+
}
|
| 78 |
+
|
| 79 |
+
/* ── TABS ── */
|
| 80 |
+
.tab-nav { display:flex; border-bottom:1px solid var(--border2); margin-bottom:28px }
|
| 81 |
+
.tab-btn {
|
| 82 |
+
padding:16px 32px; font-family:var(--mono); font-size:11px;
|
| 83 |
+
font-weight:600; letter-spacing:2px; text-transform:uppercase;
|
| 84 |
+
color:var(--muted); background:transparent; border:none; cursor:pointer;
|
| 85 |
+
transition:color .2s; border-bottom:2px solid transparent; margin-bottom:-1px;
|
| 86 |
+
}
|
| 87 |
+
.tab-btn:hover { color:var(--muted2) }
|
| 88 |
+
.tab-btn.active { color:var(--accent); border-bottom:2px solid var(--accent) }
|
| 89 |
+
.tab-btn .tab-icon { margin-right:8px }
|
| 90 |
+
.tab-pane { display:none }
|
| 91 |
+
.tab-pane.active { display:block; animation:fadeIn .25s ease }
|
| 92 |
+
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
|
| 93 |
+
|
| 94 |
+
/* ── PANEL ── */
|
| 95 |
+
.panel { background:var(--bg2); border:1px solid var(--border); border-radius:14px; overflow:hidden }
|
| 96 |
+
.panel-head {
|
| 97 |
+
padding:12px 18px; font-family:var(--mono); font-size:10px; color:var(--muted);
|
| 98 |
+
border-bottom:1px solid var(--border); display:flex; justify-content:space-between;
|
| 99 |
+
align-items:center; letter-spacing:1.5px; text-transform:uppercase; background:rgba(0,0,0,0.2);
|
| 100 |
+
}
|
| 101 |
+
.panel-head .accent{color:var(--accent)} .panel-head .red{color:var(--red)}
|
| 102 |
+
.panel-head .cyan{color:var(--cyan)} .panel-head .amber{color:var(--amber)}
|
| 103 |
+
|
| 104 |
+
/* ── CONFIG STRIP ── */
|
| 105 |
+
.config-strip {
|
| 106 |
+
display:flex; gap:10px; align-items:center;
|
| 107 |
+
background:var(--bg2); border:1px solid var(--border2);
|
| 108 |
+
border-radius:12px; padding:14px 18px; margin-bottom:22px; flex-wrap:wrap;
|
| 109 |
+
}
|
| 110 |
+
.speed-wrap { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--muted) }
|
| 111 |
+
.speed-wrap select {
|
| 112 |
+
background:var(--surface); border:1px solid var(--border2);
|
| 113 |
+
border-radius:7px; color:var(--cyan); font-family:var(--mono);
|
| 114 |
+
font-size:11px; padding:7px 12px; outline:none; cursor:pointer;
|
| 115 |
+
}
|
| 116 |
+
|
| 117 |
+
/* ── BUTTONS ── */
|
| 118 |
+
.btn { padding:8px 18px; border-radius:8px; font-family:var(--mono); font-size:11px; font-weight:700; cursor:pointer; border:none; transition:all .2s; white-space:nowrap; letter-spacing:.5px }
|
| 119 |
+
.btn-start { background:rgba(0,232,122,0.12); color:var(--accent); border:1px solid rgba(0,232,122,0.3) }
|
| 120 |
+
.btn-start:hover:not(:disabled) { background:rgba(0,232,122,0.22); box-shadow:var(--glow-green) }
|
| 121 |
+
.btn-start:disabled { opacity:.4; cursor:not-allowed }
|
| 122 |
+
.btn-stop { background:rgba(255,61,90,0.1); color:var(--red); border:1px solid rgba(255,61,90,0.25) }
|
| 123 |
+
.btn-stop:hover:not(:disabled) { background:rgba(255,61,90,0.2) }
|
| 124 |
+
.btn-stop:disabled { opacity:.4; cursor:not-allowed }
|
| 125 |
+
.btn-clear { background:var(--surface); color:var(--muted2); border:1px solid var(--border) }
|
| 126 |
+
.btn-clear:hover { color:var(--text); border-color:var(--border2) }
|
| 127 |
+
|
| 128 |
+
/* ── CONNECTION BADGE ── */
|
| 129 |
+
#connBadge { font-family:var(--mono); font-size:11px; padding:6px 14px; border-radius:7px; white-space:nowrap; transition:all .3s }
|
| 130 |
+
#connBadge.real { background:rgba(0,232,122,0.1); color:var(--accent); border:1px solid rgba(0,232,122,0.2) }
|
| 131 |
+
#connBadge.local { background:rgba(255,170,0,0.1); color:var(--amber); border:1px solid rgba(255,170,0,0.2) }
|
| 132 |
+
#connBadge.idle { background:var(--surface); color:var(--muted); border:1px solid var(--border) }
|
| 133 |
+
|
| 134 |
+
/* ── METRICS ── */
|
| 135 |
+
.metrics { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:22px }
|
| 136 |
+
@media(max-width:1000px) { .metrics { grid-template-columns:repeat(3,1fr) } }
|
| 137 |
+
.mc { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:18px 16px; position:relative; overflow:hidden; transition:border-color .3s }
|
| 138 |
+
.mc.flash { border-color:var(--accent); animation:mcflash .6s ease-out }
|
| 139 |
+
@keyframes mcflash { 0%{box-shadow:0 0 16px rgba(0,232,122,0.5)} 100%{box-shadow:none} }
|
| 140 |
+
.mc-label { font-family:var(--mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:10px }
|
| 141 |
+
.mc-val { font-family:var(--mono); font-size:28px; font-weight:700; line-height:1 }
|
| 142 |
+
.mc-val.green{color:var(--accent)} .mc-val.red{color:var(--red)} .mc-val.amber{color:var(--amber)} .mc-val.blue{color:var(--cyan)} .mc-val.purple{color:var(--purple)}
|
| 143 |
+
.mc-sub { font-size:10px; color:var(--muted); margin-top:6px; font-family:var(--mono) }
|
| 144 |
+
.mc-bar { position:absolute; bottom:0; left:0; height:2px; transition:width .6s ease }
|
| 145 |
+
.mc-bar.green{background:linear-gradient(90deg,var(--accent),transparent)} .mc-bar.red{background:linear-gradient(90deg,var(--red),transparent)} .mc-bar.blue{background:linear-gradient(90deg,var(--cyan),transparent)} .mc-bar.purple{background:linear-gradient(90deg,var(--purple),transparent)}
|
| 146 |
+
|
| 147 |
+
/* ── MAIN GRID ── */
|
| 148 |
+
.main-grid { display:grid; grid-template-columns:1fr 360px; gap:18px; margin-bottom:18px }
|
| 149 |
+
@media(max-width:1100px) { .main-grid { grid-template-columns:1fr } }
|
| 150 |
+
.feed-wrap { max-height:480px; overflow-y:auto }
|
| 151 |
+
.feed-table { width:100%; border-collapse:collapse; font-size:11px }
|
| 152 |
+
.feed-table th { padding:9px 14px; text-align:left; font-family:var(--mono); font-size:9px; color:var(--muted); background:var(--surface); position:sticky; top:0; letter-spacing:1.5px; z-index:2 }
|
| 153 |
+
.feed-table td { padding:8px 14px; border-top:1px solid var(--border); font-family:var(--mono) }
|
| 154 |
+
.feed-table tr.new-row { animation:rowIn .4s ease-out }
|
| 155 |
+
@keyframes rowIn { from{opacity:0;background:rgba(0,232,122,0.07)} to{opacity:1;background:transparent} }
|
| 156 |
+
|
| 157 |
+
/* ── BADGES ── */
|
| 158 |
+
.cls-badge { display:inline-flex; padding:3px 9px; border-radius:5px; font-size:9px; font-weight:700; letter-spacing:.5px; font-family:var(--mono) }
|
| 159 |
+
.cls-normal { background:rgba(0,232,122,0.12); color:var(--accent); border:1px solid rgba(0,232,122,0.2) }
|
| 160 |
+
.cls-DoS { background:rgba(255,61,90,0.14); color:var(--red); border:1px solid rgba(255,61,90,0.2) }
|
| 161 |
+
.cls-Probe { background:rgba(0,200,232,0.12); color:var(--cyan); border:1px solid rgba(0,200,232,0.2) }
|
| 162 |
+
.cls-R2L { background:rgba(255,170,0,0.12); color:var(--amber); border:1px solid rgba(255,170,0,0.2) }
|
| 163 |
+
.cls-U2R { background:rgba(176,111,255,0.13);color:var(--purple); border:1px solid rgba(176,111,255,0.2) }
|
| 164 |
+
|
| 165 |
+
/* ── SIDE PANELS ── */
|
| 166 |
+
.side-panels { display:flex; flex-direction:column; gap:18px }
|
| 167 |
+
.bar-row { display:flex; align-items:center; gap:10px; margin-bottom:10px }
|
| 168 |
+
.bar-lbl { font-size:10px; font-family:var(--mono); color:var(--muted2); width:58px; flex-shrink:0 }
|
| 169 |
+
.bar-track{ flex:1; background:var(--surface); border-radius:3px; height:5px; overflow:hidden }
|
| 170 |
+
.bar-fill { height:100%; border-radius:3px; transition:width .8s cubic-bezier(.4,0,.2,1) }
|
| 171 |
+
.bar-cnt { font-size:10px; font-family:var(--mono); min-width:34px; text-align:right; color:var(--text) }
|
| 172 |
+
.timeline-wrap { padding:14px 16px }
|
| 173 |
+
.tl-canvas { width:100%; height:80px; display:block }
|
| 174 |
+
.term-wrap { max-height:180px; overflow-y:auto; padding:12px 14px; background:rgba(0,0,0,0.4) }
|
| 175 |
+
.term-line { font-family:var(--mono); font-size:10px; line-height:1.9; white-space:nowrap }
|
| 176 |
+
.term-line .ts{color:var(--muted)} .term-line .ok{color:var(--accent)} .term-line .warn{color:var(--amber)} .term-line .crit{color:var(--red)} .term-line .info{color:var(--cyan)}
|
| 177 |
+
|
| 178 |
+
/* ── BOTTOM GRID ── */
|
| 179 |
+
.empty-state { padding:70px 20px; text-align:center; color:var(--muted); font-family:var(--mono); font-size:12px }
|
| 180 |
+
.empty-icon { font-size:40px; margin-bottom:14px; opacity:.3; display:block }
|
| 181 |
+
.bottom-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
|
| 182 |
+
@media(max-width:800px) { .bottom-grid { grid-template-columns:1fr } }
|
| 183 |
+
.heatmap-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:3px; padding:14px }
|
| 184 |
+
.hm-cell { aspect-ratio:1; border-radius:3px; background:var(--surface) }
|
| 185 |
+
.summary-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:14px }
|
| 186 |
+
.sum-item { background:var(--surface); border-radius:10px; padding:14px; border:1px solid var(--border) }
|
| 187 |
+
.sum-label { font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:6px }
|
| 188 |
+
.sum-val { font-family:var(--mono); font-size:20px; font-weight:700 }
|
| 189 |
+
|
| 190 |
+
/* ══════════════════════════════════════════
|
| 191 |
+
CSV TAB
|
| 192 |
+
══════════════════════════════════════════ */
|
| 193 |
+
.upload-zone {
|
| 194 |
+
border:2px dashed var(--border2); border-radius:20px; padding:70px 40px;
|
| 195 |
+
text-align:center; cursor:pointer; transition:all .3s;
|
| 196 |
+
background:var(--bg2); position:relative; overflow:hidden;
|
| 197 |
+
}
|
| 198 |
+
.upload-zone:hover,.upload-zone.drag-over { border-color:var(--accent); background:rgba(0,232,122,0.03) }
|
| 199 |
+
.upload-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100% }
|
| 200 |
+
.upload-icon { font-size:56px; margin-bottom:18px; display:block; opacity:.5 }
|
| 201 |
+
.upload-title { font-family:var(--mono); font-size:18px; color:var(--accent); margin-bottom:10px; font-weight:700 }
|
| 202 |
+
.upload-sub { font-size:13px; color:var(--muted2) }
|
| 203 |
+
.upload-hint { display:inline-block; margin-top:18px; padding:8px 20px; border-radius:8px; border:1px solid var(--border2); font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:1px; background:var(--surface) }
|
| 204 |
+
|
| 205 |
+
.format-banner { display:flex; align-items:center; gap:12px; padding:12px 18px; border-radius:10px; font-family:var(--mono); font-size:11px; margin-bottom:16px; border:1px solid }
|
| 206 |
+
.format-banner.ok { background:rgba(0,232,122,0.06); border-color:rgba(0,232,122,0.2); color:var(--accent) }
|
| 207 |
+
|
| 208 |
+
.file-card { background:var(--bg2); border:1px solid var(--border2); border-radius:14px; padding:18px 22px; margin-bottom:18px; display:flex; align-items:center; gap:18px }
|
| 209 |
+
.file-icon { font-size:32px; flex-shrink:0 }
|
| 210 |
+
.file-details { flex:1 }
|
| 211 |
+
.file-name { font-family:var(--mono); font-size:14px; color:var(--accent); font-weight:700 }
|
| 212 |
+
.file-meta { font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:5px; line-height:1.8 }
|
| 213 |
+
.file-actions { display:flex; gap:10px }
|
| 214 |
+
|
| 215 |
+
.progress-block { background:var(--bg2); border:1px solid var(--border2); border-radius:14px; padding:24px; margin-bottom:22px }
|
| 216 |
+
.scan-line { height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); animation:scanAnim 1.5s ease-in-out infinite; margin:0 0 16px }
|
| 217 |
+
@keyframes scanAnim { 0%,100%{opacity:0;transform:scaleX(0.2)} 50%{opacity:1;transform:scaleX(1)} }
|
| 218 |
+
.progress-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px }
|
| 219 |
+
.progress-title { font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:2px; text-transform:uppercase }
|
| 220 |
+
.progress-stats { font-family:var(--mono); font-size:13px; color:var(--cyan); font-weight:600 }
|
| 221 |
+
.progress-track { background:var(--surface); border-radius:6px; height:10px; overflow:hidden; margin-bottom:14px }
|
| 222 |
+
.progress-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--cyan)); border-radius:6px; transition:width .4s ease; width:0% }
|
| 223 |
+
.progress-fill.warning { background:linear-gradient(90deg,var(--amber),var(--red)) }
|
| 224 |
+
.progress-row { display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--muted); margin-bottom:12px; flex-wrap:wrap; gap:6px }
|
| 225 |
+
.current-row-display { font-family:var(--mono); font-size:10px; background:rgba(0,0,0,0.4); border-radius:8px; padding:10px 14px; color:var(--cyan); word-break:break-all; border-left:2px solid var(--accent); min-height:36px; line-height:1.6 }
|
| 226 |
+
.batch-status { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap }
|
| 227 |
+
.batch-chip { font-family:var(--mono); font-size:10px; padding:4px 10px; border-radius:5px; background:var(--surface); color:var(--muted); border:1px solid var(--border) }
|
| 228 |
+
.batch-chip.done { color:var(--accent); border-color:rgba(0,232,122,0.3); background:rgba(0,232,122,0.07) }
|
| 229 |
+
.batch-chip.active { color:var(--cyan); border-color:rgba(0,200,232,0.3); background:rgba(0,200,232,0.07); animation:blink 1s infinite }
|
| 230 |
+
|
| 231 |
+
.csv-results-grid { display:grid; grid-template-columns:1fr 340px; gap:18px; margin-bottom:20px }
|
| 232 |
+
@media(max-width:1100px) { .csv-results-grid { grid-template-columns:1fr } }
|
| 233 |
+
.csv-feed-wrap { max-height:520px; overflow-y:auto }
|
| 234 |
+
.csv-feed-table { width:100%; border-collapse:collapse; font-size:11px }
|
| 235 |
+
.csv-feed-table th { padding:9px 14px; text-align:left; font-family:var(--mono); font-size:9px; color:var(--muted); background:var(--surface); position:sticky; top:0; letter-spacing:1.5px; z-index:2 }
|
| 236 |
+
.csv-feed-table td { padding:8px 14px; border-top:1px solid var(--border); font-family:var(--mono) }
|
| 237 |
+
.csv-feed-table tr.csv-new-row { animation:rowIn .3s ease-out }
|
| 238 |
+
.mini-stat-panel { display:flex; flex-direction:column; gap:14px }
|
| 239 |
+
.mini-card { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:16px }
|
| 240 |
+
.mini-card-title { font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-bottom:12px }
|
| 241 |
+
.sev-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:9px }
|
| 242 |
+
.sev-bar-lbl { font-family:var(--mono); font-size:10px; width:62px; color:var(--muted2) }
|
| 243 |
+
.sev-bar-track{ flex:1; background:var(--surface); border-radius:3px; height:7px; overflow:hidden }
|
| 244 |
+
.sev-bar-fill { height:100%; border-radius:3px; transition:width .8s ease }
|
| 245 |
+
.sev-bar-cnt { font-family:var(--mono); font-size:10px; min-width:36px; text-align:right }
|
| 246 |
+
|
| 247 |
+
/* ══════════════════════════════════════════
|
| 248 |
+
REPORT
|
| 249 |
+
══════════════════════════════════════════ */
|
| 250 |
+
.processing-area { display:none }
|
| 251 |
+
.processing-area.visible { display:block }
|
| 252 |
+
.report-section { display:none }
|
| 253 |
+
.report-section.visible { display:block; animation:fadeIn .4s ease }
|
| 254 |
+
|
| 255 |
+
.completion-banner {
|
| 256 |
+
background:linear-gradient(135deg,rgba(0,232,122,0.08),rgba(0,200,232,0.05));
|
| 257 |
+
border:1px solid rgba(0,232,122,0.3); border-radius:14px;
|
| 258 |
+
padding:20px 24px; display:flex; align-items:center; gap:18px; margin-bottom:22px;
|
| 259 |
+
}
|
| 260 |
+
.banner-title { font-family:var(--mono); font-size:15px; font-weight:700; color:var(--accent) }
|
| 261 |
+
.banner-sub { font-family:var(--mono); font-size:10px; color:var(--muted2); margin-top:4px; line-height:1.8 }
|
| 262 |
+
|
| 263 |
+
.export-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px }
|
| 264 |
+
.btn-export { padding:10px 22px; border-radius:9px; font-family:var(--mono); font-size:11px; font-weight:700; cursor:pointer; border:none; transition:all .2s; letter-spacing:.5px }
|
| 265 |
+
.btn-export-csv { background:rgba(0,232,122,0.1); color:var(--accent); border:1px solid rgba(0,232,122,0.25) }
|
| 266 |
+
.btn-export-csv:hover { background:rgba(0,232,122,0.2) }
|
| 267 |
+
.btn-export-pdf { background:rgba(0,200,232,0.1); color:var(--cyan); border:1px solid rgba(0,200,232,0.25) }
|
| 268 |
+
.btn-export-pdf:hover { background:rgba(0,200,232,0.2) }
|
| 269 |
+
.btn-export-json { background:rgba(176,111,255,0.1);color:var(--purple); border:1px solid rgba(176,111,255,0.25) }
|
| 270 |
+
.btn-export-json:hover { background:rgba(176,111,255,0.2) }
|
| 271 |
+
.btn-new-scan { background:rgba(255,170,0,0.1); color:var(--amber); border:1px solid rgba(255,170,0,0.25) }
|
| 272 |
+
.btn-new-scan:hover { background:rgba(255,170,0,0.2) }
|
| 273 |
+
|
| 274 |
+
.report-header {
|
| 275 |
+
background:linear-gradient(135deg,rgba(0,232,122,0.05),rgba(0,200,232,0.03));
|
| 276 |
+
border:1px solid var(--border2); border-radius:18px; padding:32px 36px; margin-bottom:22px;
|
| 277 |
+
}
|
| 278 |
+
.report-title { font-family:var(--mono); font-size:24px; font-weight:700; color:var(--accent); margin-bottom:6px }
|
| 279 |
+
.report-subtitle { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:2px; text-transform:uppercase }
|
| 280 |
+
.report-meta { display:flex; gap:28px; margin-top:22px; flex-wrap:wrap }
|
| 281 |
+
.report-meta-item{ font-family:var(--mono); font-size:11px; color:var(--muted) }
|
| 282 |
+
.report-meta-item span { color:var(--text) }
|
| 283 |
+
|
| 284 |
+
.report-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:22px }
|
| 285 |
+
@media(max-width:1000px) { .report-grid { grid-template-columns:repeat(3,1fr) } }
|
| 286 |
+
.report-stat { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:20px 16px; text-align:center; position:relative; overflow:hidden }
|
| 287 |
+
.report-stat::before { content:''; position:absolute; top:0; left:0; right:0; height:2px }
|
| 288 |
+
.report-stat.green::before{background:var(--accent)} .report-stat.red::before{background:var(--red)} .report-stat.amber::before{background:var(--amber)} .report-stat.cyan::before{background:var(--cyan)} .report-stat.purple::before{background:var(--purple)}
|
| 289 |
+
.report-stat-val { font-family:var(--mono); font-size:30px; font-weight:700; margin-bottom:6px; line-height:1 }
|
| 290 |
+
.report-stat-lbl { font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:2px; text-transform:uppercase }
|
| 291 |
+
|
| 292 |
+
.report-charts { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-bottom:22px }
|
| 293 |
+
@media(max-width:1000px) { .report-charts { grid-template-columns:1fr 1fr } }
|
| 294 |
+
.chart-canvas-wrap { padding:16px }
|
| 295 |
+
.chart-canvas { width:100%; height:160px; display:block }
|
| 296 |
+
|
| 297 |
+
.cluster-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:16px }
|
| 298 |
+
@media(max-width:900px) { .cluster-grid { grid-template-columns:repeat(2,1fr) } }
|
| 299 |
+
.cluster-card { background:var(--surface); border-radius:10px; padding:16px; border:1px solid var(--border); border-left:3px solid }
|
| 300 |
+
.cluster-card.DoS{border-left-color:var(--red)} .cluster-card.Probe{border-left-color:var(--cyan)} .cluster-card.R2L{border-left-color:var(--amber)} .cluster-card.U2R{border-left-color:var(--purple)} .cluster-card.normal{border-left-color:var(--accent)}
|
| 301 |
+
.cluster-title { font-family:var(--mono); font-size:11px; font-weight:700; margin-bottom:6px }
|
| 302 |
+
.cluster-count { font-family:var(--mono); font-size:24px; font-weight:700; margin-bottom:4px }
|
| 303 |
+
.cluster-sub { font-family:var(--mono); font-size:9px; color:var(--muted); line-height:1.8 }
|
| 304 |
+
|
| 305 |
+
.threat-table { width:100%; border-collapse:collapse; font-size:11px }
|
| 306 |
+
.threat-table th { padding:10px 16px; text-align:left; font-family:var(--mono); font-size:9px; color:var(--muted); background:var(--surface); position:sticky; top:0; letter-spacing:1.5px; z-index:2; border-bottom:1px solid var(--border2) }
|
| 307 |
+
.threat-table td { padding:9px 16px; border-top:1px solid var(--border); font-family:var(--mono); font-size:11px }
|
| 308 |
+
.threat-table tr.row-intrusion td:first-child { border-left:2px solid var(--red) }
|
| 309 |
+
|
| 310 |
+
.pager { display:flex; align-items:center; gap:8px; padding:12px 16px; font-family:var(--mono); font-size:11px; color:var(--muted); border-top:1px solid var(--border) }
|
| 311 |
+
.pager-btn { padding:5px 14px; border-radius:6px; background:var(--surface); border:1px solid var(--border2); color:var(--cyan); font-family:var(--mono); font-size:11px; cursor:pointer }
|
| 312 |
+
.pager-btn:disabled { opacity:.4; cursor:not-allowed }
|
| 313 |
+
|
| 314 |
+
.proto-bars { padding:14px 18px }
|
| 315 |
+
.proto-row { display:flex; align-items:center; gap:10px; margin-bottom:10px }
|
| 316 |
+
.proto-lbl { font-family:var(--mono); font-size:10px; color:var(--muted2); width:50px; flex-shrink:0 }
|
| 317 |
+
.proto-track{ flex:1; background:var(--surface); border-radius:3px; height:6px; overflow:hidden }
|
| 318 |
+
.proto-fill { height:100%; border-radius:3px; transition:width .9s ease }
|
| 319 |
+
.proto-cnt { font-family:var(--mono); font-size:10px; min-width:90px; text-align:right; color:var(--muted2) }
|
| 320 |
+
.services-list { padding:14px 18px }
|
| 321 |
+
.svc-row { display:flex; align-items:center; padding:6px 0; border-top:1px solid var(--border); gap:8px }
|
| 322 |
+
.svc-name{ font-family:var(--mono); font-size:11px; min-width:70px }
|
| 323 |
+
.risk-gauge-wrap { padding:16px; display:flex; flex-direction:column; align-items:center; gap:8px }
|
| 324 |
+
.risk-gauge-canvas { width:160px; height:90px; display:block }
|
| 325 |
+
.risk-label { font-family:var(--mono); font-size:11px; color:var(--muted2); text-align:center }
|
| 326 |
+
|
| 327 |
+
/* ── SCROLLBAR ── */
|
| 328 |
+
::-webkit-scrollbar { width:4px; height:4px }
|
| 329 |
+
::-webkit-scrollbar-track { background:transparent }
|
| 330 |
+
::-webkit-scrollbar-thumb { background:var(--surface2); border-radius:2px }
|