feeat: improve icons, update screenshots

public/index.html

@@ -30,9 +30,12 @@
                 </button>
                 <button class="nav-tab" data-view="topology">
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px;">
-                        <path d="M6 3v6M6 15v6M18 3v6M18 15v6"/>
+                        <circle cx="12" cy="4" r="1.6"/>
-                        <rect x="3" y="9" width="6" height="6" rx="2"/>
+                        <circle cx="19" cy="9" r="1.6"/>
-                        <rect x="15" y="9" width="6" height="6" rx="2"/>
+                        <circle cx="16" cy="18" r="1.6"/>
+                        <circle cx="8" cy="18" r="1.6"/>
+                        <circle cx="5" cy="9" r="1.6"/>
+                        <path d="M12 4L16 18M16 18L5 9M5 9L19 9M19 9L8 18M8 18L12 4"/>
                     </svg>
                     Topology
                 </button>

public/scripts/icons.js

@@ -19,7 +19,16 @@
     const Icons = {
         // Navigation / sections
         cluster: (o) => withSvg(`<circle cx="12" cy="12" r="9"/><circle cx="8" cy="10" r="1.5"/><circle cx="16" cy="8" r="1.5"/><circle cx="14" cy="15" r="1.5"/><path d="M9 11l3 3M9 11l6-3"/>`, o),
-        topology: (o) => withSvg(`<path d="M6 3v6M6 15v6M18 3v6M18 15v6"/><rect x="3" y="9" width="6" height="6" rx="2"/><rect x="15" y="9" width="6" height="6" rx="2"/>`, o),
+        topology: (o) => withSvg(`
+            <g transform="rotate(-60 12 12)">
+                <circle cx="12" cy="4" r="1.6"/>
+                <circle cx="19" cy="9" r="1.6"/>
+                <circle cx="16" cy="18" r="1.6"/>
+                <circle cx="8" cy="18" r="1.6"/>
+                <circle cx="5" cy="9" r="1.6"/>
+                <path d="M12 4L16 18M16 18L5 9M5 9L19 9M19 9L8 18M8 18L12 4"/>
+            </g>
+        `, o),
         monitoring: (o) => withSvg(`<path d="M3 12h3l2 7 4-14 3 10 2-6h4"/>`, o),
         firmware: (o) => withSvg(`<path d="M4 7l8-4 8 4v10l-8 4-8-4z"/><path d="M12 8v8"/>`, o),
 

public/styles/main.css

@@ -1,3 +1,8 @@
+/* Slight rotation for the Topology icon in the main navigation only */
+.main-navigation .nav-left .nav-tab[data-view="topology"] > svg {
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+}
 * {
     margin: 0;
     padding: 0;
@@ -27,6 +32,12 @@ h3 > svg,
     vertical-align: middle;
 }
 
+/* Navigation icons slightly larger for readability */
+.nav-tab > svg {
+    width: 18px;
+    height: 18px;
+}
+
 /* Monitoring view: slightly larger summary stat icons */
 .summary-stats .stat-icon > svg {
     width: 22px;