From 99bfa67f98636d085b8ae7fc2871f3ae8e990f4f Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Tue, 15 Mar 2022 23:07:46 +0000 Subject: [PATCH 01/18] created a separate page for day of year, @nyakotey have fun designing this page --- dayofyear.html | 104 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 dayofyear.html diff --git a/dayofyear.html b/dayofyear.html new file mode 100644 index 00000000..ae381d5d --- /dev/null +++ b/dayofyear.html @@ -0,0 +1,104 @@ + + + + + + + + + Final Countdown + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +
+
+
+
+ + +
+
+
+ + + + + + + \ No newline at end of file From 1768dd2bd6b2954acd4e730c71488eb410138f85 Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Tue, 15 Mar 2022 23:13:55 +0000 Subject: [PATCH 02/18] added function to avoid null elements --- app.js | 14 +++++++++----- dayofyear.html | 1 - 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/app.js b/app.js index 14b791ee..d8f32989 100644 --- a/app.js +++ b/app.js @@ -111,6 +111,7 @@ function setMainClock() { function setMainText(countdownText) { const textDisplay = document.getElementById('countdown-text'); + if(textDisplay) textDisplay.innerText = countdownText; } @@ -151,14 +152,13 @@ function updateDisplay(counter, dayDisplay, hourDisplay, minDisplay, secDisplay) m = addZeros(m); s = addZeros(s); - dayDisplay.innerHTML = `${d}`; - hourDisplay.innerHTML = `${h}`; - minDisplay.innerHTML = `${m}`; - secDisplay.innerHTML = `${s}`; + setInnerHtmlForNotNull(dayDisplay, d); + setInnerHtmlForNotNull(hourDisplay, h); + setInnerHtmlForNotNull(minDisplay, m); + setInnerHtmlForNotNull(secDisplay, s); } - //todo: find a better way of checking for a valid date /** * Listens for a user input for date element @@ -293,6 +293,10 @@ function exportToWhatsapp() { window.open(`whatsapp://send?text= Day ${dayNum || 'rcountdown'}/365`); } +function setInnerHtmlForNotNull(element, value){ + if(element)//check for null + element.innerHTML = value; +} //show day value before animation runs if (dayCount) dayCount.innerHTML = dayClock.countDays(); diff --git a/dayofyear.html b/dayofyear.html index ae381d5d..d9ef7258 100644 --- a/dayofyear.html +++ b/dayofyear.html @@ -88,7 +88,6 @@ - From 765d7068defb753d46f1a33bcbe0b924e2c4a6a0 Mon Sep 17 00:00:00 2001 From: Nathaniel <73431750+nyakotey@users.noreply.github.com> Date: Thu, 17 Mar 2022 21:45:30 +0000 Subject: [PATCH 03/18] draft dayofyearpage design --- animbg.svg | 31 ++++ today.css | 457 +++++++++++++++++++++++++++++++++++++++++++++++++++++ today.html | 111 +++++++++++++ 3 files changed, 599 insertions(+) create mode 100644 animbg.svg create mode 100644 today.css create mode 100644 today.html diff --git a/animbg.svg b/animbg.svg new file mode 100644 index 00000000..0b9996e8 --- /dev/null +++ b/animbg.svg @@ -0,0 +1,31 @@ + \ No newline at end of file diff --git a/today.css b/today.css new file mode 100644 index 00000000..afee64b4 --- /dev/null +++ b/today.css @@ -0,0 +1,457 @@ +@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap"); +/* basic reset */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +/* mode variables */ +:root { + --color-muted: rgba(255, 255, 255, 0.15); + --color-banner: #7b68ee; + --bg-url: url("img/bg.svg"); + --bg-sidebar: var(--color-banner); + --bg-modeToggle: rgba(0, 0, 0, 0.2); + --bg-sidebar: #7b68ee; + --bg-sidebarListHover: rgba(0, 0, 0, 0.1); + --color-sidebar: white; +} +.dark { + --bg-color: #1b182c; + --color-text: white; + --bg-timer: #474650; + --share-bg-hover: var(--color-text); + --share-ico-hover: var(--color-banner); +} +.light { + --bg-color: #dbdbdb; + --color-muted: rgba(255, 255, 255, 0.3); + --color-text: rgb(0, 23, 53); + --color-text: var(--color-banner); + --bg-timer: whitesmoke; + --timer-box: 0 0 5px 1px rgba(0, 0, 0, 0.1); + --share-bg-hover: var(--color-text); + --share-ico-hover: var(--color-sidebar); +} + +body { + background: url(animbg.svg) var(--bg-color) center no-repeat fixed; + background-size: cover; + background-blend-mode: overlay; + transition: background-color 0.2s ease, color 0.2s ease; + color: var(--color-text); + font-family: "Nunito", sans-serif; + width: 100vw; + height: 100vh; + overflow: hidden; +} +main { + width: 100vw; + height: 90vh; + margin-top: 10vh; + background: url(animbg.svg); +} +.container { + width: 100vw; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 2.5em; + overflow-x: hidden; +} + +.mode-info { + background: var(--bg-color); + border-radius: 0.3rem; + color: var(--color-text); + padding: 0.2rem 0.8rem; + -webkit-animation: slide-in 0.2s ease-in forwards, + fade-out 0.5s ease 0.9s forwards; + animation: slide-in 0.2s ease-in forwards, fade-out 0.5s ease 0.9s forwards; + position: absolute; + left: 50%; + top: -10rem; + transform: translateX(-50%); + z-index: 4; +} + +.light .mode-info { + background: aliceblue; +} + +.link { + color: var(--color-text); + text-decoration: none; +} +@-webkit-keyframes slide-in { + to { + top: 2rem; + } +} +@keyframes slide-in { + to { + top: 2rem; + } +} +@-webkit-keyframes fade-out { + to { + opacity: 0; + } +} +@keyframes fade-out { + to { + opacity: 0; + } +} + +.toggleMode { + font-size: 1.4em; + right: 0.8rem; + top: 0.3rem; + width: 1.5em; + height: 1.5em; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + background: var(--bg-modeToggle); + color: #f2e7ac; + z-index: 1; + margin-right: 5vmin; +} + +.date-row { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; + width: 100%; + /* border: 0.1rem solid var(--color-banner); */ + gap: 5vmin; +} + +.day-of-year { + width: 30vmin; + padding: 0.5em 0; + border-radius: 0.1em; + color: var(--color-text); + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(7px); + border-radius: 3vmin; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +/* .day-of-year >*{ + border: 1px solid red; +} */ +.divider { + width: 5vmin; + height: 1px; + background: var(--color-text); +} +.day-text { + font-size: 0.9rem; + border-bottom: 1px solid; + width: 100%; +} +.day-count { + font-size: 3.5rem; + font-weight: bolder; +} +.year-count { + padding-top: 2vmin; + font-size: 2rem; +} +.date { + width: 50vmin; + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(7px); + display: grid; + grid-template-areas: + "month day" + "dcount time" + "year time"; + grid-template-columns: 1fr 2fr; + justify-content: center; + align-items: center; + padding: 3vmin; + border-radius: 4vmin; +} +.day-of-week { + grid-area: day; + font-size: 1rem; +} +.day { + grid-area: dcount; + font-size: 1.3rem; + font-weight: bold; + border-right: solid 1px; +} +.month { + grid-area: month; + font-size: 1rem; + border-right: solid 1px; +} +.year { + grid-area: year; + font-size: 0.6rem; + border-right: solid 1px; +} +.time { + grid-area: time; + font-size: 1rem; +} +.header { + position: fixed; + top: 0; + background: var(--color-banner); + width: 100vw; + height: 10vh; + display: flex; + align-items: center; + justify-content: space-between; + z-index: 1; +} +.logo { + display: inline-flex; + gap: 1rem; + height: 7vh; +} +.logo-name { + text-align: center; + font-size: 5vh; + color: var(--color-sidebar); + /* margin-left: 1rem; incase logo gap doesn't work on mobile browsers */ +} +.logo-ico img { + width: 7vh; + height: 7vh; + border-radius: 0.9rem; +} +.sidebar { + position: fixed; + top: 0; + left: -100%; + z-index: 3; + width: 65vmin; + height: 100vh; + background: var(--bg-sidebar); + color: var(--color-sidebar); + box-shadow: var(--timer-box); + overflow: hidden; + transition: left 0.02s ease-in; + backdrop-filter: blur(1px); +} +.sidebar-content { + display: flex; + justify-content: start; + align-items: flex-start; + flex-direction: column; + width: 100%; + height: 100%; + margin-left: 5vmin; +} +.sidebar-show { + left: 0%; +} +.sidebar-hide { + left: -100%; +} +.nav, +.sidebar-close { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.3rem 0.4rem; + border-radius: 1vmin; + border: 0.13rem solid white; +} +.sidebar-close { + right: 0%; + position: absolute; +} +.nav { + width: 6vh; + height: 6vh; + color: var(--color-sidebar); + margin-left: 5vmin; +} +.brand { + display: flex; + width: 100%; + margin: 3vmin 0 3vmin 4vmin; +} +.brand-name { + align-self: center; + font-size: 1.3em; + margin-left: 2vmin; +} +.brand-logo img { + width: 13vmin; + height: 13vmin; + border-radius: 5vmin; +} +.opt-group { + color: rgba(255, 255, 255, 0.575); + font-size: 0.7rem; + align-self: center; + width: 90%; + margin: 5vmin 0 1vmin 0vmin; +} +hr { + color: rgba(255, 255, 255, 0.2); + width: 85%; +} +.sidebar-list { + width: 90%; +} +.sidebar-list-items { + padding: 2.5vmin 0vmin 2.5vmin 4vmin; + border-radius: 2.5vmin; + margin: 0.5rem auto; +} +.sidebar-list-items:hover { + background: var(--bg-sidebarListHover); +} +.pick-color { + justify-content: center; + align-items: flex-end; + gap: 0.4rem; + display: none; + width: 90%; + margin: 0.7rem; +} +.pick-color-ico { + width: 1.8rem; + height: 1.8rem; + border-radius: 50%; + box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15); + border: white solid 2px; +} +.pick-color-ico:nth-child(1) { + background: #fe2164; + outline: #fe2164 solid 2px; +} +.pick-color-ico:nth-child(6) { + background: #7b68ee; + outline: #7b68ee solid 2px; +} +.pick-color-ico:nth-child(4) { + background: #1cb65d; + outline: #1cb65d solid 2px; +} +.pick-color-ico:nth-child(5) { + background: #2f8bfc; + outline: #2f8bfc solid 2px; +} +.pick-color-ico:nth-child(3) { + background: #ffc000; + outline: #ffc000 solid 2px; +} +.pick-color-ico:nth-child(2) { + background: #e685b5; + outline: #e685b5 solid 2px; +} +.show-color { + display: inline-flex; +} + +.new-item { + position: fixed; + display: flex; + align-items: center; + justify-content: center; + width: 3.5rem; + height: 3.5rem; + border-radius: 50%; + right: 10vmin; + bottom: 10vmin; + background-color: white; + box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1); + z-index: 2; +} +.new-item i { + color: var(--color-banner); +} +/* desktop */ +@media screen and (min-width: 750px) and (orientation: landscape) { + body { + overflow-y: hidden; + } + .container { + gap: 4em; + } + .banner { + width: 21em; + } + .clock-row { + font-size: 25vmin; + flex-direction: row; + gap: 2rem; + } + .clock-row::after, + .clock-row::before { + width: 1.8em; + height: 1.8em; + } + .controls-row { + flex-flow: row nowrap; + gap: 4em; + } + /* #sendWhatsappButton{ + display: none; + } */ +} +/* mobile and small screens */ +@media screen and (max-width: 427px) { + .container { + gap: 1.6em; + } + .banner-row { + font-size: 1.3rem; + } + .logo-name { + display: none; + } + .timer-text { + font-size: 0.75rem; + } + .sidebar { + width: 75vmin; + } + .new-item { + bottom: 10vh; + } +} +.share-row { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + gap: 1vmin; +} +.sm { + width: 6vmin; + height: 6vmin; + border-radius: 50%; + border: solid var(--share-bg-hover) 1px; + display: flex; + justify-content: center; + align-items: center; + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(5px); +} +.sm:hover { + background: var(--share-bg-hover); + color: var(--share-ico-hover); + transform: scale(1.2); + transition: transform 0.45s ease; +} diff --git a/today.html b/today.html new file mode 100644 index 00000000..65dbe211 --- /dev/null +++ b/today.html @@ -0,0 +1,111 @@ + + + + + + + + + Final Countdown + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +
+
+
+
+
+
+
DAY
+
X
+
+
365
+
+
+
Monday
+
11
+
Mar
+
2022
+
11:00 pm
+
+
+ +
+
+ + + + + + + + \ No newline at end of file From ebbfc419bef78d98f3672521d3a541aabebebeed Mon Sep 17 00:00:00 2001 From: Nathaniel <73431750+nyakotey@users.noreply.github.com> Date: Fri, 18 Mar 2022 09:02:53 +0000 Subject: [PATCH 04/18] improve responsiveness of today page --- today.css | 100 ++++++++++++++++++++++-------------------------------- 1 file changed, 40 insertions(+), 60 deletions(-) diff --git a/today.css b/today.css index afee64b4..6de17a99 100644 --- a/today.css +++ b/today.css @@ -137,7 +137,7 @@ main { } .day-of-year { - width: 30vmin; + width: 33vmin; padding: 0.5em 0; border-radius: 0.1em; color: var(--color-text); @@ -149,12 +149,9 @@ main { align-items: center; flex-direction: column; } -/* .day-of-year >*{ - border: 1px solid red; -} */ .divider { - width: 5vmin; - height: 1px; + width: 6vmin; + height: 0.75vmin; background: var(--color-text); } .day-text { @@ -171,7 +168,7 @@ main { font-size: 2rem; } .date { - width: 50vmin; + width: 53vmin; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(7px); display: grid; @@ -209,6 +206,31 @@ main { grid-area: time; font-size: 1rem; } +.share-row { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + gap: 1vmin; +} +.sm { + width: 6vmin; + height: 6vmin; + border-radius: 50%; + border: solid var(--share-bg-hover) 1px; + display: flex; + justify-content: center; + align-items: center; + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(5px); + font-size: 3vmin; +} +.sm:hover { + background: var(--share-bg-hover); + color: var(--share-ico-hover); + transform: scale(1.2); + transition: transform 0.45s ease; +} .header { position: fixed; top: 0; @@ -383,75 +405,33 @@ hr { } /* desktop */ @media screen and (min-width: 750px) and (orientation: landscape) { - body { - overflow-y: hidden; - } .container { gap: 4em; } - .banner { - width: 21em; - } - .clock-row { - font-size: 25vmin; - flex-direction: row; - gap: 2rem; - } - .clock-row::after, - .clock-row::before { - width: 1.8em; - height: 1.8em; - } - .controls-row { - flex-flow: row nowrap; - gap: 4em; - } - /* #sendWhatsappButton{ - display: none; - } */ } /* mobile and small screens */ @media screen and (max-width: 427px) { .container { gap: 1.6em; } - .banner-row { - font-size: 1.3rem; - } .logo-name { display: none; } - .timer-text { - font-size: 0.75rem; - } .sidebar { width: 75vmin; } .new-item { bottom: 10vh; } -} -.share-row { - width: 100%; - display: flex; - justify-content: center; - align-items: center; - gap: 1vmin; -} -.sm { - width: 6vmin; - height: 6vmin; - border-radius: 50%; - border: solid var(--share-bg-hover) 1px; - display: flex; - justify-content: center; - align-items: center; - background: rgba(255, 255, 255, 0.2); - backdrop-filter: blur(5px); -} -.sm:hover { - background: var(--share-bg-hover); - color: var(--share-ico-hover); - transform: scale(1.2); - transition: transform 0.45s ease; + .day-of-year { + width: 40vmin; + } + .date { + width: 60vmin; + } + .sm { + width: 9vmin; + height: 9vmin; + font-size: 4.5vmin; + } } From 53db40fe98f201b2daf270d7a9eb0634a974a81c Mon Sep 17 00:00:00 2001 From: Nathaniel <73431750+nyakotey@users.noreply.github.com> Date: Fri, 18 Mar 2022 09:06:11 +0000 Subject: [PATCH 05/18] remove unimplemented social media sites --- today.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/today.html b/today.html index 65dbe211..61be59a2 100644 --- a/today.html +++ b/today.html @@ -95,8 +95,6 @@ title="share to Whatsapp"> -
-
From 113415775ea7d11f454a157443e11d770ac482b7 Mon Sep 17 00:00:00 2001 From: Nathaniel <73431750+nyakotey@users.noreply.github.com> Date: Fri, 18 Mar 2022 13:59:44 +0000 Subject: [PATCH 06/18] use new background svg --- circle-anim-bg.svg | 72 ++++++++++++++++++++++++++++++++++++++++++++++ today.css | 5 ++-- 2 files changed, 75 insertions(+), 2 deletions(-) create mode 100644 circle-anim-bg.svg diff --git a/circle-anim-bg.svg b/circle-anim-bg.svg new file mode 100644 index 00000000..e862772b --- /dev/null +++ b/circle-anim-bg.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/today.css b/today.css index 6de17a99..346101d0 100644 --- a/today.css +++ b/today.css @@ -38,7 +38,7 @@ } body { - background: url(animbg.svg) var(--bg-color) center no-repeat fixed; + background: var(--bg-url) var(--bg-color) center no-repeat fixed; background-size: cover; background-blend-mode: overlay; transition: background-color 0.2s ease, color 0.2s ease; @@ -52,7 +52,8 @@ main { width: 100vw; height: 90vh; margin-top: 10vh; - background: url(animbg.svg); + background: url(circle-anim-bg.svg); + background-size: contain; } .container { width: 100vw; From d7b33cad906bb3211e4ccdea4c78fca9f7b0a064 Mon Sep 17 00:00:00 2001 From: Nathaniel <73431750+nyakotey@users.noreply.github.com> Date: Fri, 18 Mar 2022 18:33:27 +0000 Subject: [PATCH 07/18] reduce blur --- today.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/today.css b/today.css index 346101d0..0baf0e0e 100644 --- a/today.css +++ b/today.css @@ -133,7 +133,6 @@ main { flex-direction: column; text-align: center; width: 100%; - /* border: 0.1rem solid var(--color-banner); */ gap: 5vmin; } @@ -143,7 +142,7 @@ main { border-radius: 0.1em; color: var(--color-text); background: rgba(255, 255, 255, 0.2); - backdrop-filter: blur(7px); + backdrop-filter: blur(5px); border-radius: 3vmin; display: flex; justify-content: center; @@ -171,7 +170,7 @@ main { .date { width: 53vmin; background: rgba(255, 255, 255, 0.2); - backdrop-filter: blur(7px); + backdrop-filter: blur(5px); display: grid; grid-template-areas: "month day" From 2f51d1961577abc06d8e2823878c61b94e405c3a Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Mon, 21 Mar 2022 23:03:46 +0000 Subject: [PATCH 08/18] add updated date to day of year page --- today.html | 11 ++++++----- today.js | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 5 deletions(-) create mode 100644 today.js diff --git a/today.html b/today.html index 61be59a2..f1f9857d 100644 --- a/today.html +++ b/today.html @@ -81,11 +81,11 @@
365
-
Monday
-
11
-
Mar
-
2022
-
11:00 pm
+
Monday
+
11
+
Mar
+
2022
+
11:00 pm
@@ -99,12 +98,10 @@
- - - - - - + + + + \ No newline at end of file diff --git a/animbg.svg b/img/animbg.svg similarity index 100% rename from animbg.svg rename to img/animbg.svg diff --git a/circle-anim-bg.svg b/img/circle-anim-bg.svg similarity index 100% rename from circle-anim-bg.svg rename to img/circle-anim-bg.svg diff --git a/today.js b/js/today.js similarity index 100% rename from today.js rename to js/today.js From 83db6a6462a8db7f457ceeee287a4664edcb658f Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Wed, 30 Mar 2022 18:02:13 +0000 Subject: [PATCH 10/18] add error.js to index.html --- html/today.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html/today.html b/html/today.html index bb8ebaf3..f6fb84d7 100644 --- a/html/today.html +++ b/html/today.html @@ -98,7 +98,7 @@ - + From baaf82a3cc8d02d173c5a1e9f2d315debb46057d Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Thu, 31 Mar 2022 13:03:13 +0000 Subject: [PATCH 11/18] add interval refresh to today page --- js/today.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/today.js b/js/today.js index e39618ca..58b4c261 100644 --- a/js/today.js +++ b/js/today.js @@ -31,4 +31,5 @@ function setDomElements(){ } -getAndSetDomElements() \ No newline at end of file +getAndSetDomElements(); +let dayIntervaltimer = setInterval(setDomElements, 1000); \ No newline at end of file From b533a21deb4c3a21723c0b0cf14348c22d64b301 Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Thu, 31 Mar 2022 13:03:50 +0000 Subject: [PATCH 12/18] corrected manifest.json path on today.html page --- html/today.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html/today.html b/html/today.html index f6fb84d7..7f7c1eb5 100644 --- a/html/today.html +++ b/html/today.html @@ -13,7 +13,7 @@ - + From 6211b18f297889dd96e628fdcb8173d2c99ec914 Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Thu, 21 Apr 2022 00:11:57 +0000 Subject: [PATCH 13/18] comment out service worker --- app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app.js b/app.js index 77b1f035..e8db5465 100644 --- a/app.js +++ b/app.js @@ -226,7 +226,7 @@ addWhatappEventHandler(); } // service worker - +/* if('serviceWorker' in navigator){ window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') @@ -236,4 +236,4 @@ if('serviceWorker' in navigator){ .catch((err)=> console.log('Service worker not registered', err)); }); -} \ No newline at end of file +}*/ \ No newline at end of file From 7b23c2841d895e6d67b7f376a3fbb01b4708f310 Mon Sep 17 00:00:00 2001 From: Nathaniel <73431750+nyakotey@users.noreply.github.com> Date: Thu, 21 Apr 2022 20:00:16 +0000 Subject: [PATCH 14/18] add today page to sidebar navigation --- css/today.css | 25 +++++++++++-------------- html/authors.html | 3 +++ html/countdown-list.html | 3 +++ html/today.html | 24 ++++++++++++++---------- index.html | 14 +++----------- js/sidebar.js | 3 ++- 6 files changed, 36 insertions(+), 36 deletions(-) diff --git a/css/today.css b/css/today.css index 1046f756..b1f4082b 100644 --- a/css/today.css +++ b/css/today.css @@ -57,12 +57,10 @@ main { } .container { width: 100vw; - height: 100%; + height: 90vh; display: flex; align-items: center; justify-content: center; - flex-direction: column; - gap: 2.5em; overflow-x: hidden; } @@ -148,6 +146,7 @@ main { justify-content: center; align-items: center; flex-direction: column; + position: relative; } .divider { width: 6vmin; @@ -207,11 +206,15 @@ main { font-size: 1rem; } .share-row { - width: 100%; + width: 15vmin; display: flex; justify-content: center; align-items: center; - gap: 1vmin; + gap: 2vmin; + flex-direction: column; + position: absolute; + right: 0%; + transform: translateX(80%); } .sm { width: 6vmin; @@ -390,17 +393,8 @@ hr { display: inline-flex; } -/* desktop */ -@media screen and (min-width: 750px) and (orientation: landscape) { - .container { - gap: 4em; - } -} /* mobile and small screens */ @media screen and (max-width: 427px) { - .container { - gap: 1.6em; - } .logo-name { display: none; } @@ -410,6 +404,9 @@ hr { .day-of-year { width: 40vmin; } + .share-row{ + right: -6%; + } .date { width: 60vmin; } diff --git a/html/authors.html b/html/authors.html index e349777b..bd480b75 100644 --- a/html/authors.html +++ b/html/authors.html @@ -53,6 +53,9 @@ +
+    Today +
   Contact Us
diff --git a/html/countdown-list.html b/html/countdown-list.html index e4543bec..84676ded 100644 --- a/html/countdown-list.html +++ b/html/countdown-list.html @@ -56,6 +56,9 @@ +
+    Today +
   Contact Us
diff --git a/html/today.html b/html/today.html index 4bde03ad..dcac72a0 100644 --- a/html/today.html +++ b/html/today.html @@ -54,7 +54,10 @@
-    Contact Us +    Today +
+
+    About
@@ -79,6 +82,16 @@
X
365
+ +
Monday
@@ -88,15 +101,6 @@
11:00 pm
- diff --git a/index.html b/index.html index 034f7d75..5918fb08 100644 --- a/index.html +++ b/index.html @@ -59,6 +59,9 @@ +
+    Today +
   Contact Us
@@ -81,17 +84,6 @@
diff --git a/js/sidebar.js b/js/sidebar.js index 31dcc77e..e4544935 100644 --- a/js/sidebar.js +++ b/js/sidebar.js @@ -15,7 +15,8 @@ sidebarItems[1].addEventListener("click", () => ); sidebarItems[2].addEventListener("click", openBgPicker); sidebarItems[3].addEventListener("click", openColorPicker); -sidebarItems[4].addEventListener("click", () => setLink("../html/authors.html")); +sidebarItems[4].addEventListener("click", () => setLink("../html/today.html")); +sidebarItems[5].addEventListener("click", () => setLink("../html/authors.html")); function setTheme(event) { let prevTheme = getComputedStyle(document.body).getPropertyValue( From 1ce391cba45205d1d1802d29374529163336de55 Mon Sep 17 00:00:00 2001 From: Nathaniel <73431750+nyakotey@users.noreply.github.com> Date: Fri, 22 Apr 2022 06:37:07 +0000 Subject: [PATCH 15/18] add 'copy to clipboard' functionality --- html/today.html | 2 +- js/today.js | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/html/today.html b/html/today.html index dcac72a0..710cef27 100644 --- a/html/today.html +++ b/html/today.html @@ -90,7 +90,7 @@ title="share to Whatsapp"> -
+
diff --git a/js/today.js b/js/today.js index 58b4c261..e87d7f43 100644 --- a/js/today.js +++ b/js/today.js @@ -32,4 +32,11 @@ function setDomElements(){ getAndSetDomElements(); -let dayIntervaltimer = setInterval(setDomElements, 1000); \ No newline at end of file +let dayIntervaltimer = setInterval(setDomElements, 1000); + +async function copyDOY() { + await navigator.clipboard.writeText(`Day ${ dayCount.innerText ||'rcountdown'}/365`); + notifyUser("Copied to clipboard"); + // console.log(await navigator.clipboard.readText()); +} +$(".copy-link")[0].addEventListener("click", copyDOY); \ No newline at end of file From 2bce303ea1fc92daff10230c6b0ba8bcad25f51b Mon Sep 17 00:00:00 2001 From: Nathaniel <73431750+nyakotey@users.noreply.github.com> Date: Fri, 22 Apr 2022 07:52:57 +0000 Subject: [PATCH 16/18] change "copy to clipboard" icon --- html/today.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html/today.html b/html/today.html index 710cef27..5b5a10f8 100644 --- a/html/today.html +++ b/html/today.html @@ -90,7 +90,7 @@ title="share to Whatsapp">
-
+
From 3eec6754656f47d7c0ad2ee4c933571e8dc2b050 Mon Sep 17 00:00:00 2001 From: Nathaniel <73431750+nyakotey@users.noreply.github.com> Date: Fri, 22 Apr 2022 08:57:23 +0000 Subject: [PATCH 17/18] increase share icon size --- css/today.css | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/css/today.css b/css/today.css index b1f4082b..f9fb2158 100644 --- a/css/today.css +++ b/css/today.css @@ -213,12 +213,12 @@ main { gap: 2vmin; flex-direction: column; position: absolute; - right: 0%; + right: -5%; transform: translateX(80%); } .sm { - width: 6vmin; - height: 6vmin; + width: 7vmin; + height: 7vmin; border-radius: 50%; border: solid var(--share-bg-hover) 1px; display: flex; @@ -226,7 +226,7 @@ main { align-items: center; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); - font-size: 3vmin; + font-size: 4.5vmin; } .sm:hover { background: var(--share-bg-hover); @@ -404,15 +404,16 @@ hr { .day-of-year { width: 40vmin; } - .share-row{ - right: -6%; - } .date { width: 60vmin; } + .share-row{ + right: -10%; + gap: 3vmin; + } .sm { - width: 9vmin; - height: 9vmin; - font-size: 4.5vmin; + width: 11vmin; + height: 11vmin; + font-size: 6.5vmin; } } From dde4ff7a165d21753f9c23e595554fafa959fd7d Mon Sep 17 00:00:00 2001 From: Nathaniel <73431750+nyakotey@users.noreply.github.com> Date: Mon, 25 Apr 2022 21:15:03 +0000 Subject: [PATCH 18/18] change about page icon in sidebar activate service worker --- app.js | 4 ++-- html/about.html | 2 +- html/countdown-list.html | 2 +- html/today.html | 2 +- index.html | 2 +- js/sidebar.js | 2 +- sw.js | 4 ++-- 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/app.js b/app.js index e8db5465..77b1f035 100644 --- a/app.js +++ b/app.js @@ -226,7 +226,7 @@ addWhatappEventHandler(); } // service worker -/* + if('serviceWorker' in navigator){ window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') @@ -236,4 +236,4 @@ if('serviceWorker' in navigator){ .catch((err)=> console.log('Service worker not registered', err)); }); -}*/ \ No newline at end of file +} \ No newline at end of file diff --git a/html/about.html b/html/about.html index 7f636e3d..b4be0ae5 100644 --- a/html/about.html +++ b/html/about.html @@ -61,7 +61,7 @@    Today
-    About +    About
diff --git a/html/countdown-list.html b/html/countdown-list.html index 7af28c3a..2ac6e23e 100644 --- a/html/countdown-list.html +++ b/html/countdown-list.html @@ -60,7 +60,7 @@    Today
-    About +    About
diff --git a/html/today.html b/html/today.html index 5b5a10f8..11917d1a 100644 --- a/html/today.html +++ b/html/today.html @@ -57,7 +57,7 @@    Today
-    About +    About
diff --git a/index.html b/index.html index 88233c7b..6df5af53 100644 --- a/index.html +++ b/index.html @@ -63,7 +63,7 @@    Today
-    About +    About
diff --git a/js/sidebar.js b/js/sidebar.js index fe1bf659..d24f02ad 100644 --- a/js/sidebar.js +++ b/js/sidebar.js @@ -16,7 +16,7 @@ sidebarItems[1].addEventListener("click", () => sidebarItems[2].addEventListener("click", openBgPicker); sidebarItems[3].addEventListener("click", openColorPicker); sidebarItems[4].addEventListener("click", () => setLink("../html/today.html")); -sidebarItems[4].addEventListener("click", () => setLink("../html/about.html")); +sidebarItems[5].addEventListener("click", () => setLink("../html/about.html")); function setTheme(event) { let prevTheme = getComputedStyle(document.body).getPropertyValue( diff --git a/sw.js b/sw.js index aecd6c3f..87519257 100644 --- a/sw.js +++ b/sw.js @@ -1,7 +1,7 @@ // #5 -const staticCacheName = 'site-static-v35'; -const dynamicCache = 'site-dynamic-v35'; +const staticCacheName = 'site-static-v36'; +const dynamicCache = 'site-dynamic-v36'; const dynamicCacheSize = 30;