diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json index 6a47c15..2808c04 100644 --- a/Frontend/package-lock.json +++ b/Frontend/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^7.1.4" }, "devDependencies": { "@eslint/js": "^9.15.0", @@ -1298,6 +1299,12 @@ "@babel/types": "^7.20.7" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -1759,6 +1766,15 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -3689,6 +3705,46 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.4.tgz", + "integrity": "sha512-aJWVrKoLI0nIK1lfbTU3d5al1ZEUiwtSus/xjYL8K5sv2hyPesiOIojHM7QnaNLVtroOB1McZsWk37fMQVoc6A==", + "license": "MIT", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.4.tgz", + "integrity": "sha512-p474cAeRKfPNp+9QtpdVEa025iWLIIIBhYCnjsSwFmZH3c5DBHOc7vB7zmL6lL747o0ArfrLblNTebtL6lt0lA==", + "license": "MIT", + "dependencies": { + "react-router": "7.1.4" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.8.tgz", @@ -3855,6 +3911,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -4134,6 +4196,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", + "license": "ISC" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/Frontend/package.json b/Frontend/package.json index 1454bb1..13c72b2 100644 --- a/Frontend/package.json +++ b/Frontend/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^7.1.4" }, "devDependencies": { "@eslint/js": "^9.15.0", diff --git a/Frontend/src/Components/CommonModule/NavBarModule/NavBar.jsx b/Frontend/src/Components/CommonModule/NavBarModule/NavBar.jsx index f74ed6c..5d34ba0 100644 --- a/Frontend/src/Components/CommonModule/NavBarModule/NavBar.jsx +++ b/Frontend/src/Components/CommonModule/NavBarModule/NavBar.jsx @@ -80,4 +80,4 @@ const NavBar = () => { ); }; -export default NavBar; +export default NavBar; \ No newline at end of file diff --git a/Frontend/src/Components/CommonModule/NavBarModule/NavBar.module.css b/Frontend/src/Components/CommonModule/NavBarModule/NavBar.module.css index 5b70a32..5f73855 100644 --- a/Frontend/src/Components/CommonModule/NavBarModule/NavBar.module.css +++ b/Frontend/src/Components/CommonModule/NavBarModule/NavBar.module.css @@ -6,15 +6,20 @@ width: 1531px; height: 88.46px; margin-left: 36px; - margin-top: 10.77px; box-sizing: border-box; - } .navbarWrapper { display: flex; align-items: center; width: 100%; + z-index: 1; + position: fixed; + margin-top: 10px; + left: 0; + z-index: 1000; + /* background-color: white; */ + /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */ } .MainContainer { @@ -67,33 +72,35 @@ transition: color 0.3s; } -.menuItem a { +.menuLink { text-decoration: none; color: black; + font-size: 23.46px; font-weight: normal; - transition: color 0.3s, font-weight 0.3s; + padding-bottom: 8px; + display: inline-block; + font-family: Comfortaa; position: relative; } -.menuItem.active a { - font-weight: bold; - border-bottom: 3px solid black; -} - -.menuItem.active a::after { +.menuLink::after { content: ""; position: absolute; - bottom: -5px; - left: 0; - width: 100%; - height: 4px; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 50px; + /* Fixed width for the underline */ + height: 3px; + /* Height of the underline */ + background-color: transparent; + /* Initially transparent */ + transition: background-color 0.3s; +} + +.menuLink.active::after { background-color: black; - border-radius: 2px; - transition: height 0.3s; -} - -.menuItem:hover { - color: #61dafb; + /* Underline appears when active */ } .searchContainer { @@ -149,6 +156,7 @@ display: flex; width: 206px; height: 40px; + padding-top: 20px; } .logo { @@ -215,16 +223,4 @@ .searchInput { padding: 8px; } -} - -.menuLink { - text-decoration: none; - color: black; - font-weight: normal; - transition: color 0.3s, font-weight 0.3s; -} - -.active { - font-weight: bold; - border-bottom: 3px solid black; } \ No newline at end of file diff --git a/Frontend/src/Components/GalleryModule/DesktopSection/Desktop.module.css b/Frontend/src/Components/GalleryModule/DesktopSection/Desktop.module.css index 0a4c1d8..4210dcf 100644 --- a/Frontend/src/Components/GalleryModule/DesktopSection/Desktop.module.css +++ b/Frontend/src/Components/GalleryModule/DesktopSection/Desktop.module.css @@ -8,7 +8,7 @@ body { flex-direction: column; align-items: center; margin-left: 5.5%; - margin-top: 0; + margin-top: 1000; overflow: visible; min-height: 100vh; } @@ -17,5 +17,5 @@ body { display: flex; justify-content: space-around; margin-bottom: 3%; - gap: 3.5%; + gap: 5%; } \ No newline at end of file diff --git a/Frontend/src/Components/GalleryModule/DesktopSection/ImgCardsDesktop/ImgCard.module.css b/Frontend/src/Components/GalleryModule/DesktopSection/ImgCardsDesktop/ImgCard.module.css index 672ee34..78c7421 100644 --- a/Frontend/src/Components/GalleryModule/DesktopSection/ImgCardsDesktop/ImgCard.module.css +++ b/Frontend/src/Components/GalleryModule/DesktopSection/ImgCardsDesktop/ImgCard.module.css @@ -1,36 +1,61 @@ .imgCard { - width: 38%; + width: 720px; + height: 457px; + /* position: absolute; */ + top: 149px; + left: 298px; display: flex; flex-direction: column; - align-items: center; + gap: 0; } .imageContainer { width: 100%; - height: auto; + height: calc(457px - 60px); + /* Account for bottom bar height */ + overflow: hidden; + border-radius: 10px; +} + +.image { + width: 100%; + height: 100%; + object-fit: cover; } .bottomBar { + width: 100%; + height: 60px; display: flex; + justify-content: space-between; align-items: center; - padding-top: 10px; - padding-right: 3%; + padding: 0 3px; } .icons { display: flex; gap: 13px; - padding-right: 96%; - margin-left: -27%; } .userInfo { display: flex; align-items: center; + gap: 15px; } .username { font-size: 20px; color: #808080; - margin-right: 7%; +} + +/* Optional hover effects */ +.icon, +.downloadBtn { + transition: transform 0.2s ease; + cursor: pointer; +} + +.icon:hover, +.downloadBtn:hover { + transform: scale(1.1); } \ No newline at end of file diff --git a/Frontend/src/Components/GalleryModule/Gallery.jsx b/Frontend/src/Components/GalleryModule/Gallery.jsx index 20a6a77..0623d41 100644 --- a/Frontend/src/Components/GalleryModule/Gallery.jsx +++ b/Frontend/src/Components/GalleryModule/Gallery.jsx @@ -1,4 +1,4 @@ -import React from "react" +import { useRef, useEffect, useState } from "react" import { Routes, Route, Navigate } from "react-router-dom" import Styles from "./Gallery.module.css" import NavBar from "../CommonModule/NavBarModule/NavBar" @@ -8,12 +8,36 @@ import Desktop from "./DesktopSection/Desktop" import SideBar from "./SideBarModule/SideBar" const Gallery = () => { + const galleryContentRef = useRef(null) + const [showBlend, setShowBlend] = useState(false) + + useEffect(() => { + const handleScroll = () => { + if (galleryContentRef.current) { + const scrollTop = galleryContentRef.current.scrollTop + setShowBlend(scrollTop > 0) + } + } + + const galleryContent = galleryContentRef.current + if (galleryContent) { + galleryContent.addEventListener("scroll", handleScroll) + } + + return () => { + if (galleryContent) { + galleryContent.removeEventListener("scroll", handleScroll) + } + } + }, []) + return (
-
+
+
} /> } /> @@ -27,4 +51,3 @@ const Gallery = () => { } export default Gallery - diff --git a/Frontend/src/Components/GalleryModule/Gallery.module.css b/Frontend/src/Components/GalleryModule/Gallery.module.css index 48040c1..df26665 100644 --- a/Frontend/src/Components/GalleryModule/Gallery.module.css +++ b/Frontend/src/Components/GalleryModule/Gallery.module.css @@ -8,8 +8,6 @@ body { grid-template-rows: auto 1fr; height: 100vh; position: relative; - overflow: hidden; - } .mainContent { @@ -17,35 +15,45 @@ body { grid-template-columns: auto 1fr; overflow: hidden; position: relative; - z-index: 1; } .gallery { display: grid; grid-template-rows: repeat(auto-fill, minmax(min-content, max-content)); - gap: 30px; overflow-y: auto; - height: calc(100% + 50px); + height: 100%; padding: 20px; box-sizing: border-box; position: relative; - z-index: 0; - - } .imgGrid { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 20px; align-content: start; } .galleryContent { overflow-y: auto; - padding-top: 3%; - /* padding-left: 2%; */ - padding-right: 7%; + padding-top: 0px; + padding-left: 60px; + padding-right: 3.5%; + margin-top: 100px; + position: relative; +} + +.blendOverlay { + position: sticky; + top: 0; + left: 0; + right: 0; + height: 50px; + width: 1533px; + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%); + pointer-events: none; + z-index: 10; + opacity: 0; + transition: opacity 0.15s ease-in-out; } @media (max-width: 768px) { diff --git a/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.jsx b/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.jsx index f135054..6cc8fa6 100644 --- a/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.jsx +++ b/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.jsx @@ -51,7 +51,7 @@ const SideBar = () => {
-

@CopyRight

+
diff --git a/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.module.css b/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.module.css index 4a786a8..c4b8d65 100644 --- a/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.module.css +++ b/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.module.css @@ -7,35 +7,17 @@ display: flex; flex-direction: column; align-items: flex-start; -} - -.navWithLogo { - display: flex; - justify-content: flex-start; - /* margin-top: 5%; */ - + margin-top: 150px; } .mainContainer { - margin-top: 50px; border-radius: 3.7px; width: 99%; - /* opacity: 0.39; */ - /* background: linear-gradient(180deg, #e6e1fd 0%, #fdd7de 100%); */ - background: linear-gradient(180deg, - rgba(230, 225, 253, 0.39) 0%, - rgba(253, 215, 222, 0.39) 100%); + background: linear-gradient(180deg, rgba(230, 225, 253, 0.39) 0%, rgba(253, 215, 222, 0.39) 100%); display: flex; flex-direction: column; justify-content: space-between; - min-height: 87vh; -} - -.logo { - padding: 0; - width: 200px; - margin-right: 6%; - cursor: pointer; + min-height: 87.7vh; } .listContainer { @@ -58,13 +40,12 @@ .verticalList li { margin: 50px 0; - cursor: pointer; } .copyright { text-align: center; color: rgba(0, 0, 0, 0.19); - font-family: Comfortaa; + font-family: Comfortaa, sans-serif; font-size: 23.463px; font-style: normal; font-weight: 400; @@ -75,21 +56,68 @@ .listItem { cursor: pointer; - padding: 10px; + padding: 20px 13px 20px 13px; position: relative; - border: 4px solid transparent; - border-radius: 20px; - transition: transform 0.3s, border-color 0.3s; + border-radius: 12.41px; + transition: transform 0.3s; + color: #000; + font-weight: bold; + z-index: 1; +} + +.listItem::before { + content: ""; + position: absolute; + inset: 0; + border-radius: 12.41px; + padding: 3.7px; + background: linear-gradient(180deg, + rgba(0, 143, 255, 0.5) 0%, + rgba(255, 157, 0, 0.5) 34%, + rgba(217, 0, 0, 0.5) 71.5%, + rgba(151, 0, 136, 0.5) 100%); + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + z-index: -1; + opacity: 0; + transition: opacity 0.3s; + box-shadow: 0 4px 15px rgba(186, 200, 255, 0.3), 0 6px 20px rgba(255, 202, 253, 0.2); } .listItem:hover { transform: scale(1.05); } +.listItem.active::before { + opacity: 1; +} + .listItem.active { - font-weight: bold; - color: #000; - border-image: linear-gradient(45deg, #ff6b6b, #fbc531, #4cd137, #0097e6, #8c7ae6) 1; transform: scale(1.1); - mask-composite: exclude; +} + +small { + font-size: 0.7em; +} + +#copyright { + font-family: 'Comfortaa', sans-serif; + font-size: 19.3px; + font-weight: 400; + line-height: 21.52px; + text-align: center; + text-underline-position: from-font; + text-decoration-skip-ink: none; + background: #BFBFBF; +} + +#copyright small { + font-family: 'Comfortaa', sans-serif; + font-size: 10px; + font-weight: 400; + line-height: 11.15px; + text-align: center; + text-underline-position: from-font; + text-decoration-skip-ink: none; } \ No newline at end of file diff --git a/Frontend/src/index.css b/Frontend/src/index.css index 954ca4e..bee147d 100644 --- a/Frontend/src/index.css +++ b/Frontend/src/index.css @@ -7,8 +7,8 @@ body { margin: 0; font-family: var(--font-family); background-image: url("../public/BACKGROUND.svg"); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - background-attachment: fixed; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; } \ No newline at end of file