Initial release: F2B Control Center v1.0
Fail2Ban + Nginx Proxy Manager dashboard in a single Docker container. Features: - Auto-ban via badbot, http-errors, npm-probe, manual-bans, recidive jails - Web dashboard: live ban grid, log scanner, per-IP access log viewer - iptables-nft banning (DOCKER-USER + INPUT chains) - Optional Cloudflare WAF banning - Optional AbuseIPDB threat scoring - Two-tier IP management: whitelist (trusted) vs exempt (reviewed) - Auto log-file detection via logwatch (no restart needed for new NPM hosts)
This commit is contained in:
4
dashboard/public/favicon.svg
Normal file
4
dashboard/public/favicon.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" fill="#050a05"/>
|
||||
<text x="4" y="24" font-family="monospace" font-size="22" font-weight="bold" fill="#00ff41">F2B</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 221 B |
479
dashboard/public/index.html
Normal file
479
dashboard/public/index.html
Normal file
@@ -0,0 +1,479 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>F2B</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="screen">
|
||||
|
||||
<!-- ── BANNER ────────────────────────────────────────────────────── -->
|
||||
<div class="banner-wrap">
|
||||
<div class="banner-sub">FAIL2BAN CONTROL CENTER</div>
|
||||
<div class="banner-hr"></div>
|
||||
</div>
|
||||
|
||||
<!-- ── MAIN LAYOUT: FEED | UNIFIED ─────────────────────────────── -->
|
||||
<div class="main-col">
|
||||
|
||||
<!-- LEFT: LIVE FEED ─────────────────────────────────────────── -->
|
||||
<div class="col-feed">
|
||||
<div class="box feed-col-box">
|
||||
<div class="feed-title">// LIVE BANS</div>
|
||||
<div class="feed-indicator">
|
||||
<span class="status-dot" id="feed-dot"></span>
|
||||
</div>
|
||||
<div class="feed-box" id="feed"></div>
|
||||
<div class="feed-rate">↻ 2s</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT: UNIFIED CONTROLS + CARDS ─────────────────────────── -->
|
||||
<div class="col-main">
|
||||
|
||||
<div class="control-bar">
|
||||
|
||||
<!-- Row 1: jail filters + scan controls -->
|
||||
<div class="control-row">
|
||||
<div class="filter-bar" id="jail-filter">
|
||||
<button class="active" data-jail="all">[ALL]</button>
|
||||
<button data-jail="badbot">[BADBOT]</button>
|
||||
<button data-jail="http-errors">[HTTP]</button>
|
||||
<button data-jail="npm-probe">[NPM]</button>
|
||||
<button data-jail="manual-bans">[PRISON]</button>
|
||||
<button data-jail="whitelist">[WHITELIST]</button>
|
||||
<button data-jail="exempt">[EXEMPT]</button>
|
||||
<button data-jail="scan">[SCAN]</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2: scan + action controls -->
|
||||
<div class="control-row control-row-tools">
|
||||
|
||||
<div class="tool-group">
|
||||
<span class="muted tool-label">SCAN</span>
|
||||
<input type="number" id="scan-days" value="3" min="1" max="30" title="Lookback days">
|
||||
<span class="muted">d</span>
|
||||
<input type="number" id="scan-minhits" value="1" min="1" title="Min hits">
|
||||
<span class="muted">hits+</span>
|
||||
<label class="cb-label" title="Exclude previously banned IPs">
|
||||
<input type="checkbox" id="scan-excl-prev"> excl prev
|
||||
</label>
|
||||
<button onclick="refreshScan()">[RUN]</button>
|
||||
</div>
|
||||
|
||||
<div class="tool-group">
|
||||
<span class="muted tool-label">AUTO-BAN</span>
|
||||
<input type="number" id="autoban-threshold" value="75" min="1" max="100" title="AbuseIPDB score threshold">
|
||||
<span class="muted">thr</span>
|
||||
<button class="btn-red" onclick="runAutoBan()">[EXECUTE]</button>
|
||||
</div>
|
||||
|
||||
<div class="tool-group tool-group-right">
|
||||
<input type="text" id="action-ip" placeholder="IP address…" autocomplete="off">
|
||||
<select id="action-select" onchange="toggleNote()">
|
||||
<option value="ban">[ARREST]</option>
|
||||
<option value="unban-all">[PAROLE]</option>
|
||||
<option value="whitelist">[WHITELIST]</option>
|
||||
<option value="search">[SEARCH]</option>
|
||||
</select>
|
||||
<button onclick="executeAction()">[EXECUTE]</button>
|
||||
<button class="btn-amber" onclick="forceAbuseCheck()">[FORCE ABUSE]</button>
|
||||
<button class="btn-red" onclick="purgeLogs()" title="Truncate all nginx proxy log files">[PURGE LOGS]</button>
|
||||
</div>
|
||||
|
||||
<div id="note-wrap" style="display:none; flex: 0 0 100%;">
|
||||
<input type="text" id="action-note" placeholder="Note (optional)…" style="width:100%">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="summary-bar" id="main-summary"> </div>
|
||||
</div>
|
||||
|
||||
<div class="card-grid" id="main-grid"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prompt">_ <span class="blink">█</span></div>
|
||||
<footer>F2B | fail2ban control center | :4000</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ── Utilities ─────────────────────────────────────────────────────
|
||||
const esc = s => String(s)
|
||||
.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||||
|
||||
async function api(method, url, body) {
|
||||
const opts = { method, headers: { 'Content-Type': 'application/json' } };
|
||||
if (body) opts.body = JSON.stringify(body);
|
||||
const r = await fetch(url, opts);
|
||||
if (!r.ok) throw new Error(await r.text());
|
||||
return r;
|
||||
}
|
||||
|
||||
// ── Score colour ──────────────────────────────────────────────────
|
||||
function scoreColor(score, jail) {
|
||||
if (jail === 'manual-bans') return '#8B4513';
|
||||
if (jail === 'whitelist') return 'var(--green)';
|
||||
if (jail === 'exempt') return 'var(--dim)';
|
||||
if (score == null) return 'var(--dim)';
|
||||
if (score >= 90) return 'var(--red)';
|
||||
if (score <= 20) return 'var(--green2)';
|
||||
const hue = 60 - ((score - 20) / 70 * 60);
|
||||
return `hsl(${hue},100%,50%)`;
|
||||
}
|
||||
|
||||
// ── Live feed ─────────────────────────────────────────────────────
|
||||
const feedEl = document.getElementById('feed');
|
||||
const feedDot = document.getElementById('feed-dot');
|
||||
const MAX_FEED = 120;
|
||||
|
||||
function setFeedDot(cls) { feedDot.className = 'status-dot ' + cls; }
|
||||
|
||||
function parseBan(line) {
|
||||
const m = line.match(/\[([^\]]+)\]\s+Ban\s+(\d{1,3}(?:\.\d{1,3}){3})/);
|
||||
if (!m) return null;
|
||||
const tsm = line.match(/(\d{2}:\d{2}):\d{2}/);
|
||||
return { jail: m[1], ip: m[2], time: tsm ? tsm[1] : '' };
|
||||
}
|
||||
|
||||
function addToFeed(lines) {
|
||||
lines.forEach(line => {
|
||||
const ban = parseBan(line);
|
||||
if (!ban) return;
|
||||
const el = document.createElement('div');
|
||||
el.className = 'feed-entry';
|
||||
el.innerHTML =
|
||||
`<span class="feed-time">${esc(ban.time)}</span>` +
|
||||
`<span class="feed-ip">${esc(ban.ip)}</span>` +
|
||||
`<span class="feed-jail">${esc(ban.jail)}</span>`;
|
||||
feedEl.insertBefore(el, feedEl.firstChild);
|
||||
});
|
||||
while (feedEl.children.length > MAX_FEED) feedEl.removeChild(feedEl.lastChild);
|
||||
}
|
||||
|
||||
async function initFeed() {
|
||||
try {
|
||||
const { lines } = await (await api('GET', '/api/f2b/init')).json();
|
||||
setFeedDot('ok');
|
||||
addToFeed([...lines].reverse());
|
||||
setInterval(pollFeed, 2000);
|
||||
} catch {
|
||||
setFeedDot('err');
|
||||
setTimeout(initFeed, 4000);
|
||||
}
|
||||
}
|
||||
|
||||
async function pollFeed() {
|
||||
try {
|
||||
const { lines } = await (await api('GET', '/api/f2b/poll')).json();
|
||||
if (lines.length) addToFeed(lines);
|
||||
setFeedDot('ok');
|
||||
} catch { setFeedDot('err'); }
|
||||
}
|
||||
|
||||
// ── Multi-select filter ───────────────────────────────────────────
|
||||
let activeJails = new Set();
|
||||
|
||||
function toggleJail(jail) {
|
||||
if (jail === 'all') {
|
||||
activeJails.clear();
|
||||
} else {
|
||||
activeJails.has(jail) ? activeJails.delete(jail) : activeJails.add(jail);
|
||||
if (jail === 'scan' && activeJails.has('scan')) ensureScan();
|
||||
}
|
||||
updateFilterUI();
|
||||
renderAll();
|
||||
}
|
||||
|
||||
function updateFilterUI() {
|
||||
document.querySelectorAll('#jail-filter button').forEach(btn => {
|
||||
const j = btn.dataset.jail;
|
||||
btn.classList.toggle('active',
|
||||
j === 'all' ? activeJails.size === 0 : activeJails.has(j));
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('jail-filter').addEventListener('click', e => {
|
||||
const btn = e.target.closest('button');
|
||||
if (btn) toggleJail(btn.dataset.jail);
|
||||
});
|
||||
|
||||
// ── Active bans ───────────────────────────────────────────────────
|
||||
let allBans = [];
|
||||
|
||||
async function loadBans() {
|
||||
try {
|
||||
allBans = await (await api('GET', '/api/bans')).json();
|
||||
renderAll();
|
||||
} catch (e) {
|
||||
document.getElementById('main-summary').textContent = 'Error: ' + e.message;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Scan data ─────────────────────────────────────────────────────
|
||||
let scanData = [];
|
||||
let scanLoaded = false;
|
||||
let scanRunning = false;
|
||||
|
||||
async function ensureScan() {
|
||||
if (scanLoaded || scanRunning) return;
|
||||
scanRunning = true;
|
||||
document.getElementById('main-summary').textContent = 'scanning…';
|
||||
try {
|
||||
const days = parseInt(document.getElementById('scan-days').value) || 3;
|
||||
await api('POST', `/api/scan/start?days=${days}`);
|
||||
pollScanResults();
|
||||
} catch (e) {
|
||||
document.getElementById('main-summary').textContent = 'scan error: ' + e.message;
|
||||
scanRunning = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function pollScanResults() {
|
||||
try {
|
||||
const job = await (await api('GET', '/api/scan/results')).json();
|
||||
if (job.running) {
|
||||
document.getElementById('main-summary').textContent = 'scanning…';
|
||||
setTimeout(pollScanResults, 2000);
|
||||
return;
|
||||
}
|
||||
if (job.error) throw new Error(job.error);
|
||||
const minHits = parseInt(document.getElementById('scan-minhits').value) || 1;
|
||||
const exclPrev = document.getElementById('scan-excl-prev').checked;
|
||||
let results = job.results;
|
||||
if (minHits > 1) results = results.filter(r => r.hits >= minHits);
|
||||
if (exclPrev) results = results.filter(r => !r.previouslyBanned);
|
||||
scanData = results;
|
||||
scanLoaded = true;
|
||||
scanRunning = false;
|
||||
renderAll();
|
||||
} catch (e) {
|
||||
document.getElementById('main-summary').textContent = 'scan error: ' + e.message;
|
||||
scanRunning = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshScan() {
|
||||
scanLoaded = false;
|
||||
scanData = [];
|
||||
activeJails.add('scan');
|
||||
updateFilterUI();
|
||||
await ensureScan();
|
||||
}
|
||||
|
||||
async function runAutoBan() {
|
||||
const threshold = parseInt(document.getElementById('autoban-threshold').value) || 75;
|
||||
const days = parseInt(document.getElementById('scan-days').value) || 3;
|
||||
try {
|
||||
await api('POST', '/api/auto-ban', { threshold, days });
|
||||
alert(`Auto-ban running (threshold: ${threshold}, days: ${days}). Refresh in ~30s.`);
|
||||
setTimeout(loadBans, 30000);
|
||||
} catch (e) { alert('Auto-ban failed: ' + e.message); }
|
||||
}
|
||||
|
||||
async function purgeLogs() {
|
||||
if (!confirm('Truncate all nginx proxy access logs? This cannot be undone.')) return;
|
||||
try {
|
||||
const msg = await (await api('POST', '/api/purge-logs')).text();
|
||||
alert(msg);
|
||||
scanLoaded = false;
|
||||
scanData = [];
|
||||
renderAll();
|
||||
} catch (e) { alert('Purge failed: ' + e.message); }
|
||||
}
|
||||
|
||||
// ── Unified render ────────────────────────────────────────────────
|
||||
function renderAll() {
|
||||
const grid = document.getElementById('main-grid');
|
||||
grid.innerHTML = '';
|
||||
|
||||
const showAll = activeJails.size === 0;
|
||||
const showScan = showAll || activeJails.has('scan');
|
||||
const banJails = new Set([...activeJails].filter(j => j !== 'scan'));
|
||||
const showBans = showAll || banJails.size > 0;
|
||||
|
||||
let banCount = 0, scanCount = 0;
|
||||
|
||||
if (showBans) {
|
||||
const bansToShow = banJails.size > 0
|
||||
? allBans.filter(b => banJails.has(b.jail))
|
||||
: allBans;
|
||||
banCount = bansToShow.length;
|
||||
bansToShow.forEach(b => grid.appendChild(makeBanCard(b)));
|
||||
}
|
||||
|
||||
if (showScan && scanLoaded) {
|
||||
scanCount = scanData.length;
|
||||
scanData.forEach(d => grid.appendChild(makeScanCard(d)));
|
||||
}
|
||||
|
||||
const parts = [];
|
||||
if (showBans) parts.push(`${banCount} banned`);
|
||||
if (showScan) parts.push(scanLoaded ? `${scanCount} suspicious` : 'scanning…');
|
||||
document.getElementById('main-summary').textContent = parts.join(' · ');
|
||||
}
|
||||
|
||||
// ── Ban card ──────────────────────────────────────────────────────
|
||||
function makeBanCard(b) {
|
||||
const card = document.createElement('div');
|
||||
const color = scoreColor(b.score, b.jail);
|
||||
card.className = 'card';
|
||||
card.style.borderLeft = `3px solid ${color}`;
|
||||
|
||||
const scoreBadge = b.score != null
|
||||
? `<span class="score-badge" style="color:${color};border-color:${color}">${b.score}</span>`
|
||||
: '';
|
||||
|
||||
let meta = `<span>JAIL: ${esc(b.jail.toUpperCase())}</span>`;
|
||||
if (b.jail !== 'whitelist' && b.jail !== 'exempt') {
|
||||
meta += `<span>BANNED: ${b.banTime ? esc(b.banTime.slice(5,16)) : '—'}</span>`;
|
||||
meta += `<span>EXPIRES: ${b.unbanTime ? esc(b.unbanTime.slice(5,16)) : '—'}</span>`;
|
||||
}
|
||||
if (b.country) meta += `<span>COUNTRY: ${esc(b.country)}</span>`;
|
||||
if (b.note) meta += `<span class="good">NOTE: ${esc(b.note)}</span>`;
|
||||
|
||||
const actions = b.jail === 'whitelist'
|
||||
? `<button class="btn-red" onclick="removeWhitelist('${esc(b.ip)}')">[REMOVE]</button>`
|
||||
: b.jail === 'exempt'
|
||||
? `<button class="btn-red" onclick="removeExemption('${esc(b.ip)}')">[REMOVE]</button>
|
||||
<button class="btn-red" onclick="arrest('${esc(b.ip)}')">[ARREST]</button>
|
||||
<button class="btn-amber" onclick="abuseCheck('${esc(b.ip)}',this)">[THREAT]</button>`
|
||||
: `<button onclick="parole('${esc(b.ip)}','${esc(b.jail)}')">[PAROLE]</button>
|
||||
<button class="btn-red" onclick="arrest('${esc(b.ip)}')">[ARREST]</button>
|
||||
<a class="btn" href="/logs/${esc(b.ip)}" target="_blank">[RECORDS]</a>
|
||||
<button class="btn-amber" onclick="abuseCheck('${esc(b.ip)}',this)">[THREAT]</button>`;
|
||||
|
||||
card.innerHTML =
|
||||
`<div class="card-ip">${esc(b.ip)} ${scoreBadge}</div>` +
|
||||
`<div class="card-meta">${meta}</div>` +
|
||||
`<div class="card-actions">${actions}</div>`;
|
||||
return card;
|
||||
}
|
||||
|
||||
// ── Scan card ─────────────────────────────────────────────────────
|
||||
function makeScanCard(d) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card scan-card' + (d.previouslyBanned ? ' prev-banned' : '');
|
||||
card.innerHTML =
|
||||
`<div class="card-ip">${esc(d.ip)}<span class="scan-badge">SUSPICIOUS</span></div>` +
|
||||
`<div class="card-meta">
|
||||
<span class="hi">HITS: ${d.hits}</span>
|
||||
<span class="muted">SITES: ${esc(d.sites.slice(0,3).join(', '))}</span>
|
||||
${d.previouslyBanned ? `<span class="warn">PREV BANNED: ${d.banCount}x</span>` : ''}
|
||||
</div>` +
|
||||
`<div class="card-actions">
|
||||
<a class="btn" href="/logs/${esc(d.ip)}" target="_blank">[RECORDS]</a>
|
||||
<button class="btn-red" onclick="scanBan('${esc(d.ip)}',this)">[BAN]</button>
|
||||
<button onclick="scanWL('${esc(d.ip)}',this)">[EXEMPT]</button>
|
||||
<button class="btn-amber" onclick="scanAbuse('${esc(d.ip)}',this)">[THREAT]</button>
|
||||
</div>`;
|
||||
return card;
|
||||
}
|
||||
|
||||
// ── Ban management ────────────────────────────────────────────────
|
||||
async function parole(ip, jail) {
|
||||
try { await api('POST', '/api/unban', { ip, jail }); await loadBans(); }
|
||||
catch (e) { alert('Parole failed: ' + e.message); }
|
||||
}
|
||||
|
||||
async function arrest(ip) {
|
||||
try { await api('POST', '/api/ban', { ip }); await loadBans(); }
|
||||
catch (e) { alert('Arrest failed: ' + e.message); }
|
||||
}
|
||||
|
||||
async function removeWhitelist(ip) {
|
||||
try { await api('DELETE', `/api/whitelist/${encodeURIComponent(ip)}`); await loadBans(); }
|
||||
catch (e) { alert('Remove failed: ' + e.message); }
|
||||
}
|
||||
|
||||
async function removeExemption(ip) {
|
||||
try { await api('DELETE', `/api/exempt/${encodeURIComponent(ip)}`); await loadBans(); }
|
||||
catch (e) { alert('Remove failed: ' + e.message); }
|
||||
}
|
||||
|
||||
async function abuseCheck(ip, btn) {
|
||||
btn.disabled = true; btn.textContent = '[…]';
|
||||
try {
|
||||
const d = await (await api('GET', `/api/check-abuse/${encodeURIComponent(ip)}`)).json();
|
||||
alert(`AbuseIPDB: ${ip}\nScore: ${d.score}\nCountry: ${d.country || '—'}`);
|
||||
await loadBans();
|
||||
} catch (e) { alert('Check failed: ' + e.message); }
|
||||
finally { btn.disabled = false; btn.textContent = '[THREAT]'; }
|
||||
}
|
||||
|
||||
async function forceAbuseCheck() {
|
||||
try {
|
||||
await api('POST', '/api/force-abuse-check');
|
||||
alert('Abuse checks running in background. Bans will refresh in ~5s.');
|
||||
setTimeout(loadBans, 5000);
|
||||
} catch (e) { alert('Failed: ' + e.message); }
|
||||
}
|
||||
|
||||
function toggleNote() {
|
||||
document.getElementById('note-wrap').style.display =
|
||||
document.getElementById('action-select').value === 'whitelist' ? '' : 'none';
|
||||
}
|
||||
|
||||
async function executeAction() {
|
||||
const ip = document.getElementById('action-ip').value.trim();
|
||||
const action = document.getElementById('action-select').value;
|
||||
const note = document.getElementById('action-note')?.value.trim();
|
||||
if (!ip) return;
|
||||
try {
|
||||
if (action === 'ban') await api('POST', '/api/ban', { ip });
|
||||
else if (action === 'unban-all') await api('POST', '/api/unban-all', { ip });
|
||||
else if (action === 'whitelist') await api('POST', '/api/whitelist', { ip, note });
|
||||
else if (action === 'search') {
|
||||
const q = ip.toLowerCase();
|
||||
document.querySelectorAll('#main-grid .card').forEach(card => {
|
||||
card.style.display =
|
||||
card.querySelector('.card-ip').textContent.toLowerCase().includes(q) ? '' : 'none';
|
||||
});
|
||||
return;
|
||||
}
|
||||
document.getElementById('action-ip').value = '';
|
||||
await loadBans();
|
||||
} catch (e) { alert('Action failed: ' + e.message); }
|
||||
}
|
||||
|
||||
async function scanBan(ip, btn) {
|
||||
btn.disabled = true; btn.textContent = '[…]';
|
||||
try {
|
||||
await api('POST', '/api/ban', { ip });
|
||||
btn.closest('.card').style.opacity = '.4';
|
||||
btn.textContent = '[BANNED]';
|
||||
loadBans();
|
||||
} catch (e) { alert('Ban failed: ' + e.message); btn.disabled = false; btn.textContent = '[BAN]'; }
|
||||
}
|
||||
|
||||
async function scanWL(ip, btn) {
|
||||
btn.disabled = true; btn.textContent = '[…]';
|
||||
try {
|
||||
await api('POST', '/api/exempt', { ip });
|
||||
btn.closest('.card').style.opacity = '.4';
|
||||
btn.textContent = '[EXEMPTED]';
|
||||
loadBans();
|
||||
} catch (e) { alert('Exempt failed: ' + e.message); btn.disabled = false; btn.textContent = '[EXEMPT]'; }
|
||||
}
|
||||
|
||||
async function scanAbuse(ip, btn) {
|
||||
btn.disabled = true; btn.textContent = '[…]';
|
||||
try {
|
||||
const d = await (await api('GET', `/api/check-abuse/${encodeURIComponent(ip)}`)).json();
|
||||
alert(`AbuseIPDB: ${ip}\nScore: ${d.score}\nCountry: ${d.country || '—'}`);
|
||||
} catch (e) { alert('Check failed: ' + e.message); }
|
||||
finally { btn.disabled = false; btn.textContent = '[THREAT]'; }
|
||||
}
|
||||
|
||||
// ── Boot ──────────────────────────────────────────────────────────
|
||||
initFeed();
|
||||
loadBans();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
555
dashboard/public/style.css
Normal file
555
dashboard/public/style.css
Normal file
@@ -0,0 +1,555 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--green: #00ff41;
|
||||
--green2: #00cc33;
|
||||
--dim: #005514;
|
||||
--cyan: #00ffff;
|
||||
--amber: #ffaa00;
|
||||
--red: #ff3333;
|
||||
--bg: #050a05;
|
||||
--bg2: #0a0f0a;
|
||||
--border: #00661a;
|
||||
}
|
||||
|
||||
html { font-size: 16px; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--green);
|
||||
font-family: 'Share Tech Mono', 'Courier New', monospace;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* CRT scanlines */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed; inset: 0;
|
||||
background: repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0px, rgba(0,0,0,.10) 1px, transparent 1px, transparent 3px);
|
||||
pointer-events: none; z-index: 9999;
|
||||
}
|
||||
/* CRT vignette */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed; inset: 0;
|
||||
background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.65) 100%);
|
||||
pointer-events: none; z-index: 9998;
|
||||
}
|
||||
|
||||
.screen { width: 100%; padding: 1.5rem 2rem 4rem; box-sizing: border-box; }
|
||||
|
||||
/* .ascii-banner legacy — replaced by .ascii-art inside .banner-wrap */
|
||||
.ascii-banner {
|
||||
font-family: 'VT323', monospace;
|
||||
color: var(--green);
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.2;
|
||||
white-space: pre;
|
||||
text-shadow: 0 0 8px var(--green);
|
||||
margin-bottom: .4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tagline { color: var(--dim); font-size: .82rem; margin-bottom: .2rem; }
|
||||
|
||||
/* ── Banner ──────────────────────────────────────────────────── */
|
||||
.banner-wrap { text-align: left; margin-bottom: 1rem; }
|
||||
|
||||
.banner-hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: .3rem 0;
|
||||
}
|
||||
|
||||
.ascii-art {
|
||||
font-family: 'VT323', monospace;
|
||||
color: var(--green);
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
white-space: pre;
|
||||
text-shadow: 0 0 8px var(--green);
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: .3rem 0 .1rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.banner-sub {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: clamp(1rem, 4vw, 2.2rem);
|
||||
color: var(--amber);
|
||||
text-shadow: 0 0 12px var(--amber);
|
||||
letter-spacing: clamp(.05em, 1vw, .55em);
|
||||
margin: .4rem 0 .2rem;
|
||||
}
|
||||
|
||||
.banner-sub::after {
|
||||
content: '█';
|
||||
color: var(--green);
|
||||
text-shadow: 0 0 8px var(--green);
|
||||
margin-left: .2em;
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
.host-line {
|
||||
color: var(--cyan);
|
||||
font-size: .85rem;
|
||||
text-shadow: 0 0 6px var(--cyan);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.box {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg2);
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem 1.2rem;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 1.4rem;
|
||||
color: var(--cyan);
|
||||
text-shadow: 0 0 8px var(--cyan);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-bottom: .4rem;
|
||||
margin-bottom: .9rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
h2.section {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 1.5rem;
|
||||
color: var(--amber);
|
||||
text-shadow: 0 0 8px var(--amber);
|
||||
margin: 2rem 0 .8rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
p { line-height: 1.7; margin-bottom: .7rem; font-size: .86rem; }
|
||||
p:last-child { margin-bottom: 0; }
|
||||
|
||||
pre {
|
||||
background: #000d03;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--green2);
|
||||
padding: .75rem 1rem;
|
||||
overflow-x: auto;
|
||||
font-size: .78rem;
|
||||
line-height: 1.65;
|
||||
margin: .5rem 0 1rem;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg2);
|
||||
padding: .85rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-meta { flex: 1; }
|
||||
|
||||
|
||||
.card.prev-banned { border-color: var(--amber); }
|
||||
.card.whitelisted { border-color: var(--green); }
|
||||
|
||||
.card-ip {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 1.25rem;
|
||||
color: var(--cyan);
|
||||
text-shadow: 0 0 5px var(--cyan);
|
||||
margin-bottom: .3rem;
|
||||
word-break: break-all;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.card-ip::before { content: '▸ '; color: var(--green); }
|
||||
|
||||
.card-meta { font-size: .78rem; color: #777; line-height: 1.6; }
|
||||
.card-meta span { display: block; }
|
||||
|
||||
.score-badge {
|
||||
display: inline-block;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 1.1rem;
|
||||
padding: .05rem .5rem;
|
||||
border: 1px solid;
|
||||
float: right;
|
||||
margin-top: -.1rem;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .35rem;
|
||||
margin-top: .7rem;
|
||||
}
|
||||
|
||||
.card-actions button, .card-actions a {
|
||||
flex: 1 1 45%;
|
||||
font-size: .72rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hi { color: var(--amber); }
|
||||
.good { color: var(--green); }
|
||||
.warn { color: var(--red); }
|
||||
.info { color: var(--cyan); }
|
||||
.muted { color: #555; }
|
||||
|
||||
button, a.btn {
|
||||
display: inline-block;
|
||||
background: #001a05;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--green);
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .82rem;
|
||||
padding: .28rem .7rem;
|
||||
cursor: pointer;
|
||||
transition: background .15s, color .15s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled), a.btn:hover { background: var(--dim); color: #fff; }
|
||||
button:disabled { color: var(--dim); cursor: not-allowed; border-color: #002608; }
|
||||
button.btn-red, a.btn-red { border-color: var(--red); color: var(--red); }
|
||||
button.btn-red:hover:not(:disabled), a.btn-red:hover { background: #330000; color: #fff; }
|
||||
button.btn-amber, a.btn-amber { border-color: var(--amber); color: var(--amber); }
|
||||
button.btn-amber:hover { background: #1a1000; color: #fff; }
|
||||
|
||||
.blink { animation: blink 1s step-end infinite; }
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
|
||||
.prompt { color: var(--dim); font-size: .78rem; margin-top: 2rem; }
|
||||
.prompt::before { content: 'root@mm-dc:~# '; color: var(--green2); }
|
||||
|
||||
footer {
|
||||
border-top: 1px solid var(--border);
|
||||
color: #333;
|
||||
font-size: .72rem;
|
||||
padding-top: .7rem;
|
||||
margin-top: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Live Feed ─────────────────────────────────────────────── */
|
||||
.feed-status {
|
||||
font-size: .78rem;
|
||||
color: var(--amber);
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.feed-status.ok { color: var(--green); }
|
||||
.feed-status.err { color: var(--red); }
|
||||
|
||||
.feed-box {
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
background: #000d03;
|
||||
border: 1px solid var(--border);
|
||||
padding: .5rem .75rem;
|
||||
font-size: .75rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.feed-box::-webkit-scrollbar { width: 6px; }
|
||||
.feed-box::-webkit-scrollbar-track { background: var(--bg); }
|
||||
.feed-box::-webkit-scrollbar-thumb { background: var(--dim); }
|
||||
|
||||
.feed-line { color: var(--dim); display: block; }
|
||||
.feed-line.ban { color: var(--red); }
|
||||
|
||||
/* ── Feed entries (ban-only, IP + jail display) ─────────────── */
|
||||
.feed-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 3.5rem 1fr auto;
|
||||
gap: .4rem;
|
||||
align-items: baseline;
|
||||
padding: .15rem 0;
|
||||
border-bottom: 1px solid #001a05;
|
||||
}
|
||||
.feed-time { color: var(--dim); font-size: .72rem; }
|
||||
.feed-ip { color: var(--green); font-size: .82rem; }
|
||||
.feed-jail { color: var(--amber); font-size: .72rem; text-align: right; }
|
||||
|
||||
/* ── Two-column layout [feed | unified main] ─────────────────── */
|
||||
.main-col {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
gap: 1.2rem;
|
||||
align-items: start;
|
||||
margin-top: .8rem;
|
||||
}
|
||||
|
||||
.col-main { min-width: 0; }
|
||||
|
||||
.col-feed {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
height: calc(100vh - 3rem);
|
||||
}
|
||||
|
||||
.feed-col-box {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.col-feed .feed-box {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* ── Feed column title ───────────────────────────────────────── */
|
||||
.feed-title {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 1.1rem;
|
||||
color: var(--cyan);
|
||||
text-shadow: 0 0 6px var(--cyan);
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
padding: .4rem 0 .3rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* ── Feed status dot ─────────────────────────────────────────── */
|
||||
.feed-indicator {
|
||||
text-align: center;
|
||||
padding: .5rem 0 .3rem;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--dim);
|
||||
box-shadow: 0 0 4px var(--dim);
|
||||
transition: background .3s, box-shadow .3s;
|
||||
}
|
||||
|
||||
.status-dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
|
||||
.status-dot.err { background: var(--red); box-shadow: 0 0 8px var(--red); }
|
||||
|
||||
.feed-rate {
|
||||
text-align: center;
|
||||
color: var(--dim);
|
||||
font-size: .65rem;
|
||||
padding: .3rem 0 .2rem;
|
||||
}
|
||||
|
||||
/* ── Unified control bar ─────────────────────────────────────── */
|
||||
.control-bar {
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
padding: .6rem .9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.control-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.control-row-tools {
|
||||
gap: .8rem;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: .5rem;
|
||||
margin-top: .1rem;
|
||||
}
|
||||
|
||||
.tool-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .35rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tool-group-right { margin-left: auto; }
|
||||
|
||||
.tool-label {
|
||||
font-size: .68rem;
|
||||
letter-spacing: 1px;
|
||||
border-right: 1px solid var(--border);
|
||||
padding-right: .4rem;
|
||||
}
|
||||
|
||||
.tool-group input[type="number"] {
|
||||
width: 46px;
|
||||
padding: .25rem .4rem;
|
||||
background: #001205;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--green);
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .82rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tool-group input[type="number"]:focus { outline: none; border-color: var(--green); }
|
||||
|
||||
.cb-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .25rem;
|
||||
font-size: .75rem;
|
||||
color: var(--dim);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cb-label input[type="checkbox"] { cursor: pointer; accent-color: var(--green); }
|
||||
|
||||
.summary-bar {
|
||||
font-size: .75rem;
|
||||
color: var(--dim);
|
||||
margin-top: .35rem;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: .3rem;
|
||||
}
|
||||
|
||||
/* ── Scan filter button ──────────────────────────────────────── */
|
||||
button[data-jail="scan"] {
|
||||
border-color: var(--amber);
|
||||
color: var(--amber);
|
||||
}
|
||||
button[data-jail="scan"].active {
|
||||
background: #1a1000;
|
||||
border-color: var(--amber);
|
||||
color: var(--amber);
|
||||
}
|
||||
|
||||
/* ── Scan card differentiation ───────────────────────────────── */
|
||||
.scan-card {
|
||||
background: #0d0d05;
|
||||
border-left: 3px solid var(--amber) !important;
|
||||
}
|
||||
|
||||
.scan-badge {
|
||||
display: inline-block;
|
||||
font-size: .6rem;
|
||||
color: var(--amber);
|
||||
border: 1px solid var(--amber);
|
||||
padding: .05rem .3rem;
|
||||
margin-left: .4rem;
|
||||
vertical-align: middle;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
}
|
||||
|
||||
/* ── Card grid: fixed 4 columns ──────────────────────────────── */
|
||||
.col-main .card-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.main-col { grid-template-columns: 1fr; }
|
||||
.col-feed { position: static; height: auto; }
|
||||
.feed-col-box { height: auto; }
|
||||
.col-feed .feed-box { height: 220px; flex: none; }
|
||||
.col-main .card-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
|
||||
.filter-bar { flex-wrap: wrap; }
|
||||
.filter-bar button { flex: 1 1 auto; min-width: 4rem; }
|
||||
|
||||
.control-row-tools { flex-direction: column; align-items: flex-start; }
|
||||
.tool-group-right { margin-left: 0; width: 100%; flex-wrap: wrap; }
|
||||
.tool-group-right input[type="text"] { flex: 1 1 100%; }
|
||||
}
|
||||
|
||||
/* ── Filter bar ────────────────────────────────────────────── */
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: .4rem;
|
||||
}
|
||||
|
||||
.filter-bar button {
|
||||
flex: 1;
|
||||
font-size: .75rem;
|
||||
padding: .2rem .4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.filter-bar button.active {
|
||||
background: var(--dim);
|
||||
border-color: var(--green);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
/* ── Action bar ────────────────────────────────────────────── */
|
||||
.action-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.action-bar input[type="text"],
|
||||
.action-bar select {
|
||||
background: #001205;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--green);
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .82rem;
|
||||
padding: .28rem .5rem;
|
||||
flex: 2 1 160px;
|
||||
}
|
||||
|
||||
.action-bar input::placeholder { color: var(--dim); }
|
||||
.action-bar select { flex: 1 1 130px; cursor: pointer; }
|
||||
|
||||
.action-bar input:focus,
|
||||
.action-bar select:focus { outline: none; border-color: var(--green); }
|
||||
|
||||
#note-wrap { flex: 0 0 100%; }
|
||||
#note-wrap input { width: 100%; }
|
||||
|
||||
/* ── Scan controls ─────────────────────────────────────────── */
|
||||
.scan-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .6rem;
|
||||
margin-bottom: .8rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.scan-controls label { color: var(--dim); font-size: .82rem; }
|
||||
|
||||
.scan-controls input[type="number"] {
|
||||
width: 56px;
|
||||
padding: .25rem .4rem;
|
||||
background: #001205;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--green);
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: .82rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scan-controls input:focus { outline: none; border-color: var(--green); }
|
||||
|
||||
/* ── Summary line ──────────────────────────────────────────── */
|
||||
.summary {
|
||||
font-size: .78rem;
|
||||
color: var(--dim);
|
||||
margin-bottom: .8rem;
|
||||
}
|
||||
Reference in New Issue
Block a user