feat(ui): enhance web interface with new logtail and web configuration features

Signed-off-by: Jeroen Oudshoorn <oudshoorn.jeroen@gmail.com>

pwnagotchi/plugins/default/bt-tether.py

@@ -60,7 +60,7 @@ TEMPLATE = """
         #searchText:focus {
             outline: none;
             border-color: var(--accent);
-            box-shadow: 0 0 15px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1);
+            box-shadow: 0 0 15px rgba(76, 175, 80, 0.1);
             background-color: #1e1e1e;
         }
 
@@ -105,7 +105,7 @@ TEMPLATE = """
         }
 
         tbody tr:hover {
-            background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.05);
+            background-color: rgba(76, 175, 80, 0.05);
             transition: background-color 0.2s ease;
         }
 

pwnagotchi/plugins/default/logtail.py

@@ -116,7 +116,7 @@ INDEX = """
     }
 
     tbody tr:hover {
-        background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.05);
+        background-color: rgba(76, 175, 80, 0.05);
         transition: background-color 0.2s ease;
     }
 

pwnagotchi/plugins/default/session-stats.py

@@ -73,7 +73,7 @@ TEMPLATE = """
         .stat-card:hover {
             border-color: var(--accent);
             transform: translateY(-3px);
-            box-shadow: 0 6px 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1);
+            box-shadow: 0 6px 20px rgba(76, 175, 80, 0.1);
         }
 
         .stat-label {
@@ -133,7 +133,7 @@ TEMPLATE = """
 
         div.chart:hover {
             border-color: var(--accent);
-            box-shadow: 0 8px 25px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1);
+            box-shadow: 0 8px 25px rgba(76, 175, 80, 0.1);
         }
 
         div.chart canvas {
@@ -240,14 +240,6 @@ TEMPLATE = """
         }
     }
 
-    function getTransparentColor(color) {
-        // Convert rgb() to rgba() with 0.2 opacity, or append hex opacity
-        if (color.startsWith('rgb(')) {
-            return color.replace('rgb(', 'rgba(').replace(')', ', 0.2)');
-        }
-        return color + '33'; // hex format
-    }
-
     function createChart(elementId, title, data) {
         const container = document.getElementById(elementId);
         if (!container || !data.values || data.values.length === 0) return;
@@ -269,7 +261,7 @@ TEMPLATE = """
                 label: data.labels[index],
                 data: chartData,
                 borderColor: color,
-                backgroundColor: getTransparentColor(color),
+                backgroundColor: color + '33',
                 borderWidth: 2,
                 fill: true,
                 tension: 0.1,
@@ -361,15 +353,7 @@ TEMPLATE = """
     }
 
     function getChartColor(index) {
-        // Get accent color from CSS root variables
-        const root = document.documentElement;
-        const r = getComputedStyle(root).getPropertyValue('--accent-r').trim();
-        const g = getComputedStyle(root).getPropertyValue('--accent-g').trim();
-        const b = getComputedStyle(root).getPropertyValue('--accent-b').trim();
-        const accentColor = `rgb(${r},${g},${b})`;
-        // Use accent color as first chart color, then secondary colors
-        const colors = [accentColor, '#ff9800', '#2196f3', '#f44336', '#9c27b0', '#00bcd4'];
-        return colors[index % colors.length];
+        return ['#4caf50', '#ff9800', '#2196f3', '#f44336', '#9c27b0', '#00bcd4'][index % 6];
     }
 
     async function updateStats() {

pwnagotchi/plugins/default/webcfg.py

@@ -57,6 +57,32 @@ INDEX = """
         cursor: pointer;
     }
 
+    /* Add Button */
+    #btnAdd {
+        padding: 10px 14px;
+        min-width: auto;
+        background-color: var(--accent);
+        color: #000;
+        border: none;
+        border-radius: 6px;
+        font-family: var(--font-pixel);
+        font-size: 1.2rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
+    }
+
+    #btnAdd:hover {
+        background-color: var(--accent-hover);
+        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
+        transform: translateY(-2px);
+    }
+
+    #btnAdd:active {
+        transform: translateY(0);
+    }
+
     /* Wrapper spans */
     #divTop > span {
         display: flex;
@@ -105,7 +131,7 @@ INDEX = """
     }
 
     tbody tr:hover {
-        background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.05);
+        background-color: rgba(76, 175, 80, 0.05);
         transition: background-color 0.2s ease;
     }
 
@@ -177,9 +203,51 @@ INDEX = """
         margin-top: 2rem;
     }
 
-    #divSaveTop .btn {
+    .btn-save,
+    .btn-save-caution {
         flex: 1;
         min-width: 150px;
+        padding: 12px 20px;
+        font-size: 0.9rem;
+        font-family: var(--font-pixel);
+        text-transform: uppercase;
+        font-weight: 600;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .btn-save {
+        background-color: var(--accent);
+        color: #000;
+        box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
+    }
+
+    .btn-save:hover {
+        background-color: var(--accent-hover);
+        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
+        transform: translateY(-2px);
+    }
+
+    .btn-save:active {
+        transform: translateY(0);
+    }
+
+    .btn-save-caution {
+        background-color: var(--danger);
+        color: #fff;
+        box-shadow: 0 2px 8px rgba(255, 85, 85, 0.2);
+    }
+
+    .btn-save-caution:hover {
+        background-color: var(--danger-hover);
+        box-shadow: 0 4px 12px rgba(255, 85, 85, 0.3);
+        transform: translateY(-2px);
+    }
+
+    .btn-save-caution:active {
+        transform: translateY(0);
     }
 
     /* Responsive Design */
@@ -213,6 +281,12 @@ INDEX = """
             flex-direction: column;
             gap: 0.75rem;
         }
+
+        .btn-save,
+        .btn-save-caution {
+            width: 100%;
+            min-width: auto;
+        }
     }
 
     @media screen and (max-width: 480px) {
@@ -251,6 +325,13 @@ INDEX = """
             margin-bottom: 70px;
         }
 
+        .btn-save,
+        .btn-save-caution {
+            width: 100%;
+            min-width: auto;
+            padding: 12px 16px;
+        }
+
         /* Mobile table display */
         table, tr, td {
             padding: 0;
@@ -318,14 +399,14 @@ INDEX = """
     <div id="divTop">
         <input type="text" id="searchText" placeholder="Search for options ..." title="Type an option name">
         <span><select id="selAddType"><option value="text">Text</option><option value="number">Number</option></select></span>
-        <span><button class="btn primary" type="button" onclick="addOption()">+</button></span>
+        <span><button id="btnAdd" type="button" onclick="addOption()">+</button></span>
     </div>
     
     <div class="table-container" id="content"></div>
 
     <div id="divSaveTop">
-        <button class="btn primary" type="button" onclick="saveConfig()">Save and restart</button>
-        <button class="btn danger" type="button" onclick="saveConfigNoRestart()">Merge and Save (CAUTION)</button>
+        <button class="btn-save" type="button" onclick="saveConfig()">Save and restart</button>
+        <button class="btn-save-caution" type="button" onclick="saveConfigNoRestart()">Merge and Save (CAUTION)</button>
     </div>
 {% endblock %}
 

pwnagotchi/ui/hw/libs/whisplay/whisplaydriver.py

@@ -94,8 +94,7 @@ class WhisPlayBoard:
             self.button_release_callback = None
 
         # 初始化 SPI
-        self.spi = spidev.SpiDev()
-        self.spi.open(0, 0)
+        self.spi = spidev.SpiDev(0, 0)
         self.spi.max_speed_hz = 100_000_000
         self.spi.mode = 0b00
 

pwnagotchi/ui/web/static/css/inbox.css

@@ -154,7 +154,7 @@
 .unread {
   font-weight: 600;
   color: var(--text-bright);
-  background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15);
+  background-color: rgba(76, 175, 80, 0.15);
   border-left: 3px solid var(--accent);
   padding-left: calc(1rem - 3px);
 }

pwnagotchi/ui/web/static/css/jquery.jqplot.css

@@ -1,259 +0,0 @@
-/*rules for the plot target div.  These will be cascaded down to all plot elements according to css rules*/
-.jqplot-target {
-    position: relative;
-    color: #666666;
-    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
-    font-size: 1em;
-/*    height: 300px;
-    width: 400px;*/
-}
-
-/*rules applied to all axes*/
-.jqplot-axis {
-    font-size: 0.75em;
-}
-
-.jqplot-xaxis {
-    margin-top: 10px;
-}
-
-.jqplot-x2axis {
-    margin-bottom: 10px;
-}
-
-.jqplot-yaxis {
-    margin-right: 10px;
-}
-
-.jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis, .jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis, .jqplot-yMidAxis {
-    margin-left: 10px;
-    margin-right: 10px;
-}
-
-/*rules applied to all axis tick divs*/
-.jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick, .jqplot-yMidAxis-tick {
-    position: absolute;
-    white-space: pre;
-}
-
-
-.jqplot-xaxis-tick {
-    top: 0px;
-    /* initial position untill tick is drawn in proper place */
-    left: 15px;
-/*    padding-top: 10px;*/
-    vertical-align: top;
-}
-
-.jqplot-x2axis-tick {
-    bottom: 0px;
-    /* initial position untill tick is drawn in proper place */
-    left: 15px;
-/*    padding-bottom: 10px;*/
-    vertical-align: bottom;
-}
-
-.jqplot-yaxis-tick {
-    right: 0px;
-    /* initial position untill tick is drawn in proper place */
-    top: 15px;
-/*    padding-right: 10px;*/
-    text-align: right;
-}
-
-.jqplot-yaxis-tick.jqplot-breakTick {
-    right: -20px;
-    margin-right: 0px;
-    padding:1px 5px 1px 5px;
-    /*background-color: white;*/
-    z-index: 2;
-    font-size: 1.5em;
-}
-
-.jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick {
-    left: 0px;
-    /* initial position untill tick is drawn in proper place */
-    top: 15px;
-/*    padding-left: 10px;*/
-/*    padding-right: 15px;*/
-    text-align: left;
-}
-
-.jqplot-yMidAxis-tick {
-    text-align: center;
-    white-space: nowrap;
-}
-
-.jqplot-xaxis-label {
-    margin-top: 10px;
-    font-size: 11pt;
-    position: absolute;
-}
-
-.jqplot-x2axis-label {
-    margin-bottom: 10px;
-    font-size: 11pt;
-    position: absolute;
-}
-
-.jqplot-yaxis-label {
-    margin-right: 10px;
-/*    text-align: center;*/
-    font-size: 11pt;
-    position: absolute;
-}
-
-.jqplot-yMidAxis-label {
-    font-size: 11pt;
-    position: absolute;
-}
-
-.jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label, .jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label, .jqplot-y8axis-label, .jqplot-y9axis-label {
-/*    text-align: center;*/
-    font-size: 11pt;
-    margin-left: 10px;
-    position: absolute;
-}
-
-.jqplot-meterGauge-tick {
-    font-size: 0.75em;
-    color: #999999;
-}
-
-.jqplot-meterGauge-label {
-    font-size: 1em;
-    color: #999999;
-}
-
-table.jqplot-table-legend {
-    margin-top: 12px;
-    margin-bottom: 12px;
-    margin-left: 12px;
-    margin-right: 12px;
-}
-
-table.jqplot-table-legend, table.jqplot-cursor-legend {
-    background-color: rgba(255,255,255,0.6);
-    border: 1px solid #cccccc;
-    position: absolute;
-    font-size: 0.75em;
-}
-
-td.jqplot-table-legend {
-    vertical-align:middle;
-}
-
-/*
-These rules could be used instead of assigning
-element styles and relying on js object properties.
-*/
-
-/*
-td.jqplot-table-legend-swatch {
-    padding-top: 0.5em;
-    text-align: center;
-}
-
-tr.jqplot-table-legend:first td.jqplot-table-legend-swatch {
-    padding-top: 0px;
-}
-*/
-
-td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active {
-    cursor: pointer;
-}
-
-.jqplot-table-legend .jqplot-series-hidden {
-    text-decoration: line-through;
-}
-
-div.jqplot-table-legend-swatch-outline {
-    border: 1px solid #cccccc;
-    padding:1px;
-}
-
-div.jqplot-table-legend-swatch {
-    width:0px;
-    height:0px;
-    border-top-width: 5px;
-    border-bottom-width: 5px;
-    border-left-width: 6px;
-    border-right-width: 6px;
-    border-top-style: solid;
-    border-bottom-style: solid;
-    border-left-style: solid;
-    border-right-style: solid;
-}
-
-.jqplot-title {
-    top: 0px;
-    left: 0px;
-    padding-bottom: 0.5em;
-    font-size: 1.2em;
-}
-
-table.jqplot-cursor-tooltip {
-    border: 1px solid #cccccc;
-    font-size: 0.75em;
-}
-
-
-.jqplot-cursor-tooltip {
-    border: 1px solid #cccccc;
-    font-size: 0.75em;
-    white-space: nowrap;
-    background: rgba(208,208,208,0.5);
-    padding: 1px;
-}
-
-.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip {
-    border: 1px solid #cccccc;
-    font-size: 0.75em;
-    white-space: nowrap;
-    background: rgba(208,208,208,0.5);
-    padding: 1px;
-}
-
-.jqplot-point-label {
-    font-size: 0.75em;
-    z-index: 2;
-}
-      
-td.jqplot-cursor-legend-swatch {
-    vertical-align: middle;
-    text-align: center;
-}
-
-div.jqplot-cursor-legend-swatch {
-    width: 1.2em;
-    height: 0.7em;
-}
-
-.jqplot-error {
-/*   Styles added to the plot target container when there is an error go here.*/
-    text-align: center;
-}
-
-.jqplot-error-message {
-/*    Styling of the custom error message div goes here.*/
-    position: relative;
-    top: 46%;
-    display: inline-block;
-}
-
-div.jqplot-bubble-label {
-    font-size: 0.8em;
-/*    background: rgba(90%, 90%, 90%, 0.15);*/
-    padding-left: 2px;
-    padding-right: 2px;
-    color: rgb(20%, 20%, 20%);
-}
-
-div.jqplot-bubble-label.jqplot-bubble-label-highlight {
-    background: rgba(90%, 90%, 90%, 0.7);
-}
-
-div.jqplot-noData-container {
-    text-align: center;
-    background-color: rgba(96%, 96%, 96%, 0.3);
-}

pwnagotchi/ui/web/static/css/jquery.jqplot.min.css

@@ -1 +0,0 @@
-.jqplot-xaxis,.jqplot-xaxis-label{margin-top:10px}.jqplot-x2axis,.jqplot-x2axis-label{margin-bottom:10px}.jqplot-target{position:relative;color:#666;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;font-size:1em}.jqplot-axis{font-size:.75em}.jqplot-yaxis{margin-right:10px}.jqplot-y2axis,.jqplot-y3axis,.jqplot-y4axis,.jqplot-y5axis,.jqplot-y6axis,.jqplot-y7axis,.jqplot-y8axis,.jqplot-y9axis,.jqplot-yMidAxis{margin-left:10px;margin-right:10px}.jqplot-axis-tick,.jqplot-x2axis-tick,.jqplot-xaxis-tick,.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick,.jqplot-yMidAxis-tick,.jqplot-yaxis-tick{position:absolute;white-space:pre}.jqplot-xaxis-tick{top:0;left:15px;vertical-align:top}.jqplot-x2axis-tick{bottom:0;left:15px;vertical-align:bottom}.jqplot-yaxis-tick{right:0;top:15px;text-align:right}.jqplot-yaxis-tick.jqplot-breakTick{right:-20px;margin-right:0;padding:1px 5px;z-index:2;font-size:1.5em}.jqplot-x2axis-label,.jqplot-xaxis-label,.jqplot-yMidAxis-label,.jqplot-yaxis-label{font-size:11pt;position:absolute}.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick{left:0;top:15px;text-align:left}.jqplot-yMidAxis-tick{text-align:center;white-space:nowrap}.jqplot-yaxis-label{margin-right:10px}.jqplot-y2axis-label,.jqplot-y3axis-label,.jqplot-y4axis-label,.jqplot-y5axis-label,.jqplot-y6axis-label,.jqplot-y7axis-label,.jqplot-y8axis-label,.jqplot-y9axis-label{font-size:11pt;margin-left:10px;position:absolute}.jqplot-meterGauge-tick{font-size:.75em;color:#999}.jqplot-meterGauge-label{font-size:1em;color:#999}table.jqplot-table-legend{margin:12px}table.jqplot-cursor-legend,table.jqplot-table-legend{background-color:rgba(255,255,255,.6);border:1px solid #ccc;position:absolute;font-size:.75em}td.jqplot-table-legend{vertical-align:middle}td.jqplot-seriesToggle:active,td.jqplot-seriesToggle:hover{cursor:pointer}.jqplot-table-legend .jqplot-series-hidden{text-decoration:line-through}div.jqplot-table-legend-swatch-outline{border:1px solid #ccc;padding:1px}div.jqplot-table-legend-swatch{width:0;height:0;border-width:5px 6px;border-style:solid}.jqplot-title{top:0;left:0;padding-bottom:.5em;font-size:1.2em}table.jqplot-cursor-tooltip{border:1px solid #ccc;font-size:.75em}.jqplot-canvasOverlay-tooltip,.jqplot-cursor-tooltip,.jqplot-highlighter-tooltip{border:1px solid #ccc;font-size:.75em;white-space:nowrap;background:rgba(208,208,208,.5);padding:1px}.jqplot-point-label{font-size:.75em;z-index:2}td.jqplot-cursor-legend-swatch{vertical-align:middle;text-align:center}div.jqplot-cursor-legend-swatch{width:1.2em;height:.7em}.jqplot-error{text-align:center}.jqplot-error-message{position:relative;top:46%;display:inline-block}div.jqplot-bubble-label{font-size:.8em;padding-left:2px;padding-right:2px;color:rgb(20%,20%,20%)}div.jqplot-bubble-label.jqplot-bubble-label-highlight{background:rgba(90%,90%,90%,.7)}div.jqplot-noData-container{text-align:center;background-color:rgba(96%,96%,96%,.3)}

pwnagotchi/ui/web/static/css/plugins.css

@@ -18,8 +18,7 @@
 
 .plugin-header {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   gap: 0.5rem;
   width: 100%;
@@ -29,7 +28,6 @@
 .plugin-header h4 {
   flex: 0 1 auto;
   text-align: center;
-  margin: 0 0 0.25rem 0 !important;
 }
 
 .plugin-header .badge.version {
@@ -41,34 +39,6 @@
 .tooltip {
   display: flex;
   flex-direction: column;
-  position: relative;
-}
-
-.tooltip .tooltiptext {
-  visibility: hidden;
-  background-color: #333;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  padding: 0.5rem;
-  position: absolute;
-  z-index: 1000;
-  width: 200px;
-  font-size: 0.75rem;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  white-space: normal;
-  left: 50%;
-  top: calc(100% + 0.5rem);
-  transform: translateX(-50%);
-  margin: 0 !important;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
 }
 
 .plugin-badges {

pwnagotchi/ui/web/static/css/style.css

@@ -15,14 +15,15 @@
 }
 
 :root {
-  /* Colors - Default */
+  /* Colors - Dark Mode (Default) */
   --bg-color: #121212;
   --card-bg: #1e1e1e;
   --text-main: #e0e0e0;
   --text-bright: #ffffff;
   --text-body: #bfbfbf;
   --text-muted: #888;
-  --accent: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
+  --accent: #4caf50;
+  --accent-hover: #66bb6a;
   --danger: #ff5555;
   --danger-hover: #ff7777;
   --info: #4fc3f7;
@@ -37,10 +38,26 @@
   /* Spacing & Effects */
   --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 15px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1);
+  --shadow-md: 0 4px 15px rgba(76, 175, 80, 0.1);
   --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4);
 }
 
+body.dark-mode {
+  --bg-color: #121212;
+  --card-bg: #1e1e1e;
+  --text-main: #e0e0e0;
+  --text-muted: #888;
+  --accent: #4caf50;
+  --accent-hover: #66bb6a;
+  --danger: #ff5555;
+  --danger-hover: #ff7777;
+  --info: #4fc3f7;
+  --border-color: #333;
+  --bg-hover: #252525;
+  --bg-secondary: #161616;
+  --shadow-md: 0 4px 15px rgba(76, 175, 80, 0.1);
+}
+
 * {
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
@@ -80,8 +97,7 @@ a {
 }
 
 a:hover {
-  color: var(--accent);
-  filter: brightness(1.3);
+  color: var(--accent-hover);
 }
 
 /* ============================================
@@ -167,7 +183,7 @@ strong, b {
   padding: 40px 20px;
   text-align: center;
   margin-bottom: 40px;
-  background: linear-gradient(to bottom, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.05), transparent);
+  background: linear-gradient(to bottom, rgba(76, 175, 80, 0.05), transparent);
   border-bottom: 1px solid #2a2a2a;
 }
 
@@ -180,7 +196,7 @@ strong, b {
   line-height: 0.9;
   text-transform: uppercase;
   letter-spacing: 2px;
-  text-shadow: 0 0 15px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.3);
+  text-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
 }
 
 /* ============================================
@@ -227,14 +243,14 @@ strong, b {
 
 .navbar-item a:hover {
   color: #ffffff;
-  background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08);
+  background-color: rgba(76, 175, 80, 0.08);
   text-decoration: none;
 }
 
 .navbar-item a.active {
-  color: var(--accent);
-  border-bottom-color: var(--accent);
-  background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1);
+  color: #4caf50;
+  border-bottom-color: #4caf50;
+  background-color: rgba(76, 175, 80, 0.1);
 }
 
 .navbar-icon {
@@ -246,74 +262,56 @@ strong, b {
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
-  -webkit-mask-size: contain;
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-size: contain;
-  mask-repeat: no-repeat;
-  mask-position: center;
 }
 
-/* Navigation Icons - Using mask-image with currentColor via background-color */
+/* Navigation Icons - Default State */
 #home .navbar-icon {
-  -webkit-mask-image: url("../svg/home.svg");
-  mask-image: url("../svg/home.svg");
-  background-color: rgb(176,176,176);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
 #inbox .navbar-icon {
-  -webkit-mask-image: url("../svg/inbox.svg");
-  mask-image: url("../svg/inbox.svg");
-  background-color: rgb(176,176,176);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22 6 12 13 2 6'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
 #new .navbar-icon {
-  -webkit-mask-image: url("../svg/new.svg");
-  mask-image: url("../svg/new.svg");
-  background-color: rgb(176,176,176);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
 }
 
 #profile .navbar-icon {
-  -webkit-mask-image: url("../svg/profile.svg");
-  mask-image: url("../svg/profile.svg");
-  background-color: rgb(176,176,176);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
 }
 
 #peers .navbar-icon {
-  -webkit-mask-image: url("../svg/peers.svg");
-  mask-image: url("../svg/peers.svg");
-  background-color: rgb(176,176,176);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='9' cy='7' r='4'%3E%3C/circle%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'%3E%3C/path%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'%3E%3C/path%3E%3C/svg%3E");
 }
 
 #plugins .navbar-icon {
-  -webkit-mask-image: url("../svg/plugins.svg");
-  mask-image: url("../svg/plugins.svg");
-  background-color: rgb(176,176,176);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Cpath d='M12 1v6m0 6v6'%3E%3C/path%3E%3Cpath d='M4.22 4.22l4.24 4.24m2.12 2.12l4.24 4.24'%3E%3C/path%3E%3Cpath d='M1 12h6m6 0h6'%3E%3C/path%3E%3Cpath d='M4.22 19.78l4.24-4.24m2.12-2.12l4.24-4.24'%3E%3C/path%3E%3C/svg%3E");
 }
 
-/* Active state - Icons use accent color */
+/* Active State - Icons turn green */
 #home.active .navbar-icon {
-  background-color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
 #inbox.active .navbar-icon {
-  background-color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22 6 12 13 2 6'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
 #new.active .navbar-icon {
-  background-color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
 }
 
 #profile.active .navbar-icon {
-  background-color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
 }
 
 #peers.active .navbar-icon {
-  background-color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='9' cy='7' r='4'%3E%3C/circle%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'%3E%3C/path%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'%3E%3C/path%3E%3C/svg%3E");
 }
 
 #plugins.active .navbar-icon {
-  background-color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Cpath d='M12 1v6m0 6v6'%3E%3C/path%3E%3Cpath d='M4.22 4.22l4.24 4.24m2.12 2.12l4.24 4.24'%3E%3C/path%3E%3Cpath d='M1 12h6m6 0h6'%3E%3C/path%3E%3Cpath d='M4.22 19.78l4.24-4.24m2.12-2.12l4.24-4.24'%3E%3C/path%3E%3C/svg%3E");
 }
 
 /* ============================================
@@ -336,7 +334,7 @@ h1 {
   margin: 1.5rem 0 1rem 0;
   line-height: 0.9;
   text-transform: uppercase;
-  text-shadow: 0 0 15px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.3);
+  text-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -523,27 +521,21 @@ textarea:focus,
 select:focus {
   outline: none;
   border-color: var(--accent);
-  box-shadow: 0 0 15px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1);
+  box-shadow: 0 0 15px rgba(76, 175, 80, 0.1);
   background-color: #1e1e1e;
 }
 
-/* Select Box Styling - chevron-down.svg as mask with accent color */
+/* Select Box Styling */
 select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
-  -webkit-mask-image: url("../svg/chevron-down.svg");
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: right 10px center;
-  -webkit-mask-size: 20px;
-  mask-image: url("../svg/chevron-down.svg");
-  mask-repeat: no-repeat;
-  mask-position: right 10px center;
-  mask-size: 20px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 20px;
   padding-right: 36px;
   cursor: pointer;
-  color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
-  background-color: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
 }
 
 select::-ms-expand {
@@ -582,7 +574,7 @@ input[type="reset"],
   font-family: var(--font-pixel);
   font-size: 1.2rem;
   cursor: pointer;
-  box-shadow: 0 4px 15px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.4);
+  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
   text-transform: uppercase;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   -webkit-font-smoothing: antialiased;
@@ -599,7 +591,7 @@ input[type="reset"]:hover,
 .btn:hover {
   color: #000;
   background-color: #ffffff;
-  box-shadow: 0 6px 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.5);
+  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5);
   transform: translateY(-2px) scale(1.02);
   text-decoration: none;
 }
@@ -610,7 +602,7 @@ input[type="button"]:active,
 input[type="reset"]:active,
 .btn:active {
   transform: translateY(0) scale(0.98);
-  box-shadow: 0 2px 8px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.3);
+  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
 }
 
 button:disabled,
@@ -707,7 +699,7 @@ input:checked + .slider {
 input:checked + .slider:before {
   transform: translateX(1.2rem);
   background-color: #ffffff;
-  box-shadow: 0 0 8px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.3);
+  box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
 }
 
 .switch-label {
@@ -753,7 +745,7 @@ li {
 }
 
 .list-item:hover {
-  background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.05);
+  background-color: rgba(76, 175, 80, 0.05);
   border-left: 4px solid var(--accent);
   padding-left: calc(1rem - 4px);
   color: var(--text-bright);
@@ -880,9 +872,9 @@ li {
 }
 
 .badge.default {
-  background: #262626;
+  background: #2a3a2a;
   color: #888;
-  border-color: #333;
+  border-color: #3a4a3a;
 }
 
 .tooltip {
@@ -952,7 +944,7 @@ li {
 
 .toast-success {
   border-left-color: var(--accent);
-  background: linear-gradient(135deg, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1), rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.05));
+  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.05));
 }
 
 .toast-info {
@@ -989,10 +981,9 @@ li {
 }
 
 .alert-success {
-  background: linear-gradient(135deg, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15), rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08));
+  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.08));
   border-left-color: var(--accent);
-  color: var(--accent);
-  filter: brightness(1.2);
+  color: #66bb6a;
 }
 
 .alert-info {
@@ -1096,8 +1087,7 @@ code {
 }
 
 .btn.primary:hover {
-  background-color: var(--accent);
-  filter: brightness(1.2);
+  background-color: var(--accent-hover);
   text-decoration: none;
   transform: translateY(-2px);
 }