5d512ff2ed
Replace flat intrastack network with 5 purpose-scoped zones (gateway, storage, data, observability, ci) so compromised containers cannot reach unrelated services. Add local-only and infra-headers Traefik middlewares with per-service assignments via reef mw key. Rename nes-sports theme to throwback with Tecmo Super Bowl palette: deep navy backgrounds, white text, patriotic red/blue accents. Remove CRT scanlines, power-on animation, starfield, and neon glow effects.
357 lines
12 KiB
HTML
357 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HOMELAB COMMAND CENTER</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--tb-navy: #0a1628;
|
|
--tb-navy-light: #162040;
|
|
--tb-navy-mid: #1e2d50;
|
|
--tb-slate: #2a3f5f;
|
|
--tb-steel: #5a7090;
|
|
--tb-white: #f0f0f0;
|
|
--tb-blue: #3366cc;
|
|
--tb-blue-light: #5588dd;
|
|
--tb-blue-bright: #88aaee;
|
|
--tb-red: #cc2244;
|
|
--tb-red-light: #dd4466;
|
|
--tb-green: #44aa44;
|
|
}
|
|
|
|
body {
|
|
font-family: 'IBM Plex Mono', 'Courier New', monospace;
|
|
background: var(--tb-navy);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
color: var(--tb-white);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
border-bottom: 4px solid var(--tb-red);
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 2rem;
|
|
color: var(--tb-white);
|
|
letter-spacing: 6px;
|
|
text-shadow: 3px 3px 0 var(--tb-navy-mid);
|
|
}
|
|
|
|
.subtitle {
|
|
font-family: 'Press Start 2P', monospace;
|
|
color: var(--tb-blue-bright);
|
|
font-size: 0.55rem;
|
|
margin-top: 15px;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.score-bar {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 40px;
|
|
margin-top: 20px;
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 0.5rem;
|
|
}
|
|
|
|
.score-item {
|
|
color: var(--tb-white);
|
|
background: var(--tb-blue);
|
|
padding: 6px 14px;
|
|
border: 2px solid var(--tb-blue-light);
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
padding: 20px 0;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.tile {
|
|
background: var(--tb-navy-light);
|
|
border: 3px solid var(--tb-slate);
|
|
padding: 25px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.tile:hover {
|
|
border-color: var(--tb-blue);
|
|
background: var(--tb-navy-mid);
|
|
}
|
|
|
|
/* All tile variants use the same base style */
|
|
.tile .icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 15px;
|
|
display: block;
|
|
}
|
|
|
|
.tile.storage .icon,
|
|
.tile.database .icon { color: var(--tb-red); }
|
|
.tile.git .icon { color: var(--tb-blue-bright); }
|
|
.tile.ci .icon { color: var(--tb-blue-light); }
|
|
.tile.notebook .icon,
|
|
.tile.research .icon { color: var(--tb-white); }
|
|
.tile.catalog .icon { color: var(--tb-blue-bright); }
|
|
.tile.query .icon { color: var(--tb-blue-light); }
|
|
.tile.observability .icon { color: var(--tb-red-light); }
|
|
.tile.metrics .icon { color: var(--tb-blue-bright); }
|
|
.tile.logs .icon { color: var(--tb-blue-light); }
|
|
.tile.proxy .icon { color: var(--tb-white); }
|
|
|
|
.tile-title {
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 0.7rem;
|
|
color: var(--tb-white);
|
|
margin-bottom: 10px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.tile-desc {
|
|
font-size: 0.75rem;
|
|
color: var(--tb-steel);
|
|
line-height: 1.6;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.tile-port {
|
|
font-size: 0.7rem;
|
|
color: var(--tb-blue-bright);
|
|
display: inline-block;
|
|
}
|
|
|
|
.status {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--tb-green);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.stripe {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: var(--tb-red);
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: var(--tb-slate);
|
|
font-size: 0.7rem;
|
|
border-top: 3px solid var(--tb-slate);
|
|
margin-top: 20px;
|
|
}
|
|
|
|
footer span {
|
|
color: var(--tb-red);
|
|
}
|
|
|
|
/* Badges */
|
|
.badge {
|
|
position: absolute;
|
|
top: -1px;
|
|
left: 20px;
|
|
font-family: 'Press Start 2P', monospace;
|
|
color: var(--tb-white);
|
|
font-size: 0.35rem;
|
|
padding: 4px 8px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.badge.new { background: var(--tb-red); }
|
|
.badge.gpu { background: var(--tb-blue); }
|
|
.badge.data { background: var(--tb-blue); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>HOMELAB</h1>
|
|
<p class="subtitle">COMMAND CENTER</p>
|
|
<div class="score-bar">
|
|
<span class="score-item">SERVICES: 13</span>
|
|
<span class="score-item">STATUS: ONLINE</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="grid">
|
|
<a data-subdomain="traefik" target="_blank" class="tile proxy">
|
|
<span class="badge new">NEW</span>
|
|
<span class="status"></span>
|
|
<span class="icon">🔗</span>
|
|
<h2 class="tile-title">TRAEFIK</h2>
|
|
<p class="tile-desc">Cloud-native reverse proxy and load balancer</p>
|
|
<span class="tile-port"></span>
|
|
<div class="stripe"></div>
|
|
</a>
|
|
|
|
<a data-subdomain="s3console" target="_blank" class="tile storage">
|
|
<span class="status"></span>
|
|
<span class="icon">💾</span>
|
|
<h2 class="tile-title">RUSTFS</h2>
|
|
<p class="tile-desc">S3-compatible object storage for all your data needs</p>
|
|
<span class="tile-port"></span>
|
|
<div class="stripe"></div>
|
|
</a>
|
|
|
|
<a data-subdomain="gitea" target="_blank" class="tile git">
|
|
<span class="status"></span>
|
|
<span class="icon">🐙</span>
|
|
<h2 class="tile-title">GITEA</h2>
|
|
<p class="tile-desc">Self-hosted Git service with packages & CI</p>
|
|
<span class="tile-port"></span>
|
|
<div class="stripe"></div>
|
|
</a>
|
|
|
|
<a data-subdomain="ci" target="_blank" class="tile ci">
|
|
<span class="status"></span>
|
|
<span class="icon">🔨</span>
|
|
<h2 class="tile-title">WOODPECKER</h2>
|
|
<p class="tile-desc">Simple yet powerful CI/CD engine</p>
|
|
<span class="tile-port"></span>
|
|
<div class="stripe"></div>
|
|
</a>
|
|
|
|
<a data-subdomain="notebooks" target="_blank" class="tile notebook">
|
|
<span class="badge gpu">GPU</span>
|
|
<span class="status"></span>
|
|
<span class="icon">📑</span>
|
|
<h2 class="tile-title">NOTEBOOKS</h2>
|
|
<p class="tile-desc">Marimo reactive notebooks with CUDA</p>
|
|
<span class="tile-port"></span>
|
|
<div class="stripe"></div>
|
|
</a>
|
|
|
|
<a data-subdomain="zotero" target="_blank" class="tile research">
|
|
<span class="badge gpu">GPU</span>
|
|
<span class="status"></span>
|
|
<span class="icon">📚</span>
|
|
<h2 class="tile-title">ZOTERO</h2>
|
|
<p class="tile-desc">Research reference manager in the cloud</p>
|
|
<span class="tile-port"></span>
|
|
<div class="stripe"></div>
|
|
</a>
|
|
|
|
<a data-subdomain="nessie" data-path="/api/v2/config" target="_blank" class="tile catalog">
|
|
<span class="badge data">DATA</span>
|
|
<span class="status"></span>
|
|
<span class="icon">🌳</span>
|
|
<h2 class="tile-title">NESSIE</h2>
|
|
<p class="tile-desc">Git-like versioned data catalog for Iceberg</p>
|
|
<span class="tile-port"></span>
|
|
<div class="stripe"></div>
|
|
</a>
|
|
|
|
<a data-subdomain="trino" target="_blank" class="tile query">
|
|
<span class="badge data">DATA</span>
|
|
<span class="status"></span>
|
|
<span class="icon">🔍</span>
|
|
<h2 class="tile-title">TRINO</h2>
|
|
<p class="tile-desc">Distributed SQL query engine for the lakehouse</p>
|
|
<span class="tile-port"></span>
|
|
<div class="stripe"></div>
|
|
</a>
|
|
|
|
<a data-subdomain="polaris" target="_blank" class="tile catalog">
|
|
<span class="badge new">NEW</span>
|
|
<span class="status"></span>
|
|
<span class="icon">⭐</span>
|
|
<h2 class="tile-title">POLARIS</h2>
|
|
<p class="tile-desc">Apache Iceberg catalog with governance & Unity-style access</p>
|
|
<span class="tile-port"></span>
|
|
<div class="stripe"></div>
|
|
</a>
|
|
|
|
<a data-subdomain="grafana" target="_blank" class="tile observability">
|
|
<span class="status"></span>
|
|
<span class="icon">📊</span>
|
|
<h2 class="tile-title">GRAFANA</h2>
|
|
<p class="tile-desc">Observability dashboards for logs and traces</p>
|
|
<span class="tile-port"></span>
|
|
<div class="stripe"></div>
|
|
</a>
|
|
|
|
<a data-subdomain="jaeger" target="_blank" class="tile metrics">
|
|
<span class="status"></span>
|
|
<span class="icon">👁</span>
|
|
<h2 class="tile-title">JAEGER</h2>
|
|
<p class="tile-desc">Distributed tracing for microservices</p>
|
|
<span class="tile-port"></span>
|
|
<div class="stripe"></div>
|
|
</a>
|
|
|
|
<a data-subdomain="prometheus" target="_blank" class="tile logs">
|
|
<span class="status"></span>
|
|
<span class="icon">📈</span>
|
|
<h2 class="tile-title">PROMETHEUS</h2>
|
|
<p class="tile-desc">Metrics collection and alerting</p>
|
|
<span class="tile-port"></span>
|
|
<div class="stripe"></div>
|
|
</a>
|
|
|
|
<a data-subdomain="loki" data-path="/ready" target="_blank" class="tile database">
|
|
<span class="status"></span>
|
|
<span class="icon">📋</span>
|
|
<h2 class="tile-title">LOKI</h2>
|
|
<p class="tile-desc">Log aggregation system by Grafana</p>
|
|
<span class="tile-port"></span>
|
|
<div class="stripe"></div>
|
|
</a>
|
|
</div>
|
|
|
|
<footer>
|
|
MADE WITH <span>♥</span> FOR THE HOMELAB
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// Domain resolution: derive base domain from current hostname
|
|
// dashboard.homelab.fhirworx.io -> homelab.fhirworx.io
|
|
// homelab.fhirworx.io -> homelab.fhirworx.io
|
|
(function() {
|
|
var base = location.hostname.replace(/^dashboard\./, '');
|
|
document.querySelectorAll('[data-subdomain]').forEach(function(el) {
|
|
var sub = el.dataset.subdomain;
|
|
var path = el.dataset.path || '';
|
|
var fqdn = sub + '.' + base;
|
|
el.href = location.protocol + '//' + fqdn + path;
|
|
var port = el.querySelector('.tile-port');
|
|
if (port) port.textContent = fqdn;
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|