209 lines
11 KiB
XML
209 lines
11 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1060 810" font-family="'Space Grotesk', 'Segoe UI', system-ui, sans-serif">
|
||
<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-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>
|
||
<marker id="ar-p" 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="#a29bfe"/>
|
||
</marker>
|
||
<marker id="ar-pk" 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="#ff6b9d"/>
|
||
</marker>
|
||
|
||
<linearGradient id="caddy-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="host-grad" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#2d3942"/>
|
||
<stop offset="100%" stop-color="#1e2730"/>
|
||
</linearGradient>
|
||
<linearGradient id="nb-title-grad" x1="0" y1="0" x2="1" y2="0">
|
||
<stop offset="0%" stop-color="#5ec9d6" stop-opacity="0.12"/>
|
||
<stop offset="100%" stop-color="#5ec9d6" stop-opacity="0"/>
|
||
</linearGradient>
|
||
|
||
<pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
|
||
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="#5ec9d6" stroke-opacity="0.06" stroke-width="1"/>
|
||
</pattern>
|
||
|
||
<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>
|
||
</defs>
|
||
|
||
<rect width="1060" height="810" fill="#0f1419"/>
|
||
|
||
<text x="20" y="36" font-size="26" font-weight="700" fill="#e6edf3">Caddy 反向代理架構</text>
|
||
<text x="20" y="60" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="12" fill="#8b98a5">host: <tspan fill="#5ec9d6">192.168.42.127</tspan></text>
|
||
|
||
<rect x="10" y="80" width="1040" height="660" rx="16" fill="#1a2129" stroke="#2d3942" stroke-width="1"/>
|
||
<rect x="10" y="80" width="1040" height="660" rx="16" fill="url(#grid)"/>
|
||
|
||
<g transform="translate(10, 100)">
|
||
<g font-family="'JetBrains Mono', 'Consolas', monospace">
|
||
<rect x="20" y="174" width="48" height="26" rx="5" fill="#0f1419" stroke="#ffd166" stroke-width="1.4"/>
|
||
<text x="44" y="192" text-anchor="middle" font-size="12" font-weight="700" fill="#ffd166">:80</text>
|
||
|
||
<rect x="10" y="475" width="80" height="26" rx="5" fill="#0f1419" stroke="#ff6b9d" stroke-width="1.4"/>
|
||
<text x="50" y="493" text-anchor="middle" font-size="11" font-weight="700" fill="#ff6b9d">:3478/udp</text>
|
||
</g>
|
||
|
||
<rect x="110" y="60" width="560" height="520" rx="14" fill="url(#host-grad)" stroke="#3a4a58" stroke-width="1.5" stroke-dasharray="6 4"/>
|
||
<text x="130" y="88" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="13" fill="#5ec9d6" font-weight="700">host · 192.168.42.127</text>
|
||
|
||
<g>
|
||
<rect x="140" y="125" width="330" height="285" rx="10" fill="url(#caddy-grad)" stroke="#1dd1a1" stroke-width="1.8"/>
|
||
<text x="160" y="153" font-size="15" font-weight="700" fill="#1dd1a1">Caddy</text>
|
||
<text x="213" y="153" font-size="13" font-weight="500" fill="#8b98a5">反向代理</text>
|
||
|
||
<circle cx="285" cy="148" r="5" fill="#1dd1a1" opacity="0.8">
|
||
<animate attributeName="r" values="5;11;5" dur="2s" repeatCount="indefinite"/>
|
||
<animate attributeName="opacity" values="0.8;0;0.8" dur="2s" repeatCount="indefinite"/>
|
||
</circle>
|
||
<circle cx="285" cy="148" r="3.5" fill="#1dd1a1"/>
|
||
|
||
<g font-family="'JetBrains Mono', 'Consolas', monospace" font-size="12.5">
|
||
<g>
|
||
<rect x="160" y="170" width="290" height="32" rx="6" fill="#0f1419" stroke="#2d3942"/>
|
||
<text x="176" y="191" fill="#ffd166" font-weight="700">/</text>
|
||
<text x="438" y="191" text-anchor="end" fill="#8b98a5">→ dashboard</text>
|
||
</g>
|
||
|
||
<line x1="170" y1="222" x2="440" y2="222" stroke="#2d3942" stroke-width="1" stroke-dasharray="3 4"/>
|
||
|
||
<g>
|
||
<rect x="160" y="249" width="290" height="32" rx="6" fill="#0f1419" stroke="#2d3942"/>
|
||
<text x="176" y="270" fill="#ffd166" font-weight="700">/api/*</text>
|
||
<text x="438" y="270" text-anchor="end" fill="#8b98a5">→ netbird-server</text>
|
||
</g>
|
||
<g>
|
||
<rect x="160" y="287" width="290" height="32" rx="6" fill="#0f1419" stroke="#2d3942"/>
|
||
<text x="176" y="308" fill="#ffd166" font-weight="700">/oauth2/*</text>
|
||
<text x="438" y="308" text-anchor="end" fill="#8b98a5">→ netbird-server</text>
|
||
</g>
|
||
<g>
|
||
<rect x="160" y="325" width="290" height="32" rx="6" fill="#0f1419" stroke="#2d3942"/>
|
||
<text x="176" y="346" fill="#ffd166" font-weight="700">/relay*</text>
|
||
<text x="438" y="346" text-anchor="end" fill="#8b98a5">→ netbird-server</text>
|
||
</g>
|
||
<g>
|
||
<rect x="160" y="363" width="290" height="32" rx="6" fill="#0f1419" stroke="#a29bfe"/>
|
||
<text x="176" y="384" fill="#a29bfe" font-weight="700">gRPC</text>
|
||
<text x="438" y="384" text-anchor="end" fill="#8b98a5">→ netbird-server</text>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
|
||
<g>
|
||
<rect x="720" y="156" width="280" height="60" rx="10" fill="#1e2730" stroke="#ffd166" stroke-width="1.6"/>
|
||
<g transform="translate(740, 170)">
|
||
<rect x="0" y="0" width="32" height="26" rx="3" fill="none" stroke="#ffd166" stroke-width="1.4"/>
|
||
<line x1="0" y1="7" x2="32" y2="7" stroke="#ffd166" stroke-width="1.2"/>
|
||
<circle cx="4" cy="3.5" r="1" fill="#ffd166"/>
|
||
<circle cx="8" cy="3.5" r="1" fill="#ffd166"/>
|
||
<circle cx="12" cy="3.5" r="1" fill="#ffd166"/>
|
||
</g>
|
||
<text x="790" y="182" font-size="14" font-weight="700" fill="#e6edf3">dashboard</text>
|
||
<text x="790" y="202" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11" fill="#8b98a5">Web UI</text>
|
||
</g>
|
||
|
||
<g>
|
||
<rect x="720" y="222" width="280" height="248" rx="10" fill="#1e2730" stroke="#5ec9d6" stroke-width="1.6"/>
|
||
<rect x="720" y="222" width="280" height="30" rx="10" fill="url(#nb-title-grad)"/>
|
||
<rect x="720" y="240" width="280" height="12" fill="url(#nb-title-grad)"/>
|
||
|
||
<g transform="translate(734, 230)" stroke="#5ec9d6" stroke-width="1.3" fill="none">
|
||
<rect x="0" y="0" width="22" height="5" rx="1"/>
|
||
<rect x="0" y="7" width="22" height="5" rx="1"/>
|
||
<rect x="0" y="14" width="22" height="5" rx="1"/>
|
||
<circle cx="3" cy="2.5" r="0.7" fill="#5ec9d6" stroke="none"/>
|
||
<circle cx="3" cy="9.5" r="0.7" fill="#5ec9d6" stroke="none"/>
|
||
<circle cx="3" cy="16.5" r="0.7" fill="#5ec9d6" stroke="none"/>
|
||
</g>
|
||
<text x="765" y="242" font-size="14" font-weight="700" fill="#e6edf3">netbird-server</text>
|
||
|
||
<line x1="730" y1="254" x2="990" y2="254" stroke="#2d3942" stroke-width="1"/>
|
||
|
||
<g font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11.5">
|
||
<circle cx="730" cy="265" r="3" fill="#5ec9d6"/>
|
||
<text x="742" y="269" fill="#8b98a5">HTTP API</text>
|
||
|
||
<circle cx="730" cy="303" r="3" fill="#5ec9d6"/>
|
||
<text x="742" y="307" fill="#8b98a5">OAuth2</text>
|
||
|
||
<circle cx="730" cy="341" r="3" fill="#5ec9d6"/>
|
||
<text x="742" y="345" fill="#8b98a5">Relay</text>
|
||
|
||
<circle cx="730" cy="379" r="3" fill="#a29bfe"/>
|
||
<text x="742" y="383" fill="#8b98a5">gRPC</text>
|
||
|
||
<circle cx="730" cy="440" r="3" fill="#ff6b9d"/>
|
||
<text x="742" y="444" fill="#ff6b9d" font-weight="700">STUN (:3478/udp)</text>
|
||
</g>
|
||
</g>
|
||
|
||
<path id="p-in" d="M 68 187 L 140 187" stroke="#ffd166" stroke-width="2" fill="none" marker-end="url(#ar-y)"/>
|
||
<path id="p-dash" d="M 470 186 L 720 186" stroke="#ffd166" stroke-width="1.8" fill="none" stroke-opacity="0.55" marker-end="url(#ar-y)"/>
|
||
<path id="p-api" d="M 470 265 L 720 265" stroke="#5ec9d6" stroke-width="1.8" fill="none" stroke-opacity="0.55" marker-end="url(#ar-c)"/>
|
||
<path id="p-oauth" d="M 470 303 L 720 303" stroke="#5ec9d6" stroke-width="1.8" fill="none" stroke-opacity="0.55" marker-end="url(#ar-c)"/>
|
||
<path id="p-relay" d="M 470 341 L 720 341" stroke="#5ec9d6" stroke-width="1.8" fill="none" stroke-opacity="0.55" marker-end="url(#ar-c)"/>
|
||
<path id="p-grpc" d="M 470 379 L 720 379" stroke="#a29bfe" stroke-width="1.8" fill="none" stroke-opacity="0.65" marker-end="url(#ar-p)"/>
|
||
<path id="p-stun" d="M 90 488 L 690 488 L 690 440 L 720 440" stroke="#ff6b9d" stroke-width="2" fill="none" stroke-dasharray="6 4" marker-end="url(#ar-pk)"/>
|
||
|
||
<text x="360" y="512" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11" fill="#ff6b9d" font-weight="700">STUN · 直送，不經 Caddy</text>
|
||
|
||
<circle r="4" fill="#ffd166" filter="url(#glow)">
|
||
<animateMotion dur="1.4s" repeatCount="indefinite"><mpath href="#p-in"/></animateMotion>
|
||
</circle>
|
||
<circle r="4" fill="#ffd166" filter="url(#glow)">
|
||
<animateMotion dur="1.4s" begin="-0.7s" repeatCount="indefinite"><mpath href="#p-in"/></animateMotion>
|
||
</circle>
|
||
|
||
<circle r="4" fill="#ffd166" filter="url(#glow)">
|
||
<animateMotion dur="1.8s" repeatCount="indefinite"><mpath href="#p-dash"/></animateMotion>
|
||
</circle>
|
||
<circle r="4" fill="#5ec9d6" filter="url(#glow)">
|
||
<animateMotion dur="1.8s" begin="-0.3s" repeatCount="indefinite"><mpath href="#p-api"/></animateMotion>
|
||
</circle>
|
||
<circle r="4" fill="#5ec9d6" filter="url(#glow)">
|
||
<animateMotion dur="1.8s" begin="-0.6s" repeatCount="indefinite"><mpath href="#p-oauth"/></animateMotion>
|
||
</circle>
|
||
<circle r="4" fill="#5ec9d6" filter="url(#glow)">
|
||
<animateMotion dur="1.8s" begin="-0.9s" repeatCount="indefinite"><mpath href="#p-relay"/></animateMotion>
|
||
</circle>
|
||
<circle r="4" fill="#a29bfe" filter="url(#glow)">
|
||
<animateMotion dur="1.8s" begin="-1.2s" repeatCount="indefinite"><mpath href="#p-grpc"/></animateMotion>
|
||
</circle>
|
||
|
||
<circle r="4" fill="#ff6b9d" filter="url(#glow)">
|
||
<animateMotion dur="2.4s" repeatCount="indefinite"><mpath href="#p-stun"/></animateMotion>
|
||
</circle>
|
||
<circle r="4" fill="#ff6b9d" filter="url(#glow)">
|
||
<animateMotion dur="2.4s" begin="-1.2s" repeatCount="indefinite"><mpath href="#p-stun"/></animateMotion>
|
||
</circle>
|
||
</g>
|
||
|
||
<g font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11" fill="#8b98a5">
|
||
<circle cx="35" cy="775" r="5" fill="#ffd166"/>
|
||
<text x="46" y="779">HTTP (/) → dashboard</text>
|
||
|
||
<circle cx="230" cy="775" r="5" fill="#5ec9d6"/>
|
||
<text x="241" y="779">HTTP (/api, /oauth2, /relay) → netbird-server</text>
|
||
|
||
<circle cx="620" cy="775" r="5" fill="#a29bfe"/>
|
||
<text x="631" y="779">gRPC → netbird-server</text>
|
||
|
||
<circle cx="820" cy="775" r="5" fill="#ff6b9d"/>
|
||
<text x="831" y="779">UDP :3478 STUN（直送）</text>
|
||
</g>
|
||
</svg>
|