From a790f32ff93c5f7cb218b2a0906de2cb2c4385a0 Mon Sep 17 00:00:00 2001 From: Hossein Date: Wed, 30 Jul 2025 22:53:04 +0200 Subject: [PATCH 01/97] update dependencies and DB pass --- server/package-lock.json | 8 ++++---- server/package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/server/package-lock.json b/server/package-lock.json index 00bf246..71d816a 100644 --- a/server/package-lock.json +++ b/server/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "bcrypt": "^6.0.0", "cors": "^2.8.5", - "dotenv": "^16.5.0", + "dotenv": "^16.6.1", "express": "^5.1.0", "jsonwebtoken": "^9.0.2", "mongodb-memory-server": "^10.1.0", @@ -3966,9 +3966,9 @@ } }, "node_modules/dotenv": { - "version": "16.5.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz", - "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==", + "version": "16.6.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz", + "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==", "license": "BSD-2-Clause", "engines": { "node": ">=12" diff --git a/server/package.json b/server/package.json index b0a33b2..0512bd1 100644 --- a/server/package.json +++ b/server/package.json @@ -38,7 +38,7 @@ "dependencies": { "bcrypt": "^6.0.0", "cors": "^2.8.5", - "dotenv": "^16.5.0", + "dotenv": "^16.6.1", "express": "^5.1.0", "jsonwebtoken": "^9.0.2", "mongodb-memory-server": "^10.1.0", From ae5561150015be6015d8b2c8ba5f69c5a6381783 Mon Sep 17 00:00:00 2001 From: Hossein Date: Wed, 30 Jul 2025 23:10:11 +0200 Subject: [PATCH 02/97] update dependencies and DB pass --- server/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/package.json b/server/package.json index 0512bd1..c21d0ed 100644 --- a/server/package.json +++ b/server/package.json @@ -44,4 +44,4 @@ "mongodb-memory-server": "^10.1.0", "mongoose": "^8.3.2" } -} \ No newline at end of file +} From 27fe3f00227d1b5789521274075ae3afb33af773 Mon Sep 17 00:00:00 2001 From: Hossein Date: Wed, 30 Jul 2025 23:18:08 +0200 Subject: [PATCH 03/97] update dependencies and DB pass --- client/src/components/ItemSlider.css | 1 + 1 file changed, 1 insertion(+) diff --git a/client/src/components/ItemSlider.css b/client/src/components/ItemSlider.css index d07edda..8adb99e 100644 --- a/client/src/components/ItemSlider.css +++ b/client/src/components/ItemSlider.css @@ -11,6 +11,7 @@ font-family: "PT Serif", serif; margin: 1rem auto; margin-top: -1rem; + background-color: #29729a; } .slider-container { From 885c3908b2a47e87d753575c1c268305599314d3 Mon Sep 17 00:00:00 2001 From: Hossein Date: Wed, 30 Jul 2025 23:22:24 +0200 Subject: [PATCH 04/97] test --- client/src/components/ItemSlider.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/ItemSlider.css b/client/src/components/ItemSlider.css index 8adb99e..e3e234f 100644 --- a/client/src/components/ItemSlider.css +++ b/client/src/components/ItemSlider.css @@ -11,7 +11,7 @@ font-family: "PT Serif", serif; margin: 1rem auto; margin-top: -1rem; - background-color: #29729a; + background-color: #2e84b3; } .slider-container { From 6ddbca83d5eff6f9b8ecfcca0bec23e88944052e Mon Sep 17 00:00:00 2001 From: Hossein Date: Fri, 10 Oct 2025 16:07:18 +0200 Subject: [PATCH 05/97] update names --- client/src/components/AuthToggle.jsx | 1 - client/src/components/Header.css | 67 ++-------------------------- client/src/components/Header.jsx | 4 +- 3 files changed, 5 insertions(+), 67 deletions(-) diff --git a/client/src/components/AuthToggle.jsx b/client/src/components/AuthToggle.jsx index e2382cd..165673c 100644 --- a/client/src/components/AuthToggle.jsx +++ b/client/src/components/AuthToggle.jsx @@ -1,6 +1,5 @@ import PropTypes from "prop-types"; -// Component to toggle between login and registration modes export default function AuthToggle({ isLogin, toggleMode }) { return (
diff --git a/client/src/components/Header.css b/client/src/components/Header.css index 33fb7a8..1d67ce2 100644 --- a/client/src/components/Header.css +++ b/client/src/components/Header.css @@ -14,14 +14,14 @@ position: relative; } -.left-section, -.center-section, +.header-left, +.header-center, .header-right { display: flex; align-items: center; } -.center-section { +.header-center { position: absolute; left: 50%; transform: translateX(-50%); @@ -96,64 +96,3 @@ cursor: pointer; padding: 0.6rem; } - -@media (max-width: 900px) { - .logo { - margin-left: 0rem; - } -} -@media (max-width: 720px) { - .header { - flex-wrap: nowrap; - height: 60px; - } - - .center-section { - flex-grow: 0; - width: 100%; - justify-content: center; - } - .logo { - width: 18cqh; - margin: 0 0 0 0; - } - .user-name { - font-size: 10px; - } -} -@media (max-width: 480px) { - .header { - flex-direction: row; - padding: 1rem; - width: auto; - } - - .center-section { - width: 50%; - justify-content: center; - } - .left-section { - width: 50%; - justify-content: flex-start; - margin-bottom: 0.5rem; - } - .menu-icon { - font-size: 24px; - margin-right: 0.2rem; - } - - .header-right { - justify-content: flex-end; - margin-bottom: 0.5rem; - flex-direction: row; - } - .header-icon { - width: 15px; - } - .logo { - width: 14cqh; - } - .user-name { - font-size: 9px; - } -} diff --git a/client/src/components/Header.jsx b/client/src/components/Header.jsx index b9b1867..774eeed 100644 --- a/client/src/components/Header.jsx +++ b/client/src/components/Header.jsx @@ -49,7 +49,7 @@ const Header = () => { return ( <>
-
+
setIsSidebarOpen(true)} @@ -62,7 +62,7 @@ const Header = () => { Company Logo
-
+
From f11252e7757c9d7c4e5ec875f36f87c880280b4c Mon Sep 17 00:00:00 2001 From: Hossein Date: Sun, 12 Oct 2025 19:19:48 +0200 Subject: [PATCH 06/97] update --- client/src/components/Header.css | 24 +++++++++++++++--------- client/src/components/Header.jsx | 2 +- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/client/src/components/Header.css b/client/src/components/Header.css index 1d67ce2..92d6085 100644 --- a/client/src/components/Header.css +++ b/client/src/components/Header.css @@ -1,17 +1,22 @@ .header { + position: fixed; + top: 10px; + left: 0; + right: 0; display: flex; align-items: center; justify-content: space-between; height: 80px; width: 100%; - background-color: #e6e6e7; - color: #686666; padding: 0 1.5rem; border-radius: 12px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.706); font-family: "PT Serif", serif; flex-wrap: wrap; - position: relative; + z-index: 1000; + background: rgba(230, 230, 231, 0.6); + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(3px); } .header-left, @@ -45,21 +50,22 @@ transform 0.3s ease; } -.logo { +.header-logo { height: 50px; cursor: pointer; object-fit: contain; transition: transform 0.3s ease; + border: none; + padding-left: 10px; } -.logo:hover { +.header-logo:hover { transform: scale(1.2); } .logo-button { - margin-left: 3rem; border: none; - cursor: pointer; - background-color: #e6e6e7; + background: none; + padding: 0; } .header-right .header-icon:hover { color: #0798e6; diff --git a/client/src/components/Header.jsx b/client/src/components/Header.jsx index 774eeed..9fcf3e9 100644 --- a/client/src/components/Header.jsx +++ b/client/src/components/Header.jsx @@ -59,7 +59,7 @@ const Header = () => { onClose={() => setIsSidebarOpen(false)} />
From 940a4386fd8a34e7d8947b8d3816f1e053d86310 Mon Sep 17 00:00:00 2001 From: Hossein Date: Sun, 12 Oct 2025 19:22:49 +0200 Subject: [PATCH 07/97] update --- client/src/components/ExplainText.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/ExplainText.css b/client/src/components/ExplainText.css index 95432dd..603af52 100644 --- a/client/src/components/ExplainText.css +++ b/client/src/components/ExplainText.css @@ -3,7 +3,7 @@ padding: 2rem; text-align: center; border-radius: 100px; - margin: 3rem auto; + margin: 10rem auto; width: 80%; height: 100%; max-width: 1000px; From aca6cea2d9720a532a1f67db72ee4ab41bce7fda Mon Sep 17 00:00:00 2001 From: Hossein Date: Sun, 12 Oct 2025 20:32:43 +0200 Subject: [PATCH 08/97] update --- client/src/components/SearchBar.css | 129 +++++++++++++++++----------- 1 file changed, 77 insertions(+), 52 deletions(-) diff --git a/client/src/components/SearchBar.css b/client/src/components/SearchBar.css index bf92ab1..0c945ec 100644 --- a/client/src/components/SearchBar.css +++ b/client/src/components/SearchBar.css @@ -1,80 +1,105 @@ .search-form { - position: relative; - max-width: 350px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.7); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 50px; + padding: 0.4rem 0.8rem; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); + transition: all 0.3s ease; width: 100%; - margin: 0 auto; + max-width: 340px; +} + +.search-form:focus-within { + box-shadow: 0 0 10px rgba(7, 152, 230, 0.4); + transform: scale(1.02); } .search-input { - display: flex; - align-items: center; - gap: 1rem; - font-family: "PT Serif", serif; - flex-direction: row; - width: 100%; - padding: 10px 45px 10px 15px; - border-radius: 25px; - border: 1.5px solid #ccc; - background-color: #fafafa; - font-size: 15px; - color: #444; + flex: 1; + border: none; outline: none; - transition: border-color 0.3s ease; -} -.search-bar-inline { - max-width: 350px; - width: 100%; + background: transparent; + color: #333; + font-size: 16px; + padding: 0.5rem 0.8rem; + font-family: "PT Serif", serif; } -.search-input:focus { - border-color: #0798e6; - background-color: #fff; - box-shadow: 0 0 8px rgba(7, 152, 230, 0.5); + +.search-input::placeholder { + color: #888; + font-style: italic; } .search-button { - position: absolute; - top: 50%; - right: 15px; - transform: translateY(-50%); - background: transparent; border: none; + background: #0798e6; + color: #fff; + border-radius: 50%; + width: 38px; + height: 38px; + display: flex; + align-items: center; + justify-content: center; cursor: pointer; - padding: 0; - color: #888; - font-size: 20px; - transition: color 0.3s ease; + transition: all 0.3s ease; } .search-button:hover { - color: #0798e6; + background: #047fc0; + transform: scale(1.1); } .search-icon { - pointer-events: none; + font-size: 20px; } -.search-bar-wrapper { - display: none; - width: 100%; - padding: 0 1.5rem; - margin-top: 0.5rem; - box-sizing: border-box; +/* Responsive */ +@media (max-width: 768px) { + .search-form { + max-width: 260px; + padding: 0.3rem 0.6rem; + } + + .search-input { + font-size: 14px; + } + + .search-button { + width: 32px; + height: 32px; + } } +@media (max-width: 480px) { + .search-form { + max-width: 200px; + padding: 0.2rem 0.1rem; + } -@media (max-width: 600px) { - .search-bar-wrapper { - width: 100%; - display: flex; - justify-content: center; - margin-top: 0.5rem; - padding: 0 1rem; + .search-input { + font-size: 12px; + padding: 0.3rem 0.2rem; } + .search-button { + width: 28px; + height: 28px; + } +} +@media (max-width: 320px) { .search-form { - width: 100%; - max-width: 100%; + max-width: 150px; + } + + .search-input { + font-size: 9px; } - .search-bar-inline { - display: none; + + .search-button { + width: 24px; + height: 24px; } } From 6769b3f14c1fd69408c9fc99a628d82de38a7200 Mon Sep 17 00:00:00 2001 From: Hossein Date: Sun, 12 Oct 2025 20:33:26 +0200 Subject: [PATCH 09/97] update --- client/src/components/Header.css | 48 +++++++++++++++++++++++--------- 1 file changed, 35 insertions(+), 13 deletions(-) diff --git a/client/src/components/Header.css b/client/src/components/Header.css index 92d6085..4c18ae6 100644 --- a/client/src/components/Header.css +++ b/client/src/components/Header.css @@ -25,18 +25,6 @@ display: flex; align-items: center; } - -.header-center { - position: absolute; - left: 50%; - transform: translateX(-50%); - display: flex; - align-items: center; - gap: 1rem; - justify-content: center; - width: 100%; - max-width: 340px; -} .header-right { gap: 1rem; font-size: 24px; @@ -56,7 +44,7 @@ object-fit: contain; transition: transform 0.3s ease; border: none; - padding-left: 10px; + padding-left: 3rem; } .header-logo:hover { @@ -102,3 +90,37 @@ cursor: pointer; padding: 0.6rem; } +@media (max-width: 768px) { + .header { + padding: 0 1rem; + height: 70px; + } + .header-logo { + height: 40px; + padding-left: 1rem; + } + .header-right { + font-size: 20px; + gap: 0.5rem; + } + .user-name { + display: none; + } +} +@media (max-width: 480px) { + .header { + padding: 0 0.5rem; + height: 60px; + } + .header-logo { + height: 30px; + padding-left: 0; + } + .header-right { + font-size: 18px; + gap: 0.3rem; + } + .menu-icon { + font-size: 20px; + } +} From 63904aacecbc0d891d1467ff12d049e87d9e5791 Mon Sep 17 00:00:00 2001 From: Hossein Date: Sun, 12 Oct 2025 20:33:53 +0200 Subject: [PATCH 10/97] update --- client/src/components/Header.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/client/src/components/Header.jsx b/client/src/components/Header.jsx index 9fcf3e9..3e5ad49 100644 --- a/client/src/components/Header.jsx +++ b/client/src/components/Header.jsx @@ -83,9 +83,6 @@ const Header = () => { )}
-
- -
); }; From eabeb73212149c546ebe3e2e06df97a7fddc72e1 Mon Sep 17 00:00:00 2001 From: Hossein Date: Sun, 12 Oct 2025 20:45:46 +0200 Subject: [PATCH 11/97] update --- client/src/components/Header.jsx | 63 ++++++++++++-------------------- 1 file changed, 23 insertions(+), 40 deletions(-) diff --git a/client/src/components/Header.jsx b/client/src/components/Header.jsx index 3e5ad49..2af26ed 100644 --- a/client/src/components/Header.jsx +++ b/client/src/components/Header.jsx @@ -5,46 +5,37 @@ import SearchBar from "./SearchBar"; import Sidebar from "./Sidebar"; import { useNavigate } from "react-router-dom"; import logo from "../assets/logo.png"; -import LogoutButton from "./LogoutButton"; const Header = () => { const [user, setUser] = useState(null); const [isSidebarOpen, setIsSidebarOpen] = useState(false); const navigate = useNavigate(); - // Get the token from localStorage to check if the user is logged in const token = localStorage.getItem("token"); - // Convert the token to a boolean: if token exists, user is logged in; otherwise, not logged in const isLoggedIn = !!token; useEffect(() => { - const token = localStorage.getItem("token"); - if (!token) { - // If no token, user is not logged in, so redirect to auth page + if (!isLoggedIn) return; // no need to fetch if not logged in - return; - } - // Fetch user profile data if logged in fetch("http://localhost:3000/api/auth/me", { - headers: { - Authorization: `Bearer ${token}`, - }, - credentials: "include", // Include credentials for CORS requests + headers: { Authorization: `Bearer ${token}` }, + credentials: "include", }) .then((response) => { - if (!response.ok) { - throw new Error("Failed to fetch user data"); - } + if (!response.ok) throw new Error("Failed to fetch user data"); return response.json(); }) - .then((data) => { - setUser(data); - }) - .catch((error) => { - console.error("Error fetching user data:", error); - // Optionally redirect to auth page if fetching fails - }); - }, []); + .then((data) => setUser(data)) + .catch((error) => console.error("Error fetching user data:", error)); + }, [isLoggedIn, token]); + + const handleUserClick = () => { + if (isLoggedIn) { + navigate("/profile"); + } else { + navigate("/auth"); + } + }; return ( <> @@ -62,25 +53,17 @@ const Header = () => { Company Logo
+
-
- -
+
+
- {isLoggedIn ? ( - <> -

navigate("/profile")} className="user-name"> - {user?.firstName || "My Profile"} -

- - - ) : ( - navigate("/auth")} - /> - )} +
From 6d6dc13e4d89c1974540377861217f10f164ef11 Mon Sep 17 00:00:00 2001 From: Hossein Date: Sun, 12 Oct 2025 20:46:13 +0200 Subject: [PATCH 12/97] update --- client/src/pages/ProfilePage.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/client/src/pages/ProfilePage.jsx b/client/src/pages/ProfilePage.jsx index 7453219..c0b8b5e 100644 --- a/client/src/pages/ProfilePage.jsx +++ b/client/src/pages/ProfilePage.jsx @@ -7,6 +7,7 @@ import "./ProfilePage.css"; import ItemCard from "../components/ItemCard"; import EditProfileForm from "../components/EditProfileForm"; import Loader from "../components/Loader"; +import LogoutButton from "../components/LogoutButton"; const ProfilePage = () => { const [borrowedItems, setBorrowedItems] = useState([]); @@ -69,6 +70,8 @@ const ProfilePage = () => {

City: {userInfo.city}

+ +
{!editing && ( From 7b1d00f02c7edca7584931d38f32f604ef1565b3 Mon Sep 17 00:00:00 2001 From: Hossein Date: Sun, 12 Oct 2025 21:17:07 +0200 Subject: [PATCH 15/97] update --- client/src/components/Sidebar.css | 167 +++++++++++++++++++----------- 1 file changed, 104 insertions(+), 63 deletions(-) diff --git a/client/src/components/Sidebar.css b/client/src/components/Sidebar.css index 8bbfb6f..3dfab56 100644 --- a/client/src/components/Sidebar.css +++ b/client/src/components/Sidebar.css @@ -1,64 +1,90 @@ .sidebar { position: fixed; top: 0; - left: -220px; - width: 220px; + left: -240px; + width: 240px; height: 100%; - background: linear-gradient(135deg, #e9e8e8 50%, #0789e6 100%); - padding: 20px; - transition: left 0.5s ease-in-out; - border-radius: 0 10px 10px 0; - box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); - z-index: 1000; + background: linear-gradient(145deg, #e9e8e8 40%, #0789e6 100%); + padding: 24px 20px; + transition: left 0.4s ease-in-out; + border-radius: 0 14px 14px 0; + box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2); + z-index: 2000; font-family: "PT Serif", serif; + display: flex; + flex-direction: column; + overflow-y: auto; + isolation: isolate; /* Prevents blur conflicts */ } .sidebar.open { left: 0; } + +/* Close button */ +.close-btn { + position: absolute; + top: 12px; + right: 12px; + font-size: 40px; + background: none; + border: none; + cursor: pointer; + color: #010202; + text-shadow: 0 0 5px rgba(23, 113, 182, 0.57); + transition: all 0.3s ease; +} + +.close-btn:hover { + transform: scale(1.15); +} + +/* Title */ .sidebar-title { - margin: 1.5rem 0; + margin: 2.5rem 0 1rem; color: #0789e6; - font-size: 23px; + font-size: 25px; font-weight: 600; + text-align: center; + letter-spacing: 0.5px; } + +/* Category list */ .category-list { list-style: none; padding: 0; margin: 0; } + .category-list li { - margin-bottom: 5px; + margin-bottom: 6px; } + +/* Buttons */ .category-btn { width: 100%; background-color: transparent; border: none; - color: #443b3b; - font-size: 16px; - font-family: "PT Serif", serif; + color: #333; + font-size: 17px; text-align: left; - padding: 10px; - border-radius: 6px; + padding: 12px; + border-radius: 8px; cursor: pointer; - transition: - background-color 0.3s ease, - color 0.3s ease; + transition: all 0.3s ease; } + .category-btn:hover { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.25); color: #000000; - transform: scale(1.1); - transition: - background-color 0.3s ease, - color 0.3s ease, - transform 0.3s ease; + transform: translateX(5px); } .category-btn:focus { - outline: 2px solid #047fc0; + outline: 2px solid #0789e6; } +/* Divider items (optional) */ .sidebar ul { list-style: none; padding: 0; @@ -66,71 +92,86 @@ } .sidebar ul li { - padding: 12px 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.2); + padding: 10px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.25); cursor: pointer; transition: color 0.3s ease; font-size: 16px; } .sidebar ul li:hover { - color: #b3d4fc; + color: #0789e6; } -.close-btn { - position: absolute; - top: 12px; - right: 12px; - font-size: 24px; - background: none; - border: none; - cursor: pointer; - color: #0789e6; - transition: color 0.3s ease; +/* Overlay when sidebar opens */ +.sidebar-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.55); + backdrop-filter: blur(2px); + opacity: 0; + visibility: hidden; + transition: opacity 0.4s ease; + z-index: 1500; } -.close-btn:hover { - color: #000000; - transform: scale(1.1); +.sidebar-overlay.active { + opacity: 1; + visibility: visible; } -@media (max-width: 480px) { +/* Scrollbar styling (optional) */ +.sidebar::-webkit-scrollbar { + width: 6px; +} +.sidebar::-webkit-scrollbar-thumb { + background: #0789e6; + border-radius: 4px; +} +.sidebar::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.4); +} + +/* 📱 Responsive */ +@media (max-width: 768px) { .sidebar { - width: 180px; - padding: 15px; + width: 210px; + padding: 20px; } - .sidebar-title, - .sidebar h4 { - font-size: 18px; + .sidebar-title { + font-size: 20px; } - .category-btn, - .sidebar ul li { - font-size: 14px; - padding: 8px; + .category-btn { + font-size: 15px; + padding: 10px; } .close-btn { - font-size: 20px; + font-size: 24px; } } -@media (max-width: 768px) and (min-width: 481px) { +@media (max-width: 480px) { .sidebar { - width: 200px; - padding: 18px; + width: 180px; + padding: 15px; } - .sidebar-title, - .sidebar h4 { - font-size: 19px; + .sidebar-title { + font-size: 18px; } - - .category-btn, .sidebar ul li { - font-size: 15px; - padding: 10px; + padding: 7px 0; + } + + .category-btn { + font-size: 10px; + padding: 8px; } .close-btn { From 57f9fcc4fe1ea2bda82a6be12fbc7540890e9885 Mon Sep 17 00:00:00 2001 From: Hossein Date: Sun, 12 Oct 2025 21:17:23 +0200 Subject: [PATCH 16/97] update --- client/src/components/Sidebar.jsx | 48 +++++++++++++++++++------------ 1 file changed, 30 insertions(+), 18 deletions(-) diff --git a/client/src/components/Sidebar.jsx b/client/src/components/Sidebar.jsx index 31b6a6f..2d6187a 100644 --- a/client/src/components/Sidebar.jsx +++ b/client/src/components/Sidebar.jsx @@ -15,6 +15,7 @@ export default function Sidebar({ isOpen, onClose }) { "Clothing", "Musical Instruments", ].sort(); + const navigate = useNavigate(); const sidebarRef = useRef(null); @@ -22,6 +23,8 @@ export default function Sidebar({ isOpen, onClose }) { navigate(`/result?category=${encodeURIComponent(category)}`); onClose(); }; + + // Close sidebar when clicking outside useEffect(() => { const handleClickOutside = (event) => { if ( @@ -39,24 +42,33 @@ export default function Sidebar({ isOpen, onClose }) { }, [isOpen, onClose]); return ( -
- -

Categories

-
    - {staticCategories.map((cat) => ( -
  • - -
    • - ))} -
-
+ <> + {/* 🔹 Overlay (dark background) */} +
+ + {/* 🔹 Sidebar */} +
+ +

Categories

+
    + {staticCategories.map((cat) => ( +
  • + +
    • + ))} +
+
+ ); } From 4e1cacba024240953b3675e52a98ea7a1e5c545f Mon Sep 17 00:00:00 2001 From: Hossein Date: Sun, 12 Oct 2025 21:19:27 +0200 Subject: [PATCH 17/97] update --- client/src/components/Sidebar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/Sidebar.css b/client/src/components/Sidebar.css index 3dfab56..d0bd380 100644 --- a/client/src/components/Sidebar.css +++ b/client/src/components/Sidebar.css @@ -170,7 +170,7 @@ } .category-btn { - font-size: 10px; + font-size: 12px; padding: 8px; } From 575b3d1c8dae57926d93b2d5d339b6aebadf4585 Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 13:25:02 +0200 Subject: [PATCH 18/97] update --- client/src/components/ExplainText.css | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/client/src/components/ExplainText.css b/client/src/components/ExplainText.css index 603af52..815bee8 100644 --- a/client/src/components/ExplainText.css +++ b/client/src/components/ExplainText.css @@ -1,24 +1,25 @@ .explain-text { - background-color: #fff; + background: -webkit-linear-gradient(145deg, #e9e8e8e1 40%, #0789e6 100%); padding: 2rem; text-align: center; - border-radius: 100px; - margin: 10rem auto; - width: 80%; - height: 100%; + border-radius: 90px 20px 90px 20px / 20px 90px 20px 90px; + margin: 15rem auto; max-width: 1000px; - box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); - transition: box-shadow 0.3s ease; + transition: all 0.3s ease; } .explain-text:hover { - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.422); + transform: translateY(-5px); + cursor: text; + transition: all 0.3s ease; } .explain-text h2 { font-size: clamp(2.2rem, 2.5vw, 2.5rem); - color: #0798e6; - margin-bottom: 1rem; - overflow: hidden; - animation: fadeIn 2s ease forwards; + /* color: #0798e6; */ + /* margin-bottom: 1rem; */ + /* overflow: hidden; */ + /* animation: fadeIn 2s ease forwards; */ + /* text-shadow: 0 0 10px rgba(255, 255, 255, 0.998); */ } .explain-text p { From dd5efb2a033b359f8ff90858202ef1bfbcf5d6fe Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 13:26:15 +0200 Subject: [PATCH 19/97] update --- client/src/components/ExplainText.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/ExplainText.css b/client/src/components/ExplainText.css index 815bee8..732eb67 100644 --- a/client/src/components/ExplainText.css +++ b/client/src/components/ExplainText.css @@ -15,7 +15,7 @@ } .explain-text h2 { font-size: clamp(2.2rem, 2.5vw, 2.5rem); - /* color: #0798e6; */ + color: #0798e6; /* margin-bottom: 1rem; */ /* overflow: hidden; */ /* animation: fadeIn 2s ease forwards; */ From 8cf7921dd28ffe46f36da88e1f7cb6d9a3d4478c Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 13:26:50 +0200 Subject: [PATCH 20/97] update --- client/src/components/ExplainText.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/ExplainText.css b/client/src/components/ExplainText.css index 732eb67..6985c0d 100644 --- a/client/src/components/ExplainText.css +++ b/client/src/components/ExplainText.css @@ -16,7 +16,7 @@ .explain-text h2 { font-size: clamp(2.2rem, 2.5vw, 2.5rem); color: #0798e6; - /* margin-bottom: 1rem; */ + margin-bottom: 1rem; /* overflow: hidden; */ /* animation: fadeIn 2s ease forwards; */ /* text-shadow: 0 0 10px rgba(255, 255, 255, 0.998); */ From bb69b2e0c5547dc5e18c974355941ae53ead47af Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 13:27:10 +0200 Subject: [PATCH 21/97] update --- client/src/components/ExplainText.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/ExplainText.css b/client/src/components/ExplainText.css index 6985c0d..d4abcc5 100644 --- a/client/src/components/ExplainText.css +++ b/client/src/components/ExplainText.css @@ -17,7 +17,7 @@ font-size: clamp(2.2rem, 2.5vw, 2.5rem); color: #0798e6; margin-bottom: 1rem; - /* overflow: hidden; */ + overflow: hidden; /* animation: fadeIn 2s ease forwards; */ /* text-shadow: 0 0 10px rgba(255, 255, 255, 0.998); */ } From 6da90f671a34941fe25919bf1b99bdad2382d0e6 Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 13:27:35 +0200 Subject: [PATCH 22/97] update --- client/src/components/ExplainText.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/ExplainText.css b/client/src/components/ExplainText.css index d4abcc5..0a78361 100644 --- a/client/src/components/ExplainText.css +++ b/client/src/components/ExplainText.css @@ -18,7 +18,7 @@ color: #0798e6; margin-bottom: 1rem; overflow: hidden; - /* animation: fadeIn 2s ease forwards; */ + animation: fadeIn 2s ease forwards; /* text-shadow: 0 0 10px rgba(255, 255, 255, 0.998); */ } From 50da218b60543a3d8cf598c0a01c08b8bc9b23ea Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 13:27:54 +0200 Subject: [PATCH 23/97] update --- client/src/components/ExplainText.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/ExplainText.css b/client/src/components/ExplainText.css index 0a78361..2e59ec3 100644 --- a/client/src/components/ExplainText.css +++ b/client/src/components/ExplainText.css @@ -19,7 +19,7 @@ margin-bottom: 1rem; overflow: hidden; animation: fadeIn 2s ease forwards; - /* text-shadow: 0 0 10px rgba(255, 255, 255, 0.998); */ + text-shadow: 0 0 10px rgba(255, 255, 255, 0.998); } .explain-text p { From c9a5d22ecb9dd6996707b9957bd88889edab2631 Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 13:38:58 +0200 Subject: [PATCH 24/97] update --- client/src/components/ExplainText.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/client/src/components/ExplainText.css b/client/src/components/ExplainText.css index 2e59ec3..46c9c08 100644 --- a/client/src/components/ExplainText.css +++ b/client/src/components/ExplainText.css @@ -3,29 +3,29 @@ padding: 2rem; text-align: center; border-radius: 90px 20px 90px 20px / 20px 90px 20px 90px; - margin: 15rem auto; + margin: 15rem auto 10rem auto; max-width: 1000px; transition: all 0.3s ease; } .explain-text:hover { - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.422); - transform: translateY(-5px); + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.672); + transform: translateY(-2px); cursor: text; transition: all 0.3s ease; } .explain-text h2 { font-size: clamp(2.2rem, 2.5vw, 2.5rem); - color: #0798e6; + color: #000000; margin-bottom: 1rem; overflow: hidden; animation: fadeIn 2s ease forwards; - text-shadow: 0 0 10px rgba(255, 255, 255, 0.998); + text-shadow: 0 0 1px #0798e6; } .explain-text p { margin-top: 1rem; font-size: clamp(1.4rem, 1.5vw, 1.15rem); - color: #333; + color: #333333db; line-height: 1.6; } @keyframes fadeIn { @@ -42,7 +42,7 @@ @media (max-width: 600px) { .explain-text { padding: 1.5rem 1rem; - margin: 4rem 1rem; + margin: 6rem 1rem 3rem 1rem; } .explain-text h2 { font-size: 1rem; From 0f2aca23c7d2729a98174b49a62ccb0768aa813e Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 13:42:35 +0200 Subject: [PATCH 25/97] update --- client/src/components/Shape.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/Shape.css b/client/src/components/Shape.css index 8367538..235332b 100644 --- a/client/src/components/Shape.css +++ b/client/src/components/Shape.css @@ -1,12 +1,12 @@ .shape { display: block; - margin: 1rem auto 1rem; + margin: 1rem auto; max-width: 100%; height: auto; } @media (max-width: 480px) { .shape { - margin: 6rem auto 4rem; + margin: 4rem auto; width: 90%; } } From cfd61032ed9a35d151409233a9189d0684b91325 Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 21:35:07 +0200 Subject: [PATCH 26/97] update --- client/src/components/ItemCard.css | 115 ++++------------------------- 1 file changed, 16 insertions(+), 99 deletions(-) diff --git a/client/src/components/ItemCard.css b/client/src/components/ItemCard.css index 5393293..f68e227 100644 --- a/client/src/components/ItemCard.css +++ b/client/src/components/ItemCard.css @@ -1,61 +1,44 @@ -.item-card { +.item-card-container { min-width: 180px; - max-width: 300px; + max-width: 250px; border: 1px solid #ccc; - padding: 16px; + padding: 10px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - background-color: #fff; - transition: - transform 0.25s ease, - box-shadow 0.25s ease; + background-color: #ffffff; cursor: pointer; - width: 100%; - height: auto; box-sizing: border-box; - max-width: 300px; margin: 0 auto; font-family: "PT Serif", serif; + flex: 0 0 auto; + transition: all 0.3s ease; } -.item-card:hover { +.item-card-container:hover { transform: scale(1.01); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); - transition: - transform 0.25s ease, - box-shadow 0.25s ease; } -.item-card:hover h3 { - font-weight: bold; -} -.item-card img { +.item-card-image { width: 100%; aspect-ratio: 1 / 1; display: block; object-fit: contain; - background-color: #e1dfdf; - border: 1px solid #ccc; + background-color: #ffffff; + border: 1px solid #cccccc61; border-radius: 8px; } -.item-card h3 { - font-weight: bold; +.item-card-title { margin: 0 0 10px; font-size: 1.2rem; - color: #0798e6; -} -.items-list .item-card h3 { - font-size: 1.1rem; - line-height: 1.2; - max-height: calc(1.2em * 2); - width: 200px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; + color: #000000; + text-shadow: 0 0 1px #0798e6; } -.item-card p { +.item-card-condition, +.item-card-duration, +.item-card-price { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; @@ -65,52 +48,19 @@ margin: 0 0 8px; } -.items-list .item-card { - max-width: 100%; - margin: 0; - display: flex; - align-items: center; - gap: 1rem; - padding: 14px 22px; - cursor: default; - transform: none; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); - border-color: #aaa; - border-radius: 8px; - background-color: #fafafa; - justify-content: space-between; -} - -.items-list .item-card img { - width: 100%; - max-width: 150px; - height: auto; - border: 1px solid #ccc; - border-radius: 8px; -} - .item-condition-excellent { - background-color: #d4edda; color: #155724; font-weight: bold; - border-radius: 4px; - padding: 2px; } .item-condition-good { - background-color: #cce5ff; color: #004085; font-weight: bold; - border-radius: 4px; - padding: 2px; } .item-condition-fair { - background-color: #fff3cd; color: #856404; font-weight: bold; - border-radius: 4px; - padding: 2px; } .available { @@ -121,36 +71,3 @@ color: #cccccc; font-weight: bold; } -@media (max-width: 768px) { - .item-card { - max-width: 100%; - padding: 12px; - margin: 0 auto 20px; - } - .items-list .item-card { - flex-direction: column; - align-items: center; - gap: 10px; - padding: 16px 12px; - cursor: pointer; - box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); - justify-content: flex-start; - } - .items-list .item-card img { - max-width: 80%; - height: auto; - border-radius: 8px; - margin-bottom: 8px; - } - .items-list .item-card h3 { - width: 100%; - text-align: center; - font-size: 1rem; - max-height: none; - white-space: normal; - } - - .items-list .item-card p { - max-height: none; - } -} From 13d6d83cccaff1be4b1ae904a09fd6474c043f5a Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 21:35:42 +0200 Subject: [PATCH 27/97] update --- client/src/components/ItemCard.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/ItemCard.jsx b/client/src/components/ItemCard.jsx index b849bcf..2ed3aa1 100644 --- a/client/src/components/ItemCard.jsx +++ b/client/src/components/ItemCard.jsx @@ -9,7 +9,7 @@ const ItemCard = ({ item }) => { return (
navigate(`/items/${item._id}`)} From 4ed5fffa41246f64c82ce8fc669c346838e53857 Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 21:36:01 +0200 Subject: [PATCH 28/97] update --- client/src/components/ItemSlider.css | 163 ++++++++++++++------------- 1 file changed, 83 insertions(+), 80 deletions(-) diff --git a/client/src/components/ItemSlider.css b/client/src/components/ItemSlider.css index e3e234f..e8df8f0 100644 --- a/client/src/components/ItemSlider.css +++ b/client/src/components/ItemSlider.css @@ -1,126 +1,129 @@ +/* === ITEM SLIDER STYLING === */ .slider-wrapper { position: relative; width: 100%; - height: 450px; + overflow: hidden; + padding: 2rem 3rem; + box-sizing: border-box; display: flex; align-items: center; justify-content: center; - overflow: hidden; - background: none; - padding: 0.5rem 0; - font-family: "PT Serif", serif; - margin: 1rem auto; - margin-top: -1rem; - background-color: #2e84b3; } +/* === Logo on top === */ +.slider-logo { + display: block; + margin: 8rem auto 0.5rem auto; + max-width: 280px; + height: auto; + object-fit: contain; + opacity: 1; + transition: + transform 0.3s ease, + opacity 0.3s ease; +} + +/* === Scrollable container === */ .slider-container { display: flex; - gap: 1rem; - overflow-x: hidden; + overflow-x: auto; scroll-behavior: smooth; - width: 100%; - max-width: 1000px; - height: 450px; + gap: 1rem; padding: 1rem 0; - scroll-snap-type: x mandatory; - margin-top: 0.5rem; + scrollbar-width: none; /* Firefox */ } -.item-card:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +.slider-container::-webkit-scrollbar { + display: none; /* Chrome, Safari */ } -.arrow-right, -.arrow-left { - font-size: 4rem; - background: none; +/* === Arrow buttons === */ +.arrow-left, +.arrow-right { + position: absolute; + top: 50%; + transform: translateY(-50%); + background: rgba(7, 137, 230, 0.85); border: none; + color: white; + font-size: 2rem; + width: 45px; + height: 45px; + border-radius: 50%; cursor: pointer; - padding: 0 1rem; - color: #555; - transition: color 0.2s ease; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); z-index: 10; - user-select: none; + transition: + background 0.3s ease, + transform 0.3s ease; } +.arrow-left:hover, .arrow-right:hover { - color: #0798e6; - transform: scale(1.3); + transform: translateY(-50%) scale(1.1); } -.arrow-left:hover { - color: #0798e6; - transform: scale(1.3); +.arrow-left { + left: 20px; } -.arrow:disabled { - color: #ccc; - cursor: not-allowed; +.arrow-right { + right: 20px; } -.slider-logo { - width: 400px; - height: 200px; - object-fit: contain; - margin: 0 auto; - filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); - transition: transform 0.3s ease; - display: block; - justify-content: center; -} -.slider-logo:hover { - animation: bounce 0.7s 2; +/* === Slider container === */ +.slider-container { + background-color: black; + flex: 0 0 auto; + min-width: 350px; + max-width: 1000px; + border-radius: 15px; + transition: + transform 0.3s ease, + box-shadow 0.3s ease; } -@keyframes bounce { - 0%, - 100% { - transform: translateY(0); - } - 50% { - transform: translateY(5px); - } + +.slider-container :hover { + transform: scale(1.05); + box-shadow: 0 5px 15px rgba(7, 137, 230, 0.2); } -@media (max-width: 480px) { - .slider-container { - max-width: 80%; - gap: 0.5rem; - padding: 0.5rem 0; - -webkit-overflow-scrolling: touch; + +/* === Responsive === */ +@media (max-width: 768px) { + .slider-wrapper { + padding: 1.5rem 1rem; } - .arrow { - font-size: 2rem; - padding: 0 0.5rem; + .arrow-left, + .arrow-right { + width: 38px; + height: 38px; + font-size: 1.5rem; } - .slider-title { - font-size: 0.6rem; - padding-left: 1rem; + .slider-container { + min-width: 200px; + max-width: 200px; } + .slider-logo { - width: 120px; - height: 100px; + max-width: 140px; } } -@media (max-width: 768px) and (min-width: 481px) { + +@media (max-width: 480px) { .slider-container { - max-width: 90%; - gap: 0.8rem; - padding: 0.8rem 0; - -webkit-overflow-scrolling: touch; + min-width: 180px; } - .arrow { - font-size: 2.2rem; - padding: 0 0.8rem; + .arrow-left, + .arrow-right { + width: 34px; + height: 34px; + font-size: 1.3rem; } - .slider-title { - font-size: 0.8rem; - padding-left: 1.5rem; - } .slider-logo { - width: clamp(150px, 9vw, 150px); + max-width: 120px; } } From 80b705b194e2e943b00a0120f0afb0c619f325a5 Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 21:44:33 +0200 Subject: [PATCH 29/97] update --- client/src/components/ItemSlider.css | 23 +++++------------------ 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/client/src/components/ItemSlider.css b/client/src/components/ItemSlider.css index e8df8f0..84c2577 100644 --- a/client/src/components/ItemSlider.css +++ b/client/src/components/ItemSlider.css @@ -29,8 +29,12 @@ overflow-x: auto; scroll-behavior: smooth; gap: 1rem; - padding: 1rem 0; + padding: 1rem 1rem; scrollbar-width: none; /* Firefox */ + background-color: none; + flex: 10 0 0 auto; + min-width: 350px; + max-width: 1000px; } .slider-container::-webkit-scrollbar { @@ -71,23 +75,6 @@ right: 20px; } -/* === Slider container === */ -.slider-container { - background-color: black; - flex: 0 0 auto; - min-width: 350px; - max-width: 1000px; - border-radius: 15px; - transition: - transform 0.3s ease, - box-shadow 0.3s ease; -} - -.slider-container :hover { - transform: scale(1.05); - box-shadow: 0 5px 15px rgba(7, 137, 230, 0.2); -} - /* === Responsive === */ @media (max-width: 768px) { .slider-wrapper { From 2eb34675415fdfd0b8ce7793974faf5f15a8386a Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 21:49:02 +0200 Subject: [PATCH 30/97] update --- client/src/components/ItemCard.css | 20 ++++++++++++++++++++ client/src/components/ItemSlider.css | 4 ++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/client/src/components/ItemCard.css b/client/src/components/ItemCard.css index f68e227..244528c 100644 --- a/client/src/components/ItemCard.css +++ b/client/src/components/ItemCard.css @@ -71,3 +71,23 @@ color: #cccccc; font-weight: bold; } + +@media (max-width: 768px) { + .item-card-container { + min-width: 140px; + max-width: 180px; + padding: 8px; + } + + .item-card-title { + font-size: 1rem; + margin-bottom: 6px; + } + + .item-card-condition, + .item-card-duration, + .item-card-price { + font-size: 0.8rem; + margin-bottom: 6px; + } +} diff --git a/client/src/components/ItemSlider.css b/client/src/components/ItemSlider.css index 84c2577..2501f68 100644 --- a/client/src/components/ItemSlider.css +++ b/client/src/components/ItemSlider.css @@ -90,11 +90,11 @@ .slider-container { min-width: 200px; - max-width: 200px; + max-width: 600px; } .slider-logo { - max-width: 140px; + max-width: 200px; } } From fe418b45d974905842d6409117fbc08607d9aebb Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 21:56:02 +0200 Subject: [PATCH 31/97] update --- client/src/components/ItemCard.css | 23 +++++++++++++++++++++++ client/src/components/ItemSlider.css | 3 ++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/client/src/components/ItemCard.css b/client/src/components/ItemCard.css index 244528c..a66c3b8 100644 --- a/client/src/components/ItemCard.css +++ b/client/src/components/ItemCard.css @@ -91,3 +91,26 @@ margin-bottom: 6px; } } +@media (max-width: 480px) { + .item-card-container { + min-width: 100px; + max-width: 130px; + padding: 5px; + } + + .item-card-title { + font-size: 0.8rem; + margin-bottom: 4px; + } + + .item-card-condition, + .item-card-duration, + .item-card-price { + font-size: 0.7rem; + margin-bottom: 4px; + } + .available, + .unavailable { + font-size: 0.7rem; + } +} diff --git a/client/src/components/ItemSlider.css b/client/src/components/ItemSlider.css index 2501f68..cd94a7f 100644 --- a/client/src/components/ItemSlider.css +++ b/client/src/components/ItemSlider.css @@ -111,6 +111,7 @@ } .slider-logo { - max-width: 120px; + max-width: 150px; + margin: 4rem auto 0.1rem auto; } } From 5d8ab268a3d6110626d4132718ad2a31ec74270e Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 22:02:24 +0200 Subject: [PATCH 32/97] update --- client/src/components/ItemSlider.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/ItemSlider.css b/client/src/components/ItemSlider.css index cd94a7f..ef7ad04 100644 --- a/client/src/components/ItemSlider.css +++ b/client/src/components/ItemSlider.css @@ -31,7 +31,7 @@ gap: 1rem; padding: 1rem 1rem; scrollbar-width: none; /* Firefox */ - background-color: none; + background-color: transparent; flex: 10 0 0 auto; min-width: 350px; max-width: 1000px; From f42f17654dd93d7f02937d2c1d52f24112347081 Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 22:03:35 +0200 Subject: [PATCH 33/97] update --- client/src/components/ItemSlider.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/ItemSlider.css b/client/src/components/ItemSlider.css index ef7ad04..8abf874 100644 --- a/client/src/components/ItemSlider.css +++ b/client/src/components/ItemSlider.css @@ -32,7 +32,7 @@ padding: 1rem 1rem; scrollbar-width: none; /* Firefox */ background-color: transparent; - flex: 10 0 0 auto; + flex: 10 0 auto; min-width: 350px; max-width: 1000px; } From c98eca1caac4053ca989353718b63dc4ced8b1cf Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 22:15:48 +0200 Subject: [PATCH 34/97] update --- client/src/components/Banner.css | 29 +++-------------------------- 1 file changed, 3 insertions(+), 26 deletions(-) diff --git a/client/src/components/Banner.css b/client/src/components/Banner.css index 5c3f1a7..a698d3f 100644 --- a/client/src/components/Banner.css +++ b/client/src/components/Banner.css @@ -1,39 +1,16 @@ .wallpaper-container { background-image: url("../assets/banner.jpg"); background-size: cover; - background-position: center; - height: 600px; - width: 100%; aspect-ratio: 16 / 9; - border-radius: 16px; - display: flex; - align-items: center; - justify-content: flex-start; - margin: 4rem auto; - padding: 2rem 1rem; - position: relative; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - overflow: hidden; - transition: all 0.3s ease-in-out; + margin: 12rem 0; } -@media (max-width: 840px) { - .wallpaper-container { - height: 45vh; - margin: 2rem auto; - } -} - @media (max-width: 768px) { .wallpaper-container { - height: 40vh; - margin: 2rem auto; + margin: 8rem 0; } } - @media (max-width: 480px) { .wallpaper-container { - height: 30vh; - margin: 1rem auto; - padding: 1rem; + margin: 8rem 0; } } From 50df23fef38611663ff05a74b78638c39f36cfbf Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 13 Oct 2025 22:22:45 +0200 Subject: [PATCH 35/97] update --- client/src/components/SharePrompt.css | 21 +++------------------ client/src/components/SharePrompt.jsx | 2 +- 2 files changed, 4 insertions(+), 19 deletions(-) diff --git a/client/src/components/SharePrompt.css b/client/src/components/SharePrompt.css index 26bce22..1493220 100644 --- a/client/src/components/SharePrompt.css +++ b/client/src/components/SharePrompt.css @@ -1,20 +1,16 @@ .share-prompt-section { - background-color: #fff; + background-color: transparent; padding: 2rem; text-align: center; - border-radius: 100px; margin: 7rem auto; width: 80%; height: 100%; max-width: 1000px; - box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; } -.share-prompt-section:hover { - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); -} .share-prompt-section h2 { font-size: 1.7rem; + text-align: left; color: #f0983b; font-weight: 600; letter-spacing: 0.04em; @@ -27,7 +23,7 @@ color: #444; } -.btn { +.add-item-button { display: inline-block; margin-top: 1rem; background-color: #0798e6; @@ -50,14 +46,3 @@ box-shadow: 0 6px 18px rgba(5, 112, 185, 0.6); outline: none; } -@media (max-width: 480px) { - .share-prompt-section { - padding: 2rem 1rem; - max-width: 95%; - } - .btn { - width: 100%; - padding: 0.85rem 0; - font-size: 1.2rem; - } -} diff --git a/client/src/components/SharePrompt.jsx b/client/src/components/SharePrompt.jsx index 3723ba6..c0161ce 100644 --- a/client/src/components/SharePrompt.jsx +++ b/client/src/components/SharePrompt.jsx @@ -29,7 +29,7 @@ function SharePrompt() { resources.

+
+ {/* ITEMS PER PAGE */} +
+ {
- - {/* TOGGLE VIEW MODE */} -
- -
); }; From a6e6c83b52b279e2b8b3fa7b20d94e67aa007e9e Mon Sep 17 00:00:00 2001 From: Hossein Date: Wed, 15 Oct 2025 20:25:44 +0200 Subject: [PATCH 47/97] update --- client/src/pages/ResultPage.css | 34 +++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/client/src/pages/ResultPage.css b/client/src/pages/ResultPage.css index d885b1f..b6075ec 100644 --- a/client/src/pages/ResultPage.css +++ b/client/src/pages/ResultPage.css @@ -1,23 +1,24 @@ -.content-with-sidebar { +.main-result-container { display: flex; flex-direction: row; + margin: 5rem auto; + padding: 1rem; +} +.sidebar-with-viewtoggle { + display: flex; + flex-direction: column; gap: 1rem; align-items: flex-start; - padding: 1rem 0; - background-color: #f9f9f9; - border-radius: 10px; - font-family: "PT Serif", serif; - margin-top: 5rem; + background-color: #f8f9fa; } - -.result-container .items-grid { +.items-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 1.5rem; - font-family: "PT Serif", serif; + gap: 1rem; } + .items-grid > * { - background-color: #fff; + background-color: #ffffff; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); @@ -71,7 +72,7 @@ .items-grid { grid-template-columns: repeat(3, 1fr); } - .content-with-sidebar { + .sidebar-with-viewtoggle { flex-direction: column; } .main-content { @@ -95,10 +96,15 @@ } @media (max-width: 768px) { + .main-result-container { + flex-direction: column; + margin: 4rem auto; + padding: 0.5rem; + } .items-grid { grid-template-columns: repeat(1, 1fr); } - .content-with-sidebar { + .sidebar-with-viewtoggle { flex-direction: column; } .filter-sidebar { @@ -124,7 +130,7 @@ border-radius: 8px; } - .content-with-sidebar { + .sidebar-with-viewtoggle { padding: 0.3rem; gap: 0.5rem; } From ec3562743c573c39faba4e9dc93200914c0459bc Mon Sep 17 00:00:00 2001 From: Hossein Date: Wed, 15 Oct 2025 20:26:11 +0200 Subject: [PATCH 48/97] update --- client/src/pages/ResultPage.jsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/client/src/pages/ResultPage.jsx b/client/src/pages/ResultPage.jsx index 78507cd..075d18b 100644 --- a/client/src/pages/ResultPage.jsx +++ b/client/src/pages/ResultPage.jsx @@ -89,18 +89,19 @@ const ResultPage = () => { }, [url]); return ( -
+
- {/* Wrap sidebar and main content in one flex container */} -
- - -
+
+ {/* Wrap sidebar and main content in one flex container */} +
+ +
+
{isLoading && } {error && } {!isLoading && !error && response.success && ( From 92510b257956e0210fc604aefe4b0f7ec51262e4 Mon Sep 17 00:00:00 2001 From: Hossein Date: Wed, 15 Oct 2025 21:38:39 +0200 Subject: [PATCH 49/97] install vite --- client/package-lock.json | 62 ++++++++++++++++++++++++---------------- client/package.json | 2 +- 2 files changed, 39 insertions(+), 25 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index d5c5e84..1f54fb2 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -43,7 +43,7 @@ "jest-fetch-mock": "^3.0.3", "prettier": "^3.2.5", "prettier-eslint": "^16.3.0", - "vite": "^6.2.0" + "vite": "^6.4.0" } }, "node_modules/@adobe/css-tools": { @@ -2520,19 +2520,32 @@ } }, "node_modules/@eslint/plugin-kit": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.1.tgz", - "integrity": "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==", + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz", + "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==", "dev": true, "license": "Apache-2.0", "dependencies": { - "@eslint/core": "^0.14.0", + "@eslint/core": "^0.15.2", "levn": "^0.4.1" }, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@eslint/plugin-kit/node_modules/@eslint/core": { + "version": "0.15.2", + "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz", + "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@types/json-schema": "^7.0.15" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -3832,9 +3845,9 @@ } }, "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz", + "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==", "dev": true, "license": "MIT", "dependencies": { @@ -4304,13 +4317,13 @@ } }, "node_modules/axios": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz", - "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==", + "version": "1.12.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz", + "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==", "license": "MIT", "dependencies": { "follow-redirects": "^1.15.6", - "form-data": "^4.0.0", + "form-data": "^4.0.4", "proxy-from-env": "^1.1.0" } }, @@ -4490,9 +4503,9 @@ "license": "MIT" }, "node_modules/brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz", + "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==", "dev": true, "license": "MIT", "dependencies": { @@ -6165,14 +6178,15 @@ } }, "node_modules/form-data": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz", - "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz", + "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==", "license": "MIT", "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "es-set-tostringtag": "^2.1.0", + "hasown": "^2.0.2", "mime-types": "^2.1.12" }, "engines": { @@ -10795,9 +10809,9 @@ } }, "node_modules/sweetalert2": { - "version": "11.22.0", - "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.22.0.tgz", - "integrity": "sha512-pSMuRGDULhh+wrFkO22O0YsIXxs8yFE0O+WVYXcqc/sTa1oRnf0JlR+vfQIRY1QM1UeFfnCjyw6DYnG75/oxiQ==", + "version": "11.26.2", + "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.26.2.tgz", + "integrity": "sha512-tR5oADjrN6gv+0Y/tpfMXM/rSlx/QHmRhygBHhWh29iw1AO/x7D8OhghyogaY+NLZrd4qfhssVafRBHi+DREzQ==", "license": "MIT", "funding": { "type": "individual", @@ -11276,9 +11290,9 @@ } }, "node_modules/vite": { - "version": "6.3.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz", - "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==", + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.0.tgz", + "integrity": "sha512-oLnWs9Hak/LOlKjeSpOwD6JMks8BeICEdYMJBf6P4Lac/pO9tKiv/XhXnAM7nNfSkZahjlCZu9sS50zL8fSnsw==", "dev": true, "license": "MIT", "dependencies": { diff --git a/client/package.json b/client/package.json index 8db1f17..f4fce77 100644 --- a/client/package.json +++ b/client/package.json @@ -55,6 +55,6 @@ "jest-fetch-mock": "^3.0.3", "prettier": "^3.2.5", "prettier-eslint": "^16.3.0", - "vite": "^6.2.0" + "vite": "^6.4.0" } } From 976eb00406cfc26b0bf1363c1f70d91d0be71121 Mon Sep 17 00:00:00 2001 From: Hossein Date: Wed, 15 Oct 2025 22:38:36 +0200 Subject: [PATCH 50/97] update --- client/src/components/ItemCard.css | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/client/src/components/ItemCard.css b/client/src/components/ItemCard.css index a66c3b8..5cfba47 100644 --- a/client/src/components/ItemCard.css +++ b/client/src/components/ItemCard.css @@ -14,6 +14,17 @@ transition: all 0.3s ease; } +/* List view adjustments */ +.items-list .item-card-container { + min-width: auto; + max-width: 100%; + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; + margin: 0; /* remove auto center */ +} + .item-card-container:hover { transform: scale(1.01); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); @@ -28,6 +39,12 @@ border: 1px solid #cccccc61; border-radius: 8px; } +.items-list .item-card-image { + width: 120px; /* fixed image size in list view */ + height: auto; + aspect-ratio: auto; + flex-shrink: 0; +} .item-card-title { margin: 0 0 10px; @@ -72,6 +89,19 @@ font-weight: bold; } +.items-list .item-card-title, +.items-list .item-card-condition, +.items-list .item-card-duration, +.items-list .item-card-price, +.items-list .available, +.items-list .unavailable { + max-height: none; + overflow: visible; +} +.items-list .item-card-content { + flex: 1; /* make content take remaining width */ +} + @media (max-width: 768px) { .item-card-container { min-width: 140px; From 8d8e0ff24451586279b8b4d07e488595456667fc Mon Sep 17 00:00:00 2001 From: Hossein Date: Wed, 15 Oct 2025 22:39:25 +0200 Subject: [PATCH 51/97] update --- client/src/components/ItemCard.jsx | 38 +++++++++++++++--------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/client/src/components/ItemCard.jsx b/client/src/components/ItemCard.jsx index 2ed3aa1..8b89225 100644 --- a/client/src/components/ItemCard.jsx +++ b/client/src/components/ItemCard.jsx @@ -21,11 +21,11 @@ const ItemCard = ({ item }) => { }} > {item.title} -

{item.title}

- -

- Condition:{" "} - { +

+

{item.title}

+ +

+ Condition:{" "} { > {item.condition} - } -

-

- Rental Period: {item.borrowDuration}{" "} - {item.borrowDuration === 1 ? "day" : "days"} -

-

- Rental Price: €{item.price} -

- {item.availability ? ( -

✅Available

- ) : ( -

Unavailable

- )} +

+

+ Rental Period: {item.borrowDuration}{" "} + {item.borrowDuration === 1 ? "day" : "days"} +

+

+ Rental Price: €{item.price} +

+ {item.availability ? ( +

✅Available

+ ) : ( +

Unavailable

+ )} +
); }; From 5d3fd6ad35a0f85622d95efb7f23fc4a64510d84 Mon Sep 17 00:00:00 2001 From: Hossein Date: Wed, 15 Oct 2025 22:39:53 +0200 Subject: [PATCH 52/97] update --- client/src/components/Pagination.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/client/src/components/Pagination.css b/client/src/components/Pagination.css index 6f94897..cb6d8f4 100644 --- a/client/src/components/Pagination.css +++ b/client/src/components/Pagination.css @@ -41,3 +41,10 @@ color: white; box-shadow: 0 0 8px rgba(7, 152, 230, 0.7); } +@media (max-width: 600px) { + .pagination-btn { + padding: 0.4rem 0.8rem; + margin: 2px 4px; + font-size: 0.9rem; + } +} From 12c5d12729729c1fe91480a49e85575f2ab62fb1 Mon Sep 17 00:00:00 2001 From: Hossein Date: Wed, 15 Oct 2025 22:40:21 +0200 Subject: [PATCH 53/97] update --- client/src/pages/ResultPage.css | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/client/src/pages/ResultPage.css b/client/src/pages/ResultPage.css index b6075ec..3ff0550 100644 --- a/client/src/pages/ResultPage.css +++ b/client/src/pages/ResultPage.css @@ -49,11 +49,6 @@ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); } -.filter-sidebar { - flex: 0 0 280px; - max-width: 280px; -} - .main-content { flex: 1; background-color: #fff; @@ -80,7 +75,7 @@ padding: 1rem; } .items-list { - max-width: 80%; + max-width: 100%; display: flex; flex-direction: column; overflow: hidden; From 0e714d1cb4e6f68b60f6423e5b87cf822432147c Mon Sep 17 00:00:00 2001 From: Hossein Date: Thu, 16 Oct 2025 17:02:22 +0200 Subject: [PATCH 54/97] update --- client/src/components/ExplainText.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/client/src/components/ExplainText.css b/client/src/components/ExplainText.css index d13a37a..c652d37 100644 --- a/client/src/components/ExplainText.css +++ b/client/src/components/ExplainText.css @@ -1,11 +1,12 @@ .explain-text { background: -webkit-linear-gradient(145deg, #e9e8e8e1 40%, #0789e6 100%); - padding: 2rem; + padding: 4rem; text-align: center; border-radius: 90px 20px 90px 20px / 20px 90px 20px 90px; - margin: 15rem auto 10rem auto; + margin: 15rem auto 5rem auto; max-width: 1000px; transition: all 0.3s ease; + transform: rotate(4deg); } .explain-text h2 { @@ -20,7 +21,8 @@ .explain-text p { margin-top: 1rem; font-size: clamp(1.4rem, 1.5vw, 1.15rem); - color: #333333db; + color: #000000; + text-shadow: 0 0 20px #b2e607c9; line-height: 1.6; } @keyframes fadeIn { From c3191f47a4b722cce08103593513c75a0bfa8925 Mon Sep 17 00:00:00 2001 From: Hossein Date: Thu, 16 Oct 2025 17:03:47 +0200 Subject: [PATCH 55/97] update --- client/src/pages/Home/Home.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx index 0f4f9d8..0e34d8e 100644 --- a/client/src/pages/Home/Home.jsx +++ b/client/src/pages/Home/Home.jsx @@ -3,6 +3,7 @@ import Header from "../../components/Header"; import Footer from "../../components/Footer"; import ItemSlider from "../../components/ItemSlider"; import ExplainText from "../../components/ExplainText"; +import ExplainText2 from "../../components/ExplainText2"; import SharePrompt from "../../components/SharePrompt"; import Banner from "../../components/Banner"; import Shape from "../../components/Shape"; @@ -12,6 +13,7 @@ const Home = () => {
+ From d29164b688a2444863d2217d5090fc771edf75fd Mon Sep 17 00:00:00 2001 From: Hossein Date: Thu, 16 Oct 2025 17:04:24 +0200 Subject: [PATCH 56/97] update --- client/src/components/ExplainText2.css | 28 ++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 client/src/components/ExplainText2.css diff --git a/client/src/components/ExplainText2.css b/client/src/components/ExplainText2.css new file mode 100644 index 0000000..0757566 --- /dev/null +++ b/client/src/components/ExplainText2.css @@ -0,0 +1,28 @@ +.explain-text2 { + background: -webkit-linear-gradient(145deg, #0789e6 10%, #e9e8e8e1 100%); + padding: 4rem; + text-align: center; + border-radius: 90px 20px 90px 20px / 20px 90px 20px 90px; + margin: 5rem auto 10rem auto; + max-width: 1000px; + transition: all 0.3s ease; + transform: rotate(-4deg); +} + +.explain-text2 p { + margin-top: 1rem; + font-size: clamp(1.4rem, 1.5vw, 1.15rem); + color: #000000; + text-shadow: 0 0 20px #b2e607c9; + line-height: 1.6; +} + +@media (max-width: 600px) { + .explain-text2 { + padding: 1.5rem 1rem; + margin: 3rem 1rem 6rem 1rem; + } + .explain-text2 p { + font-size: 0.8rem; + } +} From 1a6454f00bea37507305ada6a02ac56d75e5707e Mon Sep 17 00:00:00 2001 From: Hossein Date: Thu, 16 Oct 2025 17:04:59 +0200 Subject: [PATCH 57/97] update --- client/src/components/ExplainText2.jsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 client/src/components/ExplainText2.jsx diff --git a/client/src/components/ExplainText2.jsx b/client/src/components/ExplainText2.jsx new file mode 100644 index 0000000..b35a83c --- /dev/null +++ b/client/src/components/ExplainText2.jsx @@ -0,0 +1,13 @@ +import "./ExplainText2.css"; +function ExplainText() { + return ( +
+

+ Small acts of sharing create big change. Start today and make your + community a little brighter. +

+
+ ); +} + +export default ExplainText; From f6ff40f5715ad3b5ea23032dc45dea62bda4c47c Mon Sep 17 00:00:00 2001 From: Hossein Date: Thu, 16 Oct 2025 18:05:10 +0200 Subject: [PATCH 58/97] update --- client/src/components/Header.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/src/components/Header.css b/client/src/components/Header.css index 2fc249d..08860cf 100644 --- a/client/src/components/Header.css +++ b/client/src/components/Header.css @@ -1,20 +1,20 @@ .header { position: fixed; - top: 10px; + top: 5px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; - height: 80px; + height: 100px; width: 100%; padding: 0 1.5rem; border-radius: 1px 1px 40px 40px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.706); + box-shadow: 0 1px 6px rgba(100, 99, 99, 0.706); font-family: "PT Serif", serif; flex-wrap: wrap; z-index: 1000; - background: rgba(230, 230, 231, 0.6); + background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } From ff2516b60691949d14abe27f3d887f6672c5628e Mon Sep 17 00:00:00 2001 From: Hossein Date: Thu, 16 Oct 2025 18:05:29 +0200 Subject: [PATCH 59/97] update --- client/src/index.css | 2 +- client/src/pages/ProfilePage.css | 198 +++++++++++++++---------------- client/src/pages/ProfilePage.jsx | 157 ++++++++++++------------ 3 files changed, 178 insertions(+), 179 deletions(-) diff --git a/client/src/index.css b/client/src/index.css index 25e6892..de8af42 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -25,7 +25,7 @@ textarea { body { padding: 2px; margin: 0; - background-color: #f7f7fa; + background-color: #ffffff; color: #333; line-height: 1.5; font-size: 16px; diff --git a/client/src/pages/ProfilePage.css b/client/src/pages/ProfilePage.css index 0d24165..5660420 100644 --- a/client/src/pages/ProfilePage.css +++ b/client/src/pages/ProfilePage.css @@ -1,141 +1,131 @@ -.profile-container { +/* --- General Layout --- */ +.profile-page-container { + max-width: 1000px; + margin: 100px auto; + padding: 20px; + background: #ffffff; + border-radius: 16px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); +} + +/* --- Tabs --- */ +.tabs { display: flex; - flex-direction: column; - align-items: center; - padding: 2rem; + justify-content: center; + margin-bottom: 30px; + border-bottom: 2px solid #eee; } -.profile-info { - padding: 1.5rem; - background-color: #f4f4f4; - border-radius: 1rem; - border: 1px solid #ddd; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); +.tab { + flex: 1; + padding: 14px 0; text-align: center; - margin-bottom: 1rem; -} -.profile-info p { - color: rgb(99, 87, 87); - font-weight: bold; - font-size: 18px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + background: none; border: none; - padding: 0.3rem; + outline: none; + transition: all 0.3s ease; + color: #777; } -.avatar { - width: 100px; - height: 100px; - border-radius: 50%; - margin-bottom: 1rem; +.tab:hover { + color: #2c8be6; } -.items-section { - display: flex; - justify-content: space-between; - width: 100%; - gap: 2rem; - max-width: 1000px; - padding: 1.5rem; +.tab.active { + color: #2c8be6; + border-bottom: 3px solid #2c8be6; } -.items-box { - flex: 1; - background-color: #f9f9f9; - padding: 1rem; - border-radius: 10px; - box-shadow: 0 0 12px rgba(0, 0, 0, 0.05); +/* --- Tab Content --- */ +.tab-content { + padding: 20px; + animation: fadeIn 0.4s ease; } -.items-header { - display: flex; - justify-content: space-between; - align-items: center; - cursor: pointer; - margin-bottom: 1rem; +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } } -.arrow { - font-size: 24px; - display: inline-block; - transition: transform 0.3s ease; +/* --- Profile Info --- */ +.profile-info { + text-align: center; } -.rotate { - transform: rotate(180deg); + +.avatar { + width: 120px; + height: 120px; + border-radius: 50%; + object-fit: cover; + margin-bottom: 15px; + border: 3px solid #2c8be6; } -.items-section .items-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 16px; - margin-top: 1rem; +.profile-details p { + margin: 8px 0; + font-size: 1rem; + color: #333; } + .edit-profile-button { - display: none; - background-color: #0798e6; - color: white; + background-color: #2c8be6; + color: #fff; border: none; - padding: 0.4rem 1rem; - margin: 1rem 0; - font-size: 1rem; - border-radius: 6px; + padding: 10px 20px; + margin-top: 15px; + border-radius: 8px; cursor: pointer; - transition: background 0.3s ease; + font-weight: 600; + transition: all 0.3s ease; } + .edit-profile-button:hover { - background-color: #024c71; + background-color: #1a6fd8; } -@media (max-width: 600px) { - .profile-container { - padding: 1rem; - } - - .profile-info p { - font-size: 16px; - } - - .items-grid { - grid-template-columns: 1fr; - } - .edit-profile-button { - font-size: 0.95rem; - padding: 0.4rem 0.8rem; - } - - .items-box { - padding: 0.8rem; - } +/* --- Items Section --- */ +.items-tab { + text-align: center; } -@media (max-width: 480px) { - .avatar { - width: 80px; - height: 80px; - } +.items-tab h3 { + margin-bottom: 20px; + color: #2c8be6; +} - .profile-info p { - font-size: 15px; - } +.items-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 20px; +} - .items-grid { - grid-template-columns: 1fr !important; - gap: 1rem; - } +.items-grid p { + grid-column: 1 / -1; + color: #555; +} - .items-header h3 { - font-size: 1.1rem; +/* --- Responsive --- */ +@media (max-width: 768px) { + .tab { + font-size: 0.9rem; } - .arrow { - font-size: 18px; + .profile-page-container { + margin: 30px 10px; + padding: 15px; } - .edit-profile-button { - width: 100%; - font-size: 1rem; - padding: 0.5rem; - } - .items-section { - flex-direction: column; + .avatar { + width: 100px; + height: 100px; } } diff --git a/client/src/pages/ProfilePage.jsx b/client/src/pages/ProfilePage.jsx index c0b8b5e..2cb0d16 100644 --- a/client/src/pages/ProfilePage.jsx +++ b/client/src/pages/ProfilePage.jsx @@ -3,19 +3,18 @@ import axios from "axios"; import { useNavigate } from "react-router-dom"; import Header from "../components/Header"; import Footer from "../components/Footer"; -import "./ProfilePage.css"; import ItemCard from "../components/ItemCard"; import EditProfileForm from "../components/EditProfileForm"; import Loader from "../components/Loader"; import LogoutButton from "../components/LogoutButton"; +import "./ProfilePage.css"; const ProfilePage = () => { const [borrowedItems, setBorrowedItems] = useState([]); const [ownedItems, setOwnedItems] = useState([]); - const [showBorrowed, setShowBorrowed] = useState(false); - const [showOwned, setShowOwned] = useState(false); const [userInfo, setUserInfo] = useState(null); const [editing, setEditing] = useState(false); + const [activeTab, setActiveTab] = useState("profile"); const navigate = useNavigate(); useEffect(() => { @@ -40,70 +39,88 @@ const ProfilePage = () => { fetchProfile(); }, []); - if (!userInfo) { - return ; - } - const handleItemClick = (id) => { navigate(`/items/${id}`); }; + if (!userInfo) return ; + return ( <>
-
-
- avatar -

- Email: {userInfo.email} -

-

- Name: {userInfo.firstName} {userInfo.lastName} -

-

- Phone: {userInfo.phone} -

-

- City: {userInfo.city} -

- -
- {!editing && ( - - )} - {editing && ( - { - setUserInfo(updatedUser); - setEditing(false); - }} - /> - )} +
+ {/* Tabs Navigation */} +
+ + +
-
- {/* Borrowed Items */} -
-
setShowBorrowed((prev) => !prev)} - > -

Borrowed Items

- - {showBorrowed ? "▼" : "▶"} - + {/* Tab Content */} +
+ {/* Profile Tab */} + {activeTab === "profile" && ( +
+ avatar +
+

+ Email: {userInfo.email} +

+

+ Name: {userInfo.firstName}{" "} + {userInfo.lastName} +

+

+ Phone: {userInfo.phone} +

+

+ City: {userInfo.city} +

+
+ + {!editing && ( + + )} + {editing && ( + { + setUserInfo(updatedUser); + setEditing(false); + }} + /> + )}
- {showBorrowed && ( + )} + + {/* Borrowed Items Tab */} + {activeTab === "borrowed" && ( +
+

Borrowed Items

{borrowedItems.length > 0 ? ( borrowedItems.map((item) => ( @@ -114,24 +131,16 @@ const ProfilePage = () => { /> )) ) : ( -

No borrowed items.

+

No borrowed items yet.

)}
- )} -
+
+ )} - {/* Owned Items */} -
-
setShowOwned((prev) => !prev)} - > + {/* Owned Items Tab */} + {activeTab === "owned" && ( +

Owned Items

- - {showOwned ? "▼" : "▶"} - -
- {showOwned && (
{ownedItems.length > 0 ? ( ownedItems.map((item) => ( @@ -142,11 +151,11 @@ const ProfilePage = () => { /> )) ) : ( -

No owned items.

+

No owned items yet.

)}
- )} -
+
+ )}