From 83249d39f99889e04b9e31e9fc588545e89bca6c Mon Sep 17 00:00:00 2001 From: Kira Date: Thu, 18 Nov 2021 13:14:32 +0530 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80Version=202.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- breath/breath.css | 4 +- breath/breath.html | 78 +++++++--- clock/dark/clock_dark.html | 46 ------ clock/dark/style.css | 90 ----------- clock/flip/flip.css | 215 -------------------------- clock/flip/flip.html | 65 -------- clock/flip/flip.js | 105 ------------- clock/light/clock_light.html | 44 ------ clock/light/style.css | 90 ----------- index.html | 14 +- lofi/lofi.css | 15 +- lofi/lofi.html | 106 ++++++++++--- main.css | 6 + pomodoro/25-5/pomodoro.css | 9 +- pomodoro/25-5/pomodoro.html | 39 +++++ pomodoro/50-10/pomodoro.css | 228 ++++++++++++++-------------- pomodoro/50-10/pomodoro.html | 41 +++++ pomodoro/60-5/pomodoro.css | 118 --------------- pomodoro/60-5/pomodoro.html | 66 -------- pomodoro/60-5/pomodoro.js | 148 ------------------ todo/todo.css | 286 ++++++++++++++++++----------------- todo/todo.html | 41 +++++ 22 files changed, 546 insertions(+), 1308 deletions(-) delete mode 100644 clock/dark/clock_dark.html delete mode 100644 clock/dark/style.css delete mode 100644 clock/flip/flip.css delete mode 100644 clock/flip/flip.html delete mode 100644 clock/flip/flip.js delete mode 100644 clock/light/clock_light.html delete mode 100644 clock/light/style.css delete mode 100644 pomodoro/60-5/pomodoro.css delete mode 100644 pomodoro/60-5/pomodoro.html delete mode 100644 pomodoro/60-5/pomodoro.js diff --git a/breath/breath.css b/breath/breath.css index 6e82cbe..6166dda 100644 --- a/breath/breath.css +++ b/breath/breath.css @@ -7,7 +7,7 @@ font-family: "Poppins", sans-serif; } -body { +main { min-height: 100vh; display: flex; flex-direction: column; @@ -18,7 +18,7 @@ body { background-size: cover; } -body::after { +main::after { content: ""; position: absolute; height: 100%; diff --git a/breath/breath.html b/breath/breath.html index 808b122..e095988 100644 --- a/breath/breath.html +++ b/breath/breath.html @@ -5,28 +5,72 @@ - Breath Counter + + -
- - -
-
-
-
-
-

Breaths remaining: 3

-

Are you ready to start breathing?

- - + + +
+
+ + +
+
+
+
+
+

Breaths remaining: 3

+

Are you ready to start breathing?

+ +
+ + + \ No newline at end of file diff --git a/clock/dark/clock_dark.html b/clock/dark/clock_dark.html deleted file mode 100644 index ead317f..0000000 --- a/clock/dark/clock_dark.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - - - - - Clock | Dark Mode - - - -
-
-
-
-
-
-
-
-
-
-
- - - - \ No newline at end of file diff --git a/clock/dark/style.css b/clock/dark/style.css deleted file mode 100644 index e237f61..0000000 --- a/clock/dark/style.css +++ /dev/null @@ -1,90 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} -body { - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - background: #091921; -} -.clock { - width: 350px; - height: 350px; - display: flex; - justify-content: center; - align-items: center; - background: url(../../assests/images/clock.png); - background-size: cover; - border: 4px solid #091921; - border-radius: 50%; - box-shadow: 0 -15px 15px rgba(56, 54, 54, 0.05), - inset 0 -15px 15px rgba(255, 255, 255, 0.05), - 0 15px 15px rgba(0, 0, 0, 0.03), inset 0 15px 15px rgba(0, 0, 0, 0.03); -} -.clock:before { - content: ""; - position: absolute; - width: 15px; - height: 15px; - background: rgb(255, 255, 255); - border-radius: 50%; - z-index: 10000; -} -.clock .hour, -.clock .min, -.clock .sec { - position: absolute; -} -.clock .hour, -.hr { - width: 160px; - height: 160px; -} -.clock .min, -.mn { - width: 190px; - height: 190px; -} -.clock .sec, -.sc { - width: 230px; - height: 230px; -} -.hr, -.mn, -.sc { - display: flex; - justify-content: center; - position: absolute; - border-radius: 50%; -} -.hr:before { - content: ""; - position: absolute; - width: 8px; - height: 80px; - background: #ff105e; - z-index: 10; - border-radius: 6px 6px 0 0; -} -.mn:before { - content: ""; - position: absolute; - width: 4px; - height: 100px; - background: rgb(255, 255, 255); - z-index: 11; - border-radius: 6px 6px 0 0; -} -.sc:before { - content: ""; - position: absolute; - width: 2px; - height: 150px; - background: rgb(255, 255, 255); - z-index: 12; - border-radius: 6px 6px 0 0; -} diff --git a/clock/flip/flip.css b/clock/flip/flip.css deleted file mode 100644 index 3911f7b..0000000 --- a/clock/flip/flip.css +++ /dev/null @@ -1,215 +0,0 @@ -html, -body { - width: 100vw; - height: 100vh; - margin: 0; - border: 0; - padding: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -*, -*::before, -*::after { - -webkit-box-sizing: inherit; - -moz-box-sizing: inherit; - box-sizing: inherit; -} - -#app { - width: 100%; - height: 100%; - - background: rgb(217 225 225 / 83%); - - display: flex; - justify-content: center; - align-items: center; -} - -.flip-clock-container { - display: flex; - justify-content: center; - align-items: center; - - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - font-size: 50px; - line-height: 0; -} - -.flip-clock-container * { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - - cursor: default; -} - -.flip-clock { - display: flex; - - -webkit-perspective: 1000px; - -moz-perspective: 1000px; - perspective: 1000px; -} - -.digit { - position: relative; - - width: 45px; - height: 80px; - - box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); -} - -.digit-left { - margin-right: 1px; -} - -.digit-right { - margin-left: 1px; -} - -.digit::before, -.digit::after { - position: absolute; - z-index: 0; - - display: flex; - justify-content: center; - - width: 100%; - height: 50%; - overflow: hidden; -} - -.digit::before { - content: attr(data-digit-before); - - bottom: 0; - align-items: flex-start; -} - -.digit::after { - content: attr(data-digit-after); - - top: 0; - align-items: flex-end; -} - -.card { - position: relative; - z-index: 1; - - width: 100%; - height: 50%; - - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - - -webkit-transform-origin: bottom; - -moz-transform-origin: bottom; - transform-origin: bottom; - - -webkit-transform: rotateX(0); - -moz-transform: rotateX(0); - transform: rotateX(0); - - -webkit-transition: transform .7s ease-in-out; - -moz-transition: transform .7s ease-in-out; - transition: transform .7s ease-in-out; -} - -.card.flipped { - transform: rotateX(-180deg); -} - -.card-face { - position: absolute; - - display: flex; - justify-content: center; - - width: 100%; - height: 100%; - overflow: hidden; - - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; -} - -.card-face-front { - align-items: flex-end; -} - -.card-face-back { - align-items: flex-start; - - -webkit-transform: rotateX(-180deg); - -moz-transform: rotateX(-180deg); - transform: rotateX(-180deg); -} - -.digit::before, -.digit::after, -.card-face-front, -.card-face-back { - background: white; - color: black; -} - -.digit, -.digit::before, -.digit::after, -.card, -.card-face { - border-radius: 4px; -} - -.digit::before, -.card-face-back { - background: linear-gradient(0, #aaa, #ccc 50%, #fafafa); - color: #030303cb; - - border-top: 1px solid black; - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.digit::after, -.card-face-front { - background: linear-gradient(0, #aaa, #bbb 50%, #f5f5f5); - color: #212121; - - border-bottom: 1px solid black; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -.digit-left, -.digit-left::before, -.digit-left::after, -.digit-left .card, -.digit-left .card-face { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.digit-right, -.digit-right::before, -.digit-right::after, -.digit-right .card, -.digit-right .card-face { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.colon { - color: black; - margin: 0 6px; - padding-bottom: 9px; -} \ No newline at end of file diff --git a/clock/flip/flip.html b/clock/flip/flip.html deleted file mode 100644 index ddc64be..0000000 --- a/clock/flip/flip.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - - - Clock | Flip Version - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - \ No newline at end of file diff --git a/clock/flip/flip.js b/clock/flip/flip.js deleted file mode 100644 index 4aadcee..0000000 --- a/clock/flip/flip.js +++ /dev/null @@ -1,105 +0,0 @@ -(function () { - 'use strict'; - - const els = { - s: initElements('s'), - m: initElements('m'), - h: initElements('h'), - }; - - function initElements(type) { - const els = [{}, {}]; - - if (!['s', 'm', 'h'].includes(type)) return els; - - const target = document.querySelector(`.flip-clock-${type}`); - - if (!target) return els; - - let el; - - el = els[0]; - el.digit = target.querySelector('.digit-left'); - el.card = el.digit.querySelector('.card'); - el.cardFaces = el.card.querySelectorAll('.card-face'); - el.cardFaceA = el.cardFaces[0]; - el.cardFaceB = el.cardFaces[1]; - - el = els[1]; - el.digit = target.querySelector('.digit-right'); - el.card = el.digit.querySelector('.card'); - el.cardFaces = el.card.querySelectorAll('.card-face'); - el.cardFaceA = el.cardFaces[0]; - el.cardFaceB = el.cardFaces[1]; - - return els; - } - - (function runClock() { - if (!document.hidden) { - const date = new Date(); - const now = { - h: date.getHours(), - m: date.getMinutes(), - s: date.getSeconds(), - }; - now.h = now.h < 10 ? `0${now.h}` : `${now.h}`; - now.m = now.m < 10 ? `0${now.m}` : `${now.m}`; - now.s = now.s < 10 ? `0${now.s}` : `${now.s}`; - now.h0 = now.h[0]; - now.h1 = now.h[1]; - now.m0 = now.m[0]; - now.m1 = now.m[1]; - now.s0 = now.s[0]; - now.s1 = now.s[1]; - - for (const t of Object.keys(els)) { - for (const i of ['0', '1']) { - const curr = now[`${t}${i}`]; - let next = +curr + 1; - if (t === 'h') { - if (i === '0') next = next <= 2 ? `${next}` : '0'; - if (i === '1') next = next <= 3 ? `${next}` : '0'; - } - if (t === 'm') { - if (i === '0') next = next <= 5 ? `${next}` : '0'; - if (i === '1') next = next <= 9 ? `${next}` : '0'; - } - if (t === 's') { - if (i === '0') next = next <= 5 ? `${next}` : '0'; - if (i === '1') next = next <= 9 ? `${next}` : '0'; - } - const el = els[t][i]; - if (el && el.digit) { - if (!el.digit.dataset.digitBefore) { - el.digit.dataset.digitBefore = curr; - el.cardFaceA.textContent = el.digit.dataset.digitBefore; - el.digit.dataset.digitAfter = next; - el.cardFaceB.textContent = el.digit.dataset.digitAfter; - } else if (el.digit.dataset.digitBefore !== curr) { - el.card.addEventListener('transitionend', function () { - el.digit.dataset.digitBefore = curr; - el.cardFaceA.textContent = el.digit.dataset.digitBefore; - - const cardClone = el.card.cloneNode(true); - cardClone.classList.remove('flipped'); - el.digit.replaceChild(cardClone, el.card); - el.card = cardClone; - el.cardFaces = el.card.querySelectorAll('.card-face'); - el.cardFaceA = el.cardFaces[0]; - el.cardFaceB = el.cardFaces[1]; - - el.digit.dataset.digitAfter = next; - el.cardFaceB.textContent = el.digit.dataset.digitAfter; - }, { once: true }); - if (!el.card.classList.contains('flipped')) { - el.card.classList.add('flipped'); - } - } - } - } - } - } - setTimeout(runClock, 1000); - })(); - })(); \ No newline at end of file diff --git a/clock/light/clock_light.html b/clock/light/clock_light.html deleted file mode 100644 index 46eab78..0000000 --- a/clock/light/clock_light.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - Clock | Light Mode - - - - -
-
-
-
-
-
-
-
-
-
-
- - - - \ No newline at end of file diff --git a/clock/light/style.css b/clock/light/style.css deleted file mode 100644 index 568873a..0000000 --- a/clock/light/style.css +++ /dev/null @@ -1,90 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} -body { - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - background: #edf0f1ef; -} -.clock { - width: 350px; - height: 350px; - display: flex; - justify-content: center; - align-items: center; - background: url(../../assests/images/clock.png); - background-size: cover; - border: 4px solid #091921; - border-radius: 50%; - box-shadow: 0 -15px 15px rgba(56, 54, 54, 0.05), - inset 0 -15px 15px rgba(255, 255, 255, 0.05), - 0 15px 15px rgba(0, 0, 0, 0.03), inset 0 15px 15px rgba(0, 0, 0, 0.03); -} -.clock:before { - content: ""; - position: absolute; - width: 15px; - height: 15px; - background: rgb(0, 0, 0); - border-radius: 50%; - z-index: 10000; -} -.clock .hour, -.clock .min, -.clock .sec { - position: absolute; -} -.clock .hour, -.hr { - width: 160px; - height: 160px; -} -.clock .min, -.mn { - width: 190px; - height: 190px; -} -.clock .sec, -.sc { - width: 230px; - height: 230px; -} -.hr, -.mn, -.sc { - display: flex; - justify-content: center; - position: absolute; - border-radius: 50%; -} -.hr:before { - content: ""; - position: absolute; - width: 8px; - height: 80px; - background: rgb(0, 0, 0); - z-index: 10; - border-radius: 6px 6px 0 0; -} -.mn:before { - content: ""; - position: absolute; - width: 4px; - height: 100px; - background: rgb(34, 33, 33); - z-index: 11; - border-radius: 6px 6px 0 0; -} -.sc:before { - content: ""; - position: absolute; - width: 2px; - height: 150px; - background: rgb(34, 33, 33); - z-index: 12; - border-radius: 6px 6px 0 0; -} diff --git a/index.html b/index.html index 9e6d1da..a332a34 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,7 @@ - - -
- music-cover -
-
- - - +
+

Lofi

+
+
+

+
+
+
+
+ +
+ music-cover +
+
+ + + +
-
- + + + diff --git a/main.css b/main.css index bc9f8d3..8ada263 100644 --- a/main.css +++ b/main.css @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"); + :root { /* 8pt grid */ --pt8: 0.5rem; @@ -27,6 +29,10 @@ justify-content: flex-end; } +body { + font-family: "Poppins", sans-serif; +} + header { background-image: url(https://64.media.tumblr.com/659ad69128231083423ccf335567c095/tumblr_oujxtk2mZB1wvke5ro3_1280.jpg); background-repeat: none; diff --git a/pomodoro/25-5/pomodoro.css b/pomodoro/25-5/pomodoro.css index c52c67f..1af1801 100644 --- a/pomodoro/25-5/pomodoro.css +++ b/pomodoro/25-5/pomodoro.css @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"); + html { box-sizing: border-box; } @@ -20,8 +22,7 @@ html { body { background-color: var(--bgc); transition: background-color 1s ease; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, - Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: "Poppins", sans-serif !important; user-select: none; } @@ -30,7 +31,7 @@ progress { width: 100%; height: 12px; position: fixed; - top: 0; + top: 54px; } progress::-webkit-progress-bar { @@ -61,7 +62,7 @@ progress::-webkit-progress-value { } .mode-button { - font-size: 16px; + font-size: 18px; height: 28px; cursor: pointer; box-shadow: none; diff --git a/pomodoro/25-5/pomodoro.html b/pomodoro/25-5/pomodoro.html index 3869102..36f2ed8 100644 --- a/pomodoro/25-5/pomodoro.html +++ b/pomodoro/25-5/pomodoro.html @@ -32,6 +32,40 @@ +
@@ -62,6 +96,11 @@ + + diff --git a/pomodoro/50-10/pomodoro.css b/pomodoro/50-10/pomodoro.css index 14031ee..1af1801 100644 --- a/pomodoro/50-10/pomodoro.css +++ b/pomodoro/50-10/pomodoro.css @@ -1,115 +1,119 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"); + html { - box-sizing: border-box; - } - - *, *::before, *::after { - box-sizing: inherit; - margin: 0; - padding: 0; - } - - :root { - --pomodoro: hsl(223, 25%, 40%); - --shortBreak: hsl(48, 23%, 40%); - --longBreak: hsl(105, 16%, 40%); - --bgc: var(--pomodoro); - } - - body { - background-color: var(--bgc); - transition: background-color 1s ease; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - user-select: none; - } - - progress { - border-radius: 2px; - width: 100%; - height: 12px; - position: fixed; - top: 0; - } - - progress::-webkit-progress-bar { - background-color: rgba(0, 0, 0, 0.1);; - } - - progress::-webkit-progress-value { - background-color: #fff; - } - - .timer { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - padding: 20px; - text-align: center; - } - + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +:root { + --pomodoro: hsl(223, 25%, 40%); + --shortBreak: hsl(48, 23%, 40%); + --longBreak: hsl(105, 16%, 40%); + --bgc: var(--pomodoro); +} + +body { + background-color: var(--bgc); + transition: background-color 1s ease; + font-family: "Poppins", sans-serif !important; + user-select: none; +} + +progress { + border-radius: 2px; + width: 100%; + height: 12px; + position: fixed; + top: 54px; +} + +progress::-webkit-progress-bar { + background-color: rgba(0, 0, 0, 0.1); +} + +progress::-webkit-progress-value { + background-color: #fff; +} + +.timer { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 20px; + text-align: center; +} + +.clock { + margin-top: 50px; + margin-bottom: 30px; + font-size: 15rem; + line-height: 1; + display: flex; + align-items: center; + font-family: arial, sans-serif; +} + +.mode-button { + font-size: 18px; + height: 28px; + cursor: pointer; + box-shadow: none; + font-weight: 300; + color: #fff; + border: 1px solid transparent; + margin: 0px; + border-radius: 4px; + padding: 2px 12px; + background: none; +} + +.mode-button.active { + border-color: #fff; +} + +.main-button { + cursor: pointer; + box-shadow: rgb(235, 235, 235) 0px 6px 0px; + font-size: 22px; + height: 55px; + text-transform: uppercase; + color: hsl(175, 26%, 41%); + font-weight: bold; + width: 200px; + background-color: white; + border-width: initial; + border-style: none; + margin: 20px 0px 0px; + padding: 0px 12px; + border-radius: 4px; + transition: color 0.5s ease-in-out 0s; +} + +button:focus, +button:active { + outline: none; +} + +.main-button.active { + transform: translateY(6px); + box-shadow: none; + outline: none; +} + +.hidden { + display: none; +} + +@media screen and (max-width: 550px) { .clock { - margin-top: 50px; - margin-bottom: 30px; - font-size: 15rem; - line-height: 1; - display: flex; - align-items: center; - font-family: arial, sans-serif; - } - - .mode-button { - font-size: 16px; - height: 28px; - cursor: pointer; - box-shadow: none; - font-weight: 300; - color: #fff; - border: 1px solid transparent; - margin: 0px; - border-radius: 4px; - padding: 2px 12px; - background: none; - } - - .mode-button.active { - border-color: #fff; - } - - .main-button { - cursor: pointer; - box-shadow: rgb(235, 235, 235) 0px 6px 0px; - font-size: 22px; - height: 55px; - text-transform: uppercase; - color: hsl(175, 26%, 41%); - font-weight: bold; - width: 200px; - background-color: white; - border-width: initial; - border-style: none; - margin: 20px 0px 0px; - padding: 0px 12px; - border-radius: 4px; - transition: color 0.5s ease-in-out 0s; - } - - button:focus, button:active { - outline: none; - } - - .main-button.active { - transform: translateY(6px); - box-shadow: none; - outline: none; - } - - .hidden { - display: none; - } - - @media screen and (max-width: 550px) { - .clock { - font-size: 8rem; - } + font-size: 8rem; } - \ No newline at end of file +} diff --git a/pomodoro/50-10/pomodoro.html b/pomodoro/50-10/pomodoro.html index 7cdbd41..a63cf0f 100644 --- a/pomodoro/50-10/pomodoro.html +++ b/pomodoro/50-10/pomodoro.html @@ -26,9 +26,45 @@ Pomodoro Clock + +
@@ -59,6 +95,11 @@ + + diff --git a/pomodoro/60-5/pomodoro.css b/pomodoro/60-5/pomodoro.css deleted file mode 100644 index c52c67f..0000000 --- a/pomodoro/60-5/pomodoro.css +++ /dev/null @@ -1,118 +0,0 @@ -html { - box-sizing: border-box; -} - -*, -*::before, -*::after { - box-sizing: inherit; - margin: 0; - padding: 0; -} - -:root { - --pomodoro: hsl(223, 25%, 40%); - --shortBreak: hsl(48, 23%, 40%); - --longBreak: hsl(105, 16%, 40%); - --bgc: var(--pomodoro); -} - -body { - background-color: var(--bgc); - transition: background-color 1s ease; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, - Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - user-select: none; -} - -progress { - border-radius: 2px; - width: 100%; - height: 12px; - position: fixed; - top: 0; -} - -progress::-webkit-progress-bar { - background-color: rgba(0, 0, 0, 0.1); -} - -progress::-webkit-progress-value { - background-color: #fff; -} - -.timer { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - padding: 20px; - text-align: center; -} - -.clock { - margin-top: 50px; - margin-bottom: 30px; - font-size: 15rem; - line-height: 1; - display: flex; - align-items: center; - font-family: arial, sans-serif; -} - -.mode-button { - font-size: 16px; - height: 28px; - cursor: pointer; - box-shadow: none; - font-weight: 300; - color: #fff; - border: 1px solid transparent; - margin: 0px; - border-radius: 4px; - padding: 2px 12px; - background: none; -} - -.mode-button.active { - border-color: #fff; -} - -.main-button { - cursor: pointer; - box-shadow: rgb(235, 235, 235) 0px 6px 0px; - font-size: 22px; - height: 55px; - text-transform: uppercase; - color: hsl(175, 26%, 41%); - font-weight: bold; - width: 200px; - background-color: white; - border-width: initial; - border-style: none; - margin: 20px 0px 0px; - padding: 0px 12px; - border-radius: 4px; - transition: color 0.5s ease-in-out 0s; -} - -button:focus, -button:active { - outline: none; -} - -.main-button.active { - transform: translateY(6px); - box-shadow: none; - outline: none; -} - -.hidden { - display: none; -} - -@media screen and (max-width: 550px) { - .clock { - font-size: 8rem; - } -} diff --git a/pomodoro/60-5/pomodoro.html b/pomodoro/60-5/pomodoro.html deleted file mode 100644 index 8d3c531..0000000 --- a/pomodoro/60-5/pomodoro.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - Pomodoro Clock - - - - -
- -
-
-
- - - -
-
- 60 - : - 00 -
- -
-
- - - - - \ No newline at end of file diff --git a/pomodoro/60-5/pomodoro.js b/pomodoro/60-5/pomodoro.js deleted file mode 100644 index 0dab0cb..0000000 --- a/pomodoro/60-5/pomodoro.js +++ /dev/null @@ -1,148 +0,0 @@ -const timer = { - pomodoro: 60, - shortBreak: 5, - longBreak: 15, - longBreakInterval: 4, - sessions: 0, -}; - -let interval; - -function getRemainingTime(endTime) { - const currentTime = Date.parse(new Date()); - const difference = endTime - currentTime; - - const total = parseInt(difference / 1000); - const minutes = parseInt((total / 60) % 60); - const seconds = parseInt(total % 60); - - return { - total, - minutes, - seconds, - }; -} - -function updateClock() { - const { remainingTime } = timer; - const minutes = `${remainingTime.minutes}`.padStart(2, "0"); - const seconds = `${remainingTime.seconds}`.padStart(2, "0"); - - const min = document.getElementById("js-minutes"); - const sec = document.getElementById("js-seconds"); - const time = `${minutes}:${seconds}`; - min.textContent = minutes; - sec.textContent = seconds; - - document.title = `${time} - Pomodoro Clock`; - const progress = document.getElementById("js-progress"); - progress.value = timer[timer.mode] * 60 - timer.remainingTime.total; -} - -function startTimer() { - let { total } = timer.remainingTime; - const endTime = Date.parse(new Date()) + total * 1000; - - if (timer.mode === "pomodoro") timer.sessions++; - - mainButton.dataset.action = "stop"; - mainButton.classList.add("active"); - mainButton.textContent = "stop"; - - interval = setInterval(function () { - timer.remainingTime = getRemainingTime(endTime); - total = timer.remainingTime.total; - updateClock(); - if (total <= 0) { - clearInterval(interval); - - switch (timer.mode) { - case "pomodoro": - if (timer.sessions % timer.longBreakInterval === 0) { - switchMode("longBreak"); - } else { - switchMode("shortBreak"); - } - break; - default: - switchMode("pomodoro"); - } - - if (Notification.permission === "granted") { - const text = - timer.mode === "pomodoro" ? "Get back to work!" : "Take a break!"; - new Notification(text); - } - - document.querySelector(`[data-sound="${timer.mode}"]`).play(); - startTimer(); - } - }, 1000); -} - -function stopTimer() { - clearInterval(interval); - - mainButton.dataset.action = "start"; - mainButton.classList.remove("active"); - mainButton.textContent = "start"; -} - -function switchMode(mode) { - timer.mode = mode; - timer.remainingTime = { - total: timer[mode] * 60, - minutes: timer[mode], - seconds: 0, - }; - - document - .querySelectorAll("button[data-mode]") - .forEach((e) => e.classList.remove("active")); - document.querySelector(`[data-mode="${mode}"]`).classList.add("active"); - document - .getElementById("js-progress") - .setAttribute("max", timer.remainingTime.total); - document.body.style.backgroundColor = `var(--${mode})`; - - updateClock(); -} - -function handleMode(event) { - const { mode } = event.target.dataset; - - if (!mode) return; - - timer.sessions = 0; - switchMode(mode); - stopTimer(); -} - -const buttonSound = new Audio("../../assests/sounds/button-sound.mp3"); -const mainButton = document.getElementById("js-btn"); -mainButton.addEventListener("click", () => { - const { action } = mainButton.dataset; - buttonSound.play(); - if (action === "start") { - startTimer(); - } else { - stopTimer(); - } -}); - -const modeButtons = document.querySelector("#js-mode-buttons"); -modeButtons.addEventListener("click", handleMode); - -document.addEventListener("DOMContentLoaded", () => { - if ("Notification" in window && Notification.permission !== "denied") { - Notification.requestPermission().then(function (permission) { - if (permission === "granted") { - new Notification( - "Awesome! You will receive notifications at the start of a pomodoro or a break" - ); - } - }); - } - - switchMode("pomodoro"); -}); diff --git a/todo/todo.css b/todo/todo.css index 0daea08..81e5f26 100644 --- a/todo/todo.css +++ b/todo/todo.css @@ -1,143 +1,145 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"); + html { - box-sizing: border-box; - } - - *, *::before, *::after { - box-sizing: inherit; - margin: 0; - padding: 0; - } - - body { - font-family: - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, - Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; - line-height: 1.4; - } - - .container { - width: 100%; - max-width: 500px; - margin: 0 auto; - padding-left: 10px; - padding-right: 10px; - color: #333; - height: 90vh; - margin-top: 5vh; - margin-bottom: 5vh; - overflow-y: auto; - } - - .app-title { - text-align: center; - margin-bottom: 20px; - font-size: 80px; - opacity: 0.5; - } - - svg { - width: 64px; - height: 64px; - } - - .todo-list { - list-style: none; - margin-bottom: 20px; - } - - .todo-item { - margin-bottom: 10px; - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - } - - .todo-item span { - flex-grow: 1; - margin-left: 10px; - margin-right: 10px; - font-size: 22px; - } - - .done span { - text-decoration: line-through; - } - - input[type="checkbox"] { - display: none; - } - - .tick { - width: 30px; - height: 30px; - border: 3px solid #333; - border-radius: 50%; - display: inline-flex; - justify-content: center; - align-items: center; - cursor: pointer; - } - - .tick::before { - content: '✓'; - font-size: 20px; - display: none; - } - - .done .tick::before { - display: inline; - } - - .delete-todo { - border: none; - background-color: transparent; - outline: none; - cursor: pointer; - } - - .delete-todo svg { - width: 30px; - height: 30px; - pointer-events: none; - } - - form { - width: 100%; - display: flex; - justify-content: space-between; - } - - input[type="text"] { - width: 100%; - padding: 10px; - border-radius: 4px; - border: 3px solid #333; - } - - /* Add this below all the other styles */ - - .empty-state { - flex-direction: column; - align-items: center; - justify-content: center; - display: none; - } - - .checklist-icon { - margin-bottom: 20px; - } - - .empty-state__title, .empty-state__description { - margin-bottom: 20px; - } - - /* Add this below the other styles */ - .todo-list:empty { - display: none; - } - - .todo-list:empty + .empty-state { - display: flex; - } - \ No newline at end of file + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +body { + font-family: "Poppins", sans-serif !important; + line-height: 1.4; +} + +.container { + width: 100%; + max-width: 500px; + margin: 0 auto; + padding-left: 10px; + padding-right: 10px; + color: #333; + height: 90vh; + margin-top: 5vh; + margin-bottom: 5vh; + overflow-y: auto; +} + +.app-title { + text-align: center; + margin-bottom: 20px; + font-size: 80px; + opacity: 0.5; +} + +svg { + width: 64px; + height: 64px; +} + +.todo-list { + list-style: none; + margin-bottom: 20px; +} + +.todo-item { + margin-bottom: 10px; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; +} + +.todo-item span { + flex-grow: 1; + margin-left: 10px; + margin-right: 10px; + font-size: 22px; +} + +.done span { + text-decoration: line-through; +} + +input[type="checkbox"] { + display: none; +} + +.tick { + width: 30px; + height: 30px; + border: 3px solid #333; + border-radius: 50%; + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.tick::before { + content: "✓"; + font-size: 20px; + display: none; +} + +.done .tick::before { + display: inline; +} + +.delete-todo { + border: none; + background-color: transparent; + outline: none; + cursor: pointer; +} + +.delete-todo svg { + width: 30px; + height: 30px; + pointer-events: none; +} + +form { + width: 100%; + display: flex; + justify-content: space-between; +} + +input[type="text"] { + width: 100%; + padding: 10px; + border-radius: 4px; + border: 3px solid #333; +} + +/* Add this below all the other styles */ + +.empty-state { + flex-direction: column; + align-items: center; + justify-content: center; + display: none; +} + +.checklist-icon { + margin-bottom: 20px; +} + +.empty-state__title, +.empty-state__description { + margin-bottom: 20px; +} + +/* Add this below the other styles */ +.todo-list:empty { + display: none; +} + +.todo-list:empty + .empty-state { + display: flex; +} diff --git a/todo/todo.html b/todo/todo.html index 44280fe..5dc0bcf 100644 --- a/todo/todo.html +++ b/todo/todo.html @@ -26,9 +26,45 @@ Todo List + +

Todo List

@@ -88,6 +124,11 @@

Add your first todo

+ +