<?php
ob_start();
session_start();
?>
<!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">
<link rel="stylesheet" href="assets/css/main.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">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

<style>
body{font-family: "Montserrat", sans-serif;}
    .btn { background-color: var(--background-color);
    border-radius: 5px 5px 5px 5px;
    border: 0.5px solid white;
    color: white;
    transition: 0.5s;
    
}
.appHeader1 .left{left:48px;}
    .left-addon input {
       width: 100%;
    padding-left: 22px;
    border-radius: 9px;
    height: 48px;
    background: #011341;
    color: #fff !important;
    }
.appHeader1{height:auto;}
.logo-banner{    position: relative;
    background: #011341;
    /* background: url(assets/img/login_banner.png) no-repeat top; */
    /* background-size: cover; */
    min-height: 3.4rem;
    padding-top: 17px;}
.lop2 {
    color: #fff;
    margin: 0 27px;
    line-height: 14px;
    font-size: 13px;
}
.lop1 {
    color: #fff;
    margin: 0 27px;
    line-height: 14px;
    font-size: 13px;
}
.lop {
    font-size: 16px;
    padding-left: 27px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #fff;
    font-family: calibri;
}
.logo-banner img{    height: 48px;
    position: relative;
    margin: 12px;
    background: #fff;
    padding: 0px 5px;
    border-radius: 11px;}
    .card-body{padding: 25px 20px;}
   .box1{      margin: 13px 0;
    border-radius: 11px;
   /* background: linear-gradient(104.27deg, #1D123A 35.79%, #FFA37B 136.37%);*/} 
.home[data-v-432e6ed0] {
    padding-bottom: 16.13333rem;
}
.ju{    width: 83%;
    height: 90px;
    background: #fff;
    padding: 0 10px;
    margin-left: 34px;
    border-radius: 11px;}
.lgo{    width: 102px;
    margin-left: 60%;}
.starr{    display: flex;
    align-items: center;
    justify-content: start;
    gap: 14px;  
    margin-bottom: 10px;
}
.starr p{    font-size: 17px;
    color: #fff;}
@media only screen and (max-width: 600px) {
    .appHeader1 .left {
    left: 0px;
}
    .lgo{    width: 102px;
    margin-left: 0%;}
    .appHeader1{height:35px;}
  .logo-banner{
    min-height: 2.4rem;
    max-height: 7.66667rem;}
}
</style>
</head>

<body style="background: #05012b;">


 <div data-v-432e6ed0="" class="home mian game">
     
     
<!-- App Header -->
<div class="appHeader1" style="background:none !important;box-shadow:none !important;">
<div class="left">
            <a href="#" onClick="goBack();" class="icon goBack">
                <i class="icon ion-md-arrow-back"></i>
            </a>
            <div class="pageTitle"></div>
           <img class="lgo" src="img/2.png" alt="">
        </div>
 
 
</div>
<!-- * App Header --> 


<div class="" style="margin-top: 80px;"><!--logo-banner-->
    
    <h4 class="lop">Login</h4>
    <p class="lop1">Please log in with your phone number or email</p>
    <p class="lop2">If you forget your password, please contact customer service</p>
</div>


<!-- App Capsule -->
<div id="appCapsule">
  <div class="appContent1">
      
      <div class="box1">
           <form action="#" id="loginForm" method="post" class="card-body" autocomplete="off">
      <div class="inner-addon left-addon">
          <div class="starr">
              <img style="width:30px;" src="images/phicon.png">
              <p>Phone Number</p>
          </div>
          
      <!--<i class="icon ion-md-phone-portrait"></i>-->
        <input type="tel" id="login_mobile" name="login_mobile" class="form-control" placeholder="Mobile Number" onKeyPress="return isNumber(event)"  maxlength="10">
      </div>
      <div class="inner-addon left-addon">
          <div class="starr">
              <img style="width:30px;" src="images/lockicn.png">
              <p>Password</p>
          </div>
          
      <!--<i class="icon ion-md-key"></i>-->
        <input type="password" id="login_password" name="login_password" class="form-control" placeholder="Password">
      </div>
      <input type="hidden" name="action" value="login">
      <div>
      <div class="text-center mt-3">
        <button style="width:100%;" type="submit" class=" hover2"> Login </button>
        </div>
        <div class="text-center mt-2">
        <a href="signup" style="color:#00ecbe;border:1px solid #00ecbe;width:100%;background:transparent;" class=" hover2">Register</a>
        <!--<a  href="forgot-password.php" style="width:100%;margin-top:6px;" class=" hover2">Change Password</a>-->
        </div>
      </div>
    </form>
      </div>

   
  </div>
</div>
<!-- appCapsule -->
     
     </div>

<!-- * Page loading --> 




<div id="registertoast" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content ">
      <div class="modal-body">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
       <span aria-hidden="true">×</span></button>
        <div class="text-center" id="regtoast">          
        </div>
      </div>
    </div>
  </div>
</div>
<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>

</body>
</html>