From 1c139887fd0fb2d10e8fe9e66b39392e1c0fb91f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20M=C3=BCller?= <ich@eskimue.de>
Date: Thu, 21 May 2026 19:40:22 +0200
Subject: [PATCH] GUI angepasst

---
 ExoMy_Software-master/gui/index.html | 369 +++++++++++++++++----------
 1 file changed, 232 insertions(+), 137 deletions(-)

diff --git a/ExoMy_Software-master/gui/index.html b/ExoMy_Software-master/gui/index.html
index fa7facf..40b2144 100644
--- a/ExoMy_Software-master/gui/index.html
+++ b/ExoMy_Software-master/gui/index.html
@@ -7,15 +7,15 @@
 <script type="text/javascript" src="./vendor/roslib.min.js"></script>
 <style>
 :root {
-  --bg: #DCE3EC;
+  --bg: #05080F;
   --pri: #0088FF;
-  --sec: #FF6B00;
-  --ok: #00C853;
+  --sec: #FF8C00;
+  --ok: #00ff91;
   --warn: #FFB300;
-  --txt: #0B1525;
-  --txt2: #506070;
-  --panel: rgba(255,255,255,0.93);
-  --border: rgba(0,136,255,0.22);
+  --txt: rgba(0,255,145,.8);
+  --txt2: rgba(0,210,130,.38);
+  --panel: #070D18;
+  --border: rgba(0,255,145,.12);
   --mono: "Consolas", "Cascadia Code", "Cascadia Mono", "Courier New", monospace;
   --disp: "Consolas", "Cascadia Code", "Cascadia Mono", "Courier New", monospace;
 }
@@ -27,8 +27,8 @@ body {
   font-family: var(--mono);
   background-color: var(--bg);
   background-image:
-    linear-gradient(rgba(0,136,255,.06) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(0,136,255,.06) 1px, transparent 1px);
+    linear-gradient(rgba(0,255,145,.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0,255,145,.04) 1px, transparent 1px);
   background-size: 32px 32px;
   color: var(--txt);
   display: flex;
@@ -114,17 +114,17 @@ header {
 .panel {
   position: relative;
   background:
-    linear-gradient(#0088FF,#0088FF) 0 0 / 14px 2px no-repeat,
-    linear-gradient(#0088FF,#0088FF) 0 0 / 2px 14px no-repeat,
-    linear-gradient(#0088FF,#0088FF) 100% 0 / 14px 2px no-repeat,
-    linear-gradient(#0088FF,#0088FF) 100% 0 / 2px 14px no-repeat,
-    linear-gradient(#0088FF,#0088FF) 0 100% / 14px 2px no-repeat,
-    linear-gradient(#0088FF,#0088FF) 0 100% / 2px 14px no-repeat,
-    linear-gradient(#0088FF,#0088FF) 100% 100% / 14px 2px no-repeat,
-    linear-gradient(#0088FF,#0088FF) 100% 100% / 2px 14px no-repeat,
-    rgba(255,255,255,0.93);
-  border: 1px solid var(--border);
-  box-shadow: 0 1px 14px rgba(0,0,0,.06);
+    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 0 / 14px 1px no-repeat,
+    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 0 / 1px 14px no-repeat,
+    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 0 / 14px 1px no-repeat,
+    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 0 / 1px 14px no-repeat,
+    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 100% / 14px 1px no-repeat,
+    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 100% / 1px 14px no-repeat,
+    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 100% / 14px 1px no-repeat,
+    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 100% / 1px 14px no-repeat,
+    #070D18;
+  border: 1px solid rgba(0,255,145,.1);
+  box-shadow: 0 0 24px rgba(0,0,0,.5), inset 0 0 40px rgba(0,255,145,.018);
 }
 
 .p-hdr {
@@ -132,12 +132,12 @@ header {
   align-items: center;
   gap: 7px;
   padding: 7px 12px;
-  border-bottom: 1px solid rgba(0,136,255,.15);
-  background: linear-gradient(90deg, rgba(0,136,255,.07) 0%, transparent 100%);
+  border-bottom: 1px solid rgba(0,255,145,.08);
+  background: linear-gradient(90deg, rgba(0,255,145,.05) 0%, transparent 100%);
 }
-.p-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pri); flex-shrink: 0; }
-.p-lbl { font-size: 8px; letter-spacing: 3px; color: var(--pri); text-transform: uppercase; font-weight: bold; }
-.p-tag { margin-left: auto; font-size: 7px; color: var(--txt2); letter-spacing: 1px; }
+.p-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); flex-shrink: 0; }
+.p-lbl { font-size: 8px; letter-spacing: 3px; color: rgba(0,255,145,.7); text-transform: uppercase; font-weight: bold; }
+.p-tag { margin-left: auto; font-size: 7px; color: rgba(0,255,145,.25); letter-spacing: 1px; }
 
 .main {
   flex: 1;
@@ -166,9 +166,9 @@ header {
   align-items: center;
   justify-content: center;
   padding: 12px 6px;
-  border: 1px solid rgba(0,136,255,.28);
-  background: transparent;
-  color: var(--txt2);
+  border: 1px solid rgba(0,255,145,.18);
+  background: rgba(0,255,145,.03);
+  color: rgba(0,255,145,.35);
   font-family: var(--mono);
   font-size: 11px;
   letter-spacing: 2px;
@@ -177,15 +177,15 @@ header {
   transition: all .18s ease;
 }
 .dbtn:hover {
-  border-color: var(--pri);
-  color: var(--pri);
-  background: rgba(0,136,255,.06);
+  border-color: rgba(0,255,145,.5);
+  color: rgba(0,255,145,.8);
+  background: rgba(0,255,145,.07);
 }
 .dbtn.active {
-  border-color: var(--pri);
-  background: var(--pri);
-  color: #fff;
-  box-shadow: 0 0 24px rgba(0,136,255,.45), inset 0 0 16px rgba(255,255,255,.1);
+  border-color: rgba(0,255,145,.7);
+  background: rgba(0,255,145,.1);
+  color: #00ff91;
+  box-shadow: 0 0 20px rgba(0,255,145,.25), inset 0 0 14px rgba(0,255,145,.06);
 }
 @keyframes mode-flash {
   0%   { box-shadow: 0 0 0px rgba(0,255,145,0),  background-color: var(--pri); }
@@ -271,46 +271,136 @@ header {
 .c-bl { bottom: 13px; left: 13px; }
 .c-br { bottom: 13px; right: 13px; text-align: right; }
 
+/* ── STAT PANEL ─────────────────────────────────────── */
 .stat-list {
-  padding: 8px 12px 10px;
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  background: #040810;
+  position: relative;
+  overflow: hidden;
 }
-.srow {
+.stat-list::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,255,145,.012) 3px, rgba(0,255,145,.012) 4px);
+  pointer-events: none;
+  z-index: 0;
+}
+.ss-hdr {
   display: flex;
   align-items: center;
-  padding: 5px 8px;
-  background: rgba(0,136,255,.025);
-  border-left: 2px solid transparent;
+  gap: 7px;
+  padding: 5px 10px 4px;
+  background: rgba(0,255,145,.035);
+  border-top: 1px solid rgba(0,255,145,.1);
+  border-bottom: 1px solid rgba(0,255,145,.05);
+  position: relative;
+  z-index: 1;
 }
-.srow.ok { border-left-color: var(--ok); }
-.srow.warn { border-left-color: var(--sec); }
-.srow.info { border-left-color: var(--pri); }
-.slbl {
+.ss-hdr-line {
+  flex: 1;
+  height: 1px;
+  background: repeating-linear-gradient(90deg, rgba(0,255,145,.22) 0, rgba(0,255,145,.22) 3px, transparent 3px, transparent 6px);
+}
+.ss-hdr-txt {
+  font-size: 6px;
+  letter-spacing: 4px;
+  color: rgba(0,255,145,.45);
+  text-transform: uppercase;
+}
+.sr {
+  display: flex;
+  align-items: center;
+  padding: 4px 10px;
+  gap: 7px;
+  border-bottom: 1px solid rgba(0,255,145,.04);
+  position: relative;
+  z-index: 1;
+  transition: background .1s;
+}
+.sr:hover { background: rgba(0,255,145,.02); }
+.sr-led {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  border: 1px solid rgba(0,255,145,.15);
+  background: #0a1408;
+}
+.sr-led.led-ok   { background: #00ff91; border-color: #00ff91; box-shadow: 0 0 5px #00ff91, 0 0 12px rgba(0,255,145,.55); }
+.sr-led.led-warn { background: #FF8C00; border-color: #FF8C00; box-shadow: 0 0 5px #FF8C00, 0 0 12px rgba(255,140,0,.5); }
+.sr-led.led-blue { background: #0088FF; border-color: #0088FF; box-shadow: 0 0 5px #0088FF, 0 0 12px rgba(0,136,255,.5); }
+.sr-led.led-off  { background: #0d1208; border-color: rgba(0,255,145,.08); box-shadow: none; }
+.sr-key {
   font-size: 7px;
   letter-spacing: 2px;
-  color: var(--txt2);
+  color: rgba(0,210,130,.4);
   text-transform: uppercase;
-  flex: 1;
+  min-width: 52px;
+  flex-shrink: 0;
 }
-.sval { font-size: 11px; font-weight: bold; letter-spacing: .5px; }
+.sr-val {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: .8px;
+  margin-left: auto;
+  color: rgba(0,255,145,.85);
+  text-align: right;
+}
+.sr-val.b { color: #55CCFF; }
+.sr-val.g { color: #00ff91; }
+.sr-val.o { color: #FF8C00; }
+.sr-val.alert   { color: #FF3333; animation: uv-blink .9s step-end infinite; }
+.sr-val.warntext { color: #FF8C00; }
+/* legacy compat */
 .sval.g { color: var(--ok); }
 .sval.o { color: var(--sec); }
 .sval.b { color: var(--pri); }
-.sval.alert {
-  color: #D50000;
-  animation: uv-blink 0.9s step-end infinite;
+.sval.alert     { color: #D50000; animation: uv-blink .9s step-end infinite; }
+.sval.warntext  { color: var(--sec); }
+.sval-conn { display: flex; align-items: center; gap: 5px; color: rgba(0,255,145,.85); font-size: 9px; }
+/* Gauge rows */
+.sr-gauge { padding-bottom: 6px; }
+.gauge {
+  flex: 1;
+  height: 8px;
+  background: rgba(0,255,145,.04);
+  border: 1px solid rgba(0,255,145,.14);
+  position: relative;
+  overflow: hidden;
 }
-.sval.warntext { color: var(--sec); }
-.sval-conn { display: flex; align-items: center; gap: 5px; color: var(--ok); font-size: 10px; }
-.sbar-wrap { display: flex; align-items: center; gap: 8px; }
-.sbar { width: 52px; height: 3px; background: rgba(0,136,255,.12); border-radius: 1px; overflow: hidden; }
-.sbar-i { height: 100%; border-radius: 1px; background: var(--pri); }
-.sbar-i.w { background: var(--sec); }
+.gauge::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(90deg, transparent 0, transparent 8px, rgba(4,8,16,.88) 8px, rgba(4,8,16,.88) 9px);
+  z-index: 2;
+  pointer-events: none;
+}
+.gauge-fill {
+  height: 100%;
+  width: 0%;
+  position: relative;
+  z-index: 1;
+  transition: width .6s cubic-bezier(.25,.46,.45,.94);
+}
+.gauge-cpu  .gauge-fill { background: linear-gradient(90deg, rgba(0,160,90,.65), rgba(0,255,145,.9)); box-shadow: 2px 0 14px rgba(0,255,145,.45); }
+.gauge-temp .gauge-fill { background: linear-gradient(90deg, rgba(180,60,0,.7),  rgba(255,160,0,.9));  box-shadow: 2px 0 14px rgba(255,140,0,.45); }
+.gauge-mem  .gauge-fill { background: linear-gradient(90deg, rgba(0,70,180,.65), rgba(0,160,255,.9)); box-shadow: 2px 0 14px rgba(0,136,255,.45); }
+.gauge-num {
+  font-size: 8px;
+  font-weight: 700;
+  min-width: 36px;
+  text-align: right;
+  letter-spacing: .5px;
+}
+.gauge-cpu  .gauge-num { color: rgba(0,255,145,.7); }
+.gauge-temp .gauge-num { color: rgba(255,160,0,.8); }
+.gauge-mem  .gauge-num { color: rgba(0,180,255,.8); }
 @keyframes uv-blink {
   0%, 100% { opacity: 1; }
-  50% { opacity: 0.2; }
+  50%       { opacity: 0.2; }
 }
 
 #joy-panel .p-hdr { padding: 14px 12px; }
@@ -320,14 +410,14 @@ header {
   font-size: 8px;
   letter-spacing: 1.5px;
   padding: 6px 14px;
-  border: 1px solid rgba(0,136,255,.3);
+  border: 1px solid rgba(0,255,145,.18);
   background: transparent;
-  color: var(--txt2);
+  color: rgba(0,255,145,.35);
   cursor: pointer;
   transition: all .15s;
   text-transform: uppercase;
 }
-.mtbtn.active { background: var(--pri); color: #fff; border-color: var(--pri); }
+.mtbtn.active { background: rgba(0,255,145,.1); color: #00ff91; border-color: rgba(0,255,145,.5); box-shadow: 0 0 12px rgba(0,255,145,.2); }
 
 #joy-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
 .joy-area,
@@ -345,22 +435,22 @@ header {
   width: min(calc(100% - 28px), 40vh, 200px);
   height: min(calc(100% - 28px), 40vh, 200px);
   border-radius: 50%;
-  background: radial-gradient(circle, rgba(0,136,255,.08) 0%, rgba(0,136,255,.02) 60%, rgba(0,136,255,.05) 100%);
-  border: 1.5px solid rgba(0,136,255,.32);
-  box-shadow: inset 0 0 32px rgba(0,136,255,.06);
+  background: radial-gradient(circle, rgba(0,255,145,.06) 0%, rgba(0,255,145,.01) 60%, rgba(0,255,145,.03) 100%);
+  border: 1.5px solid rgba(0,255,145,.22);
+  box-shadow: inset 0 0 32px rgba(0,255,145,.04), 0 0 20px rgba(0,0,0,.4);
   position: relative;
   touch-action: none;
   user-select: none;
   cursor: grab;
 }
 .joy-base:active { cursor: grabbing; }
-.jg-h, .jg-v { position: absolute; background: rgba(0,136,255,.13); }
+.jg-h, .jg-v { position: absolute; background: rgba(0,255,145,.1); }
 .jg-h { top: 50%; left: 11%; right: 11%; height: 1px; transform: translateY(-50%); }
 .jg-v { left: 50%; top: 11%; bottom: 11%; width: 1px; transform: translateX(-50%); }
 .jring {
   position: absolute;
   border-radius: 50%;
-  border: 1px solid rgba(0,136,255,.11);
+  border: 1px solid rgba(0,255,145,.09);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -372,9 +462,9 @@ header {
   width: 58px;
   height: 58px;
   border-radius: 50%;
-  background: radial-gradient(circle at 36% 32%, #55C0FF, #007EEE, #004499);
-  border: 2px solid rgba(255,255,255,.35);
-  box-shadow: 0 4px 20px rgba(0,136,255,.6), 0 0 0 4px rgba(0,136,255,.12);
+  background: radial-gradient(circle at 36% 32%, rgba(0,255,145,.9), rgba(0,180,100,.7), rgba(0,80,40,.8));
+  border: 2px solid rgba(0,255,145,.5);
+  box-shadow: 0 4px 20px rgba(0,255,145,.4), 0 0 0 4px rgba(0,255,145,.08);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -388,7 +478,7 @@ header {
   width: 9px;
   height: 9px;
   border-radius: 50%;
-  background: rgba(255,255,255,.44);
+  background: rgba(255,255,255,.35);
 }
 
 .dpad-wrap { display: none; flex-direction: column; }
@@ -402,9 +492,9 @@ header {
   aspect-ratio: 1;
 }
 .dpad-btn {
-  background: rgba(0,136,255,.06);
-  border: 1px solid rgba(0,136,255,.28);
-  color: var(--txt2);
+  background: rgba(0,255,145,.03);
+  border: 1px solid rgba(0,255,145,.15);
+  color: rgba(0,255,145,.35);
   font-size: 15px;
   cursor: pointer;
   display: flex;
@@ -415,16 +505,16 @@ header {
   user-select: none;
   border-radius: 2px;
 }
-.dpad-btn:hover { border-color: var(--pri); color: var(--pri); background: rgba(0,136,255,.1); }
+.dpad-btn:hover { border-color: rgba(0,255,145,.45); color: rgba(0,255,145,.8); background: rgba(0,255,145,.07); }
 .dpad-btn.pressed {
-  background: var(--pri);
-  border-color: var(--pri);
-  color: #fff;
-  box-shadow: 0 0 18px rgba(0,136,255,.5);
+  background: rgba(0,255,145,.12);
+  border-color: rgba(0,255,145,.7);
+  color: #00ff91;
+  box-shadow: 0 0 16px rgba(0,255,145,.3);
 }
 .dpad-mid {
-  background: rgba(0,136,255,.04);
-  border: 1px solid rgba(0,136,255,.12);
+  background: rgba(0,255,145,.02);
+  border: 1px solid rgba(0,255,145,.08);
   border-radius: 2px;
 }
 .dpad-diag { font-size: 12px; opacity: .75; }
@@ -433,25 +523,25 @@ header {
 
 .joy-vals { display: flex; gap: 22px; }
 .joy-ax { display: flex; flex-direction: column; align-items: center; gap: 2px; }
-.joy-ax-n { font-size: 7px; letter-spacing: 2px; color: var(--pri); text-transform: uppercase; }
+.joy-ax-n { font-size: 7px; letter-spacing: 2px; color: rgba(0,255,145,.35); text-transform: uppercase; }
 .joy-ax-v {
   font-family: var(--disp);
   font-weight: 700;
   font-size: 14px;
-  color: var(--txt);
+  color: rgba(0,255,145,.8);
   min-width: 56px;
   text-align: center;
   letter-spacing: 2px;
 }
 
 .admin-link {
-  color: rgba(255,255,255,.75);
+  color: rgba(0,255,145,.35);
   text-decoration: none;
   font-size: 8px;
   letter-spacing: 2px;
   text-transform: uppercase;
 }
-.admin-link:hover { color: #fff; }
+.admin-link:hover { color: rgba(0,255,145,.8); }
 
 @media (max-width: 980px) {
   body { overflow-y: auto; }
@@ -590,71 +680,76 @@ header {
         <span class="p-tag">Web Control</span>
       </div>
       <div class="stat-list">
-        <div class="srow ok">
-          <span class="slbl">Verbindung</span>
-          <span class="sval">
-            <span class="sval-conn"><span class="pulse-dot"></span><span id="status">Verbinde…</span></span>
-          </span>
+
+        <div class="ss-hdr"><div class="ss-hdr-line"></div><span class="ss-hdr-txt">Status</span><div class="ss-hdr-line"></div></div>
+
+        <div class="sr">
+          <span class="sr-led led-ok"></span>
+          <span class="sr-key">Link</span>
+          <span class="sr-val sval-conn"><span class="pulse-dot"></span><span id="status">Verbinde…</span></span>
         </div>
-        <div class="srow info">
-          <span class="slbl">Aktiver Modus</span>
-          <span class="sval b" id="stat-mode">Ackermann</span>
+        <div class="sr">
+          <span class="sr-led led-blue"></span>
+          <span class="sr-key">Modus</span>
+          <span class="sr-val b" id="stat-mode">Ackermann</span>
         </div>
-        <div class="srow warn">
-          <span class="slbl">Motoren</span>
-          <span class="sval o" id="stat-motors">Unbekannt</span>
+        <div class="sr">
+          <span class="sr-led led-warn"></span>
+          <span class="sr-key">Motoren</span>
+          <span class="sr-val o" id="stat-motors">Unbekannt</span>
         </div>
-        <div class="srow info">
-          <span class="slbl">Eingabe</span>
-          <span class="sval b" id="stat-input">Joystick</span>
+        <div class="sr">
+          <span class="sr-led led-blue"></span>
+          <span class="sr-key">Eingabe</span>
+          <span class="sr-val b" id="stat-input">Joystick</span>
         </div>
-        <div class="srow info">
-          <span class="slbl">CPU Last</span>
-          <span class="sval b">
-            <div class="sbar-wrap">
-              <div class="sbar"><div class="sbar-i" id="bar-cpu" style="width:0%"></div></div>
-              <span id="val-cpu">--</span>
-            </div>
-          </span>
+
+        <div class="ss-hdr"><div class="ss-hdr-line"></div><span class="ss-hdr-txt">Telemetrie</span><div class="ss-hdr-line"></div></div>
+
+        <div class="sr sr-gauge gauge-cpu">
+          <span class="sr-key">CPU</span>
+          <div class="gauge"><div class="gauge-fill" id="bar-cpu" style="width:0%"></div></div>
+          <span class="gauge-num" id="val-cpu">--</span>
         </div>
-        <div class="srow warn">
-          <span class="slbl">CPU Temp</span>
-          <span class="sval b">
-            <div class="sbar-wrap">
-              <div class="sbar"><div class="sbar-i w" id="bar-temp" style="width:0%"></div></div>
-              <span id="val-temp">--</span>
-            </div>
-          </span>
+        <div class="sr sr-gauge gauge-temp">
+          <span class="sr-key">Temp</span>
+          <div class="gauge"><div class="gauge-fill" id="bar-temp" style="width:0%"></div></div>
+          <span class="gauge-num" id="val-temp">--</span>
         </div>
-        <div class="srow info">
-          <span class="slbl">RAM Last</span>
-          <span class="sval b">
-            <div class="sbar-wrap">
-              <div class="sbar"><div class="sbar-i" id="bar-mem" style="width:0%"></div></div>
-              <span id="val-mem">--</span>
-            </div>
-          </span>
+        <div class="sr sr-gauge gauge-mem">
+          <span class="sr-key">RAM</span>
+          <div class="gauge"><div class="gauge-fill" id="bar-mem" style="width:0%"></div></div>
+          <span class="gauge-num" id="val-mem">--</span>
         </div>
-        <div class="srow info">
-          <span class="slbl">WLAN</span>
-          <span class="sval b" id="stat-wifi">--</span>
+
+        <div class="ss-hdr"><div class="ss-hdr-line"></div><span class="ss-hdr-txt">Netzwerk</span><div class="ss-hdr-line"></div></div>
+
+        <div class="sr">
+          <span class="sr-led led-ok"></span>
+          <span class="sr-key">WLAN</span>
+          <span class="sr-val b" id="stat-wifi">--</span>
         </div>
-        <div class="srow info">
-          <span class="slbl">IP Adressen</span>
-          <span class="sval b" id="stat-ips">--</span>
+        <div class="sr">
+          <span class="sr-led led-blue"></span>
+          <span class="sr-key">IP</span>
+          <span class="sr-val b" id="stat-ips">--</span>
         </div>
-        <div class="srow warn">
-          <span class="slbl">Unterspannung</span>
-          <span class="sval b" id="stat-undervoltage">--</span>
+        <div class="sr">
+          <span class="sr-led led-blue"></span>
+          <span class="sr-key">Uptime</span>
+          <span class="sr-val b" id="stat-uptime">--</span>
         </div>
-        <div class="srow info">
-          <span class="slbl">Uptime Pi</span>
-          <span class="sval b" id="stat-uptime">--</span>
+        <div class="sr">
+          <span class="sr-led led-blue"></span>
+          <span class="sr-key">Disk</span>
+          <span class="sr-val b" id="stat-disk">--</span>
         </div>
-        <div class="srow info">
-          <span class="slbl">Speicher Frei</span>
-          <span class="sval b" id="stat-disk">--</span>
+        <div class="sr">
+          <span class="sr-led led-off"></span>
+          <span class="sr-key">Spannung</span>
+          <span class="sr-val b" id="stat-undervoltage">--</span>
         </div>
+
       </div>
     </div>