diff --git a/frontend/src/App.css b/frontend/src/App.css index 5a45d6a8..63692368 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,19 +1,7 @@ -* { - cursor: none; -} - .sidebar-content { padding: 10px; - cursor: none; + cursor: pointer; transition: background-color 0.2s; -} +} -.Toastify__toast-container { - color: #000; -} -.Toastify__toast { - font-size: 18px; - color: black; - background-color: rgb(165, 57, 197); -} diff --git a/frontend/src/Component/Footer.js b/frontend/src/Component/Footer.js index ac69a22b..837368d5 100644 --- a/frontend/src/Component/Footer.js +++ b/frontend/src/Component/Footer.js @@ -233,5 +233,5 @@ function Footer() { ); } - export default Footer; + diff --git a/frontend/src/Component/Home.js b/frontend/src/Component/Home.js index 8fb6a9a0..a12f1e43 100644 --- a/frontend/src/Component/Home.js +++ b/frontend/src/Component/Home.js @@ -1,17 +1,13 @@ import axios from "axios"; -import debounce from "lodash.debounce"; -import React, { useEffect, useRef, useState } from "react"; -import toast from "react-hot-toast"; -import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; -import "react-loading-skeleton/dist/skeleton.css"; -import Tilt from "react-parallax-tilt"; +import React, { useEffect, useState, useRef } from "react"; import { useDispatch } from "react-redux"; +import ClipLoader from "react-spinners/ClipLoader"; import jsonTools from "../DB/product.json"; -import Devlabs from "../image/hero_img.svg"; -import Testimonials from "../pages/Testimonials"; import { deleteSource, setSource } from "../Slice/DataSlice"; import "../style/Home.css"; +import Devlabs from "../image/hero_img.svg"; import NavbarItem from "./Navbar/NavbarItem"; +import toast from "react-hot-toast"; const BACKEND = process.env.REACT_APP_BACKEND; @@ -20,34 +16,29 @@ function Home(props) { const [localStorageValue, setLocalStorageValue] = useState( localStorage.getItem("filter") || "" ); - const ref = useRef(null); - useEffect(() => { - if (props.searchQuery !== "") { - ref.current?.scrollIntoView({ - behavior: "smooth", - }); - } - }, [props.searchQuery]); - const [selectedFilters, setSelectedFilters] = useState([]); - const [filteredItems, setFilteredItems] = useState(jsonTools); + const ref = useRef(); + + if (props.searchQuery !== "") { + ref.current?.scrollIntoView({ + behavior: "smooth", + }); + } + const [currentPage, setCurrentPage] = useState(1); const postPerpage = 16; const lastPostIndex = currentPage * postPerpage; const firstPostIndex = lastPostIndex - postPerpage; const [dataBaseData, setDataBaseData] = useState([]); const [loading, setLoading] = useState(false); - const [showPopup, setShowPopup] = useState(false); - const [showRemovePopup, setShowRemovePopup] = useState(false); - const [contributors, setContributors] = useState([]); - const [searchQuery, setSearchQuery] = useState(""); - const [searchResults, setSearchResults] = useState([]); - console.log(searchQuery); + const currentPost1 = dataBaseData; let allvalue = []; - const handleBookmarks = () => { + + function handleBookmarks() { const bookmark = JSON.parse(localStorage.getItem("bookmarks")); setBookmark(bookmark); - }; + } + useEffect(() => { handleBookmarks(); }, []); @@ -60,31 +51,20 @@ function Home(props) { window.addEventListener("storage", handleStorageChange); const fetchData = async () => { - try { - const response = await axios.get(`${BACKEND}/tools/all`); - if (response.data.success) { - setDataBaseData(response.data.tools); - } else { - setDataBaseData(jsonTools); - } - } catch (error) { - console.error(error); + const response = await axios + .get(`${BACKEND}/tools/all`) + .catch((error) => { + return error.response; + }); + if (response.data.success) { + setDataBaseData(response.data.tools); + } else { setDataBaseData(jsonTools); } - setTimeout(() => { - setLoading(false); - }, 2000); - }; - - const fetchContributors = async () => { - const response = await axios.get( - "https://api.github.com/repos/HimanshuNarware/Devlabs/contributors" - ); - setContributors(response.data); + setLoading(false); }; fetchData(); - fetchContributors(); return () => { window.removeEventListener("storage", handleStorageChange); @@ -123,47 +103,35 @@ function Home(props) { const numbers = [...Array(npage + 1).keys()].slice(1); const dispatch = useDispatch(); - const prePage = () => { + function prePage() { if (currentPage > 1) { setCurrentPage(currentPage - 1); - window.scrollTo({ - top: document.body.scrollHeight * 0.2, - behavior: "smooth", - }); } - }; + } - const nextPage = () => { + function nextPage() { if (currentPage < npage) { setCurrentPage(currentPage + 1); - window.scrollTo({ - top: document.body.scrollHeight * 0.2, - behavior: "smooth", - }); } - }; + } - const changeCPage = (id) => { + function changeCPage(id) { setCurrentPage(id); - window.scrollTo({ - top: document.body.scrollHeight * 0.2, - behavior: "smooth", - }); - }; - - const handleBookmark = (datalist) => { - let bookmarkList = JSON.parse(localStorage.getItem("bookmarks")) || []; - let found = bookmarkList.some((item) => item.name === datalist.productName); + } - if (!found) { - bookmarkList.push({ - image: datalist.image, - name: datalist.productName, - desc: datalist.description, - link: datalist.link, - }); - localStorage.setItem("bookmarks", JSON.stringify(bookmarkList)); - toast.success("Bookmark added successfully"); + function handleBookmark(datalist) { + if (bookmarks === null) { + localStorage.setItem( + "bookmarks", + JSON.stringify([ + { + image: datalist.image, + name: datalist.productName, + desc: datalist.description, + link: datalist.link, + }, + ]) + ); dispatch( setSource({ image: datalist.image, @@ -172,8 +140,8 @@ function Home(props) { link: datalist.link, }) ); + toast.success("Bookmark added successfully"); } else { - toast.error("Already bookmarked"); let found = false; for (let item of bookmarks) { if (item.name === datalist.productName) { @@ -205,14 +173,10 @@ function Home(props) { link: datalist.link, }) ); - setShowPopup(true); - setTimeout(() => { - setShowPopup(false); - }, 2000); } } handleBookmarks(); - }; + } const handleDeleteBookmark = (name) => { dispatch(deleteSource({ name })); @@ -225,86 +189,16 @@ function Home(props) { (bookmark) => bookmark.name !== name ); localStorage.setItem("bookmarks", JSON.stringify(updatedBookmarks)); - setShowRemovePopup(true); - setTimeout(() => { - setShowRemovePopup(false); - }, 2000); handleBookmarks(); }; - const filters = [ - "AI", - "Ethical", - "Extensions", - "Web", - "Movies", - "Remote", - "Resume", - "UI", - "Coding", - "Course", - "Tools", - ]; - - const handleFilterButtonClick = (selectedCategory) => { - if (selectedFilters.includes(selectedCategory)) { - setSelectedFilters([]); - } else { - setSelectedFilters([selectedCategory]); - } - }; - - useEffect(() => { - filterItems(); - }, [selectedFilters]); - - const filterItems = () => { - if (selectedFilters.length > 0) { - const tempItems = selectedFilters.map((selectedCategory) => - jsonTools.filter( - (jsonTool) => - jsonTool.category.toLowerCase() === selectedCategory.toLowerCase() - ) - ); - setFilteredItems(tempItems.flat()); - } else { - setFilteredItems([...jsonTools]); - } - }; - - const handleSearch = debounce((query) => { - setSearchQuery(query); - - if (query === "") { - setSearchResults([]); - return; - } - - const results = jsonTools.filter( - (tool) => - tool.productName && - tool.productName.toLowerCase().includes(query.toLowerCase()) - ); - - setSearchResults(results); - }, 300); - - let filterdata = []; - return ( - +
-
-
+
+

Welcome to
Devlabs!

@@ -317,229 +211,92 @@ function Home(props) { -Built by open-source community

-
- -
-
-
- - devlabs-removebg-preview - + + +
+
+
+ devlabs-removebg-preview +
-
-

Lets Get, What You seek!

-
- handleSearch(e.target.value)} - type="text" - placeholder="Search Tools ..." +
+
+
+ -
-
- {searchQuery && searchResults.length === 0 && ( -
- empty_state_img - - empty_state_img - -

No matching tools found.

-
- )} - {!loading && currentPost.length === 0 && ( -
- no post -

No posts found.

-
- )} -
-
- {filters.map((category) => ( - - ))} -
-
- {loading && ( -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- )} - - {!loading && - filteredItems - .filter((item) => { - return searchQuery.toLowerCase() === "" - ? item - : item.productName.toLowerCase().includes(searchQuery); - }) - .slice(firstPostIndex, lastPostIndex) - .map((datalist) => { - filterdata.push(datalist); - return ( -
{ + return ( +
+ {datalist.category} +

{datalist.productName}

+

{datalist.description}

+ + {bookmarks?.some((item) => + item.name.includes(datalist.productName) + ) ? ( + <> + - {bookmarks?.some((item) => - item.name.includes(datalist.productName) - ) ? ( - <> - - - ) : ( - - )} -
- ); - })} -
- {filterdata.length > 0 && ( -
-
    -
    -
  • - - < - -
    • -
    -
    - {numbers.map((n, i) => { - // Calculate range of visible page numbers around current page - const start = Math.max(1, currentPage - 4); // Show 4 pages before current page - const end = Math.min(npage, start + 8); // Show 8 pages in total - - // Show ellipsis if start is greater than 1 - if (start > 1 && i === 1) { - return ( -
  • - ... -
    • - ); - } - - // Show ellipsis if end is less than npage - if (end < npage && i === numbers.length - 1) { - return ( -
  • - ... -
    • - ); - } - - // Display the page number if within the visible range - if (n >= start && n <= end) { - return ( -
  • - changeCPage(n)}> - {n} - -
    • - ); - } - - return null; // Hide pages outside the visible range - })} -
    -
    -
  • - - > - -
    • -
    -
-
- )} + Remove + + + ) : ( + + )} +
+ ); + })} +
+
+
-
- +
); } diff --git a/frontend/src/Component/Navbar/NavbarCenter.js b/frontend/src/Component/Navbar/NavbarCenter.js index 7fc1ab76..7741e9ca 100644 --- a/frontend/src/Component/Navbar/NavbarCenter.js +++ b/frontend/src/Component/Navbar/NavbarCenter.js @@ -2,138 +2,49 @@ import React, { useState } from "react"; import { useSelector } from "react-redux"; import "../../style/Navbar.css"; import NavbarItem from "./NavbarItem"; -import RateUsComponent from "../../Component/Rate.jsx"; // Import the RateUsComponent -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import "../../style/BookMark.css"; -import { - faHome, - faBookmark, - faCode, - faInfoCircle, - faQuestionCircle, - faStar, - faUser, - faEnvelope, -} from "@fortawesome/free-solid-svg-icons"; -import { Modal, Backdrop, Box } from "@mui/material"; +import Modal from "../../Component/Modal"; +import RateUsComponent from "../../Component/Rateus"; // Import the RateUsComponent +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faHome, faBookmark, faCode, faInfoCircle, faQuestionCircle, faStar, faEnvelope } from '@fortawesome/free-solid-svg-icons'; function NavbarCenter() { - const totalBookmarks = - useSelector((state) => state.SourceReducer.totalBookmarks) || 0; + const totalBookmarks = useSelector((state) => state.SourceReducer.totalBookmarks) || 0; const [isModalOpen, setIsModalOpen] = useState(false); const handleRateUsClick = () => { setIsModalOpen(true); }; - const handleCloseModal = () => { - setIsModalOpen(false); - }; - return ( - <> -
- } - to="/bookmark" - /> - -
  • - - Open Source - - } - to="/open-source" - /> -
    • -
  • - - About Us - - } - to="/about" - /> -
    • -
  • - - FAQ's - - } - to="/faq" - /> -
    • -
  • - - Rate Us - - } - to="" - /> -
    • -
  • - - Contact - - } - to="/contact" - /> -
    • -
  • - - Login - - } - to="/Login" - /> -
    • -
  • - - Register - - } - to="/Register" - /> - My Profile -
    • - - - - - - - - + ); } + export default NavbarCenter; diff --git a/frontend/src/Component/Rate.css b/frontend/src/Component/Rate.css index 76fb8884..98c1cba3 100644 --- a/frontend/src/Component/Rate.css +++ b/frontend/src/Component/Rate.css @@ -1,17 +1,7 @@ input[type=radio]{ display: none; } -.Rate{ - height: 500px; -} -.Rate p{ - color: #fff; - font-size: 20px; - font-weight: 400; - margin-top: 20px; - /* background-color: ; */ -} .Rate .star{ cursor: pointer; } diff --git a/frontend/src/Component/Rateus.js b/frontend/src/Component/Rateus.js index 472b6d40..6855a4e5 100644 --- a/frontend/src/Component/Rateus.js +++ b/frontend/src/Component/Rateus.js @@ -1,25 +1,67 @@ -import React from 'react'; +import React, { useState } from "react"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import "./../style/Rateus.css"; + +function RateUsComponent({ previousContent }) { + const [rating, setRating] = useState(0); + const [feedback, setFeedback] = useState(""); + const handleFeedbackChange = (e) => { + setFeedback(e.target.value); + }; + + const handleEmojiClick = (emojiIndex) => { + setRating(emojiIndex); + }; + + const handleSubmit = () => { + if (rating !== 0 && feedback.trim() !== "") { + setRating(0); + setFeedback(""); + toast.success("Thanks For Your Feedback :)", { + position: "top-center" + }); + } else { + toast.error("Please Enter All Details :(", { + position: "top-center" + }); + } + }; + + const emojis = ["😢", "😟", "😐", "😊", "😍"]; -export default function Rate({ rating, setRating }) { return ( -
    - {[1, 2, 3, 4, 5].map((star) => ( - = star ? '#0d6efd' : 'gray', - fontSize: '35px', - }} - onClick={() => { - setRating(star); - }} - > - ★ - - ))} -
    + <> +
    +
    +

    Rate Our Website

    +
    + {emojis.map((emoji, index) => ( + handleEmojiClick(index + 1)} + > + {emoji} + + ))} +
    + + +
    +
    + + ); } - +export default RateUsComponent; + diff --git a/frontend/src/Component/Sidebar/Sidebar.js b/frontend/src/Component/Sidebar/Sidebar.js index c1f8322a..31d3fc4a 100644 --- a/frontend/src/Component/Sidebar/Sidebar.js +++ b/frontend/src/Component/Sidebar/Sidebar.js @@ -1,7 +1,7 @@ import React from "react"; import { Link } from "react-router-dom"; import { BsBookmark } from "react-icons/bs"; -import { AiFillHome } from "react-icons/ai"; +import { AiFillHome } from "react-icons/ai"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faHome, @@ -45,6 +45,7 @@ function Sidebar({ showSideNav }) { BookMark
    +
    About Us @@ -66,7 +67,7 @@ function Sidebar({ showSideNav }) {
    - + Rate Us
    diff --git a/frontend/src/Component/Sidebar/SidebarContent.js b/frontend/src/Component/Sidebar/SidebarContent.js index d88a5b44..c9165c2b 100644 --- a/frontend/src/Component/Sidebar/SidebarContent.js +++ b/frontend/src/Component/Sidebar/SidebarContent.js @@ -1,9 +1,7 @@ import React from "react"; function SidebarContent({name,description,active}) { - function handleSidebarClick(prop) { localStorage.setItem("filter", prop); - if (prop === "tools") { localStorage.setItem("filter-2", "web"); } diff --git a/frontend/src/style/Footer.css b/frontend/src/style/Footer.css index 9b7a23bd..c52f2b82 100644 --- a/frontend/src/style/Footer.css +++ b/frontend/src/style/Footer.css @@ -330,14 +330,9 @@ ul a .mr-2 { color: #000; transition: transform 0.3s ease, color 0.3s ease; } - .contact-link a:hover { - cursor: none; - color: #474eff !important; - color: white; - transform: scale(1.1); - animation: pulse 1s infinite alternate; -} + border: 2px solid #fff; +} @keyframes pulse { 0% { @@ -355,7 +350,10 @@ ul a .mr-2 { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } - .contact-link a:hover { - border: 2px solid #fff; + cursor: none; + color: #474eff !important; + color: white; + transform: scale(1.1); + animation: pulse 1s infinite alternate; } diff --git a/frontend/src/style/Home.css b/frontend/src/style/Home.css index ae84d3ef..2a735026 100644 --- a/frontend/src/style/Home.css +++ b/frontend/src/style/Home.css @@ -67,11 +67,11 @@ max-width: 100vw; overflow: auto; display: flex; - justify-content: center; /* Change from start to center */ + justify-content: start; align-items: center; margin-top: 20px; padding: 1rem; - margin-left: 0; /* Remove margin-left to center */ + margin-left: 32%; } .pagination .page-wrapper{ @@ -133,17 +133,13 @@ display: flex; flex-direction: row; align-items: center; - justify-content: center; /* Change from space-between to center */ -} -.let-text{ - text-align: center; - font-size: 30px; + justify-content: space-between; } + .hero-content { display: flex; - flex-direction: row; - width: 100%; /* Change from 50% to 100% for full width */ - text-align: center; /* Center the text */ + flex-direction: column; + width: 50%; gap: 6px; } @@ -231,8 +227,8 @@ text-align: center; } .hero-content { - /* display: flex; */ - /* flex-direction: column; */ + display: flex; + flex-direction: column; width: 100%; gap: 6px; } @@ -240,8 +236,12 @@ justify-content: center; } .hero-image { + height: 45%; + width: 100%; display: flex; - justify-content: center; /* Center the image */ + align-items: center; + justify-content: center; + margin-top: 2rem; } .hero-image img { height: 100%; @@ -518,13 +518,6 @@ background-color: #8b5cf6; cursor: pointer; } -.filter-container { - display: flex; - justify-content: center; /* Center filter buttons */ - flex-wrap: wrap; - gap: 10px; -} - .active_filter, .filter-button:hover { background-color: #09001f63; @@ -534,10 +527,10 @@ box-shadow: -1px 2px 8px #c5aff899,0px 2px 8px #6943c392; } -.search-feilds { +.search-fields { display: flex; - justify-content: center; /* Center the search field */ - margin-top: 20px; + justify-content: center; + margin: 20px 0; } .search-input { @@ -645,7 +638,7 @@ .hero-button a:hover { color: white; } - + @keyframes slideInLeft { from { opacity: 0; diff --git a/frontend/src/style/Modal.css b/frontend/src/style/Modal.css index 50236186..edaa921f 100644 --- a/frontend/src/style/Modal.css +++ b/frontend/src/style/Modal.css @@ -2,7 +2,7 @@ position: fixed; top: 0; left: 0; - right: 0; + right: 0; bottom: 0; background: rgba(239, 234, 234, 0.7); display: flex; @@ -11,14 +11,6 @@ z-index: 1000; } -.modal-content { - padding: 30px; - border-radius: 5px; - box-shadow: 0 0 10px rgba(168, 158, 158, 0.25); - color: rgb(19, 8, 26); /* Ensure text is purple */ - position: relative; -} - .close-buttoned { width: 50px; height: 50px; @@ -36,3 +28,10 @@ outline: none; /* Remove the default outline */ margin-left: auto; } +.modal-content { + padding: 30px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(168, 158, 158, 0.25); + color: rgb(19, 8, 26); /* Ensure text is purple */ + position: relative; +} \ No newline at end of file diff --git a/frontend/src/style/Navbar.css b/frontend/src/style/Navbar.css index d25725aa..8661067f 100644 --- a/frontend/src/style/Navbar.css +++ b/frontend/src/style/Navbar.css @@ -1,88 +1,97 @@ .navbar { - background-color: #6a43c3; - padding: 1rem; + background-color: #8b5cf6; + padding: 5px 10px; /* Decreased padding to reduce height */ position: fixed; - width: 1500px; + width: 100%; top: 0px; left: 0px; - height: auto; + height: 80px; align-items: center; - justify-content: start; + justify-content: space-between; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; z-index: 4; isolation: isolate; mix-blend-mode: normal; - - gap: 10px; - + padding-left: 30px; } .search-bar { display: flex; align-items: center; position: relative; - top: -10px; + top: -10px; /* Adjust the value as needed */ } - .navbar-content li { - flex-grow: 1; - margin: 0 15px; + flex-grow: 1; /* Make the navbar items stretch to fill the width */ + margin: 0 15px; /* Add margin to create space between nav items */ font-size: 1.3rem; - text-decoration: none; + text-decoration: none; /* Ensures no underline */ } -.navbar-brand { - background: transparent; -} -.navbar-content { - display: flex; - align-items: center; -} - -.nav-item { - position: relative; - color: #fff; - transition: transform 0.3s, filter 0.3s, box-shadow 0.3s; - box-shadow: 0 0 10px rgba(255, 255, 255, 0); -} .navbar-content .nav-item { - flex-wrap: wrap; - flex-grow: 1; + flex-grow: 1; /* Allow items to stretch */ text-align: center; - text-decoration: none; - margin: 0 -1px; + text-decoration: none; /* Ensures no underline */ + margin: 0 15px; /* Add space between items */ } + + .logo-img { width: 150px; - margin-right: auto !important; + margin-right: auto; /* Move the logo to the left */ +} +.navbar-content li { + list-style: none; + margin: 0 10px; + font-size: 1.3rem; + text-decoration: none; /* Ensures no underline */ + animation: slideTop 1s ease forwards; } - .navbar-content { display: flex; + text-decoration: none; /* Ensures no underline */ list-style: none; padding: 0; margin: 0; - justify-content: space-between; - width: 109%; + justify-content: space-between; /* Add space between items */ + width: 109%; /* Make the navbar items stretch along the width */ } .card-body img { background: transparent; } + +.navbar-brand { + background: transparent; +} + +.navbar-content { + display: flex; + align-items: center; +} +/* Define hover effect for nav-items */ +/* Define hover effect for nav-items */ +.nav-item { + position: relative; + color: #fff; + transition: transform 0.3s, filter 0.3s, box-shadow 0.3s; /* Add box-shadow to transition */ + box-shadow: 0 0 10px rgba(255, 255, 255, 0); /* Initially no shadow */ +} + .nav-item:hover { - color: black; - transform: scale(1.05); - filter: brightness(1.2); + transform: scale(1.05); /* Scale up slightly on hover */ + filter: brightness(1.2); /* Brighten on hover for shine effect */ + box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* Add glowing effect */ } + + .navbar-left { display: flex; - width: fit-content; justify-content: center; align-items: center; - padding: 10px; gap: 5px; animation: slideLeft 1s ease forwards; } @@ -91,14 +100,17 @@ width: 30px; height: 30px; position: relative; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); transform: rotate(0deg); + -webkit-transition: 0.5s ease-in-out; + -moz-transition: 0.5s ease-in-out; + -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; } -#nav-icon1:hover{ - cursor: none; -} .navbar-left #nav-icon1 span { display: block; position: absolute; @@ -108,7 +120,13 @@ border-radius: 9px; opacity: 1; left: 0; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); transform: rotate(0deg); + -webkit-transition: 0.25s ease-in-out; + -moz-transition: 0.25s ease-in-out; + -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } @@ -126,6 +144,9 @@ #nav-icon1.open span:nth-child(1) { top: 18px; + -webkit-transform: rotate(135deg); + -moz-transform: rotate(135deg); + -o-transform: rotate(135deg); transform: rotate(135deg); } @@ -136,77 +157,43 @@ #nav-icon1.open span:nth-child(3) { top: 18px; + -webkit-transform: rotate(-135deg); + -moz-transform: rotate(-135deg); + -o-transform: rotate(-135deg); transform: rotate(-135deg); } -.navbar-left { - display: flex; - width: fit-content; - justify-content: flex-start; /* Align items to the left */ - align-items: center; - padding: 10px; - gap: 5px; - animation: slideLeft 1s ease forwards; -} -.navbar-left { +.navbar-right { display: flex; - width: fit-content; - justify-content: flex-start; /* Align items to the left */ align-items: center; - padding: 10px; - gap: 5px; - animation: slideLeft 1s ease forwards; -} - -.navbar-center { animation: slideRight 1s ease forwards; - margin-right: 115px; + /* margin-right: 115px; */ } .logo-img { width: 150px; - margin-right: 140px; + margin-right: 140px; /* Move the logo to the right */ } -.nav-item a, -.navbar-content ul li a, -.Bookmark.nav-link.active { - - color: black !important; /* Ensure nav items are always black */ - text-decoration: none !important; - font-size: 1.2rem; +.nav-item a { + color: #0e0303; + text-decoration: none; + font-size: 1.2rem; /* Adjust font size as needed */ transition: color 0.3s; - position: relative; } -.nav-item a:hover, -.Bookmark.nav-link.active:hover { - color: black !important; /* Ensure nav items remain black on hover */ - font-weight: 700; +.navbar-content ul li a.active { + color: white; + background-color: green; } -.nav-item a::after, -.Bookmark.nav-link.active::after { - content: ''; - position: absolute; - width: 0%; - height: 2px; - - bottom: -5px; - left: 0; - background-color: black; /* Ensure underline is black */ - transition: all 0.3s ease-in-out; +.nav-item { + position: relative; + color: #fff; } -.nav-item a:hover::after, -.Bookmark.nav-link.active:hover::after { +.nav-item:hover::before { width: 100%; - background-color: black; /* Ensure underline remains black on hover */ -} - -.navbar-content ul li a.active { - color: black; - background-color: rgb(0, 128, 0); } .sidebar { @@ -214,26 +201,26 @@ height: 92%; background-color: #8b5cf6; position: fixed; - top: 4.6rem; - z-index: 4; + top: 4.4rem; + z-index: 3; display: flex; flex-direction: column; font-size: 1.4rem; overflow-y: scroll; transition: width 0.3s; + z-index: 4; } .nav-item::before { content: ""; position: absolute; - /* bottom: 0; */ + bottom: 0; left: 50%; - top: 35px; transform: translateX(-50%); width: 0; height: 2px; background-color: black; - /* transition: width 0.2s ease-in-out; */ + transition: width 0.2s ease-in-out; } .sidebar.active { @@ -243,6 +230,7 @@ .sidebar-content { border-bottom: 1px solid rgb(2, 27, 43); font-weight: 500; + transform: translateY(40px); opacity: 0; transition: transform 0.5s, opacity 0.5s; transition-delay: 0.2s; @@ -268,10 +256,10 @@ font-weight: 500; } -/* .Link:hover { +.Link:hover { color: rgb(72, 5, 5); text-decoration: none; -} */ +} .sidebar-btns { display: flex; @@ -288,9 +276,9 @@ line-height: 1; } -/* .sidebar-btn:hover { +.sidebar-btn:hover { color: rgba(0, 0, 0, 0.84); -} */ +} .sidebar { color: rgba(0, 0, 0, 0.84); @@ -343,7 +331,7 @@ background-clip: padding-box; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; position: relative; - padding-right: 40px; + padding-right: 40px; /* Adjust as needed */ flex: 1 1 auto; width: 1%; margin-bottom: 0; @@ -363,31 +351,31 @@ line-height: 1; } -/* .sidebar-btn:hover { +.sidebar-btn:hover { color: rgba(0, 0, 0, 0.84); -} */ +} .sidebar { - color: rgb(23, 0, 38); + color: rgba(0, 0, 0, 0.84); } -/* .filter:hover { - font-size: 1.8rem; - text-decoration: underline; -} */ .filter { transition: font-size 0.3s ease, text-decoration 0.3s ease; } - +.filter:hover { + font-size: 1.8rem; + text-decoration: underline; + /* transition: all 0.3s; */ +} .search { - margin-top: 0px; + margin-top: 0px; position: relative; } .box { margin-top: 15px; - margin-left: 65px; + margin-left: 65px; outline: none !important; border-radius: 20px; width: 80% !important; @@ -398,9 +386,9 @@ border: none; } -/* .box:hover { +.box:hover { border: 2.5px solid black; -} */ +} .input:focus { outline: none; @@ -409,6 +397,7 @@ } .span { + /* background: transparent !important; */ border: none !important; border-radius: 2px 100px 100px 2px; margin: 1.5px; @@ -418,11 +407,12 @@ font-size: 1.5rem; font-weight: b; line-height: 1.5; - color: black; + color: #495057; text-align: center; white-space: nowrap; background-color: #ebeff4; border: 1px solid #ced4da; + /* border-radius: 0.25rem; */ font-weight: bold !important; cursor: pointer; } @@ -448,7 +438,7 @@ font-size: 1.5rem; font-weight: b; line-height: 1.5; - color: black; + color: #495057; text-align: center; white-space: nowrap; background-color: #e9ecef; @@ -477,38 +467,6 @@ } /* Ensure no underline under nav items */ -.nav-item a, -.navbar-content ul li a, -.Bookmark.nav-link.active { - color: rgb(23, 0, 38) !important; /* Ensure nav items are always black */ +.nav-item a, .navbar-content ul li a { text-decoration: none !important; - font-size: 1.2rem; - transition: color 0.3s; - position: relative; -} - - -.nav-item a:hover, -.Bookmark.nav-link.active:hover { - color: rgb(23, 0, 38) !important; /* Ensure nav items remain black on hover */ - font-weight: 700; -} - - -.nav-item a::after, -.Bookmark.nav-link.active::after { - content: ''; - position: absolute; - width: 0%; - height: 2px; - bottom: -5px; - left: 0; - background-color: black; /* Ensure underline is black */ - transition: all 0.3s ease-in-out; -} - -.nav-item a:hover::after, -.Bookmark.nav-link.active:hover::after { - width: 100%; - background-color: black; /* Ensure underline remains black on hover */ } diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css index 5cc2e423..75edfca8 100644 --- a/frontend/src/style/Rateus.css +++ b/frontend/src/style/Rateus.css @@ -1,69 +1,104 @@ -.rate-us { +.rate-us-page { display: flex; justify-content: center; align-items: center; - height: 100vh; /* Ensure the component is centered vertically */ } -.rate-us__container { + +.toast-success { + background-color: #28a745; /* Green background for success */ + color: white; +} + + +.toast-error { + background-color: #dc3545; /* Red background for error */ + color: white; +} + +.toast-body { + font-size: 16px; + text-align: center; +} + +.rate-us-container { width: 70%; max-width: 600px; padding: 20px; - border: 1px solid #210202; border-radius: 5px; - background-color: black; + background-color: #8B5CF6; transition: box-shadow 0.3s, transform 0.3s; } -.rate-us__heading { - text-align: center; - margin-bottom: 20px; - color: #7c1de2; +.rate-us-container:hover { + box-shadow: 0 0 20px #8B5CF6; + transform: scale(1.05); } -.rate-us__container--hover:hover { - box-shadow: 0 0 20px #7c1de2; - transform: scale(1.05); +.rate-us-heading { + text-align: center; + margin-bottom: 20px; + color: #000; } -.rate-us__icon-rating { +.emoji-rating { margin-bottom: 20px; display: flex; justify-content: center; } - -.rate-us__submit-button { - width: 30%; - padding: 10px; - background-color: #7c1de2; +.submit-button:hover { + background: #101623; + border: 2px solid #fff; color: white; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s; } -.rate-us__icon { - font-size: 2rem; /* Increase emoji size */ + +.emoji { + font-size: 24px; cursor: pointer; - transition: transform 0.3s, filter 0.3s; + transition: transform 0.3s, text-shadow 0.3s; + margin: 0 10px; } -.rate-us__submit-button--hover:hover { - background-color: #5f129f; + +.emoji.selected { + transform: scale(1.5); + text-shadow: 0 0 20px #f7b731; + animation: shine 1.5s infinite; } -.rate-us__icon--selected { - transform: scale(1.0); /* Make selected emoji bigger */ - filter: brightness(1.5); /* Shine effect */ + +@keyframes shine { + 0% { + text-shadow: 0 0 10px #f7b731, 0 0 20px #f7b731, 0 0 30px #f7b731, 0 0 40px #f7b731, 0 0 50px #f7b731, 0 0 60px #f7b731, 0 0 70px #f7b731; + } + 100% { + text-shadow: 0 0 20px #f7b731, 0 0 30px #f7b731, 0 0 40px #f7b731, 0 0 50px #f7b731, 0 0 60px #f7b731, 0 0 70px #f7b731, 0 0 80px #f7b731; + } } -.rate-us__feedback-textarea { +.feedback-textarea { width: 100%; height: 180px; padding: 10px; - border: 1px solid #060404; + background-color: #101623; border-radius: 5px; resize: none; margin-bottom: 20px; - font-size: 1rem; /* Adjust textarea font size */ + color: white; } + +.submit-button { + width: 30%; + padding: 10px; + background-color: #101623; + color: white; + font-weight: 600; + border: none; + border-radius: 25px; + cursor: pointer; + transition: background-color 0.3s; +} + + + + diff --git a/frontend/src/style/Sidebar.css b/frontend/src/style/Sidebar.css index 189e0774..a353035f 100644 --- a/frontend/src/style/Sidebar.css +++ b/frontend/src/style/Sidebar.css @@ -6,27 +6,8 @@ justify-content: flex-start; margin-top: 20px; } + -.sidebar-btn { - margin-bottom: 10px; -} - -.sidebar-btn a { - color: var(--sidebar-text-light); - text-decoration: none; - display: flex; - align-items: center; - padding: 10px; - transition: color 0.3s ease-in-out; -} - -.sidebar-btn a:hover { - color: var(--sidebar-hover-light); -} - -.sidebar-btn a svg { - margin-right: 10px; -} @media (prefers-color-scheme: dark) { .sidebar { @@ -106,7 +87,26 @@ 0 0 30px var(--sidebar-hover), 0 0 40px var(--sidebar-hover); } +.sidebar-btn { + margin-bottom: 10px; +} +.sidebar-btn a { + color: var(--sidebar-text-light); + text-decoration: none; + display: flex; + align-items: center; + padding: 10px; + transition: color 0.3s ease-in-out; +} + +.sidebar-btn a:hover { + color: var(--sidebar-hover-light); +} + +.sidebar-btn a svg { + margin-right: 10px; +} /* Cascade Style */ .sidebar-content { display: flex;