Files
homelab-gitops/docs/snarfnet_homelab_topology.html

833 lines
42 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>