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/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
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
+
⭐⭐⭐⭐⭐
+
+
+
+