mark/muzak
2
0
Fork 0
Code Issues Pull Requests Activity

add login page

Browse Source
This commit is contained in:
Guus
2025-07-04 00:05:21 +02:00
parent 9263d88cee
commit 25d9f8ab7e
3 changed files with 69 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/layout.tsx
+7 -3
View File
@@ -3,13 +3,17 @@ import "./style.css";
import { useState } from "react"; import { useState } from "react";
import { AuthProvider } from "react-oidc-context"; import { AuthProvider } from "react-oidc-context";
import { oidcConfig, userManager } from "muzak/config/auth"; 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({ const sourceSans = Source_Sans_3({
weight: ["400"], weight: ["400"],
subsets: ["latin"], subsets: ["latin"],
}); });
const nunito = Nunito({
subsets: ["latin"],
});
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
@@ -22,11 +26,11 @@ export default function RootLayout({
}; };
return ( return (
<html lang="en" className={sourceSans.className}> <html lang="en" className={nunito.className}>
<body className={`bg-game-show ${isAnimate ? "animate" : ""} h-screen`}> <body className={`bg-game-show ${isAnimate ? "animate" : ""} h-screen`}>
<AuthProvider {...oidcConfig}>{children}</AuthProvider> <AuthProvider {...oidcConfig}>{children}</AuthProvider>
<button <button
className={`absolute top-1 left-1 ${isAnimate ? "pause" : "play"}`} className={`absolute top-1 left-1 ${isAnimate ? "pause" : "play"}`}
onClick={toggleAnimation} onClick={toggleAnimation}
></button> ></button>
</body> </body>
frontend/src/app/lobby/page.tsx
+41 -1
View File
@@ -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() { export default function Lobby() {
const [userName, setUserName] = useState("Stroop");
return ( return (
<main className="flex min-h-screen flex-col items-center justify-between p-24"> <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> </main>
); );
} }
frontend/src/app/style.css
+21 -18
View File
@@ -1,36 +1,39 @@
@import "tailwindcss"; @import "tailwindcss";
@property --angle { @property --angle {
syntax: "<angle>"; syntax: "<angle>";
inherits: false; inherits: false;
initial-value: 0deg; initial-value: 0deg;
} }
.bg-game-show { .bg-game-show {
background: repeating-conic-gradient( background: repeating-conic-gradient(
from var(--angle), from var(--angle),
var(--color-sky-500) var(--angle) calc(var(--angle) + 30deg), var(--color-sky-500) var(--angle) calc(var(--angle) + 30deg),
var(--color-sky-700) calc(var(--angle) + 30deg) var(--color-sky-700) calc(var(--angle) + 30deg) calc(var(--angle) + 60deg)
calc(var(--angle) + 60deg) );
);
} }
.bg-game-show.animate { .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 { @keyframes rotate_bg {
from { from {
--angle: 00deg; --angle: 00deg;
} }
to { to {
--angle: 30deg; --angle: 30deg;
} }
} }
.play:before { .play:before {
content: "▶️"; content: "▶️";
} }
.pause:before { .pause:before {
content: "⏸"; content: "⏸";
}
.text-outline {
-webkit-text-stroke: 3px black;
} }