Chaotic feat: Add RateUs page for user feedback

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"

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() {
                     <Route path="/chaosmania" element={<ChaosMania />} />
                     <Route path="/ButtonCollection" element={<ButtonCollection />} />
                     <Route path="/BarrelRoll" element={<BarrelRoll />} />
+                    <Route path="/RateUs" element={<RateUs />} />
                 </Routes>
             </div>
         </Router>

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 */

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);
+}

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 (
+        <div className="rate-us-container">
+
+            <div className="rate-us" ref={rateUsRef}>
+            <h1> Rate Us</h1>
+                <div className="stars">⭐⭐⭐⭐⭐</div>
+                <textarea
+                    placeholder="Leave your comment..."
+                    rows="4"
+                    value={comment}
+                    onChange={handleCommentChange}
+                ></textarea>
+                <button onClick={handleSubmit}>Submit</button>
+            </div>
+        </div>
+    );
+};
+
+export default RateUs;