chore: Small fixes

apps/web/src/app/[locale]/system-seven/content.tsx

@@ -0,0 +1,65 @@
+"use client";
+import { useEffect, useState } from "react";
+import "./system-seven.css";
+
+const useCountdown = (date: Date) => {
+  const [timeLeft, setTimeLeft] = useState<number>(
+    date.getTime() - new Date().getTime(),
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setTimeLeft(date.getTime() - new Date().getTime());
+    }, new Date(timeLeft).getMilliseconds());
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [date, timeLeft]);
+
+  const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
+  const hours = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
+  const minutes = Math.floor((timeLeft / 1000 / 60) % 60);
+  const seconds = Math.floor((timeLeft / 1000) % 60);
+
+  return [days, hours, minutes, seconds];
+};
+
+export default function SyseContent() {
+  const eventDate = new Date("2024-12-01T16:00:00.000+02:00");
+  const [days, hours, minutes, seconds] = useCountdown(eventDate);
+  const f = (n: number) => `0${n.toString()}`.slice(-2);
+  const dateString = `${f(days)}:${f(hours)}:${f(minutes)}:${f(seconds)}`;
+
+  return (
+    <div className="bg-gray-900">
+      <div className="wrapper">
+        <div className="header-container">
+          <h1 className="header">Day of Destruction</h1>
+          <h2 className="time" suppressHydrationWarning>
+            {dateString}
+          </h2>
+        </div>
+      </div>
+      <div className="text-container">
+        <h2 className="m-5 text-3xl md:text-4xl">
+          Mind control machine instructions
+        </h2>
+        <p className="text-sm md:text-lg">
+          The mind control machine utilizes the fuksi crystal&apos;s power to
+          control the minds of Teekkaris. Please watch the video below before
+          operating the machine.
+        </p>
+      </div>
+      <div className="video-container">
+        <video
+          className="video"
+          src="https://files.joonatanaatos.fi/syse.mp4"
+          controls
+        >
+          <track kind="captions" srcLang="en" default />
+        </video>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/[locale]/system-seven/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Button, Input } from "@tietokilta/ui";
+import dynamic from "next/dynamic";
+import { useState } from "react";
+
+const SyseContent = dynamic(() => import("./content"));
+
+export default function Page() {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [errorText, setErrorText] = useState("");
+
+  if (loggedIn) return <SyseContent />;
+
+  return (
+    <main
+      id="main"
+      className="relative mb-8 flex flex-col items-center gap-2 md:gap-6"
+    >
+      <h1 className="mt-20 text-4xl">Login</h1>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          const form = e.target as HTMLFormElement;
+          const password = form.querySelector("input")?.value;
+          if (password === "masterseven") setLoggedIn(true);
+          else setErrorText("Incorrect password");
+        }}
+        className="flex flex-col gap-4"
+      >
+        <div>
+          <label htmlFor="password" className="sr-only">
+            Password
+          </label>
+          <Input id="password" type="password" />
+        </div>
+        <div className="m-auto">
+          <Button type="submit" variant="destructive">
+            Login
+          </Button>
+        </div>
+        <p className="text-center text-red-500">{errorText}</p>
+      </form>
+    </main>
+  );
+}

apps/web/src/app/[locale]/system-seven/system-seven.css

@@ -0,0 +1,90 @@
+.wrapper {
+  height: 70vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.header {
+  font-size: 1.5rem;
+  color: theme("colors.red.600");
+  text-shadow: 0 0 1rem theme("colors.red.600");
+  text-align: center;
+
+  @media screen(sm) {
+    font-size: 3rem;
+  }
+  @media screen(lg) {
+    font-size: 4rem;
+  }
+}
+
+.time {
+  margin: 0rem;
+  font-size: 3rem;
+  color: theme("colors.red.600");
+  text-shadow: 0 0 1rem theme("colors.red.600");
+
+  @media screen(sm) {
+    font-size: 6rem;
+  }
+  @media screen(lg) {
+    font-size: 8rem;
+  }
+}
+
+.header-container {
+  display: flex;
+  padding: 2rem;
+  width: 40rem;
+  max-width: 100vw;
+  flex-direction: column;
+  align-items: center;
+}
+
+.text-container {
+  display: flex;
+  padding: 2rem;
+  width: 60rem;
+  max-width: calc(100vw - 2rem);
+  flex-direction: column;
+  align-items: center;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+.video-container {
+  padding-top: 10rem;
+  padding-bottom: 10rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.video {
+  max-width: calc(100vw - 4rem);
+  box-shadow: 0 0 2rem 0.5rem theme("colors.red.600");
+}
+
+a,
+svg,
+h2,
+p,
+span {
+  color: theme("colors.red.600");
+}
+
+img {
+  /* Filter that turns white to red */
+  filter: invert(8%) sepia(96%) saturate(5343%) hue-rotate(354deg)
+    brightness(108%) contrast(103%) !important;
+}
+
+img[alt~="Tietokilta"] {
+  /* For some reason the above filter doesn't work on this image */
+  filter: invert(92%) sepia(96%) saturate(5343%) hue-rotate(354deg)
+    brightness(108%) contrast(103%) !important;
+}