mannpatel/Campus-Plug
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI Color update

Browse Source
This commit is contained in:
Mann Patel
2025-04-21 22:46:39 -06:00
parent 0a1db869f7
commit 4ba6dfa7be
17 changed files with 109 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -25,12 +25,13 @@
1. python3 server.py #Start The Server 1. python3 server.py #Start The Server
``` ```
--- ---
### Recommendation system ### Recommendation system
1. Install the dependencies 1. Install the dependencies
```Bash ```Bash
pip install mysql.connector pip install mysql.connector
``` ```
---
### Database ### Database
1. MySql Version 9.2.0 1. MySql Version 9.2.0

38
frontend/src/App.jsx
View File

@@ -105,7 +105,7 @@ function App() {
body: JSON.stringify({ body: JSON.stringify({
userId: user.ID, userId: user.ID,
}), }),
} },
); );
if (!response.ok) { if (!response.ok) {
@@ -117,14 +117,14 @@ function App() {
if (result.success) { if (result.success) {
console.log( console.log(
"Recommendations generated successfully:", "Recommendations generated successfully:",
result.recommendations result.recommendations,
); );
setRecommendations(result.recommendations); setRecommendations(result.recommendations);
// Store recommendations in session storage for access across the app // Store recommendations in session storage for access across the app
sessionStorage.setItem( sessionStorage.setItem(
"userRecommendations", "userRecommendations",
JSON.stringify(result.recommendations) JSON.stringify(result.recommendations),
); );
} else { } else {
console.error("Error generating recommendations:", result.message); console.error("Error generating recommendations:", result.message);
@@ -178,7 +178,7 @@ function App() {
email: userData.email, email: userData.email,
// Add any other required fields // Add any other required fields
}), }),
} },
); );
if (!response.ok) { if (!response.ok) {
@@ -227,7 +227,7 @@ function App() {
email: tempUserData.email, email: tempUserData.email,
code: code, code: code,
}), }),
} },
); );
if (!response.ok) { if (!response.ok) {
@@ -271,7 +271,7 @@ function App() {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify(userData), body: JSON.stringify(userData),
} },
); );
if (!response.ok) { if (!response.ok) {
@@ -382,7 +382,7 @@ function App() {
email: formValues.email, email: formValues.email,
password: formValues.password, password: formValues.password,
}), }),
} },
); );
if (!response.ok) { if (!response.ok) {
@@ -517,7 +517,7 @@ function App() {
// Loading overlay component // Loading overlay component
const LoadingOverlay = () => ( const LoadingOverlay = () => (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"> <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="animate-spin rounded-full h-12 w-12 border-4 border-green-500 border-t-transparent"></div> <div className="animate-spin rounded-full h-12 w-12 border-4 border-emerald-600 border-t-transparent"></div>
</div> </div>
); );
@@ -584,7 +584,7 @@ function App() {
id="name" id="name"
name="name" name="name"
placeholder="Enter your name" placeholder="Enter your name"
className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500" className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
required={isSignUp} required={isSignUp}
/> />
</div> </div>
@@ -603,7 +603,7 @@ function App() {
id="ucid" id="ucid"
name="ucid" name="ucid"
placeholder="1234567" placeholder="1234567"
className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500" className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
required={isSignUp} required={isSignUp}
/> />
</div> </div>
@@ -621,7 +621,7 @@ function App() {
id="email" id="email"
name="email" name="email"
placeholder="your.email@ucalgary.ca" placeholder="your.email@ucalgary.ca"
className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500" className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
required required
/> />
</div> </div>
@@ -639,7 +639,7 @@ function App() {
id="phone" id="phone"
name="phone" name="phone"
placeholder="+1(123)456 7890" placeholder="+1(123)456 7890"
className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500" className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
required={isSignUp} required={isSignUp}
/> />
</div> </div>
@@ -658,7 +658,7 @@ function App() {
id="address" id="address"
name="address" name="address"
placeholder="Your address" placeholder="Your address"
className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500" className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
required={isSignUp} required={isSignUp}
/> />
</div> </div>
@@ -680,7 +680,7 @@ function App() {
? "Create a secure password" ? "Create a secure password"
: "Enter your password" : "Enter your password"
} }
className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500" className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
required required
/> />
</div> </div>
@@ -689,7 +689,7 @@ function App() {
<button <button
type="submit" type="submit"
disabled={isLoading} disabled={isLoading}
className="w-full px-6 py-2 text-base font-medium text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 transition-colors disabled:bg-green-300" className="w-full px-6 py-2 text-base font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 transition-colors disabled:bg-emerald-300"
> >
{isLoading {isLoading
? "Please wait..." ? "Please wait..."
@@ -716,7 +716,7 @@ function App() {
id="verificationCode" id="verificationCode"
name="verificationCode" name="verificationCode"
placeholder="Enter the 6-digit code" placeholder="Enter the 6-digit code"
className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500" className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
required required
/> />
<p className="mt-1 text-xs text-gray-500"> <p className="mt-1 text-xs text-gray-500">
@@ -728,7 +728,7 @@ function App() {
<button <button
type="submit" type="submit"
disabled={isLoading} disabled={isLoading}
className="w-full px-6 py-2 text-base font-medium text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 transition-colors disabled:bg-green-300" className="w-full px-6 py-2 text-base font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 transition-colors disabled:bg-emerald-300"
> >
{isLoading ? "Please wait..." : "Verify Code"} {isLoading ? "Please wait..." : "Verify Code"}
</button> </button>
@@ -746,7 +746,7 @@ function App() {
type="button" type="button"
onClick={handleResendCode} onClick={handleResendCode}
disabled={isLoading} disabled={isLoading}
className="text-sm text-green-500 hover:text-green-700" className="text-sm text-emerald-600 hover:text-emerald-700"
> >
Resend code Resend code
</button> </button>
@@ -764,7 +764,7 @@ function App() {
<button <button
onClick={toggleAuthMode} onClick={toggleAuthMode}
type="button" type="button"
className="text-green-500 font-medium hover:text-green-700" className="text-emerald-600 font-medium hover:text-emerald-700"
> >
{isSignUp ? "Sign in" : "Sign up"} {isSignUp ? "Sign in" : "Sign up"}
</button> </button>

8
frontend/src/components/CategoryForm.jsx
View File

@@ -22,7 +22,7 @@ export default function CategoryForm({ visible, onAddCategory }) {
.classList.remove("opacity-0", "bg-red-200", "text-red-500"); .classList.remove("opacity-0", "bg-red-200", "text-red-500");
document document
.getElementById("noti") .getElementById("noti")
.classList.add("bg-green-200", "text-green-800"); .classList.add("bg-emerald-200", "text-emerald-800");
document.getElementById("noti").innerHTML = `${message.message}`; document.getElementById("noti").innerHTML = `${message.message}`;
setCategory(""); setCategory("");
onAddCategory(); onAddCategory();
@@ -42,18 +42,18 @@ export default function CategoryForm({ visible, onAddCategory }) {
return ( return (
<form onSubmit={handleSubmit} action="" className="flex p-2 items-center"> <form onSubmit={handleSubmit} action="" className="flex p-2 items-center">
<label htmlFor="category" className="text-green-700"> <label htmlFor="category" className="text-emerald-700">
Category: Category:
</label> </label>
<input <input
type="text" type="text"
className="border border-green-700 ml-2 rounded-sm focus:bg-green-100 text-green-900" className="border border-emerald-700 ml-2 rounded-sm focus:bg-emerald-100 text-emerald-900"
name="category" name="category"
id="category" id="category"
onChange={handleChange} onChange={handleChange}
value={category} value={category}
/> />
<button type="submit" className="text-2xl pl-1 text-green-700"> <button type="submit" className="text-2xl pl-1 text-emerald-700">
<MdAddBox className="text-3xl" /> <MdAddBox className="text-3xl" />
</button> </button>
<p <p

1
frontend/src/components/DashboardNav.jsx
View File

@@ -3,6 +3,7 @@ import { FaArrowLeft } from "react-icons/fa";
export default function DashboardNav({ handleCloseAdminDashboard }) { export default function DashboardNav({ handleCloseAdminDashboard }) {
return ( return (
<div className="w-48 min-w-[12rem] bg-gray-100 text-emerald-600 flex flex-col p-4 shadow-md"> <div className="w-48 min-w-[12rem] bg-gray-100 text-emerald-600 flex flex-col p-4 shadow-md">
<h2 className="text-lg font-semibold mb-4">Admin Dashboard</h2>
<button <button
onClick={handleCloseAdminDashboard} onClick={handleCloseAdminDashboard}
className="flex items-center gap-2 text-sm font-medium hover:text-emerald-700 underline underline-offset-4 transition" className="flex items-center gap-2 text-sm font-medium hover:text-emerald-700 underline underline-offset-4 transition"

2
frontend/src/components/FloatingAlert.jsx
View File

@@ -11,7 +11,7 @@ const FloatingAlert = ({ message, onClose, duration = 3000 }) => {
}, [onClose, duration]); }, [onClose, duration]);
return ( return (
<div className="fixed top-4 left-1/2 transform -translate-x-1/2 bg-emerald-500 text-white px-4 py-2 rounded-xl shadow-lg z-50 text-center"> <div className="fixed top-4 left-1/2 transform -translate-x-1/2 bg-emerald-600 text-white px-4 py-2 rounded-xl shadow-lg z-50 text-center">
{message} {message}
</div> </div>
); );

2
frontend/src/components/Navbar.jsx
View File

@@ -35,7 +35,7 @@ const Navbar = ({ onLogout, userName, isAdmin, handleShowAdminDashboard }) => {
alt="Campus Plug" alt="Campus Plug"
className="h-8 px-2" className="h-8 px-2"
/> />
<span className="hidden md:block text-emerald-600 font-bold text-xl"> <span className="hidden md:block text-emerald-700 font-bold text-xl">
Campus Plug Campus Plug
</span> </span>
</Link> </Link>

8
frontend/src/components/Pagination.jsx
View File

@@ -32,7 +32,7 @@ export default function Pagination({ pageNum, onChange }) {
onClick={() => { onClick={() => {
handleTogglePage("previous"); handleTogglePage("previous");
}} }}
className=" flex items-center justify-center px-3 h-8 ms-0 leading-tight border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 text-white bg-green-700 border border-gray-300 hover:bg-green-600 hover:text-white" className=" flex items-center justify-center px-3 h-8 ms-0 leading-tight border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 text-white bg-emerald-700 border border-gray-300 hover:bg-emerald-700 hover:text-white"
> >
<span className="sr-only">Previous</span> <span className="sr-only">Previous</span>
<svg <svg
@@ -56,9 +56,9 @@ export default function Pagination({ pageNum, onChange }) {
<li key={page}> <li key={page}>
<NavLink <NavLink
className={`${ className={`${
currentPage == page ? "bg-green-600" : "bg-green-700" currentPage == page ? "bg-emerald-700" : "bg-emerald-700"
} + } +
" flex items-center justify-center px-3 h-8 leading-tight text-white border border-gray-300 hover:bg-green-600 hover:text-white"`} " flex items-center justify-center px-3 h-8 leading-tight text-white border border-gray-300 hover:bg-emerald-700 hover:text-white"`}
onClick={() => { onClick={() => {
handleClick(page); handleClick(page);
}} }}
@@ -72,7 +72,7 @@ export default function Pagination({ pageNum, onChange }) {
onClick={() => { onClick={() => {
handleTogglePage("next"); handleTogglePage("next");
}} }}
className="flex items-center justify-center px-3 h-8 leading-tight border border-gray-300 rounded-e-lg text-white bg-green-700 border border-gray-300 hover:bg-green-600 hover:text-white" className="flex items-center justify-center px-3 h-8 leading-tight border border-gray-300 rounded-e-lg text-white bg-emerald-700 border border-gray-300 hover:bg-emerald-700 hover:text-white"
> >
<span className="sr-only">Next</span> <span className="sr-only">Next</span>
<svg <svg

2
frontend/src/components/UserDropdown.jsx
View File

@@ -55,7 +55,7 @@ const UserDropdown = ({
onClick={toggleDropdown} onClick={toggleDropdown}
> >
<div className="h-8 w-8 rounded-full bg-emerald-100 flex items-center justify-center"> <div className="h-8 w-8 rounded-full bg-emerald-100 flex items-center justify-center">
<User className="h-5 w-5 text-emerald-600" /> <User className="h-5 w-5 text-emerald-700" />
</div> </div>
</button> </button>

22
frontend/src/pages/Dashboard.jsx
View File

@@ -18,7 +18,7 @@ import { useNavigate } from "react-router-dom";
// Spinner Component // Spinner Component
const Spinner = () => ( const Spinner = () => (
<div className="flex justify-center items-center h-40 w-full"> <div className="flex justify-center items-center h-40 w-full">
<div className="w-12 h-12 border-4 border-green-500 border-dashed rounded-full animate-spin"></div> <div className="w-12 h-12 border-4 border-emerald-600 border-dashed rounded-full animate-spin"></div>
</div> </div>
); );
@@ -87,7 +87,7 @@ const Dashboard = ({
}) })
.finally(() => setLoading(false)); .finally(() => setLoading(false));
}, },
[fetchDataFn] [fetchDataFn],
); );
const handleRemove = (id) => { const handleRemove = (id) => {
@@ -116,7 +116,7 @@ const Dashboard = ({
<div className="w-full mt-6"> <div className="w-full mt-6">
<div className="flex flex-col md:flex-row justify-between items-center mb-4 w-full"> <div className="flex flex-col md:flex-row justify-between items-center mb-4 w-full">
<h2 className="text-xl font-semibold text-gray-700 mb-2 md:mb-0"> <h2 className="text-xl font-semibold text-gray-700 mb-2 md:mb-0">
Total: <span className="text-green-600">{total}</span> Total: <span className="text-emerald-700">{total}</span>
</h2> </h2>
{headerAction && <div>{headerAction}</div>} {headerAction && <div>{headerAction}</div>}
</div> </div>
@@ -124,7 +124,7 @@ const Dashboard = ({
{items.length > 0 ? ( {items.length > 0 ? (
<div className="w-full overflow-x-auto bg-white rounded-lg shadow"> <div className="w-full overflow-x-auto bg-white rounded-lg shadow">
<table className="min-w-full divide-y divide-gray-200 table-fixed"> <table className="min-w-full divide-y divide-gray-200 table-fixed">
<thead className="bg-green-600"> <thead className="bg-emerald-700">
<tr> <tr>
{columns.map((col) => ( {columns.map((col) => (
<th <th
@@ -296,7 +296,7 @@ export default function AdminDashboardTabs() {
headerAction={ headerAction={
<button <button
onClick={toggleForm} onClick={toggleForm}
className="flex items-center bg-green-500 rounded-md px-4 py-2 text-white text-sm hover:bg-green-600 transition-colors font-medium shadow" className="flex items-center bg-emerald-600 rounded-md px-4 py-2 text-white text-sm hover:bg-emerald-700 transition-colors font-medium shadow"
> >
<IoAddCircleSharp className="mr-1" size={18} /> <IoAddCircleSharp className="mr-1" size={18} />
Add Category Add Category
@@ -318,16 +318,10 @@ export default function AdminDashboardTabs() {
return ( return (
<div className="w-full min-h-screen bg-gray-50"> <div className="w-full min-h-screen bg-gray-50">
<div className="w-full px-4 py-8"> <div className="w-full px-4 py-8">
<div className="mb-8 flex justify-between items-center w-full">
<h1 className="text-2xl md:text-3xl font-bold text-gray-800">
Admin Dashboard
</h1>
</div>
{/* Mobile Tabs */} {/* Mobile Tabs */}
<div className="md:hidden w-full mb-4"> <div className="md:hidden w-full mb-4">
<select <select
className="w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50 p-2" className="w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-600 focus:ring focus:ring-emerald-600 focus:ring-opacity-50 p-2"
value={activeTab} value={activeTab}
onChange={(e) => { onChange={(e) => {
setActiveTab(parseInt(e.target.value)); setActiveTab(parseInt(e.target.value));
@@ -348,8 +342,8 @@ export default function AdminDashboardTabs() {
key={tab.key} key={tab.key}
className={`px-6 py-3 font-medium text-sm rounded-t-lg transition-colors ${ className={`px-6 py-3 font-medium text-sm rounded-t-lg transition-colors ${
index === activeTab index === activeTab
? "text-green-700 bg-white border-l border-t border-r border-gray-200 border-b-0" ? "text-emerald-700 bg-white border-l border-t border-r border-gray-200 border-b-0"
: "text-gray-600 hover:text-green-700 bg-gray-50" : "text-gray-600 hover:text-emerald-700 bg-gray-50"
}`} }`}
onClick={() => { onClick={() => {
setActiveTab(index); setActiveTab(index);

56
frontend/src/pages/Favorites.jsx
View File

@@ -119,7 +119,7 @@ const Favorites = () => {
</p> </p>
<Link <Link
to="/" to="/"
className="inline-block bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4" className="inline-block bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
> >
Browse Listings Browse Listings
</Link> </Link>
@@ -161,7 +161,7 @@ const Favorites = () => {
</button> </button>
</div> </div>
<p className="text-emerald-600 font-bold mt-1"> <p className="text-emerald-700 font-bold mt-1">
${product.price.toFixed(2)} ${product.price.toFixed(2)}
</p> </p>
@@ -200,56 +200,8 @@ const Favorites = () => {
)} )}
<footer className="bg-gray-800 text-white py-6 mt-12"> <footer className="bg-gray-800 text-white py-6 mt-12">
<div className="container mx-auto px-4"> <div className="border-t border-gray-700 text-center text-sm text-gray-400">
<div className="flex flex-col md:flex-row justify-between items-center"> <p>© 2025 Campus Marketplace. All rights reserved.</p>
<div className="mb-4 md:mb-0">
<h3 className="text-lg font-semibold mb-2">Campus Marketplace</h3>
<p className="text-gray-400 text-sm">
Your trusted university trading platform
</p>
</div>
<div className="flex space-x-6">
<div>
<h4 className="font-medium mb-2">Quick Links</h4>
<ul className="text-sm text-gray-400">
<li className="mb-1">
<Link to="/" className="hover:text-white transition">
Home
</Link>
</li>
<li className="mb-1">
<Link to="/selling" className="hover:text-white transition">
Sell an Item
</Link>
</li>
<li className="mb-1">
<Link
to="/favorites"
className="hover:text-white transition"
>
My Favorites
</Link>
</li>
</ul>
</div>
<div>
<h4 className="font-medium mb-2">Contact</h4>
<ul className="text-sm text-gray-400">
<li className="mb-1">support@campusmarket.com</li>
<li className="mb-1">University of Calgary</li>
</ul>
</div>
</div>
</div>
<div className="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-400">
<p>
© {new Date().getFullYear()} Campus Marketplace. All rights
reserved.
</p>
</div>
</div> </div>
</footer> </footer>
</div> </div>

62
frontend/src/pages/Home.jsx
View File

@@ -219,7 +219,7 @@ const Home = () => {
// Loading indicator component // Loading indicator component
const LoadingSection = () => ( const LoadingSection = () => (
<div className="flex justify-center items-center h-48"> <div className="flex justify-center items-center h-48">
<Loader className="animate-spin text-emerald-600 h-8 w-8" /> <Loader className="animate-spin text-emerald-700 h-8 w-8" />
</div> </div>
); );
@@ -243,7 +243,7 @@ const Home = () => {
e.preventDefault(); e.preventDefault();
toggleFavorite(product.id); toggleFavorite(product.id);
}} }}
className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm" className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-700 hover:bg-emerald-600 transition shadow-sm"
> >
<Bookmark className="text-white w-5 h-5" /> <Bookmark className="text-white w-5 h-5" />
</button> </button>
@@ -253,7 +253,7 @@ const Home = () => {
<h3 className="text-lg font-medium text-gray-800 leading-tight"> <h3 className="text-lg font-medium text-gray-800 leading-tight">
{product.title} {product.title}
</h3> </h3>
<span className="font-semibold text-emerald-600 block mt-1"> <span className="font-semibold text-emerald-700 block mt-1">
${product.price} ${product.price}
</span> </span>
@@ -353,7 +353,7 @@ const Home = () => {
</p> </p>
<button <button
onClick={handleSelling} onClick={handleSelling}
className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-6 focus:outline-none focus:ring-2 focus:ring-emerald-400 transition-colors" className="bg-emerald-700 hover:bg-emerald-700 text-white font-medium py-2 px-6 focus:outline-none focus:ring-2 focus:ring-emerald-400 transition-colors"
> >
Post an Item Post an Item
</button> </button>
@@ -405,59 +405,9 @@ const Home = () => {
</ScrollableProductList> </ScrollableProductList>
)} )}
</div> </div>
{/* Footer */}
<footer className="bg-gray-800 text-white py-6 mt-12"> <footer className="bg-gray-800 text-white py-6 mt-12">
<div className="container mx-auto px-4"> <div className="border-t border-gray-700 text-center text-sm text-gray-400">
<div className="flex flex-col md:flex-row justify-between items-center"> <p>© 2025 Campus Marketplace. All rights reserved.</p>
<div className="mb-4 md:mb-0">
<h3 className="text-lg font-semibold mb-2">Campus Marketplace</h3>
<p className="text-gray-400 text-sm">
Your trusted university trading platform
</p>
</div>
<div className="flex space-x-6">
<div>
<h4 className="font-medium mb-2">Quick Links</h4>
<ul className="text-sm text-gray-400">
<li className="mb-1">
<Link to="/" className="hover:text-white transition">
Home
</Link>
</li>
<li className="mb-1">
<Link to="/selling" className="hover:text-white transition">
Sell an Item
</Link>
</li>
<li className="mb-1">
<Link
to="/favorites"
className="hover:text-white transition"
>
My Favorites
</Link>
</li>
</ul>
</div>
<div>
<h4 className="font-medium mb-2">Contact</h4>
<ul className="text-sm text-gray-400">
<li className="mb-1">support@campusmarket.com</li>
<li className="mb-1">University of Calgary</li>
</ul>
</div>
</div>
</div>
<div className="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-400">
<p>
© {new Date().getFullYear()} Campus Marketplace. All rights
reserved.
</p>
</div>
</div> </div>
</footer> </footer>
</div> </div>

24
frontend/src/pages/ProductDetail.jsx
View File

@@ -247,7 +247,7 @@ const ProductDetail = () => {
if (loading.product) { if (loading.product) {
return ( return (
<div className="flex justify-center items-center h-screen"> <div className="flex justify-center items-center h-screen">
<div className="animate-spin h-32 w-32 border-t-2 border-emerald-600"></div> <div className="animate-spin h-32 w-32 border-t-2 border-emerald-700"></div>
</div> </div>
); );
} }
@@ -261,7 +261,7 @@ const ProductDetail = () => {
<p className="text-gray-600">{error.product}</p> <p className="text-gray-600">{error.product}</p>
<Link <Link
to="/" to="/"
className="mt-4 inline-block bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700" className="mt-4 inline-block bg-emerald-700 text-white px-4 py-2 hover:bg-emerald-700"
> >
Back to Listings Back to Listings
</Link> </Link>
@@ -278,7 +278,7 @@ const ProductDetail = () => {
<h2 className="text-2xl text-red-500 mb-4">Product Not Found</h2> <h2 className="text-2xl text-red-500 mb-4">Product Not Found</h2>
<Link <Link
to="/" to="/"
className="mt-4 inline-block bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700" className="mt-4 inline-block bg-emerald-700 text-white px-4 py-2 hover:bg-emerald-700"
> >
Back to Listings Back to Listings
</Link> </Link>
@@ -356,7 +356,7 @@ const ProductDetail = () => {
{product.images.map((image, index) => ( {product.images.map((image, index) => (
<div <div
key={index} key={index}
className={`bg-white border ${currentImage === index ? "border-emerald-600 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`} className={`bg-white border ${currentImage === index ? "border-emerald-700 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
onClick={() => selectImage(index)} onClick={() => selectImage(index)}
> >
<img <img
@@ -386,7 +386,7 @@ const ProductDetail = () => {
e.preventDefault(); e.preventDefault();
toggleFavorite(product.ProductID); toggleFavorite(product.ProductID);
}} }}
className="top-0 p-2 rounded-bl-md bg-emerald-700 hover:bg-emerald-600 transition shadow-sm" className="top-0 p-2 rounded-bl-md bg-emerald-700 hover:bg-emerald-700 transition shadow-sm"
> >
<Bookmark className="text-white w-5 h-5" /> <Bookmark className="text-white w-5 h-5" />
</button> </button>
@@ -455,7 +455,7 @@ const ProductDetail = () => {
alert(`Error: ${error.message}`); alert(`Error: ${error.message}`);
} }
}} }}
className="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-4 mb-3" className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-3 px-4 mb-3"
> >
Contact Seller Contact Seller
</button> </button>
@@ -467,7 +467,7 @@ const ProductDetail = () => {
href={`tel:${product.SellerPhone}`} href={`tel:${product.SellerPhone}`}
className="flex items-center gap-2 p-3 hover:bg-gray-50 border-b border-gray-100" className="flex items-center gap-2 p-3 hover:bg-gray-50 border-b border-gray-100"
> >
<Phone className="h-5 w-5 text-emerald-600" /> <Phone className="h-5 w-5 text-emerald-700" />
<span>Call Seller</span> <span>Call Seller</span>
</a> </a>
)} )}
@@ -477,7 +477,7 @@ const ProductDetail = () => {
href={`mailto:${product.SellerEmail}`} href={`mailto:${product.SellerEmail}`}
className="flex items-center gap-2 p-3 hover:bg-gray-50" className="flex items-center gap-2 p-3 hover:bg-gray-50"
> >
<Mail className="h-5 w-5 text-emerald-600" /> <Mail className="h-5 w-5 text-emerald-700" />
<span>Email Seller</span> <span>Email Seller</span>
</a> </a>
)} )}
@@ -514,7 +514,7 @@ const ProductDetail = () => {
<div className="bg-white border border-gray-200 p-6"> <div className="bg-white border border-gray-200 p-6">
{loading.reviews ? ( {loading.reviews ? (
<div className="flex justify-center py-8"> <div className="flex justify-center py-8">
<div className="animate-spin h-8 w-8 border-t-2 border-emerald-600"></div> <div className="animate-spin h-8 w-8 border-t-2 border-emerald-700"></div>
</div> </div>
) : error.reviews ? ( ) : error.reviews ? (
<div className="text-red-500 mb-4"> <div className="text-red-500 mb-4">
@@ -561,7 +561,7 @@ const ProductDetail = () => {
<div className="mt-4"> <div className="mt-4">
<button <button
onClick={() => setShowReviewForm(true)} onClick={() => setShowReviewForm(true)}
className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4" className="bg-emerald-700 hover:bg-emerald-700 text-white font-medium py-2 px-4"
> >
Write a Review Write a Review
</button> </button>
@@ -619,7 +619,7 @@ const ProductDetail = () => {
id="comment" id="comment"
value={reviewForm.comment} value={reviewForm.comment}
onChange={handleReviewInputChange} onChange={handleReviewInputChange}
className="w-full p-3 border border-gray-300 focus:outline-none focus:border-emerald-600" className="w-full p-3 border border-gray-300 focus:outline-none focus:border-emerald-700"
rows="4" rows="4"
required required
></textarea> ></textarea>
@@ -635,7 +635,7 @@ const ProductDetail = () => {
</button> </button>
<button <button
type="submit" type="submit"
className="px-4 py-2 bg-emerald-600 text-white hover:bg-emerald-700" className="px-4 py-2 bg-emerald-700 text-white hover:bg-emerald-700"
disabled={loading.submitting} disabled={loading.submitting}
> >
{loading.submitting ? "Submitting..." : "Submit Review"} {loading.submitting ? "Submitting..." : "Submit Review"}

57
frontend/src/pages/SearchPage.jsx
View File

@@ -146,7 +146,7 @@ const SearchPage = () => {
<div className="flex space-x-2"> <div className="flex space-x-2">
<button <button
onClick={applyFilters} onClick={applyFilters}
className="w-full bg-emerald-500 text-white p-3 hover:bg-emerald-600 transition-colors" className="w-full bg-emerald-600 text-white p-3 hover:bg-emerald-700 transition-colors"
> >
Apply Filters Apply Filters
</button> </button>
@@ -187,7 +187,7 @@ const SearchPage = () => {
<h3 className="text-lg font-medium text-gray-800"> <h3 className="text-lg font-medium text-gray-800">
{listing.title} {listing.title}
</h3> </h3>
<p className="text-emerald-600 font-semibold"> <p className="text-emerald-700 font-semibold">
${Number(listing.price).toFixed(2)} ${Number(listing.price).toFixed(2)}
</p> </p>
</div> </div>
@@ -196,58 +196,9 @@ const SearchPage = () => {
</div> </div>
</div> </div>
</div> </div>
{/* Footer - Added here */}
<footer className="bg-gray-800 text-white py-6 mt-12"> <footer className="bg-gray-800 text-white py-6 mt-12">
<div className="container mx-auto px-4"> <div className="border-t border-gray-700 text-center text-sm text-gray-400">
<div className="flex flex-col md:flex-row justify-between items-center"> <p>© 2025 Campus Marketplace. All rights reserved.</p>
<div className="mb-4 md:mb-0">
<h3 className="text-lg font-semibold mb-2">Campus Marketplace</h3>
<p className="text-gray-400 text-sm">
Your trusted university trading platform
</p>
</div>
<div className="flex space-x-6">
<div>
<h4 className="font-medium mb-2">Quick Links</h4>
<ul className="text-sm text-gray-400">
<li className="mb-1">
<Link to="/" className="hover:text-white transition">
Home
</Link>
</li>
<li className="mb-1">
<Link to="/selling" className="hover:text-white transition">
Sell an Item
</Link>
</li>
<li className="mb-1">
<Link
to="/favorites"
className="hover:text-white transition"
>
My Favorites
</Link>
</li>
</ul>
</div>
<div>
<h4 className="font-medium mb-2">Contact</h4>
<ul className="text-sm text-gray-400">
<li className="mb-1">support@campusmarket.com</li>
<li className="mb-1">University of Calgary</li>
</ul>
</div>
</div>
</div>
<div className="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-400">
<p>
© {new Date().getFullYear()} Campus Marketplace. All rights
reserved.
</p>
</div>
</div> </div>
</footer> </footer>
</div> </div>

33
frontend/src/pages/Selling.jsx
View File

@@ -323,7 +323,7 @@ const Selling = () => {
{!showForm && ( {!showForm && (
<button <button
onClick={handleAddProduct} onClick={handleAddProduct}
className="bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700" className="bg-emerald-700 text-white px-4 py-2 hover:bg-emerald-700"
> >
+ Add New Product + Add New Product
</button> </button>
@@ -335,7 +335,7 @@ const Selling = () => {
{/* Back Button */} {/* Back Button */}
<button <button
onClick={() => setShowForm(false)} onClick={() => setShowForm(false)}
className="mb-4 text-emerald-600 hover:text-emerald-800 flex items-center gap-1" className="mb-4 text-emerald-700 hover:text-emerald-800 flex items-center gap-1"
> >
<ChevronLeft size={16} /> <ChevronLeft size={16} />
<span>Back to Listings</span> <span>Back to Listings</span>
@@ -363,7 +363,7 @@ const Selling = () => {
name: e.target.value, name: e.target.value,
}) })
} }
className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none" className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-600 focus:outline-none"
/> />
</div> </div>
@@ -382,7 +382,7 @@ const Selling = () => {
price: e.target.value, price: e.target.value,
}) })
} }
className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none" className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-600 focus:outline-none"
/> />
</div> </div>
@@ -406,7 +406,7 @@ const Selling = () => {
<select <select
value={selectedCategory} value={selectedCategory}
onChange={(e) => setSelectedCategory(e.target.value)} onChange={(e) => setSelectedCategory(e.target.value)}
className="flex-1 px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none" className="flex-1 px-3 py-2 border border-gray-300 focus:border-emerald-600 focus:outline-none"
> >
<option value="" disabled> <option value="" disabled>
Select a category Select a category
@@ -425,7 +425,7 @@ const Selling = () => {
type="button" type="button"
onClick={addCategory} onClick={addCategory}
disabled={!selectedCategory} disabled={!selectedCategory}
className="px-3 py-2 bg-emerald-600 text-white hover:bg-emerald-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center gap-1" className="px-3 py-2 bg-emerald-700 text-white hover:bg-emerald-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center gap-1"
> >
<Plus size={16} /> <Plus size={16} />
<span>Add</span> <span>Add</span>
@@ -444,7 +444,7 @@ const Selling = () => {
<button <button
type="button" type="button"
onClick={() => removeCategory(category)} onClick={() => removeCategory(category)}
className="ml-1 text-emerald-600 hover:text-emerald-800" className="ml-1 text-emerald-700 hover:text-emerald-800"
> >
<X size={14} /> <X size={14} />
</button> </button>
@@ -475,7 +475,7 @@ const Selling = () => {
}) })
} }
rows="4" rows="4"
className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none" className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-600 focus:outline-none"
placeholder="Describe your product in detail..." placeholder="Describe your product in detail..."
></textarea> ></textarea>
</div> </div>
@@ -504,7 +504,7 @@ const Selling = () => {
htmlFor="image-upload" htmlFor="image-upload"
className="block w-full p-3 border border-gray-300 bg-gray-50 text-center cursor-pointer hover:bg-gray-100" className="block w-full p-3 border border-gray-300 bg-gray-50 text-center cursor-pointer hover:bg-gray-100"
> >
<span className="text-emerald-600 font-medium"> <span className="text-emerald-700 font-medium">
Click to upload images Click to upload images
</span> </span>
</label> </label>
@@ -588,7 +588,7 @@ const Selling = () => {
onClick={markAsSold} onClick={markAsSold}
className={`px-4 py-2 rounded-md transition-colors ${ className={`px-4 py-2 rounded-md transition-colors ${
editingProduct.isSold editingProduct.isSold
? "bg-green-600 text-white hover:bg-green-700" ? "bg-emerald-700 text-white hover:bg-emerald-700"
: "bg-red-600 text-white hover:bg-red-700" : "bg-red-600 text-white hover:bg-red-700"
}`} }`}
> >
@@ -598,7 +598,7 @@ const Selling = () => {
<button <button
onClick={handleSaveProduct} onClick={handleSaveProduct}
className="bg-emerald-600 text-white px-6 py-2 hover:bg-emerald-700 rounded-md" className="bg-emerald-700 text-white px-6 py-2 hover:bg-emerald-700 rounded-md"
> >
{editingProduct.ProductID ? "Update Product" : "Add Product"} {editingProduct.ProductID ? "Update Product" : "Add Product"}
</button> </button>
@@ -613,7 +613,7 @@ const Selling = () => {
</p> </p>
<button <button
onClick={handleAddProduct} onClick={handleAddProduct}
className="bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700" className="bg-emerald-700 text-white px-4 py-2 hover:bg-emerald-700"
> >
Create Your First Listing Create Your First Listing
</button> </button>
@@ -645,7 +645,7 @@ const Selling = () => {
</h3> </h3>
</div> </div>
<p className="text-emerald-600 font-bold mt-1"> <p className="text-emerald-700 font-bold mt-1">
${product.Price} ${product.Price}
</p> </p>
@@ -679,7 +679,7 @@ const Selling = () => {
e.preventDefault(); e.preventDefault();
handleEditProduct(product); handleEditProduct(product);
}} }}
className="text-emerald-600 hover:text-emerald-800 font-medium" className="text-emerald-700 hover:text-emerald-800 font-medium"
> >
Edit Edit
</button> </button>
@@ -692,6 +692,11 @@ const Selling = () => {
)} )}
</> </>
)} )}
<footer className="bg-gray-800 text-white py-6 mt-12">
<div className="border-t border-gray-700 text-center text-sm text-gray-400">
<p>© 2025 Campus Marketplace. All rights reserved.</p>
</div>
</footer>
</div> </div>
); );
}; };

21
frontend/src/pages/Settings.jsx
View File

@@ -190,7 +190,7 @@ const Settings = () => {
if (isLoading) { if (isLoading) {
return ( return (
<div className="flex justify-center items-center h-64"> <div className="flex justify-center items-center h-64">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-500"></div> <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-600"></div>
</div> </div>
); );
} }
@@ -234,7 +234,7 @@ const Settings = () => {
id="name" id="name"
value={userData.name} value={userData.name}
onChange={handleInputChange} onChange={handleInputChange}
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500" className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
required required
/> />
</div> </div>
@@ -251,7 +251,7 @@ const Settings = () => {
id="email" id="email"
value={userData.email} value={userData.email}
onChange={handleInputChange} onChange={handleInputChange}
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500" className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
required required
readOnly // Email is often used as identifier and not changeable readOnly // Email is often used as identifier and not changeable
/> />
@@ -269,7 +269,7 @@ const Settings = () => {
id="phone" id="phone"
value={userData.phone} value={userData.phone}
onChange={handleInputChange} onChange={handleInputChange}
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500" className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
/> />
</div> </div>
@@ -285,7 +285,7 @@ const Settings = () => {
id="UCID" id="UCID"
value={userData.UCID} value={userData.UCID}
onChange={handleInputChange} onChange={handleInputChange}
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500" className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
required required
/> />
</div> </div>
@@ -302,7 +302,7 @@ const Settings = () => {
id="address" id="address"
value={userData.address} value={userData.address}
onChange={handleInputChange} onChange={handleInputChange}
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500" className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
/> />
</div> </div>
<div> <div>
@@ -317,14 +317,14 @@ const Settings = () => {
id="password" id="password"
value={userData.password} value={userData.password}
onChange={handleInputChange} onChange={handleInputChange}
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500" className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
/> />
</div> </div>
</div> </div>
<button <button
type="submit" type="submit"
className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4" className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
> >
Update Profile Update Profile
</button> </button>
@@ -395,6 +395,11 @@ const Settings = () => {
</div> </div>
</div> </div>
</div> </div>
<footer className="bg-gray-800 text-white py-6 mt-12">
<div className="border-t border-gray-700 text-center text-sm text-gray-400">
<p>© 2025 Campus Marketplace. All rights reserved.</p>
</div>
</footer>
</div> </div>
); );
}; };

64
frontend/src/pages/Transactions.jsx
View File

@@ -14,7 +14,7 @@ const Transactions = () => {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ userID: 1 }), // replace with actual userID body: JSON.stringify({ userID: 1 }), // replace with actual userID
} },
); );
if (!response.ok) throw new Error(`HTTP ${response.status}`); if (!response.ok) throw new Error(`HTTP ${response.status}`);
const { transactions: txData } = await response.json(); const { transactions: txData } = await response.json();
@@ -29,7 +29,7 @@ const Transactions = () => {
image: tx.Image_URL || "/default-image.jpg", image: tx.Image_URL || "/default-image.jpg",
date: tx.Date, date: tx.Date,
status: tx.PaymentStatus, status: tx.PaymentStatus,
})) })),
); );
} catch (error) { } catch (error) {
console.error("Failed to fetch transactions:", error); console.error("Failed to fetch transactions:", error);
@@ -47,7 +47,7 @@ const Transactions = () => {
method: "DELETE", method: "DELETE",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ transactionID: id }), body: JSON.stringify({ transactionID: id }),
} },
); );
const data = await res.json(); const data = await res.json();
if (data.success) { if (data.success) {
@@ -86,7 +86,7 @@ const Transactions = () => {
</p> </p>
<Link <Link
to="/" to="/"
className="inline-block bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4" className="inline-block bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
> >
Browse Listings Browse Listings
</Link> </Link>
@@ -127,7 +127,7 @@ const Transactions = () => {
{tx.name} {tx.name}
</h3> </h3>
{tx.price !== null && ( {tx.price !== null && (
<p className="text-emerald-600 font-bold mt-1"> <p className="text-emerald-700 font-bold mt-1">
${tx.price.toFixed(2)} ${tx.price.toFixed(2)}
</p> </p>
)} )}
@@ -152,58 +152,8 @@ const Transactions = () => {
)} )}
<footer className="bg-gray-800 text-white py-6 mt-12"> <footer className="bg-gray-800 text-white py-6 mt-12">
<div className="container mx-auto px-4"> <div className="border-t border-gray-700 text-center text-sm text-gray-400">
<div className="flex flex-col md:flex-row justify-between items-center"> <p>© 2025 Campus Marketplace. All rights reserved.</p>
<div className="mb-4 md:mb-0">
<h3 className="text-lg font-semibold mb-2">
Campus Marketplace
</h3>
<p className="text-gray-400 text-sm">
Your trusted university trading platform
</p>
</div>
<div className="flex space-x-6">
<div>
<h4 className="font-medium mb-2">Quick Links</h4>
<ul className="text-sm text-gray-400">
<li className="mb-1">
<Link to="/" className="hover:text-white transition">
Home
</Link>
</li>
<li className="mb-1">
<Link
to="/selling"
className="hover:text-white transition"
>
Sell an Item
</Link>
</li>
<li className="mb-1">
<Link
to="/favorites"
className="hover:text-white transition"
>
My Favorites
</Link>
</li>
</ul>
</div>
<div>
<h4 className="font-medium mb-2">Contact</h4>
<ul className="text-sm text-gray-400">
<li className="mb-1">support@campusmarket.com</li>
<li className="mb-1">University of Calgary</li>
</ul>
</div>
</div>
</div>
<div className="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-400">
<p>
© {new Date().getFullYear()} Campus Marketplace. All rights
reserved.
</p>
</div>
</div> </div>
</footer> </footer>
</div> </div>

BIN
recommondation-engine/__pycache__/app.cpython-313.pyc
View File

Binary file not shown.