<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="logincode.php">
    <title>login</title>
</head>
<style>
    * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: whitesmoke;
    transition: 0.5s;
    
}
body.active {
    background:whitesmoke;
}
.container {
    position: relative;
    width: 800px;
    height: 500px;
    margin: 20px;

}
.blueBg {
    position: absolute;
    width: 100%;
    top: 40px;
    height: 420px;
    background: rgba(255,255,255,0.2);
    box-shadow:0 5px 45px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    display: flex;
    flex-direction: column;
}

.blueBg .box {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:gray;
}

.blueBg .box  h2 {
    color:whitesmoke ;
    font-size: 1.2rem;
    font-weight: 600;
}
.blueBg .box button {
     cursor: pointer;
     padding: 15px 32px;
     color: #333;
     background: rgb(209, 211, 189);
     font-size: 15px;
     font-weight: 600;
     border: none;
}
.formBx {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: white;
    z-index: 1000;
    display: flex; 
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 45px rgba(0,0,0, 0.25);
    transition: 0.5s ease-in-out;
    overflow: hidden;
    border-radius: 10px;
}
.formBx.active {
    left: 50%;
}
.formBx .form {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 50px;
    transition: 0.5s;
}

.formBx.active .signInForm {
    left: -100%;
    transition-delay: 0s;
}
.formBx .signInForm {
    transition-delay: 0.10s;
}

.formBx .signUpForm {
    left:100%;
    transition-delay: 0s;
} 
.formBx.active .signUpForm {
    left: 0;
}

.formBx .form form {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.formBx .form form h3 {
    font-size: 2.2rem;
    color: #333;
    margin-bottom: 22px;
    font-weight: 600;
    text-align: center;
}
.formBx .form form input  {
    width: 100%;
    margin-bottom: 20px;
    padding: 12px;
    outline: none;
    border: 1px solid #333;
}
.formBx .form form input[type="submit"] {
    background: gray;
    border: none;
    color: whitesmoke;
    cursor: pointer;
}
.formBx.active .signUpForm input[type="submit"] {
    background: gray;
}
.formBx .form form .forgot {
    color: #333;
    text-align: center;
}

@media (max-width:991px) {
    .container {
        max-width: 400px;
        height: 650px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .container .blueBg {
        top: 0;
        height: 100%;
    }
    .formBx {
        width: 100%;
        height: 500px;
        top: 0;
        box-shadow: none;
    }
    .blueBg .box {
        position: absolute;
        width: 100%;
        height: 150px;
        bottom: 0;
    }
    .box.signin {
        top:0;
    }
    .formBx.active {
        left: 0;
        top: 150px;
    }

}
input{
    background-color: whitee;
}
small{
    margin-top:-10px;
    color: red;
    display: none;
}
</style>
<body>
    <div class="container">
        <div class="blueBg">
            <div class="box signin">
                <h2>Already Have an Account?</h2> <br>
                <button class="signIn">Sign In</button>
            </div>

            <div class="box signup">
                <h2>Don't Have an Account?</h2><br>
                <button class="signUp">Sign Up</button>
            </div>
        </div>
        <div class="formBx">
            <div class="form signInForm">
                <form action="logincode.php" onsubmit="return valog()" method="POST">
                    <h3>Sign In</h3>
                    <small class="error">Username or Password incorrect</small>
                    <input type="text" placeholder="Username" id="user" name="user2" />
                    <input type="password"id="pass" placeholder="Password" name="pass2" />
                    <input type="submit"  name="submit" id="login" value="Login" />
                    <a href="#" class="forgot">Forgot Password</a>
                </form>
            </div>


            <div class="form signUpForm" >
                <form action="signup.php" onsubmit="return validate()" method="POST" >
                    <h3>Sign Up</h3>
                    <small class="error">Input Username</small>
                    <input type="text" placeholder="Username" id="username" name="user" />
                    <small class="error">Input Email</small>
                    <input type="email" placeholder="Email Address" id="email" name="mail" />
                    <small class="error">Input Password</small>
                    <input type="password" placeholder="Password" id="password" name="pass"/>
                    <small class="error">Password does not match</small>
                    <input type="password" placeholder="Confirm Password" id="password2" />
                    <input type="submit" value="Register"/>
                </form>
            </div>
     
    </div>

    <script>
        const signIn=document.querySelector('.signIn');
        const signUp=document.querySelector('.signUp');
        const formBx=document.querySelector('.formBx');
        var body=document.querySelector('body');
        var username =document.getElementById('username')
        var email =document.getElementById('email')
        var error = document.getElementsByClassName('error')
        var password =document.getElementById('password')
        var password2 =document.getElementById('password2')
        var user =document.getElementById('user')
        var pass =document.getElementById('pass')


        //for sliding
        signUp.onclick= function () {
            formBx.classList.add('active');
        }

        signIn.onclick= function () {
           formBx.classList.remove('active');
        }
      function validate(){
        if (username.value.trim() == ""){
            error[1].style.display = "block";
            username.style.border = "1px solid red";
            username.focus()
            return false;
        }
       
        if(email.value.trim() == ""){
                error[2].style.display = "block";
                email.style.border = "1px solid red";
                email.focus();
                return false;
    }
    if(password.value.trim() == ""){
            password.style.border = "1px solid red";
            error[3].style.display = "block";
            password.focus();
            return false;
    }
   else if(password.value.length < 6){
        password.style.border = "1px solid red";
        error[3].style.display = "block";
        error[3].innerHTML = "Password must not be less than 6 Characters";
        password.focus();
        return false;
    }
 
    if (password2.value !== password.value){
        password2.style.border = "2px solid red";
        error[4].style.display = "block";
        password2.focus();
        return false;
    }
else{
 alert('You Been Successfully Registered')
    }
}

            function valog(){
                if (user.value.trim() == ""){
            error[0].innerHTML = "Username cannot be empty";
            error[0].style.display = "block";
            user.style.border = "1px solid red";
            user.focus()
            return false;
        }
        if(pass.value.trim()==""){
            error[0].innerHTML = "Password cannot be empty";
            error[0].style.display = "block";
            pass.style.border = "1px solid red";
            pass.focus()
            return false;
        }
  
    }
        user.onkeyup =function(){ if (user.value.trim() !== ""){
            error[0].style.display = "none";
            user.style.border = "1px solid black ";
        }
    }  
      pass.onkeyup =function(){ if (pass.value.trim() !== ""){
            error[0].style.display = "none";
            pass.style.border = "1px solid black ";
        }
    } 

      username.onkeyup =function(){ if (username.value.trim() !== ""){
            error[1].style.display = "none";
            username.style.border = "1px solid black ";
        }
    } 
    email.onkeyup =function(){ if (email.value.trim() !== ""){
            error[2].style.display = "none";
            email.style.border = "1px solid black ";
        }
    }
     password.onkeyup =function(){ if (password.value.trim() !== ""){
            error[3].style.display = "none";
            password.style.border = "1px solid black ";
        }
    }
     password2.onkeyup =function(){ if (password2.value.trim() !== ""){
            error[4].style.display = "none";
            password2.style.border = "1px solid black ";
        }
    }

    </script>
</body>
</html>