G92 > send-to-ESP

2026-04-06 05:24:41 +02:00
parent 3e874e70c9
commit 3d33ecd747
12 changed files with 3337 additions and 20 deletions
--- a/public/allApps.css
+++ b/public/allApps.css
@@ -0,0 +1,113 @@
+/* =========================================================
+   allApps.css — Gemeinsames UI-Fundament für alle Robot-Apps
+   (layout-neutral)
+   ========================================================= */
+
+/* ---------- Design Tokens ---------- */
+:root {
+    --bg: #0b1c2d;
+    --panel: #132c44;
+    --border: #0e1822;
+    --text: #e0e6ed;
+    --muted: #9aa6b2;
+    --accent: #a4bbd4;
+
+    --radius: 8px;
+    --gap: 16px;
+    --border-subtle: rgba(255,255,255,0.08);
+}
+
+/* ---------- Reset & Base ---------- */
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    min-height: 100%;
+}
+
+body {
+    margin: 16px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont,
+                 "Segoe UI", Roboto, Inter, Arial, sans-serif;
+    background: linear-gradient(
+        to bottom,
+        #dddddd -20%,
+        var(--bg) 130%
+    );
+    color: var(--text);
+    font-size: 14px;
+}
+
+/* ---------- Headings ---------- */
+h1 {
+    margin: 0 0 16px;
+    font-size: 20px;
+    color: var(--accent);
+}
+
+h2 {
+    margin: 0;
+    font-size: 15px;
+    color: var(--accent);
+}
+
+/* ---------- Sections Container ---------- */
+/* Grid-Spalten werden von der jeweiligen App definiert */
+.sections {
+    display: grid;
+    gap: var(--gap);
+}
+
+/* ---------- Section Card ---------- */
+.section {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 22px 20px;
+}
+
+/* Semantische Breitenklassen (wirken nur,
+   wenn die App ein entsprechendes Grid definiert) */
+.section.full    {}
+.section.half    {}
+.section.quarter {}
+.section.eighth  {}
+
+/* ---------- Section Header / Collapse ---------- */
+.section > h2 {
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    user-select: none;
+}
+
+/* Collapse Arrow */
+.section > h2::after {
+    content: "▼";
+    font-size: 12px;
+    transition: transform 0.2s ease;
+}
+
+/* Collapsed state */
+.section.collapsed > h2::after {
+    transform: rotate(-90deg);
+}
+
+/* Hide content when collapsed */
+.section.collapsed > :not(h2) {
+    display: none;
+}
+
+/* ---------- Generic Lists ---------- */
+.section ul {
+    margin: 10px 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.section li {
+    padding: 4px 0;
+    border-bottom: 1px solid var(--border-subtle);
+}
--- a/public/index.html
+++ b/public/index.html
@@ -5,25 +5,26 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Robot Driver Info</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Math&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="allApps.css">
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <h1>Robot Driver Status</h1>
+    <!--<h1>Robot Driver Status</h1>-->

    <div class="sections">
        <div id="status" class="section half" data-id="clients">
-            <h2>Verbundene WebClients</h2>
+            <h2>WebClients</h2>
            <ul id="clients"></ul>
        </div>

        <div id="senders" class="section half" data-id="senders">
-            <h2>Verbundene FluidNC-Controller</h2>
+            <h2>FluidNC-Controller</h2>
            <ul id="senderList"></ul>
        </div>

        
        <div id="driverState" class="section half" data-id="driver">
-            <h2>Zustand Driver</h2>
+            <h2>Position Driver</h2>
            <ul class="state-grid">
                <li><span>X</span><span id="state-x">–</span></li>
                <li><span>Y</span><span id="state-y">–</span></li>
@@ -40,7 +41,7 @@

        
        <div id="motorState" class="section half" data-id="motors">
-            <h2>Zustand Motoren</h2>
+            <h2>Postion Motoren</h2>
            <ul class="state-grid">
                <li><span>X</span><span id="motor-x">–</span></li>
                <li><span>Y</span><span id="motor-y">–</span></li>
@@ -57,12 +58,12 @@


        <div id="commands" class="section" data-id="commands">
-            <h2>Letzte Commands</h2>
+            <h2>Commands</h2>
            <ul id="commandList"></ul>
        </div>

        <div id="pings" class="section" data-id="pings">
-            <h2>Letzte Ping Nachrichten</h2>
+            <h2>Ping Messages</h2>
            <ul id="pingList"></ul>
        </div>
    </div>
--- a/public/style.css
+++ b/public/style.css
@@ -1,9 +1,9 @@
 :root {
    --bg: #0b1c2d;
    --panel: #132c44;
-    --border: #1e3b58;
+    --border: #0e1822;
    --text: #e0e6ed;
-    --accent: #6fb3ff;
+    --accent: #a4bbd4;
 }

 * {