diff --git a/packages/secubox-portal/debian/changelog b/packages/secubox-portal/debian/changelog index 284585ce..20c90ebc 100644 --- a/packages/secubox-portal/debian/changelog +++ b/packages/secubox-portal/debian/changelog @@ -1,3 +1,23 @@ +secubox-portal (2.2.0-1~bookworm1) bookworm; urgency=medium + + * portal: regenerate /portal/index.html as a public-facing operational + dashboard (issue #192). Consumes unauthenticated metrics endpoints + (cert-status, visitor-origin, live-hosts, health/summary, cookie- + audit/summary, crowdsec/decisions) and renders: + - Navbar (portal/soc/metablogs/publish/cookies/repo) + - Hero (overall health score + uptime/SSL/vhosts/certs/bans) + - Services LED grid (waf/crowdsec/haproxy/nginx/system) + - System metrics (CPU/RAM/Disk/Load/LXC) with progress bars + - Certificates summary (total/valid/expiring/critical/expired) + - Cookie Audit · RGPD breakdown + - Attacks & Bans tiles (active bans / WAF % / today alerts) + - Top vhosts (last 60 min traffic) + - Top visitor ASN (geographic attribution) + Auto-refresh 30s, graceful degradation on endpoint failure. + Style: P31 phosphor green CRT (preserved from previous version). + + -- Gerald KERMA Mon, 18 May 2026 05:54:39 +0200 + secubox-portal (2.1.0-1~bookworm1) bookworm; urgency=medium * Add device-specific theming based on detected board diff --git a/packages/secubox-portal/www/portal/index.html b/packages/secubox-portal/www/portal/index.html index 8fe02b6e..3f205491 100644 --- a/packages/secubox-portal/www/portal/index.html +++ b/packages/secubox-portal/www/portal/index.html @@ -3,7 +3,8 @@ - SecuBox - Portal + SecuBox · Portal + @@ -20,16 +21,13 @@ --tube-pale: #c8e6c9; --tube-soft: #a5d6a7; --tube-dark: #1b1b1f; - --text-dim: var(--p31-dim); --primary: var(--p31-peak); --cyan: #00d4ff; - --green: var(--p31-peak); --red: #ff4466; --yellow: var(--p31-decay); - --purple: #a371f7; --bloom-text: 0 0 2px var(--p31-peak), 0 0 6px var(--p31-peak), 0 0 14px rgba(51,255,102,0.5); - --bloom-soft: 0 0 6px var(--p31-peak), 0 0 14px rgba(51,255,102,0.5); --bloom-amber: 0 0 3px var(--p31-decay), 0 0 10px rgba(255,179,71,0.4); + --bloom-red: 0 0 3px var(--red), 0 0 10px rgba(255,68,102,0.4); } * { box-sizing: border-box; margin: 0; padding: 0; } body { @@ -38,471 +36,462 @@ background-image: radial-gradient(ellipse at 50% 40%, rgba(51,255,102,0.025) 0%, transparent 70%); color: var(--tube-dark); min-height: 100vh; - padding: 2rem; + padding-bottom: 3rem; } body::before { content: ""; - position: fixed; - inset: 0; + position: fixed; inset: 0; background-image: linear-gradient(rgba(0,221,68,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0,221,68,0.02) 1px, transparent 1px); background-size: 50px 50px; - pointer-events: none; - z-index: -1; + pointer-events: none; z-index: -1; } - .container { max-width: 1400px; margin: 0 auto; } + a { color: var(--p31-mid); text-decoration: none; } + a:hover { color: var(--p31-peak); text-shadow: var(--bloom-text); } - /* Header */ - .header { text-align: center; margin-bottom: 3rem; } - .logo-icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: 100px; - height: 100px; - background: linear-gradient(135deg, var(--p31-peak), var(--p31-mid)); - border-radius: 24px; - font-size: 3rem; - margin-bottom: 1rem; - box-shadow: 0 8px 32px rgba(0,221,68,0.3); + /* Navbar */ + .navbar { + background: var(--tube-dark); + color: var(--p31-peak); + padding: 0.75rem 2rem; + box-shadow: 0 2px 8px rgba(0,0,0,0.3); + display: flex; align-items: center; justify-content: space-between; + position: sticky; top: 0; z-index: 50; + border-bottom: 1px solid var(--p31-mid); } - .logo { - font-size: 2.5rem; - font-weight: 700; - color: var(--p31-hot); + .navbar .brand { + font-weight: bold; font-size: 1.1rem; letter-spacing: 1px; text-shadow: var(--bloom-text); - letter-spacing: 0.05em; } - .tagline { color: var(--text-dim); font-size: 1.1rem; margin-top: 0.5rem; } + .navbar .brand a { color: var(--p31-peak); } + .navbar .nav-links { display: flex; gap: 1.5rem; flex-wrap: wrap; } + .navbar .nav-links a { + color: var(--p31-mid); font-size: 0.9rem; + padding: 0.25rem 0.5rem; border-radius: 3px; + transition: all 0.15s; + } + .navbar .nav-links a:hover { color: var(--p31-peak); background: rgba(0,221,68,0.08); text-shadow: var(--bloom-text); } + .navbar .nav-meta { font-size: 0.75rem; color: var(--p31-dim); } - /* Quick Actions */ - .quick-actions { - display: flex; - justify-content: center; - gap: 1rem; - margin-top: 1.5rem; - flex-wrap: wrap; - } - .quick-btn { - padding: 0.6rem 1.2rem; + .container { max-width: 1400px; margin: 0 auto; padding: 2rem; } + + /* Hero */ + .hero { + margin-bottom: 2rem; + padding: 1.5rem 2rem; background: var(--tube-pale); - border: 1px solid var(--tube-soft); - border-radius: 8px; - color: var(--p31-mid); - text-decoration: none; - font-size: 0.9rem; - font-family: inherit; - cursor: pointer; - transition: all 0.2s; - } - .quick-btn:hover { - border-color: var(--p31-peak); - color: var(--p31-peak); - text-shadow: var(--bloom-soft); - } - .quick-btn.primary { - background: rgba(0,221,68,0.1); - border-color: var(--p31-peak); - color: var(--p31-peak); - } - - /* Stats Bar */ - .stats-bar { - display: flex; - justify-content: center; - gap: 2rem; - margin: 2rem 0; - flex-wrap: wrap; - } - .stat { - text-align: center; - padding: 1rem 1.5rem; - background: var(--tube-pale); - border: 1px solid var(--tube-soft); - border-radius: 12px; - } - .stat-value { - font-size: 2rem; - font-weight: 700; - color: var(--p31-peak); - text-shadow: 0 0 10px var(--p31-peak); - } - .stat-label { - font-size: 0.75rem; - color: var(--text-dim); - text-transform: uppercase; - letter-spacing: 0.1em; - } - - /* Sections */ - .section { margin-bottom: 2.5rem; } - .section-title { - font-size: 0.85rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.15em; - color: var(--p31-decay); - text-shadow: var(--bloom-amber); - margin-bottom: 1rem; - padding-left: 0.5rem; - border-left: 3px solid var(--p31-decay); - } - - /* Service Grid */ - .services-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); - gap: 1rem; - } - .service-card { - background: var(--tube-pale); - border: 1px solid var(--tube-soft); - border-radius: 12px; - padding: 1.25rem; - text-align: center; - text-decoration: none; - color: var(--tube-dark); - transition: all 0.2s ease; - display: flex; - flex-direction: column; - align-items: center; - gap: 0.5rem; - } - .service-card:hover { - border-color: var(--p31-dim); - transform: translateY(-2px); - box-shadow: 0 8px 24px rgba(0,0,0,0.15); - } - .service-card .icon { - font-size: 2rem; - width: 50px; - height: 50px; - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - } - .service-card .name { font-weight: 600; font-size: 0.95rem; } - .service-card .desc { font-size: 0.7rem; color: var(--text-dim); } - .service-card .status { - font-size: 0.65rem; - padding: 2px 8px; - border-radius: 10px; - margin-top: auto; - text-transform: uppercase; - letter-spacing: 0.05em; - } - .status.online { background: rgba(0,221,68,0.15); color: var(--green); } - .status.offline { background: rgba(255,68,102,0.15); color: var(--red); } - .status.external { background: rgba(0,212,255,0.15); color: var(--cyan); } - - /* Icon backgrounds */ - .icon.security { background: rgba(255,68,102,0.1); } - .icon.network { background: rgba(0,212,255,0.1); } - .icon.monitoring { background: rgba(0,221,68,0.1); } - .icon.apps { background: rgba(163,113,247,0.1); } - .icon.comm { background: rgba(255,179,71,0.1); } - - /* Published Sites */ - .published-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 1rem; - } - .published-card { - background: var(--tube-pale); - border: 1px solid var(--tube-soft); - border-radius: 12px; - padding: 1.25rem; - text-decoration: none; - color: var(--tube-dark); - transition: all 0.2s; - } - .published-card:hover { - border-color: var(--p31-dim); - box-shadow: 0 4px 16px rgba(0,0,0,0.1); - } - .published-card .title { - font-weight: 600; - font-size: 1rem; - margin-bottom: 0.5rem; - display: flex; - align-items: center; - gap: 0.5rem; - } - .published-card .domain { - font-size: 0.8rem; - color: var(--cyan); - font-family: monospace; - } - .published-card .meta { - font-size: 0.7rem; - color: var(--text-dim); - margin-top: 0.5rem; - } - .published-card .badge { - display: inline-block; - padding: 2px 6px; + border: 1px solid var(--p31-mid); border-radius: 4px; - font-size: 0.65rem; - text-transform: uppercase; - letter-spacing: 0.05em; + box-shadow: 0 0 12px rgba(0,221,68,0.15); + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: 2rem; } - .badge.ssl { background: rgba(0,221,68,0.15); color: var(--green); } - .badge.static { background: rgba(163,113,247,0.15); color: var(--purple); } - .badge.proxy { background: rgba(0,212,255,0.15); color: var(--cyan); } - - /* Empty State */ - .empty { - text-align: center; - padding: 2rem; - color: var(--text-dim); - font-style: italic; + .hero-score { + display: flex; flex-direction: column; align-items: center; + min-width: 140px; } + .hero-score .num { + font-size: 3.5rem; font-weight: bold; line-height: 1; + color: var(--p31-peak); text-shadow: var(--bloom-text); + } + .hero-score .label { font-size: 0.8rem; color: var(--p31-dim); margin-top: 0.25rem; letter-spacing: 1px; } + .hero-score.warn .num { color: var(--yellow); text-shadow: var(--bloom-amber); } + .hero-score.crit .num { color: var(--red); text-shadow: var(--bloom-red); } + .hero-info { font-size: 0.95rem; line-height: 1.6; } + .hero-info .kv { display: flex; gap: 1.5rem; flex-wrap: wrap; } + .hero-info .k { color: var(--p31-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; } + .hero-info .v { color: var(--tube-dark); font-weight: bold; } + .hero-refresh { font-size: 0.75rem; color: var(--p31-dim); text-align: right; } + + /* Section grid */ + .grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 1.5rem; + margin-bottom: 1.5rem; + } + .card { + background: var(--tube-light); + border: 1px solid var(--p31-mid); + border-radius: 4px; + padding: 1.25rem; + position: relative; + box-shadow: 0 0 8px rgba(0,221,68,0.08); + } + .card h3 { + font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; + color: var(--p31-mid); margin-bottom: 1rem; + padding-bottom: 0.5rem; + border-bottom: 1px dashed var(--p31-ghost); + text-shadow: var(--bloom-text); + } + .card .row { display: flex; justify-content: space-between; padding: 0.25rem 0; font-size: 0.9rem; } + .card .row .k { color: var(--p31-dim); } + .card .row .v { color: var(--tube-dark); font-weight: bold; } + .card .row .v.ok { color: var(--p31-peak); text-shadow: var(--bloom-text); } + .card .row .v.warn { color: var(--yellow); text-shadow: var(--bloom-amber); } + .card .row .v.crit { color: var(--red); text-shadow: var(--bloom-red); } + .empty { color: var(--p31-dim); font-style: italic; font-size: 0.85rem; padding: 0.5rem 0; } + + /* Bar */ + .bar { + height: 4px; background: var(--p31-ghost); border-radius: 2px; + overflow: hidden; margin: 0.25rem 0; + } + .bar > span { display: block; height: 100%; background: var(--p31-peak); } + .bar.warn > span { background: var(--yellow); } + .bar.crit > span { background: var(--red); } + + /* Modules LED grid */ + .modules { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; } + .module { + display: flex; flex-direction: column; align-items: center; + gap: 0.25rem; padding: 0.5rem; border-radius: 4px; + background: var(--tube-pale); border: 1px solid var(--p31-ghost); + font-size: 0.7rem; + } + .module .led { + width: 10px; height: 10px; border-radius: 50%; + background: var(--p31-dim); + } + .module.ok .led { background: var(--p31-peak); box-shadow: 0 0 8px var(--p31-peak); } + .module.warn .led { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); } + .module.err .led { background: var(--red); box-shadow: 0 0 8px var(--red); } + .module .name { font-size: 0.65rem; text-transform: uppercase; color: var(--p31-dim); } + + /* Tables — vhosts / ASNs */ + table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } + th, td { text-align: left; padding: 0.25rem 0.5rem; } + th { font-size: 0.7rem; color: var(--p31-dim); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px dashed var(--p31-ghost); } + td.num { text-align: right; color: var(--cyan); font-variant-numeric: tabular-nums; } + tr:hover td { background: rgba(0,221,68,0.04); } + + /* Big number tiles */ + .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; } + .tile { + background: var(--tube-pale); border: 1px solid var(--p31-ghost); + border-radius: 4px; padding: 0.75rem; text-align: center; + } + .tile .v { font-size: 1.75rem; font-weight: bold; color: var(--p31-peak); text-shadow: var(--bloom-text); } + .tile .v.warn { color: var(--yellow); text-shadow: var(--bloom-amber); } + .tile .v.crit { color: var(--red); text-shadow: var(--bloom-red); } + .tile .l { font-size: 0.7rem; text-transform: uppercase; color: var(--p31-dim); letter-spacing: 1px; } - /* Footer */ .footer { - text-align: center; - margin-top: 3rem; - padding-top: 2rem; - border-top: 1px solid var(--tube-soft); - color: var(--text-dim); - font-size: 0.8rem; + margin-top: 3rem; padding-top: 1.5rem; + border-top: 1px dashed var(--p31-ghost); + text-align: center; font-size: 0.8rem; color: var(--p31-dim); } - .footer a { color: var(--p31-mid); text-decoration: none; } - .footer a:hover { color: var(--p31-peak); } - - /* Health Banner Space */ - body { padding-top: 3rem; } - + .footer a { color: var(--p31-mid); } @media (max-width: 768px) { - body { padding: 1rem; padding-top: 3rem; } - .stats-bar { gap: 1rem; } - .stat { padding: 0.75rem 1rem; } - .stat-value { font-size: 1.5rem; } + .hero { grid-template-columns: 1fr; } + .modules { grid-template-columns: repeat(3, 1fr); } + .navbar { padding: 0.75rem 1rem; flex-direction: column; gap: 0.5rem; } + .navbar .nav-links { font-size: 0.8rem; } } - -
-
-
🔐
-

SecuBox

-

Secure Network Appliance — Public Portal

-
- 📊 Dashboard - 🌐 Services - 🛡️ SOC - 🔑 Login -
-
+ -
-
-
-
-
Services Online
-
-
-
-
-
Published Sites
-
-
-
-
-
Health Score
-
-
-
-
-
Threats Blocked
-
+ + +
+ + +
+
+
—
+
HEALTH
+
+
+
+
Hostname
—
+
Uptime
—
+
SSL
—
+
VHosts
—
+
Certificates
—
+
Bans active
—
+
+
+
last refresh
+
—
+
+
-
-

🛡️ Security Services

-
-
+ +
+

SERVICES

+
+
Loading…
+
+
-
-

🌐 Network Services

-
-
+
-
-

📦 Applications

-
-
- -
-

🚀 Published Sites

-
-
Loading published sites...
-
-
- -
-

📡 External Services

-
-
- -
-

SecuBox © 2024-2026 CyberMind

-

Public Portal • -

-
+ +
+

System

+
Loading…
- - + refresh(); + setInterval(refresh, REFRESH_MS); +})(); +