diff --git a/frontend/index.html b/frontend/index.html index e4b78ea..573ba58 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,9 +2,9 @@ - + - Vite + React + TS + TTIME
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js index 2e7af2b..2aa7205 100644 --- a/frontend/postcss.config.js +++ b/frontend/postcss.config.js @@ -3,4 +3,4 @@ export default { tailwindcss: {}, autoprefixer: {}, }, -} +}; diff --git a/frontend/src/Components/BasicWindow.tsx b/frontend/src/Components/BasicWindow.tsx new file mode 100644 index 0000000..1835d6a --- /dev/null +++ b/frontend/src/Components/BasicWindow.tsx @@ -0,0 +1,22 @@ +import Header from "./Header"; +import Footer from "./Footer"; + +function BasicWindow({ + username, + content, + buttons, +}: { + username: string; + content: React.ReactNode; + buttons: React.ReactNode; +}): JSX.Element { + return ( +
+
+
{content}
+ +
+ ); +} + +export default BasicWindow; diff --git a/frontend/src/Components/Button.tsx b/frontend/src/Components/Button.tsx new file mode 100644 index 0000000..cf6a887 --- /dev/null +++ b/frontend/src/Components/Button.tsx @@ -0,0 +1,18 @@ +function Button({ + text, + onClick, +}: { + text: string; + onClick: () => void; +}): JSX.Element { + return ( + + ); +} + +export default Button; diff --git a/frontend/src/Components/Footer.tsx b/frontend/src/Components/Footer.tsx new file mode 100644 index 0000000..a3b7469 --- /dev/null +++ b/frontend/src/Components/Footer.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +function Footer({ children }: { children: React.ReactNode }): JSX.Element { + return ( + + ); +} + +export default Footer; diff --git a/frontend/src/Components/Header.tsx b/frontend/src/Components/Header.tsx new file mode 100644 index 0000000..5c642b8 --- /dev/null +++ b/frontend/src/Components/Header.tsx @@ -0,0 +1,54 @@ +import { useState } from "react"; +import { Link } from "react-router-dom"; + +function Header({ username }: { username: string }): JSX.Element { + const [isOpen, setIsOpen] = useState(false); + + const handleLogout = (): void => { + // Add any logout logic here + }; + + return ( +
+ + TTIME Logo + + +
{ + setIsOpen(true); + }} + onMouseLeave={() => { + setIsOpen(false); + }} + > + + + {isOpen && ( +
+ + + +
+ )} +
+
+ ); +} + +export default Header; diff --git a/frontend/src/Pages/LoginPage.css b/frontend/src/Pages/LoginPage.css new file mode 100644 index 0000000..0b2f5db --- /dev/null +++ b/frontend/src/Pages/LoginPage.css @@ -0,0 +1,26 @@ +body{ + overflow: hidden; +} + +@keyframes backgroundTransition { + 0% { + background-image: url('src/assets/1.jpg'); + animation-timing-function: ease-out; + } + 25% { + background-image: url('src/assets/2.jpg'); + animation-timing-function: ease-in; + } + 50% { + background-image: url('src/assets/3.jpg'); + animation-timing-function: ease-out; + } + 75% { + background-image: url('src/assets/4.jpg'); + animation-timing-function: ease-in; + } + 100% { + background-image: url('src/assets/1.jpg'); + animation-timing-function: ease-out; + } +} \ No newline at end of file diff --git a/frontend/src/Pages/LoginPage.tsx b/frontend/src/Pages/LoginPage.tsx new file mode 100644 index 0000000..d8ea651 --- /dev/null +++ b/frontend/src/Pages/LoginPage.tsx @@ -0,0 +1,78 @@ +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 ( + <> + +
+
+ TTIME Logo +

+ {" "} + Welcome to TTIME!{" "} +

+

+ {" "} + Please log in to continue{" "} +

+ + + +
+
+ + ); +} + +export default LoginPage; diff --git a/frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx b/frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx new file mode 100644 index 0000000..009a5bd --- /dev/null +++ b/frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx @@ -0,0 +1,38 @@ +import BasicWindow from "../../Components/BasicWindow"; +import Button from "../../Components/Button"; + +function PMProjectPage(): JSX.Element { + const content = ( + <> +

ProjectNameExample

+
+

+ Your Time Reports +

+

+ New Time Report +

+

+ Statistics +

+

+ Unsigned Time Reports +

+
+ + ); + + const buttons = ( + <> +