GUI verbessert vereinfacht

ExoMy_Software-master/gui/index.html

@@ -5,9 +5,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title>ExoMy // Ground Control</title>
 <script type="text/javascript" src="./vendor/roslib.min.js"></script>
-<link rel="stylesheet" href="./index.css">
+<link rel="stylesheet" href="./app.css?v=20260522092731">
 </head>
-<body>
+<body class="page-index">
 <header>
   <svg class="hdr-icon" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect x="7" y="11" width="18" height="10" rx="1" fill="#0088FF" opacity=".85"/>
@@ -113,13 +113,14 @@
   </div>
 
   <div class="col-r">
-    <div class="panel" id="stat-panel">
-      <div class="p-hdr">
+    <div class="panel collapsed" id="stat-panel">
+      <div class="p-hdr stat-panel-toggle" id="stat-panel-toggle" role="button" tabindex="0" aria-expanded="false" aria-controls="stat-panel-body">
         <div class="p-dot"></div>
         <span class="p-lbl">Systemstatus</span>
         <span class="p-tag">Web Control</span>
+        <span class="stat-toggle-indicator" aria-hidden="true">+</span>
       </div>
-      <div class="stat-list">
+      <div class="stat-list" id="stat-panel-body">
 
         <div class="ss-hdr"><div class="ss-hdr-line"></div><span class="ss-hdr-txt">Status</span><div class="ss-hdr-line"></div></div>
 
@@ -613,6 +614,46 @@ function updateCameraFrameLayout() {
   frame.style.setProperty("--cam-scale", Math.max(0.55, Math.min(1.1, frameWidth / 640)).toFixed(3));
 }
 
+function setStatPanelCollapsed(collapsed, immediate) {
+  var panel = document.getElementById("stat-panel");
+  var toggle = document.getElementById("stat-panel-toggle");
+  var body = document.getElementById("stat-panel-body");
+  if (!panel || !toggle || !body) return;
+  var isCollapsed = panel.classList.contains("collapsed");
+  if (isCollapsed === collapsed && !immediate) return;
+
+  body.style.overflow = "hidden";
+  toggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
+  var indicator = toggle.querySelector(".stat-toggle-indicator");
+  if (indicator) {
+    indicator.textContent = collapsed ? "+" : "-";
+  }
+
+  if (immediate) {
+    panel.classList.toggle("collapsed", collapsed);
+    body.style.height = collapsed ? "0px" : "auto";
+    return;
+  }
+
+  if (collapsed) {
+    body.style.height = body.scrollHeight + "px";
+    body.offsetHeight;
+    panel.classList.add("collapsed");
+    body.style.height = "0px";
+  } else {
+    panel.classList.remove("collapsed");
+    body.style.height = "0px";
+    body.offsetHeight;
+    body.style.height = body.scrollHeight + "px";
+  }
+}
+
+function toggleStatPanel() {
+  var panel = document.getElementById("stat-panel");
+  if (!panel) return;
+  setStatPanelCollapsed(!panel.classList.contains("collapsed"));
+}
+
 window.addEventListener("load", function () {
   setText("cam-host", hostUrl);
   updateModeDisplay();
@@ -639,6 +680,26 @@ window.addEventListener("load", function () {
   window.addEventListener("orientationchange", function () {
     window.setTimeout(updateCameraFrameLayout, 80);
   });
+  var statBody = document.getElementById("stat-panel-body");
+  if (statBody) {
+    statBody.addEventListener("transitionend", function (event) {
+      if (event.propertyName !== "height") return;
+      var panel = document.getElementById("stat-panel");
+      if (!panel) return;
+      statBody.style.height = panel.classList.contains("collapsed") ? "0px" : "auto";
+    });
+  }
+  setStatPanelCollapsed(true, true);
+  var statToggle = document.getElementById("stat-panel-toggle");
+  if (statToggle) {
+    statToggle.addEventListener("click", toggleStatPanel);
+    statToggle.addEventListener("keydown", function (event) {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        toggleStatPanel();
+      }
+    });
+  }
 
   ros = new ROSLIB.Ros({
     url: "ws://" + hostUrl + ":9090"