<?php
ob_start();
session_start();
include("include/connection.php");
require('cookie.php');
if( isset($_SESSION['userid']) ){
  header('Location: mine.php');
  exit(12);
}else if( isset($_COOKIE['rememberme']  )){
    
 
    $userid = decryptCookie($_COOKIE['rememberme']);
    
    $sql_query = "select count(*) as cntUser,tbl_user.* from tbl_user where id='".$userid."'";
    $result = mysqli_query($con,$sql_query);
    $row = mysqli_fetch_array($result);

    $count = $row['cntUser'];

    if( $count > 0 ){
        $_SESSION['userid'] = $userid; 
      header('Location: mine.php');
       exit(456);
    }
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<?php include'head.php' ?>
<link rel="stylesheet" href="assets/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="description" content="Bitter Mobile Template">
<meta name="keywords" content="bootstrap, mobile template, bootstrap 4, mobile, html, responsive" />

<style>
    .btn { background-color: #F5F5F5;
    border-radius: 5px 5px 5px 5px;
   font-weight:400;
    color: black;
    transition: 0.5s;
   
    
}
      .btndiv
      {
          padding: 15px 0 0 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
      }
     .btn1 { width: 240px;
     
    height: 44px;
    text-align: center;
    line-height: 44px;
    background: #009688;
    font-size: 14px;
    color: #fff;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
    transition: .3s cubic-bezier(.25,.8,.5,1),color 1ms;
    
}
   
    .btn-login{ 
        background-color:#009688;
        border-radius: 2px;
        border: 0;
        color: white;
        transition:.3s cubic-bezier(.25,.8,.5,1),color 1ms;
        font-size:14px;
        box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
        width:100%;
        max-width:240px;
        font-weight:400;
        margin:0;
        margin-top:25px;
    }
    .btn.btn-comman {
        background: #f5f5f5;
        font-weight: 400;
        font-size: 14px;
        height: 40px;
        padding: 0 15px;
        margin-top:40px;
    }
    .inner-addon.left-addon.kk{
        position:absolute;
        left:44px;
        top:14px;
        font-size:16px;
    }
    .qq{
        position:absolute;
        left:44px;
        top:14px;
        font-size:16px;
    }
    .btn-login:hover{
        color:#fff;
    }
    .inner-addon{
        color:#757575;
        position:relative;
    }
    .left-addon input{
        padding-left:45px;
    }
    .inner-addon{
        margin-bottom:30px;
    }
    .appHeader1{
        height:56px;
    }
    .appHeader1 .left{
    display: flex;
    flex-direction: row;
    align-items: center;
    }

    .goBack img {
        width: 20px;
        height: 20px;
        margin-right: 23px;
    }
    .card-body{
        padding:5px;
    }
    .inner-addon .icon{
        padding:15px 12px;
        font-size: 22px;
    }
    /*.left-addon.custom-left  input{*/
    /*    padding-left:40px;*/
    /*}*/
    .number-img img{
        position: absolute;
        width: 100%;
        height: 100%;
        max-width: 20px;
        max-height: 20px;
        top: 15px;
        left: 13px
    }
  
    #login_password {
        padding-left: 45px;
    }
    .btn.btn-comman{
        margin: 40px 4px;
    }
    #toast {
        background: rgba(50,50,51,.88);
        color: #fff;
        padding: 8px 12px;
        border-radius: 8px;
        text-align: center;
        margin: 0 auto;
        margin-top: -140px;
       font-size: 14px;
       width: 100%;
       max-width: 231px;
        visibility: hidden;
        z-index: 1;
        /*transform: translate3d(-50%,-50%,0);*/
    }
   #toast.show {
      visibility: visible;
      -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
      animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }
    
    @-webkit-keyframes fadein {
      from {bottom: 0; opacity: 0;} 
      to {bottom: 30px; opacity: 1;}
    }
    
    @keyframes fadein {
      from {bottom: 0; opacity: 0;}
      to {bottom: 30px; opacity: 1;}
    }
    
    @-webkit-keyframes fadeout {
      from {bottom: 30px; opacity: 1;} 
      to {bottom: 0; opacity: 0;}
    }
    .modal-backdrop{
      background-color: transparent;
    }
    
    @keyframes fadeout {
      from {bottom: 30px; opacity: 1;}
      to {bottom: 0; opacity: 0;}
    } 
    .textbox{
    width: 100%;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
    padding: 0 12px;
    box-sizing: border-box;
    line-height: 48px;
    background: #fff;
    border-radius: 2px;
    margin-bottom: 35px;
    }
    .two_btn
    {
    width: 240px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 25px;
    }
    .graybttn
    {
        padding: 0 15px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #f5f5f5;
    font-size: 14px;
    color: black;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
    transition: .3s cubic-bezier(.25,.8,.5,1),color 1ms;
    }
    .graybttn:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: black;
    pointer-events: none;
    background-image: radial-gradient(circle,#666 10%,transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10);
    opacity: 0;
    transition: transform .3s,opacity .5s;
}

     .modal{
        top:45%;
    }
  body{position: fixed;}  
</style>

</head>

<body>


<!-- App Header -->
<div class="appHeader1" style="background-color:#009688 !important">
<div class="left">
            <a href="#" onClick="goBack();" class="icon"> <i class="icon ion-md-arrow-back"></i> </a>
             <p style="color: #fde73c" class="pageTitle">BigDreams Color <img style="width:30px;marging-left:10px" src="./assets/img/logo.png"></p>
        </div>
 
 
</div>
<!-- * App Header --> 
<!-- App Capsule -->
<div id="">
  <div style="margin:15px" >

    <form action="#" id="loginForm" method="post" class="card-body" autocomplete="off">
       <div class="inner-addon left-addon custom-left">
              <div class="number-img">
                    <img src="./images/icons/mobile-img.png">
                 
                </div>
         
          <input type="tel" value="<?php echo @$_GET['mobile'];?>" id="login_mobile" name="login_mobile"  class="form-control textbox" minlength="13" maxlength="13" placeholder=" Mobile Number">
          </div>
          <div class="inner-addon">
         
             <div class="number-img">
            <img src="./images/icons/key-img.png">
        
          </div>
            <input type="password" value="<?php echo @$_GET['password'];?>" id="login_password" name="login_password" class="form-control textbox" minlength="5"  placeholder="Password">
          </div>
          <input type="hidden" name="action" value="login">
          <div>
      <input type="hidden" name="action" value="login">
      <div>
      <div class="text-center btndiv">
        <button type="submit" class="btn1" style=""> Login </button>
        </div>
        <div class="btndiv">
            <div class="two_btn"> 
            <a href="register.php" style="color: black;" class="graybttn">Register</a>
             <a href="forgot-password.php" style="color: black;" class="graybttn">Forgot Password?</a>
            </div>
       
        </div>
      </div>
    </form>
  </div>
</div>  
<style>
   
    .regLog{
        width: fit-content;
        margin: 0 auto;
        display: table;
        
    }
    .regContent {
        margin: 0 auto;
        padding: 0 !important;
        color: #fff;
    font-size: 14px;
    background-color: rgba(50, 50, 51, .88);
    border-radius: 8px;
    }
    .fade1 {

   -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
      animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }
    
    @-webkit-keyframes fadein {
      from {bottom: 0; opacity: 0;} 
      to {bottom: 30px; opacity: 1;}
    }
    
    @keyframes fadein {
      from {bottom: 0; opacity: 0;}
      to {bottom: 30px; opacity: 1;}
    }
    
    @-webkit-keyframes fadeout {
      from {bottom: 30px; opacity: 1;} 
      to {bottom: 0; opacity: 0;}
    }
    
    @keyframes fadeout {
      from {bottom: 30px; opacity: 1;}
      to {bottom: 0; opacity: 0;}
    }

    .modal-backdrop{
      background-color: transparent;
    }
    
</style>
<div id="registertoast" class="modal fade1" role="dialog">
   <div class="modal-dialog regLog" role="document">
    <div class="modal-content regContent">
      <div class="modal-body">
        <div class="text-center" id="regtoast">
      </div>
    </div>
  </div>
</div>
</div>
<!-- appCapsule -->

<?php include("include/footer.php");?>

<script src="assets/js/lib/jquery-3.4.1.min.js"></script> 
<!-- Bootstrap--> 
<script src="assets/js/lib/popper.min.js"></script> 
<script src="assets/js/lib/bootstrap.min.js"></script> 
<!-- Owl Carousel --> 
<script src="assets/js/plugins/owl.carousel.min.js"></script> 
<!-- Main Js File --> 
<script src="assets/js/app.js"></script>
<script src="assets/js/jquery.validate.min.js"></script>
<script src="assets/js/account.js"></script>
<script>$().ready(function(){
    $('#login_mobile').on('focus',function(){
         $('#login_mobile').val('+91');
      
    });
   
});</script>
<script>
  $(function(){
    $('#registertoast').on('show.bs.modal', function(){
        var registertoast = $(this);
        clearTimeout(registertoast.data('hideInterval'));
        registertoast.data('hideInterval', setTimeout(function(){
            registertoast.modal('hide');
        }, 2000));
    });
});
  

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