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
Show stats 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 Button from "../Components/Button";
import Logo from "/src/assets/TTIMElogo.png"; import Logo from "/src/assets/TTIMElogo.png";
import './LoginPage.css'; import "./LoginPage.css";
import { useEffect } from "react"; import { useEffect } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
const PreloadBackgroundAnimation = () => { const PreloadBackgroundAnimation = (): JSX.Element => {
useEffect(() => { useEffect(() => {
const images = ['src/assets/1.jpg', 'src/assets/2.jpg', 'src/assets/3.jpg', 'src/assets/4.jpg']; const images = [
"src/assets/1.jpg",
"src/assets/2.jpg",
"src/assets/3.jpg",
"src/assets/4.jpg",
];
// Pre-load images // Pre-load images
for (let i = 0; i < images.length; i++) { for (let i = 0; i < images.length; i++) {
const img = new Image(); const img = new Image();
img.src = images[i]; img.src = images[i];
} }
// Start animation // Start animation
document.body.style.animation = "backgroundTransition 30s infinite"; document.body.style.animation = "backgroundTransition 30s infinite";
}, []); }, []);
return null; return <></>;
}; };
function LoginPage() { function LoginPage(): JSX.Element {
return (
return ( <>
<> <PreloadBackgroundAnimation />
<PreloadBackgroundAnimation/> <div
<div className="flex flex-col h-screen w-screen items-center justify-center" style={{ animation: "backgroundTransition 30s infinite", backgroundSize: "cover", backgroundAttachment: "fixed"}}> className="flex flex-col h-screen w-screen items-center justify-center"
<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"> style={{
<img src={Logo} className="logo w-[7vw] mb-10 mt-10" alt="TTIME Logo"/> animation: "backgroundTransition 30s infinite",
<h1 className="font-sans mb-4 font-bold text-[25px]"> Welcome to TTIME! </h1> backgroundSize: "cover",
<h2 className="font-sans mb-4 text-[15px]"> Please log in to continue </h2> backgroundAttachment: "fixed",
<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"> <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">
<Button text="Login" onClick={() => {}} /> <img
</Link> src={Logo}
className="logo w-[7vw] mb-10 mt-10"
</div> 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>
</> </div>
); </>
);
} }
export default LoginPage; export default LoginPage;

114
frontend/src/index.css
View file

@ -6,117 +6,3 @@
* We are using tailwind, so do not add any custom CSS here. * We are using tailwind, so do not add any custom CSS here.
* Most of this is going to get cleaned up eventually. * Most of this is going to get cleaned up eventually.
*/ */
/*
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
a {
display: inline-block;
}
.logo {
transition: filter 0.25s;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
} */

2
frontend/src/main.tsx
View file

@ -1,7 +1,5 @@
import React from "react"; import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import SettingsPage from "./Pages/Settings.tsx";
import HomePage from "./Pages/Home.tsx";
import "./index.css"; import "./index.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom"; import { createBrowserRouter, RouterProvider } from "react-router-dom";
import LoginPage from "./Pages/LoginPage.tsx"; import LoginPage from "./Pages/LoginPage.tsx";