Update index.html

index.html

@@ -15,14 +15,15 @@
             <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...">
             </div>
+            
+            <!-- Debug Toggle Button -->
+            <div class="debug-toggle" id="debugToggle">
+                <button class="debug-button">⚙️</button>
+            </div>
         </div>
         
         <div class="content">
@@ -65,50 +66,41 @@
     
     <div class="selection-highlight" id="selectionHighlight" style="display: none;"></div>
     
-    <!-- Collapsible Debug Panel -->
+    <!-- Debug Panel (Hidden by default) -->
     <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>
+        <h3>Debug Information</h3>
+        <div class="debug-item">
+            <span class="debug-label">Status:</span>
+            <span class="debug-value" id="debugStatus">Initializing...</span>
         </div>
-        <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 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 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>