Update index.html

index.html

@@ -1,424 +1,106 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-}
-
-body {
-    background-color: #f5f5f5;
-    color: #333;
-    overflow-x: hidden;
-}
-
-.app-container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    max-width: 1600px;
-    margin: 0 auto;
-    background-color: white;
-    box-shadow: 0 0 20px rgba(0,0,0,0.1);
-}
-
-/* Header Styles */
-.header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 15px 25px;
-    background-color: #fff;
-    border-bottom: 1px solid #e0e0e0;
-    height: 60px;
-}
-
-.logo {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-size: 20px;
-    font-weight: bold;
-    color: #ea4335;
-}
-
-.logo i {
-    font-size: 24px;
-}
-
-.search-bar {
-    display: flex;
-    align-items: center;
-    background-color: #f1f3f4;
-    border-radius: 24px;
-    padding: 8px 16px;
-    width: 300px;
-}
-
-.search-bar input {
-    border: none;
-    background: transparent;
-    width: 100%;
-    padding: 5px;
-    font-size: 14px;
-    outline: none;
-}
-
-/* Debug Toggle Button */
-.debug-toggle {
-    margin-left: 20px;
-    position: relative;
-}
-
-.debug-button {
-    background-color: #f1f3f4;
-    border: 1px solid #e0e0e0;
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.3s ease;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.debug-button:hover {
-    background-color: #e0e0e0;
-    transform: scale(1.05);
-}
-
-/* Main Content Layout */
-.content {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
-}
-
-/* Email List Styles */
-.email-list {
-    flex: 1;
-    overflow-y: auto;
-    border-right: 1px solid #e0e0e0;
-    padding: 10px 20px;
-}
-
-.email-item {
-    padding: 12px 0;
-    border-bottom: 1px solid #f1f3f4;
-    cursor: pointer;
-    transition: background-color 0.2s;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.email-item:hover {
-    background-color: #f8f9fa;
-}
-
-.email-item.selected {
-    background-color: #e8f0fe;
-    border-left: 4px solid #4285f4;
-}
-
-.email-header {
-    display: flex;
-    flex-direction: column;
-    margin-right: 10px;
-    min-width: 150px;
-}
-
-.email-sender {
-    font-weight: bold;
-    color: #202124;
-    margin-bottom: 2px;
-    font-size: 14px;
-}
-
-.email-time {
-    color: #5f6368;
-    font-size: 12px;
-}
-
-.email-subject {
-    font-weight: 500;
-    color: #202124;
-    margin-bottom: 4px;
-    font-size: 15px;
-    flex: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 500px;
-}
-
-.email-snippet {
-    color: #5f6368;
-    font-size: 13px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 2;
-    max-width: 400px;
-}
-
-/* Webcam Overlay Styles */
-.webcam-container {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    width: 320px;
-    height: 240px;
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-    z-index: 100;
-    background-color: #000;
-}
-
-#webcam {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.gesture-guide {
-    position: fixed;
-    bottom: 20px;
-    left: 20px;
-    background-color: rgba(0,0,0,0.7);
-    color: white;
-    padding: 15px;
-    border-radius: 12px;
-    max-width: 300px;
-    z-index: 100;
-    backdrop-filter: blur(5px);
-    opacity: 0.9;
-    transition: opacity 0.3s;
-}
-
-.gesture-guide:hover {
-    opacity: 1;
-}
-
-.gesture-guide h3 {
-    margin-bottom: 10px;
-    color: #4285f4;
-}
-
-.gesture-item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 8px;
-}
-
-.gesture-icon {
-    width: 30px;
-    height: 30px;
-    background-color: #4285f4;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 10px;
-    color: white;
-    font-weight: bold;
-}
-
-/* Action Feedback */
-.action-feedback {
-    position: fixed;
-    top: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 15px 25px;
-    border-radius: 8px;
-    color: white;
-    font-weight: bold;
-    z-index: 200;
-    opacity: 0;
-    transition: opacity 0.3s;
-    min-width: 300px;
-    text-align: center;
-}
-
-.action-feedback.show {
-    opacity: 1;
-}
-
-.action-feedback.delete {
-    background-color: #ea4335;
-}
-
-.action-feedback.archive {
-    background-color: #34a853;
-}
-
-.action-feedback.summary {
-    background-color: #4285f4;
-}
-
-/* Selected Email Highlight */
-.selection-highlight {
-    position: absolute;
-    border: 3px solid #4285f4;
-    border-radius: 8px;
-    pointer-events: none;
-    z-index: 50;
-    animation: pulse 1.5s infinite;
-    background: rgba(66,133,244,0.03);
-}
-
-@keyframes pulse {
-    0% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.4); }
-    70% { box-shadow: 0 0 0 10px rgba(66, 133, 244, 0); }
-    100% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0); }
-}
-
-/* Gesture Visualization */
-.gesture-visualization {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 40;
-}
-
-.hand-landmarks {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-}
-
-.hand-landmarks .landmark {
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    background-color: #4285f4;
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 100;
-}
-
-.hand-landmarks .landmark.index-tip {
-    background-color: #34a853;
-    width: 12px;
-    height: 12px;
-}
-
-.gesture-path {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-}
-
-.gesture-path .point {
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    background-color: #ff0000;
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-}
-
-/* Debug Panel */
-.debug-panel {
-    position: fixed;
-    top: 60px;
-    right: 20px;
-    background-color: rgba(0,0,0,0.8);
-    color: #0f0;
-    padding: 15px;
-    border-radius: 12px;
-    max-width: 300px;
-    z-index: 100;
-    backdrop-filter: blur(5px);
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.3s ease;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-    transform: translateY(-10px);
-}
-
-.debug-panel.visible {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-}
-
-.debug-panel h3 {
-    color: #4285f4;
-    margin-bottom: 10px;
-}
-
-.debug-item {
-    margin-bottom: 5px;
-}
-
-.debug-label {
-    display: inline-block;
-    width: 120px;
-    color: #aaa;
-}
-
-.debug-value {
-    color: #fff;
-}
-
-/* Status Indicator */
-.status-indicator {
-    position: fixed;
-    bottom: 30px;
-    right: 30px;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    z-index: 200;
-}
-
-.status-indicator.ready {
-    background-color: #34a853;
-    box-shadow: 0 0 10px #34a853;
-}
-
-.status-indicator.processing {
-    background-color: #fbbc05;
-    animation: blink 1s infinite;
-}
-
-.status-indicator.error {
-    background-color: #ea4335;
-    animation: blink 0.5s infinite;
-}
-
-@keyframes blink {
-    50% { opacity: 0.5; }
-}
-
-/* For mobile responsiveness */
-@media (max-width: 768px) {
-    .webcam-container {
-        width: 240px;
-        height: 180px;
-        bottom: 10px;
-        right: 10px;
-    }
-
-    .gesture-guide, .debug-panel {
-        max-width: 240px;
-        font-size: 0.9em;
-        padding: 10px;
-    }
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>GestureMail Pro</title>
+    <link rel="stylesheet" href="style.css">
+    <!-- MediaPipe Hands + Camera Utils -->
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/hands.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
+</head>
+<body>
+    <div class="app-container">
+        <div class="header">
+            <div class="logo">
+                <i>📧</i>
+                <span>GestureMail Pro</span>
+            </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">
+            <div class="email-list" id="emailList">
+                <!-- Emails will be populated here -->
+            </div>
+        </div>
+    </div>
+    
+    <div class="webcam-container">
+        <video id="webcam" autoplay playsinline></video>
+    </div>
+    
+    <div class="gesture-guide">
+        <h3>🖐️ Gesture Guide</h3>
+        <div class="gesture-item">
+            <div class="gesture-icon">1</div>
+            <div>Point to select an email</div>
+        </div>
+        <div class="gesture-item">
+            <div class="gesture-icon">←</div>
+            <div>Swipe left to delete</div>
+        </div>
+        <div class="gesture-item">
+            <div class="gesture-icon">→</div>
+            <div>Swipe right to archive</div>
+        </div>
+        <div class="gesture-item">
+            <div class="gesture-icon">◯</div>
+            <div>Draw circle for summary</div>
+        </div>
+    </div>
+    
+    <div class="action-feedback" id="actionFeedback"></div>
     
-    .email-subject {
-        max-width: 200px;
-    }
+    <div class="gesture-visualization">
+        <div class="hand-landmarks" id="handLandmarks"></div>
+        <div class="gesture-path" id="gesturePath"></div>
+    </div>
     
-    .email-snippet {
-        max-width: 150px;
-    }
-}
+    <div class="selection-highlight" id="selectionHighlight" style="display: none;"></div>
+    
+    <!-- Debug Panel -->
+    <div class="debug-panel" id="debugPanel">
+        <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-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>
+</body>
+</html>