Imbus/TTime
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Slight formatting

Browse source
This commit is contained in:
Mattias 2024-03-07 11:31:03 +01:00
parent 42a0745102
commit 9c824f1d7b
3 changed files with 62 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

96
frontend/src/Pages/LoginPage.tsx
View file

@ -1,45 +1,73 @@
import Button from "../Components/Button";
import Logo from "/src/assets/TTIMElogo.png";
import './LoginPage.css';
import "./LoginPage.css";
import { useEffect } from "react";
import { Link } from "react-router-dom";
const PreloadBackgroundAnimation = () => {
useEffect(() => {
const images = ['src/assets/1.jpg', 'src/assets/2.jpg', 'src/assets/3.jpg', 'src/assets/4.jpg'];
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 (let i = 0; i < images.length; i++) {
const img = new Image();
img.src = images[i];
}
// Start animation
document.body.style.animation = "backgroundTransition 30s infinite";
}, []);
// Pre-load images
for (let i = 0; i < images.length; i++) {
const img = new Image();
img.src = images[i];
}
// Start animation
document.body.style.animation = "backgroundTransition 30s infinite";
}, []);
return null;
};
return <></>;
};
function LoginPage() {
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={() => {}} />
</Link>
</div>
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={() => {}} />
</Link>
</div>
</>
);
</div>
</>
);
}
export default LoginPage;
export default LoginPage;