From 8136fdd13446e81f2d54cb5682f29b4714d5bbee Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Sat, 8 Jun 2024 15:32:23 +0530 Subject: [PATCH] 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;