Update templates/index.html

templates/index.html

@@ -10,7 +10,6 @@
             padding: 0;
             box-sizing: border-box;
         }
-
         body {
             min-height: 100vh;
             background-color: #111827;
@@ -21,7 +20,6 @@
             align-items: center;
             padding: 1.5rem;
         }
-
         .container {
             max-width: 28rem;
             width: 100%;
@@ -29,17 +27,14 @@
             flex-direction: column;
             gap: 2rem;
         }
-
         .header {
             text-align: center;
         }
-
         .title {
             font-size: 2rem;
             font-weight: bold;
             margin-bottom: 0.5rem;
         }
-
         .status {
             display: inline-flex;
             align-items: center;
@@ -51,12 +46,10 @@
             font-size: 0.875rem;
             transition: all 0.3s ease;
         }
-
         .status.connected {
             background-color: rgba(34, 197, 94, 0.2);
             color: rgb(74, 222, 128);
         }
-
         .status::before {
             content: '';
             width: 0.5rem;
@@ -65,13 +58,26 @@
             border-radius: 50%;
             animation: pulse 2s infinite;
         }
-
         @keyframes pulse {
             0% { opacity: 1; }
             50% { opacity: 0.4; }
             100% { opacity: 1; }
         }
-
+        .manual-status {
+            margin-top: 1rem;
+            font-size: 1rem;
+            font-weight: bold;
+            text-align: center;
+            padding: 0.5rem;
+            background-color: rgba(34, 197, 94, 0.2);
+            color: rgb(74, 222, 128);
+            border-radius: 9999px;
+            transition: all 0.3s ease;
+        }
+        .manual-status.deactivated {
+            background-color: rgba(239, 68, 68, 0.2);
+            color: rgb(248, 113, 113);
+        }
         .control-pad {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
@@ -80,7 +86,6 @@
             margin: 0 auto;
             place-items: center;
         }
-
         .control-button {
             width: 4rem;
             height: 4rem;
@@ -95,19 +100,16 @@
             transition: all 0.2s;
             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
         }
-
         .control-button:hover {
             background-color: #4338ca;
             transform: translateY(-2px);
             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
         }
-
         .control-button:active {
             background-color: #3730a3;
             transform: translateY(0);
             box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
         }
-
         .emergency-stop {
             grid-column: 2;
             grid-row: 2;
@@ -116,15 +118,12 @@
             height: 4.5rem !important;
             border: 3px solid #ef4444;
         }
-
         .emergency-stop:hover {
             background-color: #b91c1c !important;
         }
-
         .emergency-stop:active {
             background-color: #991b1b !important;
         }
-
         .control-button svg {
             width: 1.5rem;
             height: 1.5rem;
@@ -134,19 +133,16 @@
             stroke-linecap: round;
             stroke-linejoin: round;
         }
-
         .command-log {
             background-color: #1f2937;
             border-radius: 0.5rem;
             padding: 1rem;
         }
-
         .command-log h2 {
             font-size: 1.125rem;
             font-weight: 600;
             margin-bottom: 0.5rem;
         }
-
         .log-container {
             height: 12rem;
             overflow-y: auto;
@@ -154,14 +150,12 @@
             flex-direction: column;
             gap: 0.25rem;
         }
-
         .log-entry {
             padding: 0.25rem 0.5rem;
             background-color: rgba(55, 65, 81, 0.5);
             border-radius: 0.25rem;
             font-size: 0.875rem;
         }
-
         /* Grid positioning */
         .btn-up { grid-column: 2; grid-row: 1; }
         .btn-left { grid-column: 1; grid-row: 2; }
@@ -174,6 +168,7 @@
         <div class="header">
             <h1 class="title">Robot Controller</h1>
             <div class="status">Disconnected</div>
+            <div id="manualModeStatus" class="manual-status deactivated">Manual Mode Deactivated</div>
         </div>
 
         <div class="control-pad">
@@ -192,7 +187,6 @@
                     <rect x="6" y="6" width="12" height="12" fill="white"/>
                 </svg>
             </button>
-            </button>
             <button class="control-button btn-right" data-direction="right">
                 <svg viewBox="0 0 24 24">
                     <path d="M5 12h14m-7-7 7 7-7 7"/>
@@ -217,6 +211,7 @@
         const buttons = document.querySelectorAll('.control-button');
         const status = document.querySelector('.status');
         const logContainer = document.getElementById('logContainer');
+        const manualModeStatus = document.getElementById('manualModeStatus');
         let commandInterval = null;
         let activeCommand = null;
         let isButtonPressed = false;
@@ -231,6 +226,17 @@
             status.classList.remove('connected');
         });
 
+        // Listen for manual mode status change
+        socket.on('manual_mode_status', (data) => {
+            if (data.status === 'activated') {
+                manualModeStatus.textContent = 'Manual Mode Activated';
+                manualModeStatus.classList.remove('deactivated');
+            } else {
+                manualModeStatus.textContent = 'Manual Mode Deactivated';
+                manualModeStatus.classList.add('deactivated');
+            }
+        });
+
         function logCommand(command) {
             const entry = document.createElement('div');
             entry.className = 'log-entry';
@@ -252,7 +258,6 @@
                 sendCommand('emergency_stop');
                 return;
             }
-
             if (commandInterval) {
                 clearInterval(commandInterval);
             }
@@ -280,7 +285,7 @@
 
         buttons.forEach(button => {
             const direction = button.dataset.direction;
-            
+
             button.addEventListener('mousedown', () => {
                 startCommand(direction);
                 if (direction !== 'emergency_stop') {
@@ -320,4 +325,4 @@
         });
     </script>
 </body>
-</html>
+</html>