78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import Button from "../Components/Button";
|
|
import Logo from "/src/assets/TTIMElogo.png";
|
|
import "./LoginPage.css";
|
|
import { useEffect } from "react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
const PreloadBackgroundAnimation = (): JSX.Element => {
|
|
useEffect(() => {
|
|
const images = [
|
|
"src/assets/1.jpg",
|
|
"src/assets/2.jpg",
|
|
"src/assets/3.jpg",
|
|
"src/assets/4.jpg",
|
|
];
|
|
|
|
// Pre-load images
|
|
for (const i of images) {
|
|
console.log(i);
|
|
}
|
|
|
|
// Start animation
|
|
document.body.style.animation = "backgroundTransition 30s infinite";
|
|
}, []);
|
|
|
|
return <></>;
|
|
};
|
|
|
|
function LoginPage(): JSX.Element {
|
|
return (
|
|
<>
|
|
<PreloadBackgroundAnimation />
|
|
<div
|
|
className="flex flex-col h-screen w-screen items-center justify-center"
|
|
style={{
|
|
animation: "backgroundTransition 30s infinite",
|
|
backgroundSize: "cover",
|
|
backgroundAttachment: "fixed",
|
|
}}
|
|
>
|
|
<div className="border-4 border-black bg-white flex flex-col items-center justify-center h-fit w-fit rounded-3xl content-center pl-20 pr-20">
|
|
<img
|
|
src={Logo}
|
|
className="logo w-[7vw] mb-10 mt-10"
|
|
alt="TTIME Logo"
|
|
/>
|
|
<h1 className="font-sans mb-4 font-bold text-[25px]">
|
|
{" "}
|
|
Welcome to TTIME!{" "}
|
|
</h1>
|
|
<h2 className="font-sans mb-4 text-[15px]">
|
|
{" "}
|
|
Please log in to continue{" "}
|
|
</h2>
|
|
<input
|
|
className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
|
|
type="text"
|
|
placeholder="Username"
|
|
/>
|
|
<input
|
|
className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
|
|
type="password"
|
|
placeholder="Password"
|
|
/>
|
|
<Link to="/your-projects">
|
|
<Button
|
|
text="Login"
|
|
onClick={(): void => {
|
|
return;
|
|
}}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default LoginPage;
|