From cfc9a79ab860478569eda62420017823f9347467 Mon Sep 17 00:00:00 2001
From: Chris Frankland-Wright <christopherjfrankland@googlemail.com>
Date: Fri, 8 Aug 2025 00:11:16 +0100
Subject: [PATCH] feat: Hide controls and logs behind toggleable dropdown cards

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
---
 static/index.html | 20 +++++++++++++++-----
 static/script.js  | 17 +++++++++++++++++
 static/style.css  | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/static/index.html b/static/index.html
index 5aca849..72e900b 100644
--- a/static/index.html
+++ b/static/index.html
@@ -54,8 +54,12 @@
             </div>
 
             <!-- Controls -->
-            <div class="card full-width">
-                <h2>Controls</h2>
+            <div class="card full-width collapsible-card">
+                <div class="toggle-header" id="controls-toggle">
+                    <img src="assets/timeturner_controls.png" class="toggle-icon" alt="Controls Icon">
+                    <h2>Controls</h2>
+                </div>
+                <div class="collapsible-content" id="controls-content">
                 <div class="control-group">
                     <label for="hw-offset">Hardware Offset (ms):</label>
                     <input type="number" id="hw-offset" name="hw-offset">
@@ -107,12 +111,18 @@
                     <button id="set-date">Set Date</button>
                     <span id="date-message"></span>
                 </div>
+                </div>
             </div>
 
             <!-- Logs -->
-            <div class="card full-width">
-                <h2>Logs</h2>
-                <pre id="logs" class="log-box"></pre>
+            <div class="card full-width collapsible-card">
+                <div class="toggle-header" id="logs-toggle">
+                    <img src="assets/timeturner_logs.png" class="toggle-icon" alt="Logs Icon">
+                    <h2>Logs</h2>
+                </div>
+                <div class="collapsible-content" id="logs-content">
+                    <pre id="logs" class="log-box"></pre>
+                </div>
             </div>
         </div>
     </div>
diff --git a/static/script.js b/static/script.js
index 6739230..405805f 100644
--- a/static/script.js
+++ b/static/script.js
@@ -44,6 +44,12 @@ document.addEventListener('DOMContentLoaded', () => {
     const setDateButton = document.getElementById('set-date');
     const dateMessage = document.getElementById('date-message');
 
+    // --- Collapsible Sections ---
+    const controlsToggle = document.getElementById('controls-toggle');
+    const controlsContent = document.getElementById('controls-content');
+    const logsToggle = document.getElementById('logs-toggle');
+    const logsContent = document.getElementById('logs-content');
+
     // --- Mock Controls Setup ---
     const mockControls = document.getElementById('mock-controls');
     const mockDataSelector = document.getElementById('mock-data-selector');
@@ -394,6 +400,17 @@ document.addEventListener('DOMContentLoaded', () => {
     });
     setDateButton.addEventListener('click', setDate);
 
+    // --- Collapsible Section Listeners ---
+    controlsToggle.addEventListener('click', () => {
+        const isActive = controlsContent.classList.toggle('active');
+        controlsToggle.classList.toggle('active', isActive);
+    });
+
+    logsToggle.addEventListener('click', () => {
+        const isActive = logsContent.classList.toggle('active');
+        logsToggle.classList.toggle('active', isActive);
+    });
+
     // Initial data load
     setupMockControls();
     fetchStatus();
diff --git a/static/style.css b/static/style.css
index 7955571..dc06b6b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -110,6 +110,43 @@ button:hover {
     height: 60px;
 }
 
+.collapsible-card {
+    padding: 0;
+}
+
+.collapsible-card .toggle-header {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    padding: 20px;
+    cursor: pointer;
+    border-radius: 8px;
+}
+
+.collapsible-card .toggle-header.active {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom: 1px solid #eee;
+}
+
+.collapsible-card .toggle-header:hover {
+    background-color: #e9e9f3;
+}
+
+.toggle-icon {
+    width: 40px;
+    height: 40px;
+}
+
+.collapsible-content {
+    display: none;
+    padding: 20px;
+}
+
+.collapsible-content.active {
+    display: block;
+}
+
 /* Status-specific colors */
 #sync-status.in-sync, #jitter-status.good { font-weight: bold; color: #28a745; }
 #sync-status.clock-ahead, #sync-status.clock-behind, #jitter-status.average { font-weight: bold; color: #ffc107; }