From 614631e33576c8557b70868241769b1f24d0605c Mon Sep 17 00:00:00 2001
From: sivaprasath2004 <prasathsiva2004@gmail.com>
Date: Tue, 21 May 2024 12:22:51 +0530
Subject: [PATCH] New login page

---
 src/css/registration_from.css   | 453 ++++++++++++++++++--------------
 src/js/script.js                |  78 ++++--
 src/views/registration-form.ejs | 101 +++++--
 3 files changed, 394 insertions(+), 238 deletions(-)

diff --git a/src/css/registration_from.css b/src/css/registration_from.css
index 166dda6..b899c64 100644
--- a/src/css/registration_from.css
+++ b/src/css/registration_from.css
@@ -1,208 +1,269 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
-
-:root {
-  --left-bg-color: rgba(46, 46, 61, 0.7);
-  --right-bg-color: rgba(43, 43, 43, 0.8);
-  --left-btn-hover-color: rgba(87, 84, 236, 1);
-  --right-btn-hover-color: rgb(18, 172, 77);
-  --hover-width: 75%;
-  --minimize-width: 25%;
-  --transition-speed: 1s;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: "Roboto", sans-serif;
-  height: 100vh;
-  overflow: hidden;
-  margin: 0;
-}
-
-h3 {
-  font-size: 3rem;
-  color: #fff;
-  position: absolute;
-  left: 50%;
-  top: 20%;
-  transform: translateX(-50%);
-  white-space: nowrap;
-}
-p {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 500px;
-  font-size: 25px;
-  position: absolute;
-  padding: 8px;
-  left: 50%;
-  text-align: center;
-  top: 50%;
-  transform: translateX(-50%);
-  white-space: nowrap;
-  color: rgba(255, 255, 255, 0.5);
-}
-.btn {
-  color: #fff;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  left: 50%;
-  top: 40%;
-  transform: translateX(-50%);
-  border: #fff solid 0.2rem;
-  text-decoration: none;
-  font-size: 1rem;
-  font-weight: bold;
-  text-transform: uppercase;
-  width: 15rem;
-  padding: 1.5rem;
-}
-.split.left .btn:hover {
-  background-color: var(--left-btn-hover-color);
-  border-color: var(--left-btn-hover-color);
-}
-
-.split.right .btn:hover {
-  background-color: var(--right-btn-hover-color);
-  border-color: var(--right-btn-hover-color);
-}
-
-.container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background: #333;
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
+#login_signUpForm {
+    background-color: #c9d6ff;
+    background: linear-gradient(to right, #e2e2e2, #c9d6ff);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    min-height: 100vh;
+    padding-top:30px ;
 }
 
-.split {
-  position: absolute;
-  width: 50%;
-  height: 100%;
-  overflow: hidden;
+.container{
+  background: #ecf0f3;
+    border-radius: 30px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
+    position: relative;
+    overflow: hidden;
+    width: 768px;
+    max-width: 100%;
+    min-height: 480px;
+}
+#form #Applogo{
+    height: 100px;
+    width: 100px;
+    border-radius: 50%;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: black;
+}
+#form #Applogo img{
+    filter: invert(1);
+    height: 60%;
+    width: 60%;
+    object-fit: contain;
+}
+.container p{
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.3px;
+    margin: 20px 0;
 }
 
-.split.left {
-  left: 0;
-  background: url("https://images.pexels.com/photos/2098427/pexels-photo-2098427.jpeg?auto=compress&cs=tinysrgb&w=600")
-    no-repeat center / cover;
+.container span{
+    cursor: pointer;
+    font-size: 12px;
+    text-decoration: underline;
+    color: blue;
 }
 
-.split.left::before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: var(--left-bg-color);
+.container a{
+    color: #333;
+    font-size: 13px;
+    text-decoration: none;
+    margin: 15px 0 10px;
 }
 
-.split.right {
-  right: 0;
-  background: url("../img/back2.jpeg") no-repeat center / cover;
+.container button{
+    background-color: #2da0a8;
+    color: #fff;
+    font-family: "Signika Negative", sans-serif;
+    font-size: 0.8rem;
+    padding: 1rem 3.5rem;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    font-weight: 900;
+    letter-spacing: 0.2rem;
+    text-transform: uppercase;
+    margin: 0rem 0rem 0.5rem;
+    cursor: pointer;
+}
+.container h1{
+    font-family: "Signika Negative", sans-serif;
+}
+.container p{
+    font-family: "Roboto Slab", serif;
+}
+.toggle-panel h1{
+    font-size: 1.5rem;
+    letter-spacing: 0.2rem;
+}
+.container button.hidden{
+    background-color: transparent;
+    border-color: #fff;
+}
+.container #error{
+    font-family: "Signika Negative", sans-serif;
+    margin: 0px 0px 0.2rem;
+    color: #ff0000ad;
+    font-size: 0.8rem;
+    font-weight: 700;
+}
+.container #form{
+    position: relative;
+  background: #ecf0f3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: 0 40px;
+    height: 100%;
+    z-index: 1;
 }
 
-.split.right::before {
-  content: "";
-  position: absolute;
+#form input {
+  background: #ecf0f3;
+  padding: 10px;
+  padding-left: 20px;
   width: 100%;
-  height: 100%;
-  background-color: var(--right-bg-color);
-}
-
-form {
-  position: absolute;
-  background: transparent;
-  width: 500px;
-  position: absolute;
-  top: 10%;
-  left: 10%;
-  padding: 50px 10px 0 30px;
-  box-sizing: border-box;
-  border: 1px solid #fff;
-  border-radius: 0 0 5px 5px;
-}
-form input {
-  height: 50px;
-  width: 90%;
-  margin: 10px;
-  padding: 0 10px;
-  border-radius: 3px;
-  border: 1px solid silver;
-  font-size: 18px;
-  outline: none;
-}
-.title {
-  color: #fff;
-}
-form input[type="password"] {
-  margin-top: 20px;
-}
-form i {
-  position: absolute;
-  font-size: 25px;
-  color: grey;
-  margin: 15px 0 0 -45px;
-}
-i.fa-lock {
-  margin-top: 35px;
-}
-form input[type="submit"] {
-  margin-top: 40px;
-  margin-bottom: 40px;
-  width: 130px;
-  height: 45px;
-  color: #fff;
-  cursor: pointer;
-  line-height: 45px;
-  border-radius: 45px;
-  border-radius: 5px;
-  background: none;
-}
-form input[type="submit"]:hover {
-  background: var(--left-btn-hover-color);
-  transition: 0.5s;
-}
-form a {
-  text-decoration: none;
-  font-size: 18px;
-  color: #fff;
-  padding: 0 0 0 20px;
-}
-
-.split.left,
-.split.right,
-.split.left::before,
-.split.right::before {
-  transition: all var(--transition-speed) ease-in-out;
-}
-
-.hover-left .left {
-  width: var(--hover-width);
-}
-
-.hover-left .right {
-  width: var(--minimize-width);
-}
-
-.hover-right .right {
-  width: var(--hover-width);
-}
-
-.hover-right .left {
-  width: var(--minimize-width);
-}
-
-@media (max-width: 800px) {
-  h1 {
-    font-size: 2rem;
-    top: 30%;
-  }
-  .btn {
-    padding: 1.2rem;
-    width: 12rem;
-  }
+  height: 30px;
+  font-size: 14px;
+  border-radius: 50px;
+  box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
+  border: none;
+}
+.sign-in #form input{margin: 0.5rem;}
+.sign-up #form input{margin: 0.3rem;}
+.form-container{
+    position: absolute;
+    top: 0;
+    height: 100%;
+    transition: all 0.6s ease-in-out;
+}
+
+.sign-in{
+    left: 0;
+    width: 50%;
+    z-index: 2;
+}
+
+.container.active .sign-in{
+    transform: translateX(100%);
+}
+
+.sign-up{
+    left: 0;
+    width: 50%;
+    opacity: 0;
+    z-index: 1;
+}
+
+.container.active .sign-up{
+    transform: translateX(100%);
+    opacity: 1;
+    z-index: 5;
+    animation: move 0.6s;
+}
+
+@keyframes move{
+    0%, 49.99%{
+        opacity: 0;
+        z-index: 1;
+    }
+    50%, 100%{
+        opacity: 1;
+        z-index: 5;
+    }
+}
+
+.social-icons{
+    margin: 20px 0;
+}
+
+.social-icons a{
+    border: 1px solid #ccc;
+    border-radius: 20%;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 3px;
+    width: 40px;
+    height: 40px;
+}
+
+.toggle-container{
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+    transition: all 0.6s ease-in-out;
+    border-radius: 150px 0 0 100px;
+    z-index: 7;
+}
+
+.container.active .toggle-container{
+    transform: translateX(-100%);
+    border-radius: 0 150px 100px 0;
+}
+.toggle{
+    background-color: #2da0a8;
+    height: 100%;
+    background: linear-gradient(to right, #5c6bc0, #2da0a8);
+    color: #fff;
+    position: relative;
+    left: -100%;
+    height: 100%;
+    width: 200%;
+    transform: translateX(0);
+    transition: all 0.6s ease-in-out;
+}
+
+.container.active .toggle{
+    transform: translateX(50%);
+}
+
+.toggle-panel{
+    position: absolute;
+    width: 40%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: 0 30px;
+    text-align: center;
+    top: 0;
+    transform: translateX(0);
+    transition: all 0.6s ease-in-out;
+}
+
+.toggle-left{
+    transform: translateX(-200%);
+}
+
+.container.active .toggle-left{
+    transform: translateX(0);
+}
+
+.toggle-right{
+    right: 0;
+    transform: translateX(0);
+}
+
+.container.active .toggle-right{
+    transform: translateX(200%);
+}
+@media (max-width:900px){
+    .container{
+        width: 90%;
+    }
+}
+@media (max-width:700px){
+    .container{
+         width: 320px;
+        min-height: 450px;
+        padding: 0.7rem;
+    }
+    .container .sign-up,.container.active .sign-in{
+        transform: translateX(100%);
+    }
+    .container.active .sign-up,.container .sign-in{
+        transform: translateX(0%);
+    }
+    .toggle-container{
+        display: none;
+    }
+    .sign-up,.sign-in{
+        width: 100%;
+    }
 }
+@media (max-width:330px){
+    .container{
+        width: 90%;
+    }
+}
\ No newline at end of file
diff --git a/src/js/script.js b/src/js/script.js
index e5a308c..b507cac 100644
--- a/src/js/script.js
+++ b/src/js/script.js
@@ -1,16 +1,62 @@
-const left = document.querySelector(".left");
-const right = document.querySelector(".right");
-const container = document.querySelector(".container");
-
-left.addEventListener("mouseenter", () =>
-  container.classList.add("hover-left")
-);
-left.addEventListener("mouseleave", () =>
-  container.classList.remove("hover-left")
-);
-right.addEventListener("mouseenter", () =>
-  container.classList.add("hover-right")
-);
-right.addEventListener("mouseleave", () =>
-  container.classList.remove("hover-right")
-);
+const singin=document.getElementById('login'),
+      singin2=document.getElementById('login2'),
+      container=document.getElementById('container'),
+      register=document.getElementById('register'),
+      register2=document.getElementById('register2'),
+      user_signup=document.getElementById('user_signup'),
+      user_signin=document.getElementById('user_signin'),
+      sign_in_pass=document.getElementById('sign-in-pass'),
+      sign_in_email=document.getElementById('sign-in-email'),
+      sign_up_pass=document.getElementById('sign-up-pass'),
+      sign_up_name=document.getElementById('sign-up-name'),
+      sign_up_email=document.getElementById('sign-up-email'),
+      signup_error=document.getElementById('signup_error'),
+      signin_error=document.getElementById('singin_error')
+user_signin.addEventListener('click',()=>{
+  console.log('click')
+  if(sign_in_email.value.length>0 && sign_in_pass.value.length>0){
+    let check=sign_in_email.value.split('@')
+    if(check[1]==="gamil.com" ||check[1]==="outlook.com"){
+      signin_error.style.color="green"
+      signin_error.textContent="success"
+    }
+    else{
+      signin_error.style.color="red"
+      signin_error.textContent="Invalid Mail Address"
+    }
+  }
+  else{
+    signin_error.style.color="red"
+    signin_error.textContent="Fill the Form"
+  }
+})
+user_signup.addEventListener('click',()=>{
+  console.log('click')
+  if(sign_up_email.value.length>0 && sign_up_pass.value.length>0 && sign_up_name.value.length>0){
+    let check=sign_up_email.value.split('@')
+    if(check[1]==="gamil.com" ||check[1]==="outlook.com"){
+     signup_error.style.color="green"
+     signup_error.textContent="success"
+    }
+    else{
+      signup_error.style.color="red"
+      signup_error.textContent="Invalid Mail Address"
+    }
+  }
+  else{
+    signup_error.style.color="red"
+    signup_error.textContent="Fill the Form"
+  }
+})
+singin.addEventListener('click',()=>{
+container.classList.remove('active')
+})
+singin2.addEventListener('click',()=>{
+  container.classList.remove('active')
+  })
+  register2.addEventListener('click',()=>{
+    container.classList.add('active')
+  })
+register.addEventListener('click',()=>{
+  container.classList.add('active')
+})
\ No newline at end of file
diff --git a/src/views/registration-form.ejs b/src/views/registration-form.ejs
index d57cd9e..39850af 100644
--- a/src/views/registration-form.ejs
+++ b/src/views/registration-form.ejs
@@ -11,41 +11,90 @@
     <title>Sign in & Sign up Form</title>
   </head>
   <body>
-    <div class="container">
-      <div class="split left">
-        <form method="post" action="register">
-          <h2 class="title">Sign up</h2>
-          <p><%=(typeof alertMsg!='undefined')? alertMsg:''%></p>
-          <div class="input-field">
-            <input type="text" placeholder="Name" name="first_name" required />
-          </div>
-          <div class="input-field">
+    <section id="login_signUpForm">
+      <div
+        class="container"
+        id="container"
+      >
+        <div class="form-container sign-up">
+          <div id="form">
+            <div id="Applogo">
+              <img src="https://cdn-icons-png.flaticon.com/128/33/33308.png" alt="logo" />
+            </div>
+            <h1>Create Account</h1>
+            <input
+              id="sign-up-name"
+              type="text"
+              placeholder="Name"
+            />
             <input
+            id="sign-up-email"
               type="email"
               placeholder="Email"
-              name="email_address"
-              required
             />
+            <input
+            id="sign-up-pass"
+              type="password"
+              placeholder="Password"
+            />
+            <p>
+              Already have a Account?
+              <span id="login2"> Sign In</span>
+            </p>
+            <p id="signup_error"></p>
+            <button id="user_signup">Sign Up</button>
           </div>
-          <div class="input-field">
-            <input type="password" placeholder="Password" name="password" />
-          </div>
-          <div class="input-field">
+        </div>
+        <div class="form-container sign-in">
+          <div id="form">
+            <div id="Applogo">
+              <img src="https://cdn-icons-png.flaticon.com/128/64/64572.png" alt="logo" />
+            </div>
+            <h1>Sign In</h1>
             <input
+              id="sign-in-email"
+              type="email"
+              placeholder="Email"
+            />
+            <input
+            id="sign-in-pass"
               type="password"
-              placeholder="ConfirmPassword"
-              name="confirm_password"
+              placeholder="Password"
             />
+            <p>
+              Don't have a Account?<span id="register2"> Sign Up</span>
+            </p>
+            <p id="singin_error"></p>
+            <button id="user_signin">Sign In</button>
           </div>
-          <input type="submit" value="Sign up" />
-        </form>
-      </div>
-      <div class="split right">
-        <h3>One of us?</h3>
-        <p>If you have already signed up , that's great !! Please LOGIN</p>
-        <a href="/login" class="btn">Login </a>
+        </div>
+        <div class="toggle-container">
+          <div class="toggle">
+            <div class="toggle-panel toggle-left">
+              <h1>Welcome Back!</h1>
+              <p>
+                Please sign in to access your account, then click the 'Sign In'
+                button to proceed.
+              </p>
+              <button class="hidden" id="login" >
+                Sign In
+              </button>
+            </div>
+            <div class="toggle-panel toggle-right">
+              <h1>Hello, Friend!</h1>
+              <p>
+                Ready to get started? Click 'Sign Up' to create your account and
+                unlock all the features.
+              </p>
+              <button class="hidden" id="register" >
+                Sign Up
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
-    <script src="../js/script.js"></script>
+    </section>
+
+       <script src="../js/script.js"></script>
   </body>
 </html>