|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="debug-toggle" id="debugToggle"> |
|
|
<button class="debug-button">⚙️</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="content"> |
|
|
<div class="email-list" id="emailList"> |
|
|
|
|
|
</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> |
|
|
|
|
|
<div class="gesture-visualization"> |
|
|
<div class="hand-landmarks" id="handLandmarks"></div> |
|
|
<div class="gesture-path" id="gesturePath"></div> |
|
|
</div> |
|
|
|
|
|
<div class="selection-highlight" id="selectionHighlight" style="display: none;"></div> |
|
|
|
|
|
|
|
|
<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> |
