add login page

2025-07-04 00:05:21 +02:00
parent 9263d88cee
commit 25d9f8ab7e
3 changed files with 69 additions and 22 deletions
@@ -3,13 +3,17 @@ import "./style.css";
 import { useState } from "react";
 import { AuthProvider } from "react-oidc-context";
 import { oidcConfig, userManager } from "muzak/config/auth";
-import { Source_Sans_3 } from "next/font/google";
+import { Source_Sans_3, Nunito } from "next/font/google";

 const sourceSans = Source_Sans_3({
  weight: ["400"],
  subsets: ["latin"],
 });

+const nunito = Nunito({
+  subsets: ["latin"],
+});
+
 export default function RootLayout({
  children,
 }: {
@@ -22,7 +26,7 @@ export default function RootLayout({
  };

  return (
-    <html lang="en" className={sourceSans.className}>
+    <html lang="en" className={nunito.className}>
      <body className={`bg-game-show ${isAnimate ? "animate" : ""} h-screen`}>
        <AuthProvider {...oidcConfig}>{children}</AuthProvider>
        <button
@@ -1,7 +1,47 @@
+"use client";
+
+import { Vollkorn, Nunito } from "next/font/google";
+import { useState } from "react";
+
+const vollkorn = Vollkorn({
+  weight: "600",
+  subsets: ["latin"],
+});
+
+const nunito = Nunito({
+  weight: "900",
+  subsets: ["latin"],
+});
+
 export default function Lobby() {
+  const [userName, setUserName] = useState("Stroop");
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <h1>Lobby</h1>
+      <div>
+        <h1
+          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-orange-300`}
+        >
+          LOGIN
+        </h1>
+      </div>
+
+      <div className="mb-12 flex flex-col items-center justify-between gap-4 rounded-md bg-blue-950/80 p-8">
+        <p className="text-xl text-white/90">Welkom, {userName}!</p>
+        <form className="flex flex-col items-center justify-center gap-4">
+          <input
+            className="w-full rounded border-2 border-gray-300 px-4 py-2 font-bold text-white/70"
+            type="text"
+            placeholder="Game PIN"
+          />
+          <button
+            className="w-full rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-400"
+            type="submit"
+          >
+            Join
+          </button>
+        </form>
+      </div>
+      <div></div>
    </main>
  );
 }
@@ -10,8 +10,7 @@
  background: repeating-conic-gradient(
    from var(--angle),
    var(--color-sky-500) var(--angle) calc(var(--angle) + 30deg),
-        var(--color-sky-700) calc(var(--angle) + 30deg)
-            calc(var(--angle) + 60deg)
+    var(--color-sky-700) calc(var(--angle) + 30deg) calc(var(--angle) + 60deg)
  );
 }

@@ -34,3 +33,7 @@
 .pause:before {
  content: "⏸";
 }
+
+.text-outline {
+  -webkit-text-stroke: 3px black;
+}