Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Focus Guard</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="/static/styles.css?v=2"> | |
| </head> | |
| <body> | |
| <h1>Focus Guard</h1> | |
| <!-- Top Menu --> | |
| <nav id="top-menu"> | |
| <button id="menu-start" class="menu-btn">Start Focus</button> | |
| <div class="separator"></div> | |
| <button id="menu-achievement" class="menu-btn">My Achievement</button> | |
| <div class="separator"></div> | |
| <button id="menu-records" class="menu-btn">My Records</button> | |
| <div class="separator"></div> | |
| <button id="menu-customise" class="menu-btn">Customise</button> | |
| <div class="separator"></div> | |
| <button id="menu-help" class="menu-btn">Help</button> | |
| </nav> | |
| <!-- Page A --> | |
| <main id="page-a" class="page"> | |
| <h1>Focus Guard</h1> | |
| <p>Your productivity monitor assistant.</p> | |
| <button id="start-button" class="btn-main">Start</button> | |
| </main> | |
| <!-- Page B --> | |
| <main id="page-b" class="page hidden"> | |
| <!-- 1. Camera / Display Area --> | |
| <section id="display-area"> | |
| <p id="display-placeholder">Nothing</p> | |
| </section> | |
| <!-- 2. Timeline Area --> | |
| <section id="timeline-area"> | |
| <div class="timeline-label">Timeline</div> | |
| <div id="timeline-visuals"></div> | |
| <div id="timeline-line"></div> | |
| </section> | |
| <!-- 3. Control Buttons --> | |
| <section id="control-panel"> | |
| <button id="btn-cam-start" class="action-btn green">Start</button> | |
| <button id="btn-floating" class="action-btn yellow">Floating Window</button> | |
| <button id="btn-models" class="action-btn blue">Models</button> | |
| <button id="btn-cam-stop" class="action-btn red">Stop</button> | |
| </section> | |
| <!-- 4. Frame Control --> | |
| <section id="frame-control"> | |
| <label for="frame-slider">Frame</label> | |
| <input type="range" id="frame-slider" min="1" max="60" value="30"> | |
| <input type="number" id="frame-input" value="30"> | |
| </section> | |
| </main> | |
| <!-- Page C - My Achievement --> | |
| <main id="page-c" class="page hidden"> | |
| <h1>My Achievement</h1> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="total-sessions">0</div> | |
| <div class="stat-label">Total Sessions</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="total-hours">0h</div> | |
| <div class="stat-label">Total Focus Time</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="avg-focus">0%</div> | |
| <div class="stat-label">Average Focus</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="current-streak">0</div> | |
| <div class="stat-label">Day Streak</div> | |
| </div> | |
| </div> | |
| <div class="achievements-section"> | |
| <h2>Badges</h2> | |
| <div id="badges-container" class="badges-grid"></div> | |
| </div> | |
| </main> | |
| <!-- Page D - My Records --> | |
| <main id="page-d" class="page hidden"> | |
| <h1>My Records</h1> | |
| <div class="records-controls"> | |
| <button id="filter-today" class="filter-btn active">Today</button> | |
| <button id="filter-week" class="filter-btn">This Week</button> | |
| <button id="filter-month" class="filter-btn">This Month</button> | |
| <button id="filter-all" class="filter-btn">All Time</button> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="focus-chart"></canvas> | |
| </div> | |
| <div class="sessions-list"> | |
| <h2>Recent Sessions</h2> | |
| <table id="sessions-table"> | |
| <thead> | |
| <tr> | |
| <th>Date</th> | |
| <th>Duration</th> | |
| <th>Focus Score</th> | |
| <th>Action</th> | |
| </tr> | |
| </thead> | |
| <tbody id="sessions-tbody"></tbody> | |
| </table> | |
| </div> | |
| </main> | |
| <!-- Page E - Customise --> | |
| <main id="page-e" class="page hidden"> | |
| <h1>Customise</h1> | |
| <div class="settings-container"> | |
| <div class="setting-group"> | |
| <h2>Detection Settings</h2> | |
| <div class="setting-item"> | |
| <label for="sensitivity-slider">Detection Sensitivity</label> | |
| <div class="slider-group"> | |
| <input type="range" id="sensitivity-slider" min="1" max="10" value="6"> | |
| <span id="sensitivity-value">6</span> | |
| </div> | |
| <p class="setting-description">Higher values require stricter focus criteria</p> | |
| </div> | |
| <div class="setting-item"> | |
| <label for="default-framerate">Default Frame Rate</label> | |
| <div class="slider-group"> | |
| <input type="range" id="default-framerate" min="5" max="60" value="30"> | |
| <span id="framerate-value">30</span> FPS | |
| </div> | |
| </div> | |
| </div> | |
| <div class="setting-group"> | |
| <h2>Notifications</h2> | |
| <div class="setting-item"> | |
| <label> | |
| <input type="checkbox" id="enable-notifications" checked> | |
| Enable distraction notifications | |
| </label> | |
| </div> | |
| <div class="setting-item"> | |
| <label for="notification-threshold">Alert after (seconds)</label> | |
| <input type="number" id="notification-threshold" value="30" min="5" max="300"> | |
| </div> | |
| </div> | |
| <div class="setting-group"> | |
| <h2>Data Management</h2> | |
| <button id="export-data" class="action-btn blue">Export Data</button> | |
| <button id="clear-history" class="action-btn red">Clear History</button> | |
| </div> | |
| <button id="save-settings" class="btn-main">Save Settings</button> | |
| </div> | |
| </main> | |
| <!-- Page F - Help --> | |
| <main id="page-f" class="page hidden"> | |
| <h1>Help</h1> | |
| <div class="help-container"> | |
| <section class="help-section"> | |
| <h2>How to Use Focus Guard</h2> | |
| <ol> | |
| <li>Click "Start" or navigate to "Start Focus" in the menu</li> | |
| <li>Allow camera access when prompted</li> | |
| <li>Click the green "Start" button to begin monitoring</li> | |
| <li>Position yourself in front of the camera</li> | |
| <li>The system will track your focus in real-time</li> | |
| <li>Click "Stop" when you're done to save the session</li> | |
| </ol> | |
| </section> | |
| <section class="help-section"> | |
| <h2>What is "Focused"?</h2> | |
| <p>The system considers you focused when:</p> | |
| <ul> | |
| <li>You are clearly visible in the camera frame</li> | |
| <li>You are centered in the view</li> | |
| <li>Your face is directed toward the screen</li> | |
| <li>No other people are detected in the frame</li> | |
| </ul> | |
| </section> | |
| <section class="help-section"> | |
| <h2>Adjusting Settings</h2> | |
| <p><strong>Frame Rate:</strong> Lower values reduce CPU usage but update less frequently. Recommended: 15-30 FPS.</p> | |
| <p><strong>Sensitivity:</strong> Higher values require stricter focus criteria. Adjust based on your setup.</p> | |
| </section> | |
| <section class="help-section"> | |
| <h2>Privacy & Data</h2> | |
| <p>All video processing happens in real-time. No video frames are stored - only detection metadata (focus status, timestamps) is saved in your local database.</p> | |
| </section> | |
| <section class="help-section"> | |
| <h2>FAQ</h2> | |
| <details> | |
| <summary>Why is my focus score low?</summary> | |
| <p>Ensure good lighting, center yourself in the camera frame, and adjust sensitivity settings in the Customise page.</p> | |
| </details> | |
| <details> | |
| <summary>Can I use this without a camera?</summary> | |
| <p>No, camera access is required for focus detection.</p> | |
| </details> | |
| <details> | |
| <summary>Does this work on mobile?</summary> | |
| <p>The app works on mobile browsers but performance may vary due to processing requirements.</p> | |
| </details> | |
| <details> | |
| <summary>Is my data private?</summary> | |
| <p>Yes! All processing happens locally. Video frames are analyzed in real-time and never stored. Only metadata is saved.</p> | |
| </details> | |
| </section> | |
| <section class="help-section"> | |
| <h2>Technical Info</h2> | |
| <p><strong>Model:</strong> YOLOv8n (Nano)</p> | |
| <p><strong>Detection:</strong> Real-time person detection with pose analysis</p> | |
| <p><strong>Storage:</strong> SQLite local database</p> | |
| <p><strong>Framework:</strong> FastAPI + Native JavaScript</p> | |
| </section> | |
| </div> | |
| </main> | |
| <script src="/static/script.js?v=2"></script> | |
| </body> | |
| </html> |