

<!DOCTYPE html>
<html>
<head>
  <title>Login Page</title>
   <!--Made with love by Mutiullah Samim -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
    

  <link rel="stylesheet" type="text/css" href="styles.css">
 



</head>
<body  >


      <?php include 'heder.php';?>
      <br><br><br><br><br><br>
<center>
    <div class=" container"  >

        <div class="col-lg-8 m-auto d-block" style=" border-radius: 10px;font-family:Rockwell;font-size: 20px; 
        background-color: #4682B4 ;">
       <br>
    <a href="signin.php" class="float-right btn btn-primary" style=" font-size: 30px;text-align:center;">Sign Up</a>
    <h1 class="text-red" style="text-align: center;color:#8B0000;font-family:Monotype Corsiva;font-size: 50px;"><b>Login  </b></h1>

       
            <form method="POST" action="event3.php">
                <div class="form-group row col-lg-10">
                    <label for="user" style="font-size: 20px; color: black "> Username: </label>
                    <input type="text" name="username" placeholder="Username" id="Username" class="form-control" minlength="5" maxlength="8" autocomplete="off" required>
                    <h5 id="usercheck" ></h5>
                </div>
                <div class="form-group  pass_show row col-lg-10">
                    <label for="password" style="font-size: 20px; color: black "> password: </label>
                    <input type="password" placeholder="********" name="password" id="password" class="form-control" maxlength="8" minlength="8" autocomplete="off" required>  
                
                <h5 id="passcheck"></h5>
                </div>

                   <div class="form-group row col-lg-10">
            
        <label for="email"  style="font-size: 20px; color: black ">Role:</label>
        <select class="form-control" name="role" id="role" required>
          <option value="" hidden="">---select---</option>
         <option >Customer</option>
          <option >Admin</option>
         </select>
      </div>
                 

            
                <input type="submit" name="submit" id="submitbtn" value="submit" class="btn btn-primary" style="text-align: center; font-size: 30px">
                
            </form>
            <a href="forgot_password.php" style="text-align: center; color: white">Forgot Password?</a>
            <br>
        </div>
    </div></center>
    <br>
     <div class="jumbotron" style="margin-top: 0px;background-color:#2980B9;  margin-bottom: 0px;">
    <div class="container" style="margin-top: 30px;">
      <p id="abt-ftr" style="color: white">@ Copyright 2019-2020 www.bi_lal.com. All rights reseerved. Developed by <span style="color:black;">Saurabh Salvi</span> &nbsp;<span style="color: white;"> Privacy policy &#10072; Disclaimer</span></p>
    </div>
  </div>
  </div>
<script type="text/javascript">
    $(document).ready(function(){
            $('usercheck').hide();
            $('passcheck').hide();
    
            

            var user_err =true;
            var pass_err =true;
         
            

            $('#Username').keyup(function(){
                Username_check();
            });
            function Username_check(){
                var user_val =$('#Username').val();

                if (user_val.length == '') {
                    $('#usercheck').show();
                    $('#usercheck').html("**Please Fill the Username");
                    $('#usercheck').focus();
                    $('#usercheck').css("color","DarkRed ");
                    user_err =false;
                    return false;
                } else {
                    $('#usercheck').hide();
                }
                  if ((user_val.length <5) || (user_val.length >8)) {
                    $('#usercheck').show();
                    $('#usercheck').html("**Username length must be between 5 and 8");
                    $('#usercheck').focus();
                    $('#usercheck').css("color","DarkRed ");
                    user_err =false;
                    return false;
                } else {
                    $('#usercheck').hide();
                }
            }
            $('#password').keyup(function(){
                password_check();
            });
            function password_check(){
                var passwrdstr =$('#password').val();

                if (passwrdstr.length == '') {
                    $('#passcheck').show();
                    $('#passcheck').html("**Please Fill the password");
                    $('#passcheck').focus();
                    $('#passcheck').css("color","DarkRed ");
                    pass_err =false;
                    return false;
                } else {
                    $('#passcheck').hide();
                }
                if ((passwrdstr.length =='8')) {
                    $('#passcheck').show();
                    $('#passcheck').html("**password length  8");
                    $('#passcheck').focus();
                    $('#passcheck').css("color","DarkRed ");
                    pass_err =false;
                    return false;
                } else {
                    $('#passcheck').hide();
                }

            }
             
          
                
            
            $('#submitbtn').click(function(){
                var user_err =true;
                var pass_err =true;
               
               

                Username_check();
                password_check();
            
              

                if ((user_err == true) && (pass_err == true)  ) {
                    return true;
                } else {
                    return false;
                }
            });

            

    });
    function myFunction() {
  var x = document.getElementById("password");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
</script>



</body>
</html>