Update templates/index.html

templates/index.html

@@ -273,6 +273,19 @@
       text-align: center;
     }
 
+    /* Add this new style for log toggle */
+    .logs-container {
+      position: relative;
+      background-color: var(--log-bg);
+      border-top: 1px solid var(--border-color);
+      padding: 12px 20px;
+      max-height: 120px;
+      overflow-y: auto;
+      font-size: 0.85rem;
+      color: var(--text-secondary);
+      transition: all 0.3s ease;
+    }
+
     .log-toggle {
       position: absolute;
       right: 20px;
@@ -284,6 +297,11 @@
       font-size: 0.7rem;
       cursor: pointer;
       z-index: 1;
+      color: var(--text-secondary);
+    }
+
+    .log-toggle:hover {
+      background: var(--border-color);
     }
 
     .alert {
@@ -367,11 +385,12 @@
         </div>
       </div>
     </div>
-
-    <div class="logs-container" id="logs-container">
-      <div class="log-toggle" id="log-toggle">Hide Logs</div>
-      <div id="logs"></div>
-    </div>
+  
+  <div class="logs-container" id="logs-container">
+    <button class="log-toggle" id="log-toggle">Hide Logs</button>
+    <div id="logs"></div>
+  </div>
+    
   </main>
 
   <footer>