CSS anpassen

web/index.html

@@ -5,7 +5,7 @@
     <title>SCARA Robot Control</title>
     <style>
         body {
-            background: #202020;
+            background: #234;
             color: #e0e0e0;
             font-family: Arial, sans-serif;
             text-align: center;
@@ -14,12 +14,16 @@
         h1 {
             margin-top: 20px;
         }
+        
+        h2{
+            margin-top: 40px;
+        }
 
         #posBox {
             margin: 20px auto;
             width: 406px;
             padding: 15px;
-            background: #333;
+            background: #356;
             border-radius: 10px;
             font-size: 20px;
         }
@@ -33,12 +37,12 @@
         }
 
         button {
-            background: #444;
+            background: #478;
             border: none;
             padding: 15px;
             font-size: 18px;
             color: white;
-            border-radius: 8px;
+            border-radius: 5px;
             cursor: pointer;
         }
 
@@ -46,6 +50,10 @@
             background: #666;
         }
 
+        .noMouseHover:hover{
+            background: #478;
+        }
+
         
         .gcodeRow {
             display: inline-flex;
@@ -55,20 +63,20 @@
         }
 
         .controlInput {
-            height: 48px;                 /* gleiche Höhe wie Button */
+            height: 48px;                 
             font-size: 18px;
-            padding: 0 10px;              /* vertikal 0, dadurch exakte Höhe */
+            padding: 0 10px;              
             box-sizing: border-box;
             border-radius: 8px;
             border: 1px solid #555;
             background: #fff;
             color: #000;
-            min-width: 260px;             /* optional: Breite ähnlich wie vorher */
+            min-width: 260px;            
         }
 
         .controlButton {
-            height: 48px;                 /* gleiche Höhe wie Input */
-            padding: 0 18px;              /* vertikal 0, zentriert via flex */
+            height: 48px;                 
+            padding: 0 18px;          
             display: inline-flex;
             align-items: center;
             justify-content: center;
@@ -91,18 +99,17 @@
     <div class="btnGrid">
         <button onclick="jog('X', -10)">X -10</button>
         <button onclick="jog('X', -1)">X -1</button>
-        <button></button>
+        <button class="noMouseHover"></button>
         <button onclick="jog('X', 1)">X +1</button>
         <button onclick="jog('X', 10)">X +10</button>
 
         <button onclick="jog('Z', -10)">Z -10</button>
         <button onclick="jog('Z', -1)">Z -1</button>
-        <button></button>
+        <button class="noMouseHover"></button>
         <button onclick="jog('Z', 1)">Z +1</button>
         <button onclick="jog('Z', 10)">Z +10</button>
     </div>
 
-       
     <h2>G‑Code Eingabe</h2>
     <div class="gcodeRow">
     <input id="gcodeInput" class="controlInput" type="text"
@@ -121,6 +128,7 @@
         let ws;
 
         function connectWS() {
+            console.log("Try to connect to " + "wss://" + window.location.hostname + ":" + window.location.port);
             ws = new WebSocket("wss://" + window.location.hostname + ":" + window.location.port);
 
             ws.onopen = () => {
@@ -202,12 +210,12 @@
         
         
         function sendGcodeFeld() {
-            const el = document.getElementById("gcodeInput");          // ← neu
+            const el = document.getElementById("gcodeInput");
             const cmd = el.value.trim();
             sendGcode("G90");
             sendGcode(cmd);
             
-            el.value = "";                                              // ← neu
+            el.value = "";
             el.focus();   
         }