Update assets/js/script.js

assets/js/script.js

@@ -1,182 +1,991 @@
-// === CONFIG ===
-const swipeThreshold = 60;        // pixels
-const circleThreshold = 20;       // points stored
-const gestureCooldown = 1000;     // ms
-const smoothingWindow = 5;        // average over last N points
-
-let emailList = [
-  { id: 1, sender: "Alex", subject: "Project Update", snippet: "Let's meet tomorrow." },
-  { id: 2, sender: "Mira", subject: "Dinner?", snippet: "Want to try sushi tonight?" },
-  { id: 3, sender: "Boss", subject: "Deadline moved", snippet: "Submit by Friday." },
+// ----------------------------
+// Sample Email Data
+// ----------------------------
+const emails = [
+    {
+        id: 1,
+        sender: "Interview Kicks",
+        subject: "Can I Become an ML Engineer? Why Not, We Ask!",
+        snippet: "It's time to banish that doubt forever. Attend our masterclass to unlock your potential.",
+        timestamp: "1:31 PM"
+    },
+    {
+        id: 2,
+        sender: "Career Brew",
+        subject: "7th Sep Jobs, 87 Hottest Jobs and Early Career Jobs - Do Not Miss",
+        snippet: "Top companies are hiring right now — don't miss your shot at these exclusive opportunities!",
+        timestamp: "12:35 PM"
+    },
+    {
+        id: 3,
+        sender: "Professor Smith",
+        subject: "Research Collaboration Proposal",
+        snippet: "I've reviewed your proposal draft. Let's schedule a call next week to discuss next steps.",
+        timestamp: "10:22 AM"
+    },
+    {
+        id: 4,
+        sender: "Friend",
+        subject: "Weekend Plans",
+        snippet: "Are we still on for the hiking trip this weekend? Let me know so I can book the gear.",
+        timestamp: "Yesterday"
+    },
+    {
+        id: 5,
+        sender: "Bank Support",
+        subject: "Monthly Statement",
+        snippet: "Your statement is ready. Minimum due: $120. Avoid penalties by paying before the 15th.",
+        timestamp: "Sep 5"
+    },
+    {
+        id: 6,
+        sender: "Netflix",
+        subject: "New Releases This Week!",
+        snippet: "Check out the hottest new shows and movies added to your watchlist this week.",
+        timestamp: "Sep 4"
+    },
+    {
+        id: 7,
+        sender: "Amazon",
+        subject: "Your Order #12345 Has Shipped",
+        snippet: "Your package is on the way! Track your delivery using the link below.",
+        timestamp: "Sep 3"
+    },
+    {
+        id: 8,
+        sender: "LinkedIn",
+        subject: "You have 5 new notifications",
+        snippet: "See who viewed your profile and new job recommendations.",
+        timestamp: "Sep 2"
+    },
+    {
+        id: 9,
+        sender: "Microsoft",
+        subject: "Your Office 365 Subscription Renewal",
+        snippet: "Your Office 365 subscription will expire in 7 days. Renew now to avoid service interruption.",
+        timestamp: "Sep 1"
+    },
+    {
+        id: 10,
+        sender: "TripAdvisor",
+        subject: "Your upcoming trip to Paris",
+        snippet: "Don't forget to check-in for your flight tomorrow. Here's your itinerary and hotel information.",
+        timestamp: "Aug 30"
+    },
+    {
+        id: 11,
+        sender: "Travel Agency",
+        subject: "Your Paris Hotel Confirmation",
+        snippet: "Your reservation at the Eiffel Tower View Hotel is confirmed for September 10-15.",
+        timestamp: "Aug 29"
+    },
+    {
+        id: 12,
+        sender: "University Alumni",
+        subject: "Alumni Networking Event Next Week",
+        snippet: "Join us for a special networking event with industry leaders. Register now to secure your spot.",
+        timestamp: "Aug 28"
+    },
+    {
+        id: 13,
+        sender: "Gym Membership",
+        subject: "Your Membership is Expiring Soon",
+        snippet: "Your gym membership will expire in 5 days. Renew now to continue enjoying our facilities.",
+        timestamp: "Aug 27"
+    },
+    {
+        id: 14,
+        sender: "Online Course",
+        subject: "Your Course Certificate is Ready",
+        snippet: "Congratulations! You've completed the Data Science Fundamentals course. Download your certificate now.",
+        timestamp: "Aug 26"
+    },
+    {
+        id: 15,
+        sender: "Tech Conference",
+        subject: "Your Conference Ticket is Confirmed",
+        snippet: "Your ticket for the AI Summit is confirmed. Check your email for event details and schedule.",
+        timestamp: "Aug 25"
+    }
 ];
 
-let selectedEmailId = null;
-let gestureInProgress = false;
-let lastGestureTime = 0;
-let points = [];
-let smoothedPoints = [];
-let lastX = null, lastY = null;
-
-const video = document.getElementById("webcam");
-const canvas = document.getElementById("canvas");
-const ctx = canvas.getContext("2d");
-const feedback = document.getElementById("action-feedback");
-const debug = document.getElementById("debug");
-
-// === UI Rendering ===
-function renderEmails() {
-  const list = document.getElementById("email-list");
-  list.innerHTML = "";
-  emailList.forEach(e => {
-    const div = document.createElement("div");
-    div.className = "email" + (selectedEmailId === e.id ? " selected" : "");
-    div.innerHTML = `<b>${e.sender}</b><br><span>${e.subject}</span><br><small>${e.snippet}</small>`;
-    list.appendChild(div);
-  });
-}
-
-// === Feedback Utility ===
-function showFeedback(text, color = "#4CAF50") {
-  feedback.style.background = color;
-  feedback.textContent = text;
-  feedback.style.opacity = 1;
-  setTimeout(() => (feedback.style.opacity = 0), 1500);
-}
-
-// === Gesture Handling ===
-function handleGesture(type) {
-  const now = Date.now();
-  if (now - lastGestureTime < gestureCooldown) return;
-  lastGestureTime = now;
-  gestureInProgress = true;
-
-  switch (type) {
-    case "swipeLeft":
-      if (selectedEmailId != null) {
-        emailList = emailList.filter(e => e.id !== selectedEmailId);
-        selectedEmailId = null;
-        renderEmails();
-        showFeedback("Deleted ❌", "#e74c3c");
-      }
-      break;
-    case "swipeRight":
-      if (selectedEmailId != null) {
-        showFeedback("Archived ✅", "#4CAF50");
-        selectedEmailId = null;
-        renderEmails();
-      }
-      break;
-    case "circle":
-      showFeedback("Refreshed 🔄", "#3498db");
-      renderEmails();
-      break;
-    case "point":
-      selectClosestEmail(lastX, lastY);
-      break;
-    case "palm":
-      selectedEmailId = null;
-      renderEmails();
-      showFeedback("Deselected ✋", "#f1c40f");
-      break;
-  }
-  gestureInProgress = false;
-}
-
-function selectClosestEmail(x, y) {
-  const rects = document.querySelectorAll(".email");
-  let minDist = Infinity, chosen = null;
-  rects.forEach((r, i) => {
-    const b = r.getBoundingClientRect();
-    const cx = (b.left + b.right) / 2;
-    const cy = (b.top + b.bottom) / 2;
-    const dist = Math.hypot(cx - x, cy - y);
-    if (dist < minDist) {
-      minDist = dist;
-      chosen = emailList[i].id;
-    }
-  });
-  if (chosen != null) {
-    selectedEmailId = chosen;
-    renderEmails();
-    showFeedback("Selected 👉", "#9b59b6");
-  }
+// ----------------------------
+// Debug Utilities
+// ----------------------------
+class DebugManager {
+    constructor() {
+        this.statusEl = document.getElementById('debugStatus');
+        this.selectedEmailEl = document.getElementById('debugSelectedEmail');
+        this.gestureTypeEl = document.getElementById('debugGestureType');
+        this.bufferCountEl = document.getElementById('debugBufferCount');
+        this.circleCountEl = document.getElementById('debugCircleCount');
+        this.cameraStatusEl = document.getElementById('debugCameraStatus');
+        this.lastErrorEl = document.getElementById('debugLastError');
+        this.statusIndicator = document.getElementById('statusIndicator');
+        
+        // Get debug toggle button
+        this.toggleButton = document.getElementById('debugToggle');
+        this.debugPanel = document.getElementById('debugPanel');
+        
+        // Add click event listener
+        this.toggleButton.addEventListener('click', () => {
+            this.toggleDebugPanel();
+        });
+    }
+    
+    updateStatus(status) {
+        this.statusEl.textContent = status;
+    }
+    
+    updateSelectedEmail(emailId) {
+        if (emailId) {
+            const email = emails.find(e => e.id === emailId);
+            this.selectedEmailEl.textContent = email ? email.subject.substring(0, 20) + '...' : 'Unknown';
+        } else {
+            this.selectedEmailEl.textContent = 'None';
+        }
+    }
+    
+    updateGestureType(gestureType) {
+        this.gestureTypeEl.textContent = gestureType;
+    }
+    
+    updateBufferCount(count) {
+        this.bufferCountEl.textContent = `${count} points`;
+    }
+    
+    updateCircleCount(count) {
+        this.circleCountEl.textContent = `${count} points`;
+    }
+    
+    updateCameraStatus(status) {
+        this.cameraStatusEl.textContent = status;
+    }
+    
+    logError(error) {
+        console.error("Gesture Detection Error:", error);
+        this.lastErrorEl.textContent = error.message.substring(0, 50) + (error.message.length > 50 ? '...' : '');
+        
+        // Update status indicator to red
+        this.statusIndicator.className = 'status-indicator error';
+    }
+    
+    setReady() {
+        this.updateStatus('Ready');
+        this.statusIndicator.className = 'status-indicator ready';
+    }
+    
+    setProcessing() {
+        this.updateStatus('Processing...');
+        this.statusIndicator.className = 'status-indicator processing';
+    }
+    
+    toggleDebugPanel() {
+        if (this.debugPanel.classList.contains('visible')) {
+            this.debugPanel.classList.remove('visible');
+        } else {
+            this.debugPanel.classList.add('visible');
+        }
+    }
 }
 
-// === Gesture Detection Logic ===
-function processLandmarks(landmarks) {
-  const indexTip = landmarks[8];
-  const wrist = landmarks[0];
-  const palmOpen = Math.abs(landmarks[12].y - landmarks[0].y) < 0.1;
-
-  const x = indexTip.x * canvas.width;
-  const y = indexTip.y * canvas.height;
-
-  lastX = x; lastY = y;
-  points.push({ x, y });
-  if (points.length > circleThreshold) points.shift();
-
-  // Smooth coordinates
-  smoothedPoints.push({ x, y });
-  if (smoothedPoints.length > smoothingWindow) smoothedPoints.shift();
-  const avg = smoothedPoints.reduce((a, p) => ({ x: a.x + p.x, y: a.y + p.y }), { x: 0, y: 0 });
-  const smoothedX = avg.x / smoothedPoints.length;
-  const smoothedY = avg.y / smoothedPoints.length;
-
-  // Swipe detection
-  if (Math.abs(x - wrist.x * canvas.width) > swipeThreshold) {
-    if (x < wrist.x * canvas.width) handleGesture("swipeLeft");
-    else handleGesture("swipeRight");
-  }
-
-  // Circle detection
-  if (points.length === circleThreshold) {
-    const start = points[0], end = points[points.length - 1];
-    const dist = Math.hypot(end.x - start.x, end.y - start.y);
-    if (dist < 40) handleGesture("circle");
-  }
-
-  // Palm open detection
-  if (palmOpen) handleGesture("palm");
+// ----------------------------
+// UI Management
+// ----------------------------
+class UIManager {
+    constructor() {
+        this.emailList = document.getElementById('emailList');
+        this.actionFeedback = document.getElementById('actionFeedback');
+        this.selectionHighlight = document.getElementById('selectionHighlight');
+        this.handLandmarks = document.getElementById('handLandmarks');
+        this.gesturePath = document.getElementById('gesturePath');
+        this.scrollIndicator = document.getElementById('scrollIndicator');
+        
+        this.selectedEmail = null;
+        this.emailElements = [];
+        this.scrollOffset = 0;
+        this.maxScroll = 0;
+        this.scrollSpeed = 0;
+        this.isScrolling = false;
+        
+        this.renderEmails();
+        this.setupEventListeners();
+        
+        // Create confirmation overlay
+        this.createConfirmationOverlay();
+        
+        // Setup scroll indicator
+        this.setupScrollIndicator();
+    }
+    
+    createConfirmationOverlay() {
+        const overlay = document.createElement('div');
+        overlay.className = 'confirmation-overlay';
+        overlay.innerHTML = `
+            <div class="confirmation-box">
+                <div class="confirmation-icon">⚠️</div>
+                <h3 class="confirmation-title">Confirm Action</h3>
+                <p class="confirmation-message">Are you sure you want to perform this action?</p>
+                <div class="confirmation-buttons">
+                    <button class="confirmation-button cancel">Cancel</button>
+                    <button class="confirmation-button confirm">Confirm</button>
+                </div>
+            </div>
+        `;
+        
+        document.body.appendChild(overlay);
+        this.confirmationOverlay = overlay;
+        
+        // Add event listeners
+        overlay.querySelector('.cancel').addEventListener('click', () => {
+            this.hideConfirmation();
+        });
+        
+        overlay.querySelector('.confirm').addEventListener('click', () => {
+            if (this.confirmationCallback) {
+                this.confirmationCallback();
+                this.hideConfirmation();
+            }
+        });
+        
+        // Click outside to cancel
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+                this.hideConfirmation();
+            }
+        });
+    }
+    
+    setupScrollIndicator() {
+        this.scrollIndicator.style.display = 'none';
+    }
+    
+    showScrollIndicator(direction) {
+        this.scrollIndicator.style.display = 'block';
+        this.scrollIndicator.className = `scroll-indicator ${direction}`;
+        
+        // Auto-hide after 500ms
+        setTimeout(() => {
+            this.scrollIndicator.style.display = 'none';
+        }, 500);
+    }
+    
+    showConfirmation(message, callback) {
+        this.confirmationOverlay.querySelector('.confirmation-message').textContent = message;
+        this.confirmationCallback = callback;
+        this.confirmationOverlay.classList.add('show');
+    }
+    
+    hideConfirmation() {
+        this.confirmationOverlay.classList.remove('show');
+        this.confirmationCallback = null;
+    }
+    
+    renderEmails() {
+        this.emailList.innerHTML = '';
+        this.emailElements = [];
+        
+        emails.forEach(email => {
+            const emailElement = document.createElement('div');
+            emailElement.className = 'email-item';
+            emailElement.dataset.id = email.id;
+            
+            emailElement.innerHTML = `
+                <div class="email-header">
+                    <div class="email-sender">${email.sender}</div>
+                    <div class="email-time">${email.timestamp}</div>
+                </div>
+                <div class="email-subject">${email.subject}</div>
+                <div class="email-snippet">${email.snippet}</div>
+            `;
+            
+            this.emailList.appendChild(emailElement);
+            this.emailElements.push({
+                id: email.id,
+                element: emailElement,
+                rect: null
+            });
+        });
+        
+        // Update email positions
+        this.updateEmailPositions();
+        
+        // Calculate max scroll
+        this.maxScroll = this.emailList.scrollHeight - this.emailList.clientHeight;
+    }
+    
+    updateEmailPositions() {
+        this.emailListRect = this.emailList.getBoundingClientRect();
+        
+        this.emailElements.forEach(item => {
+            const rect = item.element.getBoundingClientRect();
+            item.rect = {
+                left: rect.left,
+                top: rect.top,
+                right: rect.right,
+                bottom: rect.bottom,
+                width: rect.width,
+                height: rect.height
+            };
+        });
+    }
+    
+    selectEmail(emailId) {
+        // Remove previous selection
+        if (this.selectedEmail) {
+            const prevElement = this.emailElements.find(e => e.id === this.selectedEmail);
+            if (prevElement) {
+                prevElement.element.classList.remove('selected');
+            }
+        }
+        
+        // Set new selection
+        this.selectedEmail = emailId;
+        const newElement = this.emailElements.find(e => e.id === emailId);
+        
+        if (newElement) {
+            newElement.element.classList.add('selected');
+            this.showSelectionHighlight(newElement.rect);
+            return newElement.rect;
+        }
+        
+        return null;
+    }
+    
+    showSelectionHighlight(rect) {
+        this.selectionHighlight.style.display = 'block';
+        this.selectionHighlight.style.left = `${rect.left}px`;
+        this.selectionHighlight.style.top = `${rect.top}px - ${this.scrollOffset}px`;
+        this.selectionHighlight.style.width = `${rect.width}px`;
+        this.selectionHighlight.style.height = `${rect.height}px`;
+        
+        // Enhanced feedback - scale animation
+        this.selectionHighlight.style.transform = 'scale(1.02)';
+        setTimeout(() => {
+            this.selectionHighlight.style.transform = 'scale(1)';
+        }, 150);
+    }
+    
+    hideSelectionHighlight() {
+        this.selectionHighlight.style.display = 'none';
+    }
+    
+    showActionFeedback(message, type) {
+        this.actionFeedback.textContent = message;
+        this.actionFeedback.className = 'action-feedback';
+        
+        if (type === 'delete') {
+            this.actionFeedback.classList.add('delete');
+        } else if (type === 'archive') {
+            this.actionFeedback.classList.add('archive');
+        } else {
+            this.actionFeedback.classList.add('summary');
+        }
+        
+        this.actionFeedback.classList.add('show');
+        
+        setTimeout(() => {
+            this.actionFeedback.classList.remove('show');
+        }, 2000);
+    }
+    
+    clearSelection() {
+        if (this.selectedEmail) {
+            const element = this.emailElements.find(e => e.id === this.selectedEmail);
+            if (element) {
+                element.element.classList.remove('selected');
+            }
+            this.selectedEmail = null;
+            this.hideSelectionHighlight();
+        }
+    }
+    
+    setupEventListeners() {
+        window.addEventListener('resize', () => {
+            this.updateEmailPositions();
+            if (this.selectedEmail) {
+                const element = this.emailElements.find(e => e.id === this.selectedEmail);
+                if (element) {
+                    this.showSelectionHighlight(element.rect);
+                }
+            }
+            
+            // Recalculate max scroll
+            this.maxScroll = this.emailList.scrollHeight - this.emailList.clientHeight;
+        });
+        
+        // Add scroll event listener
+        this.emailList.addEventListener('scroll', () => {
+            this.scrollOffset = this.emailList.scrollTop;
+            this.updateEmailPositions();
+        });
+    }
+    
+    // For gesture visualization
+    updateHandLandmarks(landmarks) {
+        this.handLandmarks.innerHTML = '';
+        
+        if (!landmarks || landmarks.length === 0) return;
+        
+        landmarks.forEach((landmark, i) => {
+            const landmarkEl = document.createElement('div');
+            landmarkEl.className = 'landmark';
+            if (i === 8) { // Index finger tip
+                landmarkEl.classList.add('index-tip');
+            }
+            
+            landmarkEl.style.left = `${landmark.x * 100}%`;
+            landmarkEl.style.top = `${landmark.y * 100}%`;
+            
+            this.handLandmarks.appendChild(landmarkEl);
+        });
+    }
+    
+    updateGesturePath(points) {
+        this.gesturePath.innerHTML = '';
+        
+        if (!points || points.length === 0) return;
+        
+        points.forEach(point => {
+            const pointEl = document.createElement('div');
+            pointEl.className = 'point';
+            pointEl.style.left = `${point.x * 100}%`;
+            pointEl.style.top = `${point.y * 100}%`;
+            this.gesturePath.appendChild(pointEl);
+        });
+    }
+    
+    // Haptic feedback simulation (if supported)
+    provideHapticFeedback() {
+        if (navigator.vibrate) {
+            navigator.vibrate(50);
+        }
+    }
+    
+    // Scroll the email list
+    scrollEmailList(direction, speed) {
+        const scrollAmount = direction === 'up' ? -speed : speed;
+        this.emailList.scrollTop += scrollAmount;
+        
+        // Update scroll offset
+        this.scrollOffset = this.emailList.scrollTop;
+        
+        // Show scroll indicator
+        this.showScrollIndicator(direction);
+        
+        // Update email positions
+        this.updateEmailPositions();
+    }
+    
+    // Calculate the position of the hand relative to the email list
+    getRelativePosition(landmark, videoParams) {
+        const emailListRect = this.emailList.getBoundingClientRect();
+        const videoRect = document.getElementById('webcam').getBoundingClientRect();
+        
+        // Convert landmark coordinates to screen coordinates
+        const screenX = landmark.x * videoRect.width;
+        const screenY = landmark.y * videoRect.height;
+        
+        // Calculate relative position within email list
+        const relativeX = screenX - emailListRect.left;
+        const relativeY = screenY - emailListRect.top + this.scrollOffset;
+        
+        return {
+            x: relativeX,
+            y: relativeY
+        };
+    }
 }
 
-// === MediaPipe Setup ===
-async function startHands() {
-  const hands = new Hands({
-    locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`,
-  });
-  hands.setOptions({
-    maxNumHands: 1,
-    modelComplexity: 1,
-    minDetectionConfidence: 0.7,
-    minTrackingConfidence: 0.6,
-  });
-
-  hands.onResults((results) => {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
-      const landmarks = results.multiHandLandmarks[0];
-      drawConnectors(ctx, landmarks, HAND_CONNECTIONS, { color: "#00FF00", lineWidth: 3 });
-      drawLandmarks(ctx, landmarks, { color: "#FF0000", lineWidth: 2 });
-      processLandmarks(landmarks);
-      debug.textContent = `Gesture Points: ${points.length}`;
-    }
-  });
-
-  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
-  video.srcObject = stream;
-  const camera = new Camera(video, {
-    onFrame: async () => {
-      await hands.send({ image: video });
-    },
-    width: 640,
-    height: 480,
-  });
-  camera.start();
+// ----------------------------
+// Gesture Detection
+// ----------------------------
+class GestureDetector {
+    constructor(uiManager, debugManager) {
+        this.uiManager = uiManager;
+        this.debugManager = debugManager;
+        this.selectedEmailId = null;
+        this.gestureBuffer = [];
+        this.circlePoints = [];
+        this.scrollBuffer = [];
+        this.circleThreshold = 12;
+        this.swipeThreshold = 35;
+        this.scrollThreshold = 20;
+        this.gestureCooldown = 1500;
+        this.lastGestureTime = 0;
+        this.camera = null;
+        this.lastTimestamp = Date.now();
+        
+        this.gestureStartPos = null;
+        this.holdTimer = null;
+        this.isPanning = false;
+        this.lastScrollTime = 0;
+        this.scrollSpeedFactor = 1.5;
+        
+        this.debugManager.updateStatus('Setting up MediaPipe...');
+        this.setupMediaPipe();
+    }
+    
+    setupMediaPipe() {
+        try {
+            const hands = new Hands({
+                locateFile: (file) => {
+                    return `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`;
+                }
+            });
+            
+            hands.setOptions({
+                maxNumHands: 1,
+                modelComplexity: 1,
+                minDetectionConfidence: 0.7,
+                minTrackingConfidence: 0.7
+            });
+            
+            hands.onResults((results) => {
+                this.processResults(results);
+            });
+            
+            const videoElement = document.getElementById('webcam');
+            
+            // Check if Camera is available
+            if (typeof Camera === 'undefined') {
+                this.debugManager.logError(new Error("Camera utils not loaded. Make sure camera_utils.js is included."));
+                return;
+            }
+            
+            this.camera = new Camera(videoElement, {
+                onFrame: async () => {
+                    try {
+                        this.debugManager.setProcessing();
+                        await hands.send({image: videoElement});
+                    } catch (error) {
+                        this.debugManager.logError(error);
+                    }
+                },
+                width: 320,
+                height: 240
+            });
+            
+            this.startCamera();
+        } catch (error) {
+            this.debugManager.logError(error);
+            console.error("MediaPipe setup error:", error);
+        }
+    }
+    
+    async startCamera() {
+        try {
+            this.debugManager.updateCameraStatus('Starting...');
+            await this.camera.start();
+            this.debugManager.updateCameraStatus('Active');
+            this.debugManager.setReady();
+            console.log("Camera initialized successfully");
+        } catch (error) {
+            this.debugManager.updateCameraStatus('Error');
+            this.debugManager.logError(error);
+            
+            // Try to get more specific error information
+            if (error.name === 'NotAllowedError') {
+                alert("Camera access denied. Please allow camera access in your browser settings.");
+            } else if (error.name === 'NotFoundError') {
+                alert("No camera found. Please connect a camera device.");
+            } else {
+                alert("Failed to start camera: " + error.message);
+            }
+        }
+    }
+    
+    processResults(results) {
+        try {
+            // Update hand landmarks visualization
+            if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
+                this.uiManager.updateHandLandmarks(results.multiHandLandmarks[0]);
+                
+                // Update gesture path for debugging
+                if (this.gestureBuffer.length > 0) {
+                    this.uiManager.updateGesturePath(this.gestureBuffer);
+                }
+                
+                this.detectGesture(results.multiHandLandmarks[0]);
+            } else {
+                this.uiManager.clearSelection();
+                this.gestureBuffer = [];
+                this.circlePoints = [];
+                this.scrollBuffer = [];
+                this.debugManager.updateGestureType('None');
+                this.debugManager.updateBufferCount(0);
+                this.debugManager.updateCircleCount(0);
+            }
+        } catch (error) {
+            this.debugManager.logError(error);
+        }
+    }
+    
+    calculateCircleMetrics() {
+        if (this.circlePoints.length < 3) {
+            return { center: { x: 0, y: 0 }, radius: 0, circularity: 0 };
+        }
+        
+        // Find centroid
+        let centerX = 0;
+        let centerY = 0;
+        for (const point of this.circlePoints) {
+            centerX += point.x;
+            centerY += point.y;
+        }
+        centerX /= this.circlePoints.length;
+        centerY /= this.circlePoints.length;
+        
+        // Calculate radius and circularity
+        let totalRadius = 0;
+        let radiusVariance = 0;
+        const radii = [];
+        
+        for (const point of this.circlePoints) {
+            const dx = point.x - centerX;
+            const dy = point.y - centerY;
+            const radius = Math.sqrt(dx * dx + dy * dy);
+            radii.push(radius);
+            totalRadius += radius;
+        }
+        
+        const avgRadius = totalRadius / this.circlePoints.length;
+        
+        // Calculate variance to determine circularity
+        for (const radius of radii) {
+            radiusVariance += Math.pow(radius - avgRadius, 2);
+        }
+        radiusVariance /= this.circlePoints.length;
+        
+        // Calculate circularity (1 = perfect circle, 0 = not circular)
+        const circularity = radiusVariance < 0.0001 ? 1 : Math.max(0, 1 - radiusVariance / (avgRadius * avgRadius));
+        
+        return {
+            center: { x: centerX, y: centerY },
+            radius: avgRadius,
+            circularity: circularity
+        };
+    }
+    
+    detectGesture(landmarks) {
+        try {
+            const indexTip = landmarks[8];
+            const middleTip = landmarks[12];
+            const wrist = landmarks[0];
+            
+            // Calculate screen coordinates
+            const screenX = indexTip.x * window.innerWidth;
+            const screenY = indexTip.y * window.innerHeight;
+            
+            // Get video parameters for proper coordinate calculation
+            const videoParams = this.getVideoParameters();
+            
+            // Convert to email list relative coordinates
+            const relativePos = this.uiManager.getRelativePosition(indexTip, videoParams);
+            
+            // Pointing detection (index finger higher than middle)
+            if (indexTip.y < middleTip.y && wrist.y > indexTip.y) {
+                this.checkEmailSelection(relativePos.x, relativePos.y);
+                
+                // Check for scroll gestures
+                this.checkScrollGesture(landmarks);
+            } else {
+                this.uiManager.clearSelection();
+                this.gestureBuffer = [];
+                this.circlePoints = [];
+                this.scrollBuffer = [];
+                this.debugManager.updateGestureType('None');
+                this.debugManager.updateBufferCount(0);
+                this.debugManager.updateCircleCount(0);
+            }
+            
+            // Only process gestures if an email is selected
+            if (this.selectedEmailId === null) {
+                return;
+            }
+            
+            // Get palm center for gesture detection
+            const palmCenterX = (wrist.x + landmarks[9].x) / 2;
+            const palmCenterY = (wrist.y + landmarks[9].y) / 2;
+            
+            // Add to gesture buffer
+            const timestamp = Date.now();
+            const dt = timestamp - this.lastTimestamp;
+            this.lastTimestamp = timestamp;
+            
+            this.gestureBuffer.push({x: palmCenterX, y: palmCenterY, timestamp});
+            
+            // Check for swipe
+            if (this.gestureBuffer.length > 3) {
+                const prev = this.gestureBuffer[this.gestureBuffer.length - 2];
+                const current = this.gestureBuffer[this.gestureBuffer.length - 1];
+                
+                // Calculate distance and velocity
+                const dx = (current.x - prev.x) * window.innerWidth;
+                const dy = (current.y - prev.y) * window.innerHeight;
+                const velocityX = dx / dt;
+                const velocityY = dy / dt;
+                const speed = Math.sqrt(velocityX * velocityX + velocityY * velocityY);
+                
+                // Check if it's a horizontal swipe (using Fitts' Law principles)
+                if (Math.abs(dx) > this.swipeThreshold && 
+                    Math.abs(dx) > Math.abs(dy) * 1.5 && 
+                    speed > 0.3) {
+                    
+                    if (Date.now() - this.lastGestureTime > this.gestureCooldown) {
+                        this.lastGestureTime = Date.now();
+                        
+                        if (dx > 0) {
+                            this.debugManager.updateGestureType('Swipe Right');
+                            this.handleGesture('swipe_right');
+                        } else {
+                            this.debugManager.updateGestureType('Swipe Left');
+                            this.handleGesture('swipe_left');
+                        }
+                        
+                        this.gestureBuffer = [];
+                        this.debugManager.updateBufferCount(0);
+                    }
+                }
+            }
+            
+            // Check for circle
+            this.circlePoints.push({x: palmCenterX, y: palmCenterY});
+            this.debugManager.updateCircleCount(this.circlePoints.length);
+            
+            if (this.circlePoints.length > this.circleThreshold) {
+                const { center, radius, circularity } = this.calculateCircleMetrics();
+                
+                // Improved circle detection with circularity check
+                if (circularity > 0.75 && radius > 30 && 
+                    Date.now() - this.lastGestureTime > this.gestureCooldown) {
+                    
+                    this.lastGestureTime = Date.now();
+                    this.debugManager.updateGestureType('Circle');
+                    this.handleGesture('circle');
+                    this.circlePoints = [];
+                    this.debugManager.updateCircleCount(0);
+                }
+            }
+            
+            this.debugManager.updateBufferCount(this.gestureBuffer.length);
+        } catch (error) {
+            this.debugManager.logError(error);
+        }
+    }
+    
+    checkScrollGesture(landmarks) {
+        const wrist = landmarks[0];
+        const indexTip = landmarks[8];
+        const middleTip = landmarks[12];
+        
+        // Only check for scrolling if index finger is lower than middle finger (scrolling gesture)
+        if (indexTip.y > middleTip.y) {
+            // Add to scroll buffer
+            this.scrollBuffer.push({
+                x: indexTip.x,
+                y: indexTip.y,
+                timestamp: Date.now()
+            });
+            
+            // Process scroll if we have enough points
+            if (this.scrollBuffer.length > 3) {
+                const recentPoints = this.scrollBuffer.slice(-3);
+                const first = recentPoints[0];
+                const last = recentPoints[recentPoints.length - 1];
+                const dt = last.timestamp - first.timestamp;
+                
+                if (dt > 0) {
+                    // Calculate vertical movement
+                    const dy = (last.y - first.y) * window.innerHeight;
+                    const scrollSpeed = Math.abs(dy) / dt * this.scrollSpeedFactor;
+                    
+                    // Check if movement is significant
+                    if (Math.abs(dy) > this.scrollThreshold && scrollSpeed > 0.5) {
+                        const direction = dy > 0 ? 'down' : 'up';
+                        this.uiManager.scrollEmailList(direction, scrollSpeed * 50);
+                        
+                        // Clear buffer after processing
+                        this.scrollBuffer = [];
+                        this.debugManager.updateGestureType(`Scroll ${direction}`);
+                    }
+                }
+            }
+        }
+    }
+    
+    getVideoParameters() {
+        const video = document.getElementById('webcam');
+        const videoRect = video.getBoundingClientRect();
+        
+        return {
+            videoWidth: video.videoWidth,
+            videoHeight: video.videoHeight,
+            rect: videoRect,
+            aspectRatio: video.videoWidth / video.videoHeight
+        };
+    }
+    
+    checkEmailSelection(x, y) {
+        try {
+            // Find the email under the finger
+            for (let i = this.uiManager.emailElements.length - 1; i >= 0; i--) {
+                const email = this.uiManager.emailElements[i];
+                if (email.rect && 
+                    x >= 0 && x <= email.rect.width &&
+                    y >= 0 && y <= email.rect.height) {
+                    
+                    // Only select if it's a different email
+                    if (this.selectedEmailId !== email.id) {
+                        this.selectedEmailId = email.id;
+                        this.uiManager.selectEmail(email.id);
+                        this.debugManager.updateSelectedEmail(email.id);
+                        
+                        // Start hold timer for confirmation
+                        this.startHoldTimer();
+                    }
+                    return;
+                }
+            }
+            
+            // If no email is selected, clear selection
+            if (!this.uiManager.emailElements.some(email => 
+                email.rect && 
+                x >= 0 && x <= email.rect.width &&
+                y >= 0 && y <= email.rect.height)) {
+                
+                this.uiManager.clearSelection();
+                this.selectedEmailId = null;
+                this.debugManager.updateSelectedEmail(null);
+                this.clearHoldTimer();
+            }
+        } catch (error) {
+            this.debugManager.logError(error);
+        }
+    }
+    
+    startHoldTimer() {
+        this.clearHoldTimer();
+        
+        // Start a new timer for confirmation
+        this.holdTimer = setTimeout(() => {
+            if (this.selectedEmailId) {
+                const email = emails.find(e => e.id === this.selectedEmailId);
+                this.uiManager.showConfirmation(
+                    `Long press detected on "${email.subject}".\n\nConfirm action?`,
+                    () => {
+                        // Action confirmed - perform gesture
+                        this.handleGesture('confirm');
+                    });
+            }
+        }, 1000);
+    }
+    
+    clearHoldTimer() {
+        if (this.holdTimer) {
+            clearTimeout(this.holdTimer);
+            this.holdTimer = null;
+        }
+    }
+    
+    handleGesture(gesture) {
+        try {
+            if (!this.selectedEmailId) return;
+            
+            const email = emails.find(e => e.id === this.selectedEmailId);
+            if (!email) return;
+            
+            switch (gesture) {
+                case 'swipe_left':
+                    // Show confirmation for destructive action (Fitts' Law principle)
+                    this.uiManager.showConfirmation(
+                        `Delete "${email.subject}"?`,
+                        () => {
+                            this.uiManager.showActionFeedback(`🗑️ Deleted: ${email.subject}`, 'delete');
+                            const index = emails.findIndex(e => e.id === this.selectedEmailId);
+                            if (index !== -1) emails.splice(index, 1);
+                            this.uiManager.renderEmails();
+                            this.selectedEmailId = null;
+                            this.debugManager.updateSelectedEmail(null);
+                            this.uiManager.provideHapticFeedback();
+                        }
+                    );
+                    break;
+                    
+                case 'swipe_right':
+                    this.uiManager.showConfirmation(
+                        `Archive "${email.subject}"?`,
+                        () => {
+                            this.uiManager.showActionFeedback(`✅ Archived: ${email.subject}`, 'archive');
+                            const archiveIndex = emails.findIndex(e => e.id === this.selectedEmailId);
+                            if (archiveIndex !== -1) emails.splice(archiveIndex, 1);
+                            this.uiManager.renderEmails();
+                            this.selectedEmailId = null;
+                            this.debugManager.updateSelectedEmail(null);
+                            this.uiManager.provideHapticFeedback();
+                        }
+                    );
+                    break;
+                    
+                case 'circle':
+                    const summary = `This email discusses ${email.subject.toLowerCase()}.`;
+                    this.uiManager.showActionFeedback(`📝 Summary: ${summary}`, 'summary');
+                    this.uiManager.provideHapticFeedback();
+                    break;
+                    
+                case 'confirm':
+                    // This is triggered when the user holds an email
+                    this.uiManager.showActionFeedback(`🔍 Selected: ${email.subject}`, 'summary');
+                    break;
+            }
+        } catch (error) {
+            this.debugManager.logError(error);
+        }
+    }
 }
 
-window.onload = () => {
-  canvas.width = window.innerWidth;
-  canvas.height = window.innerHeight;
-  renderEmails();
-  startHands();
-};
+// ----------------------------
+// Initialize App
+// ----------------------------
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize debug manager first
+    const debugManager = new DebugManager();
+    debugManager.updateStatus('Initializing UI...');
+    
+    // Initialize UI
+    const uiManager = new UIManager();
+    debugManager.setReady();
+    
+    // Request camera access
+    const videoElement = document.getElementById('webcam');
+    
+    navigator.mediaDevices.getUserMedia({ video: true })
+        .then(stream => {
+            videoElement.srcObject = stream;
+            debugManager.updateCameraStatus('Initializing...');
+            
+            // Initialize gesture detection after a short delay to ensure UI is ready
+            setTimeout(() => {
+                debugManager.updateStatus('Setting up gesture detection...');
+                try {
+                    new GestureDetector(uiManager, debugManager);
+                } catch (error) {
+                    debugManager.logError(error);
+                }
+            }, 1500);
+        })
+        .catch(err => {
+            debugManager.updateCameraStatus('Denied');
+            debugManager.logError(err);
+            console.error("Error accessing camera:", err);
+            
+            // More specific error handling
+            if (err.name === 'NotAllowedError') {
+                alert("Camera access denied. Please allow camera access in your browser settings.");
+            } else if (err.name === 'NotFoundError') {
+                alert("No camera found. Please connect a camera device.");
+            } else {
+                alert("Camera error: " + err.message);
+            }
+        });
+});