From 8136fdd13446e81f2d54cb5682f29b4714d5bbee Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Sat, 8 Jun 2024 15:32:23 +0530 Subject: [PATCH 1/2] Added Rate Us --- src/App.js | 2 + src/components/Navbar.jsx | 55 +++++++------ src/pages/News.jsx | 3 - src/pages/Rateus.css | 169 ++++++++++++++++++++++++++++++++++++++ src/pages/Rateus.jsx | 96 ++++++++++++++++++++++ 5 files changed, 296 insertions(+), 29 deletions(-) create mode 100644 src/pages/Rateus.css create mode 100644 src/pages/Rateus.jsx diff --git a/src/App.js b/src/App.js index f4066a8..b82484b 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,7 @@ import Login from './pages/Login'; import Signup from './pages/Signup'; import MenuPage from './pages/MenuPage'; import About from './pages/About'; +import Rateus from './pages/Rateus'; import SectionPage from './pages/SectionPage'; import News from './pages/News'; import NotFound from './pages/NotFound'; @@ -30,6 +31,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 92849eb..dcc6fa2 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,24 +1,26 @@ -import React, { useState,useContext } from "react"; +import React, { useState, useContext } from "react"; import { Link } from "react-router-dom"; import logo from "../assets/logo2.png"; -import { motion, AnimatePresence,useScroll} from "framer-motion"; +import { motion, AnimatePresence, useScroll } from "framer-motion"; import { IoClose } from "react-icons/io5"; import { GiHamburgerMenu } from "react-icons/gi"; -import { MdDarkMode } from "react-icons/md"; import { ThemeContext } from '../themeContext'; + const Navbar = () => { const { theme, toggleTheme } = useContext(ThemeContext); const [isOpen, setIsOpen] = useState(false); - const {scrollYProgress} = useScroll(); + const { scrollYProgress } = useScroll(); + const toggleMenu = () => { setIsOpen(!isOpen); }; + return ( ); }; + const NavItem = ({ icon, to, children }) => { return ( {icon} @@ -109,11 +112,11 @@ const NavItem = ({ icon, to, children }) => { }; const MobileNavItem = ({ to, children }) => { - let classname = "z-[2] text-gray-300 text-center hover:text-white block px-3 py-2 rounded-md text-base font-medium "; + let classname = "z-[2] text-gray-300 text-center hover:text-white block px-3 py-2 rounded-md text-xl font-medium "; return ( {children} diff --git a/src/pages/News.jsx b/src/pages/News.jsx index 7b94bfa..0ad1daf 100644 --- a/src/pages/News.jsx +++ b/src/pages/News.jsx @@ -4,8 +4,6 @@ import NewsCard from "../components/NewsCard"; import Loader from "../components/Loader/Loader"; import Footer from "../components/Footer"; - - function News() { const [articles, setArticles] = useState([]); const [loading, setLoading] = useState(false); @@ -53,7 +51,6 @@ function News() { ) } - ); } diff --git a/src/pages/Rateus.css b/src/pages/Rateus.css new file mode 100644 index 0000000..e4f7be3 --- /dev/null +++ b/src/pages/Rateus.css @@ -0,0 +1,169 @@ +/* Basic reset and styling */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background: url('https://images.pexels.com/photos/1640774/pexels-photo-1640774.jpeg') no-repeat fixed; + background-size: cover; + background-position: center; + color: #333; +} + +/* Header and Navbar styling */ +header { + background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */ + padding: 10px 0; +} + +.navigbar { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.logo img { + height: 40px; +} + +.ul1 { + list-style: none; + display: flex; + margin: 0; + padding: 0; +} + +.ul1 li { + margin: 0 10px; +} + +.ul1 li a { + color: #fff; /* White text color for navbar items */ + text-decoration: none; + font-size: 16px; + padding: 5px 10px; + transition: color 0.3s, border-bottom 0.3s; +} + +.ul1 li a:hover, #active-page { + color: #f29523; /* Highlight color for active and hovered items */ + border-bottom: 2px solid #f29523; +} + +/* Container styling */ +.container { + max-width: 600px; + margin: 100px auto; /* Adjusted margin for better spacing */ + padding: 30px; + background-color: rgba(255, 255, 255, 0.9); /* Slightly less transparent white background */ + border-radius: 10px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); + text-align: center; + transition: box-shadow 0.3s, transform 0.3s; +} + +.container:hover { + box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); + transform: scale(1.02); +} + +h1 { + margin-bottom: 10px; /* Increased margin-bottom */ + color: #333; + font-size: 36px; /* Increased font size */ +} + + +/* Star rating styling */ +.stars { + display: flex; + justify-content: center; + font-size: 30px; /* Increased font size for stars */ + margin-bottom: 20px; +} + +.stars input[type="radio"] { + display: none; +} + +.stars label { + cursor: pointer; + color: #ccc; + transition: color 0.3s; + padding: 0 5px; /* Padding between stars */ +} + +/* Highlight stars up to and including the hovered or checked star */ +.stars label:hover, +.stars label:hover ~ label { + color: #ffcf00; +} + +.stars input[type="radio"]:checked ~ label { + color: #ffcf00; +} + +.stars input[type="radio"]:checked ~ label ~ label { + color: #ccc; +} + +.stars label.active { + color: #ffcf00; +} + +/* Feedback textarea styling */ +.feedback { + width: calc(100% - 40px); + height: 150px; + padding: 15px; + margin: 20px 0; + border: 1px solid #ccc; + border-radius: 8px; + font-size: 16px; + resize: none; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); +} + +/* Submit button styling */ +.submit-btn { + display: block; + margin: 20px auto; + padding: 10px 30px; + background-color: #0056b3; + color: #fff; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s, transform 0.3s; +} + +.submit-btn:hover { + background-color: #0056b3; + transform: scale(1.05); +} + +/* Additional responsive adjustments */ +@media (max-width: 768px) { + .container { + margin: 50px 20px; + padding: 20px; + } + + .ul1 li a { + font-size: 14px; + } +} + +@media (max-width: 480px) { + .ul1 { + flex-direction: column; + align-items: center; + } + + .ul1 li { + margin: 5px 0; + } +} diff --git a/src/pages/Rateus.jsx b/src/pages/Rateus.jsx new file mode 100644 index 0000000..4e1244e --- /dev/null +++ b/src/pages/Rateus.jsx @@ -0,0 +1,96 @@ +import React, { useState } from 'react'; +import Footer from "../components/Footer"; +import Navbar from "../components/Navbar"; +import { ToastContainer, toast } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; +import "./Rateus.css"; + +const RateUs = () => { + const [rating, setRating] = useState(0); + const [feedback, setFeedback] = useState(''); + + const handleRatingChange = (value) => { + setRating(value); + updateStars(value); + }; + + const handleFeedbackChange = (event) => { + setFeedback(event.target.value); + }; + + const handleSubmit = () => { + if (rating > 0 && feedback.trim() !== '') { + toast.success("Thanks for Your Feedback :)"); + console.log('Rating:', rating); + console.log('Feedback:', feedback); + } else { + toast.error("Please Fill All The Details :("); + } + }; + + const updateStars = (rating) => { + const stars = document.querySelectorAll('.stars input[type="radio"]'); + stars.forEach((star, index) => { + if (index < rating) { + star.checked = true; + star.nextElementSibling.style.color = '#ffcf00'; + } else { + star.checked = false; + star.nextElementSibling.style.color = '#ccc'; + } + }); + }; + + return ( +
+ +
+

Rate Our Website

+
+ {[1, 2, 3, 4, 5].map((value) => ( + + handleRatingChange(value)} + /> + + + ))} +
+ + +
+
+ +
+ ); +}; + +export default RateUs; From 708e2942cfdbad397565271bfccf12760160be13 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Sat, 8 Jun 2024 22:20:04 +0530 Subject: [PATCH 2/2] Added RateUs Option --- src/components/Navbar.jsx | 57 +++++++------ src/pages/Rateus.css | 169 -------------------------------------- src/pages/Rateus.jsx | 86 +++++++++++-------- 3 files changed, 80 insertions(+), 232 deletions(-) delete mode 100644 src/pages/Rateus.css diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index dcc6fa2..342f27d 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,26 +1,24 @@ -import React, { useState, useContext } from "react"; +import React, { useState,useContext } from "react"; import { Link } from "react-router-dom"; import logo from "../assets/logo2.png"; -import { motion, AnimatePresence, useScroll } from "framer-motion"; +import { motion, AnimatePresence,useScroll} from "framer-motion"; import { IoClose } from "react-icons/io5"; import { GiHamburgerMenu } from "react-icons/gi"; +import { MdDarkMode } from "react-icons/md"; import { ThemeContext } from '../themeContext'; - const Navbar = () => { const { theme, toggleTheme } = useContext(ThemeContext); const [isOpen, setIsOpen] = useState(false); - const { scrollYProgress } = useScroll(); - + const {scrollYProgress} = useScroll(); const toggleMenu = () => { setIsOpen(!isOpen); }; - return ( ); }; - const NavItem = ({ icon, to, children }) => { return ( {icon} @@ -112,15 +111,15 @@ const NavItem = ({ icon, to, children }) => { }; const MobileNavItem = ({ to, children }) => { - let classname = "z-[2] text-gray-300 text-center hover:text-white block px-3 py-2 rounded-md text-xl font-medium "; + let classname = "z-[2] text-gray-300 text-center hover:text-white block px-3 py-2 rounded-md text-base font-medium "; return ( {children} ); }; -export default Navbar; +export default Navbar; \ No newline at end of file diff --git a/src/pages/Rateus.css b/src/pages/Rateus.css deleted file mode 100644 index e4f7be3..0000000 --- a/src/pages/Rateus.css +++ /dev/null @@ -1,169 +0,0 @@ -/* Basic reset and styling */ -body { - font-family: Arial, sans-serif; - margin: 0; - padding: 0; - background: url('https://images.pexels.com/photos/1640774/pexels-photo-1640774.jpeg') no-repeat fixed; - background-size: cover; - background-position: center; - color: #333; -} - -/* Header and Navbar styling */ -header { - background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */ - padding: 10px 0; -} - -.navigbar { - display: flex; - justify-content: space-between; - align-items: center; - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; -} - -.logo img { - height: 40px; -} - -.ul1 { - list-style: none; - display: flex; - margin: 0; - padding: 0; -} - -.ul1 li { - margin: 0 10px; -} - -.ul1 li a { - color: #fff; /* White text color for navbar items */ - text-decoration: none; - font-size: 16px; - padding: 5px 10px; - transition: color 0.3s, border-bottom 0.3s; -} - -.ul1 li a:hover, #active-page { - color: #f29523; /* Highlight color for active and hovered items */ - border-bottom: 2px solid #f29523; -} - -/* Container styling */ -.container { - max-width: 600px; - margin: 100px auto; /* Adjusted margin for better spacing */ - padding: 30px; - background-color: rgba(255, 255, 255, 0.9); /* Slightly less transparent white background */ - border-radius: 10px; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); - text-align: center; - transition: box-shadow 0.3s, transform 0.3s; -} - -.container:hover { - box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); - transform: scale(1.02); -} - -h1 { - margin-bottom: 10px; /* Increased margin-bottom */ - color: #333; - font-size: 36px; /* Increased font size */ -} - - -/* Star rating styling */ -.stars { - display: flex; - justify-content: center; - font-size: 30px; /* Increased font size for stars */ - margin-bottom: 20px; -} - -.stars input[type="radio"] { - display: none; -} - -.stars label { - cursor: pointer; - color: #ccc; - transition: color 0.3s; - padding: 0 5px; /* Padding between stars */ -} - -/* Highlight stars up to and including the hovered or checked star */ -.stars label:hover, -.stars label:hover ~ label { - color: #ffcf00; -} - -.stars input[type="radio"]:checked ~ label { - color: #ffcf00; -} - -.stars input[type="radio"]:checked ~ label ~ label { - color: #ccc; -} - -.stars label.active { - color: #ffcf00; -} - -/* Feedback textarea styling */ -.feedback { - width: calc(100% - 40px); - height: 150px; - padding: 15px; - margin: 20px 0; - border: 1px solid #ccc; - border-radius: 8px; - font-size: 16px; - resize: none; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); -} - -/* Submit button styling */ -.submit-btn { - display: block; - margin: 20px auto; - padding: 10px 30px; - background-color: #0056b3; - color: #fff; - border: none; - border-radius: 5px; - font-size: 16px; - cursor: pointer; - transition: background-color 0.3s, transform 0.3s; -} - -.submit-btn:hover { - background-color: #0056b3; - transform: scale(1.05); -} - -/* Additional responsive adjustments */ -@media (max-width: 768px) { - .container { - margin: 50px 20px; - padding: 20px; - } - - .ul1 li a { - font-size: 14px; - } -} - -@media (max-width: 480px) { - .ul1 { - flex-direction: column; - align-items: center; - } - - .ul1 li { - margin: 5px 0; - } -} diff --git a/src/pages/Rateus.jsx b/src/pages/Rateus.jsx index 4e1244e..3791e4d 100644 --- a/src/pages/Rateus.jsx +++ b/src/pages/Rateus.jsx @@ -1,9 +1,8 @@ -import React, { useState } from 'react'; +import React, { useState, useRef, useEffect } from 'react'; import Footer from "../components/Footer"; import Navbar from "../components/Navbar"; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; -import "./Rateus.css"; const RateUs = () => { const [rating, setRating] = useState(0); @@ -42,40 +41,59 @@ const RateUs = () => { }; return ( -
+
-
-

Rate Our Website

-
- {[1, 2, 3, 4, 5].map((value) => ( - - handleRatingChange(value)} - /> - - - ))} +
+
+

Rate Our Website

+
+ {[1, 2, 3, 4, 5].map((value) => ( + + handleRatingChange(value)} + className="hidden" + /> + + + ))} +
+ +
+ +
- -