Update index.html

index.html

@@ -15,6 +15,10 @@
             <div class="logo">
                 <i>📧</i>
                 <span>GestureMail Pro</span>
+                <!-- Debug Toggle Button -->
+                <button id="debugToggle" class="debug-toggle">
+                    <i class="fas fa-cog"></i>
+                </button>
             </div>
             <div class="search-bar">
                 <input type="text" placeholder="Search emails...">
@@ -61,40 +65,50 @@
     
     <div class="selection-highlight" id="selectionHighlight" style="display: none;"></div>
     
-    <div class="debug-panel">
-        <h3>Debug Information</h3>
-        <div class="debug-item">
-            <span class="debug-label">Status:</span>
-            <span class="debug-value" id="debugStatus">Initializing...</span>
+    <!-- Collapsible Debug Panel -->
+    <div class="debug-panel" id="debugPanel">
+        <div class="debug-header">
+            <h3>Debug Information</h3>
+            <button id="debugCollapse" class="collapse-btn">
+                <i class="fas fa-angle-down"></i>
+            </button>
         </div>
-        <div class="debug-item">
-            <span class="debug-label">Selected Email:</span>
-            <span class="debug-value" id="debugSelectedEmail">None</span>
-        </div>
-        <div class="debug-item">
-            <span class="debug-label">Gesture Type:</span>
-            <span class="debug-value" id="debugGestureType">None</span>
-        </div>
-        <div class="debug-item">
-            <span class="debug-label">Gesture Buffer:</span>
-            <span class="debug-value" id="debugBufferCount">0 points</span>
-        </div>
-        <div class="debug-item">
-            <span class="debug-label">Circle Points:</span>
-            <span class="debug-value" id="debugCircleCount">0 points</span>
-        </div>
-        <div class="debug-item">
-            <span class="debug-label">Camera:</span>
-            <span class="debug-value" id="debugCameraStatus">Not initialized</span>
-        </div>
-        <div class="debug-item">
-            <span class="debug-label">Last Error:</span>
-            <span class="debug-value" id="debugLastError">None</span>
+        <div class="debug-content">
+            <div class="debug-item">
+                <span class="debug-label">Status:</span>
+                <span class="debug-value" id="debugStatus">Initializing...</span>
+            </div>
+            <div class="debug-item">
+                <span class="debug-label">Selected Email:</span>
+                <span class="debug-value" id="debugSelectedEmail">None</span>
+            </div>
+            <div class="debug-item">
+                <span class="debug-label">Gesture Type:</span>
+                <span class="debug-value" id="debugGestureType">None</span>
+            </div>
+            <div class="debug-item">
+                <span class="debug-label">Gesture Buffer:</span>
+                <span class="debug-value" id="debugBufferCount">0 points</span>
+            </div>
+            <div class="debug-item">
+                <span class="debug-label">Circle Points:</span>
+                <span class="debug-value" id="debugCircleCount">0 points</span>
+            </div>
+            <div class="debug-item">
+                <span class="debug-label">Camera:</span>
+                <span class="debug-value" id="debugCameraStatus">Not initialized</span>
+            </div>
+            <div class="debug-item">
+                <span class="debug-label">Last Error:</span>
+                <span class="debug-value" id="debugLastError">None</span>
+            </div>
         </div>
     </div>
     
     <div class="status-indicator" id="statusIndicator"></div>
 
     <script src="assets/js/script.js"></script>
+    <!-- Font Awesome for icons -->
+    <script src="https://kit.fontawesome.com/your-font-awesome-key.js" crossorigin="anonymous"></script>
 </body>
 </html>