Enhanced scroll back button with timeline on it for smoother functioning. (Issue #352)

client/src/component/Login.jsx

@@ -75,6 +75,20 @@ const Login = ({ mode, showAlert, isloggedin, setloggedin }) => {
       }
     }
   };
+  document.querySelector('#login-btn').addEventListener('click', (event) => {
+    event.preventDefault();
+
+    const emailInput = document.getElementById('login-email');
+    const rememberMeCheckbox = document.getElementById('login-remember');
+
+    if (rememberMeCheckbox.checked) {
+      localStorage.setItem('rememberedEmail', emailInput.value);
+    } else {
+      localStorage.removeItem('rememberedEmail');
+    }
+
+    // Continue with your existing login logic...
+  });    
 
   return (
     <div className="min-h-screen flex items-center justify-center mt-10" data-aos="zoom-in" data-aos-duration="1800">
@@ -139,7 +153,10 @@ const Login = ({ mode, showAlert, isloggedin, setloggedin }) => {
 
             />
           </div>
-
+          <div class="form-check d-flex">
+          <input type="checkbox" class="form-check-input" id="login-remember" />
+          <label class="form-check-label" for="login-remember">Remember me</label>
+          </div>
           <button className="submit" type="submit" disabled={loading}>
             {loading ? <Spin size="small" /> : "Login"}
           </button>

client/src/component/ScrollTop.jsx

@@ -3,6 +3,7 @@ import '../css/ScrollTop.css';
 
 const ScrollTop = () => {
     const [isVisible, setIsVisible] = useState(false);
+
     useEffect(() => {
         const handleScroll = () => {
             if (window.pageYOffset > 20) {
@@ -11,6 +12,7 @@ const ScrollTop = () => {
                 setIsVisible(false);
             }
         };
+
         window.addEventListener('scroll', handleScroll);
         return () => {
             window.removeEventListener('scroll', handleScroll);
@@ -24,15 +26,6 @@ const ScrollTop = () => {
         });
     };
 
-    // const smoothScrollToTop = () => {
-    //     const scrollY = window.pageYOffset;
-    //     const scrollStep = Math.max(500, Math.floor(scrollY / 100));
-    //     if (scrollY > 0) {
-    //         window.scrollBy(0, -scrollStep);
-    //         requestAnimationFrame(smoothScrollToTop);
-    //     }
-    // };
-
     return (
         <div className={`Scroll-Top ${isVisible ? 'visible' : ''}`}>
             <button onClick={smoothScrollToTop} title="Go to top" className="button">
@@ -41,9 +34,10 @@ const ScrollTop = () => {
                         d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
                     ></path>
                 </svg>
+                <div className="progress-circle"></div> {/* Added progress circle */}
             </button>
         </div>
     );
 };
 
-export default ScrollTop;
+export default ScrollTop;

client/src/component/Signup.jsx

@@ -76,6 +76,20 @@ const Signup = ({ mode }) => {
       },
       body: JSON.stringify({ name, email, password }),
     });
+    document.querySelector('#login-btn').addEventListener('click', (event) => {
+      event.preventDefault();
+
+      const emailInput = document.getElementById('login-email');
+      const rememberMeCheckbox = document.getElementById('login-remember');
+
+      if (rememberMeCheckbox.checked) {
+        localStorage.setItem('rememberedEmail', emailInput.value);
+      } else {
+        localStorage.removeItem('rememberedEmail');
+      }
+
+      // Continue with your existing login logic...
+    });    
     const json = await response.json();
 
     if (json.success) {
@@ -238,6 +252,10 @@ const Signup = ({ mode }) => {
             </div>
 
             <br />
+            <div class="form-check d-flex">
+          <input type="checkbox" class="form-check-input" id="login-remember" />
+          <label class="form-check-label" for="login-remember">Remember me</label>
+            </div>
 
             <button type="submit" className="signup-submit">
               Sign Up

client/src/css/Login.css

@@ -27,6 +27,14 @@ body {
   text-align: center;
   background-color: var(--form-bg, #fff);
 }
+.form-check {
+  align-items: center; /* Aligns checkbox and label vertically */
+}
+
+.form-check-input {
+  margin-right: 10px; /* Space between checkbox and label */
+}
+
 
 .title {
   font-size: 3rem;

client/src/css/ScrollTop.css

@@ -2,7 +2,7 @@
     display: none;
     position: fixed;
     bottom: 20px;
-    right: 80px;
+    right: 20px;
     z-index: 999;
     transition-duration: 0.3s;
 }
@@ -11,54 +11,58 @@
     display: block;
 }
 
-.Scroll-Top .button {
+.button {
     width: 50px;
     height: 50px;
     border-radius: 50%;
-    background-color: rgb(20, 20, 20);
+    background: linear-gradient(135deg, rgba(181, 160, 255, 1) 0%, rgba(20, 20, 20, 1) 100%);
     border: none;
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     cursor: pointer;
-    transition-duration: 0.3s;
+    position: relative; /* Necessary for the progress circle positioning */
     overflow: hidden;
+    transition-duration: 0.3s;
 }
 
-.Scroll-Top .svgIcon {
+.svgIcon {
     width: 24px;
     transition-duration: 0.3s;
 }
 
-.Scroll-Top .svgIcon path {
+.svgIcon path {
     fill: white;
 }
 
-.Scroll-Top .button:hover {
-    width: 140px;
-    border-radius: 50px;
-    transition-duration: 0.3s;
-    background-color: rgb(181, 160, 255);
+.button:hover {
+    background: linear-gradient(135deg, rgba(255, 181, 160, 1) 0%, rgba(20, 20, 20, 1) 100%);
 }
 
-.Scroll-Top .button:hover .svgIcon {
-    transition-duration: 0.3s;
-    transform: translateY(-200%);
+/* Progress Circle */
+.progress-circle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 30px;  /* Adjust size as needed */
+    height: 30px; /* Adjust size as needed */
+    border-radius: 50%;
+    border: 3px solid rgba(255, 255, 255, 0.7);
+    border-top-color: transparent; /* Make top part transparent for animation */
+    animation: spin 1s linear infinite; /* Spin animation */
+    transform: translate(-50%, -50%); /* Center it */
+    opacity: 0; /* Initially hidden */
+    transition: opacity 0.3s; /* Fade effect */
 }
 
-.Scroll-Top .button::before {
-    position: absolute;
-    bottom: -20px;
-    content: "Back to Top";
-    color: white;
-    font-size: 0px;
+.button:hover .progress-circle {
+    opacity: 1; /* Show on hover */
 }
 
-.Scroll-Top .button:hover::before {
-    font-size: 13px;
-    opacity: 1;
-    bottom: unset;
-    transition-duration: 0.3s;
-}
+/* Animation for the progress circle */
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

client/src/css/Signup.css

@@ -84,6 +84,14 @@
 .signup-link:hover {
     color: #6366F1;
 }
+.form-check {
+    align-items: center; /* Aligns checkbox and label vertically */
+  }
+
+  .form-check-input {
+    margin-right: 10px; /* Space between checkbox and label */
+  }
+
 
 @media (max-width: 600px) {
     .signup-wrapper {