feat: remaining time countdown

Author: joaodiaslobo

.env.sample

@@ -7,4 +7,5 @@ SES_ACCESS=<AWS ACCESS KEY>
 SES_SECRET=<AWS SECRET ACCESS KEY>
 PUBLIC_HOST_URL=<YOUR HOST URL>
 ADMIN_SECRET=<ADMIN SECRET>
-AUTH_SECRET=<AUTH SECRET>
+AUTH_SECRET=<AUTH SECRET>
+EVENT_END=<EVENT END DATE>

src/pages/countdown.astro

@@ -0,0 +1,91 @@
+---
+import BaseLayout from "~/layouts/baseLayout.astro";
+import gubImage from "~/assets/Bicho.svg";
+import background from "/public/background.jpg";
+import { Image } from "astro:assets";
+import SquigglyAnimation from "~/components/squigglyAnimation.astro";
+const eventEnd = import.meta.env.EVENT_END;
+---
+
+<BaseLayout>
+  <section class="relative h-full bg-black overflow-y-hidden select-none">
+    <a id="splash-bg-fallback" class="absolute inset-0" href="#">
+      <Image
+        class="h-full w-full object-cover opacity-40"
+        src={background}
+        alt="background"
+      />
+    </a>
+    <div
+      class="z-1 absolute top-56 -left-56 sm:left-auto sm:right-10 sm:top-0 sm:justify-center"
+    >
+      <Image
+        class="object-cover h-3/4"
+        src={gubImage}
+        widths={[250, 500]}
+        loading="eager"
+        alt="A floating gub"
+      />
+    </div>
+    <div class="z-0 relative grid h-1/2 top-36 sm:top-auto sm:h-full sm:w-full">
+      <div
+        class="flex flex-col items-center gap-2 sm:gap-4 sm:justify-center sm:self-auto"
+      >
+        <div class="tracking-tighter text-5xl sm:text-7xl text-center">
+          <h1
+            id="countdown"
+            data-end={eventEnd}
+            class="text-9xl tracking-wider animate-squiggle uppercase"
+          >
+            --:--:--
+          </h1>
+          <p id="information" class="tracking-wide text-6xl uppercase">
+            Remaining
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <SquigglyAnimation />
+
+  <script>
+    function updateCountdown() {
+      const countdownElement = document.getElementById("countdown");
+      const informationElement = document.getElementById("information");
+      if (!countdownElement || !informationElement) return;
+
+      const endDateString = countdownElement.dataset.end;
+      if (!endDateString) return;
+
+      const endDate = new Date(endDateString);
+      if (isNaN(endDate.getTime())) return;
+
+      const now = new Date();
+      const remainingTime = endDate.getTime() - now.getTime();
+
+      if (remainingTime < 0) {
+        countdownElement.innerText = "Time is up!";
+        informationElement.innerText = "";
+        clearInterval(timer);
+        return;
+      }
+
+      const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
+      const hours = String(
+        Math.floor((remainingTime / (1000 * 60 * 60)) % 24) + days * 24,
+      ).padStart(2, "0");
+      const minutes = String(
+        Math.floor((remainingTime / (1000 * 60)) % 60),
+      ).padStart(2, "0");
+      const seconds = String(Math.floor((remainingTime / 1000) % 60)).padStart(
+        2,
+        "0",
+      );
+
+      countdownElement.innerText = `${hours}:${minutes}:${seconds}`;
+    }
+
+    updateCountdown();
+    const timer = setInterval(updateCountdown, 1000);
+  </script>
+</BaseLayout>