mobile mode design

findd/findd/settings.py

@@ -82,7 +82,7 @@
     "default": {
         "ENGINE": "django.db.backends.mysql",
         "NAME": "findd",
-        "PASSWORD": "yourpassword",
+        "PASSWORD": "Sakshi@2001",
         "USER": "root",
         "HOST": "localhost",
     }

findd/frontend/FINDD/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "firebase": "^11.3.1",
-    "framer-motion": "^12.4.7",
+    "framer-motion": "^12.5.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.2.0",

findd/frontend/FINDD/src/pages/Jobs.css

@@ -17,7 +17,7 @@
 .job-box {
   width: 1278px;
   height: 1200px;
-  background: #fdbf62;
+  background: #f0f0dd;
   border-radius: 10px;
   padding: 20px;
   padding-top: 220px;
@@ -31,8 +31,18 @@
   font-family: Arial, sans-serif;
   font-size: 18px;
   margin-top: 700px;
+  transition: transform 0.3s ease-in-out;
 }
 
+.job-box.left {
+  transform: translateX(-100%) rotate(-10deg);
+  opacity: 0;
+}
+
+.job-box.right {
+  transform: translateX(100%) rotate(10deg);
+  opacity: 0;
+}
 .job-header {
   text-align: center;
   padding: 20px 0;
@@ -73,7 +83,7 @@
   width: 1278px;
   max-height: 1200px;
   overflow-y: auto;
-  background: #fdbf62;
+  background: #f5d00328;
   border-radius: 10px;
   padding: 15px;
   /* margin-top: 10px; */
@@ -165,33 +175,45 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-top: 62px;
+    margin-top: 93px;
+    /* border: 2px solid #222; */
+    border-radius: 1rem;
   }
 
   .divider {
     margin-top: 150px; /* Increased margin to push it further down */
     margin-bottom: 20px;
+    height: 5px;
   }
   .job-box {
-    width: 100vw;
-    height: calc(100vh - 60px);
-    max-height: calc(100vh - 60px);
-    font-size: 16px;
+    width: 97.5vw;
+    /* height: calc(100vh - 60px); */
+    /* max-height: calc(100vh - 60px); */
+    font-size: 26px;
     padding: 15px;
+    padding-top: 130px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    color: black;
+    border: 2px solid #555;
+    border-radius: 8px;
   }
   .applied-job-popup {
     font-size: 12px;
   }
   .job-description-container {
-    width: 90vw;
-    max-height: 180px; /* Slightly increased for better readability */
+    width: 85vw;
+    height: auto;
+    min-height: 150px;
+    max-height: 60vh; /* Slightly increased for better readability */
     overflow-y: auto;
-    padding: 10px;
+    /* padding: 10px; */
+    border: 2px solid #888;
+    border-radius: 6px;
+    margin: 10px ;
   }
 }
 

findd/frontend/FINDD/src/pages/Jobs.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import "./Jobs.css";
 
 const jobsData = [
@@ -37,7 +37,7 @@ const jobsData = [
   },
   { 
     id: 4, 
-    title: "Cybersecurity Expert", 
+    title: "Security expert", 
     company: "Tesla", 
     description: "Secure networks, prevent cyber attacks, and analyze threats.", 
     location: "Austin, TX", 
@@ -48,14 +48,15 @@ const jobsData = [
   }
 ];
 
-
 const JobsPage = () => {
   const [jobs, setJobs] = useState(jobsData);
   const [currentJobIndex, setCurrentJobIndex] = useState(0);
   const [recentlyApplied, setRecentlyApplied] = useState(null);
   const [startX, setStartX] = useState(null);
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
   const [showDescription, setShowDescription] = useState(false);
+  const [swipeDirection, setSwipeDirection] = useState(""); // 🔹 Track swipe animation
+  const jobBoxRef = useRef(null);
 
   // Detect screen size change
   useEffect(() => {
@@ -72,14 +73,22 @@ const JobsPage = () => {
       setRecentlyApplied(jobs[currentJobIndex]);
       setTimeout(() => setRecentlyApplied(null), 500);
     }
-    handleNext();
+    setSwipeDirection("right"); // 🔹 Trigger right swipe animation
+    setTimeout(() => {
+      handleNext();
+      setSwipeDirection(""); // Reset animation class
+    }, 300); 
   };
 
   // Function to move to the next job
   const handleNext = () => {
     if (currentJobIndex < jobs.length - 1) {
-      setCurrentJobIndex(currentJobIndex + 1);
-      setShowDescription(false); // Reset description visibility when switching jobs
+      setSwipeDirection("left"); // 🔹 Trigger left swipe animation
+      setTimeout(() => {
+        setCurrentJobIndex(currentJobIndex + 1);
+        setSwipeDirection(""); // Reset animation class
+        setShowDescription(false);
+      }, 300);
     }
   };
 
@@ -106,8 +115,22 @@ const JobsPage = () => {
   // Swipe events for mobile
   const handleTouchStart = (e) => {
     if (!isMobile) return;
+
+    const jobBox = jobBoxRef.current;
+    const divider = document.querySelector(".divider");
+
+    if (!jobBox || !divider) return;
+
+    // Get the Y position of the divider relative to the viewport
+    const dividerRect = divider.getBoundingClientRect();
+    const touchY = e.touches[0].clientY; // Get the Y position of the touch event
+
+    // If touch starts below the divider, disable swipe
+    if (touchY > dividerRect.bottom) return;
+
     setStartX(e.touches[0].clientX);
   };
+
 
   const handleTouchEnd = (e) => {
     if (!isMobile || !startX) return;
@@ -138,53 +161,48 @@ const JobsPage = () => {
         </div>
       )}
 
-<div className="job-box">
-  {jobs[currentJobIndex] ? (
-    <>
-      {/* 🔹 Job Title & Company Section */}
-      <div className="job-header">
-        <h2 className="job-title">{jobs[currentJobIndex].title}</h2>
-        <p className="job-company">{jobs[currentJobIndex].company}</p>
+      <div className={`job-box ${swipeDirection}`} ref={jobBoxRef}>
+        {jobs[currentJobIndex] ? (
+          <>
+            {/* 🔹 Job Title & Company Section */}
+            <div className="job-header">
+              <h2 className="job-title">{jobs[currentJobIndex].title}</h2>
+              <p className="job-company">{jobs[currentJobIndex].company}</p>
+            </div>
+
+            {/* 🔹 Black Divider */}
+            <div className="divider"></div>
+
+            {/* 🔹 Job Description Section */}
+            <div className="job-description-container">
+              <h3>Title of Job:</h3>
+              <p className="job-description">{jobs[currentJobIndex].title}</p>
+
+              <h3>Job Description:</h3>
+              <p className="job-description">{jobs[currentJobIndex].description}</p>
+
+              <h3>Location:</h3>
+              <p className="job-description">{jobs[currentJobIndex].location}</p>
+
+              <h3>Years of Experience Required:</h3>
+              <p className="job-description">{jobs[currentJobIndex].experience}</p>
+
+              <h3>Salary:</h3>
+              <p className="job-description">{jobs[currentJobIndex].salary}</p>
+
+              <h3>Mode of Job:</h3>
+              <p className="job-description">{jobs[currentJobIndex].mode}</p>
+
+              <h3>Time Duration of Job:</h3>
+              <p className="job-description">{jobs[currentJobIndex].duration}</p>
+            </div>
+          </>
+        ) : (
+          <h2>No more jobs available</h2>
+        )}
       </div>
-
-      {/* 🔹 Black Divider */}
-      <div className="divider"></div>
-
-      {/* 🔹 Job Description Section */}
-<div className="job-description-container">
-  <h3>Title of Job:</h3>
-  <p className="job-description">{jobs[currentJobIndex].title}</p>
-
-  <h3>Job Description:</h3>
-  <p className="job-description">{jobs[currentJobIndex].description}</p>
-
-  <h3>Location:</h3>
-  <p className="job-description">{jobs[currentJobIndex].location}</p>
-
-  <h3>Years of Experience Required:</h3>
-  <p className="job-description">{jobs[currentJobIndex].experience}</p>
-
-  <h3>Salary:</h3>
-  <p className="job-description">{jobs[currentJobIndex].salary}</p>
-
-  <h3>Mode of Job:</h3>
-  <p className="job-description">{jobs[currentJobIndex].mode}</p>
-
-  <h3>Time Duration of Job:</h3>
-  <p className="job-description">{jobs[currentJobIndex].duration}</p>
-</div>
-
-    </>
-  ) : (
-    <h2>No more jobs available</h2>
-  )}
-</div>
-
     </div>
   );
 };
 
 export default JobsPage;
-
-
-

findd/frontend/FINDD/src/pages/Login.css

@@ -23,10 +23,11 @@
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
-    width: 100%;
+    width: 95%;
     max-width: 400px;
     /* margin-top: -250px; */
     gap: 10px;
+    padding-left: 20px;
   }
 
   .login-container label {
@@ -43,6 +44,8 @@
     border: 1px solid #ccc;
     border-radius: 5px;
     font-size: 14px;
+    background-color: white;
+    color: black;
   }
 
   .login-container button {
@@ -61,4 +64,10 @@
   .login-container button:hover {
     background-color: #1a252f;
   }
-
+
+  @media (max-width: 600px) {
+    .login-container {
+      width: 115%;
+      padding: 20px;
+    }
+}