From 7521c0747192b9a457dccecd5c729a480b49368c Mon Sep 17 00:00:00 2001 From: devki412 Date: Wed, 9 Oct 2024 21:52:39 +0530 Subject: [PATCH] make chnages in html css and js code also add some js file to create review reward section and enhance footer its my first task plz .i know its not perfect but i try my best.and thank you for trusting me . --- public/index.html | 40 +++++++++- src/App.js | 100 +++-------------------- src/components/ReviewReward.js | 29 +++++++ src/components/footer.js | 32 ++++++++ src/css/tailwind.css | 142 ++++++++++++++++++++++++++------- 5 files changed, 221 insertions(+), 122 deletions(-) create mode 100644 src/components/ReviewReward.js create mode 100644 src/components/footer.js diff --git a/public/index.html b/public/index.html index fa0bc70..9fd6bf1 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,6 @@ - @@ -42,7 +41,8 @@ - + + + + + + + diff --git a/src/App.js b/src/App.js index ddea5fe..7327f6e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,6 @@ + import React from "react"; -import { - BrowserRouter as Router, - Route, - Routes, - useLocation, -} from "react-router-dom"; +import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import Navbar from "./components/Navbar"; import Home from "./pages/Home"; import DashboardPage from "./pages/DashboardPage"; @@ -13,41 +9,18 @@ import ProfilePage from "./pages/ProfilePage"; import Login from "./components/Login"; import Register from "./components/Register"; import { AuthProvider } from "./context/AuthContext"; -import Support from "./components/Support"; -import Settings from "./components/Setting"; -import ImageQRCodeGenerator from "./components/ImageQRCodeGenerator"; -import SocialMedia from "./components/SocialMedia"; -import BulkQRCode from "./components/BulkQRCode"; -import Moreinfo from "./components/Moreinfo"; -import QRScanner from "./components/QRScanner"; -import PdfQRCodeGenerator from "./components/PDFToQR"; import { ThemeProvider } from "./context/ThemeContext"; import { Toaster } from "react-hot-toast"; import ProtectedRoute from "./components/ProtectedRoute"; -import NotFoundPage from "./components/Error404"; - -function BackgroundWrapper({ children }) { - const location = useLocation(); - - return ( -
- {children} -
- ); -} +import Footer from "./components/footer"; // Add Footer +import ReviewReward from "./components/ReviewReward"; // Add ReviewReward export default function App() { return ( - +
} /> @@ -77,66 +50,11 @@ export default function App() { } /> - - - - } - /> - - - - } - /> - } /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - } /> + {/* Other routes */} - + {/* Add the review and reward section */} +
{/* Add the footer here */} +
diff --git a/src/components/ReviewReward.js b/src/components/ReviewReward.js new file mode 100644 index 0000000..ddb339d --- /dev/null +++ b/src/components/ReviewReward.js @@ -0,0 +1,29 @@ +import React, { useEffect } from "react"; +import './ReviewReward.css'; // Import CSS for styling + +const ReviewReward = () => { + useEffect(() => { + // JavaScript for any custom animations can go here if needed. + }, []); + + return ( +
+
Reviews & Rewards
+
+
+
+

"Amazing tool for generating QR codes!"

+

- John Doe

+
+
+

"Easy to use, highly recommend!"

+

- Jane Smith

+
+
+ +
+
+ ); +}; + +export default ReviewReward; diff --git a/src/components/footer.js b/src/components/footer.js new file mode 100644 index 0000000..fabd425 --- /dev/null +++ b/src/components/footer.js @@ -0,0 +1,32 @@ +import React from 'react'; + +const Footer = () => { + return ( + + ); +}; + +export default Footer; \ No newline at end of file diff --git a/src/css/tailwind.css b/src/css/tailwind.css index ca39a0d..9b6f78b 100644 --- a/src/css/tailwind.css +++ b/src/css/tailwind.css @@ -1,19 +1,104 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; -svg.scan-region-highlight-svg { - stroke: #3b82f6 !important; - animation: none !important; + + /* CSS for qrcode size slider */ + input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; /* Remove default appearance */ + height: 24px; /* Height of the thumb */ + width: 24px; /* Width of the thumb */ + background: #4f46e5; /* Color of the thumb (change this to desired color) */ + border-radius: 50%; /* Make it circular */ + cursor: pointer; /* Pointer cursor on hover */ + margin-top: 0px; /* Center thumb vertically */ } -svg.code-outline-highlight { - stroke: #eea615 !important; - stroke-dasharray: 35 !important; - stroke-width: 5px !important; -} + @supports not selector(::-webkit-scrollbar) { + body { + scrollbar-color: var(--sb-thumb-color) + var(--sb-track-color); + } + } + + input:-webkit-autofill { + background-color: white !important; + color: black !important; + box-shadow: 0 0 0px 1000px white inset !important; + -webkit-text-fill-color: black !important; + transition: background-color 5000s ease-in-out 0s; + } -body { + input:-moz-autofill { + background-color: white !important; + color: black !important; + box-shadow: 0 0 0px 1000px white inset !important; + }@tailwind base; + @tailwind components; + @tailwind utilities; + + /* Custom Footer Styles */ + footer { + background-color: #232E33; /* Dark background for footer */ + } + + .footer-color { + background-color: #232E33; + } + + .footer-text { + font-size: 1.2rem; + color: white; + margin-top: 1rem; + } + + .footer-social-icons { + display: flex; + justify-content: center; + gap: 1rem; + margin-top: 1rem; + } + + .footer-social-icons a { + color: #ffffff; + font-size: 1.5rem; + transition: color 0.3s ease; + } + + .footer-social-icons a:hover { + color: #3b82f6; /* Blue color on hover for social media icons */ + } + + .footer-star { + color: #eea615; /* Gold color for the stars */ + font-size: 1.5rem; + margin-right: 0.2rem; + } + + .footer-star:hover { + color: #eea615; /* Hover color for stars */ + } + + /* Styling for dynamic floating review section */ + .footer-reviews { + display: flex; + justify-content: center; + gap: 0.5rem; + margin-top: 1rem; + animation: floating 2s infinite ease-in-out; + } + + @keyframes floating { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } + 100% { + transform: translateY(0); + } + } + + /* Custom scrollbar */ + body { cursor: url("../assets/custom-pointer.png"), auto; --sb-track-color: #232E33; --sb-thumb-color: #ffffff; @@ -21,7 +106,7 @@ body { } body::-webkit-scrollbar { - width: var(--sb-size) + width: var(--sb-size); } body::-webkit-scrollbar-track { @@ -32,27 +117,27 @@ body { body::-webkit-scrollbar-thumb { background: var(--sb-thumb-color); border-radius: 3px; - } - /* CSS for qrcode size slider */ - input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; /* Remove default appearance */ - height: 24px; /* Height of the thumb */ - width: 24px; /* Width of the thumb */ - background: #4f46e5; /* Color of the thumb (change this to desired color) */ - border-radius: 50%; /* Make it circular */ - cursor: pointer; /* Pointer cursor on hover */ - margin-top: 0px; /* Center thumb vertically */ -} - @supports not selector(::-webkit-scrollbar) { body { scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); } } - + + /* Styling for the range input slider */ + input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + height: 24px; + width: 24px; + background: #4f46e5; + border-radius: 50%; + cursor: pointer; + margin-top: 0px; + } + + /* Style for autofill in input fields */ input:-webkit-autofill { background-color: white !important; color: black !important; @@ -60,9 +145,10 @@ body { -webkit-text-fill-color: black !important; transition: background-color 5000s ease-in-out 0s; } - + input:-moz-autofill { background-color: white !important; color: black !important; box-shadow: 0 0 0px 1000px white inset !important; - } \ No newline at end of file + } + \ No newline at end of file