Add updated figure

3 files changed, 139 insertions, 34 deletions

diff --git a/biome.json b/biome.json
index e0ecc4f..241608a 100644
--- a/biome.json
+++ b/biome.json
@@ -1,6 +1,6 @@
 {
 	"files": {
-		"includes": ["index.html", "biome.json", "style.css"]
+		"includes": ["index.html", "biome.json", "style.css", "figure.svg"]
 	},
 	"html": {
 		"experimentalFullSupportEnabled": true,
diff --git a/figure.svg b/figure.svg
new file mode 100644
index 0000000..661d4f0
--- /dev/null
+++ b/figure.svg
@@ -0,0 +1,137 @@
+<svg width="1000" height="820" viewBox="0 0 1000 820" xmlns="http://www.w3.org/2000/svg">
+  <!-- Title -->
+  <text x="500" y="45" font-family="Arial, sans-serif" font-size="26" font-weight="bold" text-anchor="middle" fill="#333">Wi-Fi HaLow IoT Network</text>
+
+  <!-- External Router -->
+  <rect x="460" y="90" width="80" height="60" rx="8" fill="#333"/>
+  <text x="500" y="125" font-family="Arial, sans-serif" font-size="14" fill="white" text-anchor="middle">ROUTER</text>
+  <text x="500" y="70" font-size="12" text-anchor="middle" fill="#666">(Internet Exit Point)</text>
+
+  <!-- Ethernet -->
+  <line x1="500" y1="150" x2="500" y2="190" stroke="#333" stroke-width="4"/>
+  <text x="520" y="170" font-size="12" fill="#333">Ethernet cable</text>
+
+  <!-- Gateways (all identical style now) -->
+  <!-- Central -->
+  <g id="central" transform="translate(500,220)">
+    <circle cx="0" cy="0" r="70" fill="#fff1b8" stroke="#faad14" stroke-width="3"/>
+    <text x="0" y="0" font-size="15" font-weight="bold" text-anchor="middle">RLFHL</text>
+    <text x="0" y="20" font-size="13" text-anchor="middle">Gateway</text>
+    <circle cx="0" cy="0" r="110" fill="none" stroke="#52c41a" stroke-width="2" stroke-dasharray="6,4"/>
+    <text x="120" y="0" font-size="11" fill="#52c41a">2.4GHz ~100m</text>
+    <circle cx="0" cy="0" r="340" fill="none" stroke="#faad14" stroke-width="2" stroke-dasharray="6,4"/>
+    <text x="350" y="0" font-size="11" fill="#faad14">HaLow ~1km</text>
+  </g>
+
+  <!-- Left -->
+  <g transform="translate(180,380)">
+    <circle cx="0" cy="0" r="60" fill="#fff1b8" stroke="#faad14" stroke-width="3"/>
+    <text x="0" y="0" font-size="15" font-weight="bold" text-anchor="middle">RLFHL</text>
+    <text x="0" y="20" font-size="13" text-anchor="middle">Gateway</text>
+    <circle cx="0" cy="0" r="100" fill="none" stroke="#52c41a" stroke-width="2" stroke-dasharray="6,4"/>
+    <circle cx="0" cy="0" r="300" fill="none" stroke="#faad14" stroke-width="2" stroke-dasharray="6,4"/>
+  </g>
+
+  <!-- Right -->
+  <g transform="translate(820,380)">
+    <circle cx="0" cy="0" r="60" fill="#fff1b8" stroke="#faad14" stroke-width="3"/>
+    <text x="0" y="0" font-size="15" font-weight="bold" text-anchor="middle">RLFHL</text>
+    <text x="0" y="20" font-size="13" text-anchor="middle">Gateway</text>
+    <circle cx="0" cy="0" r="100" fill="none" stroke="#52c41a" stroke-width="2" stroke-dasharray="6,4"/>
+    <circle cx="0" cy="0" r="300" fill="none" stroke="#faad14" stroke-width="2" stroke-dasharray="6,4"/>
+  </g>
+
+  <!-- Bottom -->
+  <g transform="translate(500,620)">
+    <circle cx="0" cy="0" r="60" fill="#fff1b8" stroke="#faad14" stroke-width="3"/>
+    <text x="0" y="0" font-size="15" font-weight="bold" text-anchor="middle">RLFHL</text>
+    <text x="0" y="20" font-size="13" text-anchor="middle">Gateway</text>
+    <circle cx="0" cy="0" r="100" fill="none" stroke="#52c41a" stroke-width="2" stroke-dasharray="6,4"/>
+    <circle cx="0" cy="0" r="300" fill="none" stroke="#faad14" stroke-width="2" stroke-dasharray="6,4"/>
+  </g>
+
+  <!-- Long-range HaLow mesh links between gateways -->
+  <line x1="500" y1="290" x2="180" y2="380" stroke="#faad14" stroke-width="2.5" stroke-dasharray="8,5"/>
+  <line x1="500" y1="290" x2="820" y2="380" stroke="#faad14" stroke-width="2.5" stroke-dasharray="8,5"/>
+  <line x1="500" y1="290" x2="500" y2="560" stroke="#faad14" stroke-width="2.5" stroke-dasharray="8,5"/>
+  <line x1="180" y1="380" x2="500" y2="620" stroke="#faad14" stroke-width="2.5" stroke-dasharray="8,5"/>
+  <line x1="820" y1="380" x2="500" y2="620" stroke="#faad14" stroke-width="2.5" stroke-dasharray="8,5"/>
+  <line x1="180" y1="380" x2="820" y2="380" stroke="#faad14" stroke-width="2.5" stroke-dasharray="8,5"/>
+
+  <!-- Personal devices (inside 2.4GHz circles) -->
+  <!-- Central -->
+  <g transform="translate(380,140)"><rect x="-40" y="-20" width="80" height="40" rx="6" fill="#d9f7be" stroke="#52c41a" stroke-width="2"/><text x="0" y="5" font-size="11" text-anchor="middle">Laptop</text></g>
+  <g transform="translate(620,140)"><rect x="-30" y="-20" width="60" height="40" rx="6" fill="#d9f7be" stroke="#52c41a" stroke-width="2"/><text x="0" y="5" font-size="11" text-anchor="middle">Phone</text></g>
+
+  <!-- Left -->
+  <g transform="translate(90,340)"><rect x="-35" y="-18" width="70" height="36" rx="6" fill="#d9f7be" stroke="#52c41a" stroke-width="2"/><text x="0" y="5" font-size="10" text-anchor="middle">Phone</text></g>
+  <g transform="translate(130,300)"><rect x="-40" y="-20" width="80" height="40" rx="6" fill="#d9f7be" stroke="#52c41a" stroke-width="2"/><text x="0" y="5" font-size="10" text-anchor="middle">Laptop</text></g>
+
+  <!-- Right -->
+  <g transform="translate(880,340)"><rect x="-35" y="-18" width="70" height="36" rx="6" fill="#d9f7be" stroke="#52c41a" stroke-width="2"/><text x="0" y="5" font-size="10" text-anchor="middle">Phone</text></g>
+  <g transform="translate(840,300)"><rect x="-40" y="-20" width="80" height="40" rx="6" fill="#d9f7be" stroke="#52c41a" stroke-width="2"/><text x="0" y="5" font-size="10" text-anchor="middle">Laptop</text></g>
+
+  <!-- Bottom -->
+  <g transform="translate(420,680)"><rect x="-35" y="-18" width="70" height="36" rx="6" fill="#d9f7be" stroke="#52c41a" stroke-width="2"/><text x="0" y="5" font-size="10" text-anchor="middle">Phone</text></g>
+  <g transform="translate(580,680)"><rect x="-40" y="-20" width="80" height="40" rx="6" fill="#d9f7be" stroke="#52c41a" stroke-width="2"/><text x="0" y="5" font-size="10" text-anchor="middle">Laptop</text></g>
+
+  <!-- Sensors / IoT devices -->
+  <g transform="translate(100,480)"><circle cx="0" cy="0" r="26" fill="#e6fffb" stroke="#13c2c2"/><text x="0" y="8" font-size="20" text-anchor="middle">💡</text></g>
+  <g transform="translate(140,540)"><circle cx="0" cy="0" r="26" fill="#e6fffb" stroke="#13c2c2"/><text x="0" y="8" font-size="20" text-anchor="middle">🌡️</text></g>
+  <g transform="translate(220,620)"><circle cx="0" cy="0" r="26" fill="#e6fffb" stroke="#13c2c2"/><text x="0" y="8" font-size="20" text-anchor="middle">🔒</text></g>
+  <g transform="translate(380,700)"><circle cx="0" cy="0" r="30" fill="#e6fffb" stroke="#13c2c2"/><text x="0" y="10" font-size="22" text-anchor="middle">🖥️</text></g>
+  <g transform="translate(620,620)"><circle cx="0" cy="0" r="26" fill="#e6fffb" stroke="#13c2c2"/><text x="0" y="8" font-size="18" text-anchor="middle">📷</text></g>
+  <g transform="translate(880,500)"><circle cx="0" cy="0" r="30" fill="#e6fffb" stroke="#13c2c2"/><text x="0" y="10" font-size="22" text-anchor="middle">📦</text><text x="40" y="5" font-size="11">Scanner</text></g>
+
+  <!-- CONNECTION LINES to closest gateway -->
+  <!-- Central personal devices → central gateway (2.4GHz) -->
+  <line x1="500" y1="290" x2="380" y2="140" stroke="#52c41a" stroke-width="1.5" stroke-dasharray="4,3"/>
+  <line x1="500" y1="290" x2="620" y2="140" stroke="#52c41a" stroke-width="1.5" stroke-dasharray="4,3"/>
+
+  <!-- Left personal + sensors → left gateway -->
+  <line x1="180" y1="380" x2="90" y2="340" stroke="#52c41a" stroke-width="1.5" stroke-dasharray="4,3"/>   <!-- phone -->
+  <line x1="180" y1="380" x2="130" y2="300" stroke="#52c41a" stroke-width="1.5" stroke-dasharray="4,3"/>   <!-- laptop -->
+  <line x1="180" y1="380" x2="100" y2="480" stroke="#13c2c2" stroke-width="1.5" stroke-dasharray="3,3"/>    <!-- light -->
+  <line x1="180" y1="380" x2="140" y2="540" stroke="#13c2c2" stroke-width="1.5" stroke-dasharray="3,3"/>    <!-- temp -->
+  <line x1="180" y1="380" x2="220" y2="620" stroke="#13c2c2" stroke-width="1.5" stroke-dasharray="3,3"/>    <!-- lock -->
+
+  <!-- Right personal + devices → right gateway -->
+  <line x1="820" y1="380" x2="880" y2="340" stroke="#52c41a" stroke-width="1.5" stroke-dasharray="4,3"/>   <!-- phone -->
+  <line x1="820" y1="380" x2="840" y2="300" stroke="#52c41a" stroke-width="1.5" stroke-dasharray="4,3"/>   <!-- laptop -->
+  <line x1="820" y1="380" x2="620" y2="620" stroke="#13c2c2" stroke-width="1.5" stroke-dasharray="3,3"/>    <!-- camera -->
+  <line x1="820" y1="380" x2="880" y2="500" stroke="#13c2c2" stroke-width="1.5" stroke-dasharray="3,3"/>    <!-- scanner -->
+
+  <!-- Bottom personal + devices → bottom gateway -->
+  <line x1="500" y1="620" x2="420" y2="680" stroke="#52c41a" stroke-width="1.5" stroke-dasharray="4,3"/>   <!-- phone -->
+  <line x1="500" y1="620" x2="580" y2="680" stroke="#52c41a" stroke-width="1.5" stroke-dasharray="4,3"/>   <!-- laptop -->
+  <line x1="500" y1="620" x2="380" y2="700" stroke="#13c2c2" stroke-width="1.5" stroke-dasharray="3,3"/>    <!-- computer -->
+
+  <!-- Descriptive texts (restored) -->
+  <text x="720" y="180" font-family="Arial, sans-serif" font-size="12" fill="#333">RLFHL Gateway serves as Wi-Fi HaLow IoT Gateway central</text>
+  <text x="720" y="195" font-family="Arial, sans-serif" font-size="12" fill="#333">controller. It's ideally placed to distribute network signals</text>
+  <text x="720" y="210" font-family="Arial, sans-serif" font-size="12" fill="#333">effectively to Wi-Fi HaLow devices via star topology. This</text>
+  <text x="720" y="225" font-family="Arial, sans-serif" font-size="12" fill="#333">setup boosts the network's range and ensures a solid, steady</text>
+  <text x="720" y="240" font-family="Arial, sans-serif" font-size="12" fill="#333">connection for all connected devices, leading to reliable</text>
+  <text x="720" y="255" font-family="Arial, sans-serif" font-size="12" fill="#333">wireless communication.</text>
+
+  <text x="720" y="320" font-family="Arial, sans-serif" font-size="12" fill="#333">The concept of a Wi-Fi HaLow Mesh network is as follows:</text>
+  <text x="720" y="335" font-family="Arial, sans-serif" font-size="12" fill="#333">All devices under the same gateway share a single SSID,</text>
+  <text x="720" y="350" font-family="Arial, sans-serif" font-size="12" fill="#333">forming a Mesh network. This setup enhances coverage and</text>
+  <text x="720" y="365" font-family="Arial, sans-serif" font-size="12" fill="#333">signal strength, providing stable connectivity, and is</text>
+  <text x="720" y="380" font-family="Arial, sans-serif" font-size="12" fill="#333">particularly suitable for smart home and IoT applications.</text>
+
+  <text x="820" y="500" font-family="Arial, sans-serif" font-size="12" fill="#333" text-anchor="middle">RLFHL Gateway (Wearable variant)</text>
+  <text x="820" y="515" font-family="Arial, sans-serif" font-size="12" fill="#333" text-anchor="middle">featuring dual-band capabilities with both 2.4GHz and</text>
+  <text x="820" y="530" font-family="Arial, sans-serif" font-size="12" fill="#333" text-anchor="middle">Sub-1GHz frequencies, offers a robust wireless connection</text>
+  <text x="820" y="545" font-family="Arial, sans-serif" font-size="12" fill="#333" text-anchor="middle">up to 2 kilometers from the access point,</text>
+  <text x="820" y="560" font-family="Arial, sans-serif" font-size="12" fill="#333" text-anchor="middle">ensuring consistent internet access on the go.</text>
+
+  <text x="180" y="500" font-family="Arial, sans-serif" font-size="12" fill="#333" text-anchor="middle">RLFHL Gateway (DIY Kit variant)</text>
+  <text x="180" y="515" font-family="Arial, sans-serif" font-size="12" fill="#333" text-anchor="middle">could use AC input and output for power input convert to</text>
+  <text x="180" y="530" font-family="Arial, sans-serif" font-size="12" fill="#333" text-anchor="middle">3.3V DC, PWM control lamp and other industrial devices.</text>
+  <text x="180" y="545" font-family="Arial, sans-serif" font-size="12" fill="#333" text-anchor="middle">All Sensors could link with I²C connection and streamlined</text>
+  <text x="180" y="560" font-family="Arial, sans-serif" font-size="12" fill="#333" text-anchor="middle">UART data exchange.</text>
+
+  <!-- Bottom note -->
+  <text x="500" y="800" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#555">Hybrid Mesh + Star Topology • Devices connected to closest gateway via 2.4GHz (local) or HaLow (long-range)</text>
+</svg>
diff --git a/index.html b/index.html
index 45c7abe..550c380 100644
--- a/index.html
+++ b/index.html
@@ -809,39 +809,7 @@
 				<section>
 					<h2>9. Network Topology Overview</h2>
 
-					<figure class="diagram">
-						<svg viewBox="0 0 800 500" width="100%" height="auto">
-							<rect x="0" y="0" width="800" height="500" fill="#111820"/>
-							<circle cx="400" cy="90" r="40" fill="#1e88e5"/>
-							<text x="400" y="95" fill="#ffffff" text-anchor="middle">Gateway</text>
-
-							<circle cx="180" cy="250" r="35" fill="#43a047"/>
-							<circle cx="400" cy="320" r="35" fill="#43a047"/>
-							<circle cx="620" cy="250" r="35" fill="#43a047"/>
-
-							<line x1="400" y1="130" x2="180" y2="215" stroke="#90caf9"/>
-							<line x1="400" y1="130" x2="400" y2="285" stroke="#90caf9"/>
-							<line x1="400" y1="130" x2="620" y2="215" stroke="#90caf9"/>
-
-							<line x1="180" y1="250" x2="400" y2="320" stroke="#90caf9"/>
-							<line x1="400" y1="320" x2="620" y2="250" stroke="#90caf9"/>
-
-							<text x="180" y="255" fill="#ffffff" text-anchor="middle">Node</text>
-							<text x="400" y="325" fill="#ffffff" text-anchor="middle">Node</text>
-							<text x="620" y="255" fill="#ffffff" text-anchor="middle">Node</text>
-
-							<!-- Additional nodes to show mesh density -->
-							<circle cx="280" cy="180" r="25" fill="#43a047" opacity="0.7"/>
-							<circle cx="520" cy="180" r="25" fill="#43a047" opacity="0.7"/>
-							<circle cx="400" cy="400" r="25" fill="#43a047" opacity="0.7"/>
-						</svg>
-						<figcaption style="text-align: center; margin-top: 15px;">
-							<em
-								>Self-forming mesh with multiple redundant paths. Network remains connected even
-								with node loss (grayed nodes).</em
-							>
-						</figcaption>
-					</figure>
+					<img src="figure.svg" alt="RLFHL Tactical Wi-Fi HaLow MESH Network">
 				</section>
 			</article>
 		</main>