RCtheGuru/focusfactor-flow-tracker
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>FocusFactor Tracker</title>7<script src="https://cdn.tailwindcss.com"></script>8<script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <style>11 @keyframes flash {12 0%, 100% { opacity: 1; }13 50% { opacity: 0; background-color: white; }14 }15 .flash-effect {16 animation: flash 0.5s;17 }18 </style>19</head>20 <body class="bg-gray-50 text-gray-800 font-sans wireframe">21<!-- Main Container -->22 <div class="min-h-screen flex flex-col">23 <!-- Header -->24 <header class="bg-indigo-600 text-white p-4 shadow-md">25 <div class="container mx-auto flex justify-between items-center">26 <h1 class="text-2xl font-bold flex items-center">27 <i data-feather="clock" class="mr-2"></i> FocusFactor28 </h1>29 <div class="flex items-center space-x-4">30 <span id="current-date" class="text-sm"></span>31 <div class="relative">32 <button id="role-switcher" class="bg-indigo-700 hover:bg-indigo-800 px-3 py-1 rounded-full text-sm flex items-center">33 <span>Adult</span>34 <i data-feather="chevron-down" class="ml-1 w-4 h-4"></i>35 </button>36 </div>37 </div>38 </div>39 </header>40 41 <!-- Main Content -->42 <main class="flex-1 container mx-auto p-4 space-y-6">43 <!-- Today Overview -->44 <section class="bg-white rounded-xl shadow p-4">45 <h2 class="text-lg font-semibold mb-3 flex items-center">46 <i data-feather="calendar" class="mr-2 text-indigo-500"></i> Today Overview47 </h2>48 49 <!-- Next Events -->50 <div class="mb-4">51 <h3 class="text-sm font-medium text-gray-500 mb-2">Next 3 Events</h3>52 <div class="space-y-2">53 <div class="flex items-center p-2 hover:bg-gray-50 rounded">54 <div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>55 <span class="flex-1 wireframe-text">[Event Name]</span>56<span class="text-sm text-gray-500">10:00 AM</span>57 </div>58 <div class="flex items-center p-2 hover:bg-gray-50 rounded">59 <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>60 <span class="flex-1 wireframe-text">[Event Name]</span>61<span class="text-sm text-gray-500">12:30 PM</span>62 </div>63 <div class="flex items-center p-2 hover:bg-gray-50 rounded relative">64 <div class="w-2 h-2 bg-red-500 rounded-full mr-3"></div>65 <span class="flex-1 wireframe-text">[Event Name]</span>66<span class="text-sm text-gray-500">3:00 PM</span>67 <span class="ml-2 px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">Conflict</span>68 </div>69 </div>70 </div>71 72 <!-- Active Focus Session -->73 <div id="focus-session" class="hidden bg-indigo-50 p-3 rounded-lg">74 <h3 class="text-sm font-medium text-gray-700 mb-2">Active Focus Session</h3>75 <div class="flex items-center justify-between">76 <div class="flex items-center">77 <button id="pause-focus" class="p-2 rounded-full bg-white shadow mr-3">78 <i data-feather="pause" class="text-indigo-600"></i>79 </button>80 <span id="focus-timer" class="text-xl font-mono">25:00</span>81 </div>82 <button id="stop-focus" class="text-sm text-red-600 hover:text-red-800 flex items-center">83 <i data-feather="x" class="mr-1 w-4 h-4"></i> Stop84 </button>85 </div>86 </div>87 </section>88 89 <!-- Scheduler Card -->90 <section class="bg-white rounded-xl shadow p-4">91 <div class="flex justify-between items-center mb-4">92 <h2 class="text-lg font-semibold flex items-center">93 <i data-feather="calendar" class="mr-2 text-indigo-500"></i> Schedule94 </h2>95 <div class="flex space-x-2">96 <button id="day-view" class="px-3 py-1 bg-indigo-600 text-white rounded-full text-sm">Day</button>97 <button id="week-view" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm">Week</button>98 <button id="add-event" class="p-1 bg-indigo-600 text-white rounded-full">99 <i data-feather="plus" class="w-5 h-5"></i>100 </button>101 </div>102 </div>103 104 <!-- Calendar Strip -->105 <div class="overflow-x-auto mb-4">106 <div class="flex space-x-2 pb-2">107 <!-- Day cells would go here -->108 <div class="flex-shrink-0 w-14 text-center">109 <div class="text-xs text-gray-500">Mon</div>110 <div class="text-lg font-medium py-1 rounded-full bg-indigo-100 text-indigo-800">15</div>111 </div>112 <!-- More days... -->113 </div>114 </div>115 116 <!-- Conflict Warning -->117 <div id="conflict-warning" class="hidden bg-yellow-50 border-l-4 border-yellow-400 p-3 mb-4">118 <div class="flex items-start">119 <i data-feather="alert-triangle" class="text-yellow-500 mr-2"></i>120 <div>121 <p class="text-sm text-yellow-800">Scheduling conflict detected</p>122 <button class="text-xs text-indigo-600 mt-1">View details</button>123 </div>124 </div>125 </div>126 </section>127 128 <!-- Tasks Section -->129 <section class="bg-white rounded-xl shadow p-4">130 <div class="flex justify-between items-center mb-4">131 <h2 class="text-lg font-semibold flex items-center">132 <i data-feather="check-circle" class="mr-2 text-indigo-500"></i> My Tasks133 </h2>134 <div class="flex space-x-1">135 <button class="px-3 py-1 bg-indigo-600 text-white rounded-full text-sm">All</button>136 <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm">Work</button>137 <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm">Personal</button>138 <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm">Child</button>139 </div>140 </div>141 142 <div class="space-y-2">143 <div class="group flex items-center p-3 hover:bg-gray-50 rounded-lg border border-gray-100">144 <input type="checkbox" class="h-5 w-5 text-indigo-600 rounded mr-3">145 <div class="flex-1">146 <div class="flex items-center">147 <span class="font-medium wireframe-text">[Task Title]</span>148<span class="ml-2 px-2 py-0.5 bg-blue-100 text-blue-800 text-xs rounded-full">Work</span>149 </div>150 <div class="text-sm text-gray-500 mt-1">Due today at 5:00 PM</div>151 </div>152 <button class="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-600">153 <i data-feather="more-horizontal" class="w-5 h-5"></i>154 </button>155 </div>156 <!-- More tasks... -->157 </div>158 </section>159 160 <!-- Kids Panel -->161 <section id="kids-panel" class="bg-gray-100 rounded-xl shadow p-4 opacity-50">162 <div class="flex justify-between items-center mb-4">163 <h2 class="text-lg font-semibold flex items-center">164 <i data-feather="users" class="mr-2 text-indigo-500"></i> Kids165 </h2>166 <button class="text-sm text-indigo-600 hover:text-indigo-800">Manage</button>167 </div>168 <div class="text-center py-6">169 <i data-feather="user-plus" class="w-8 h-8 mx-auto text-gray-400 mb-2"></i>170 <p class="text-gray-500">No children added yet</p>171 </div>172 </section>173 174 <!-- Quick Actions -->175 <section class="bg-white rounded-xl shadow p-4">176 <h2 class="text-lg font-semibold mb-4 flex items-center">177 <i data-feather="zap" class="mr-2 text-indigo-500"></i> Quick Actions178 </h2>179 <div class="grid grid-cols-2 gap-3">180 <button class="flex flex-col items-center justify-center p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100">181 <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mb-2">182 <i data-feather="play" class="text-indigo-600"></i>183 </div>184 <span class="text-sm font-medium">Start Focus</span>185 </button>186 <button class="flex flex-col items-center justify-center p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100">187 <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mb-2">188 <i data-feather="plus-circle" class="text-indigo-600"></i>189 </div>190 <span class="text-sm font-medium">Add Chore</span>191 </button>192 <button class="flex flex-col items-center justify-center p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100">193 <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mb-2">194 <i data-feather="share-2" class="text-indigo-600"></i>195 </div>196 <span class="text-sm font-medium">Share Availability</span>197 </button>198 <button class="flex flex-col items-center justify-center p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100">199 <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mb-2">200 <i data-feather="bell" class="text-indigo-600"></i>201 </div>202 <span class="text-sm font-medium">Notifications</span>203 </button>204 </div>205 </section>206 </main>207 </div>208 209 <!-- Add Task Modal -->210 <div id="add-task-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">211 <div class="bg-white rounded-xl w-full max-w-md mx-4 max-h-[90vh] overflow-y-auto">212 <div class="p-4 border-b border-gray-200">213 <div class="flex justify-between items-center">214 <h3 class="text-lg font-semibold">Add New Task</h3>215 <button id="close-add-task" class="text-gray-500 hover:text-gray-700">216 <i data-feather="x"></i>217 </button>218 </div>219 </div>220 221 <div class="p-4 space-y-4">222 <div>223 <label class="block text-sm font-medium text-gray-700 mb-1">Task Title</label>224 <div class="w-full px-3 py-2 border border-gray-300 rounded-md wireframe-text">[Task Title Input]</div>225</div>226 227 <div>228 <label class="block text-sm font-medium text-gray-700 mb-1">Scope</label>229 <div class="flex flex-wrap gap-2">230 <button class="px-3 py-1 bg-indigo-600 text-white rounded-full text-sm">Work</button>231 <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm">Personal</button>232 <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm">Child</button>233 <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm flex items-center">234 <i data-feather="plus" class="w-3 h-3 mr-1"></i> New235 </button>236 </div>237 </div>238 239 <div>240 <label class="block text-sm font-medium text-gray-700 mb-1">Priority</label>241 <div class="flex space-x-2">242 <button class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">High</button>243 <button class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">Medium</button>244 <button class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Low</button>245 </div>246 </div>247 248 <div class="grid grid-cols-2 gap-4">249 <div>250 <label class="block text-sm font-medium text-gray-700 mb-1">Due Date</label>251 <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">252 </div>253 <div>254 <label class="block text-sm font-medium text-gray-700 mb-1">Duration</label>255 <input type="text" placeholder="1h 30m" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">256 </div>257 </div>258 259 <div>260 <label class="block text-sm font-medium text-gray-700 mb-1">Alarm Interval</label>261 <div class="flex items-center space-x-2">262 <select class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">263 <option>30s</option>264 <option>1m</option>265 <option>2m</option>266 <option>5m</option>267 <option selected>15m</option>268 <option>30m</option>269 <option>1h</option>270 <option>Custom...</option>271 </select>272 <button class="px-3 py-2 bg-gray-200 text-gray-700 rounded-md text-sm">Test</button>273 </div>274 <div class="mt-1 text-xs text-gray-500">Parsed: every 15 minutes</div>275 </div>276 277 <div>278 <label class="block text-sm font-medium text-gray-700 mb-1">Alarm Type</label>279 <div class="space-y-2">280 <div class="flex items-center">281 <input type="checkbox" id="sound-alarm" class="h-4 w-4 text-indigo-600 rounded mr-2">282 <label for="sound-alarm" class="text-sm">Sound</label>283 <select class="ml-auto px-2 py-1 border border-gray-300 rounded text-sm" disabled>284 <option>Chime</option>285 <option>Ping</option>286 <option>Beep</option>287 </select>288 </div>289 <div class="flex items-center">290 <input type="checkbox" id="phrase-alarm" class="h-4 w-4 text-indigo-600 rounded mr-2">291 <label for="phrase-alarm" class="text-sm">Phrase</label>292 <div class="ml-auto px-2 py-1 border border-gray-300 rounded text-sm w-36 wireframe-text">[Phrase]</div>293</div>294 <div class="flex items-center">295 <input type="checkbox" id="recording-alarm" class="h-4 w-4 text-indigo-600 rounded mr-2">296 <label for="recording-alarm" class="text-sm">Recording (≤5s)</label>297 <button class="ml-auto px-2 py-1 bg-gray-200 text-gray-700 rounded text-sm text-xs" disabled>298 <i data-feather="mic" class="w-3 h-3 inline"></i> Record299 </button>300 </div>301 <div class="flex items-center">302 <input type="checkbox" id="vibration-alarm" class="h-4 w-4 text-indigo-600 rounded mr-2">303 <label for="vibration-alarm" class="text-sm">Vibration</label>304 </div>305 <div class="flex items-center">306 <input type="checkbox" id="light-alarm" class="h-4 w-4 text-indigo-600 rounded mr-2">307 <label for="light-alarm" class="text-sm">Light Flash</label>308 </div>309 </div>310 </div>311 312 <div>313 <label class="block text-sm font-medium text-gray-700 mb-1">Max Repeats</label>314 <input type="number" value="0" min="0" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">315 <p class="mt-1 text-xs text-gray-500">0 = until stopped</p>316 </div>317 </div>318 319 <div class="p-4 border-t border-gray-200 flex justify-end space-x-3">320 <button id="cancel-add-task" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>321 <button id="save-task" class="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700">Save Task</button>322 </div>323 </div>324 </div>325 326 <!-- Task Detail Modal -->327 <div id="task-detail-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">328 <div class="bg-white rounded-xl w-full max-w-md mx-4 max-h-[90vh] overflow-y-auto">329 <div class="p-4 border-b border-gray-200">330 <div class="flex justify-between items-center">331 <h3 class="text-lg font-semibold">Task Details</h3>332 <button id="close-task-detail" class="text-gray-500 hover:text-gray-700">333 <i data-feather="x"></i>334 </button>335 </div>336 </div>337 338 <div class="p-4 space-y-4">339 <div>340 <h4 class="font-medium text-lg wireframe-text">[Task Title]</h4>341<div class="flex items-center mt-1">342 <span class="px-2 py-0.5 bg-blue-100 text-blue-800 text-xs rounded-full mr-2">Work</span>343 <span class="text-sm text-gray-500">Due today at 5:00 PM</span>344 </div>345 </div>346 347 <div>348 <div class="flex items-center">349 <span class="text-sm font-medium text-gray-700 mr-2">Priority:</span>350 <span class="px-2 py-0.5 bg-red-100 text-red-800 text-xs rounded-full">High</span>351 </div>352 <div class="flex items-center mt-2">353 <span class="text-sm font-medium text-gray-700 mr-2">Alarms:</span>354 <span class="text-sm">Every 15m (Sound + Phrase)</span>355 </div>356 <div class="mt-2 text-sm">357 <span class="font-medium text-gray-700">Phrase:</span>358 <span class="ml-2">"Stay focused, you've got this!"</span>359 </div>360 <div class="mt-2 text-sm">361 <span class="font-medium text-gray-700">Max Repeats:</span>362 <span class="ml-2">Until stopped (0/0)</span>363 </div>364 </div>365 366 <div id="task-timer" class="hidden bg-indigo-50 p-3 rounded-lg">367 <div class="flex items-center justify-between">368 <div class="flex items-center">369 <button id="pause-task" class="p-2 rounded-full bg-white shadow mr-3">370 <i data-feather="pause" class="text-indigo-600"></i>371 </button>372 <div>373 <div class="text-sm text-gray-700">Next alarm in:</div>374 <span id="task-countdown" class="text-xl font-mono">14:32</span>375 </div>376 </div>377 <button id="stop-task" class="text-sm text-red-600 hover:text-red-800 flex items-center">378 <i data-feather="x" class="mr-1 w-4 h-4"></i> Stop379 </button>380 </div>381 </div>382 </div>383 384 <div class="p-4 border-t border-gray-200 flex justify-between">385 <button id="start-task" class="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 flex items-center">386 <i data-feather="play" class="mr-2 w-4 h-4"></i> Start Task387 </button>388 <button id="edit-task" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 flex items-center">389 <i data-feather="edit" class="mr-2 w-4 h-4"></i> Edit390 </button>391 <button id="delete-task" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-red-600 hover:bg-red-50 flex items-center">392 <i data-feather="trash" class="mr-2 w-4 h-4"></i> Delete393 </button>394 </div>395 </div>396 </div>397 398 <script>399 // Set current date400 document.addEventListener('DOMContentLoaded', function() {401 feather.replace();402 const now = new Date();403 const options = { weekday: 'long', month: 'short', day: 'numeric' };404 document.getElementById('current-date').textContent = now.toLocaleDateString('en-US', options);405 406 // Modal handlers407 document.getElementById('add-event').addEventListener('click', function() {408 document.getElementById('add-task-modal').classList.remove('hidden');409 });410 411 document.getElementById('close-add-task').addEventListener('click', function() {412 document.getElementById('add-task-modal').classList.add('hidden');413 });414 415 document.getElementById('cancel-add-task').addEventListener('click', function() {416 document.getElementById('add-task-modal').classList.add('hidden');417 });418 419 // Sample task click handler420 document.querySelectorAll('.group').forEach(task => {421 task.addEventListener('click', function(e) {422 if (!e.target.classList.contains('group') && 423 !e.target.classList.contains('flex-1') && 424 e.target.tagName !== 'INPUT') {425 document.getElementById('task-detail-modal').classList.remove('hidden');426 }427 });428 });429 430 document.getElementById('close-task-detail').addEventListener('click', function() {431 document.getElementById('task-detail-modal').classList.add('hidden');432 });433 434 // Start task handler435 document.getElementById('start-task').addEventListener('click', function() {436 document.getElementById('task-timer').classList.remove('hidden');437 document.getElementById('start-task').classList.add('hidden');438 439 // Start a sample countdown440 let seconds = 15 * 60; // 15 minutes441 const countdown = setInterval(() => {442 seconds--;443 const mins = Math.floor(seconds / 60);444 const secs = seconds % 60;445 document.getElementById('task-countdown').textContent = 446 `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;447 448 if (seconds <= 0) {449 clearInterval(countdown);450 // Simulate alarm451 alert("Stay focused, you've got this!");452 seconds = 15 * 60; // Reset453 }454 }, 1000);455 456 // Stop button handler457 document.getElementById('stop-task').addEventListener('click', function() {458 clearInterval(countdown);459 document.getElementById('task-timer').classList.add('hidden');460 document.getElementById('start-task').classList.remove('hidden');461 });462 });463 464 // Start focus session handler465 document.querySelectorAll('button').forEach(btn => {466 if (btn.textContent.includes('Start Focus')) {467 btn.addEventListener('click', function() {468 document.getElementById('focus-session').classList.remove('hidden');469 470 // Start a sample focus timer471 let minutes = 25;472 let seconds = 0;473 const timer = setInterval(() => {474 if (seconds === 0) {475 if (minutes === 0) {476 clearInterval(timer);477 return;478 }479 minutes--;480 seconds = 59;481 } else {482 seconds--;483 }484 document.getElementById('focus-timer').textContent = 485 `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;486 }, 1000);487 488 // Pause button handler489 document.getElementById('pause-focus').addEventListener('click', function() {490 clearInterval(timer);491 document.getElementById('pause-focus').innerHTML = '<i data-feather="play" class="text-indigo-600"></i>';492 document.getElementById('pause-focus').setAttribute('id', 'resume-focus');493 494 // Resume handler495 document.getElementById('resume-focus').addEventListener('click', function() {496 // Restart timer...497 });498 });499 500 // Stop button handler501 document.getElementById('stop-focus').addEventListener('click', function() {502 clearInterval(timer);503 document.getElementById('focus-session').classList.add('hidden');504 });505 });506 }507 });508 509 // Enable alarm checkboxes510 document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {511 checkbox.addEventListener('change', function() {512 const id = this.id;513 const dependent = document.querySelector(`select, input[type="text"], button` + 514 (id === 'sound-alarm' ? '[disabled]' : ''));515 if (dependent) {516 dependent.disabled = !this.checked;517 }518 });519 });520 521 // Flash effect for light alarm522 document.getElementById('light-alarm').addEventListener('change', function() {523 if (this.checked) {524 document.body.classList.add('flash-effect');525 setTimeout(() => {526 document.body.classList.remove('flash-effect');527 }, 1000);528 }529 });530 });531 </script>532</body>533</html>534