feat: Hide controls and logs behind toggleable dropdown cards

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>

static/index.html

@@ -54,8 +54,12 @@
             </div>
 
             <!-- Controls -->
-            <div class="card full-width">
+            <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">
@@ -108,14 +112,20 @@
                     <span id="date-message"></span>
                 </div>
                 </div>
+            </div>
 
             <!-- Logs -->
-            <div class="card full-width">
+            <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>
     <script src="icon-map.js"></script>
     <script src="mock-data.js"></script>
     <script src="script.js"></script>

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();

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; }