From 9dac49ea0ab0202b8ad89f6af36b7b2aecdda8e1 Mon Sep 17 00:00:00 2001 From: Yash8077 Date: Thu, 31 Oct 2024 14:33:24 +0530 Subject: [PATCH 1/2] Chaotic feat: Add RateUs page for user feedback --- chaosweb-v@2/package-lock.json | 56 +++++++++--- chaosweb-v@2/package.json | 3 +- chaosweb-v@2/src/App.jsx | 2 + chaosweb-v@2/src/pages/BarrelRoll.css | 122 +++++++------------------- chaosweb-v@2/src/pages/RateUs.css | 72 +++++++++++++++ chaosweb-v@2/src/pages/RateUs.jsx | 59 +++++++++++++ 6 files changed, 208 insertions(+), 106 deletions(-) create mode 100644 chaosweb-v@2/src/pages/RateUs.css create mode 100644 chaosweb-v@2/src/pages/RateUs.jsx diff --git a/chaosweb-v@2/package-lock.json b/chaosweb-v@2/package-lock.json index af635ca..7842b44 100644 --- a/chaosweb-v@2/package-lock.json +++ b/chaosweb-v@2/package-lock.json @@ -9,11 +9,12 @@ "version": "0.0.0", "dependencies": { "fireworks-js": "^2.10.8", + "framer-motion": "^11.11.10", "react": "^18.3.1", "react-confetti": "^6.1.0", "react-dom": "^18.3.1", "react-fireworks": "^1.0.4", - "react-router-dom": "^6.26.2", + "react-router-dom": "^6.27.0", "react-slick": "^0.30.2", "react-tsparticles": "^2.12.2", "slick-carousel": "^1.8.1" @@ -1007,9 +1008,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.19.2", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", - "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==", + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz", + "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==", "engines": { "node": ">=14.0.0" } @@ -2678,6 +2679,30 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "11.11.10", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.10.tgz", + "integrity": "sha512-061Bt1jL/vIm+diYIiA4dP/Yld7vD47ROextS7ESBW5hr4wQFhxB5D5T5zAc3c/5me3cOa+iO5LqhA38WDln/A==", + "dependencies": { + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -4268,11 +4293,11 @@ } }, "node_modules/react-router": { - "version": "6.26.2", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", - "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==", + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz", + "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==", "dependencies": { - "@remix-run/router": "1.19.2" + "@remix-run/router": "1.20.0" }, "engines": { "node": ">=14.0.0" @@ -4282,12 +4307,12 @@ } }, "node_modules/react-router-dom": { - "version": "6.26.2", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", - "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz", + "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==", "dependencies": { - "@remix-run/router": "1.19.2", - "react-router": "6.26.2" + "@remix-run/router": "1.20.0", + "react-router": "6.27.0" }, "engines": { "node": ">=14.0.0" @@ -5028,6 +5053,11 @@ "dev": true, "license": "Apache-2.0" }, + "node_modules/tslib": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz", + "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==" + }, "node_modules/tsparticles-engine": { "version": "2.12.0", "resolved": "https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.12.0.tgz", diff --git a/chaosweb-v@2/package.json b/chaosweb-v@2/package.json index 0b5b570..0d1140f 100644 --- a/chaosweb-v@2/package.json +++ b/chaosweb-v@2/package.json @@ -11,11 +11,12 @@ }, "dependencies": { "fireworks-js": "^2.10.8", + "framer-motion": "^11.11.10", "react": "^18.3.1", "react-confetti": "^6.1.0", "react-dom": "^18.3.1", "react-fireworks": "^1.0.4", - "react-router-dom": "^6.26.2", + "react-router-dom": "^6.27.0", "react-slick": "^0.30.2", "react-tsparticles": "^2.12.2", "slick-carousel": "^1.8.1" diff --git a/chaosweb-v@2/src/App.jsx b/chaosweb-v@2/src/App.jsx index 2226f83..e4a14cb 100644 --- a/chaosweb-v@2/src/App.jsx +++ b/chaosweb-v@2/src/App.jsx @@ -12,6 +12,7 @@ import ButtonCollection from "./pages/ButtonCollection"; import { useState } from "react"; import JumpScareEffect from "./components/JumpScareEffect"; import BarrelRoll from "./pages/BarrelRoll"; +import RateUs from "./pages/RateUs"; function App() { const [trigger, setTrigger] = useState(false); @@ -42,6 +43,7 @@ function App() { } /> } /> } /> + } /> diff --git a/chaosweb-v@2/src/pages/BarrelRoll.css b/chaosweb-v@2/src/pages/BarrelRoll.css index 542f5c4..e74eb5e 100644 --- a/chaosweb-v@2/src/pages/BarrelRoll.css +++ b/chaosweb-v@2/src/pages/BarrelRoll.css @@ -1,95 +1,33 @@ -/* App.css */ +/* RateUs.css */ + @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap'); body, html { - margin: 0; - padding: 0; - height: 100%; - font-family: 'Roboto', sans-serif; -} - -.App { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 100vh; - background: linear-gradient(135deg, #ff4d4d, #ffbe76); - overflow: hidden; - transition: transform 2s ease-in-out; -} - -@keyframes barrel-roll { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -.barrel-roll { - animation: barrel-roll 2s ease-in-out forwards; -} - -.title { - font-size: 3rem; - color: white; - text-align: center; - animation: fadeIn 2s ease-in-out; -} - -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -.instructions { - font-size: 1.2rem; - color: #fff; - margin: 20px; - text-align: center; - max-width: 80%; - animation: fadeIn 3s ease-in-out; -} - -.button { - padding: 15px 30px; - font-size: 1.2rem; - color: #ffbe76; - background-color: #2c3e50; - border: none; - border-radius: 10px; - cursor: pointer; - transition: transform 0.3s ease, background-color 0.3s ease; -} - -.button:hover { - background-color: #1abc9c; - transform: scale(1.1); -} - -.star { - position: absolute; - width: 10px; - height: 10px; - background-color: #fff; - border-radius: 50%; - animation: float 4s ease-in-out infinite; -} - -@keyframes float { - 0% { - transform: translateY(0) translateX(0); - } - 50% { - transform: translateY(-20px) translateX(10px); - } - 100% { - transform: translateY(0) translateX(0); - } -} + margin: 0; + padding: 0; + height: 100%; + font-family: 'Roboto', sans-serif; +} + +.rate-us-container { + width: 100%; + height: 100vh; /* Full viewport height */ + overflow: hidden; /* Prevent scrolling */ + display: flex; + justify-content: center; + align-items: center; + position: relative; /* Necessary for child positioning */ +} + +.rate-us { + display: flex; + flex-direction: column; + align-items: center; + border: 1px solid #ccc; + padding: 20px; + background-color: white; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +/* Additional styles for stars, textarea, and button can be added here */ diff --git a/chaosweb-v@2/src/pages/RateUs.css b/chaosweb-v@2/src/pages/RateUs.css new file mode 100644 index 0000000..f5fc1cf --- /dev/null +++ b/chaosweb-v@2/src/pages/RateUs.css @@ -0,0 +1,72 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap'); + +.rate-us { + top:0px; + left:0px; + background-color: rgb(0, 0, 0); + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); + text-align: center; + position: absolute; + overflow: hidden; + transition: transform 0.5s ease; /* Smooth transition for bouncing */ +} + +.stars { + font-size: 2rem; + margin-bottom: 10px; +} + +textarea { + width: 100%; + padding: 10px; + border-radius: 5px; + border: 1px solid #ccc; + margin-bottom: 10px; +} + +button { + padding: 10px 15px; + border: none; + border-radius: 5px; + background-color: #4caf50; + color: white; + cursor: pointer; +} + +button:hover { + background-color: #45a049; +} + +/* RateUs.css */ + +body, html { + margin: 0; + padding: 0; + height: 100%; + font-family: 'Roboto', sans-serif; +} + +.rate-us-container { + top:0px; + left:0px; + width: 100%; + height: 100vh; /* Full viewport height */ + overflow: hidden; /* Prevent scrolling */ + display: flex; + justify-content: center; + align-items: center; + position: absolute; /* Necessary for child positioning */ +} + +.rate-us { + display: flex; + flex-direction: column; + align-items: center; + border: 1px solid #ccc; + padding: 20px; + background-color: rgb(0, 0, 0); + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} diff --git a/chaosweb-v@2/src/pages/RateUs.jsx b/chaosweb-v@2/src/pages/RateUs.jsx new file mode 100644 index 0000000..9d8ca43 --- /dev/null +++ b/chaosweb-v@2/src/pages/RateUs.jsx @@ -0,0 +1,59 @@ +import React, { useEffect, useRef, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; // Import useNavigate for redirection +import './RateUs.css'; // Import CSS file for styling + +const RateUs = () => { + const [comment, setComment] = useState(''); + const rateUsRef = useRef(null); + const navigate = useNavigate(); // Initialize useNavigate + + useEffect(() => { + const rateUsDiv = rateUsRef.current; + + // Function to make the div bounce around + const bounce = () => { + const maxX = window.innerWidth - rateUsDiv.clientWidth; + const maxY = window.innerHeight - rateUsDiv.clientHeight; + + const newX = Math.random() * maxX; + const newY = Math.random() * maxY; + + rateUsDiv.style.transform = `translate(${newX}px, ${newY}px)`; + }; + + const intervalId = setInterval(bounce, 1000); // Bounce every second + + return () => clearInterval(intervalId); // Clear interval on unmount + }, []); + + const handleCommentChange = (e) => { + setComment(e.target.value); + }; + + const handleSubmit = () => { + alert(`Comment submitted: ${comment}`); + setComment(''); + + // Redirect to home after submission + navigate('/'); // Change '/' to your home route if different + }; + + return ( +
+ +
+

Rate Us

+
⭐⭐⭐⭐⭐
+ + +
+
+ ); +}; + +export default RateUs; From de6440bbc0c8a5e28ee8516ed224f9118370fa87 Mon Sep 17 00:00:00 2001 From: Yash8077 Date: Thu, 31 Oct 2024 14:39:19 +0530 Subject: [PATCH 2/2] feat: Add Rate Us navigation link --- chaosweb-v@2/src/components/navbar.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/chaosweb-v@2/src/components/navbar.jsx b/chaosweb-v@2/src/components/navbar.jsx index 34f13fa..47fe94f 100644 --- a/chaosweb-v@2/src/components/navbar.jsx +++ b/chaosweb-v@2/src/components/navbar.jsx @@ -1665,6 +1665,9 @@ const Navbar = () => {
handleNavigate("/barrelroll")}> Do a Barrel Roll
+
handleNavigate("/rateus")}> + Rate Us +
handleNavigate("/maze")}> Maze Game