bertinvictoire/my-kimi-app
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>Settings - Bertin's Calendar</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>9 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">10 <style>11 body { font-family: 'Inter', sans-serif; }12 .settings-card { transition: all 0.3s ease; }13 .settings-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }14 .toggle-switch { transition: all 0.3s ease; }15 .toggle-switch.active { background-color: #FCD34D; }16 .color-picker { width: 40px; height: 40px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }17 .color-picker:hover { transform: scale(1.1); }18 .save-indicator { animation: fadeInOut 2s ease-in-out; }19 @keyframes fadeInOut { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }20 </style>21</head>22<body class="bg-gray-50 min-h-screen">23 <!-- Navigation Header -->24 <nav class="bg-white shadow-sm border-b border-gray-100 sticky top-0 z-50">25 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">26 <div class="flex justify-between items-center h-16">27 <div class="flex items-center space-x-4">28 <div class="flex items-center space-x-2">29 <div class="w-8 h-8 bg-yellow-400 rounded-lg flex items-center justify-center">30 <span class="text-white font-bold text-sm">B</span>31 </div>32 <span class="font-bold text-xl text-gray-800">Bertin's Calendar</span>33 </div>34 </div>35 <div class="flex items-center space-x-6">36 <a href="index.html" class="text-gray-600 hover:text-yellow-500 transition-colors">Calendar</a>37 <a href="analytics.html" class="text-gray-600 hover:text-yellow-500 transition-colors">Analytics</a>38 <a href="focus.html" class="text-gray-600 hover:text-yellow-500 transition-colors">Focus Mode</a>39 <a href="settings.html" class="text-yellow-500 font-medium border-b-2 border-yellow-500 pb-1">Settings</a>40 </div>41 </div>42 </div>43 </nav>44 45 <!-- Header Section -->46 <section class="bg-white border-b border-gray-100">47 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">48 <div class="flex justify-between items-center">49 <div>50 <h1 class="text-3xl font-bold text-gray-800">Settings</h1>51 <p class="text-gray-600 mt-2">Customize your productivity experience</p>52 </div>53 <div class="flex items-center space-x-4">54 <button onclick="resetAllSettings()" class="text-gray-600 hover:text-red-600 px-4 py-2 rounded-lg border border-gray-300 hover:border-red-300 transition-colors">55 Reset All56 </button>57 <button onclick="saveAllSettings()" class="bg-yellow-400 hover:bg-yellow-500 text-white px-6 py-2 rounded-lg font-medium transition-colors">58 Save Changes59 </button>60 </div>61 </div>62 </div>63 </section>64 65 <!-- Main Content -->66 <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">67 <div class="space-y-8">68 <!-- Profile Settings -->69 <div class="settings-card bg-white rounded-xl shadow-lg p-6">70 <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">71 <svg class="w-6 h-6 mr-3 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">72 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>73 </svg>74 Profile Settings75 </h2>76 77 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">78 <div>79 <label class="block text-sm font-medium text-gray-700 mb-2">Full Name</label>80 <input type="text" id="user-name" value="Bertin Vick" 81 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent">82 </div>83 <div>84 <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>85 <input type="email" id="user-email" value="bertin.vick@example.com" 86 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent">87 </div>88 <div>89 <label class="block text-sm font-medium text-gray-700 mb-2">Time Zone</label>90 <select id="user-timezone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent">91 <option value="UTC-8">Pacific Time (UTC-8)</option>92 <option value="UTC-7">Mountain Time (UTC-7)</option>93 <option value="UTC-6">Central Time (UTC-6)</option>94 <option value="UTC-5" selected>Eastern Time (UTC-5)</option>95 <option value="UTC">UTC</option>96 </select>97 </div>98 <div>99 <label class="block text-sm font-medium text-gray-700 mb-2">Work Schedule</label>100 <select id="work-schedule" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent">101 <option value="early">Early Bird (6 AM - 2 PM)</option>102 <option value="standard" selected>Standard (9 AM - 5 PM)</option>103 <option value="late">Night Owl (12 PM - 8 PM)</option>104 <option value="flexible">Flexible</option>105 </select>106 </div>107 </div>108 </div>109 110 <!-- Calendar Settings -->111 <div class="settings-card bg-white rounded-xl shadow-lg p-6">112 <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">113 <svg class="w-6 h-6 mr-3 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">114 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>115 </svg>116 Calendar Preferences117 </h2>118 119 <div class="space-y-6">120 <div class="flex items-center justify-between">121 <div>122 <h3 class="font-medium text-gray-800">Default Calendar View</h3>123 <p class="text-sm text-gray-600">Choose your preferred default view</p>124 </div>125 <select id="default-view" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent">126 <option value="month" selected>Month</option>127 <option value="week">Week</option>128 <option value="day">Day</option>129 </select>130 </div>131 132 <div class="flex items-center justify-between">133 <div>134 <h3 class="font-medium text-gray-800">Week Starts On</h3>135 <p class="text-sm text-gray-600">First day of the week</p>136 </div>137 <select id="week-start" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent">138 <option value="sunday">Sunday</option>139 <option value="monday" selected>Monday</option>140 </select>141 </div>142 143 <div class="flex items-center justify-between">144 <div>145 <h3 class="font-medium text-gray-800">Show Weekends</h3>146 <p class="text-sm text-gray-600">Display Saturday and Sunday</p>147 </div>148 <button onclick="toggleSetting('show-weekends')" class="toggle-switch active w-12 h-6 bg-gray-300 rounded-full relative" id="show-weekends-toggle">149 <div class="w-5 h-5 bg-white rounded-full absolute top-0.5 left-0.5 transition-transform transform translate-x-0"></div>150 </button>151 </div>152 153 <div class="flex items-center justify-between">154 <div>155 <h3 class="font-medium text-gray-800">Smart Scheduling</h3>156 <p class="text-sm text-gray-600">Automatically optimize task placement</p>157 </div>158 <button onclick="toggleSetting('smart-scheduling')" class="toggle-switch active w-12 h-6 bg-gray-300 rounded-full relative" id="smart-scheduling-toggle">159 <div class="w-5 h-5 bg-white rounded-full absolute top-0.5 left-0.5 transition-transform transform translate-x-0"></div>160 </button>161 </div>162 </div>163 </div>164 165 <!-- Focus Mode Settings -->166 <div class="settings-card bg-white rounded-xl shadow-lg p-6">167 <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">168 <svg class="w-6 h-6 mr-3 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">169 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>170 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>171 </svg>172 Focus Mode Preferences173 </h2>174 175 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">176 <div>177 <label class="block text-sm font-medium text-gray-700 mb-2">Focus Session Duration</label>178 <select id="focus-duration" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent">179 <option value="15">15 minutes</option>180 <option value="25" selected>25 minutes (Pomodoro)</option>181 <option value="30">30 minutes</option>182 <option value="45">45 minutes</option>183 <option value="60">60 minutes</option>184 <option value="90">90 minutes</option>185 </select>186 </div>187 <div>188 <label class="block text-sm font-medium text-gray-700 mb-2">Break Duration</label>189 <select id="break-duration" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent">190 <option value="5" selected>5 minutes</option>191 <option value="10">10 minutes</option>192 <option value="15">15 minutes</option>193 <option value="20">20 minutes</option>194 </select>195 </div>196 <div>197 <label class="block text-sm font-medium text-gray-700 mb-2">Long Break Interval</label>198 <select id="long-break-interval" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent">199 <option value="3">Every 3 sessions</option>200 <option value="4" selected>Every 4 sessions</option>201 <option value="5">Every 5 sessions</option>202 <option value="6">Every 6 sessions</option>203 </select>204 </div>205 <div>206 <label class="block text-sm font-medium text-gray-700 mb-2">Long Break Duration</label>207 <select id="long-break-duration" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent">208 <option value="15">15 minutes</option>209 <option value="20">20 minutes</option>210 <option value="25">25 minutes</option>211 <option value="30" selected>30 minutes</option>212 </select>213 </div>214 </div>215 216 <div class="mt-6 space-y-4">217 <div class="flex items-center justify-between">218 <div>219 <h3 class="font-medium text-gray-800">Auto-start Breaks</h3>220 <p class="text-sm text-gray-600">Automatically start break timer after focus sessions</p>221 </div>222 <button onclick="toggleSetting('auto-start-breaks')" class="toggle-switch active w-12 h-6 bg-gray-300 rounded-full relative" id="auto-start-breaks-toggle">223 <div class="w-5 h-5 bg-white rounded-full absolute top-0.5 left-0.5 transition-transform transform translate-x-0"></div>224 </button>225 </div>226 227 <div class="flex items-center justify-between">228 <div>229 <h3 class="font-medium text-gray-800">Focus Sounds</h3>230 <p class="text-sm text-gray-600">Play ambient sounds during focus sessions</p>231 </div>232 <button onclick="toggleSetting('focus-sounds')" class="toggle-switch w-12 h-6 bg-gray-300 rounded-full relative" id="focus-sounds-toggle">233 <div class="w-5 h-5 bg-white rounded-full absolute top-0.5 left-0.5 transition-transform transform translate-x-0"></div>234 </button>235 </div>236 </div>237 </div>238 239 <!-- Notification Settings -->240 <div class="settings-card bg-white rounded-xl shadow-lg p-6">241 <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">242 <svg class="w-6 h-6 mr-3 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">243 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5v-5zM11 17H6l5 5v-5zM7 7h10a2 2 0 012 2v6a2 2 0 01-2 2H7a2 2 0 01-2-2V9a2 2 0 012-2z"></path>244 </svg>245 Notifications246 </h2>247 248 <div class="space-y-4">249 <div class="flex items-center justify-between">250 <div>251 <h3 class="font-medium text-gray-800">Task Reminders</h3>252 <p class="text-sm text-gray-600">Get notified about upcoming tasks</p>253 </div>254 <button onclick="toggleSetting('task-reminders')" class="toggle-switch active w-12 h-6 bg-gray-300 rounded-full relative" id="task-reminders-toggle">255 <div class="w-5 h-5 bg-white rounded-full absolute top-0.5 left-0.5 transition-transform transform translate-x-0"></div>256 </button>257 </div>258 259 <div class="flex items-center justify-between">260 <div>261 <h3 class="font-medium text-gray-800">Focus Session Alerts</h3>262 <p class="text-sm text-gray-600">Notifications for focus session start/end</p>263 </div>264 <button onclick="toggleSetting('focus-alerts')" class="toggle-switch active w-12 h-6 bg-gray-300 rounded-full relative" id="focus-alerts-toggle">265 <div class="w-5 h-5 bg-white rounded-full absolute top-0.5 left-0.5 transition-transform transform translate-x-0"></div>266 </button>267 </div>268 269 <div class="flex items-center justify-between">270 <div>271 <h3 class="font-medium text-gray-800">Daily Summary</h3>272 <p class="text-sm text-gray-600">Receive daily productivity summary</p>273 </div>274 <button onclick="toggleSetting('daily-summary')" class="toggle-switch active w-12 h-6 bg-gray-300 rounded-full relative" id="daily-summary-toggle">275 <div class="w-5 h-5 bg-white rounded-full absolute top-0.5 left-0.5 transition-transform transform translate-x-0"></div>276 </button>277 </div>278 279 <div class="flex items-center justify-between">280 <div>281 <h3 class="font-medium text-gray-800">Break Reminders</h3>282 <p class="text-sm text-gray-600">Remind to take breaks during long sessions</p>283 </div>284 <button onclick="toggleSetting('break-reminders')" class="toggle-switch active w-12 h-6 bg-gray-300 rounded-full relative" id="break-reminders-toggle">285 <div class="w-5 h-5 bg-white rounded-full absolute top-0.5 left-0.5 transition-transform transform translate-x-0"></div>286 </button>287 </div>288 </div>289 </div>290 291 <!-- Category Management -->292 <div class="settings-card bg-white rounded-xl shadow-lg p-6">293 <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">294 <svg class="w-6 h-6 mr-3 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">295 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>296 </svg>297 Task Categories298 </h2>299 300 <div class="space-y-4">301 <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">302 <div class="flex items-center space-x-3">303 <div class="color-picker bg-blue-500"></div>304 <span class="font-medium text-gray-800">Work</span>305 </div>306 <div class="flex items-center space-x-2">307 <span class="text-sm text-gray-600">24 tasks</span>308 <button onclick="editCategory('work')" class="text-gray-400 hover:text-gray-600">309 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">310 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>311 </svg>312 </button>313 </div>314 </div>315 316 <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">317 <div class="flex items-center space-x-3">318 <div class="color-picker bg-green-500"></div>319 <span class="font-medium text-gray-800">Learning</span>320 </div>321 <div class="flex items-center space-x-2">322 <span class="text-sm text-gray-600">12 tasks</span>323 <button onclick="editCategory('learning')" class="text-gray-400 hover:text-gray-600">324 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">325 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>326 </svg>327 </button>328 </div>329 </div>330 331 <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">332 <div class="flex items-center space-x-3">333 <div class="color-picker bg-purple-500"></div>334 <span class="font-medium text-gray-800">Health</span>335 </div>336 <div class="flex items-center space-x-2">337 <span class="text-sm text-gray-600">8 tasks</span>338 <button onclick="editCategory('health')" class="text-gray-400 hover:text-gray-600">339 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">340 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>341 </svg>342 </button>343 </div>344 </div>345 346 <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">347 <div class="flex items-center space-x-3">348 <div class="color-picker bg-orange-500"></div>349 <span class="font-medium text-gray-800">Personal</span>350 </div>351 <div class="flex items-center space-x-2">352 <span class="text-sm text-gray-600">15 tasks</span>353 <button onclick="editCategory('personal')" class="text-gray-400 hover:text-gray-600">354 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">355 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>356 </svg>357 </button>358 </div>359 </div>360 </div>361 362 <div class="mt-4">363 <button onclick="addNewCategory()" class="w-full border-2 border-dashed border-gray-300 text-gray-600 hover:border-yellow-400 hover:text-yellow-600 py-3 rounded-lg font-medium transition-colors">364 + Add New Category365 </button>366 </div>367 </div>368 369 <!-- Data & Privacy -->370 <div class="settings-card bg-white rounded-xl shadow-lg p-6">371 <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">372 <svg class="w-6 h-6 mr-3 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">373 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>374 </svg>375 Data & Privacy376 </h2>377 378 <div class="space-y-6">379 <div class="flex items-center justify-between">380 <div>381 <h3 class="font-medium text-gray-800">Analytics Collection</h3>382 <p class="text-sm text-gray-600">Help improve the app by sharing anonymous usage data</p>383 </div>384 <button onclick="toggleSetting('analytics-collection')" class="toggle-switch active w-12 h-6 bg-gray-300 rounded-full relative" id="analytics-collection-toggle">385 <div class="w-5 h-5 bg-white rounded-full absolute top-0.5 left-0.5 transition-transform transform translate-x-0"></div>386 </button>387 </div>388 389 <div class="flex items-center justify-between">390 <div>391 <h3 class="font-medium text-gray-800">Auto-backup</h3>392 <p class="text-sm text-gray-600">Automatically backup your data locally</p>393 </div>394 <button onclick="toggleSetting('auto-backup')" class="toggle-switch active w-12 h-6 bg-gray-300 rounded-full relative" id="auto-backup-toggle">395 <div class="w-5 h-5 bg-white rounded-full absolute top-0.5 left-0.5 transition-transform transform translate-x-0"></div>396 </button>397 </div>398 399 <div class="border-t border-gray-200 pt-6">400 <div class="flex space-x-4">401 <button onclick="exportData()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-medium transition-colors">402 Export Data403 </button>404 <button onclick="importData()" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-medium transition-colors">405 Import Data406 </button>407 <button onclick="clearData()" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg font-medium transition-colors">408 Clear All Data409 </button>410 </div>411 </div>412 </div>413 </div>414 415 <!-- About -->416 <div class="settings-card bg-white rounded-xl shadow-lg p-6">417 <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">418 <svg class="w-6 h-6 mr-3 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">419 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>420 </svg>421 About422 </h2>423 424 <div class="space-y-4">425 <div class="flex justify-between items-center">426 <span class="text-gray-600">Version</span>427 <span class="font-medium text-gray-800">1.0.0</span>428 </div>429 <div class="flex justify-between items-center">430 <span class="text-gray-600">Last Updated</span>431 <span class="font-medium text-gray-800">October 2025</span>432 </div>433 <div class="flex justify-between items-center">434 <span class="text-gray-600">Developer</span>435 <span class="font-medium text-gray-800">Bertin Vick</span>436 </div>437 <div class="border-t border-gray-200 pt-4">438 <p class="text-sm text-gray-600">439 This productivity calendar is designed to help you manage your tasks efficiently and maintain focus on what matters most.440 </p>441 </div>442 </div>443 </div>444 </div>445 </main>446 447 <!-- Save Indicator -->448 <div id="save-indicator" class="fixed bottom-8 right-8 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-full transition-transform duration-300 z-50">449 <div class="flex items-center space-x-2">450 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">451 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>452 </svg>453 <span>Settings saved successfully!</span>454 </div>455 </div>456 457 <script>458 // Settings Page JavaScript459 class SettingsManager {460 constructor() {461 this.settings = this.loadSettings();462 this.init();463 }464 465 init() {466 this.populateSettings();467 this.animateCards();468 }469 470 loadSettings() {471 const saved = localStorage.getItem('productivitySettings');472 if (saved) {473 return JSON.parse(saved);474 }475 476 // Default settings477 return {478 profile: {479 name: 'Bertin Vick',480 email: 'bertin.vick@example.com',481 timezone: 'UTC-5',482 workSchedule: 'standard'483 },484 calendar: {485 defaultView: 'month',486 weekStart: 'monday',487 showWeekends: true,488 smartScheduling: true489 },490 focus: {491 duration: 25,492 breakDuration: 5,493 longBreakInterval: 4,494 longBreakDuration: 30,495 autoStartBreaks: true,496 focusSounds: false497 },498 notifications: {499 taskReminders: true,500 focusAlerts: true,501 dailySummary: true,502 breakReminders: true503 },504 privacy: {505 analyticsCollection: true,506 autoBackup: true507 }508 };509 }510 511 saveSettings() {512 localStorage.setItem('productivitySettings', JSON.stringify(this.settings));513 this.showSaveIndicator();514 }515 516 populateSettings() {517 // Profile settings518 document.getElementById('user-name').value = this.settings.profile.name;519 document.getElementById('user-email').value = this.settings.profile.email;520 document.getElementById('user-timezone').value = this.settings.profile.timezone;521 document.getElementById('work-schedule').value = this.settings.profile.workSchedule;522 523 // Calendar settings524 document.getElementById('default-view').value = this.settings.calendar.defaultView;525 document.getElementById('week-start').value = this.settings.calendar.weekStart;526 527 // Focus settings528 document.getElementById('focus-duration').value = this.settings.focus.duration;529 document.getElementById('break-duration').value = this.settings.focus.breakDuration;530 document.getElementById('long-break-interval').value = this.settings.focus.longBreakInterval;531 document.getElementById('long-break-duration').value = this.settings.focus.longBreakDuration;532 533 // Update toggle states534 this.updateToggleStates();535 }536 537 updateToggleStates() {538 // Calendar toggles539 this.updateToggle('show-weekends-toggle', this.settings.calendar.showWeekends);540 this.updateToggle('smart-scheduling-toggle', this.settings.calendar.smartScheduling);541 542 // Focus toggles543 this.updateToggle('auto-start-breaks-toggle', this.settings.focus.autoStartBreaks);544 this.updateToggle('focus-sounds-toggle', this.settings.focus.focusSounds);545 546 // Notification toggles547 this.updateToggle('task-reminders-toggle', this.settings.notifications.taskReminders);548 this.updateToggle('focus-alerts-toggle', this.settings.notifications.focusAlerts);549 this.updateToggle('daily-summary-toggle', this.settings.notifications.dailySummary);550 this.updateToggle('break-reminders-toggle', this.settings.notifications.breakReminders);551 552 // Privacy toggles553 this.updateToggle('analytics-collection-toggle', this.settings.privacy.analyticsCollection);554 this.updateToggle('auto-backup-toggle', this.settings.privacy.autoBackup);555 }556 557 updateToggle(toggleId, isActive) {558 const toggle = document.getElementById(toggleId);559 const slider = toggle.querySelector('div');560 561 if (isActive) {562 toggle.classList.add('active');563 toggle.style.backgroundColor = '#FCD34D';564 slider.style.transform = 'translateX(1.5rem)';565 } else {566 toggle.classList.remove('active');567 toggle.style.backgroundColor = '#d1d5db';568 slider.style.transform = 'translateX(0)';569 }570 }571 572 toggleSetting(settingName) {573 const parts = settingName.split('-');574 let settingCategory, settingKey;575 576 if (parts[0] === 'show' && parts[1] === 'weekends') {577 settingCategory = 'calendar';578 settingKey = 'showWeekends';579 } else if (parts[0] === 'smart' && parts[1] === 'scheduling') {580 settingCategory = 'calendar';581 settingKey = 'smartScheduling';582 } else if (parts[0] === 'auto' && parts[1] === 'start' && parts[2] === 'breaks') {583 settingCategory = 'focus';584 settingKey = 'autoStartBreaks';585 } else if (parts[0] === 'focus' && parts[1] === 'sounds') {586 settingCategory = 'focus';587 settingKey = 'focusSounds';588 } else if (parts[0] === 'task' && parts[1] === 'reminders') {589 settingCategory = 'notifications';590 settingKey = 'taskReminders';591 } else if (parts[0] === 'focus' && parts[1] === 'alerts') {592 settingCategory = 'notifications';593 settingKey = 'focusAlerts';594 } else if (parts[0] === 'daily' && parts[1] === 'summary') {595 settingCategory = 'notifications';596 settingKey = 'dailySummary';597 } else if (parts[0] === 'break' && parts[1] === 'reminders') {598 settingCategory = 'notifications';599 settingKey = 'breakReminders';600 } else if (parts[0] === 'analytics' && parts[1] === 'collection') {601 settingCategory = 'privacy';602 settingKey = 'analyticsCollection';603 } else if (parts[0] === 'auto' && parts[1] === 'backup') {604 settingCategory = 'privacy';605 settingKey = 'autoBackup';606 }607 608 if (settingCategory && settingKey) {609 this.settings[settingCategory][settingKey] = !this.settings[settingCategory][settingKey];610 this.updateToggleStates();611 this.saveSettings();612 }613 }614 615 showSaveIndicator() {616 const indicator = document.getElementById('save-indicator');617 indicator.classList.remove('translate-y-full');618 619 setTimeout(() => {620 indicator.classList.add('translate-y-full');621 }, 2000);622 }623 624 animateCards() {625 anime({626 targets: '.settings-card',627 translateY: [20, 0],628 opacity: [0, 1],629 delay: anime.stagger(100),630 duration: 600,631 easing: 'easeOutQuad'632 });633 }634 635 resetAllSettings() {636 if (confirm('Are you sure you want to reset all settings to default? This action cannot be undone.')) {637 localStorage.removeItem('productivitySettings');638 location.reload();639 }640 }641 642 saveAllSettings() {643 // Collect all form values644 this.settings.profile.name = document.getElementById('user-name').value;645 this.settings.profile.email = document.getElementById('user-email').value;646 this.settings.profile.timezone = document.getElementById('user-timezone').value;647 this.settings.profile.workSchedule = document.getElementById('work-schedule').value;648 649 this.settings.calendar.defaultView = document.getElementById('default-view').value;650 this.settings.calendar.weekStart = document.getElementById('week-start').value;651 652 this.settings.focus.duration = parseInt(document.getElementById('focus-duration').value);653 this.settings.focus.breakDuration = parseInt(document.getElementById('break-duration').value);654 this.settings.focus.longBreakInterval = parseInt(document.getElementById('long-break-interval').value);655 this.settings.focus.longBreakDuration = parseInt(document.getElementById('long-break-duration').value);656 657 this.saveSettings();658 }659 660 exportData() {661 const data = {662 settings: this.settings,663 tasks: JSON.parse(localStorage.getItem('productivityTasks') || '[]'),664 focusSessions: JSON.parse(localStorage.getItem('focusSessions') || '[]')665 };666 667 const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });668 const url = URL.createObjectURL(blob);669 const a = document.createElement('a');670 a.href = url;671 a.download = 'productivity-data.json';672 a.click();673 URL.revokeObjectURL(url);674 }675 676 importData() {677 const input = document.createElement('input');678 input.type = 'file';679 input.accept = '.json';680 input.onchange = (e) => {681 const file = e.target.files[0];682 if (file) {683 const reader = new FileReader();684 reader.onload = (e) => {685 try {686 const data = JSON.parse(e.target.result);687 if (data.settings) localStorage.setItem('productivitySettings', JSON.stringify(data.settings));688 if (data.tasks) localStorage.setItem('productivityTasks', JSON.stringify(data.tasks));689 if (data.focusSessions) localStorage.setItem('focusSessions', JSON.stringify(data.focusSessions));690 691 alert('Data imported successfully! Please refresh the page.');692 } catch (error) {693 alert('Error importing data. Please check the file format.');694 }695 };696 reader.readAsText(file);697 }698 };699 input.click();700 }701 702 clearData() {703 if (confirm('Are you sure you want to clear all data? This will remove all tasks, settings, and history. This action cannot be undone.')) {704 localStorage.clear();705 alert('All data has been cleared. The page will now refresh.');706 location.reload();707 }708 }709 }710 711 // Global functions712 function toggleSetting(settingName) {713 settingsManager.toggleSetting(settingName);714 }715 716 function resetAllSettings() {717 settingsManager.resetAllSettings();718 }719 720 function saveAllSettings() {721 settingsManager.saveAllSettings();722 }723 724 function exportData() {725 settingsManager.exportData();726 }727 728 function importData() {729 settingsManager.importData();730 }731 732 function clearData() {733 settingsManager.clearData();734 }735 736 function editCategory(categoryId) {737 alert('Category editing functionality coming soon!');738 }739 740 function addNewCategory() {741 alert('Add new category functionality coming soon!');742 }743 744 // Initialize settings manager745 let settingsManager;746 document.addEventListener('DOMContentLoaded', () => {747 settingsManager = new SettingsManager();748 });749 </script>750</body>751</html>