├── .vscode └── settings.json ├── image ├── icon.png ├── google.png ├── iconka.png ├── report.png ├── settings.png ├── sign in.png └── pomofokus.png ├── html ├── signin.html └── main.html ├── css ├── signin.css └── main.css └── script.js /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 2011 3 | } -------------------------------------------------------------------------------- /image/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dostonjon21/pomofokus/HEAD/image/icon.png -------------------------------------------------------------------------------- /image/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dostonjon21/pomofokus/HEAD/image/google.png -------------------------------------------------------------------------------- /image/iconka.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dostonjon21/pomofokus/HEAD/image/iconka.png -------------------------------------------------------------------------------- /image/report.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dostonjon21/pomofokus/HEAD/image/report.png -------------------------------------------------------------------------------- /image/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dostonjon21/pomofokus/HEAD/image/settings.png -------------------------------------------------------------------------------- /image/sign in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dostonjon21/pomofokus/HEAD/image/sign in.png -------------------------------------------------------------------------------- /image/pomofokus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dostonjon21/pomofokus/HEAD/image/pomofokus.png -------------------------------------------------------------------------------- /html/signin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 | 12 | Create Account 13 |
14 |
15 | 19 | 20 |
21 | OR 22 |
23 |

EMAIL

24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /css/signin.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'ArialRounded', -apple-system, BlinkMacSystemFont, 4 | 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 5 | 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 6 | background-color: #BA4949; 7 | 8 | } 9 | 10 | .brand { 11 | display: flex; 12 | align-items: center; 13 | color: white; 14 | font-weight: bold; 15 | margin-top: 100px; 16 | } 17 | .brand-icon img { 18 | margin-right: 5px; 19 | margin-left: 510px; 20 | width: 280px; 21 | } 22 | 23 | 24 | .brand-name{ 25 | font-size: 18px; 26 | margin-bottom: -130px; 27 | margin-left: -200px; 28 | } 29 | 30 | .container { 31 | background-color: #fff; 32 | padding: 30px; 33 | border-radius: 5px; 34 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 35 | width: 350px; 36 | height: 270px; 37 | margin-left: 440px; 38 | margin-top: 80px; 39 | } 40 | 41 | .google-btn { 42 | background-color: #fff; 43 | border: 1px solid #ccc; 44 | padding: 15px 20px; 45 | border-radius: 5px; 46 | display: flex; 47 | align-items: center; 48 | margin-bottom: 20px; 49 | cursor: pointer; 50 | width: 100%; 51 | box-shadow: 0px 2px 0px rgb(104, 95, 95); 52 | } 53 | 54 | .google-btn img { 55 | width: 24px; 56 | margin-right: 10px; 57 | } 58 | 59 | 60 | .email-input { 61 | width: 90%; 62 | padding: 15px; 63 | border: 1px solid #ccc; 64 | border-radius: 5px; 65 | margin-bottom: 4px; 66 | } 67 | 68 | .email-input::placeholder { 69 | color: #ccc; 70 | } 71 | 72 | .email-btn { 73 | background-color: #333; 74 | color: #fff; 75 | padding: 15px 20px; 76 | border: none; 77 | border-radius: 5px; 78 | cursor: pointer; 79 | width: 100%; 80 | margin-top: 30px; 81 | } 82 | 83 | .or-line{ 84 | text-align: center; 85 | margin-bottom: 10px; 86 | } 87 | 88 | .h3{ 89 | margin-bottom: 10px; 90 | } 91 | 92 | 93 | .container a{ 94 | text-decoration: none; 95 | } -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const html = document.querySelector('html'); 3 | const focusBt = document.querySelector('.app__card-button--foco'); 4 | const shortBreakBt = document.querySelector('.app__card-button--curto'); 5 | const longBreakBt = document.querySelector('.app__card-button--longo'); 6 | const pauseIcon = document.querySelector('.app__card-primary-butto-icon'); 7 | const startPauseBt = document.querySelector('#start-pause'); 8 | const startPauseText = document.querySelector('#start-pause span'); 9 | const timerDisplay = document.querySelector('#timer'); 10 | 11 | let elapsedTimeInSeconds = 1500; 12 | let intervalId = null; 13 | let pomodoroTime = 1500; 14 | let shortBreakTime = 300; 15 | let longBreakTime = 900; 16 | 17 | // Avval timer vaqtini ekranga chiqaramiz 18 | displayTime(); 19 | 20 | focusBt.addEventListener('click', () => { 21 | elapsedTimeInSeconds = pomodoroTime; 22 | changeContext('focus'); 23 | focusBt.classList.add('active'); 24 | }); 25 | 26 | shortBreakBt.addEventListener('click', () => { 27 | elapsedTimeInSeconds = shortBreakTime; 28 | changeContext('short-break'); 29 | shortBreakBt.classList.add('active'); 30 | }); 31 | 32 | longBreakBt.addEventListener('click', () => { 33 | elapsedTimeInSeconds = longBreakTime; 34 | changeContext('long-break'); 35 | longBreakBt.classList.add('active'); 36 | }); 37 | 38 | function changeContext(context) { 39 | displayTime(); 40 | document.querySelectorAll('.app__card-button').forEach(btn => btn.classList.remove('active')); 41 | html.setAttribute('data-context', context); 42 | document.body.style.transition = 'background-color 0.5s'; 43 | if (context === 'focus') { 44 | document.body.style.backgroundColor = '#BA4949'; 45 | } else if (context === 'short-break') { 46 | document.body.style.backgroundColor = '#6c5b7b'; 47 | } else if (context === 'long-break') { 48 | document.body.style.backgroundColor = '#355c7d'; 49 | } 50 | } 51 | 52 | const countdown = () => { 53 | if (elapsedTimeInSeconds <= 0) { 54 | alert('Time is up!'); 55 | resetTimer(); 56 | return; 57 | } 58 | elapsedTimeInSeconds--; 59 | displayTime(); 60 | }; 61 | 62 | startPauseBt.addEventListener('click', startOrPause); 63 | 64 | function startOrPause() { 65 | if (intervalId) { 66 | resetTimer(); 67 | return; 68 | } 69 | intervalId = setInterval(countdown, 1000); 70 | startPauseText.textContent = "Pause"; 71 | pauseIcon.setAttribute('src', `./images/pause.png`); 72 | } 73 | 74 | function resetTimer() { 75 | clearInterval(intervalId); 76 | intervalId = null; 77 | startPauseText.textContent = "Start"; 78 | pauseIcon.setAttribute('src', `./images/play_arrow.png`); 79 | 80 | } 81 | 82 | function displayTime() { 83 | const minutes = Math.floor(elapsedTimeInSeconds / 60).toString().padStart(2, '0'); 84 | const seconds = (elapsedTimeInSeconds % 60).toString().padStart(2, '0'); 85 | timerDisplay.innerHTML = `
${minutes}:${seconds}
`; 86 | } 87 | 88 | // Settings modal ochish 89 | document.getElementById('settings-btn').addEventListener('click', function () { 90 | document.getElementById('settings-modal').style.display = 'block'; 91 | }); 92 | 93 | // "OK" tugmasini bosganda vaqt sozlamalarini yangilash 94 | document.querySelector('.btn-ok').addEventListener('click', function () { 95 | const inputs = document.querySelectorAll('.time-settings input'); 96 | pomodoroTime = parseInt(inputs[0].value) * 60; 97 | shortBreakTime = parseInt(inputs[1].value) * 60; 98 | longBreakTime = parseInt(inputs[2].value) * 60; 99 | 100 | // Joriy kontekstga mos vaqtni tanlash 101 | const currentContext = html.getAttribute('data-context'); 102 | if (currentContext === 'focus') { 103 | elapsedTimeInSeconds = pomodoroTime; 104 | } else if (currentContext === 'short-break') { 105 | elapsedTimeInSeconds = shortBreakTime; 106 | } else if (currentContext === 'long-break') { 107 | elapsedTimeInSeconds = longBreakTime; 108 | } else { 109 | elapsedTimeInSeconds = pomodoroTime; 110 | } 111 | displayTime(); 112 | document.getElementById('settings-modal').style.display = 'none'; 113 | }); 114 | 115 | // Modalni yopish 116 | document.querySelectorAll('.close').forEach(btn => { 117 | btn.addEventListener('click', function () { 118 | this.parentElement.parentElement.style.display = 'none'; 119 | }); 120 | }); 121 | 122 | window.addEventListener('click', function (event) { 123 | document.querySelectorAll('.modal').forEach(modal => { 124 | if (event.target == modal) { 125 | modal.style.display = 'none'; 126 | } 127 | }); 128 | }); 129 | }); 130 | 131 | document.addEventListener("DOMContentLoaded", function () { 132 | document.querySelectorAll('.theme-btn').forEach(button => { 133 | button.addEventListener('click', function () { 134 | const chosenColor = this.getAttribute('data-color'); 135 | document.body.style.backgroundColor = chosenColor; 136 | }); 137 | }); 138 | }); 139 | -------------------------------------------------------------------------------- /html/main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fokus 8 | 9 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 48 | 49 | 55 | 56 | 110 | 111 | 112 | 113 | 114 | 115 | 116 |
117 |
118 | 129 |
130 | 131 |
132 | 136 |
137 |
138 |
139 | 140 | 141 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'ArialRounded', -apple-system, BlinkMacSystemFont, 4 | 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 5 | 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 6 | background-color: #BA4949; 7 | } 8 | 9 | .navbar { 10 | display: flex; 11 | justify-content: space-between; 12 | align-items: center; 13 | padding: 10px 20px; 14 | border-bottom: 0.5px solid rgba(0, 0, 0, 0.1); 15 | } 16 | 17 | .brand { 18 | display: flex; 19 | align-items: center; 20 | color: white; 21 | font-weight: bold; 22 | font-size: 20px; 23 | } 24 | 25 | .brand-icon img { 26 | margin-right: 5px; 27 | margin-left: 350px; 28 | width: 20px; 29 | } 30 | 31 | .menu { 32 | display: flex; 33 | gap: 15px; 34 | margin-right: 340px; 35 | } 36 | 37 | .menu-item { 38 | background-color: rgba(255, 255, 255, 0.2); 39 | color: white; 40 | padding: 5px 10px; 41 | border-radius: 5px; 42 | display: flex; 43 | align-items: center; 44 | gap: 3px; 45 | cursor: pointer; 46 | font-size: 13px; 47 | transition: background 0.3s; 48 | 49 | } 50 | .menu-item img{ 51 | gap: 10px; 52 | } 53 | 54 | 55 | .menu-item:hover { 56 | background-color: rgba(255, 255, 255, 0.3); 57 | } 58 | 59 | .icon { 60 | width: 20px; 61 | height: 20px; 62 | } 63 | .menu-item a{ 64 | text-decoration: none; 65 | color: #fff; 66 | } 67 | 68 | 69 | 70 | .modal { 71 | display: none; 72 | position: fixed; 73 | z-index: 1; 74 | left: 0; 75 | top: 0; 76 | width: 100%; 77 | height: 100%; 78 | background-color: rgba(0, 0, 0, 0.5); 79 | } 80 | .modal-content { 81 | background-color: white; 82 | margin: 10% auto; 83 | padding: 20px; 84 | border-radius: 5px; 85 | height: 300px; 86 | width: 450px; 87 | text-align: center; 88 | overflow: hidden scroll; 89 | } 90 | .close { 91 | float: right; 92 | cursor: pointer; 93 | font-size: 24px; 94 | } 95 | 96 | 97 | 98 | .app__section-banner-container { 99 | width: 99rem; 100 | margin: 0 auto; 101 | display: flex; 102 | justify-content: space-between; 103 | align-items: center; 104 | gap: 4rem; 105 | flex-wrap: wrap; 106 | } 107 | 108 | .app__title { 109 | line-height: 150%; 110 | font-size: 5.2rem; 111 | font-style: normal; 112 | font-weight: 200; 113 | max-width: 46rem; 114 | } 115 | 116 | .app__title-strong { 117 | font-weight: 600; 118 | } 119 | .app__section-card-container { 120 | display: flex; 121 | justify-content: center; 122 | align-items: center; 123 | flex-direction: column; 124 | margin-top: 50px; 125 | } 126 | 127 | .app__card { 128 | background: rgba(255, 255, 255, 0.1); 129 | padding: 20px; 130 | border-radius: 10px; 131 | text-align: center; 132 | width: 400px; 133 | height: 312p x; 134 | } 135 | 136 | .app__card-list { 137 | display: flex; 138 | justify-content: center; 139 | gap: 10px; 140 | } 141 | 142 | .app__card-button { 143 | background-color: transparent; 144 | color: white; 145 | border: 2px solid white; 146 | border-radius: 5px; 147 | padding: 10px 15px; 148 | font-size: 17px; 149 | cursor: pointer; 150 | transition: background 0.3s, color 0.3s; 151 | } 152 | 153 | .app__card-button.active { 154 | background-color: white; 155 | color: #BA4949; 156 | font-weight: bold; 157 | } 158 | 159 | .app__card-timer { 160 | font-size: 4rem; 161 | font-weight: bold; 162 | text-align: center; 163 | display: flex; 164 | justify-content: center; 165 | margin: 20px 0px; 166 | color: #fff; 167 | font-size: 120px; 168 | } 169 | 170 | .app__card-primary-button { 171 | background-color: white; 172 | color: #BA4949; 173 | border: none; 174 | padding: 10px 20px; 175 | border-radius: 4px; 176 | cursor: pointer; 177 | font-size: 40px; 178 | font-weight: bold; 179 | display: flex; 180 | align-items: center; 181 | margin-left: 120px; 182 | width: 160px; 183 | box-shadow:rgb(235, 235, 235) 0px 6px 0px; 184 | 185 | } 186 | .Start{ 187 | margin-left: -3px; 188 | } 189 | 190 | .app__card-primary-button:hover { 191 | background-color: #ffdddd; 192 | } 193 | 194 | .settings-container { 195 | background-color: #fff; 196 | padding: 20px; 197 | border-radius: 12px; 198 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 199 | } 200 | 201 | .settings-container h3 { 202 | font-size: 14px; 203 | color: #666; 204 | margin-bottom: 20px; 205 | text-transform: uppercase; 206 | letter-spacing: 1px; 207 | } 208 | 209 | .time-settings { 210 | display: grid; 211 | grid-template-columns: repeat(3, 1fr); 212 | gap: 10px; 213 | margin-bottom: 20px; 214 | } 215 | 216 | .time-settings input { 217 | width: 100%; 218 | padding: 10px; 219 | border: 1px solid #ddd; 220 | border-radius: 8px; 221 | background-color: #f0f0f0; 222 | text-align: center; 223 | } 224 | 225 | .setting-option { 226 | display: flex; 227 | justify-content: space-between; 228 | align-items: center; 229 | margin-bottom: 15px; 230 | } 231 | 232 | .toggle-switch { 233 | position: relative; 234 | width: 40px; 235 | height: 20px; 236 | background: #ddd; 237 | border-radius: 10px; 238 | cursor: pointer; 239 | } 240 | 241 | .toggle-switch::before { 242 | content: ''; 243 | position: absolute; 244 | width: 18px; 245 | height: 18px; 246 | background: white; 247 | border-radius: 50%; 248 | top: 1px; 249 | left: 1px; 250 | transition: all 0.3s; 251 | } 252 | 253 | .toggle-switch.active { 254 | background: #4caf50; 255 | } 256 | 257 | .toggle-switch.active::before { 258 | transform: translateX(20px); 259 | } 260 | 261 | .interval-input input { 262 | width: 50px; 263 | padding: 8px; 264 | border: 1px solid #ddd; 265 | border-radius: 8px; 266 | background-color: #f0f0f0; 267 | text-align: center; 268 | } 269 | 270 | /* .settings-container { 271 | background-color: #fff; 272 | padding: 20px; 273 | border-radius: 12px; 274 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 275 | width: 300px; 276 | } */ 277 | 278 | .settings-container h3 { 279 | font-size: 14px; 280 | color: #666; 281 | 282 | margin-bottom: 40px; 283 | text-transform: uppercase; 284 | letter-spacing: 1px; 285 | } 286 | .alo{ 287 | margin-bottom: 20px; 288 | 289 | } 290 | 291 | 292 | .time-settings { 293 | display: grid; 294 | grid-template-columns: repeat(3, 1fr); 295 | gap: 10px; 296 | } 297 | 298 | .time-settings input { 299 | width: 90px; 300 | padding: 10px; 301 | border: 1px solid #ddd; 302 | border-radius: 8px; 303 | background-color: #f0f0f0; 304 | text-align: center; 305 | margin-left: -10px; 306 | gap: 10px; 307 | } 308 | 309 | .setting-option { 310 | display: flex; 311 | justify-content: space-between; 312 | align-items: center; 313 | margin-bottom: 15px; 314 | } 315 | 316 | .toggle-switch { 317 | position: relative; 318 | width: 40px; 319 | height: 20px; 320 | background: #ddd; 321 | border-radius: 10px; 322 | cursor: pointer; 323 | } 324 | 325 | .toggle-switch::before { 326 | content: ''; 327 | position: absolute; 328 | width: 18px; 329 | height: 18px; 330 | background: white; 331 | border-radius: 50%; 332 | top: 1px; 333 | left: 1px; 334 | transition: all 0.3s; 335 | } 336 | 337 | .toggle-switch.active { 338 | background: #4caf50; 339 | } 340 | 341 | .toggle-switch.active::before { 342 | transform: translateX(20px); 343 | } 344 | 345 | .interval-input input { 346 | width: 50px; 347 | padding: 8px; 348 | border: 1px solid #ddd; 349 | border-radius: 8px; 350 | background-color: #f0f0f0; 351 | text-align: center; 352 | } 353 | 354 | 355 | .btn-ok{ 356 | font-size: 20px; 357 | width: 80px; 358 | height: 40px; 359 | text-align: center; 360 | border-radius: 10px; 361 | background-color: #BA4949; 362 | } 363 | 364 | 365 | .color-theme { 366 | display: flex; 367 | gap: 10px; 368 | justify-content: center; 369 | margin-top: 10px; 370 | } 371 | .color-theme .theme-btn { 372 | width: 30px; 373 | height: 30px; 374 | border-radius: 50%; 375 | border: none; 376 | cursor: pointer; 377 | transition: transform 0.9s; 378 | } 379 | .color-theme .theme-btn:hover { 380 | transform: scale(1.1); 381 | } 382 | 383 | 384 | @media (max-width: 1024px) and (min-width: 768px) { 385 | .app__section-banner-container { 386 | width: 48rem; 387 | } 388 | 389 | .app__title { 390 | text-align: center; 391 | } 392 | } 393 | @media (max-width: 767px) { 394 | .app__section-banner-container { 395 | width: 32rem; 396 | } 397 | 398 | .app__title { 399 | font-size: 2.6rem; 400 | text-align: center; 401 | } 402 | 403 | .app__card-timer { 404 | font-size: 6rem; 405 | } 406 | } 407 | --------------------------------------------------------------------------------