Chaotic Feat: Added Rate Us Feature

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/components/navbar.jsx

@@ -1665,6 +1665,9 @@ const Navbar = () => {
         <div className="nav-item" onClick={() => handleNavigate("/barrelroll")}>
             Do a Barrel Roll
         </div>
+        <div className="nav-item" onClick={() => handleNavigate("/rateus")}>
+            Rate Us
+        </div>
         <div className="nav-item" onClick={() => handleNavigate("/maze")}>
         Maze Game
       </div>

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