From 3741ad9f6ac6b19fb3b4631e21e5fa812fad1d06 Mon Sep 17 00:00:00 2001
From: chk <79915315+ChKendel@users.noreply.github.com>
Date: Wed, 10 Jun 2026 11:18:06 +0200
Subject: [PATCH] Design

---
 public/calibration.html | 355 +++++++++++++++++++++++-----------------
 1 file changed, 203 insertions(+), 152 deletions(-)

diff --git a/public/calibration.html b/public/calibration.html
index e8cfa2a..85f231d 100644
--- a/public/calibration.html
+++ b/public/calibration.html
@@ -6,92 +6,140 @@
   <title>Kalibrierung – appRobotHoming</title>
   <link rel="stylesheet" href="/styles.css">
   <style>
-    /* ===== CALIBRATION PAGE EXTRAS ===== */
 
-    .calib-header {
+    /* ===== LAYOUT ===== */
+
+    body {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+    }
+
+    /* ===== HEADER (gleicher Stil wie .section auf index.html) ===== */
+
+    .calib-topbar {
       display: flex;
       align-items: center;
       gap: 16px;
-      margin-bottom: 20px;
+      padding: 14px 20px;
+      background: var(--panel);
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
     }
 
-    .calib-header a {
+    .calib-topbar a {
       color: var(--muted);
       text-decoration: none;
       font-size: 13px;
       border: 1px solid #334155;
       border-radius: 6px;
-      padding: 6px 12px;
-      transition: border-color 0.2s;
+      padding: 6px 14px;
+      transition: border-color 0.2s, color 0.2s;
     }
 
-    .calib-header a:hover {
+    .calib-topbar a:hover {
       border-color: var(--accent);
       color: var(--accent);
     }
 
-    .calib-header h1 {
+    .calib-topbar h1 {
       margin: 0;
-      font-size: 17px;
+      font-size: 15px;
       font-weight: 500;
       color: var(--accent);
     }
 
-    /* ===== TABS ===== */
+    /* ===== BODY: SIDEBAR + CONTENT ===== */
 
-    .tab-bar {
+    .calib-body {
       display: flex;
-      gap: 4px;
-      border-bottom: 2px solid #1f2937;
-      margin-bottom: 20px;
-      flex-wrap: wrap;
+      flex: 1;
+      overflow: hidden;
+      padding: 16px;
+      gap: 0;
+    }
+
+    /* ===== LESEZEICHEN-TABS LINKS ===== */
+
+    .tab-sidebar {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+      padding-top: 4px;
+      flex-shrink: 0;
+      width: 148px;
     }
 
     .tab-btn {
-      background: none;
-      border: none;
-      border-bottom: 3px solid transparent;
-      padding: 10px 18px;
+      background: #0e1a2b;
+      border: 1px solid #1f2937;
+      border-right: none;
+      border-radius: 6px 0 0 6px;
+      padding: 11px 16px;
       color: var(--muted);
-      font-size: 14px;
+      font-size: 13px;
+      text-align: left;
       cursor: pointer;
-      margin-bottom: -2px;
-      border-radius: 6px 6px 0 0;
-      transition: color 0.15s, border-color 0.15s, background 0.15s;
+      transition: color 0.15s, background 0.15s, border-color 0.15s;
+      white-space: nowrap;
     }
 
     .tab-btn:hover {
       color: var(--text);
-      background: #1e293b;
+      background: #132c44;
+      border-color: #334155;
     }
 
     .tab-btn.active {
       color: var(--accent);
-      border-bottom-color: var(--accent);
-      background: #1e293b;
+      background: var(--panel);       /* gleiche Farbe wie Content-Area */
+      border-color: #334155;
+      border-right: none;
+      border-left: 3px solid var(--accent);
+      padding-left: 13px;             /* kompensiert den dickeren linken Rand */
+      z-index: 1;
+    }
+
+    /* ===== CONTENT AREA ===== */
+
+    .tab-content {
+      flex: 1;
+      background: var(--panel);
+      border: 1px solid #334155;
+      border-radius: 0 8px 8px 8px;
+      overflow-y: auto;
+      padding: 20px 24px;
     }
 
     /* ===== TAB PANELS ===== */
 
-    .tab-panel {
-      display: none;
+    .tab-panel        { display: none; }
+    .tab-panel.active { display: block; }
+
+    /* ===== SECTION OVERRIDE: kein äusserer Rand in der Content-Area ===== */
+
+    .tab-content .section {
+      background: #0e1a2b;
     }
 
-    .tab-panel.active {
-      display: block;
-    }
+    /* ===== PLACEHOLDER NOTE ===== */
 
     .placeholder-note {
-      margin-top: 16px;
-      padding: 16px 20px;
+      margin-top: 14px;
+      padding: 14px 18px;
       background: #0b1220;
       border: 1px dashed #334155;
       border-radius: 8px;
       color: var(--muted);
       font-size: 13px;
-      line-height: 1.6;
+      line-height: 1.7;
     }
 
+    /* ===== STATUS BADGE ===== */
+
     .status-badge {
       display: inline-block;
       font-size: 11px;
@@ -101,166 +149,169 @@
       color: var(--muted);
       margin-left: 8px;
       vertical-align: middle;
+      font-weight: normal;
     }
+    .status-badge.open { color: #f59e0b; }
+    .status-badge.done { color: #34d399; background: #064e3b; }
+    .status-badge.wip  { color: #60a5fa; }
 
-    .status-badge.open   { color: #f59e0b; }
-    .status-badge.done   { color: #34d399; background: #064e3b; }
-    .status-badge.wip    { color: #60a5fa; }
   </style>
 </head>
 <body>
 
-  <div class="calib-header">
+  <!-- HEADER -->
+  <div class="calib-topbar">
     <a href="/">← Zurück</a>
     <h1>Kalibrierung</h1>
   </div>
 
-  <!-- TAB BAR -->
-  <div class="tab-bar" id="tabBar">
-    <button class="tab-btn active" data-tab="camera-npz">Camera NPZ</button>
-    <button class="tab-btn"        data-tab="board">Board</button>
-    <button class="tab-btn"        data-tab="robot-x-axis">Robot X Axis</button>
-    <button class="tab-btn"        data-tab="arm">Arm1 / Arm2</button>
-  </div>
+  <!-- SIDEBAR + CONTENT -->
+  <div class="calib-body">
 
-  <!-- PANEL: Camera NPZ -->
-  <div class="tab-panel active" id="tab-camera-npz">
-    <div class="sections">
+    <!-- LESEZEICHEN-TABS -->
+    <nav class="tab-sidebar" id="tabSidebar">
+      <button class="tab-btn active" data-tab="camera-npz">Camera NPZ</button>
+      <button class="tab-btn"        data-tab="board">Board</button>
+      <button class="tab-btn"        data-tab="robot-x-axis">Robot X Axis</button>
+      <button class="tab-btn"        data-tab="arm">Arm1 / Arm2</button>
+    </nav>
 
-      <div class="section full">
-        <h2>Camera NPZ <span class="status-badge open">offen</span></h2>
-        <div class="placeholder-note">
-          Ziel: Intrinsische Kameraparameter (Kameramatrix, Verzerrungskoeffizienten) für jede
-          Kamera ermitteln und als <code>.npz</code>-Datei speichern.<br><br>
-          Geplante Aktionen: Fotos aufnehmen (verschiedene Posen) · Kalibrierung berechnen ·
-          Reprojektionsfehler anzeigen · Datei speichern.<br><br>
-          <em>Aktionen werden ergänzt sobald das Konzept feststeht.</em>
-        </div>
+    <!-- CONTENT -->
+    <div class="tab-content">
+
+      <!-- PANEL: Camera NPZ -->
+      <div class="tab-panel active" id="tab-camera-npz">
+        <div class="sections">
+
+          <div class="section full">
+            <h2>Camera NPZ <span class="status-badge open">offen</span></h2>
+            <div class="placeholder-note">
+              Ziel: Intrinsische Kameraparameter (Kameramatrix, Verzerrungskoeffizienten) für jede
+              Kamera ermitteln und als <code>.npz</code>-Datei speichern.<br><br>
+              Geplante Aktionen: Fotos aufnehmen (verschiedene Posen) · Kalibrierung berechnen ·
+              Reprojektionsfehler anzeigen · Datei speichern.<br><br>
+              <em>Aktionen werden ergänzt sobald das Konzept feststeht.</em>
+            </div>
+            <div class="controls" style="margin-top: 14px;">
+              <button disabled>Fotos aufnehmen</button>
+              <button disabled>Kalibrierung berechnen</button>
+              <button disabled>NPZ speichern</button>
+            </div>
+          </div>
+
+          <div class="section full">
+            <h2>Ausgabe / Log</h2>
+            <textarea id="log-camera" readonly placeholder="(Ausgabe erscheint hier)"></textarea>
+          </div>
 
-        <div class="controls" style="margin-top: 16px;">
-          <!-- Platzhalter für zukünftige Buttons -->
-          <button disabled title="Noch nicht implementiert">Fotos aufnehmen</button>
-          <button disabled title="Noch nicht implementiert">Kalibrierung berechnen</button>
-          <button disabled title="Noch nicht implementiert">NPZ speichern</button>
         </div>
       </div>
 
-      <div class="section full">
-        <h2>Ausgabe / Log</h2>
-        <textarea id="log-camera" readonly placeholder="(Ausgabe erscheint hier)"></textarea>
-      </div>
+      <!-- PANEL: Board -->
+      <div class="tab-panel" id="tab-board">
+        <div class="sections">
 
-    </div>
-  </div>
+          <div class="section full">
+            <h2>Board <span class="status-badge open">offen</span></h2>
+            <div class="placeholder-note">
+              Ziel: Extrinsische Position des Marker-Boards im Kamera-Koordinatensystem bestimmen
+              (Rotations- und Translationsvektor via <code>solvePnP</code>).<br><br>
+              Geplante Aktionen: Kamerabild mit erkannten Markern anzeigen · Pose berechnen ·
+              Kalibrierungsdatei speichern.<br><br>
+              <em>Aktionen werden ergänzt sobald das Konzept feststeht.</em>
+            </div>
+            <div class="controls" style="margin-top: 14px;">
+              <button disabled>Foto aufnehmen</button>
+              <button disabled>Marker erkennen</button>
+              <button disabled>Pose berechnen</button>
+              <button disabled>Board-Pose speichern</button>
+            </div>
+          </div>
 
-  <!-- PANEL: Board -->
-  <div class="tab-panel" id="tab-board">
-    <div class="sections">
+          <div class="section full">
+            <h2>Ausgabe / Log</h2>
+            <textarea id="log-board" readonly placeholder="(Ausgabe erscheint hier)"></textarea>
+          </div>
 
-      <div class="section full">
-        <h2>Board – Referenz-Board-Kalibrierung <span class="status-badge open">offen</span></h2>
-        <div class="placeholder-note">
-          Ziel: Extrinsische Position des Marker-Boards im Kamera-Koordinatensystem bestimmen
-          (Rotations- und Translationsvektor via <code>solvePnP</code>).<br><br>
-          Geplante Aktionen: Kamerabild mit erkannten Markern anzeigen · Pose berechnen ·
-          Kalibrierungsdatei speichern.<br><br>
-          <em>Aktionen werden ergänzt sobald das Konzept feststeht.</em>
-        </div>
-
-        <div class="controls" style="margin-top: 16px;">
-          <button disabled title="Noch nicht implementiert">Foto aufnehmen</button>
-          <button disabled title="Noch nicht implementiert">Marker erkennen</button>
-          <button disabled title="Noch nicht implementiert">Pose berechnen</button>
-          <button disabled title="Noch nicht implementiert">Board-Pose speichern</button>
         </div>
       </div>
 
-      <div class="section full">
-        <h2>Ausgabe / Log</h2>
-        <textarea id="log-board" readonly placeholder="(Ausgabe erscheint hier)"></textarea>
-      </div>
+      <!-- PANEL: Robot X Axis -->
+      <div class="tab-panel" id="tab-robot-x-axis">
+        <div class="sections">
 
-    </div>
-  </div>
+          <div class="section full">
+            <h2>Robot X Axis <span class="status-badge open">offen</span></h2>
+            <div class="placeholder-note">
+              Ziel: X-Achse des Roboters im Weltkoordinatensystem verorten (Richtungsvektor und
+              Nullpunkt). Roboter fährt zwei bekannte Positionen an, Kamera beobachtet den
+              Endeffektor-Marker.<br><br>
+              Geplante Aktionen: Referenzposition 1 anfahren · Foto · Marker merken ·
+              Referenzposition 2 anfahren · Foto · Achsvektor berechnen · Speichern.<br><br>
+              <em>Aktionen werden ergänzt sobald das Konzept feststeht.</em>
+            </div>
+            <div class="controls" style="margin-top: 14px;">
+              <button disabled>Pos 1 anfahren</button>
+              <button disabled>Foto Pos 1</button>
+              <button disabled>Pos 2 anfahren</button>
+              <button disabled>Foto Pos 2</button>
+              <button disabled>Achse berechnen</button>
+              <button disabled>Speichern</button>
+            </div>
+          </div>
 
-  <!-- PANEL: Robot X Axis -->
-  <div class="tab-panel" id="tab-robot-x-axis">
-    <div class="sections">
+          <div class="section full">
+            <h2>Ausgabe / Log</h2>
+            <textarea id="log-xaxis" readonly placeholder="(Ausgabe erscheint hier)"></textarea>
+          </div>
 
-      <div class="section full">
-        <h2>Robot X Axis <span class="status-badge open">offen</span></h2>
-        <div class="placeholder-note">
-          Ziel: X-Achse des Roboters im Weltkoordinatensystem verorten (Richtungsvektor und
-          Nullpunkt). Roboter fährt zwei bekannte Positionen an, Kamera beobachtet den
-          Endeffektor-Marker.<br><br>
-          Geplante Aktionen: Zu Referenzposition 1 fahren · Foto · Marker merken ·
-          Zu Referenzposition 2 fahren · Foto · Achsvektor berechnen · Speichern.<br><br>
-          <em>Aktionen werden ergänzt sobald das Konzept feststeht.</em>
-        </div>
-
-        <div class="controls" style="margin-top: 16px;">
-          <button disabled title="Noch nicht implementiert">Pos 1 anfahren</button>
-          <button disabled title="Noch nicht implementiert">Foto Pos 1</button>
-          <button disabled title="Noch nicht implementiert">Pos 2 anfahren</button>
-          <button disabled title="Noch nicht implementiert">Foto Pos 2</button>
-          <button disabled title="Noch nicht implementiert">Achse berechnen</button>
-          <button disabled title="Noch nicht implementiert">Speichern</button>
         </div>
       </div>
 
-      <div class="section full">
-        <h2>Ausgabe / Log</h2>
-        <textarea id="log-xaxis" readonly placeholder="(Ausgabe erscheint hier)"></textarea>
-      </div>
+      <!-- PANEL: Arm1 / Arm2 -->
+      <div class="tab-panel" id="tab-arm">
+        <div class="sections">
 
-    </div>
-  </div>
+          <div class="section full">
+            <h2>Arm1 / Arm2 <span class="status-badge open">offen</span></h2>
+            <div class="placeholder-note">
+              Ziel: Nullposition und Kinematikparameter von Arm1 und Arm2 einmessen.
+              Arm fährt in mechanische Nullposition, Kamera prüft die tatsächliche Pose,
+              Offset wird berechnet und gespeichert.<br><br>
+              Geplante Aktionen: Arm1 → Nullpos → Foto → Winkel · Arm2 → Nullpos → Foto →
+              Winkel · Offset-Korrektur speichern.<br><br>
+              <em>Aktionen werden ergänzt sobald das Konzept feststeht.</em>
+            </div>
+            <div class="controls" style="margin-top: 14px;">
+              <button disabled>Arm1 → Nullpos</button>
+              <button disabled>Foto Arm1</button>
+              <button disabled>Arm2 → Nullpos</button>
+              <button disabled>Foto Arm2</button>
+              <button disabled>Offsets berechnen</button>
+              <button disabled>Speichern</button>
+            </div>
+          </div>
 
-  <!-- PANEL: Arm1 / Arm2 -->
-  <div class="tab-panel" id="tab-arm">
-    <div class="sections">
+          <div class="section full">
+            <h2>Ausgabe / Log</h2>
+            <textarea id="log-arm" readonly placeholder="(Ausgabe erscheint hier)"></textarea>
+          </div>
 
-      <div class="section full">
-        <h2>Arm1 / Arm2 – Gelenk-Kalibrierung <span class="status-badge open">offen</span></h2>
-        <div class="placeholder-note">
-          Ziel: Nullposition und Kinematikparameter von Arm1 und Arm2 einmessen.
-          Arm fährt in mechanische Nullposition, Kamera prüft die tatsächliche Pose,
-          Offset wird berechnet und gespeichert.<br><br>
-          Geplante Aktionen: Arm1 → Nullpos → Foto → Winkel · Arm2 → Nullpos → Foto →
-          Winkel · Offset-Korrektur speichern.<br><br>
-          <em>Aktionen werden ergänzt sobald das Konzept feststeht.</em>
-        </div>
-
-        <div class="controls" style="margin-top: 16px;">
-          <button disabled title="Noch nicht implementiert">Arm1 → Nullpos</button>
-          <button disabled title="Noch nicht implementiert">Foto Arm1</button>
-          <button disabled title="Noch nicht implementiert">Arm2 → Nullpos</button>
-          <button disabled title="Noch nicht implementiert">Foto Arm2</button>
-          <button disabled title="Noch nicht implementiert">Offsets berechnen</button>
-          <button disabled title="Noch nicht implementiert">Speichern</button>
         </div>
       </div>
 
-      <div class="section full">
-        <h2>Ausgabe / Log</h2>
-        <textarea id="log-arm" readonly placeholder="(Ausgabe erscheint hier)"></textarea>
-      </div>
-
-    </div>
-  </div>
+    </div><!-- /.tab-content -->
+  </div><!-- /.calib-body -->
 
   <script>
     // Tab-Switching
-    document.getElementById('tabBar').addEventListener('click', e => {
+    document.getElementById('tabSidebar').addEventListener('click', e => {
       const btn = e.target.closest('.tab-btn');
       if (!btn) return;
-
       document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
       document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
-
       btn.classList.add('active');
-      const panelId = 'tab-' + btn.dataset.tab;
-      document.getElementById(panelId).classList.add('active');
+      document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
     });
 
     // Section collapse (gleiche Logik wie Hauptseite)