docs: add snarfnet homelab topology diagram html and static png

This commit is contained in:
2026-11-12 14:55:23 -05:00
parent 911dfd2200
commit 8b8fdeaf51
2 changed files with 981 additions and 0 deletions

View File

@@ -0,0 +1,981 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SnarfNet Homelab Architecture & 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;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
body {
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
background-color: #080c14;
color: #e2e8f0;
background-image:
radial-gradient(circle at 50% 0%, rgba(30, 58, 138, 0.15) 0%, transparent 60%),
radial-gradient(#1e293b 1px, transparent 1px);
background-size: 100% 100%, 24px 24px;
}
code, .font-mono {
font-family: 'JetBrains Mono', monospace;
}
.glass-card {
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(51, 65, 85, 0.5);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.glass-card-subtle {
background: rgba(30, 41, 59, 0.45);
border: 1px solid rgba(71, 85, 105, 0.4);
}
.badge-glow-green {
box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}
.badge-glow-blue {
box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}
.badge-glow-purple {
box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}
.badge-glow-amber {
box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #0b1120;
}
::-webkit-scrollbar-thumb {
background: #334155;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #475569;
}
</style>
</head>
<body class="p-6 md:p-10 min-h-screen">
<!-- TOP HEADER & CONTROLS -->
<header class="max-w-[1720px] mx-auto mb-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 pb-6 border-b border-slate-800/80">
<div>
<div class="flex items-center gap-3 mb-2">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-blue-600/20 border border-blue-500/40 text-blue-400 font-bold text-lg">🪐</span>
<h1 class="text-3xl font-extrabold tracking-tight text-white flex items-center gap-3">
SnarfNet <span class="text-blue-400 font-medium text-xl">| Infrastructure & Topology</span>
</h1>
<span class="px-2.5 py-1 text-xs font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 rounded-full badge-glow-green flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span> ALL CLUSTERS ACTIVE
</span>
</div>
<p class="text-slate-400 text-sm max-w-2xl">
Complete operational schematic mapping dual-WAN routing, VLAN segmentation, 4 compute clusters (Aerodrome, Spaceport, Spacedock, Shipyard), AI inference fabrics, and storage layers.
</p>
</div>
<!-- Quick Filter / Interactive Search -->
<div class="flex flex-wrap items-center gap-3">
<div class="relative w-72">
<input type="text" id="filterInput" onkeyup="filterTopology()" placeholder="Search services, nodes, IPs..."
class="w-full bg-slate-900/90 border border-slate-700/80 rounded-lg px-3.5 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition">
<span class="absolute right-3 top-2.5 text-xs text-slate-500 font-mono">⌘K</span>
</div>
<button onclick="resetFilter()" class="px-3.5 py-2 text-xs font-medium bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg border border-slate-700 transition">
Reset View
</button>
<div class="text-right pl-3 border-l border-slate-800">
<div class="text-xs text-slate-500 uppercase tracking-wider font-semibold">Topology Release</div>
<div class="text-sm font-mono text-slate-300">Phase 8 • Nov 2026</div>
</div>
</div>
</header>
<!-- MAIN TOPOLOGY GRID -->
<main class="max-w-[1720px] mx-auto space-y-8">
<!-- TOP SECTION: NETWORKS, EDGE WAN & INGRESS WAYS -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
<!-- LEFT: NETWORKS & VLANS (3 cols) -->
<div class="lg:col-span-3 space-y-6">
<div class="glass-card rounded-2xl p-5 border-l-4 border-l-blue-500">
<div class="flex items-center justify-between mb-4">
<h2 class="text-sm uppercase tracking-wider font-bold text-slate-300 flex items-center gap-2">
<svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
Network VLAN Fabric
</h2>
<span class="text-xs font-mono bg-blue-500/10 text-blue-400 px-2 py-0.5 rounded border border-blue-500/20">8 Zones</span>
</div>
<div class="space-y-2.5 text-xs font-mono">
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-slate-800 flex items-center justify-between hover:border-slate-700 transition">
<div>
<span class="text-blue-400 font-bold">VLAN 1</span> <span class="text-slate-300 font-sans ml-1">LAN / Core</span>
<div class="text-slate-500 font-mono text-[11px]">UDM-SE Gateway, Core Switches</div>
</div>
<span class="text-slate-400 font-semibold">14.44.4.0/25</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-slate-800 flex items-center justify-between hover:border-slate-700 transition">
<div>
<span class="text-indigo-400 font-bold">VLAN 2</span> <span class="text-slate-300 font-sans ml-1">Management</span>
<div class="text-slate-500 font-mono text-[11px]">APs, USP RPS, iDRAC, Switches</div>
</div>
<span class="text-slate-400 font-semibold">140.44.44.0/24</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-emerald-500/40 bg-emerald-950/10 flex items-center justify-between hover:border-emerald-500 transition">
<div>
<span class="text-emerald-400 font-bold">VLAN 20</span> <span class="text-slate-200 font-sans ml-1">Compute Fleet</span>
<div class="text-slate-400 font-mono text-[11px]">K3s Aerodrome, Spaceport, Swarm</div>
</div>
<span class="text-emerald-400 font-bold">140.44.4.0/25</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-purple-500/40 bg-purple-950/10 flex items-center justify-between hover:border-purple-500 transition">
<div>
<span class="text-purple-400 font-bold">VLAN 3</span> <span class="text-slate-200 font-sans ml-1">Spacedock Lab</span>
<div class="text-slate-400 font-mono text-[11px]">Harvester HCI Virtualization</div>
</div>
<span class="text-purple-400 font-bold">140.44.1.0/24</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-slate-800 flex items-center justify-between hover:border-slate-700 transition">
<div>
<span class="text-amber-400 font-bold">VLAN 40</span> <span class="text-slate-300 font-sans ml-1">Storage SAN</span>
<div class="text-slate-500 font-mono text-[11px]">SnarfNAS, SN-NAS TrueNAS</div>
</div>
<span class="text-slate-400 font-semibold">14.10.10.0/25</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-slate-800 flex items-center justify-between hover:border-slate-700 transition">
<div>
<span class="text-teal-400 font-bold">VLAN 50</span> <span class="text-slate-300 font-sans ml-1">Smart Home</span>
<div class="text-slate-500 font-mono text-[11px]">Home Assistant, NUT, Tempest</div>
</div>
<span class="text-slate-400 font-semibold">14.4.4.0/25</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-slate-800 flex items-center justify-between hover:border-slate-700 transition">
<div>
<span class="text-rose-400 font-bold">VLAN 60</span> <span class="text-slate-300 font-sans ml-1">HA Interconnect</span>
<div class="text-slate-500 font-mono text-[11px]">Keepalived VIPs & Sync Heartbeats</div>
</div>
<span class="text-slate-400 font-semibold">140.4.4.0/25</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/60 border border-slate-800 flex items-center justify-between hover:border-slate-700 transition">
<div>
<span class="text-cyan-400 font-bold">VLAN 30</span> <span class="text-slate-300 font-sans ml-1">Media Clients</span>
<div class="text-slate-500 font-mono text-[11px]">Smart TVs, Apple TVs, Streaming</div>
</div>
<span class="text-slate-400 font-semibold">192.168.1.0/25</span>
</div>
</div>
</div>
<!-- LEGEND & COLOR CODE -->
<div class="glass-card rounded-2xl p-5 border border-slate-800/80">
<h3 class="text-xs uppercase tracking-wider font-bold text-slate-400 mb-3">Topology Key</h3>
<div class="grid grid-cols-2 gap-2 text-xs">
<div class="flex items-center gap-2 text-slate-300">
<span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span> Core Backbone
</div>
<div class="flex items-center gap-2 text-slate-300">
<span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span> K3s Compute
</div>
<div class="flex items-center gap-2 text-slate-300">
<span class="w-2.5 h-2.5 rounded-full bg-purple-500"></span> Harvester HCI
</div>
<div class="flex items-center gap-2 text-slate-300">
<span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span> Swarm Fleet
</div>
<div class="flex items-center gap-2 text-slate-300">
<span class="w-2.5 h-2.5 rounded-full bg-cyan-400"></span> Cloudflare / Tunnel
</div>
<div class="flex items-center gap-2 text-slate-300">
<span class="w-2.5 h-2.5 rounded-full bg-rose-500"></span> High Availability
</div>
</div>
</div>
</div>
<!-- CENTER: INTERNET, DUAL WAN, UDM-SE GATEWAY (6 cols) -->
<div class="lg:col-span-6 space-y-6">
<!-- INTERNET CLOUD -->
<div class="flex flex-col items-center">
<div class="glass-card px-6 py-3 rounded-full border border-blue-500/30 flex items-center gap-3 bg-blue-950/20">
<svg class="w-6 h-6 text-blue-400 animate-pulse" 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"></path></svg>
<div class="text-center">
<div class="text-sm font-bold text-white tracking-wide">Public Internet</div>
<div class="text-[11px] font-mono text-slate-400">Primary WAN: 174.106.252.96</div>
</div>
</div>
<!-- DUAL WAN FEED PIPES -->
<div class="w-full grid grid-cols-2 gap-4 mt-4 px-8">
<!-- Fiber Uplink -->
<div class="glass-card-subtle p-3 rounded-xl border-t-2 border-t-cyan-500 text-center">
<div class="flex items-center justify-center gap-1.5 text-cyan-400 text-xs font-bold">
<span class="w-2 h-2 rounded-full bg-cyan-400"></span> WAN 1: Fiber ONT
</div>
<div class="text-xs text-slate-300 mt-0.5 font-mono">1 Gbps Symmetric</div>
<div class="text-[11px] text-slate-500 font-mono">10G SFP+ to UDM-SE</div>
</div>
<!-- 5G Failover Uplink -->
<div class="glass-card-subtle p-3 rounded-xl border-t-2 border-t-amber-500 text-center">
<div class="flex items-center justify-center gap-1.5 text-amber-400 text-xs font-bold">
<span class="w-2 h-2 rounded-full bg-amber-400"></span> WAN 2: 5G Backup
</div>
<div class="text-xs text-slate-300 mt-0.5 font-mono">Cellular Standby</div>
<div class="text-[11px] text-slate-500 font-mono">GbE RJ45 Failover</div>
</div>
</div>
<!-- DOWN ARROW SVG -->
<div class="text-slate-600 my-1">
<svg class="w-5 h-5 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
</div>
</div>
<!-- UDM-SE GATEWAY -->
<div class="glass-card rounded-2xl p-6 border border-blue-500/40 relative overflow-hidden">
<div class="absolute -right-8 -top-8 w-32 h-32 bg-blue-500/10 rounded-full blur-2xl pointer-events-none"></div>
<div class="flex flex-col md:flex-row md:items-center justify-between pb-4 mb-4 border-b border-slate-800 gap-3">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-blue-600/20 border border-blue-500/30 flex items-center justify-center text-blue-400 font-bold">
🛡️
</div>
<div>
<h3 class="text-lg font-bold text-white flex items-center gap-2">
UniFi Dream Machine Special Edition (UDM-SE)
</h3>
<div class="text-xs font-mono text-slate-400">Gateway VIP: 14.44.4.1 • UniFi OS v4.1 • WireGuard Server</div>
</div>
</div>
<div class="flex items-center gap-2">
<span class="px-2.5 py-1 text-xs font-mono bg-blue-500/10 text-blue-400 border border-blue-500/30 rounded-md">
10G SFP+ Backbone
</span>
</div>
</div>
<!-- GATEWAY SUBSYSTEMS & POLICIES -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
<div class="p-3 rounded-xl bg-slate-900/60 border border-slate-800">
<div class="text-slate-400 font-semibold mb-1 flex items-center gap-1.5">
<span class="text-blue-400">⚡</span> Routing & QoS
</div>
<ul class="text-slate-300 space-y-1 font-mono text-[11px]">
<li>• Inter-VLAN Wire-Speed L3</li>
<li>• Smart Queues & FQ-CoDel</li>
<li>• VLAN 20 Compute Priority</li>
</ul>
</div>
<div class="p-3 rounded-xl bg-slate-900/60 border border-slate-800">
<div class="text-slate-400 font-semibold mb-1 flex items-center gap-1.5">
<span class="text-emerald-400">🔒</span> Edge Security
</div>
<ul class="text-slate-300 space-y-1 font-mono text-[11px]">
<li>• Suricata IPS/IDS Level 5</li>
<li>• Deep Packet Inspection</li>
<li>• Strict LAN/IoT Isolation</li>
</ul>
</div>
<div class="p-3 rounded-xl bg-slate-900/60 border border-slate-800">
<div class="text-slate-400 font-semibold mb-1 flex items-center gap-1.5">
<span class="text-purple-400">🎯</span> Core Port Forwards
</div>
<ul class="text-slate-300 space-y-1 font-mono text-[11px]">
<li>• 80/443 → 140.44.4.74 (NPM Host)</li>
<li>• 10051/52 → 140.44.4.51 (Zabbix)</li>
<li>• 8443/27015 → 14.4.4.15 (PC)</li>
</ul>
</div>
</div>
</div>
<!-- SWITCHING & WI-FI DISTRIBUTION -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="glass-card-subtle p-4 rounded-xl border border-slate-800 flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-slate-800 flex items-center justify-center text-slate-300">🔀</div>
<div>
<div class="text-xs font-bold text-slate-200">USW Enterprise Core Switches</div>
<div class="text-[11px] font-mono text-slate-400">2.5G PoE+ to APs, 10G SFP+ to Racks</div>
</div>
</div>
<div class="glass-card-subtle p-4 rounded-xl border border-slate-800 flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-slate-800 flex items-center justify-center text-slate-300">📶</div>
<div>
<div class="text-xs font-bold text-slate-200">UniFi Wi-Fi 6 Enterprise Fleet</div>
<div class="text-[11px] font-mono text-slate-400">SSIDs: SnarfNet-IoT, SnarfNet-5G, Trusted</div>
</div>
</div>
</div>
</div>
<!-- RIGHT: WAYS IN FROM OUTSIDE & AI/MEDIA PIPELINE (3 cols) -->
<div class="lg:col-span-3 space-y-6">
<!-- WAYS IN FROM OUTSIDE -->
<div class="glass-card rounded-2xl p-5 border-l-4 border-l-cyan-500">
<h2 class="text-sm uppercase tracking-wider font-bold text-slate-300 mb-3 flex items-center gap-2">
<svg class="w-4 h-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
Edge Access & Ingress
</h2>
<div class="space-y-3 text-xs">
<div class="p-3 rounded-xl bg-slate-900/60 border border-slate-800">
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
<span class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-cyan-400"></span> Cloudflare Zero Trust</span>
<span class="font-mono text-[11px] text-cyan-400">cloudflared</span>
</div>
<p class="text-slate-400 text-[11px]">Outbound-only secure tunnel routes *.snarfnet.net without opening inbound WAN router ports.</p>
</div>
<div class="p-3 rounded-xl bg-slate-900/60 border border-slate-800">
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
<span class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-indigo-400"></span> Tailscale Mesh VPN</span>
<span class="font-mono text-[11px] text-indigo-400">100.64.0.0/10</span>
</div>
<p class="text-slate-400 text-[11px]">Subnet routers provide direct wireguard access to all 8 VLANs from mobile devices.</p>
</div>
<div class="p-3 rounded-xl bg-slate-900/60 border border-emerald-500/30 bg-emerald-950/10">
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
<span class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-emerald-400"></span> Authentik Conditional MFA</span>
<span class="font-mono text-[11px] text-emerald-400">SSO & Auth</span>
</div>
<p class="text-slate-300 text-[11px]">Client IP evaluation: Internal VLANs bypass MFA for frictionless use; external WAN enforces Passkeys/MFA.</p>
</div>
</div>
</div>
<!-- AI PIPELINE MINI-SCHEMATIC -->
<div class="glass-card rounded-2xl p-5 border border-purple-500/30 bg-purple-950/10">
<div class="flex items-center justify-between mb-3">
<h3 class="text-xs uppercase tracking-wider font-bold text-purple-300 flex items-center gap-1.5">
<span>🧠</span> AI Inference Pipeline
</h3>
<span class="text-[10px] font-mono text-purple-400 bg-purple-500/20 px-2 py-0.5 rounded">Tesla T4s + Hailo</span>
</div>
<div class="space-y-2 text-xs font-mono">
<div class="p-2 rounded bg-slate-900/80 border border-purple-500/20 flex items-center justify-between">
<span class="text-slate-300 font-sans">1. Frontend</span>
<span class="text-purple-300 font-bold">Open WebUI (:8080)</span>
</div>
<div class="text-center text-slate-600 text-xs">↓</div>
<div class="p-2 rounded bg-slate-900/80 border border-purple-500/20 flex items-center justify-between">
<span class="text-slate-300 font-sans">2. Reasoning</span>
<span class="text-purple-300 font-bold">vLLM DeepSeek-R1</span>
</div>
<div class="text-center text-slate-600 text-xs">↓</div>
<div class="p-2 rounded bg-slate-900/80 border border-purple-500/20 flex items-center justify-between">
<span class="text-slate-300 font-sans">3. Execution</span>
<span class="text-purple-300 font-bold">Triton + Qdrant</span>
</div>
</div>
</div>
</div>
</div>
<!-- MAIN COMPUTE CLUSTERS ROW (THE 4 MAJOR CLUSTERS) -->
<div class="space-y-6 pt-4">
<div class="flex items-center justify-between">
<div>
<h2 class="text-xl font-extrabold text-white flex items-center gap-2">
Compute Clusters & Workload Fleet
</h2>
<p class="text-xs text-slate-400">All compute clusters operate on VLAN 20 (140.44.4.0/25) with dedicated VIPs and Longhorn block fabrics.</p>
</div>
<div class="flex items-center gap-2 text-xs font-mono">
<span class="px-2.5 py-1 bg-slate-800 text-slate-300 rounded-md border border-slate-700">29 Physical Nodes</span>
<span class="px-2.5 py-1 bg-slate-800 text-slate-300 rounded-md border border-slate-700">400+ Containers</span>
</div>
</div>
<!-- 4 CLUSTER CARDS -->
<div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
<!-- CLUSTER 1: AERODROME (MANAGEMENT & OBSERVABILITY) -->
<div class="cluster-card glass-card rounded-2xl p-6 border-t-4 border-t-emerald-500 relative flex flex-col justify-between" data-search="aerodrome rancher authentik grafana uptime kuma awx prometheus longhorn">
<div>
<div class="flex items-start justify-between pb-4 mb-4 border-b border-slate-800">
<div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-emerald-500 badge-glow-green"></span>
<h3 class="text-lg font-bold text-white">Cluster A: Aerodrome</h3>
<span class="text-xs font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 px-2 py-0.5 rounded">Rancher Local</span>
</div>
<div class="text-xs text-slate-400 font-mono mt-1">
10 Nodes • 3 Control Plane + 7 Workers • Debian 12 (arm64) • MetalLB: 140.44.4.28-39
</div>
</div>
<div class="text-right">
<div class="text-xs font-mono text-emerald-400 font-bold">28 CPU Cores</div>
<div class="text-[11px] font-mono text-slate-400">770 Max Pod Capacity</div>
</div>
</div>
<!-- HARDWARE & TOPOLOGY STRIP -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 mb-4 text-xs font-mono">
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">ctl01-03:</span> <span class="text-slate-300">140.44.4.11-13</span>
</div>
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">wrk01-04:</span> <span class="text-slate-300">140.44.4.21-24</span>
</div>
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">wrk05-07:</span> <span class="text-slate-300">140.44.4.25-27</span>
</div>
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">Longhorn:</span> <span class="text-emerald-400 font-bold">Flash NVMe</span>
</div>
</div>
<!-- CORE WORKLOADS GRID -->
<div class="space-y-2">
<div class="text-xs uppercase tracking-wider font-bold text-slate-400">Active Workloads & VIPs</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🐄</span> Rancher Management
</div>
<div class="text-[11px] font-mono text-slate-400">aerodrome.snarfnet.net</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">:443</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🔑</span> Authentik SSO Portal
</div>
<div class="text-[11px] font-mono text-slate-400">authentik.snarfnet.net</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">VIP .29</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>📊</span> Grafana Telemetry
</div>
<div class="text-[11px] font-mono text-slate-400">grafana.snarfnet.net</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">VIP .32</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>📈</span> Prometheus TSDB
</div>
<div class="text-[11px] font-mono text-slate-400">39 Targets (cAdvisor + Nodes)</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">:9090</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🟢</span> Uptime Kuma Probes
</div>
<div class="text-[11px] font-mono text-slate-400">uptime.snarfnet.net (35 Mon.)</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">VIP .28</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🦅</span> AWX Ansible Controller
</div>
<div class="text-[11px] font-mono text-slate-400">awx.snarfnet.net</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">VIP .30</span>
</div>
</div>
</div>
</div>
</div>
<!-- CLUSTER 2: SPACEPORT (GITOPS & DEVOPS PLATFORM) -->
<div class="cluster-card glass-card rounded-2xl p-6 border-t-4 border-t-blue-500 relative flex flex-col justify-between" data-search="spaceport gitea argocd homepage semaphore zabbix coder jenkins longhorn">
<div>
<div class="flex items-start justify-between pb-4 mb-4 border-b border-slate-800">
<div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-blue-500 badge-glow-blue"></span>
<h3 class="text-lg font-bold text-white">Cluster B: Spaceport</h3>
<span class="text-xs font-mono bg-blue-500/10 text-blue-400 border border-blue-500/30 px-2 py-0.5 rounded">GitOps Core</span>
</div>
<div class="text-xs text-slate-400 font-mono mt-1">
10 Nodes • 4 Control Plane + 6 Workers • RPi 5 (arm64) • MetalLB: 140.44.4.57-65
</div>
</div>
<div class="text-right">
<div class="text-xs font-mono text-blue-400 font-bold">40 CPU Cores</div>
<div class="text-[11px] font-mono text-slate-400">52.7 GiB RAM Total</div>
</div>
</div>
<!-- HARDWARE & TOPOLOGY STRIP -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 mb-4 text-xs font-mono">
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">ctl01-04:</span> <span class="text-slate-300">140.44.4.41-44</span>
</div>
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">wrk01-03:</span> <span class="text-slate-300">140.44.4.51-53</span>
</div>
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">wrk04-06:</span> <span class="text-slate-300">140.44.4.54-56</span>
</div>
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">Storage:</span> <span class="text-blue-400 font-bold">1.14 TiB Block</span>
</div>
</div>
<!-- CORE WORKLOADS GRID -->
<div class="space-y-2">
<div class="text-xs uppercase tracking-wider font-bold text-slate-400">Active Workloads & VIPs</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🐙</span> ArgoCD Reconciler
</div>
<div class="text-[11px] font-mono text-slate-400">argo.snarfnet.net (15 Apps)</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">Node .51</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🍵</span> Gitea Repositories
</div>
<div class="text-[11px] font-mono text-slate-400">git.snarfnet.net</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">VIP .62</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🏠</span> Homepage Dashboard
</div>
<div class="text-[11px] font-mono text-slate-400">homepage.snarfnet.net</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">VIP .60</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🛡️</span> Zabbix Core Server
</div>
<div class="text-[11px] font-mono text-slate-400">zabbix.snarfnet.net (28 Hosts)</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">VIP .61</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>⚙️</span> Semaphore Ansible
</div>
<div class="text-[11px] font-mono text-slate-400">semaphore.snarfnet.net</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">VIP .58</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>👨‍💻</span> Coder Dev Cloud
</div>
<div class="text-[11px] font-mono text-slate-400">coder.snarfnet.net</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">VIP .63</span>
</div>
</div>
</div>
</div>
</div>
<!-- CLUSTER 3: SPACEDOCK (HARVESTER HCI & GPU COMPUTE) -->
<div class="cluster-card glass-card rounded-2xl p-6 border-t-4 border-t-purple-500 relative flex flex-col justify-between" data-search="spacedock harvester vllm triton qdrant tesla t4 dcgm gpu">
<div>
<div class="flex items-start justify-between pb-4 mb-4 border-b border-slate-800">
<div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-purple-500 badge-glow-purple"></span>
<h3 class="text-lg font-bold text-white">Cluster C: Spacedock (Harvester HCI)</h3>
<span class="text-xs font-mono bg-purple-500/10 text-purple-400 border border-purple-500/30 px-2 py-0.5 rounded">GPU Inference</span>
</div>
<div class="text-xs text-slate-400 font-mono mt-1">
4 Physical Nodes • AMD64 Server Architecture • Dedicated Tesla T4 AI Compute
</div>
</div>
<div class="text-right">
<div class="text-xs font-mono text-purple-400 font-bold">224 CPU Cores</div>
<div class="text-[11px] font-mono text-slate-400">4x Tesla T4 GPUs</div>
</div>
</div>
<!-- HARDWARE & TOPOLOGY STRIP -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 mb-4 text-xs font-mono">
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">Node 01:</span> <span class="text-slate-300">140.44.4.81</span>
</div>
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">Node 02:</span> <span class="text-slate-300">140.44.4.82</span>
</div>
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">Node 03:</span> <span class="text-slate-300">140.44.4.83</span>
</div>
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">Node 04:</span> <span class="text-slate-300">140.44.4.84</span>
</div>
</div>
<!-- CORE WORKLOADS GRID -->
<div class="space-y-2">
<div class="text-xs uppercase tracking-wider font-bold text-slate-400">Active Workloads & Inference Services</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🌾</span> Harvester HCI Console
</div>
<div class="text-[11px] font-mono text-slate-400">harvester.spacedock.snarfnet.net</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-purple-500/10 text-purple-400 border border-purple-500/20">VLAN 3</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🧠</span> vLLM DeepSeek-R1-14B
</div>
<div class="text-[11px] font-mono text-slate-400">Reasoning Planner (.81)</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-purple-500/10 text-purple-400 border border-purple-500/20">:30805</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>💎</span> vLLM Gemma-4-12B
</div>
<div class="text-[11px] font-mono text-slate-400">Coding Specialist (.82)</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-purple-500/10 text-purple-400 border border-purple-500/20">:30804</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🤖</span> vLLM Qwen 2.5-7B
</div>
<div class="text-[11px] font-mono text-slate-400">Instruction Following (.84)</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-purple-500/10 text-purple-400 border border-purple-500/20">:30800</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🔱</span> Triton Inference Server
</div>
<div class="text-[11px] font-mono text-slate-400">Decision Engine (.83)</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-purple-500/10 text-purple-400 border border-purple-500/20">:30803</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>⚡</span> Qdrant Vector Engine
</div>
<div class="text-[11px] font-mono text-slate-400">Semantic Vector Store (.82)</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-purple-500/10 text-purple-400 border border-purple-500/20">:30633</span>
</div>
</div>
</div>
</div>
</div>
<!-- CLUSTER 4: SHIPYARD (DOCKER SWARM FLEET) -->
<div class="cluster-card glass-card rounded-2xl p-6 border-t-4 border-t-amber-500 relative flex flex-col justify-between" data-search="shipyard portainer npm nginx proxy manager gotify heimdall meshcentral peanut pihole swarm">
<div>
<div class="flex items-start justify-between pb-4 mb-4 border-b border-slate-800">
<div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-amber-500 badge-glow-amber"></span>
<h3 class="text-lg font-bold text-white">Cluster D: Shipyard (Docker Swarm)</h3>
<span class="text-xs font-mono bg-amber-500/10 text-amber-400 border border-amber-500/30 px-2 py-0.5 rounded">Swarm VIP: 140.44.4.70</span>
</div>
<div class="text-xs text-slate-400 font-mono mt-1">
5 RPi 5 Nodes • Keepalived VRRP VIP • Host-Mode Ingress • Portainer EE 2.45
</div>
</div>
<div class="text-right">
<div class="text-xs font-mono text-amber-400 font-bold">5 Manager Nodes</div>
<div class="text-[11px] font-mono text-slate-400">Keepalived Active/Passive</div>
</div>
</div>
<!-- HARDWARE & TOPOLOGY STRIP -->
<div class="grid grid-cols-2 md:grid-cols-5 gap-2 mb-4 text-xs font-mono">
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">Swm01:</span> <span class="text-slate-300">.71</span>
</div>
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">Swm02:</span> <span class="text-slate-300">.72</span>
</div>
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">Swm03:</span> <span class="text-slate-300">.73</span>
</div>
<div class="p-2 rounded bg-slate-900/60 border border-amber-500/30">
<span class="text-amber-400 font-bold">NPM:</span> <span class="text-slate-200">.74</span>
</div>
<div class="p-2 rounded bg-slate-900/60 border border-slate-800">
<span class="text-slate-500">Swm05:</span> <span class="text-slate-300">.75</span>
</div>
</div>
<!-- CORE WORKLOADS GRID -->
<div class="space-y-2">
<div class="text-xs uppercase tracking-wider font-bold text-slate-400">Active Workloads & Stacks</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🚢</span> Portainer Enterprise
</div>
<div class="text-[11px] font-mono text-slate-400">shipyard.snarfnet.net</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-amber-500/10 text-amber-400 border border-amber-500/20">:9443</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-amber-500/40 bg-amber-950/10 flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🌐</span> NGINX Proxy Manager
</div>
<div class="text-[11px] font-mono text-slate-300">Host Mode Ingress (.74)</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-amber-500/20 text-amber-300 border border-amber-500/30">:80/:443</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🔔</span> Gotify Notifications
</div>
<div class="text-[11px] font-mono text-slate-400">gotify.snarfnet.net</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-amber-500/10 text-amber-400 border border-amber-500/20">:8090</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>🧭</span> Heimdall Landing
</div>
<div class="text-[11px] font-mono text-slate-400">portal.snarfnet.net</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-amber-500/10 text-amber-400 border border-amber-500/20">:85</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>💻</span> MeshCentral Remote
</div>
<div class="text-[11px] font-mono text-slate-400">mesh.snarfnet.net</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-amber-500/10 text-amber-400 border border-amber-500/20">:8086</span>
</div>
<div class="p-2.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex items-center justify-between">
<div>
<div class="font-bold text-slate-200 flex items-center gap-1.5">
<span>📦</span> Homebox Inventory
</div>
<div class="text-[11px] font-mono text-slate-400">homebox.snarfnet.net</div>
</div>
<span class="px-2 py-0.5 font-mono text-[10px] rounded bg-amber-500/10 text-amber-400 border border-amber-500/20">:3100</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BOTTOM SECTION: STORAGE SAN & SMART HOME FABRICS -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 pt-4">
<!-- STORAGE FABRIC -->
<div class="glass-card rounded-2xl p-6 border-l-4 border-l-amber-500" data-search="storage san nas synology truenas longhorn zfs">
<div class="flex items-center justify-between pb-4 mb-4 border-b border-slate-800">
<div class="flex items-center gap-2">
<span class="text-xl">💾</span>
<h3 class="text-base font-bold text-white">Storage SAN & Distributed Volumes (VLAN 40)</h3>
</div>
<span class="text-xs font-mono text-amber-400 bg-amber-500/10 px-2 py-0.5 rounded border border-amber-500/20">14.10.10.0/25</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800">
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
<span>SnarfNAS (Synology DSM)</span>
<span class="font-mono text-amber-400">14.10.10.72</span>
</div>
<p class="text-slate-400 text-[11px]">Primary NFS/SMB target, multi-drive RAID, media libraries, Time Machine, off-site replication.</p>
</div>
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800">
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
<span>SN-NAS (TrueNAS SCALE)</span>
<span class="font-mono text-amber-400">14.10.10.71</span>
</div>
<p class="text-slate-400 text-[11px]">ZFS high-speed pool, iSCSI volumes for hypervisors, automated snapshot mirrors.</p>
</div>
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800">
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
<span>Longhorn Spaceport Storage</span>
<span class="font-mono text-blue-400">1.14 TiB Total</span>
</div>
<p class="text-slate-400 text-[11px]">Replicated block storage across Spaceport workers (262 GiB used, 908 GiB free).</p>
</div>
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800">
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
<span>Longhorn Aerodrome Storage</span>
<span class="font-mono text-emerald-400">Flash NVMe</span>
</div>
<p class="text-slate-400 text-[11px]">Low-latency distributed storage backing Prometheus, Grafana, and MariaDB databases.</p>
</div>
</div>
</div>
<!-- SMART HOME & EDGE AI -->
<div class="glass-card rounded-2xl p-6 border-l-4 border-l-teal-500" data-search="home assistant smart home tempest weather nut hailo ai">
<div class="flex items-center justify-between pb-4 mb-4 border-b border-slate-800">
<div class="flex items-center gap-2">
<span class="text-xl">🏡</span>
<h3 class="text-base font-bold text-white">Smart Home & Edge AI Fabric (VLAN 50)</h3>
</div>
<span class="text-xs font-mono text-teal-400 bg-teal-500/10 px-2 py-0.5 rounded border border-teal-500/20">14.4.4.0/25</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800">
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
<span>Home Assistant Yellow</span>
<span class="font-mono text-teal-400">14.4.4.20:8123</span>
</div>
<p class="text-slate-400 text-[11px]">Primary smart home automation hub, Zigbee/Z-Wave networks, Matter, local voice processing.</p>
</div>
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800">
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
<span>Tempest Weather Station</span>
<span class="font-mono text-teal-400">Direct HA Telemetry</span>
</div>
<p class="text-slate-400 text-[11px]">Local UDP & cloud backyard weather station (Temp, Feels Like, Humidity, Wind Speed rounded to 0.1°).</p>
</div>
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800">
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
<span>NUT Master Daemon</span>
<span class="font-mono text-teal-400">14.4.4.44:3493</span>
</div>
<p class="text-slate-400 text-[11px]">Network UPS Tools master daemon monitoring central battery units, broadcast shutdown signals.</p>
</div>
<div class="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800">
<div class="flex items-center justify-between font-bold text-slate-200 mb-1">
<span>Hailo-8 Edge NPU Node</span>
<span class="font-mono text-purple-400">140.44.4.7:8000</span>
</div>
<p class="text-slate-400 text-[11px]">Dedicated Raspberry Pi 5 with 26 TOPS Hailo-8 AI acceleration running lightweight local LLMs.</p>
</div>
</div>
</div>
</div>
</main>
<!-- INTERACTIVE FILTER JAVASCRIPT -->
<script>
function filterTopology() {
const q = document.getElementById('filterInput').value.toLowerCase().trim();
const clusterCards = document.querySelectorAll('.cluster-card');
clusterCards.forEach(card => {
const text = card.getAttribute('data-search') || '';
const fullText = card.innerText.toLowerCase();
if (!q || text.includes(q) || fullText.includes(q)) {
card.style.display = '';
card.style.opacity = '1';
} else {
card.style.opacity = '0.15';
}
});
}
function resetFilter() {
document.getElementById('filterInput').value = '';
filterTopology();
}
// Keyboard shortcut ⌘K or Ctrl+K to focus search
window.addEventListener('keydown', (e) => {
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
e.preventDefault();
document.getElementById('filterInput').focus();
}
});
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 789 KiB