From 33c24d9fe6881b7046cb4a04d9baf43768204797 Mon Sep 17 00:00:00 2001
From: Alexander Heinke <alexander@nixware.dev>
Date: Sat, 21 Feb 2026 02:11:39 +0100
Subject: [PATCH] Add ShortSlow mode and update design

---
 src/public/index.html | 90 +++++++++++++++++++++++++++----------------
 1 file changed, 57 insertions(+), 33 deletions(-)

diff --git a/src/public/index.html b/src/public/index.html
index 9fae01a..63b9c6b 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -56,50 +56,57 @@
         }
 
         .icon-longfast {
-            background-color: #8c929e;
+            background-color: #009016;
             border-radius: 25px;
-            border: 1px solid white;
+            border: 1px solid #2C2D3C;
         }
 
         .icon-mediumfast {
             background-color: #326be7; 
             border-radius: 25px;
-            border: 1px solid white;
+            border: 1px solid #2C2D3C;
         }
+
+        .icon-shortslow {
+            background-color: #0077e6;
+            border-radius: 25px;
+            border: 1px solid #2C2D3C;
+        }
+
         .icon-mqtt-connected {
             background-color: #2563eb; /* Change to use same color as disconnected // #16a34a; */
             border-radius: 25px;
-            border: 1px solid white;
+            border: 1px solid #2C2D3C;
         }
 
         .icon-mqtt-disconnected {
             background-color: #2563eb;
             border-radius: 25px;
-            border: 1px solid white;
+            border: 1px solid #2C2D3C;
         }
 
         .icon-offline {
-            background-color: #dc2626;
+            background-color: #e2286c;
             border-radius: 25px;
-            border: 1px solid white;
+            border: 1px solid #2C2D3C;
         }
 
         .icon-position-history {
             background-color: #a855f7;
             border-radius: 25px;
-            border: 1px solid white;
+            border: 1px solid #2C2D3C;
         }
 
         .icon-traceroute-start {
             background-color: #16a34a; /* green */
             border-radius: 25px;
-            border: 1px solid white;
+            border: 1px solid #2C2D3C;
         }
 
         .icon-traceroute-end {
             background-color: #dc2626; /* red */
             border-radius: 25px;
-            border: 1px solid white;
+            border: 1px solid #2C2D3C;
         }
 
         .waypoint-label {
@@ -169,7 +176,7 @@
         <div class="flex flex-col h-full">
 
             <!-- header -->
-            <div class="flex p-3 h-16" style="background-color: 30a552;">
+            <div class="flex p-3 h-16" style="background-color: #67EA94;">
 
                 <!-- close mobile search button -->
                 <div v-if="isShowingMobileSearch" class="my-auto">
@@ -183,8 +190,8 @@
                 </div>
 
                 <!-- icon -->
-                <div v-if="!isShowingMobileSearch" class="hidden sm:block my-auto mr-2 ml-2">
-                    <img class="w-8 h-8 rounded" src="icon.png"/>
+                <div v-if="!isShowingMobileSearch" class="sm:block my-auto mr-2 ml-2">
+                    <img class="w-10 h-10 rounded border-2 border-[#2C2D3C]" src="icon.png"/>
                 </div>
 
                 <!-- search bar -->
@@ -222,16 +229,6 @@
 
                 <!-- header action buttons -->
                 <div v-if="!isShowingMobileSearch" class="flex my-auto ml-auto mr-0 sm:mr-2 space-x-1 sm:space-x-2">
-                    <a @click="isShowingInfoModal = true" href="javascript:void(0)" class="tooltip rounded-full">
-                        <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
-                            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
-                            </svg>
-                        </div>
-                        <div class="hidden sm:block">
-                            <span class="tooltip-text">About</span>
-                        </div>
-                    </a>
                     <a @click="isShowingMobileSearch = true" href="javascript:void(0)" class="tooltip rounded-full block lg:hidden">
                         <div id="search-button" class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
                             <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -244,6 +241,16 @@
                             <span class="tooltip-text">Search</span>
                         </div>
                     </a>
+                    <a @click="isShowingHardwareModels = !isShowingHardwareModels" href="javascript:void(0)" class="tooltip rounded-full hidden sm:block">
+                        <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
+                            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
+                            </svg>
+                        </div>
+                        <div class="hidden sm:block">
+                            <span class="tooltip-text">Devices</span>
+                        </div>
+                    </a>
                     <a @click="isShowingSettings = true" href="javascript:void(0)" class="tooltip rounded-full">
                         <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
                             <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@@ -2678,7 +2685,8 @@
         disableClusteringAtZoom: 10, // zoom level where node clustering is disabled
     });
     var nodesBackboneLayerGroup = new L.LayerGroup();
-    var nodesMediumFastLayerGroup = new L.LayerGroup();
+    //var nodesMediumFastLayerGroup = new L.LayerGroup();
+    var nodesShortSlowLayerGroup = new L.LayerGroup();
     var nodesLongFastLayerGroup = new L.LayerGroup();
     var waypointsLayerGroup = new L.LayerGroup();
     var nodePositionHistoryLayerGroup = new L.LayerGroup();
@@ -2696,9 +2704,14 @@
         iconSize: [16, 16], // increase from 12px to 16px to make hover easier
     });
     
-    var iconMediumFast = L.divIcon({
+    /*var iconMediumFast = L.divIcon({
         className: 'icon-mediumfast',
         iconSize: [16, 16], // increase from 12px to 16px to make hover easier
+    });*/
+
+    var iconShortSlow = L.divIcon({
+        className: 'icon-shortslow',
+        iconSize: [16, 16], 
     });
 
     var iconMqttDisconnected = L.divIcon({
@@ -2734,7 +2747,8 @@
         div.style.backgroundColor = 'white';
         div.style.padding = '12px';
         div.innerHTML = `<div style="margin-bottom:6px;"><strong>Legend</strong></div>`
-            + `<div style="display:flex"><div class="icon-mediumfast" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> MediumFast</div>`
+            + `<div style="display:flex"><div class="icon-shortslow" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> ShortSlow</div>`
+            //+ `<div style="display:flex"><div class="icon-mediumfast" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> MediumFast</div>`
             + `<div style="display:flex"><div class="icon-longfast" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> LongFast</div>`
             + `<div style="display:flex"><div class="icon-offline" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> Offline Too Long</div>`
             + `<div style="display:flex"><svg width="16" height="3" style="margin-right:4px;margin-top:auto;margin-bottom:auto;"><line x1="0" y1="1.5" x2="16" y2="1.5" stroke="#f97316" stroke-width="4"/></svg> Traceroute</div>`;
@@ -2763,7 +2777,8 @@
             "All": nodesLayerGroup,
             "Routers": nodesRouterLayerGroup,
             "Backbone": nodesBackboneLayerGroup,
-            "MediumFast": nodesMediumFastLayerGroup,
+            "ShortSlow": nodesShortSlowLayerGroup,
+            //"MediumFast": nodesMediumFastLayerGroup,
             "LongFast": nodesLongFastLayerGroup,
             "Clustered": nodesClusteredLayerGroup,
             "None": new L.LayerGroup(),
@@ -2949,7 +2964,8 @@
         nodesClusteredLayerGroup.clearLayers();
         nodesRouterLayerGroup.clearLayers();
         nodesBackboneLayerGroup.clearLayers();
-        nodesMediumFastLayerGroup.clearLayers();
+        nodesShortSlowLayerGroup.clearLayers();
+        //nodesMediumFastLayerGroup.clearLayers();
         nodesLongFastLayerGroup.clearLayers();
     }
 
@@ -3334,10 +3350,14 @@
             // icon based on channel preset
             var icon = iconLongFast;
 
-            if (node.channel_id == "MediumFast") {
-                icon = iconMediumFast;
+            if (node.channel_id == "ShortSlow") {
+                icon = iconShortSlow;
             }
 
+            /*if (node.channel_id == "MediumFast") {
+                icon = iconMediumFast;
+            }*/
+
             // use offline icon for nodes older than configured node offline age
             if(configNodesOfflineAgeInSeconds){
                 const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at));
@@ -3398,11 +3418,15 @@
                 nodesBackboneLayerGroup.addLayer(marker);
             }
 
-            // add markers for MediumFast channel to layer group
-            if(node.channel_id == "MediumFast") {
-                nodesMediumFastLayerGroup.addLayer(marker);
+            if(node.channel_id == "ShortSlow") {
+                nodesShortSlowLayerGroup.addLayer(marker);
             }
 
+            // add markers for MediumFast channel to layer group
+            /*if(node.channel_id == "MediumFast") {
+                nodesMediumFastLayerGroup.addLayer(marker);
+            }*/
+
             // add markers for LongFast channel to layer group
             if(node.channel_id == "LongFast") {
                 nodesLongFastLayerGroup.addLayer(marker);