diff --git a/css/today.css b/css/today.css new file mode 100644 index 00000000..f9fb2158 --- /dev/null +++ b/css/today.css @@ -0,0 +1,419 @@ +@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: 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; + 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("../img/circle-anim-bg.svg"); + background-size: contain; +} +.container { + width: 100vw; + height: 90vh; + display: flex; + align-items: center; + justify-content: center; + 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 2s ease 0.9s forwards; + animation: slide-in 0.2s ease-in forwards, fade-out 2s 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%; + gap: 5vmin; +} + +.day-of-year { + width: 33vmin; + padding: 0.5em 0; + border-radius: 0.1em; + color: var(--color-text); + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(5px); + border-radius: 3vmin; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; +} +.divider { + width: 6vmin; + height: 0.75vmin; + 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: 53vmin; + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(5px); + 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; +} +.share-row { + width: 15vmin; + display: flex; + justify-content: center; + align-items: center; + gap: 2vmin; + flex-direction: column; + position: absolute; + right: -5%; + transform: translateX(80%); +} +.sm { + width: 7vmin; + height: 7vmin; + 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: 4.5vmin; +} +.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; + 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; +} +.pick-color-ico:nth-child(7){ + background: #1f1f1f; + outline: #1f1f1f solid 2px; + } +.show-color { + display: inline-flex; +} + +/* mobile and small screens */ +@media screen and (max-width: 427px) { + .logo-name { + display: none; + } + .sidebar { + width: 75vmin; + } + .day-of-year { + width: 40vmin; + } + .date { + width: 60vmin; + } + .share-row{ + right: -10%; + gap: 3vmin; + } + .sm { + width: 11vmin; + height: 11vmin; + font-size: 6.5vmin; + } +} diff --git a/html/about.html b/html/about.html index dc953599..b4be0ae5 100644 --- a/html/about.html +++ b/html/about.html @@ -58,7 +58,10 @@
-    About +    Today +
+
+    About
diff --git a/html/countdown-list.html b/html/countdown-list.html index 4f56f7dc..2ac6e23e 100644 --- a/html/countdown-list.html +++ b/html/countdown-list.html @@ -57,7 +57,10 @@
-    About +    Today +
+
+    About
diff --git a/html/today.html b/html/today.html new file mode 100644 index 00000000..11917d1a --- /dev/null +++ b/html/today.html @@ -0,0 +1,112 @@ + + + + + + + + + Final Countdown + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +
+
+
+
+
+
+
DAY
+
X
+
+
365
+ + +
+
+
Monday
+
11
+
Mar
+
2022
+
11:00 pm
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/img/animbg.svg b/img/animbg.svg new file mode 100644 index 00000000..0b9996e8 --- /dev/null +++ b/img/animbg.svg @@ -0,0 +1,31 @@ + \ No newline at end of file diff --git a/img/circle-anim-bg.svg b/img/circle-anim-bg.svg new file mode 100644 index 00000000..e862772b --- /dev/null +++ b/img/circle-anim-bg.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 1ac649ce..6df5af53 100644 --- a/index.html +++ b/index.html @@ -60,7 +60,10 @@
-    About +    Today +
+
+    About
@@ -81,17 +84,6 @@
diff --git a/js/sidebar.js b/js/sidebar.js index 7c6f8a2c..d24f02ad 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/about.html")); +sidebarItems[4].addEventListener("click", () => setLink("../html/today.html")); +sidebarItems[5].addEventListener("click", () => setLink("../html/about.html")); function setTheme(event) { let prevTheme = getComputedStyle(document.body).getPropertyValue( diff --git a/js/today.js b/js/today.js new file mode 100644 index 00000000..e87d7f43 --- /dev/null +++ b/js/today.js @@ -0,0 +1,42 @@ +let today = new Date(); +let day, month, year, time, dayOfWeek; + +const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; +const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; + +function getAndSetDomElements(){ +year =document.getElementById('year'); +month =document.getElementById('month'); +day =document.getElementById('dayOfMonth'); +dayOfWeek =document.getElementById('dayOfWeek'); +time =document.getElementById('time'); + +setDomElements(); +} + +function setInnerHtmlForNotNull(element, value){ + if(element)//check for null + element.innerHTML = value; +} +function setDomElements(){ + setInnerHtmlForNotNull(day, today.getDate()) + setInnerHtmlForNotNull(month, months[today.getMonth()] ) + setInnerHtmlForNotNull(year, today.getFullYear()) + setInnerHtmlForNotNull(dayOfWeek, days[today.getDay()] ) + setInnerHtmlForNotNull(time, today.toLocaleString("en-US", { + hour: '2-digit', + minute: '2-digit', + hour12: true + })) +} + + +getAndSetDomElements(); +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 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;