833 lines
42 KiB
HTML
833 lines
42 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>SnarfNet Homelab Topology</title>
|
||
<script src="https://www.gstatic.com/antigravity/web/dev/tailwindcss.min.js"></script>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||
|
||
body {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background-color: #0b0f19;
|
||
color: #94a3b8;
|
||
}
|
||
|
||
code, .font-mono {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.card-panel {
|
||
background-color: #0f172a;
|
||
border: 1px solid #1e293b;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.card-inner {
|
||
background-color: #131d33;
|
||
border: 1px solid #1e293b;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.service-pill {
|
||
background-color: #131d33;
|
||
border: 1px solid #1e293b;
|
||
border-radius: 6px;
|
||
transition: all 0.15s ease;
|
||
}
|
||
.service-pill:hover {
|
||
border-color: #38bdf8;
|
||
background-color: #162442;
|
||
}
|
||
|
||
.badge-lan { background-color: #1e3a8a; color: #93c5fd; }
|
||
.badge-wan1 { background-color: #9a3412; color: #fdba74; }
|
||
.badge-wan2 { background-color: #854d0e; color: #fde047; }
|
||
.badge-tailscale { background-color: #164e63; color: #67e8f9; }
|
||
.badge-k8s { background-color: #064e3b; color: #6ee7b7; }
|
||
.badge-hci { background-color: #581c87; color: #d8b4fe; }
|
||
.badge-storage { background-color: #713f12; color: #fde047; }
|
||
.badge-iot { background-color: #134e4a; color: #5eead4; }
|
||
.badge-ha { background-color: #881337; color: #fda4af; }
|
||
|
||
/* Custom connector lines */
|
||
.line-fiber { stroke: #f97316; stroke-width: 2; }
|
||
.line-5g { stroke: #eab308; stroke-width: 2; }
|
||
.line-wired { stroke: #38bdf8; stroke-width: 2; }
|
||
.line-trunk { stroke: #38bdf8; stroke-width: 3.5; }
|
||
.line-dashed { stroke: #64748b; stroke-width: 1.5; stroke-dasharray: 4,4; }
|
||
.line-wifi { stroke: #22c55e; stroke-width: 1.5; stroke-dasharray: 2,4; }
|
||
</style>
|
||
</head>
|
||
<body class="p-6 md:p-8 min-h-screen">
|
||
<div class="max-w-[1560px] mx-auto space-y-6">
|
||
|
||
<!-- TOP HEADER -->
|
||
<div class="flex items-baseline justify-between border-b border-slate-800 pb-3">
|
||
<div class="flex items-center gap-3">
|
||
<h1 class="text-2xl md:text-3xl font-extrabold text-white tracking-tight">Homelab</h1>
|
||
<span class="text-[11px] font-mono px-2 py-0.5 rounded bg-blue-950/80 text-blue-400 border border-blue-800/60 font-semibold">snarfnet.net</span>
|
||
</div>
|
||
<div class="text-xs font-mono text-slate-500">November 2026</div>
|
||
</div>
|
||
|
||
<!-- UPPER GRID: 3 COLUMNS -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-5 items-start">
|
||
|
||
<!-- LEFT COLUMN: NETWORKS & LEGEND (3 cols) -->
|
||
<div class="lg:col-span-3 space-y-4">
|
||
<!-- NETWORKS TABLE -->
|
||
<div class="card-panel p-4">
|
||
<h2 class="text-xs uppercase font-bold text-slate-400 tracking-wider mb-3 flex items-center justify-between">
|
||
<span>Networks</span>
|
||
<span class="text-[10px] font-mono text-slate-500">VLANs & Subnets</span>
|
||
</h2>
|
||
<div class="space-y-2 text-xs font-mono">
|
||
<div class="flex items-center justify-between p-2 rounded card-inner">
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-1.5 py-0.5 text-[10px] rounded badge-lan font-bold">LAN</span>
|
||
<span class="text-slate-300 font-sans text-xs">Core & Gateway</span>
|
||
</div>
|
||
<span class="text-slate-400 text-[11px]">14.44.4.0/25</span>
|
||
</div>
|
||
<div class="flex items-center justify-between p-2 rounded card-inner">
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-1.5 py-0.5 text-[10px] rounded badge-wan1 font-bold">WAN 1</span>
|
||
<span class="text-slate-300 font-sans text-xs">Fiber ONT</span>
|
||
</div>
|
||
<span class="text-slate-400 text-[11px]">174.106.252.0/24</span>
|
||
</div>
|
||
<div class="flex items-center justify-between p-2 rounded card-inner">
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-1.5 py-0.5 text-[10px] rounded badge-wan2 font-bold">WAN 2</span>
|
||
<span class="text-slate-300 font-sans text-xs">5G Backup</span>
|
||
</div>
|
||
<span class="text-slate-400 text-[11px]">192.168.225.0/24</span>
|
||
</div>
|
||
<div class="flex items-center justify-between p-2 rounded card-inner">
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-1.5 py-0.5 text-[10px] rounded badge-k8s font-bold">VLAN 20</span>
|
||
<span class="text-slate-300 font-sans text-xs">Compute Fleet</span>
|
||
</div>
|
||
<span class="text-emerald-400 text-[11px]">140.44.4.0/25</span>
|
||
</div>
|
||
<div class="flex items-center justify-between p-2 rounded card-inner">
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-1.5 py-0.5 text-[10px] rounded badge-hci font-bold">VLAN 3</span>
|
||
<span class="text-slate-300 font-sans text-xs">Spacedock HCI</span>
|
||
</div>
|
||
<span class="text-purple-400 text-[11px]">140.44.1.0/24</span>
|
||
</div>
|
||
<div class="flex items-center justify-between p-2 rounded card-inner">
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-1.5 py-0.5 text-[10px] rounded badge-storage font-bold">VLAN 40</span>
|
||
<span class="text-slate-300 font-sans text-xs">Storage SAN</span>
|
||
</div>
|
||
<span class="text-amber-400 text-[11px]">14.10.10.0/25</span>
|
||
</div>
|
||
<div class="flex items-center justify-between p-2 rounded card-inner">
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-1.5 py-0.5 text-[10px] rounded badge-iot font-bold">VLAN 50</span>
|
||
<span class="text-slate-300 font-sans text-xs">Smart Home</span>
|
||
</div>
|
||
<span class="text-teal-400 text-[11px]">14.4.4.0/25</span>
|
||
</div>
|
||
<div class="flex items-center justify-between p-2 rounded card-inner">
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-1.5 py-0.5 text-[10px] rounded badge-tailscale font-bold">Tailscale</span>
|
||
<span class="text-slate-300 font-sans text-xs">Mesh Tailnet</span>
|
||
</div>
|
||
<span class="text-cyan-400 text-[11px]">100.64.0.0/10</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LEGEND -->
|
||
<div class="card-panel p-4">
|
||
<h2 class="text-xs uppercase font-bold text-slate-400 tracking-wider mb-2.5">Legend</h2>
|
||
<div class="space-y-2 text-[11px]">
|
||
<div class="flex items-center gap-2.5">
|
||
<span class="w-5 h-0.5 bg-sky-400"></span>
|
||
<span class="text-slate-300">wired link, colored by network</span>
|
||
</div>
|
||
<div class="flex items-center gap-2.5">
|
||
<span class="w-5 h-0.5 bg-amber-400"></span>
|
||
<span class="text-slate-300">internet uplinks (fiber, 5G)</span>
|
||
</div>
|
||
<div class="flex items-center gap-2.5">
|
||
<span class="w-5 border-b border-dotted border-emerald-400"></span>
|
||
<span class="text-slate-300">Wi-Fi (not a cable)</span>
|
||
</div>
|
||
<div class="flex items-center gap-2.5">
|
||
<span class="w-5 border-b border-dashed border-slate-500"></span>
|
||
<span class="text-slate-400">planned / expansion</span>
|
||
</div>
|
||
<div class="flex items-center gap-2.5">
|
||
<span class="w-5 h-1 bg-sky-400 rounded"></span>
|
||
<span class="text-slate-300 font-mono text-[10px]">line width = speed (10G SFP+ vs 1G)</span>
|
||
</div>
|
||
<div class="pt-1 border-t border-slate-800 text-[10px] font-mono text-slate-400 space-y-0.5">
|
||
<div><span class="text-cyan-400">app.snarfnet.net</span> served by Ingress</div>
|
||
<div><span class="text-slate-300">:port</span> published service port</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CENTER COLUMN: INTERNET, ROUTER, ACCESS (6 cols) -->
|
||
<div class="lg:col-span-6 flex flex-col items-center">
|
||
|
||
<!-- INTERNET CLOUD BOX -->
|
||
<div class="card-inner px-5 py-2.5 rounded-full flex items-center gap-2.5 border border-slate-700">
|
||
<svg class="w-4 h-4 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 00-9.78 2.096A4.001 4.001 0 003 15z"/></svg>
|
||
<div class="text-center">
|
||
<div class="text-xs font-bold text-white">Internet</div>
|
||
<div class="text-[10px] font-mono text-slate-400">two independent uplinks</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- UPLINK CONNECTORS SVG -->
|
||
<svg class="w-full h-8" viewBox="0 0 400 32">
|
||
<!-- Left line to Fiber -->
|
||
<line x1="200" y1="0" x2="100" y2="32" class="line-fiber"/>
|
||
<!-- Right line to 5G -->
|
||
<line x1="200" y1="0" x2="300" y2="32" class="line-5g"/>
|
||
</svg>
|
||
|
||
<!-- TWO UPLINK BOXES -->
|
||
<div class="w-full grid grid-cols-2 gap-4 max-w-lg">
|
||
<!-- Fiber ONT -->
|
||
<div class="card-inner p-2.5 rounded border-l-2 border-l-orange-500 text-center">
|
||
<div class="text-[11px] font-bold text-orange-400 flex items-center justify-center gap-1.5">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-orange-400"></span> WAN 1 • Fiber ONT
|
||
</div>
|
||
<div class="text-[10px] font-mono text-slate-300 mt-0.5">1 Gbps Symmetric</div>
|
||
<div class="text-[9px] font-mono text-slate-500">10G SFP+ to UDM-SE</div>
|
||
</div>
|
||
|
||
<!-- 5G Modem -->
|
||
<div class="card-inner p-2.5 rounded border-l-2 border-l-yellow-500 text-center">
|
||
<div class="text-[11px] font-bold text-yellow-400 flex items-center justify-center gap-1.5">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-yellow-400"></span> WAN 2 • 5G Modem
|
||
</div>
|
||
<div class="text-[10px] font-mono text-slate-300 mt-0.5">Cellular Standby</div>
|
||
<div class="text-[9px] font-mono text-slate-500">GbE RJ45 Failover</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LINE DOWN TO ROUTER -->
|
||
<svg class="w-full h-6" viewBox="0 0 400 24">
|
||
<line x1="100" y1="0" x2="200" y2="24" class="line-fiber"/>
|
||
<line x1="300" y1="0" x2="200" y2="24" class="line-5g"/>
|
||
</svg>
|
||
|
||
<!-- MAIN ROUTER BOX (UDM-SE) -->
|
||
<div class="card-panel p-4 w-full border-sky-500/50">
|
||
<div class="flex items-center justify-between pb-2 mb-3 border-b border-slate-800">
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-6 h-6 rounded bg-sky-500/20 text-sky-400 flex items-center justify-center text-xs font-bold">🛡️</div>
|
||
<div>
|
||
<h3 class="text-sm font-bold text-white">UDM-SE <span class="text-slate-400 font-normal">• gateway & router</span></h3>
|
||
<div class="text-[10px] font-mono text-slate-400">14.44.4.1 • UniFi OS v4.1</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono bg-sky-950 text-sky-400 border border-sky-800 px-2 py-0.5 rounded font-semibold">10G SFP+ Backbone</span>
|
||
</div>
|
||
|
||
<!-- ROUTER COLUMNS: HARDWARE, SERVICES, UPLINK POLICIES -->
|
||
<div class="grid grid-cols-3 gap-2.5 text-[10px]">
|
||
<div class="card-inner p-2">
|
||
<div class="text-slate-400 uppercase font-bold text-[9px] mb-1 tracking-wider">Hardware</div>
|
||
<div class="text-slate-300 font-mono space-y-0.5">
|
||
<div>CPU: 4× Cortex-A57 @ 1.7G</div>
|
||
<div>RAM: 4 GB DDR4</div>
|
||
<div>Storage: 128 GB SSD</div>
|
||
<div>Ports: Dual 10G + 8× GbE PoE</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-inner p-2">
|
||
<div class="text-slate-400 uppercase font-bold text-[9px] mb-1 tracking-wider">Services</div>
|
||
<div class="text-slate-300 font-mono space-y-0.5">
|
||
<div>• Suricata IPS/IDS L5</div>
|
||
<div>• WireGuard Server</div>
|
||
<div>• Inter-VLAN L3 Routing</div>
|
||
<div>• Deep Packet Inspection</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-inner p-2">
|
||
<div class="text-slate-400 uppercase font-bold text-[9px] mb-1 tracking-wider">Uplink Policies</div>
|
||
<div class="text-slate-300 font-mono space-y-0.5">
|
||
<div>• WAN 1: Fiber (Primary)</div>
|
||
<div>• WAN 2: 5G (Hot Standby)</div>
|
||
<div>• VLAN 20 Compute Priority</div>
|
||
<div>• Smart Queues FQ-CoDel</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ROUTER DOWNSTREAM LINES -->
|
||
<svg class="w-full h-8" viewBox="0 0 500 32">
|
||
<!-- Branch left to Wi-Fi -->
|
||
<path d="M 250,0 L 250,14 L 110,14 L 110,32" fill="none" class="line-wifi"/>
|
||
<!-- Branch right to USW Core Switch -->
|
||
<path d="M 250,0 L 250,14 L 390,14 L 390,32" fill="none" class="line-wired"/>
|
||
<!-- Main trunk line down to Homelab Fabric -->
|
||
<line x1="250" y1="0" x2="250" y2="32" class="line-trunk"/>
|
||
</svg>
|
||
|
||
<!-- DOWNSTREAM BRANCH CARDS -->
|
||
<div class="w-full grid grid-cols-2 gap-4 max-w-lg mb-2">
|
||
<!-- Wi-Fi Clients -->
|
||
<div class="card-inner p-2.5 rounded border border-emerald-500/30 text-center">
|
||
<div class="text-[11px] font-bold text-emerald-400 flex items-center justify-center gap-1">
|
||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"/></svg>
|
||
Wi-Fi clients • wireless
|
||
</div>
|
||
<div class="text-[10px] text-slate-300 mt-0.5">U6-Enterprise & U6-Pro APs</div>
|
||
<div class="text-[9px] font-mono text-slate-500">Phones, Laptops, Smart TV, IoT</div>
|
||
</div>
|
||
|
||
<!-- Core Switching -->
|
||
<div class="card-inner p-2.5 rounded border border-sky-500/30 text-center">
|
||
<div class="text-[11px] font-bold text-sky-400 flex items-center justify-center gap-1">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-sky-400"></span> Core Switch • 2.5G/10G
|
||
</div>
|
||
<div class="text-[10px] text-slate-300 mt-0.5">USW-Enterprise-24-PoE</div>
|
||
<div class="text-[9px] font-mono text-slate-500">10G SFP+ Uplink to Fleet</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DOWN ARROW INTO FABRIC -->
|
||
<svg class="w-8 h-6" viewBox="0 0 32 24">
|
||
<line x1="16" y1="0" x2="16" y2="18" class="line-trunk"/>
|
||
<polygon points="11,16 16,23 21,16" fill="#38bdf8"/>
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<!-- RIGHT COLUMN: WAYS IN, MEDIA PIPELINE, RELIES ON (3 cols) -->
|
||
<div class="lg:col-span-3 space-y-4">
|
||
<!-- WAYS IN FROM OUTSIDE -->
|
||
<div class="card-panel p-4">
|
||
<h2 class="text-xs uppercase font-bold text-slate-400 tracking-wider mb-2.5 flex items-center justify-between">
|
||
<span>Ways in from outside</span>
|
||
<span class="text-[9px] font-mono text-emerald-400">Zero Open Ports</span>
|
||
</h2>
|
||
<div class="space-y-2 text-xs font-mono">
|
||
<div class="p-2 rounded card-inner">
|
||
<div class="flex items-center justify-between text-slate-200 text-xs font-sans font-semibold">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="w-2 h-2 rounded-full bg-cyan-400"></span> Cloudflare Tunnel
|
||
</div>
|
||
<span class="text-[10px] text-cyan-400 font-mono">HTTPS</span>
|
||
</div>
|
||
<div class="text-[10px] text-slate-400 mt-1">*.snarfnet.net (Zero Inbound Ports)</div>
|
||
<div class="text-[9px] text-slate-500">Edge DDoS & WAF Protection</div>
|
||
</div>
|
||
|
||
<div class="p-2 rounded card-inner">
|
||
<div class="flex items-center justify-between text-slate-200 text-xs font-sans font-semibold">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="w-2 h-2 rounded-full bg-indigo-400"></span> Tailscale & WireGuard
|
||
</div>
|
||
<span class="text-[10px] text-indigo-400 font-mono">Tailnet</span>
|
||
</div>
|
||
<div class="text-[10px] text-slate-400 mt-1">100.64.0.0/10 • Mesh Interconnect</div>
|
||
<div class="text-[9px] text-slate-500">Direct Admin Subnet Route</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GITOPS & MEDIA PIPELINE FLOW -->
|
||
<div class="card-panel p-4">
|
||
<h2 class="text-xs uppercase font-bold text-slate-400 tracking-wider mb-2.5">GitOps & CI/CD Pipeline</h2>
|
||
<div class="space-y-2 text-[10px] font-mono">
|
||
<!-- Stage 1 -->
|
||
<div class="flex items-center justify-between p-1.5 rounded card-inner">
|
||
<span class="text-purple-400 font-bold">1. Author</span>
|
||
<span class="text-slate-300 font-sans">Developer Commit</span>
|
||
<span class="text-slate-500">git push</span>
|
||
</div>
|
||
<!-- Down Arrow -->
|
||
<div class="text-center text-slate-600 -my-1">↓</div>
|
||
<!-- Stage 2 -->
|
||
<div class="flex items-center justify-between p-1.5 rounded card-inner">
|
||
<span class="text-blue-400 font-bold">2. Repository</span>
|
||
<span class="text-slate-300 font-sans">Gitea Webhook</span>
|
||
<span class="text-slate-400">git.snarfnet.net</span>
|
||
</div>
|
||
<!-- Down Arrow -->
|
||
<div class="text-center text-slate-600 -my-1">↓</div>
|
||
<!-- Stage 3 -->
|
||
<div class="flex items-center justify-between p-1.5 rounded card-inner border-l-2 border-l-cyan-400">
|
||
<span class="text-cyan-400 font-bold">3. Reconcile</span>
|
||
<span class="text-slate-300 font-sans">Argo CD Sync</span>
|
||
<span class="text-emerald-400">selfHeal: true</span>
|
||
</div>
|
||
<!-- Down Arrow -->
|
||
<div class="text-center text-slate-600 -my-1">↓</div>
|
||
<!-- Stage 4 -->
|
||
<div class="flex items-center justify-between p-1.5 rounded card-inner">
|
||
<span class="text-emerald-400 font-bold">4. Target</span>
|
||
<span class="text-slate-300 font-sans">Aerodrome & Spaceport</span>
|
||
<span class="text-slate-400">K3s Deploy</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- OUTSIDE SERVICES -->
|
||
<div class="card-panel p-4">
|
||
<h2 class="text-xs uppercase font-bold text-slate-400 tracking-wider mb-2">Outside services it relies on</h2>
|
||
<div class="flex flex-wrap gap-1.5 text-[10px] font-mono">
|
||
<span class="px-2 py-0.5 rounded card-inner text-slate-300 border border-slate-700">Cloudflare</span>
|
||
<span class="px-2 py-0.5 rounded card-inner text-slate-300 border border-slate-700">GitHub</span>
|
||
<span class="px-2 py-0.5 rounded card-inner text-slate-300 border border-slate-700">Let's Encrypt</span>
|
||
<span class="px-2 py-0.5 rounded card-inner text-slate-300 border border-slate-700">Docker Hub</span>
|
||
<span class="px-2 py-0.5 rounded card-inner text-slate-300 border border-slate-700">Tailscale DERP</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- MAIN BOTTOM CONTAINER: SNARFNET COMPUTE & STORAGE FABRIC -->
|
||
<div class="card-panel p-5 border-sky-500/40 relative">
|
||
|
||
<!-- CONTAINER HEADER -->
|
||
<div class="flex flex-col md:flex-row md:items-center justify-between pb-3 mb-4 border-b border-slate-800 gap-2">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded-lg bg-sky-500/20 text-sky-400 border border-sky-500/40 flex items-center justify-center font-bold text-sm">⚡</div>
|
||
<div>
|
||
<h2 class="text-base font-bold text-white tracking-tight flex items-center gap-2">
|
||
snarfnet <span class="text-slate-400 font-normal">• core infrastructure fabric</span>
|
||
</h2>
|
||
<div class="text-[11px] font-mono text-slate-400">4 Clusters • 50+ Containers & Pods • Reconciled Declaratively via GitOps</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-2 text-xs font-mono">
|
||
<span class="px-2 py-0.5 rounded bg-emerald-950 text-emerald-400 border border-emerald-800">15/15 Argo Apps Synced</span>
|
||
<span class="px-2 py-0.5 rounded bg-sky-950 text-sky-400 border border-sky-800">Uptime Kuma: 35 Probes</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SPLIT: LEFT HARDWARE & STORAGE BARS | RIGHT SERVICE COLUMNS -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-5">
|
||
|
||
<!-- LEFT SUB-PANEL: HARDWARE SPECS, STORAGE BARS, HOST RUNTIME (4 cols) -->
|
||
<div class="lg:col-span-4 space-y-4">
|
||
|
||
<!-- HARDWARE NODES -->
|
||
<div class="card-inner p-3">
|
||
<div class="text-[10px] uppercase font-bold text-slate-400 tracking-wider mb-2 flex items-center gap-1.5">
|
||
<svg class="w-3.5 h-3.5 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/></svg>
|
||
Hardware Nodes
|
||
</div>
|
||
<div class="space-y-2 text-[11px] font-mono">
|
||
<div class="p-1.5 rounded bg-slate-900/80 border border-slate-800/80">
|
||
<div class="text-slate-200 font-bold flex justify-between">
|
||
<span>Aerodrome (k3s Master)</span>
|
||
<span class="text-emerald-400 font-normal">140.44.4.11</span>
|
||
</div>
|
||
<div class="text-slate-400 text-[10px]">AMD EPYC • 64 GiB DDR4 • Dual 10GbE SFP+</div>
|
||
<div class="text-cyan-400 text-[10px]">NVIDIA RTX 3060 12GB (Tensor AI Core)</div>
|
||
</div>
|
||
|
||
<div class="p-1.5 rounded bg-slate-900/80 border border-slate-800/80">
|
||
<div class="text-slate-200 font-bold flex justify-between">
|
||
<span>Spaceport (k3s Worker)</span>
|
||
<span class="text-emerald-400 font-normal">140.44.4.41</span>
|
||
</div>
|
||
<div class="text-slate-400 text-[10px]">Intel Core i7 • 32 GiB DDR4 • Dual 2.5GbE</div>
|
||
</div>
|
||
|
||
<div class="p-1.5 rounded bg-slate-900/80 border border-slate-800/80">
|
||
<div class="text-slate-200 font-bold flex justify-between">
|
||
<span>Spacedock (Harvester HCI)</span>
|
||
<span class="text-purple-400 font-normal">140.44.1.0/24</span>
|
||
</div>
|
||
<div class="text-slate-400 text-[10px]">Multi-Node Hypervisors • 128 GiB RAM • Ceph</div>
|
||
</div>
|
||
|
||
<div class="p-1.5 rounded bg-slate-900/80 border border-slate-800/80">
|
||
<div class="text-slate-200 font-bold flex justify-between">
|
||
<span>Shipyard (Docker Swarm)</span>
|
||
<span class="text-amber-400 font-normal">140.44.4.15</span>
|
||
</div>
|
||
<div class="text-slate-400 text-[10px]">Container Fleet • 32 GiB RAM • GbE</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- STORAGE CAPACITY USAGE BARS -->
|
||
<div class="card-inner p-3">
|
||
<div class="text-[10px] uppercase font-bold text-slate-400 tracking-wider mb-2 flex items-center gap-1.5">
|
||
<svg class="w-3.5 h-3.5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2 1.5 3 3.5 3h9c2 0 3.5-1 3.5-3V7c0-2-1.5-3-3.5-3h-9C5.5 4 4 5 4 7zm0 5h16M4 11h16"/></svg>
|
||
Storage Array Pools
|
||
</div>
|
||
|
||
<div class="space-y-3 text-[11px] font-mono">
|
||
<!-- Pool 1: Flash NVMe -->
|
||
<div>
|
||
<div class="flex justify-between text-[10px] mb-1">
|
||
<span class="text-slate-200 font-bold">TrueNAS ZFS Flash Pool</span>
|
||
<span class="text-slate-400">4.2 / 8.0 TiB (52%)</span>
|
||
</div>
|
||
<div class="w-full h-2 rounded bg-slate-800 overflow-hidden">
|
||
<div class="h-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded" style="width: 52%"></div>
|
||
</div>
|
||
<div class="text-[9px] text-slate-500 mt-0.5">NVMe Mirror • High-IOPS Databases & Volumes</div>
|
||
</div>
|
||
|
||
<!-- Pool 2: Bulk HDD -->
|
||
<div>
|
||
<div class="flex justify-between text-[10px] mb-1">
|
||
<span class="text-slate-200 font-bold">SnarfNAS Bulk Storage</span>
|
||
<span class="text-slate-400">28.5 / 64.0 TiB (44%)</span>
|
||
</div>
|
||
<div class="w-full h-2 rounded bg-slate-800 overflow-hidden">
|
||
<div class="h-full bg-gradient-to-r from-amber-500 to-orange-500 rounded" style="width: 44%"></div>
|
||
</div>
|
||
<div class="text-[9px] text-slate-500 mt-0.5">HDD RAID-Z2 • Media Library & Long-term Backups</div>
|
||
</div>
|
||
|
||
<!-- Pool 3: Longhorn SAN -->
|
||
<div>
|
||
<div class="flex justify-between text-[10px] mb-1">
|
||
<span class="text-slate-200 font-bold">Longhorn Distributed SAN</span>
|
||
<span class="text-slate-400">850 GiB / 2.0 TiB (42%)</span>
|
||
</div>
|
||
<div class="w-full h-2 rounded bg-slate-800 overflow-hidden">
|
||
<div class="h-full bg-gradient-to-r from-purple-500 to-indigo-500 rounded" style="width: 42%"></div>
|
||
</div>
|
||
<div class="text-[9px] text-slate-500 mt-0.5">Cross-Cluster Block Replicated Volumes</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RUNS ON THE HOST -->
|
||
<div class="card-inner p-3">
|
||
<div class="text-[10px] uppercase font-bold text-slate-400 tracking-wider mb-1.5">Runs on Host Fabric</div>
|
||
<div class="grid grid-cols-2 gap-1.5 text-[10px] font-mono text-slate-300">
|
||
<div class="p-1 rounded bg-slate-900 border border-slate-800">• K3s v1.28 Engine</div>
|
||
<div class="p-1 rounded bg-slate-900 border border-slate-800">• Harvester v1.3 HCI</div>
|
||
<div class="p-1 rounded bg-slate-900 border border-slate-800">• Docker Swarm v24</div>
|
||
<div class="p-1 rounded bg-slate-900 border border-slate-800">• Keepalived VRRP</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- RIGHT SUB-PANEL: MICRO SERVICE CARDS IN 6 COLUMNS (8 cols) -->
|
||
<div class="lg:col-span-8">
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
|
||
|
||
<!-- COL 1: EDGE & INGRESS -->
|
||
<div class="space-y-2">
|
||
<div class="text-[10px] uppercase font-bold text-sky-400 tracking-wider px-1">Edge & Ingress</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-orange-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">NGINX Proxy Mgr</div>
|
||
<div class="text-[10px] text-slate-400">Reverse Proxy & SSL</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:81</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-red-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Authentik SSO</div>
|
||
<div class="text-[10px] text-slate-400">Identity & MFA RBAC</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:9000</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-cyan-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Cloudflare Tunnel</div>
|
||
<div class="text-[10px] text-slate-400">Zero-Trust Ingress</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">HTTPS</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-rose-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Keepalived VIP</div>
|
||
<div class="text-[10px] text-slate-400">HA VRRP Virtual IP</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">.10</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- COL 2: GITOPS & AUTOMATION -->
|
||
<div class="space-y-2">
|
||
<div class="text-[10px] uppercase font-bold text-purple-400 tracking-wider px-1">GitOps & Automation</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-red-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Argo CD</div>
|
||
<div class="text-[10px] text-slate-400">Declarative GitOps</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-emerald-400">Synced</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-emerald-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Gitea Repos</div>
|
||
<div class="text-[10px] text-slate-400">Git Repositories</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:3000</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-blue-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">AWX Automation</div>
|
||
<div class="text-[10px] text-slate-400">Ansible Playbooks</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:8052</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-sky-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Semaphore UI</div>
|
||
<div class="text-[10px] text-slate-400">Playbook Runner</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:3001</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- COL 3: OBSERVABILITY -->
|
||
<div class="space-y-2">
|
||
<div class="text-[10px] uppercase font-bold text-amber-400 tracking-wider px-1">Observability</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-orange-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Grafana Analytics</div>
|
||
<div class="text-[10px] text-slate-400">Metrics & Dashboards</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:3000</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-emerald-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Uptime Kuma</div>
|
||
<div class="text-[10px] text-slate-400">Status & Multi-Heartbeat</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">35 Probes</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-red-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Zabbix Fleet</div>
|
||
<div class="text-[10px] text-slate-400">Hardware & SNMP Alarms</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:8080</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-amber-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">PeaNUT UPS</div>
|
||
<div class="text-[10px] text-slate-400">Battery & Power Telemetry</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:3493</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- COL 4: STORAGE & PLATFORM -->
|
||
<div class="space-y-2">
|
||
<div class="text-[10px] uppercase font-bold text-indigo-400 tracking-wider px-1">Storage & Platform</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-purple-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Longhorn Aerodrome</div>
|
||
<div class="text-[10px] text-slate-400">Distributed NVMe Flash</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">SAN</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-purple-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Longhorn Spaceport</div>
|
||
<div class="text-[10px] text-slate-400">Distributed Storage</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">SAN</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-blue-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Rancher Manager</div>
|
||
<div class="text-[10px] text-slate-400">K8s Multi-Cluster Ops</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">HTTPS</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-emerald-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Homepage Dashboard</div>
|
||
<div class="text-[10px] text-slate-400">Unified Operations Hub</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:3000</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- COL 5: AI & ACCELERATED COMPUTE -->
|
||
<div class="space-y-2">
|
||
<div class="text-[10px] uppercase font-bold text-emerald-400 tracking-wider px-1">AI & Inference Fabric</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-white"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Ollama Engine</div>
|
||
<div class="text-[10px] text-slate-400">Local LLM Acceleration</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:11434</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-cyan-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Open-WebUI</div>
|
||
<div class="text-[10px] text-slate-400">Multi-Model AI Chat</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:8080</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-green-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">NVIDIA DCGM</div>
|
||
<div class="text-[10px] text-slate-400">GPU VRAM & Telemetry</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:9400</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-teal-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Glances Monitor</div>
|
||
<div class="text-[10px] text-slate-400">Live Host Metric Stream</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:61208</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- COL 6: SMART HOME & ENVIRONMENT -->
|
||
<div class="space-y-2">
|
||
<div class="text-[10px] uppercase font-bold text-teal-400 tracking-wider px-1">Smart Home & Environment</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-blue-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Home Assistant</div>
|
||
<div class="text-[10px] text-slate-400">Home Automation Core</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:8123</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-sky-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Tempest Weather</div>
|
||
<div class="text-[10px] text-slate-400">Backyard Sensor Array</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">UDP/API</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-blue-500"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">UniFi Controller</div>
|
||
<div class="text-[10px] text-slate-400">WLAN & Switching SDN</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:8443</span>
|
||
</div>
|
||
|
||
<div class="service-pill p-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-indigo-400"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-white">Portainer Swarm</div>
|
||
<div class="text-[10px] text-slate-400">Container Management</div>
|
||
</div>
|
||
</div>
|
||
<span class="text-[10px] font-mono text-slate-500">:9000</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html> |