323 lines
14 KiB
HTML
323 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-Hant">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Proxmox 叢集網路架構</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg: #0f1419;
|
|
--bg-2: #1a2129;
|
|
--border: #2d3942;
|
|
--text: #e6edf3;
|
|
--text-muted: #8b98a5;
|
|
--internet: #ffd166;
|
|
--gw: #1dd1a1;
|
|
--bridge: #5ec9d6;
|
|
--pve: #a29bfe;
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
background: radial-gradient(ellipse at top, #1a2129 0%, #0f1419 60%);
|
|
color: var(--text);
|
|
padding: 20px;
|
|
min-height: 100vh;
|
|
}
|
|
.container { max-width: 1100px; margin: 0 auto; }
|
|
|
|
h1 {
|
|
font-size: clamp(1.4rem, 4vw, 2rem);
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 4px;
|
|
}
|
|
.sub {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem;
|
|
margin-bottom: 20px;
|
|
}
|
|
.sub .net { color: var(--bridge); }
|
|
|
|
.diagram-wrap {
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.diagram-wrap::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(94,201,214,0.04) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(94,201,214,0.04) 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
svg { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
|
|
|
|
.legend {
|
|
display: flex;
|
|
gap: 18px;
|
|
flex-wrap: wrap;
|
|
margin-top: 16px;
|
|
padding-top: 14px;
|
|
border-top: 1px dashed var(--border);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.78rem;
|
|
color: var(--text-muted);
|
|
}
|
|
.legend-item { display: flex; align-items: center; gap: 6px; }
|
|
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Proxmox 叢集網路架構</h1>
|
|
<div class="sub">network: <span class="net">192.168.42.0/24</span> · bridge: vmbr0</div>
|
|
|
|
<div class="diagram-wrap">
|
|
<svg viewBox="0 0 1020 440" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<marker id="ar-y" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#ffd166"/>
|
|
</marker>
|
|
<marker id="ar-g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#1dd1a1"/>
|
|
</marker>
|
|
<marker id="ar-c" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#5ec9d6"/>
|
|
</marker>
|
|
|
|
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="2.5" result="blur"/>
|
|
<feMerge>
|
|
<feMergeNode in="blur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<linearGradient id="inet-grad" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stop-color="#ffd166" stop-opacity="0.18"/>
|
|
<stop offset="100%" stop-color="#ffd166" stop-opacity="0.04"/>
|
|
</linearGradient>
|
|
<linearGradient id="gw-grad" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stop-color="#1dd1a1" stop-opacity="0.22"/>
|
|
<stop offset="100%" stop-color="#1dd1a1" stop-opacity="0.06"/>
|
|
</linearGradient>
|
|
<linearGradient id="pve-grad" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#1e2730"/>
|
|
<stop offset="100%" stop-color="#161d25"/>
|
|
</linearGradient>
|
|
<linearGradient id="bridge-grad" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stop-color="#5ec9d6" stop-opacity="0.06"/>
|
|
<stop offset="50%" stop-color="#5ec9d6" stop-opacity="0.18"/>
|
|
<stop offset="100%" stop-color="#5ec9d6" stop-opacity="0.06"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- ===== Internet cloud ===== -->
|
|
<g>
|
|
<rect x="20" y="40" width="160" height="70" rx="35"
|
|
fill="url(#inet-grad)" stroke="#ffd166" stroke-width="1.6"/>
|
|
<path d="M 48 88
|
|
C 42 88, 38 84, 40 80
|
|
C 36 78, 37 73, 41 72
|
|
C 42 67, 49 66, 53 69
|
|
C 57 64, 65 65, 67 70
|
|
C 73 69, 78 74, 76 79
|
|
C 80 81, 79 86, 75 88
|
|
Z"
|
|
fill="#ffd166" fill-opacity="0.18" stroke="#ffd166" stroke-width="1.4"/>
|
|
<text x="90" y="80" font-family="Space Grotesk" font-size="14" font-weight="700" fill="#ffd166">Internet</text>
|
|
</g>
|
|
|
|
<!-- ===== Gateway (OpenWRT) with firewall icon ===== -->
|
|
<g>
|
|
<rect x="220" y="32" width="280" height="86" rx="10"
|
|
fill="url(#gw-grad)" stroke="#1dd1a1" stroke-width="1.8"/>
|
|
|
|
<!-- Firewall icon: brick wall with flame on top -->
|
|
<g transform="translate(240, 50)">
|
|
<!-- flame above the wall -->
|
|
<path d="M 18 4
|
|
C 14 10, 14 14, 18 16
|
|
C 20 12, 22 12, 22 16
|
|
C 26 14, 26 10, 22 6
|
|
C 21 9, 19 9, 18 4 Z"
|
|
fill="#ff6b9d" fill-opacity="0.9" stroke="#ff6b9d" stroke-width="0.8"/>
|
|
|
|
<!-- brick wall -->
|
|
<g stroke="#1dd1a1" stroke-width="1.3" fill="#1dd1a1" fill-opacity="0.08">
|
|
<!-- row 1 (top) -->
|
|
<rect x="2" y="20" width="10" height="7"/>
|
|
<rect x="13" y="20" width="10" height="7"/>
|
|
<rect x="24" y="20" width="10" height="7"/>
|
|
<!-- row 2 (middle, offset) -->
|
|
<rect x="-3" y="28" width="7" height="7"/>
|
|
<rect x="5" y="28" width="10" height="7"/>
|
|
<rect x="16" y="28" width="10" height="7"/>
|
|
<rect x="27" y="28" width="10" height="7"/>
|
|
<!-- row 3 (bottom) -->
|
|
<rect x="2" y="36" width="10" height="7"/>
|
|
<rect x="13" y="36" width="10" height="7"/>
|
|
<rect x="24" y="36" width="10" height="7"/>
|
|
</g>
|
|
</g>
|
|
|
|
<text x="295" y="65" font-family="Space Grotesk" font-size="14" font-weight="700" fill="#e6edf3">OpenWRT GW</text>
|
|
<text x="295" y="85" font-family="JetBrains Mono, monospace" font-size="11.5" fill="#1dd1a1">192.168.42.10</text>
|
|
<text x="295" y="103" font-family="JetBrains Mono, monospace" font-size="10.5" fill="#8b98a5">NAT · DHCP · Firewall</text>
|
|
|
|
<!-- status pulse -->
|
|
<circle cx="482" cy="50" r="4" fill="#1dd1a1" opacity="0.8">
|
|
<animate attributeName="r" values="4;10;4" dur="2s" repeatCount="indefinite"/>
|
|
<animate attributeName="opacity" values="0.8;0;0.8" dur="2s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="482" cy="50" r="3" fill="#1dd1a1"/>
|
|
</g>
|
|
|
|
<!-- ===== vmbr0 bridge bar ===== -->
|
|
<g>
|
|
<rect x="80" y="180" width="860" height="54" rx="8"
|
|
fill="url(#bridge-grad)" stroke="#5ec9d6" stroke-width="1.5"/>
|
|
<text x="102" y="205" font-family="JetBrains Mono, monospace" font-size="13" font-weight="700" fill="#5ec9d6">vmbr0</text>
|
|
<text x="150" y="205" font-family="JetBrains Mono, monospace" font-size="12" fill="#8b98a5">192.168.42.0/24</text>
|
|
<text x="918" y="223" text-anchor="end" font-family="Space Grotesk" font-size="11" fill="#8b98a5" font-style="italic">L2 bridge</text>
|
|
|
|
<circle cx="220" cy="234" r="4" fill="#5ec9d6"/>
|
|
<circle cx="510" cy="234" r="4" fill="#5ec9d6"/>
|
|
<circle cx="800" cy="234" r="4" fill="#5ec9d6"/>
|
|
</g>
|
|
|
|
<!-- ===== PVE nodes (simplified, just the node itself) ===== -->
|
|
<!-- pve (.38) -->
|
|
<g>
|
|
<rect x="80" y="290" width="280" height="110" rx="12"
|
|
fill="url(#pve-grad)" stroke="#a29bfe" stroke-width="1.6"/>
|
|
|
|
<g transform="translate(100, 318)" stroke="#a29bfe" stroke-width="1.4" fill="none">
|
|
<rect x="0" y="0" width="26" height="7" rx="1"/>
|
|
<rect x="0" y="10" width="26" height="7" rx="1"/>
|
|
<rect x="0" y="20" width="26" height="7" rx="1"/>
|
|
<circle cx="3.5" cy="3.5" r="0.9" fill="#a29bfe" stroke="none"/>
|
|
<circle cx="3.5" cy="13.5" r="0.9" fill="#a29bfe" stroke="none"/>
|
|
<circle cx="3.5" cy="23.5" r="0.9" fill="#a29bfe" stroke="none"/>
|
|
</g>
|
|
|
|
<text x="140" y="330" font-family="Space Grotesk" font-size="18" font-weight="700" fill="#e6edf3">pve</text>
|
|
<text x="340" y="330" text-anchor="end" font-family="JetBrains Mono, monospace" font-size="14" fill="#a29bfe" font-weight="700">.38</text>
|
|
<text x="140" y="350" font-family="JetBrains Mono, monospace" font-size="11.5" fill="#8b98a5">192.168.42.38</text>
|
|
|
|
<line x1="100" y1="368" x2="340" y2="368" stroke="#2d3942" stroke-width="1"/>
|
|
<text x="100" y="388" font-family="JetBrains Mono, monospace" font-size="10.5" fill="#8b98a5">Proxmox VE · cluster node</text>
|
|
</g>
|
|
|
|
<!-- pve-02 (.39) -->
|
|
<g>
|
|
<rect x="370" y="290" width="280" height="110" rx="12"
|
|
fill="url(#pve-grad)" stroke="#a29bfe" stroke-width="1.6"/>
|
|
|
|
<g transform="translate(390, 318)" stroke="#a29bfe" stroke-width="1.4" fill="none">
|
|
<rect x="0" y="0" width="26" height="7" rx="1"/>
|
|
<rect x="0" y="10" width="26" height="7" rx="1"/>
|
|
<rect x="0" y="20" width="26" height="7" rx="1"/>
|
|
<circle cx="3.5" cy="3.5" r="0.9" fill="#a29bfe" stroke="none"/>
|
|
<circle cx="3.5" cy="13.5" r="0.9" fill="#a29bfe" stroke="none"/>
|
|
<circle cx="3.5" cy="23.5" r="0.9" fill="#a29bfe" stroke="none"/>
|
|
</g>
|
|
|
|
<text x="430" y="330" font-family="Space Grotesk" font-size="18" font-weight="700" fill="#e6edf3">pve-02</text>
|
|
<text x="630" y="330" text-anchor="end" font-family="JetBrains Mono, monospace" font-size="14" fill="#a29bfe" font-weight="700">.39</text>
|
|
<text x="430" y="350" font-family="JetBrains Mono, monospace" font-size="11.5" fill="#8b98a5">192.168.42.39</text>
|
|
|
|
<line x1="390" y1="368" x2="630" y2="368" stroke="#2d3942" stroke-width="1"/>
|
|
<text x="390" y="388" font-family="JetBrains Mono, monospace" font-size="10.5" fill="#8b98a5">Proxmox VE · cluster node</text>
|
|
</g>
|
|
|
|
<!-- pve-03 (.40) -->
|
|
<g>
|
|
<rect x="660" y="290" width="280" height="110" rx="12"
|
|
fill="url(#pve-grad)" stroke="#a29bfe" stroke-width="1.6"/>
|
|
|
|
<g transform="translate(680, 318)" stroke="#a29bfe" stroke-width="1.4" fill="none">
|
|
<rect x="0" y="0" width="26" height="7" rx="1"/>
|
|
<rect x="0" y="10" width="26" height="7" rx="1"/>
|
|
<rect x="0" y="20" width="26" height="7" rx="1"/>
|
|
<circle cx="3.5" cy="3.5" r="0.9" fill="#a29bfe" stroke="none"/>
|
|
<circle cx="3.5" cy="13.5" r="0.9" fill="#a29bfe" stroke="none"/>
|
|
<circle cx="3.5" cy="23.5" r="0.9" fill="#a29bfe" stroke="none"/>
|
|
</g>
|
|
|
|
<text x="720" y="330" font-family="Space Grotesk" font-size="18" font-weight="700" fill="#e6edf3">pve-03</text>
|
|
<text x="920" y="330" text-anchor="end" font-family="JetBrains Mono, monospace" font-size="14" fill="#a29bfe" font-weight="700">.40</text>
|
|
<text x="720" y="350" font-family="JetBrains Mono, monospace" font-size="11.5" fill="#8b98a5">192.168.42.40</text>
|
|
|
|
<line x1="680" y1="368" x2="920" y2="368" stroke="#2d3942" stroke-width="1"/>
|
|
<text x="680" y="388" font-family="JetBrains Mono, monospace" font-size="10.5" fill="#8b98a5">Proxmox VE · cluster node</text>
|
|
</g>
|
|
|
|
<!-- ===== Paths ===== -->
|
|
<path id="p-inet" d="M 180 75 L 220 75"
|
|
stroke="#ffd166" stroke-width="2" fill="none" marker-end="url(#ar-y)"/>
|
|
|
|
<path id="p-gw-br" d="M 360 118 L 360 180"
|
|
stroke="#1dd1a1" stroke-width="2" fill="none" marker-end="url(#ar-g)"/>
|
|
|
|
<path id="p-pve1" d="M 220 234 L 220 290"
|
|
stroke="#5ec9d6" stroke-width="1.8" fill="none" marker-end="url(#ar-c)"/>
|
|
<path id="p-pve2" d="M 510 234 L 510 290"
|
|
stroke="#5ec9d6" stroke-width="1.8" fill="none" marker-end="url(#ar-c)"/>
|
|
<path id="p-pve3" d="M 800 234 L 800 290"
|
|
stroke="#5ec9d6" stroke-width="1.8" fill="none" marker-end="url(#ar-c)"/>
|
|
|
|
<!-- ===== Animated dots ===== -->
|
|
<circle r="4" fill="#ffd166" filter="url(#glow)">
|
|
<animateMotion dur="1.2s" repeatCount="indefinite"><mpath href="#p-inet"/></animateMotion>
|
|
</circle>
|
|
<circle r="4" fill="#ffd166" filter="url(#glow)">
|
|
<animateMotion dur="1.2s" begin="-0.6s" repeatCount="indefinite"><mpath href="#p-inet"/></animateMotion>
|
|
</circle>
|
|
|
|
<circle r="4" fill="#1dd1a1" filter="url(#glow)">
|
|
<animateMotion dur="1s" repeatCount="indefinite"><mpath href="#p-gw-br"/></animateMotion>
|
|
</circle>
|
|
|
|
<circle r="4" fill="#5ec9d6" filter="url(#glow)">
|
|
<animateMotion dur="1.2s" repeatCount="indefinite"><mpath href="#p-pve1"/></animateMotion>
|
|
</circle>
|
|
<circle r="4" fill="#5ec9d6" filter="url(#glow)">
|
|
<animateMotion dur="1.2s" begin="-0.4s" repeatCount="indefinite"><mpath href="#p-pve2"/></animateMotion>
|
|
</circle>
|
|
<circle r="4" fill="#5ec9d6" filter="url(#glow)">
|
|
<animateMotion dur="1.2s" begin="-0.8s" repeatCount="indefinite"><mpath href="#p-pve3"/></animateMotion>
|
|
</circle>
|
|
|
|
<!-- Bridge traffic (left↔right) -->
|
|
<circle r="3" fill="#5ec9d6" opacity="0.7">
|
|
<animate attributeName="cx" values="100;920;100" dur="6s" repeatCount="indefinite"/>
|
|
<animate attributeName="cy" values="207;207;207" dur="6s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle r="3" fill="#5ec9d6" opacity="0.7">
|
|
<animate attributeName="cx" values="920;100;920" dur="6s" repeatCount="indefinite"/>
|
|
<animate attributeName="cy" values="207;207;207" dur="6s" repeatCount="indefinite"/>
|
|
</circle>
|
|
</svg>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item"><span class="legend-dot" style="background:#ffd166"></span>Internet</div>
|
|
<div class="legend-item"><span class="legend-dot" style="background:#1dd1a1"></span>OpenWRT Gateway</div>
|
|
<div class="legend-item"><span class="legend-dot" style="background:#5ec9d6"></span>vmbr0 (L2 bridge)</div>
|
|
<div class="legend-item"><span class="legend-dot" style="background:#a29bfe"></span>PVE 節點</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|