5c088b50a8
Rename the design system from "throwback" to "loch" — a deep-navy design system. CSS variable prefix --tb- → --ds-. Press Start 2P replaced with IBM Plex Mono weight 600 for headings. Same hex colours, same layout, same mood — just a grown-up name. fix #50, fix #51, refs #54
306 lines
11 KiB
Cheetah
306 lines
11 KiB
Cheetah
{{template "base/head" .}}
|
|
<style>
|
|
.homelab-dashboard {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.homelab-dashboard .hdr {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
border-bottom: 4px solid var(--color-red);
|
|
}
|
|
.homelab-dashboard .hdr h1 {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
font-size: 2rem !important;
|
|
color: var(--color-text) !important;
|
|
letter-spacing: 6px !important;
|
|
text-shadow: 3px 3px 0 var(--color-body) !important;
|
|
line-height: 1.4 !important;
|
|
border: none !important;
|
|
}
|
|
.homelab-dashboard .subtitle {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
color: var(--color-primary);
|
|
font-size: 0.55rem;
|
|
margin-top: 15px;
|
|
letter-spacing: 2px;
|
|
}
|
|
.homelab-dashboard .score-bar {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 40px;
|
|
margin-top: 20px;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 0.5rem;
|
|
}
|
|
.homelab-dashboard .score-item {
|
|
color: var(--color-text);
|
|
background: var(--color-primary);
|
|
padding: 6px 14px;
|
|
border: 2px solid var(--color-primary-light-2);
|
|
}
|
|
.homelab-dashboard .grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
padding: 20px 0;
|
|
margin-top: 20px;
|
|
}
|
|
.homelab-dashboard .tile {
|
|
background: var(--color-box-body);
|
|
border: 3px solid var(--color-secondary-dark-2) !important;
|
|
padding: 25px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
text-decoration: none !important;
|
|
display: block;
|
|
border-radius: 0 !important;
|
|
}
|
|
.homelab-dashboard .tile:hover {
|
|
border-color: var(--color-primary) !important;
|
|
background: var(--color-body);
|
|
}
|
|
.homelab-dashboard .tile .icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 15px;
|
|
display: block;
|
|
}
|
|
.homelab-dashboard .tile.storage .icon,
|
|
.homelab-dashboard .tile.database .icon { color: var(--color-red); }
|
|
.homelab-dashboard .tile.git .icon { color: var(--color-primary-light-2); }
|
|
.homelab-dashboard .tile.ci .icon { color: var(--color-primary-light-1); }
|
|
.homelab-dashboard .tile.notebook .icon,
|
|
.homelab-dashboard .tile.research .icon { color: var(--color-text); }
|
|
.homelab-dashboard .tile.catalog .icon { color: var(--color-primary-light-2); }
|
|
.homelab-dashboard .tile.query .icon { color: var(--color-primary-light-1); }
|
|
.homelab-dashboard .tile.observability .icon { color: var(--color-red); }
|
|
.homelab-dashboard .tile.metrics .icon { color: var(--color-primary-light-2); }
|
|
.homelab-dashboard .tile.logs .icon { color: var(--color-primary-light-1); }
|
|
.homelab-dashboard .tile.proxy .icon { color: var(--color-text); }
|
|
.homelab-dashboard .tile-title {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
font-size: 0.7rem !important;
|
|
color: var(--color-text) !important;
|
|
margin-bottom: 10px;
|
|
letter-spacing: 1px;
|
|
}
|
|
.homelab-dashboard .tile-desc {
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-light-2);
|
|
line-height: 1.6;
|
|
margin-bottom: 15px;
|
|
}
|
|
.homelab-dashboard .tile-port {
|
|
font-size: 0.7rem;
|
|
color: var(--color-primary-light-2);
|
|
display: inline-block;
|
|
}
|
|
.homelab-dashboard .status-dot {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--color-green);
|
|
border-radius: 50%;
|
|
}
|
|
.homelab-dashboard .stripe {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: var(--color-red);
|
|
}
|
|
.homelab-dashboard .hdr-badge {
|
|
position: absolute;
|
|
top: -1px;
|
|
left: 20px;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
color: var(--color-text);
|
|
font-size: 0.35rem;
|
|
padding: 4px 8px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
.homelab-dashboard .hdr-badge.new { background: var(--color-red); }
|
|
.homelab-dashboard .hdr-badge.gpu { background: var(--color-primary); }
|
|
.homelab-dashboard .hdr-badge.data { background: var(--color-primary); }
|
|
.homelab-dashboard .ftr {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: var(--color-text-light-2);
|
|
font-size: 0.7rem;
|
|
border-top: 3px solid var(--color-secondary-dark-2);
|
|
margin-top: 20px;
|
|
}
|
|
.homelab-dashboard .ftr span { color: var(--color-red); }
|
|
</style>
|
|
<div class="homelab-dashboard">
|
|
<div class="hdr">
|
|
<h1>HOMELAB</h1>
|
|
<p class="subtitle">COMMAND CENTER</p>
|
|
<div class="score-bar">
|
|
<span class="score-item">SERVICES: 15</span>
|
|
<span class="score-item">STATUS: ONLINE</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<a data-subdomain="traefik" target="_blank" class="tile proxy">
|
|
<span class="hdr-badge new">NEW</span>
|
|
<span class="status-dot"></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-dot"></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" class="tile git">
|
|
<span class="status-dot"></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-dot"></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="hdr-badge gpu">GPU</span>
|
|
<span class="status-dot"></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="hdr-badge gpu">GPU</span>
|
|
<span class="status-dot"></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="docs" target="_blank" class="tile research">
|
|
<span class="hdr-badge new">NEW</span>
|
|
<span class="status-dot"></span>
|
|
<span class="icon">📖</span>
|
|
<h2 class="tile-title">DOCS</h2>
|
|
<p class="tile-desc">API reference and CMS bibliography browser</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="hdr-badge data">DATA</span>
|
|
<span class="status-dot"></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="hdr-badge data">DATA</span>
|
|
<span class="status-dot"></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="hdr-badge new">NEW</span>
|
|
<span class="status-dot"></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-dot"></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-dot"></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-dot"></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-dot"></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>
|
|
|
|
<div class="ftr">
|
|
MADE WITH <span>♥</span> FOR THE HOMELAB
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
var parts = location.hostname.split('.');
|
|
var base = parts.length > 3 ? parts.slice(1).join('.') : location.hostname;
|
|
document.querySelectorAll('.homelab-dashboard [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>
|
|
{{template "base/footer" .}}
|