EVOLUTION-NINJA

Edit File: login.php

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Login</title>
  
  <link rel="stylesheet" type="text/css"  href="<?php echo base_url('assets/css/font-awesome.min.css');?>" />
  
  <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('assets/css/bootstrap4.min.css'); ?>" />
  <link rel="stylesheet" href="<?php echo base_url('assets/toastr/toastr.min.css');?>" />
  <script src="<?php echo base_url('assets/js/jquery-3.3.1.min.js');?>"></script>
  <script src="<?php echo base_url('assets/js/bootstrap4.min.js');?>"></script>
  <script src="<?php echo base_url('assets/toastr/toastr.min.js');?>"></script>
</head>
<body>
  <div class="home">
    <div class="container">
      <div class="row">
        <div class="col-sm-2 col-md-3 col-lg-3">
      
        </div>
        <div class="col-sm-8 col-md-6  col-lg-6">
          <form class="login">
           <img src="<?php echo base_url('assets/images/mmg_logo.png');?>" class="img-fluid d-block mx-auto">
            <div class="form-group">
              <label for="phone">Phone</label>
              <input type="phone" class="form-control" placeholder="Enter phone Number" name="phone">
            </div>
            <div class="form-group">
              <label for="pwd">Password</label>
              <input type="password" class="form-control" placeholder="Enter password" name="password">
            </div>
           
          
            <div class="home_but">
              <button type="submit" class="btn btn-primary">Login</button>
            </div>
          </form>
        </div>
        <div class="col-sm-2 col-md-3 col-lg-3">
          
        </div>
      </div>
    </div>
    
  </div>
</body>
<script type="text/javascript">
$(document).ready(function(){

$('.login').submit(function(e){    
  
    e.preventDefault();

formdata = new FormData($(this)[0]);        
       
      $(".submit").attr('disabled', 'disabled');
      $(".submit").text("Submitting...");           
      $.ajax({
    
          type   : 'post',
          url    : '<?php echo site_url("login")?>',
          data   : formdata,
          contentType: false,
          processData: false,
                                            
          success:function(response){
              response=jQuery.parseJSON(response);
              console.log(response);

if(response.result == 1)
              {
                  toastr["success"](response.message);
                  setTimeout(function wait(){
                       window.location.href="<?php echo site_url('admin-dashboard/');?>"+response.role_id;
                   }, 1500);    
                  $('.login')[0].reset();
                  $(".submit").text("Submit");    
                  $(".submit").removeAttr('disabled'); 
                  
              }
              else  
              {
                  toastr["error"](response.message);
                  $(".submit").text("Submit"); 
                  $(".submit").removeAttr('disabled');               
              }
          }
      });      
  });
 });
</script>
<style type="text/css">
  .login-cont{
    height: 100vh;
    padding-top: 5%;
    /*//background-color: #E4E9FF;*/
    /*background-image: url('<?php echo base_url('assets/images/login_bg.jpg');?>');*/
    /*border:20px solid #00800047;*/
  }
  .login-form{
    background-color: white;
    padding: 60px 50px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px #CED5FF;
    position: relative;
  }
  .login-logo{
    margin-bottom: 40px;
  }
  .no-pad1{
    padding-right: 0!important;
  }
  .no-pad2{
    padding-left: 0!important;  
  }
  .login-form input{
    border-radius: 0!important;
    border-right: none!important;
    border-left: none!important;
    border-top: none!important;
    border-color: #9CA5BA!important;
    border-bottom-width: 2px!important;
    box-shadow: none!important;
  }
  .login-form label{
    color: #6c757d;
  }
  .for-pass{
    text-align: right;
    font-size: 12px;
    margin: 15px 0px;
  }
  .for-pass a{
    color: #6c757d;
  }
  .for-pass a:hover{
    text-decoration: none;
  }
  .log-button{
    text-align: center;
    position: absolute;
      bottom: -25px;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform:translateX(-50%);
  }
  .log-button button{
    padding: 14px 34px;
    background-color: #2043B0;
    color: #fff;
    border:none;
    letter-spacing: 5px;
    border-radius: 32px;
    outline: none;
  }
  @media only screen and (min-width: 992px) and (max-width: 1258px){
    .login-cont{
      padding-top: 32%;
    }
  }
  @media only screen and (min-width: 641px) and (max-width: 991px){
    .login-form{
      padding: 30px;
      margin-top: 0;
    }
    .login-cont{
      padding-top: 30%;
    }
  }
  @media only screen and (min-width: 320px) and (max-width: 640px){
    .no-pad1{
      padding-right: 15px!important;
    }
    .no-pad2{
      padding-left: 15px!important;
    }
    .login-img{
      display: none;
    }
    .login-form{
      margin-top: 20%;
    }
  }
</style>
<style type="text/css">
  .home form{
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20%;
    /*margin-bottom:120px;*/
     
  }
  .home form input{
    border-top:none;
    border-left: none;
    border-right: none;
    border-radius: initial;
  }
  .home button{
    text-align: center;
    border-radius: 25px;
    padding-top: 3px;
  }
  .home p{
    text-align: right;
  }
  .home_but{
    text-align: center !important;
    margin-bottom: -37px !important;
  }
  .home{
    background: url('<?php echo base_url('assets/images/login_bg4.jpg');?>') no-repeat center center /cover;
    height: 100vh;
  }
  .home form h3{
    padding-bottom: 20px;
  }
  @media only screen and (min-width: 320px) and (max-width: 640px){
      .home form{
        margin-top: 155px;
      }
  }
  @media only screen and (min-width: 641px) and (max-width: 991px){
      .home form{
        margin-top: 346px;
      }
  }
  @media only screen and (min-width: 992px) and (max-width: 1258px){
     
  }
</style>