From 25d9f8ab7e5adfea4d64acc772ee361687cbf4ba Mon Sep 17 00:00:00 2001 From: Guus Date: Fri, 4 Jul 2025 00:05:21 +0200 Subject: [PATCH] add login page --- frontend/src/app/layout.tsx | 10 +++++--- frontend/src/app/lobby/page.tsx | 42 ++++++++++++++++++++++++++++++++- frontend/src/app/style.css | 39 ++++++++++++++++-------------- 3 files changed, 69 insertions(+), 22 deletions(-) diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 35ec1f9..a532c95 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -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,11 +26,11 @@ export default function RootLayout({ }; return ( - + {children} diff --git a/frontend/src/app/lobby/page.tsx b/frontend/src/app/lobby/page.tsx index e3d12a8..97abf62 100644 --- a/frontend/src/app/lobby/page.tsx +++ b/frontend/src/app/lobby/page.tsx @@ -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 (
-

Lobby

+
+

+ LOGIN +

+
+ +
+

Welkom, {userName}!

+
+ + +
+
+
); } diff --git a/frontend/src/app/style.css b/frontend/src/app/style.css index 11a5325..0b20a80 100644 --- a/frontend/src/app/style.css +++ b/frontend/src/app/style.css @@ -1,36 +1,39 @@ @import "tailwindcss"; @property --angle { - syntax: ""; - inherits: false; - initial-value: 0deg; + syntax: ""; + inherits: false; + initial-value: 0deg; } .bg-game-show { - 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) - ); + 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) + ); } .bg-game-show.animate { - animation: rotate_bg 5s cubic-bezier(0.55, 0.45, 0.45, 0.55) infinite; + animation: rotate_bg 5s cubic-bezier(0.55, 0.45, 0.45, 0.55) infinite; } @keyframes rotate_bg { - from { - --angle: 00deg; - } - to { - --angle: 30deg; - } + from { + --angle: 00deg; + } + to { + --angle: 30deg; + } } .play:before { - content: "▶️"; + content: "▶️"; } .pause:before { - content: "⏸"; + content: "⏸"; +} + +.text-outline { + -webkit-text-stroke: 3px black; }