m4rshal/HomeNetwork
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add initial power management files and system diagram

Browse Source 
- Created a new directory for power management with a .gitkeep file.
- Added a system diagram in SVG format for power management architecture.
This commit is contained in:
Yuto Yamazaki
2026-03-11 09:54:41 +09:00
parent 4606f9dc70
commit 1c29c7c800
8 changed files with 1903 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
feature/network/network-diagram.html Normal file
View File

@@ -0,0 +1,274 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Network IP Map</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600;700&family=Syne:wght@400;700;800&display=swap');
:root {
--bg:#0a0e1a;--surface:#111827;--border:#1e2d40;--text:#e2e8f0;--muted:#64748b;--accent:#38bdf8;
--vlan10:#f59e0b;--vlan20h:#10b981;--vlan20v:#34d399;--vlan30:#8b5cf6;--vlan40:#3b82f6;
--vlan50:#f43f5e;--vlan60:#f97316;--prv:#06b6d4;--wan:#84cc16;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.5;padding:32px;min-height:100vh}
h1{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;letter-spacing:.05em;color:var(--accent);margin-bottom:4px}
.subtitle{color:var(--muted);font-size:11px;margin-bottom:32px;letter-spacing:.1em;text-transform:uppercase}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1100px}
.section{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.section.full-width{grid-column:1/-1}
.section-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.section-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.section-title{font-family:'Syne',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.section-range{margin-left:auto;font-size:11px;color:var(--muted)}
.sub-label{padding:8px 16px 2px;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;border-top:1px solid var(--border);margin-top:4px}
.sub-label.first{border-top:none;margin-top:0}
.device-list{padding:4px 0}
.device-row{display:grid;grid-template-columns:18px 1fr 160px;align-items:center;gap:8px;padding:5px 16px;transition:background .15s}
.device-row:hover{background:rgba(255,255,255,.03)}
.device-icon{font-size:10px;text-align:center}
.device-name{color:#cbd5e1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device-name .hw{color:var(--muted);font-size:10px;margin-left:4px}
.device-ip{font-size:12px;text-align:right;font-weight:600}
.dhcp-bar{padding:6px 16px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.2);border-top:1px solid var(--border)}
.dhcp-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;flex-shrink:0}
.dhcp-range{font-size:11px;color:var(--muted)}
.dhcp-track{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin:0 8px}
.dhcp-fill{height:100%;border-radius:2px;opacity:.6}
.vm-table{width:100%;border-collapse:collapse;font-size:11px}
.vm-table td{padding:4px 16px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--muted)}
.vm-table td:first-child{color:var(--vlan20v);font-weight:600}
.vm-table tr:last-child td{border-bottom:none}
.note{padding:6px 16px 8px;font-size:10px;color:var(--muted);border-top:1px solid var(--border);background:rgba(0,0,0,.15)}
.badge{display:inline-block;font-size:9px;padding:1px 6px;border-radius:3px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.badge-active{background:rgba(56,189,248,.15);color:var(--accent)}
.badge-vip{background:rgba(6,182,212,.15);color:var(--prv)}
.badge-fixed{background:rgba(132,204,22,.15);color:var(--wan)}
.badge-mobile{background:rgba(249,115,22,.15);color:var(--vlan60)}
.prv-cols{display:grid;grid-template-columns:1fr 2fr}
.prv-col{border-right:1px solid var(--border)}
.prv-col:last-child{border-right:none}
.prv-col-header{padding:6px 16px;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--border);background:rgba(0,0,0,.1)}
.ssid-table{width:100%;border-collapse:collapse;font-size:11px}
.ssid-table th{padding:5px 16px;text-align:left;color:var(--muted);font-size:10px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--border);background:rgba(0,0,0,.1)}
.ssid-table td{padding:6px 16px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.ssid-table tr:last-child td{border-bottom:none}
.rule-allow{color:#10b981;font-size:10px}
.rule-deny{color:#f43f5e;font-size:10px}
@media(max-width:720px){.grid{grid-template-columns:1fr}.section.full-width{grid-column:1}.prv-cols{grid-template-columns:1fr}.prv-col{border-right:none;border-bottom:1px solid var(--border)}body{padding:16px}}
</style>
</head>
<body>
<h1>NETWORK IP MAP</h1>
<p class="subtitle">Infrastructure Address Plan · 2026</p>
<div class="grid">
<!-- WAN -->
<div class="section full-width">
<div class="section-header">
<div class="section-dot" style="background:var(--wan)"></div>
<span class="section-title">WAN</span>
<span class="section-range">Public IPs</span>
</div>
<div class="device-list">
<div class="device-row" style="grid-template-columns:18px 1fr 220px 100px">
<span class="device-icon">🌐</span>
<span class="device-name">WAN1 — Flets</span>
<span class="device-ip" style="color:var(--wan)">133.27.54.201/32</span>
<span><span class="badge badge-fixed">Static</span></span>
</div>
<div class="device-row" style="grid-template-columns:18px 1fr 220px 100px">
<span class="device-icon">📡</span>
<span class="device-name">WAN2 — LTE/5G</span>
<span class="device-ip" style="color:var(--wan)">106.128.57.19/28</span>
<span><span class="badge badge-mobile">Dynamic</span></span>
</div>
</div>
</div>
<!-- VLAN 10 -->
<div class="section">
<div class="section-header">
<div class="section-dot" style="background:var(--vlan10)"></div>
<span class="section-title" style="color:var(--vlan10)">VLAN 10 — MGMT</span>
<span class="section-range">10.0.10.0/24</span>
</div>
<div class="device-list">
<div class="device-row"><span class="device-icon">🔀</span><span class="device-name">rt-edge-01 <span class="hw">RTX 1300</span></span><span class="device-ip" style="color:var(--vlan10)">10.0.10.1</span></div>
<div class="device-row"><span class="device-icon">🔗</span><span class="device-name">rt-aggr-edge-01 <span class="hw">USW Aggr</span></span><span class="device-ip" style="color:var(--vlan10)">10.0.10.11</span></div>
<div class="device-row"><span class="device-icon">🖧</span><span class="device-name">sw-srv-01 <span class="hw">AT-x510</span></span><span class="device-ip" style="color:var(--vlan10)">10.0.10.21</span></div>
<div class="device-row"><span class="device-icon">🖧</span><span class="device-name">sw-srv-02 <span class="hw">AT-x510</span></span><span class="device-ip" style="color:var(--vlan10)">10.0.10.22</span></div>
<div class="device-row"><span class="device-icon">🔗</span><span class="device-name">sw-aggr-srv-01 <span class="hw">USW Aggr</span></span><span class="device-ip" style="color:var(--vlan10)">10.0.10.31</span></div>
</div>
</div>
<!-- VLAN 20 -->
<div class="section">
<div class="section-header">
<div class="section-dot" style="background:var(--vlan20h)"></div>
<span class="section-title" style="color:var(--vlan20h)">VLAN 20 — SERVER</span>
<span class="section-range">10.0.20.0/22</span>
</div>
<div class="sub-label first">HOST — 10.0.20.0/24</div>
<div class="device-list">
<div class="device-row"><span class="device-icon">🔀</span><span class="device-name">Gateway</span><span class="device-ip" style="color:var(--vlan20h)">10.0.20.1</span></div>
<div class="device-row"><span class="device-icon">🖥</span><span class="device-name">n1-pro-pve <span class="hw">n1-pro</span></span><span class="device-ip" style="color:var(--vlan20h)">10.0.20.11</span></div>
<div class="device-row"><span class="device-icon">🍓</span><span class="device-name">sc-rpi4-01 <span class="hw">RPi4</span></span><span class="device-ip" style="color:var(--vlan20h)">10.0.20.21</span></div>
<div class="device-row"><span class="device-icon">🖥</span><span class="device-name">x86-01-pve <span class="hw">GEM 10</span></span><span class="device-ip" style="color:var(--vlan20h)">10.0.20.51</span></div>
<div class="device-row"><span class="device-icon">🖥</span><span class="device-name">x86-02-pve <span class="hw">GEM 10</span></span><span class="device-ip" style="color:var(--vlan20h)">10.0.20.52</span></div>
</div>
<div class="dhcp-bar">
<span class="dhcp-label">Static</span>
<div class="dhcp-track"><div class="dhcp-fill" style="width:78%;background:var(--vlan20h)"></div></div>
<span class="dhcp-range">.10–.199 / DHCP .200–.230</span>
</div>
<div class="sub-label">VM — 10.0.21.0/24 〜 10.0.23.0/24</div>
<table class="vm-table">
<tr><td>10.0.21.0/24</td><td>VM 汎用（優先使用）</td></tr>
<tr><td>10.0.22.0/24</td><td>予備・用途別拡張</td></tr>
<tr><td>10.0.23.0/24</td><td>予備・用途別拡張</td></tr>
</table>
<div class="note">静的割当: 各 /24 の .1–.199</div>
</div>
<!-- VLAN 30 -->
<div class="section">
<div class="section-header">
<div class="section-dot" style="background:var(--vlan30)"></div>
<span class="section-title" style="color:var(--vlan30)">VLAN 30 — STORAGE</span>
<span class="section-range">10.0.30.0/24</span>
</div>
<div class="device-list">
<div class="device-row"><span class="device-icon">🔀</span><span class="device-name">Gateway</span><span class="device-ip" style="color:var(--vlan30)">10.0.30.1</span></div>
<div class="device-row"><span class="device-icon">💾</span><span class="device-name">stg-01-nas <span class="hw">NAS</span></span><span class="device-ip" style="color:var(--vlan30)">10.0.30.11</span></div>
</div>
</div>
<!-- VLAN 40 -->
<div class="section">
<div class="section-header">
<div class="section-dot" style="background:var(--vlan40)"></div>
<span class="section-title" style="color:var(--vlan40)">VLAN 40 — CLIENT</span>
<span class="section-range">10.0.40.0/24</span>
</div>
<div class="device-list">
<div class="device-row"><span class="device-icon">🔀</span><span class="device-name">Gateway</span><span class="device-ip" style="color:var(--vlan40)">10.0.40.1</span></div>
</div>
<div class="dhcp-bar">
<span class="dhcp-label">DHCP</span>
<div class="dhcp-track"><div class="dhcp-fill" style="width:40%;background:var(--vlan40)"></div></div>
<span class="dhcp-range">.100 – .199</span>
</div>
</div>
<!-- VLAN 50 -->
<div class="section">
<div class="section-header">
<div class="section-dot" style="background:var(--vlan50)"></div>
<span class="section-title" style="color:var(--vlan50)">VLAN 50 — GUEST</span>
<span class="section-range">10.0.50.0/24</span>
</div>
<div class="device-list">
<div class="device-row"><span class="device-icon">🔀</span><span class="device-name">Gateway</span><span class="device-ip" style="color:var(--vlan50)">10.0.50.1</span></div>
</div>
<div class="dhcp-bar">
<span class="dhcp-label">DHCP</span>
<div class="dhcp-track"><div class="dhcp-fill" style="width:48%;background:var(--vlan50)"></div></div>
<span class="dhcp-range">.100 – .220（分離）</span>
</div>
</div>
<!-- VLAN 60 -->
<div class="section">
<div class="section-header">
<div class="section-dot" style="background:var(--vlan60)"></div>
<span class="section-title" style="color:var(--vlan60)">VLAN 60 — IoT</span>
<span class="section-range">10.0.60.0/24</span>
</div>
<div class="device-list">
<div class="device-row"><span class="device-icon">🔀</span><span class="device-name">Gateway</span><span class="device-ip" style="color:var(--vlan60)">10.0.60.1</span></div>
<div class="device-row"><span class="device-icon">📦</span><span class="device-name">静的 IoT 機器</span><span class="device-ip" style="color:var(--vlan60)">.2 – .99</span></div>
</div>
<div class="dhcp-bar">
<span class="dhcp-label">DHCP</span>
<div class="dhcp-track"><div class="dhcp-fill" style="width:20%;background:var(--vlan60)"></div></div>
<span class="dhcp-range">.100 – .149</span>
</div>
</div>
<!-- PRV -->
<div class="section full-width">
<div class="section-header">
<div class="section-dot" style="background:var(--prv)"></div>
<span class="section-title" style="color:var(--prv)">VLAN 100 — PRV</span>
<span class="section-range">192.168.100.0/22 · AP VLAN非対応 · SSID別論理分離</span>
</div>
<div class="prv-cols">
<div class="prv-col">
<div class="prv-col-header">インフラ静的割当</div>
<div class="device-list">
<div class="device-row" style="grid-template-columns:18px 1fr 150px">
<span class="device-icon">🛡</span>
<span class="device-name">CARP VIP <span class="badge badge-vip">GW</span></span>
<span class="device-ip" style="color:var(--prv)">192.168.100.1</span>
</div>
<div class="device-row" style="grid-template-columns:18px 1fr 150px">
<span class="device-icon">🔥</span>
<span class="device-name">opnsense-01 <span class="badge badge-active">Active</span></span>
<span class="device-ip" style="color:var(--prv)">192.168.100.2</span>
</div>
<div class="device-row" style="grid-template-columns:18px 1fr 150px">
<span class="device-icon">🔗</span>
<span class="device-name">sw-flex <span class="hw">USW Flex</span></span>
<span class="device-ip" style="color:var(--prv)">192.168.100.11</span>
</div>
<div class="device-row" style="grid-template-columns:18px 1fr 150px">
<span class="device-icon">📶</span>
<span class="device-name">ap-prv-01 <span class="hw">sw-flex 配下</span></span>
<span class="device-ip" style="color:var(--prv)">192.168.100.21</span>
</div>
</div>
<div class="note">静的: .1–.30　予備: 192.168.103.0/24</div>
</div>
<div class="prv-col">
<div class="prv-col-header">DHCP スコープ（SSID 別 / 論理分離）</div>
<table class="ssid-table">
<thead>
<tr><th>SSID 用途</th><th>便宜上のCIDR</th><th>DHCP レンジ</th><th>OPNsense ルール</th></tr>
</thead>
<tbody>
<tr>
<td style="color:#e2e8f0">Main（一般端末）</td>
<td style="color:var(--prv)">192.168.100.0/24</td>
<td style="color:var(--muted)">.100 – .200</td>
<td><span class="rule-allow">✓ 内部アクセス許可</span></td>
</tr>
<tr>
<td style="color:#e2e8f0">IoT</td>
<td style="color:var(--vlan60)">192.168.101.0/24</td>
<td style="color:var(--muted)">.100 – .200</td>
<td><span class="rule-deny">✗ 内部遮断 / WAN のみ</span></td>
</tr>
<tr>
<td style="color:#e2e8f0">Guest</td>
<td style="color:var(--vlan50)">192.168.102.0/24</td>
<td style="color:var(--muted)">.100 – .200</td>
<td><span class="rule-deny">✗ 内部遮断 / WAN のみ</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div style="margin-top:20px;font-size:10px;color:var(--muted);letter-spacing:.08em">
SRV: 10.0.0.0/16 &nbsp;|&nbsp; PRV: 192.168.100.0/22 &nbsp;|&nbsp; OPNsense HA: CARP + pfsync &nbsp;|&nbsp; VLAN 110 / 120 廃止
</div>
</body>
</html>