Merge pull request #6 from UjjwalSaini07/B5-AfterPreRelease

Enhancement After PreRelease

Author: UjjwalSaini07

src/App.jsx

@@ -3,6 +3,7 @@ import Spline from "@splinetool/react-spline";
 import Swal from "sweetalert2";
 import { BsVolumeUpFill, BsVolumeMuteFill } from "react-icons/bs";
 
+import MouseStealing from './MouseStealer.jsx';
 import lovesvg from "./assets/All You Need Is Love SVG Cut File.svg";
 import Lovegif from "./assets/GifData/main_temp.gif";
 import heartGif from "./assets/GifData/happy.gif";
@@ -290,12 +291,33 @@ export default function Page() {
     }
   }, [yesPressed, noCount, yespopupShown]);
 
+  useEffect(() => {
+    if (noCount == 25) {
+      Swal.fire({
+        title: "My love for you is endless, like the stars in the sky—shining for you every night, even if you don’t always notice. 🌟 I’ll wait patiently, proving every day that you’re my everything. ❤️ Please press ‘Yes’ and let’s make this a forever story. 🥰✨<br/>'True love never gives up; it grows stronger with time.'",
+        width: 850,
+        padding: "2em",
+        color: "#716add",
+        background: `#fff url(${swalbg})`,
+        backdrop: `
+          rgba(0, 104, 123, 0.7)
+          url(${nogif1})
+          right
+          no-repeat
+        `,
+      });
+    }
+  }, [noCount]);
+
   return (
     <>
       <div className="fixed top-0 left-0 w-screen h-screen -z-10">
         <Spline scene="https://prod.spline.design/oSxVDduGPlsuUIvT/scene.splinecode" />
         {/* <Spline scene="https://prod.spline.design/ZU2qkrU9Eyt1PHBx/scene.splinecode" /> */}
       </div>
+
+      {noCount > 16 && noCount < 25 && yesPressed == false && <MouseStealing />}
+
       <div className="overflow-hidden flex flex-col items-center justify-center pt-4 h-screen -mt-16 selection:bg-rose-600 selection:text-white text-zinc-900">
         {yesPressed && noCount>3 ? (
           <>

src/MouseStealer.css

@@ -1,4 +1,108 @@
-.container {
+.grab-zone {
+  position: fixed;
+  bottom: -280px;
+  left: 65.5%;
+  width: 240px;
+  height: 300px;
+  transition: bottom 2s cubic-bezier(0.42, 0, 0.58, 1), transform 1s ease-in-out;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.grabber {
+  position: relative;
+  width: 105px;
+  height: 140px;
+  pointer-events: auto;
+  transform: translateX(-50%);
+  transition: transform 0.8s ease, bottom 2s cubic-bezier(0.42, 0, 0.58, 1);
+}
+
+.grab-zone--peek {
+  bottom: -150px;
+}
+
+.grab-zone--active {
+  bottom: 50px;
+}
+
+.grabber__face {
+  position: absolute;
+  width: 110px;
+  height: 110px;
+  z-index: 5;
+}
+
+.grabber__eyes {
+  position: absolute;
+  top: 25px;
+  left: 25px;
+  width: 50px;
+  height: 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.grabber__eye {
+  width: 20px;
+  height: 20px;
+  background: #000;
+  border-radius: 50%;
+  transform-origin: center;
+}
+
+.grabber__eye--left {
+  transform: translate(20px, 0);
+}
+
+.grabber__eye--right {
+  transform: translate(-20px, 0);
+}
+
+.grabber--near .grabber__face {
+  animation: peek 1.2s ease-in-out infinite;
+}
+
+.grabber__hand {
+  position: absolute;
+  bottom: -15px;
+  width: 55px;
+  height: 75px;
+  transform: translateX(-50%);
+}
+
+.grabber--grabbed {
+  transform: translateY(-50px);
+}
+
+.grabber--stealing {
+  bottom: -300px !important;
+  animation: descend 2s cubic-bezier(0.42, 0, 0.58, 1);
+}
+
+@keyframes peek {
+  0%, 100% {
+    transform: translateY(10px);
+  }
+  50% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes descend {
+  from {
+    bottom: 10px;
+    transform: scale(1.1);
+  }
+  to {
+    bottom: -300px;
+    transform: scale(1);
+  }
+}
+
+
+/* Todo: Main Styled Code */
+/* .container {
   max-width: 520px;
   margin: 0 auto;
   padding: 0 1rem 100px 1rem;
@@ -179,4 +283,4 @@
   100% {
     transform: scale(2.5) translateY(0%) rotate(20deg);
   }
-}
+} */