Spaces:
Sleeping
Sleeping
File size: 9,896 Bytes
dd46120 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 | <!DOCTYPE html>
<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> |