From 56d45cba22e7aa3ded004f8070a45aabc9100f8f Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Thu, 8 Aug 2024 13:59:13 +0530 Subject: [PATCH 01/18] Enhanced RateUs --- frontend/src/Component/Navbar/NavbarItem.js | 1 - frontend/src/Component/Navbar/NavbarLeft.js | 7 +- frontend/src/Component/Navbar/NavbarRight.js | 49 +- frontend/src/Component/Rateus.js | 2 +- frontend/src/style/Home.css | 497 +++++++++++++------ frontend/src/style/Rateus.css | 14 + 6 files changed, 359 insertions(+), 211 deletions(-) diff --git a/frontend/src/Component/Navbar/NavbarItem.js b/frontend/src/Component/Navbar/NavbarItem.js index a7da1e7e..9b0a1639 100644 --- a/frontend/src/Component/Navbar/NavbarItem.js +++ b/frontend/src/Component/Navbar/NavbarItem.js @@ -1,6 +1,5 @@ import React from "react"; import { Link } from "react-router-dom"; - function NavbarItem({ description, to }) { return ( diff --git a/frontend/src/Component/Navbar/NavbarLeft.js b/frontend/src/Component/Navbar/NavbarLeft.js index 65daeb5d..36d773f9 100644 --- a/frontend/src/Component/Navbar/NavbarLeft.js +++ b/frontend/src/Component/Navbar/NavbarLeft.js @@ -1,8 +1,7 @@ import React, { useEffect } from "react"; import "../../style/Navbar.css" import logo from "../../image/logo1.png"; - -function NavbarLeft(props) { +function NavbarLeft(props, showSideNav) { useEffect(() => { const handleDocumentClick = (e) => { if (!e.target.closest('.navbar-left')) { @@ -28,7 +27,7 @@ function NavbarLeft(props) { } return ( - + { - let timer = setTimeout(() => { - setSearchQuery(searchQuery); - }, 300); - return () => { - clearTimeout(timer); - }; - }, [searchQuery, setSearchQuery]); - - const handleInputChange = (e) => { - setLocalSearchQuery(e.target.value); // Update the search query when input changes - }; - - const handleSearch = (e) => { - e.preventDefault(); - setSearchQuery(searchQuery); // Pass the search query to the parent component (App) - }; - const clearSearchHandler = (e) => { e.preventDefault(); - setLocalSearchQuery(""); setSearchQuery(""); // Pass the empty search query to the parent component (App) }; return ( ); } diff --git a/frontend/src/Component/Rateus.js b/frontend/src/Component/Rateus.js index 1e1c861d..4260fa9e 100644 --- a/frontend/src/Component/Rateus.js +++ b/frontend/src/Component/Rateus.js @@ -31,7 +31,6 @@ function RateUsComponent({ previousContent }) { }); } }; - return ( <>
@@ -44,6 +43,7 @@ function RateUsComponent({ previousContent }) { className={star <= rating ? "star filled" : "star"} onClick={() => handleStarClick(star)} > + ★ ))} diff --git a/frontend/src/style/Home.css b/frontend/src/style/Home.css index 7e1373c0..62dce8e2 100644 --- a/frontend/src/style/Home.css +++ b/frontend/src/style/Home.css @@ -1,9 +1,10 @@ /* hero section starts */ .hero { - margin-top: 5.3vh; + margin-top: 1rem; + max-width: 100vw; width: 100%; - z-index: 0; - height: 90vh; + z-index: 0; + min-height: 100vh; position: relative; background-position: center; background-size: cover; @@ -17,8 +18,12 @@ } /* Custom scrollbar for webkit browsers (Chrome, Safari, Edge) */ -::-webkit-scrollbar { - width: 6px; /* Width of the scrollbar */ + +::-webkit-scrollbar-track { + background-color: var( + --scrollbar-bg + ); /* Background color of the scrollbar track */ + border-radius: 15px; } /* Custom scrollbar for Firefox */ @@ -26,13 +31,7 @@ scrollbar-width: thin; /* Makes the scrollbar thin */ scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg); /* Custom colors */ border-radius: 15px; -} - -::-webkit-scrollbar-track { - background-color: var( - --scrollbar-bg - ); /* Background color of the scrollbar track */ - border-radius: 15px; + width: 6px; /* Width of the scrollbar */ } /* contributor style */ .contributors-section { @@ -65,10 +64,21 @@ } .pagination { + max-width: 100vw; + overflow: auto; display: flex; - justify-content: center; + justify-content: start; align-items: center; margin-top: 20px; + padding: 1rem; + margin-left: 32%; +} + +.pagination .page-wrapper{ + display: flex; + gap: 5px; + justify-content: center; + align-items: center; } .pagination ul { @@ -107,20 +117,6 @@ border-radius: 15px; } -@media (min-width: 768px) { - .hero { - background-position: left top; - } -} - -@media (max-width: 768px) { - .hero-heading { - /* margin-right:5rem; */ - align-items: center; - justify-content: center; - text-align: center; - } -} .hero-text { width: 100%; height: 100%; @@ -128,92 +124,142 @@ } .hero-container { - position: relative; - max-width: 80rem; - margin-left: auto; - margin-right: auto; + min-height: 100vh; + width: 100%; + height: auto; + padding: 1rem 2rem; display: flex; - flex-direction: column; + flex-direction: row; + align-items: center; justify-content: space-between; - padding-left: 3px; - padding-right: 3px; - padding-top: 3px; - padding-bottom: 10px; - height: 100%; } -@media (min-width: 768px) { - .hero-container { - margin-left: 3rem; - } +.hero-content { + display: flex; + flex-direction: column; + width: 50%; + gap: 6px; } -@media (min-width: 1024px) { - .hero-container { - padding-left: 6px; - padding-right: 6px; - } +.hero-heading { + font-weight: 600; + font-size: 4rem; + color: #8b5cf6; + padding: 0.5rem; + margin-top: 5rem; } -.hero-content { +.hero-subheading { + margin-top: 1%; + font-size: 3rem; + font-weight: 500; +} +@property --gradient-angle { + syntax: ""; + initial-value: 0deg; + inherits: false; +} + +.content-box-home { + max-width: 100vw; + position: relative; + background-color: #101623; + border: 10px; + margin: 20px; + padding: 7px 12px; + border-radius: 6px; + box-shadow: 0px 0px 20px violet; + transform-style: preserve-3d; + transition: transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out; +} +.content-box-home::before, +.content-box-home::after { + content: ""; position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); - display: flex; - flex-direction: column; - width: fit-content; - gap: 6px; + inset: -0.3rem; + z-index: 2; + background: conic-gradient( + from var(--gradient-angle), + #672ba6, + #8b5cf6, + #cfbff7, + #c35cf6, + #6c2bb1 + ); + + border-radius: inherit; + animation: moving 3s linear infinite; + + mask: linear-gradient( + to right, + black 1%, + transparent 0%, + transparent 99%, + black 90% + ), + linear-gradient( + to bottom, + black 1%, + transparent 0%, + transparent 99%, + black 90% + ); +} + +@keyframes moving { + 0% { + --gradient-angle: 0deg; + } + 100% { + --gradient-angle: 360deg; + } } -@media (max-width: 768px) { - .hero-button { - width: 50%; - /* margin-left:2rem; */ +@media (max-width: 769px) { + .hero-container { + flex-direction: column; + } + .hero-heading { + /* margin-right:5rem; */ + align-items: center; + justify-content: center; + text-align: center; } - .hero-content { + display: flex; + flex-direction: column; + width: 100%; + gap: 6px; + } + .hero-button-container { + justify-content: center; + } + .hero-image { + height: 45%; width: 100%; - text-align: center; - max-width: 100%; - padding-left: 0rem; - /* padding-right: 1rem; */ display: flex; - align-self: center; + align-items: center; justify-content: center; - margin-top: 6rem; + margin-top: 2rem; } -} -@media (min-width: 1024px) { - .hero-content { - left: 2%; + .hero-image img { + height: 100%; + width: 100%; + object-fit: fill; + background: none; } } -.hero-heading { - font-weight: 500; - font-size: 2.5rem; - color: #8b5cf6; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.5rem; - padding-right: 1rem; - margin-top: 5rem; -} - -@media (min-width: 768px) { +@media (max-width: 430px) { .hero-heading { font-size: 3rem; } -} - -@media (min-width: 1024px) { - .hero-heading { - font-size: 4rem; - font-weight: 650; + .hero-subheading { + font-size: 2rem; } } + .hero-button { - background-color: #8b5cf6; + background-color: #6a43c3; height: 3.5rem; font-size: 2rem; border-radius: 30px; @@ -223,15 +269,13 @@ width: 70%; } -.hero-button-container { - width: 100%; -} - .hero-button:hover { - background: #101623; - border: 2px solid #8b5cf6; + background-color: #09001f63; + backdrop-filter: blur(10px); + border: 2px solid #804afe; color: white; - box-shadow: 4px 4px 2px #8b5cf6; + box-shadow: -1px 2px 8px #c5aff899,0px 2px 8px #6943c392; + cursor: none; } .hero-button a:hover { color: white; @@ -240,59 +284,27 @@ margin-top: 5%; font-size: 1.25rem; } -.hero-subheading { - margin-top: 7%; - font-size: 1.5rem; - font-weight: 500; -} - -@media (min-width: 768px) { - .hero-subheading { - font-size: 2.25rem; - } -} .hero-image img { animation: float 6s ease-out infinite; - } @keyframes float { - 0% { transform: translate(0, 0px); } - 50% { transform: translate(0, 25px); } - 100% { transform: translate(0, -0px); } -} - - - -@media (max-width: 768px) { - .hero-image { - height: 45%; - width: 100%; - display: flex; - align-items: center; - justify-content: center; - margin-top: 2rem; + 0% { + transform: translate(0, 0px); } - .hero { - height: 101vh; + 50% { + transform: translate(0, 25px); } - .hero-image img { - height: 100%; - width: 100%; - object-fit: fill; - background: none; + 100% { + transform: translate(0, -0px); } } @media (min-width: 768px) { .hero-image { display: block; - position: absolute; - top: 40%; - left: 55%; - right: 0; - transform: translateY(-30%); - width: 45%; + position: relative; + width: 50%; height: auto; z-index: 1; } @@ -306,8 +318,9 @@ width: 100vw; max-width: 100vw; } -.main-container { +.main-container{ display: grid; + max-width: 100vw; grid-template-columns: repeat(4, 1fr); margin: 10px; margin-top: 5rem; @@ -338,15 +351,6 @@ } } -.content-box-home { - background-color: #101623; - border: 2px solid rgba(79, 71, 125, 255); - margin: 20px; - padding: 7px 12px; - border-radius: 12px; - box-shadow: 2px 2px 8px rgba(79, 71, 125, 255); -} - @media screen and (max-width: 950px) { .content-box-home { margin: 10px; @@ -357,13 +361,9 @@ } .content-box-home:hover { - transform: scale(1.1); - box-shadow: 0px 0px 25px #8b5cf6; - transition: transform 0.6s ease-in-out, box-shadow 0.3s ease-in-out; -} - -.content-box-home { - transition: transform 0.6s ease-in-out, box-shadow 0.3s ease-in-out; + transform: scale(1.1) ; + box-shadow: 0px 0px 15px #b85cf6e1; + z-index: 3; } .container-box-home { @@ -374,14 +374,39 @@ color: white; padding: 4px; min-height: 80px; - -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; + -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; margin-bottom: 1rem; height: 100px; + transition: transform 0.6s ease-in-out; + transform-style: preserve-3d; +} + +.content-box-home:hover .content-box-text { + transform: translateZ(40px); + letter-spacing: 1px; + text-wrap: none !important; + text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8), 0 -2px 2px rgba(0, 0, 0, 0.7), + 0 -3px 3px rgba(0, 0, 0, 0.6), 0 -4px 4px rgba(0, 0, 0, 0.5), + 0 -5px 5px rgba(0, 0, 0, 0.4), 0 -6px 6px rgba(0, 0, 0, 0.3), + 0 -7px 7px rgba(0, 0, 0, 0.2), 0 -8px 8px rgba(0, 0, 0, 0.1); + font-size: 20px !important; +} + +.content-box-home:hover h2 { + transform: translateZ(20px) translateY(-3px) translateZ(40px); + text-shadow: 0 1px 1px rgba(139, 92, 246, 0.6), + 0 2px 2px rgba(139, 92, 246, 0.5), 0 3px 3px rgba(139, 92, 246, 0.4), + 0 4px 4px rgba(139, 92, 246, 0.3), 0 4px 5px rgba(139, 92, 246, 0.2), + 0 4px 4px rgba(139, 92, 246, 0.1), 0 4px 4px rgba(139, 92, 246, 0.1), + 0 4px 4px rgba(139, 92, 246, 0.1); +} +.content-box-home:hover .logo { + transform: translateZ(40px) translateY(-3px) translateZ(40px); } .logo { @@ -389,11 +414,19 @@ height: 80px; margin-bottom: 10px; margin-top: 10px; + transition: transform 0.6s ease-in-out; } +.content-box-home:hover .logo { + transform: translateZ(20px); +} +.content-box-home:hover .btn-b-box { + transform: translateZ(40px); + box-shadow: 0px 0px 25px #8b5cf6; +} .btn-booked-box, .btn-b-box { - color: rgb(255, 255, 255); + color: #000; font-size: 1.1rem; border: 1px solid #8b5cf6; margin-inline: 10px; @@ -403,24 +436,27 @@ border-radius: 6px; box-shadow: 1px 1px rgb(0, 0, 0, 0.5); background-color: #8b5cf6; - cursor: pointer; + cursor: none; } .btn-booked-box { border: 2px dashed #8b5cf6; color: white; - cursor: pointer; + cursor: none; background: transparent; } .btn-booked-box:hover { color: white; - cursor: pointer; + cursor: none; background-color: #8b5cf6; + box-shadow: 10px 10px 30px rgba(139, 92, 246, 0.8), + -10px -10px 30px rgba(139, 92, 246, 0.3); } .btn-b-box:hover { + color: #fff; background: transparent; - cursor: pointer; + cursor: none; box-shadow: 2px 2px 1px #8b5cf6; } @@ -466,3 +502,148 @@ left: 6px; top: 14px; } + +.filter-button { + color: #000; + font-size: 1.1rem; + border: 1px solid #8b5cf6; + margin-inline: 10px; + padding: 6px 16px 6px 16px; + background: transparent; + margin-bottom: 10px; + border-radius: 6px; + box-shadow: 1px 1px rgb(0, 0, 0, 0.5); + background-color: #8b5cf6; + cursor: pointer; +} + +.active_filter, .filter-button:hover { + background-color: #09001f63; + backdrop-filter: blur(10px); + border: 2px solid #804afe; + color: white; + box-shadow: -1px 2px 8px #c5aff899,0px 2px 8px #6943c392; +} + +.search-fields { + display: flex; + justify-content: center; + margin: 20px 0; +} + +.search-input { + width: 300px; + padding: 10px; + background-color: #09001f47; + border: 1px solid #6a43c3; + border-radius: 5px; + font-size: 16px; + transition: all 0.3s ease; + color: #fff; +} + +.search-input:focus { + outline: none; + border-color: #007bff; + box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); +} + +.search-input::placeholder { + color: #aaa; +} + +.hero-content { + position: relative; + overflow: hidden; +} + +.hero-heading, .hero-subheading { + opacity: 0; + transform: translateX(-120%); + animation: slideInLeft 2s forwards; +} + +.hero-heading { + animation-delay: 0.4s; +} + +.hero-subheading { + animation-delay: 0.8s; +} + +.hero-end { + display: block; + animation-delay: 1.2s; +} + +.hero-button-container { + display: flex; + align-items: center; + justify-content: start; + width: 100%; +} +.empty-state{ + width: "100%"; + display: "flex"; + flex-direction: "column"; + justify-content: "center"; + align-items: "center"; +} + +.home-img{ + height: 400; + width: 400; +} + +.home-loading{ + display: "flex"; + gap: "100px"; + width: "100vw"; + height: "300px"; + justify-content: "center"; +} + +.home-loading-container{ + width: "250px"; + height: "300px"; + border: "gray solid 2px"; + border-radius: "20px"; + padding: "40px"; +} +.hero-button { + background-color: #8b5cf6; + height: 3.5rem; + font-size: 2rem; + border-radius: 30px; + font-weight: 600; + margin-top: 3px; + border: none; + width: 70%; + opacity: 0; + transform: translateX(-120%); + animation: slideInLeft 2s forwards; + animation-delay: 1.6s; +} + +.hero-button:hover { + background: #101623; + border: 2px solid #8b5cf6; + color: white; + box-shadow: 4px 4px 2px #8b5cf6; + cursor: none; +} + +.hero-button a:hover { + color: white; +} + +@keyframes slideInLeft { + from { + opacity: 0; + transform: translateX(-120%); + } + to { + opacity: 1; + transform: translateX(0); + } +} diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css index 431fac52..65a97840 100644 --- a/frontend/src/style/Rateus.css +++ b/frontend/src/style/Rateus.css @@ -3,6 +3,20 @@ justify-content: center; align-items: center; } +.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%; From 35a3676e1e8701461cf47c785810a35d88ff7988 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Thu, 8 Aug 2024 14:17:46 +0530 Subject: [PATCH 02/18] Fixed Routing --- frontend/src/Component/Sidebar/Sidebar.js | 176 ++++++++-------------- frontend/src/style/sidebar.css | 164 ++++++++++++++++++++ 2 files changed, 230 insertions(+), 110 deletions(-) create mode 100644 frontend/src/style/sidebar.css diff --git a/frontend/src/Component/Sidebar/Sidebar.js b/frontend/src/Component/Sidebar/Sidebar.js index 8c94991c..4b4f67f6 100644 --- a/frontend/src/Component/Sidebar/Sidebar.js +++ b/frontend/src/Component/Sidebar/Sidebar.js @@ -2,133 +2,89 @@ import React from "react"; import { Link } from "react-router-dom"; import { BsBookmark } from "react-icons/bs"; import { AiFillHome } from "react-icons/ai"; -import SidebarContent from "./SidebarContent"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faHome, + faBookmark, + faCode, + faInfoCircle, + faTasks, + faQuestionCircle, + faStar, + faUser, + faEnvelope, +} from "@fortawesome/free-solid-svg-icons"; +import { FaRobot, FaUserSecret, FaFilm, FaCogs, FaLaptopCode, FaTools, FaBook, FaUsers, FaTasks } from "react-icons/fa"; +import "../../style/sidebar.css"; function Sidebar({ showSideNav }) { const sidebarContent = [ - { - name: "all", - description: "All", - url: "/", - }, - { - name: "remote", - description: "Remote Jobs", - url: "/remote-jobs", - }, - { - name: "ai", - description: "AI", - url: "/ai", - }, - { - name: "ethical", - description: "Ethical Hacking", - url: "/ethical-hacking", - }, - { - name: "movies", - description: "Movie | Series", - url: "/movies-series", - }, - { - name: "extension", - description: "Extension", - url: "/extension", - }, - { - name: "ui", - description: "UI Design", - url: "/ui-design", - }, - { - name: "tools", - description: "Frontend Tools", - url: "/front-end-tools", - }, - { - name: "coding", - description: "Coding Platforms", - url: "/coding-platform", - }, - { - name: "course", - description: "Course Platforms", - url: "/cources-platform", - }, - { - name: "productivity", - description: "Productivity Tools", - url: "/productivity-tools", - }, - { - name: "collaboration", - description: "Collaboration Tools", - url: "/collaboration-tools", - }, + { name: "all", description: "All", url: "/", icon: AiFillHome }, + { name: "remote", description: "Remote Jobs", url: "/remote-jobs", icon: BsBookmark }, + { name: "ai", description: "AI", url: "/ai", icon: FaRobot }, + { name: "ethical", description: "Ethical Hacking", url: "/ethical-hacking", icon: FaUserSecret }, + { name: "movies", description: "Movie | Series", url: "/movies-series", icon: FaFilm }, + { name: "extension", description: "Extension", url: "/extension", icon: FaCogs }, + { name: "ui", description: "UI Design", url: "/ui-design", icon: FaLaptopCode }, + { name: "frontend-tools", description: "Frontend Tools", url: "/front-end-tools", icon: FaTools }, + { name: "backend-tools", description: "Backend Tools", url: "/back-end-tools", icon: FaTools }, + { name: "coding", description: "Coding Platforms", url: "/coding-platform", icon: FaBook }, + { name: "productivity", description: "Productivity Tools", url: "/productivity-tools", icon: FaTasks }, + { name: "collaboration", description: "Collaboration Tools", url: "/collaboration-tools", icon: FaUsers }, ]; + return ( -
-
-
- +
+
+
+ Home
-
- +
+ BookMark
-
- - About Us +
+ + About Us + +
+
+ + Contact + +
+
+ + Open Source + +
+
+ + FAQ's + +
+
+ + Rate Us
-
- - Open Source +
+ + My Profile
- {sidebarContent.map((item, index) => ( - - - + + {sidebarContent.map((item) => ( +
+ + {item.icon ? : } {item.description} + +
))} -
- )) -
); } diff --git a/frontend/src/style/sidebar.css b/frontend/src/style/sidebar.css new file mode 100644 index 00000000..6e52f54a --- /dev/null +++ b/frontend/src/style/sidebar.css @@ -0,0 +1,164 @@ + +.sidebar-content { + display: flex; + flex-direction: column; + align-items: flex-start; + 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 { + background-color: var(--sidebar-bg-dark); + box-shadow: 0 0 15px var(--sidebar-bg-dark), + 0 0 20px var(--sidebar-bg-dark), + 0 0 25px var(--sidebar-bg-dark), + 0 0 30px var(--sidebar-bg-dark); + } + + .sidebar-btn a { + color: var(--sidebar-text-dark); + } + + .sidebar-btn a:hover { + color: var(--sidebar-hover-dark); + } + } + + :root { + --sidebar-bg-light:#8b5cf6; + --sidebar-bg-dark: #74a309; + --sidebar-text-light: white; + --sidebar-text-dark: white; + --sidebar-hover-light: #fff700; + --sidebar-hover-dark: #ff00ff; + --bubble-color-light: rgba(255, 255, 255, 0.5); + --bubble-color-dark: rgba(255, 255, 255, 0.5); + --bubble-hover-light: #fff700; + --bubble-hover-dark: #ff00ff; + } + + @media (prefers-color-scheme: dark) { + :root { + --sidebar-bg: var(--sidebar-bg-dark); + --sidebar-text: var(--sidebar-text-dark); + --sidebar-hover: var(--sidebar-hover-dark); + --bubble-color: var(--bubble-color-dark); + --bubble-hover: var(--bubble-hover-dark); + } + } + + @media (prefers-color-scheme: light) { + :root { + --sidebar-bg: var(--sidebar-bg-light); + --sidebar-text: var(--sidebar-text-light); + --sidebar-hover: var(--sidebar-hover-light); + --bubble-color: var(--bubble-color-light); + --bubble-hover: var(--bubble-hover-light); + } + } + + /* Neon Light Effect */ + .sidebar { + background-color: var(--sidebar-bg); + + box-shadow: 0 0 15px var(--sidebar-bg), + 0 0 20px var(--sidebar-bg), + 0 0 25px var(--sidebar-bg), + 0 0 30px var(--sidebar-bg); + transition: all 0.3s ease; + } + + .sidebar-content a { + color: var(--sidebar-text); + text-decoration: none; + display: block; + margin: 10px 0; + font-size: 18px; + transition: color 0.3s ease-in-out; + } + + .sidebar-content a:hover { + color: var(--sidebar-hover); + text-shadow: 0 0 10px var(--sidebar-hover), + 0 0 20px var(--sidebar-hover), + 0 0 30px var(--sidebar-hover), + 0 0 40px var(--sidebar-hover); + } + + /* Cascade Style */ + .sidebar-content { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + } + + /* Floating Bubble Effect */ + @keyframes floatingBubbles { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } + 100% { + transform: translateY(0); + } + } + + .sidebar-content a { + position: relative; + animation: floatingBubbles 4s ease-in-out infinite; + } + + .sidebar-content a::before { + content: ''; + position: absolute; + top: -5px; + left: -5px; + width: 5px; + height: 5px; + background: var(--bubble-color); + border-radius: 50%; + box-shadow: 0 0 10px var(--bubble-color), + 0 0 20px var(--bubble-color), + 0 0 30px var(--bubble-color), + 0 0 40px var(--bubble-color); + animation: floatingBubbles 2s ease-in-out infinite; + } + + .sidebar-content a:hover::before { + background: var(--bubble-hover); + box-shadow: 0 0 10px var(--bubble-hover), + 0 0 20px var(--bubble-hover), + 0 0 30px var(--bubble-hover), + 0 0 40px var(--bubble-hover); + } + + /* Additional styles to ensure proper alignment and visuals */ + .sidebar-btn { + margin: 5px 0; + } + \ No newline at end of file From c6ccd705fcafd53dcc9ac9afd80954e28f8338bf Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Thu, 8 Aug 2024 21:58:13 +0530 Subject: [PATCH 03/18] Fixed Routing --- frontend/src/Component/Rateus.js | 23 +++++++------- frontend/src/Component/Sidebar/Sidebar.js | 1 + frontend/src/style/Rateus.css | 37 +++++++++++------------ frontend/src/style/sidebar.css | 2 +- 4 files changed, 30 insertions(+), 33 deletions(-) diff --git a/frontend/src/Component/Rateus.js b/frontend/src/Component/Rateus.js index 4260fa9e..75e8e018 100644 --- a/frontend/src/Component/Rateus.js +++ b/frontend/src/Component/Rateus.js @@ -7,8 +7,8 @@ function RateUsComponent({ previousContent }) { const [rating, setRating] = useState(0); const [feedback, setFeedback] = useState(""); - const handleStarClick = (star) => { - setRating(star); + const handleEmojiClick = (emojiIndex) => { + setRating(emojiIndex); }; const handleFeedbackChange = (e) => { @@ -16,12 +16,9 @@ function RateUsComponent({ previousContent }) { }; const handleSubmit = () => { - // Check if both rating and feedback are provided if (rating !== 0 && feedback.trim() !== "") { - // Reset the state after submitting setRating(0); setFeedback(""); - // Show toast message toast.success("Thanks For Your Feedback :)", { position: "top-center" }); @@ -31,20 +28,22 @@ function RateUsComponent({ previousContent }) { }); } }; + + const emojis = ["😢", "😟", "😐", "😊", "😍"]; + return ( <>

Rate Our Website

-
- {[1, 2, 3, 4, 5].map((star) => ( +
+ {emojis.map((emoji, index) => ( handleStarClick(star)} + key={index} + className={index + 1 === rating ? "emoji selected" : "emoji"} + onClick={() => handleEmojiClick(index + 1)} > - - ★ + {emoji} ))}
diff --git a/frontend/src/Component/Sidebar/Sidebar.js b/frontend/src/Component/Sidebar/Sidebar.js index 4b4f67f6..d57f3b25 100644 --- a/frontend/src/Component/Sidebar/Sidebar.js +++ b/frontend/src/Component/Sidebar/Sidebar.js @@ -4,6 +4,7 @@ import { BsBookmark } from "react-icons/bs"; import { AiFillHome } from "react-icons/ai"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { + faHome, faBookmark, faCode, diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css index 65a97840..4669eaf1 100644 --- a/frontend/src/style/Rateus.css +++ b/frontend/src/style/Rateus.css @@ -3,6 +3,7 @@ justify-content: center; align-items: center; } + .toast-success { background-color: #28a745; /* Green background for success */ color: white; @@ -38,36 +39,32 @@ color: #000; } -.star-rating { +.emoji-rating { margin-bottom: 20px; display: flex; justify-content: center; } -.star { +.emoji { font-size: 24px; - color: #f0fafd; cursor: pointer; - transition: color 0.3s; - position: relative; + transition: transform 0.3s, text-shadow 0.3s; + margin: 0 10px; } -.star:before { - content: '★'; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - color: transparent; - transition: text-shadow 0.3s, transform 0.3s; +.emoji.selected { + transform: scale(1.5); + text-shadow: 0 0 20px #f7b731; + animation: shine 1.5s infinite; } -.star:hover:before, -.star.filled:before { - color: #184ce9; - text-shadow: 0 0 20px #f7b731; - transform: scale(1.2); +@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; + } } .feedback-textarea { @@ -84,7 +81,7 @@ .submit-button { width: 30%; padding: 10px; - background-color:#101623 ; + background-color: #101623; color: white; font-weight: 600; border: none; diff --git a/frontend/src/style/sidebar.css b/frontend/src/style/sidebar.css index 6e52f54a..d53a1731 100644 --- a/frontend/src/style/sidebar.css +++ b/frontend/src/style/sidebar.css @@ -145,7 +145,7 @@ box-shadow: 0 0 10px var(--bubble-color), 0 0 20px var(--bubble-color), 0 0 30px var(--bubble-color), - 0 0 40px var(--bubble-color); + 0 0 40px var(--bubble-color); animation: floatingBubbles 2s ease-in-out infinite; } From 50c2a25f4838d8b7f4e4b1efd8db9fc76e1bfe19 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Thu, 8 Aug 2024 22:05:34 +0530 Subject: [PATCH 04/18] Fixed Routing --- frontend/src/Component/Sidebar/Sidebar.js | 1 - frontend/src/style/sidebar.css | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/Component/Sidebar/Sidebar.js b/frontend/src/Component/Sidebar/Sidebar.js index d57f3b25..4b4f67f6 100644 --- a/frontend/src/Component/Sidebar/Sidebar.js +++ b/frontend/src/Component/Sidebar/Sidebar.js @@ -4,7 +4,6 @@ import { BsBookmark } from "react-icons/bs"; import { AiFillHome } from "react-icons/ai"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { - faHome, faBookmark, faCode, diff --git a/frontend/src/style/sidebar.css b/frontend/src/style/sidebar.css index d53a1731..2dba1ef7 100644 --- a/frontend/src/style/sidebar.css +++ b/frontend/src/style/sidebar.css @@ -147,7 +147,7 @@ 0 0 30px var(--bubble-color), 0 0 40px var(--bubble-color); animation: floatingBubbles 2s ease-in-out infinite; - } + } .sidebar-content a:hover::before { background: var(--bubble-hover); From 362d18ba9a90d5017e977b1dcaace7bf264304ef Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Thu, 8 Aug 2024 22:17:51 +0530 Subject: [PATCH 05/18] Enhanced Rateus --- frontend/src/Component/Rateus.js | 1 + frontend/src/style/Rateus.css | 1 + 2 files changed, 2 insertions(+) diff --git a/frontend/src/Component/Rateus.js b/frontend/src/Component/Rateus.js index 75e8e018..b81e5951 100644 --- a/frontend/src/Component/Rateus.js +++ b/frontend/src/Component/Rateus.js @@ -64,3 +64,4 @@ function RateUsComponent({ previousContent }) { } export default RateUsComponent; + diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css index 4669eaf1..9a6e4393 100644 --- a/frontend/src/style/Rateus.css +++ b/frontend/src/style/Rateus.css @@ -95,3 +95,4 @@ border: 2px solid #fff; color: white; } + From e9d101e4605e2bf513ae9c6f3b4a089454d43ab4 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 06:24:10 +0530 Subject: [PATCH 06/18] Added BoxShadow Effect --- frontend/src/Component/Footer.js | 1 + frontend/src/style/Footer.css | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/Component/Footer.js b/frontend/src/Component/Footer.js index 66de22eb..88532826 100644 --- a/frontend/src/Component/Footer.js +++ b/frontend/src/Component/Footer.js @@ -204,4 +204,5 @@ function Footer() { ); } + export default Footer; diff --git a/frontend/src/style/Footer.css b/frontend/src/style/Footer.css index df4eea4e..dce53f1d 100644 --- a/frontend/src/style/Footer.css +++ b/frontend/src/style/Footer.css @@ -193,6 +193,7 @@ text-decoration: underline; } + .footer-content { margin-top: 1rem; } @@ -203,7 +204,6 @@ gap: 1rem; margin-top: 1rem; } - .icons { display: flex; align-items: center; From 95ee299747101ebc3a61371996c712e861339a98 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 06:26:46 +0530 Subject: [PATCH 07/18] Added BoxShadow Effect --- frontend/src/Component/Footer.js | 5 ++--- frontend/src/style/Footer.css | 15 +++++++-------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/frontend/src/Component/Footer.js b/frontend/src/Component/Footer.js index 88532826..4b736c49 100644 --- a/frontend/src/Component/Footer.js +++ b/frontend/src/Component/Footer.js @@ -110,7 +110,7 @@ function Footer() { Extension - +
  • UI Design @@ -141,7 +141,6 @@ function Footer() {
    • -
    diff --git a/frontend/src/style/Footer.css b/frontend/src/style/Footer.css index dce53f1d..153f65f2 100644 --- a/frontend/src/style/Footer.css +++ b/frontend/src/style/Footer.css @@ -193,19 +193,18 @@ text-decoration: underline; } - + + .icons { + display: flex; + align-items: center; + } .footer-content { margin-top: 1rem; } - + .outerD { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; - } - .icons { - display: flex; - align-items: center; - } - \ No newline at end of file + } \ No newline at end of file From 7a98da3341c4b251905ea560550f5f1c224dcebb Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 11:23:20 +0530 Subject: [PATCH 08/18] Enhanced RateUs --- frontend/src/Component/Footer.js | 1 + frontend/src/Component/Rateus.js | 1 + frontend/src/style/Footer.css | 26 ++++++++++++-------------- frontend/src/style/Rateus.css | 2 ++ 4 files changed, 16 insertions(+), 14 deletions(-) diff --git a/frontend/src/Component/Footer.js b/frontend/src/Component/Footer.js index 4b736c49..3a975a10 100644 --- a/frontend/src/Component/Footer.js +++ b/frontend/src/Component/Footer.js @@ -26,6 +26,7 @@ import { import { BsYoutube, BsFillPersonLinesFill, BsCodeSlash } from "react-icons/bs"; import { Link } from "react-router-dom"; + function Footer() { return (
    diff --git a/frontend/src/Component/Rateus.js b/frontend/src/Component/Rateus.js index b81e5951..f2a21713 100644 --- a/frontend/src/Component/Rateus.js +++ b/frontend/src/Component/Rateus.js @@ -55,6 +55,7 @@ function RateUsComponent({ previousContent }) { >
    diff --git a/frontend/src/style/Footer.css b/frontend/src/style/Footer.css index 153f65f2..f85545b5 100644 --- a/frontend/src/style/Footer.css +++ b/frontend/src/style/Footer.css @@ -153,19 +153,6 @@ font-size: 1.8rem; } - .contact-link a { - color: #000; - transition: transform 0.3s ease, color 0.3s ease; - } - - .contact-link a:hover { - cursor: pointer; - color: #474eff !important; - color: white; - transform: scale(1.1); - animation: pulse 1s infinite alternate; - } - @keyframes pulse { 0% { transform: scale(1); @@ -193,7 +180,18 @@ text-decoration: underline; } - + .contact-link a { + color: #000; + transition: transform 0.3s ease, color 0.3s ease; + } + + .contact-link a:hover { + cursor: pointer; + color: #474eff !important; + color: white; + transform: scale(1.1); + animation: pulse 1s infinite alternate; + } .icons { display: flex; align-items: center; diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css index 9a6e4393..f27207fe 100644 --- a/frontend/src/style/Rateus.css +++ b/frontend/src/style/Rateus.css @@ -95,4 +95,6 @@ border: 2px solid #fff; color: white; } + + From 68141fba8ce4184eb6bed0bc456372aadf36f307 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 11:28:10 +0530 Subject: [PATCH 09/18] Enhanced RateUs --- frontend/src/Component/Rateus.js | 9 ++++----- frontend/src/style/Rateus.css | 10 +++++----- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/frontend/src/Component/Rateus.js b/frontend/src/Component/Rateus.js index f2a21713..fdef9908 100644 --- a/frontend/src/Component/Rateus.js +++ b/frontend/src/Component/Rateus.js @@ -6,15 +6,14 @@ 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 handleFeedbackChange = (e) => { - setFeedback(e.target.value); - }; - const handleSubmit = () => { if (rating !== 0 && feedback.trim() !== "") { setRating(0); @@ -55,7 +54,7 @@ function RateUsComponent({ previousContent }) { >
    diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css index f27207fe..c4d774b1 100644 --- a/frontend/src/style/Rateus.css +++ b/frontend/src/style/Rateus.css @@ -57,6 +57,11 @@ text-shadow: 0 0 20px #f7b731; animation: shine 1.5s infinite; } +.submit-button:hover { + background: #101623; + border: 2px solid #fff; + color: white; +} @keyframes shine { 0% { @@ -90,11 +95,6 @@ transition: background-color 0.3s; } -.submit-button:hover { - background: #101623; - border: 2px solid #fff; - color: white; -} From 1d2d7a79124ef480f87f21310fa8c79ef3335bad Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 11:44:40 +0530 Subject: [PATCH 10/18] Enhanced RateUs --- frontend/src/Component/Rateus.js | 2 +- frontend/src/style/Rateus.css | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/frontend/src/Component/Rateus.js b/frontend/src/Component/Rateus.js index fdef9908..8e8455f9 100644 --- a/frontend/src/Component/Rateus.js +++ b/frontend/src/Component/Rateus.js @@ -9,11 +9,11 @@ function RateUsComponent({ previousContent }) { const handleFeedbackChange = (e) => { setFeedback(e.target.value); }; - const handleEmojiClick = (emojiIndex) => { setRating(emojiIndex); }; + const handleSubmit = () => { if (rating !== 0 && feedback.trim() !== "") { setRating(0); diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css index c4d774b1..b199662b 100644 --- a/frontend/src/style/Rateus.css +++ b/frontend/src/style/Rateus.css @@ -51,17 +51,18 @@ transition: transform 0.3s, text-shadow 0.3s; margin: 0 10px; } +.submit-button:hover { + background: #101623; + border: 2px solid #fff; + color: white; +} .emoji.selected { transform: scale(1.5); text-shadow: 0 0 20px #f7b731; animation: shine 1.5s infinite; } -.submit-button:hover { - background: #101623; - border: 2px solid #fff; - color: white; -} + @keyframes shine { 0% { From 0fa34e450ae20304fc9d165aaad43655e1d7bf9b Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 11:56:19 +0530 Subject: [PATCH 11/18] Allgined Footer --- frontend/src/Component/Footer.js | 2 -- frontend/src/style/Footer.css | 10 ++++------ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/frontend/src/Component/Footer.js b/frontend/src/Component/Footer.js index 3a975a10..3fac4b6d 100644 --- a/frontend/src/Component/Footer.js +++ b/frontend/src/Component/Footer.js @@ -25,8 +25,6 @@ import { } from "react-icons/ai"; import { BsYoutube, BsFillPersonLinesFill, BsCodeSlash } from "react-icons/bs"; import { Link } from "react-router-dom"; - - function Footer() { return (
    diff --git a/frontend/src/style/Footer.css b/frontend/src/style/Footer.css index f85545b5..a8842eb1 100644 --- a/frontend/src/style/Footer.css +++ b/frontend/src/style/Footer.css @@ -180,11 +180,6 @@ text-decoration: underline; } - .contact-link a { - color: #000; - transition: transform 0.3s ease, color 0.3s ease; - } - .contact-link a:hover { cursor: pointer; color: #474eff !important; @@ -199,7 +194,10 @@ .footer-content { margin-top: 1rem; } - + .contact-link a { + color: #000; + transition: transform 0.3s ease, color 0.3s ease; + } .outerD { display: flex; justify-content: center; From e90e768493f3cc1f33708bd95ba241830e90382d Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 11:57:41 +0530 Subject: [PATCH 12/18] homee --- frontend/src/Component/Rateus.js | 2 +- frontend/src/style/Footer.css | 14 +++++++------- frontend/src/style/Rateus.css | 12 ++++++------ 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/frontend/src/Component/Rateus.js b/frontend/src/Component/Rateus.js index 8e8455f9..6855a4e5 100644 --- a/frontend/src/Component/Rateus.js +++ b/frontend/src/Component/Rateus.js @@ -9,11 +9,11 @@ function RateUsComponent({ previousContent }) { const handleFeedbackChange = (e) => { setFeedback(e.target.value); }; + const handleEmojiClick = (emojiIndex) => { setRating(emojiIndex); }; - const handleSubmit = () => { if (rating !== 0 && feedback.trim() !== "") { setRating(0); diff --git a/frontend/src/style/Footer.css b/frontend/src/style/Footer.css index a8842eb1..f2f71dcf 100644 --- a/frontend/src/style/Footer.css +++ b/frontend/src/style/Footer.css @@ -179,7 +179,12 @@ font-weight: 700; text-decoration: underline; } - + .outerD { + display: flex; + justify-content: center; + gap: 1rem; + margin-top: 1rem; + } .contact-link a:hover { cursor: pointer; color: #474eff !important; @@ -198,9 +203,4 @@ color: #000; transition: transform 0.3s ease, color 0.3s ease; } - .outerD { - display: flex; - justify-content: center; - gap: 1rem; - margin-top: 1rem; - } \ No newline at end of file + \ No newline at end of file diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css index b199662b..f009d00c 100644 --- a/frontend/src/style/Rateus.css +++ b/frontend/src/style/Rateus.css @@ -44,18 +44,18 @@ display: flex; justify-content: center; } - +.submit-button:hover { + background: #101623; + border: 2px solid #fff; + color: white; +} .emoji { font-size: 24px; cursor: pointer; transition: transform 0.3s, text-shadow 0.3s; margin: 0 10px; } -.submit-button:hover { - background: #101623; - border: 2px solid #fff; - color: white; -} + .emoji.selected { transform: scale(1.5); From d2e2de71cfa19a4b2b02147ff30d1ca5cc70590b Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 12:13:44 +0530 Subject: [PATCH 13/18] Added BoxShadow --- frontend/src/style/Footer.css | 13 +++++++------ frontend/src/style/Rateus.css | 2 ++ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/frontend/src/style/Footer.css b/frontend/src/style/Footer.css index f2f71dcf..fa6b54ab 100644 --- a/frontend/src/style/Footer.css +++ b/frontend/src/style/Footer.css @@ -179,12 +179,7 @@ font-weight: 700; text-decoration: underline; } - .outerD { - display: flex; - justify-content: center; - gap: 1rem; - margin-top: 1rem; - } + .contact-link a:hover { cursor: pointer; color: #474eff !important; @@ -192,6 +187,12 @@ transform: scale(1.1); animation: pulse 1s infinite alternate; } + .outerD { + display: flex; + justify-content: center; + gap: 1rem; + margin-top: 1rem; + } .icons { display: flex; align-items: center; diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css index f009d00c..477db21b 100644 --- a/frontend/src/style/Rateus.css +++ b/frontend/src/style/Rateus.css @@ -49,6 +49,8 @@ border: 2px solid #fff; color: white; } + + .emoji { font-size: 24px; cursor: pointer; From 4a02a5efda3827ac80ea5340a684a54e1dfe17d3 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 12:24:41 +0530 Subject: [PATCH 14/18] Added BoxShadow Effect --- frontend/src/Component/Footer.js | 6 +++++- frontend/src/style/Footer.css | 24 ++++++++++++------------ 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/frontend/src/Component/Footer.js b/frontend/src/Component/Footer.js index 3fac4b6d..57a88524 100644 --- a/frontend/src/Component/Footer.js +++ b/frontend/src/Component/Footer.js @@ -100,21 +100,25 @@ function Footer() { AI +
  • Movie/Series
    • +
  • Extension -
    • + +
  • UI Design
    • +
    diff --git a/frontend/src/style/Footer.css b/frontend/src/style/Footer.css index fa6b54ab..a20c5265 100644 --- a/frontend/src/style/Footer.css +++ b/frontend/src/style/Footer.css @@ -169,7 +169,17 @@ box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } - + .icons { + display: flex; + align-items: center; + } + .footer-content { + margin-top: 1rem; + } + .contact-link a { + color: #000; + transition: transform 0.3s ease, color 0.3s ease; + } .contact-link a:hover { border: 2px solid #fff; } @@ -193,15 +203,5 @@ gap: 1rem; margin-top: 1rem; } - .icons { - display: flex; - align-items: center; - } - .footer-content { - margin-top: 1rem; - } - .contact-link a { - color: #000; - transition: transform 0.3s ease, color 0.3s ease; - } + \ No newline at end of file From d06dc0ecc6825eb115d022c463306df48c4c2493 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 12:36:41 +0530 Subject: [PATCH 15/18] Added BoxShadow Effect --- frontend/src/Component/Footer.js | 3 ++- frontend/src/style/Footer.css | 8 ++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/Component/Footer.js b/frontend/src/Component/Footer.js index 57a88524..b4136fa3 100644 --- a/frontend/src/Component/Footer.js +++ b/frontend/src/Component/Footer.js @@ -118,9 +118,10 @@ function Footer() { UI Design - +
    +

    Explore

      diff --git a/frontend/src/style/Footer.css b/frontend/src/style/Footer.css index a20c5265..2971c025 100644 --- a/frontend/src/style/Footer.css +++ b/frontend/src/style/Footer.css @@ -163,7 +163,6 @@ transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } - 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); @@ -173,13 +172,14 @@ display: flex; align-items: center; } - .footer-content { - margin-top: 1rem; - } + .contact-link a { color: #000; transition: transform 0.3s ease, color 0.3s ease; } + .footer-content { + margin-top: 1rem; + } .contact-link a:hover { border: 2px solid #fff; } From db8772d56757d43ffb09d378fa2d65b126134ef7 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 12:53:58 +0530 Subject: [PATCH 16/18] Correct Routes --- frontend/src/Component/Sidebar/Sidebar.js | 1 + frontend/src/style/Footer.css | 15 ++++++++------- frontend/src/style/Navbar.css | 9 ++++----- 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/frontend/src/Component/Sidebar/Sidebar.js b/frontend/src/Component/Sidebar/Sidebar.js index 4b4f67f6..84807f5c 100644 --- a/frontend/src/Component/Sidebar/Sidebar.js +++ b/frontend/src/Component/Sidebar/Sidebar.js @@ -46,6 +46,7 @@ function Sidebar({ showSideNav }) { BookMark
    +
    About Us diff --git a/frontend/src/style/Footer.css b/frontend/src/style/Footer.css index 2971c025..874db62a 100644 --- a/frontend/src/style/Footer.css +++ b/frontend/src/style/Footer.css @@ -177,6 +177,14 @@ color: #000; transition: transform 0.3s ease, color 0.3s ease; } + + .contact-link a:hover { + cursor: pointer; + color: #474eff !important; + color: white; + transform: scale(1.1); + animation: pulse 1s infinite alternate; + } .footer-content { margin-top: 1rem; } @@ -190,13 +198,6 @@ text-decoration: underline; } - .contact-link a:hover { - cursor: pointer; - color: #474eff !important; - color: white; - transform: scale(1.1); - animation: pulse 1s infinite alternate; - } .outerD { display: flex; justify-content: center; diff --git a/frontend/src/style/Navbar.css b/frontend/src/style/Navbar.css index 153f6b87..8661067f 100644 --- a/frontend/src/style/Navbar.css +++ b/frontend/src/style/Navbar.css @@ -359,16 +359,15 @@ color: rgba(0, 0, 0, 0.84); } + +.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; */ } - -.filter { - transition: font-size 0.3s ease, text-decoration 0.3s ease; -} - .search { margin-top: 0px; position: relative; From 8f0f38d925f304d38f6f08ad67d385dd204a33de Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 14:13:46 +0530 Subject: [PATCH 17/18] Added BoxShadow Effect --- frontend/src/Component/Footer.js | 2 +- frontend/src/style/Footer.css | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/src/Component/Footer.js b/frontend/src/Component/Footer.js index b4136fa3..5980e488 100644 --- a/frontend/src/Component/Footer.js +++ b/frontend/src/Component/Footer.js @@ -113,7 +113,7 @@ function Footer() { -
  • +
  • UI Design diff --git a/frontend/src/style/Footer.css b/frontend/src/style/Footer.css index 874db62a..abaeb256 100644 --- a/frontend/src/style/Footer.css +++ b/frontend/src/style/Footer.css @@ -178,6 +178,13 @@ transition: transform 0.3s ease, color 0.3s ease; } + + .footer-content { + margin-top: 1rem; + } + .contact-link a:hover { + border: 2px solid #fff; + } .contact-link a:hover { cursor: pointer; color: #474eff !important; @@ -185,13 +192,6 @@ transform: scale(1.1); animation: pulse 1s infinite alternate; } - .footer-content { - margin-top: 1rem; - } - .contact-link a:hover { - border: 2px solid #fff; - } - .card-title { font-size: 25px; font-weight: 700; From d2fe9a77840e95ca8342565cb981db6071f31b81 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa <161804629+sailaja-adapa@users.noreply.github.com> Date: Fri, 9 Aug 2024 14:33:34 +0530 Subject: [PATCH 18/18] Update Footer.js --- frontend/src/Component/Footer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Component/Footer.js b/frontend/src/Component/Footer.js index 5980e488..8e84aeca 100644 --- a/frontend/src/Component/Footer.js +++ b/frontend/src/Component/Footer.js @@ -6,7 +6,7 @@ import { FaGithubSquare, FaLinkedinIn, FaFacebookF, - FaHome, + FaHome, FaBookmark, FaQuestionCircle, FaRegHeart,