Skip to content

update #214

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Khennee merged 1 commit into from
Dec 23, 2024
Merged

update #214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ import Protocols from "./pages/Policies/Protocols.tsx";
import Rules from "./pages/Policies/Rules.tsx";
import ChangePassword from "./pages/ChangePassword.tsx";

import About from "./pages/LogOut/About.tsx";
import Rule from "./pages/LogOut/Rule.tsx";
import Protocol from "./pages/LogOut/Proto.tsx";

import RequireAuth from "./components/RequireAuth.tsx";
import PersistLogin from "./components/PersistLogin.tsx";

Expand All @@ -47,6 +51,14 @@ const Main = () => {

<Route path="/signup" element={<SignUpPage />} />

<Route path="/about" element={<AboutPage />} />
<Route path="/protocols" element={<Protocols />} />
<Route path="/rules" element={<Rules />} />

<Route path="/outabout" element={<About />} />
<Route path="/outprotocols" element={<Protocol />} />
<Route path="/outrules" element={<Rule />} />

<Route path="/unauthorized" element={<UnauthorizedPage />} />

<Route element={<PersistLogin />}>
Expand All @@ -57,10 +69,8 @@ const Main = () => {
{/* USER ROUTES */}
<Route element={<RequireAuth forAdmin={false} />}>
<Route path="/homepage" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/register-driver" element={<RegisterDriver />} />
<Route path="/protocols" element={<Protocols />} />
<Route path="/rules" element={<Rules />} />

</Route>

{/* ADMIN ROUTES */}
Expand Down
101 changes: 101 additions & 0 deletions frontend/src/components/AboutComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
const AboutComp = () => {
return (
<div className="w-5/6 h-auto max-h-[70vh] bg-gray-400 overflow-y-auto rounded-md mt-6 p-4 scrollbar bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10">
<div className="text-left py-2 px-6 rounded-xl bg-clip-padding ">
<h1 className="text-textgreen font-syke-medium text-xl sm:text-2xl mt-4">About Us</h1>

<p className="text-white font-syke text-sm sm:text-base mt-2">
Welcome to CodeGreen Gateway, the official parking management system
for our school. We strive to maintain an organized, secure, <br />
and efficient parking environment on campus, ensuring that both
students and staff have access to safe parking spaces.
</p>

<h1 className="text-textgreen font-syke-medium text-2xl mt-4">
Our Mission
</h1>

<p className="text-white font-syke text-sm sm:text-base mt-2">
Our mission is to provide a streamlined, digital platform to manage
parking within the campus. By creating a comprehensive system for
tracking parking
<br /> violations and organizing parking spaces, we aim to enhance
the overall campus experience and ensure safety and convenience for
all members of our community.
</p>

<h1 className="text-textgreen font-syke-medium text-xl sm:text-2xl mt-4">
What We Do
</h1>

<p className="text-white font-syke text-sm sm:text-base mt-2">
At CodeGreen Gateway, we offer a secure and easy-to-use platform for
the administration to manage parking within the school campus. Our
system allows <br /> administrators to track, report, and address
parking violations, ensuring that parking regulations are enforced
effectively. The website allows for:
</p>

<ul className="space-y-2 list-disc font-syke-light ml-6 sm:ml-12 mt-4 text-white text-sm sm:text-base">
<li>
<span className="text-textgreen font-bold mr-1">
Parking Violation Reporting :
</span>
Administrators can input violators' details into the system via a
simple form. This includes details such as the vehicle's license
<br />
plate number, the type of violation, and the action taken. This
helps maintain a record of all violations and ensures that
necessary actions are taken in a timely manner.
</li>

<li>
<span className="text-textgreen font-bold mr-1">
Violation Management :
</span>
The system categorizes and organizes the data on parking
violations, making it easier
<br />
to review, analyze, and address issues in a systematic manner.
</li>

<li>
<span className="text-textgreen font-bold mr-1">
Efficiency & Transparency :
</span>
By moving the process of parking violation documentation online,
we enhance transparency
<br />
and streamline the process, allowing for quick and accurate
record-keeping.
</li>
</ul>

<h1 className="text-textgreen text-xl sm:text-2xl font-syke-medium mt-4">
Our Goals
</h1>
<p className="text-white font-syke text-sm sm:text-base mt-2">
As our school grows, so does the need for a smarter way to manage
parking. With CodeGreen Gateway, we hope to:
</p>
<ul className="space-y-2 list-disc ml-6 sm:ml-12 mt-4 font-syke-light text-white text-sm sm:text-base">
<li>Improve parking compliance and reduce violations</li>

<li>Foster a safer parking environment for everyone on campus</li>

<li>
Provide an easy-to-access system for parking violation
documentation
</li>

<li>
Help maintain an organized, well-managed parking facility for
students, faculty, and staff
</li>
</ul>
</div>
</div>
)
}

export default AboutComp;
220 changes: 220 additions & 0 deletions frontend/src/components/LandingPageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,220 @@
import { useState, useRef, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";

const LandingPageHeader = () => {
const navigate = useNavigate();
const [isDropdownOpen, setDropdownOpen] = useState(false);
const [isDropdownOpenPolicies, setDropdownOpenPolicies] = useState(false);
const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
const [isWideScreen, setIsWideScreen] = useState(window.innerWidth >= 768); // Track if the screen is wide

const dropdownRef = useRef<HTMLDivElement>(null);
const dropdownRefPolicies = useRef<HTMLDivElement>(null);

useEffect(() => {
const handleResize = () => {
setIsWideScreen(window.innerWidth >= 768);
};

window.addEventListener("resize", handleResize);

return () => {
window.removeEventListener("resize", handleResize);
};
}, []);

const handleProtocols = () => {
navigate("/outprotocols");
};

const handleRules = () => {
navigate("/outrules");
};

const toggleDropdown = () => {
setDropdownOpen((prevState) => !prevState);
};

const toggleDropdownPolicies = () => {
setDropdownOpenPolicies((prevState) => !prevState);
};

const toggleMobileMenu = () => {
setMobileMenuOpen((prev) => !prev);
};

const handleDefaultPage = () => {
navigate("/login");
};

useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
setDropdownOpen(false);
}
if (
dropdownRefPolicies.current &&
!dropdownRefPolicies.current.contains(event.target as Node)
) {
setDropdownOpenPolicies(false);
}
};

document.addEventListener("mousedown", handleClickOutside);

return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);

return (
<div className="flex w-screen">
<header className="flex relative items-center md:justify-evenly font-syke-medium w-full p-4 z-50">
<div className="flex items-center md:w-auto w-full">
<img
onClick={handleDefaultPage}
src="../assets/5.png"
alt="Logo"
className="z-50 object-contain md:w-16 md:h-16 w-12 h-12 transition-transform duration-300 hover:scale-105"
/>
<h1 className="text-md z-50 text-left md:text-xl hover:text-textgreen text-white">
CodeGreen Gateway
</h1>
</div>

{isWideScreen ? (
<nav className="flex flex-row space-x-20 text-white font-syke-medium z-50">
<Link
to="/login"
className="hover:text-textgreen transition-colors"
>
Log In
</Link>

<Link
to="/signup"
className="hover:text-textgreen transition-colors"
>
Sign Up
</Link>

<Link
to="/outabout"
className="hover:text-textgreen transition-colors"
>
About
</Link>

<div className="relative" ref={dropdownRefPolicies}>
<button
onClick={toggleDropdownPolicies}
className="hover:text-textgreen transition-colors z-50"
>
Policies
</button>
{isDropdownOpenPolicies && (
<div className="absolute mt-2 w-48 bg-hoverbutton text-white rounded-md shadow-lg">
<span
onClick={handleProtocols}
className="z-50 block px-4 py-2 hover:bg-buttongreen rounded-t-md cursor-pointer"
>
Protocols
</span>
<span
onClick={handleRules}
className="z-50 block px-4 py-2 hover:bg-buttongreen rounded-b-md cursor-pointer"
>
Rules and Regulations
</span>
</div>
)}
</div>
</nav>
) : (
<button
title="menu"
onClick={toggleMobileMenu}
className="text-white md:hidden focus:outline-none block z-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 6h16M4 12h16m-7 6h7"
/>
</svg>
</button>
)}
</header>

{!isWideScreen && isMobileMenuOpen && (
<nav className="flex flex-col absolute font-syke-medium items-center space-y-5 text-white bg-hoverbutton p-4 rounded right-2 top-16 z-50">
<Link
to="/about"
className="hover:text-textgreen transition-colors"
>
About
</Link>
<button
onClick={toggleDropdownPolicies}
className="hover:text-textgreen transition-colors"
>
Policies
</button>
{isDropdownOpenPolicies && (
<div className="w-full bg-hoverbutton text-white rounded-md shadow-lg">
<span
onClick={handleProtocols}
className="block px-4 py-2 hover:bg-buttongreen cursor-pointer transition-colors"
>
Protocols
</span>
<span
onClick={handleRules}
className="block px-4 py-2 hover:bg-buttongreen cursor-pointer transition-colors"
>
Rules and Regulations
</span>
</div>
)}
<div ref={dropdownRef}>
<button
onClick={toggleDropdown}
className="hover:text-textgreen"
>
Account
</button>
{isDropdownOpen && (
<div className="w-full bg-hoverbutton text-white rounded-md shadow-lg">
<Link
to="/profile"
className="block px-4 py-2 hover:bg-buttongreen cursor-pointer"
>
Profile
</Link>
<Link
to="/settings"
className="block px-4 py-2 hover:bg-buttongreen cursor-pointer"
>
Settings
</Link>
</div>
)}
</div>
</nav>
)}
</div>
);
};

export default LandingPageHeader;
Loading
Loading