From c8dc324745d5e1251767d78f8aefd51a1444cb34 Mon Sep 17 00:00:00 2001 From: Anish Neupane Date: Tue, 10 Sep 2024 02:34:38 +0545 Subject: [PATCH 1/2] Updated Navbar for better responsiveness --- assets/navbar/closeMenu.svg | 1 + assets/navbar/hamMenu.svg | 1 + css/output.css | 438 +++++++++++++++++++----------------- index.html | 6 +- js/navbar.js | 95 +++++--- 5 files changed, 299 insertions(+), 242 deletions(-) create mode 100644 assets/navbar/closeMenu.svg create mode 100644 assets/navbar/hamMenu.svg diff --git a/assets/navbar/closeMenu.svg b/assets/navbar/closeMenu.svg new file mode 100644 index 0000000..2c9f443 --- /dev/null +++ b/assets/navbar/closeMenu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/navbar/hamMenu.svg b/assets/navbar/hamMenu.svg new file mode 100644 index 0000000..48f2e3e --- /dev/null +++ b/assets/navbar/hamMenu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/output.css b/css/output.css index 5a67971..0f0c218 100644 --- a/css/output.css +++ b/css/output.css @@ -554,40 +554,6 @@ video { --tw-contain-style: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - .bg-grid { background-color: #f6f6ff; background-image: linear-gradient( @@ -600,6 +566,10 @@ video { background-size: 50px 50px; } +.fixed { + position: fixed; +} + .absolute { position: absolute; } @@ -608,6 +578,10 @@ video { position: relative; } +.-right-full { + right: -100%; +} + .-top-3 { top: -0.75rem; } @@ -624,10 +598,18 @@ video { left: 1.25rem; } +.right-0 { + right: 0px; +} + .top-1\/2 { top: 50%; } +.top-14 { + top: 3.5rem; +} + .z-0 { z-index: 0; } @@ -636,6 +618,10 @@ video { z-index: 10; } +.z-50 { + z-index: 50; +} + .col-start-6 { grid-column-start: 6; } @@ -672,11 +658,6 @@ video { margin-bottom: 1.5rem; } -.my-auto { - margin-top: auto; - margin-bottom: auto; -} - .-mt-3 { margin-top: -0.75rem; } @@ -685,10 +666,6 @@ video { margin-bottom: 0.5rem; } -.mb-4 { - margin-bottom: 1rem; -} - .mb-8 { margin-bottom: 2rem; } @@ -697,10 +674,6 @@ video { margin-left: 0.25rem; } -.ml-auto { - margin-left: auto; -} - .mr-1 { margin-right: 0.25rem; } @@ -713,14 +686,6 @@ video { margin-right: 1rem; } -.mr-auto { - margin-right: auto; -} - -.mt-10 { - margin-top: 2.5rem; -} - .mt-2 { margin-top: 0.5rem; } @@ -729,14 +694,6 @@ video { margin-top: 1rem; } -.mt-7 { - margin-top: 1.75rem; -} - -.mt-8 { - margin-top: 2rem; -} - .box-border { box-sizing: border-box; } @@ -761,10 +718,18 @@ video { display: none; } +.h-11 { + height: 2.75rem; +} + .h-12 { height: 3rem; } +.h-14 { + height: 3.5rem; +} + .h-24 { height: 6rem; } @@ -785,6 +750,10 @@ video { height: 1.5rem; } +.h-8 { + height: 2rem; +} + .h-\[26rem\] { height: 26rem; } @@ -801,10 +770,6 @@ video { height: 38rem; } -.h-\[4\.75rem\] { - height: 4.75rem; -} - .h-\[40rem\] { height: 40rem; } @@ -833,10 +798,18 @@ video { height: 100%; } +.h-screen { + height: 100vh; +} + .max-h-screen { max-height: 100vh; } +.min-h-\[calc\(100vh-7\.5rem\)\] { + min-height: calc(100vh - 7.5rem); +} + .w-1 { width: 0.25rem; } @@ -845,10 +818,6 @@ video { width: 3rem; } -.w-16 { - width: 4rem; -} - .w-2 { width: 0.5rem; } @@ -893,24 +862,29 @@ video { width: 52%; } -.w-\[66rem\] { - width: 66rem; +.w-\[60vw\] { + width: 60vw; } -.w-auto { - width: auto; +.w-\[66rem\] { + width: 66rem; } .w-full { width: 100%; } +.w-auto { + width: auto; +} + .max-w-full { max-width: 100%; } -.max-w-md { - max-width: 28rem; +.-rotate-180 { + --tw-rotate: -180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform { @@ -921,10 +895,6 @@ video { list-style-type: none; } -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} - .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -973,8 +943,8 @@ video { justify-content: space-between; } -.gap-10 { - gap: 2.5rem; +.gap-5 { + gap: 1.25rem; } .gap-56 { @@ -989,12 +959,6 @@ video { gap: 2rem; } -.space-x-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); -} - .divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); @@ -1006,12 +970,12 @@ video { border-color: rgb(243 244 246 / var(--tw-divide-opacity)); } -.whitespace-nowrap { - white-space: nowrap; +.overflow-hidden { + overflow: hidden; } -.rounded { - border-radius: 0.25rem; +.whitespace-nowrap { + white-space: nowrap; } .rounded-\[1\.71rem\] { @@ -1026,10 +990,6 @@ video { border-radius: 9999px; } -.rounded-lg { - border-radius: 0.5rem; -} - .rounded-md { border-radius: 0.375rem; } @@ -1099,24 +1059,9 @@ video { background-color: rgb(255 221 80 / var(--tw-bg-opacity)); } -.bg-blue-600 { - --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); -} - -.bg-gray-800 { - --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); -} - -.bg-gray-900 { +.bg-\[\#f6f6ff\] { --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); -} - -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(246 246 255 / var(--tw-bg-opacity)); } .bg-hero-pattern { @@ -1147,18 +1092,8 @@ video { padding: 1rem; } -.p-6 { - padding: 1.5rem; -} - -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; +.p-8 { + padding: 2rem; } .px-8 { @@ -1166,11 +1101,6 @@ video { padding-right: 2rem; } -.px-\[1\%\] { - padding-left: 1%; - padding-right: 1%; -} - .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; @@ -1186,14 +1116,6 @@ video { padding-bottom: 0.5rem; } -.pl-3 { - padding-left: 0.75rem; -} - -.pr-4 { - padding-right: 1rem; -} - .pt-0 { padding-top: 0px; } @@ -1338,12 +1260,6 @@ video { opacity: 0.9; } -.shadow { - --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); @@ -1356,10 +1272,6 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.outline { - outline-style: solid; -} - .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -1374,10 +1286,6 @@ video { transition-duration: 150ms; } -.duration-200 { - transition-duration: 200ms; -} - @font-face { font-family: "Bahnschrift"; @@ -1397,10 +1305,6 @@ video { border-width: 2px; } -.hover\:border-b-2:hover { - border-bottom-width: 2px; -} - .hover\:border-solid:hover { border-style: solid; } @@ -1415,11 +1319,6 @@ video { border-color: rgb(255 221 80 / var(--tw-border-opacity)); } -.hover\:bg-blue-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(29 78 216 / var(--tw-bg-opacity)); -} - .hover\:bg-gray-100:hover { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); @@ -1434,28 +1333,6 @@ video { color: rgb(0 0 0 / var(--tw-text-opacity)); } -.\*\:hover\:cursor-pointer:hover > * { - cursor: pointer; -} - -.group\/about:hover .group-hover\/about\:block { - display: block; -} - -.group\/activities:hover .group-hover\/activities\:block { - display: block; -} - -.group\/about:hover .group-hover\/about\:-rotate-180 { - --tw-rotate: -180deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group\/activities:hover .group-hover\/activities\:-rotate-180 { - --tw-rotate: -180deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .group:hover .group-hover\:text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); @@ -1466,13 +1343,11 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -@media (min-width: 640px) { - .sm\:gap-4 { - gap: 1rem; +@media (min-width: 768px) { + .md\:top-\[4\.75rem\] { + top: 4.75rem; } -} -@media (min-width: 768px) { .md\:col-start-1 { grid-column-start: 1; } @@ -1501,54 +1376,199 @@ video { display: contents; } + .md\:h-14 { + height: 3.5rem; + } + + .md\:h-\[4\.75rem\] { + height: 4.75rem; + } + .md\:w-auto { width: auto; } - .md\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); + .md\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; } +} - .md\:gap-6 { - gap: 1.5rem; +@media (min-width: 1024px) { + .lg\:static { + position: static; } - .md\:border-0 { - border-width: 0px; + .lg\:absolute { + position: absolute; } - .md\:p-0 { - padding: 0px; + .lg\:top-0 { + top: 0px; } - .md\:px-\[5\%\] { - padding-left: 5%; - padding-right: 5%; + .lg\:my-auto { + margin-top: auto; + margin-bottom: auto; } - .md\:hover\:bg-transparent:hover { - background-color: transparent; + .lg\:mb-4 { + margin-bottom: 1rem; + } + + .lg\:mt-7 { + margin-top: 1.75rem; + } + + .lg\:flex { + display: flex; + } + + .lg\:hidden { + display: none; + } + + .lg\:h-\[4\.75rem\] { + height: 4.75rem; + } + + .lg\:w-44 { + width: 11rem; + } + + .lg\:w-auto { + width: auto; + } + + .lg\:flex-row { + flex-direction: row; + } + + .lg\:items-center { + align-items: center; } -} -@media (min-width: 1024px) { .lg\:gap-8 { gap: 2rem; } - .lg\:px-\[10\%\] { - padding-left: 10%; - padding-right: 10%; + .lg\:rounded { + border-radius: 0.25rem; + } + + .lg\:border-0 { + border-width: 0px; + } + + .lg\:bg-transparent { + background-color: transparent; + } + + .lg\:bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + } + + .lg\:p-0 { + padding: 0px; + } + + .lg\:px-4 { + padding-left: 1rem; + padding-right: 1rem; + } + + .lg\:px-\[7\.5\%\] { + padding-left: 7.5%; + padding-right: 7.5%; + } + + .lg\:py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + + .lg\:pl-3 { + padding-left: 0.75rem; + } + + .lg\:pr-4 { + padding-right: 1rem; + } + + .lg\:text-sm { + font-size: 0.875rem; + line-height: 1.25rem; } .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } + + .lg\:font-semibold { + font-weight: 600; + } + + .lg\:shadow { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .lg\:shadow-none { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .lg\:hover\:cursor-pointer:hover { + cursor: pointer; + } + + .lg\:hover\:border-b-2:hover { + border-bottom-width: 2px; + } + + .lg\:hover\:bg-transparent:hover { + background-color: transparent; + } + + .lg\:\*\:hover\:cursor-pointer:hover > * { + cursor: pointer; + } + + .group\/about:hover .lg\:group-hover\/about\:block { + display: block; + } + + .group\/activities:hover .lg\:group-hover\/activities\:block { + display: block; + } + + .group\/about:hover .lg\:group-hover\/about\:-rotate-180 { + --tw-rotate: -180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + + .group\/activities:hover .lg\:group-hover\/activities\:-rotate-180 { + --tw-rotate: -180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + + .group\/about:active .lg\:group-active\/about\:-rotate-180 { + --tw-rotate: -180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } } @media (min-width: 1280px) { - .xl\:gap-20 { - gap: 5rem; + .xl\:gap-10 { + gap: 2.5rem; + } + + .xl\:px-\[10\%\] { + padding-left: 10%; + padding-right: 10%; } } diff --git a/index.html b/index.html index 1d74b4c..0dba050 100644 --- a/index.html +++ b/index.html @@ -3,13 +3,13 @@ - + NOSK SFD 2024
@@ -72,7 +72,7 @@
- + Logo for NOSK-SFD -
+
- +
- - + ` document.addEventListener('DOMContentLoaded', () => { + //To Insert the Navbar in the page const body = document.querySelector("#body").innerHTML; document.querySelector("#body").innerHTML = navCode + body + + //For Hamburger menu + const hamMenu = document.getElementById("hamMenu") + const navList = document.getElementById("nav-list") + hamMenu.addEventListener("click", () => { + let srcNow = hamMenu.getAttribute("src") + if (srcNow == "./assets/navbar/hamMenu.svg") { + hamMenu.setAttribute("src", "../assets/navbar/closeMenu.svg") + } else { + hamMenu.setAttribute("src", "../assets/navbar/hamMenu.svg") + } + navList.classList.toggle("right-0") + navList.classList.toggle("-right-full") + }) + + //For Hamburger Menu bhitra ko + const aboutButton = document.getElementById("about") + const aboutMenu = document.getElementById("about-menu") + const aboutDrop = document.getElementById("about-drop") + const activitiesButton = document.getElementById("activities") + const activitiesMenu = document.getElementById("activities-menu") + const activitiesDrop = document.getElementById("activities-drop") + aboutButton.addEventListener("click", () => { + aboutMenu.classList.toggle("hidden") + aboutDrop.classList.toggle("-rotate-180") + }) + activitiesButton.addEventListener("click", () => { + activitiesMenu.classList.toggle("hidden") + activitiesDrop.classList.toggle("-rotate-180") + }) + + //For NavItem highlighting const pathName = window.location.pathname let splittedPath = pathName.split("/") const currentPage = splittedPath[splittedPath.length - 1].replace(".html", "") - const navChildren = document.querySelector("#navlist").children + const navChildren = document.querySelector("#nav-list").children for (navChild of navChildren) { if (currentPage.includes(navChild.id)) { navChild.style = "color: #E4554E" - } } }) From 5d02d270fcfddfaedf164129c3d0c3a4769267ca Mon Sep 17 00:00:00 2001 From: Anish Neupane Date: Tue, 10 Sep 2024 02:40:25 +0545 Subject: [PATCH 2/2] Moved: JS for timer from navbar.js -> index.html --- css/output.css | 12 +- index.html | 371 +++++++++++++++++++++++-------------------------- js/navbar.js | 41 +----- 3 files changed, 180 insertions(+), 244 deletions(-) diff --git a/css/output.css b/css/output.css index 0f0c218..839f342 100644 --- a/css/output.css +++ b/css/output.css @@ -790,10 +790,6 @@ video { height: 8.5rem; } -.h-\[calc\(100vh-7\.5rem\)\] { - height: calc(100vh - 7.5rem); -} - .h-full { height: 100%; } @@ -870,14 +866,14 @@ video { width: 66rem; } -.w-full { - width: 100%; -} - .w-auto { width: auto; } +.w-full { + width: 100%; +} + .max-w-full { max-width: 100%; } diff --git a/index.html b/index.html index 0dba050..fadbb7c 100644 --- a/index.html +++ b/index.html @@ -1,222 +1,201 @@ - - - - - NOSK SFD 2024 - - -
-
-
-
-

- Celebrate - Software
Freedom Day - 2024 with -
Nepal Open Source Klub -

-
-
-

-  "A celebration of innovation and open collaboration!" -

-
-
- - -
-
- SFD Horizontal - Nosk Logo -
+ + + + + + NOSK SFD 2024 + + + +
+
+
+
+

+ Celebrate + Software
Freedom Day + 2024 with +
Nepal Open Source Klub +

-
- Candle Ceremony NOSK +
+

+  "A celebration of innovation and open collaboration!" +

+
+
+ + +
+
+ SFD Horizontal + Nosk Logo
-
-
- -
-
- Be a Part of The Celebration
Mark your Calenders
 -
- Event Date: 21st September, 2024
 - Venue: - Nepal College of Information Technology
 - Location: Balkumari, Lalitpur
 - Time: 10:00 AM
-
-
-
-
- 0 -
-
Days
+ Candle Ceremony NOSK +
+
+
+ +
+
+ Be a Part of The Celebration
Mark your Calenders
 +
+ Event Date: 21st September, 2024
 + Venue: + Nepal College of Information Technology
 + Location: Balkumari, Lalitpur
 + Time: 10:00 AM +
+
+
+
+
+
+ 0
-
-
-
- 0 -
-
Hours
+
Days
+
+
+
+
+ 0
-
-
-
- 0 -
-
Minutes
+
Hours
+
+
+
+
+ 0
-
-
-
- 0 -
-
Seconds
+
Minutes
+
+
+
+
+ 0
+
Seconds
-
+
+
-
-
-
-
-

- About The Event
Software Freedom Day - 2024
- "A celebration of innovation and open collaboration!" +

+
+
+
+
+

+ About The Event
Software Freedom Day + 2024
+ "A celebration of innovation and open + collaboration!"

-
-
- - - -
-
- Software Freedom Day (SFD) is an annual global celebration dedicated to promoting the benefits and principles of Free and Open Source Software (FOSS). SFD is celebrated on the third Saturday of September each year and is marked by events, workshops, and conferences held by FOSS communities, tech enthusiasts, and organizations across the world. -

- In Nepal, the celebration of SFD has been actively hosted and organized by the Nepal Open Source Klub (NOSK) for over 20 years. NOSK has been at the forefront of promoting free software. -

- In 2024, NOSK is returning with an even grander edition of Software Freedom Day, This year's event promises to be the largest yet, where developers and enthusiasts can showcase their love for open source. -
-
- +
+ + +
-
- Nosk Vertical Logo +
+ Software Freedom Day (SFD) is an annual global celebration dedicated to promoting the + benefits and principles of Free and Open Source Software (FOSS). SFD is celebrated on the third Saturday of + September each year and is marked by events, workshops, and conferences held by FOSS communities, tech + enthusiasts, and organizations across the world. +

+ In Nepal, the celebration of SFD has been actively hosted and organized by the Nepal Open Source Klub (NOSK) + for over 20 years. NOSK has been at the forefront of promoting free software. +

+ In 2024, NOSK is returning with an even grander edition of Software Freedom Day, This year's event promises + to be the largest yet, where developers and enthusiasts can showcase their love for open source. +
+
-
+
+ Nosk Vertical Logo +
+
+
-
-
-

Got Open Source Project? We Got you!

-

Present them at Software Freedom Day 2024

+
+
+

Got Open + Source Project? We Got you!

+

Present them at Software Freedom + Day 2024

- - + +
-
+
+ + + + + - - - + \ No newline at end of file diff --git a/js/navbar.js b/js/navbar.js index ab05bd8..cb385a6 100644 --- a/js/navbar.js +++ b/js/navbar.js @@ -77,7 +77,7 @@ document.addEventListener('DOMContentLoaded', () => { const navList = document.getElementById("nav-list") hamMenu.addEventListener("click", () => { let srcNow = hamMenu.getAttribute("src") - if (srcNow == "./assets/navbar/hamMenu.svg") { + if (srcNow == "../assets/navbar/hamMenu.svg") { hamMenu.setAttribute("src", "../assets/navbar/closeMenu.svg") } else { hamMenu.setAttribute("src", "../assets/navbar/hamMenu.svg") @@ -113,42 +113,3 @@ document.addEventListener('DOMContentLoaded', () => { } } }) - - -document.addEventListener("DOMContentLoaded", () => { - const sfdDate = new Date("2024-09-21T10:00:00"); - const daysElem = document.getElementById("days"); - const hoursElem = document.getElementById("hours"); - const minutesElem = document.getElementById("minutes"); - const secondsElem = document.getElementById("seconds"); - - function pad(num) { - return num.toString().padStart(2, '0'); - } - - function updateTimer() { - const currDate = new Date(); - let diff = sfdDate - currDate; - - if (diff < 0) { - daysElem.innerText = "00"; - hoursElem.innerText = "00"; - minutesElem.innerText = "00"; - secondsElem.innerText = "00"; - clearInterval(inter); // Stop the interval when the countdown is finished - return; - } - - const days = Math.floor(diff / (1000 * 60 * 60 * 24)); - const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); - const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); - const seconds = Math.floor((diff % (1000 * 60)) / 1000); - - daysElem.innerText = pad(days); - hoursElem.innerText = pad(hours); - minutesElem.innerText = pad(minutes); - secondsElem.innerText = pad(seconds); - } - - const inter = setInterval(updateTimer, 1000); -});