<?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="">
<meta name="keywords" content="" />
<style>
.otpbtn {background-color:var(--background-color) !important;
    width: 90px;
    padding: 25px 0px;
    margin-left: -5px;
    margin-top: -1px;
    border-radius: 0px;
    border-radius: 33px !important;
    padding: 21px 0px;
}


    .btn {background-color:var(--background-color) !important;
    border-radius: 5px 5px 5px 5px;
    border: 0.5px solid white;
    color: white;
    transition: 0.5s;
    
}
.otbt{
    width: 95%;
    margin: 0px;
}

.form-control{
    height:43px;
    border-radius:41px;
}
 .box1{      margin: 13px 0;
    border-radius: 11px;
   /* background: linear-gradient(104.27deg, #1D123A 35.79%, #FFA37B 136.37%);*/} 
.logo-banner img{   height: 48px;
    position: relative;
    margin: 12px;
    background: #fff;
    padding: 0px 5px;
    border-radius: 11px;}
.logo-banner{    position: relative;
    background: #011341;
    /* background: url(assets/img/login_banner.png) no-repeat top; */
    /* background-size: cover; */
    min-height: 2.4rem;
    padding-top: 17px;}
.appHeader1{height:auto;}
.lop2 {
    color: #fff;
    margin: 0 28px;
    line-height: 14px;
    font-size: 13px;
}
.lop1 {
    color: #fff;
    margin: 0 28px;
    line-height: 14px;
    font-size: 13px;
}
.lop {
    font-size: 16px;
    padding-left: 28px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #fff;
    font-family: calibri;
}
#appCapsule {margin-top: 30px;}
.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;}
    .appHeader1 .left {
    left: 48px;
}
.left-addon input
 {
    width: 100%;
    padding-left: 22px;
    border-radius: 9px;
    height: 48px;
    background: #011341;
    color: #fff !important;
}
 @media only screen and (max-width: 600px) {
  .appHeader1{height:35px;}
  .otbt {
    width: 95%;
    margin: 0 9px;
}
.appHeader1 .left {
    left: 0px;
}
    .lgo{    width: 102px;
    margin-left: 0%;}
  .logo-banner{
    min-height: 2.4rem;
    max-height: 7.66667rem;}
  
}
    
    
</style>

</style>
</head>

<body>
<?php //include("include/connection.php");?>

         <div data-v-432e6ed0="" class="home mian game">
             
             
             <!-- App Header -->
<div class="appHeader1" style="background:none !important;box-shadow:none;">
<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>




<div class="" style="margin-top: 50px;"><!--logo-banner-->
    <!--<img class="ju" src="images/17-49-48-625.png" class="logo" >-->
    <h4 class="lop">Register</h4>
    <p class="lop1">Please register by phone number or email</p>
</div>



<!-- * App Header --> 
<!-- App Capsule -->
<div id="appCapsule">
  <div class="appContent1 mb-2">
      
      <div class="box1">
          <form style="padding: 25px;" action="registerNow.php" method="post">
    
      <div class="inner-addon left-addon">
      <!--<i class="icon ion-md-phone-portrait"><a style="font-size:16px; color:#1B2C42 !important;height:50px !important;">+91</a></i>-->
            <div class="starr">
              <img style="width:30px;" src="images/phicon.png">
              <p>Phone Number</p>
          </div>
        <input type="number" name="mobile" id="mobile"  class="form-control" placeholder="Mobile Number" value="" maxlength="10" required>
     
      </div>
      
      <div class="inner-addon left-addon">
      <!--<i class="icon ion-md-key"></i>-->
       <div class="starr">
              <img style="width:30px;" src="images/lockicn.png">
              <p>Password</p>
          </div>
        <input type="password" name="password" id="password" class="form-control" placeholder="Password"required>
      </div>
      <div class="inner-addon left-addon">
      <!--<i class="icon ion-ios-gift"></i>-->
       <div class="starr">
              <img style="width:30px;" src="images/inviteIc.png">
              <p>Invite Code</p>
          </div>
        <input type="text" name="rcode" id="rcode" class="form-control" value="<?php if(isset($_GET['code'])){echo $_GET['code']; }?>" placeholder="Recommendation Code">
      </div>
      <input type="hidden" name="action" value="register">
     <!-- <div class="form-group row mt-3 mb-3">
                    <div class="col-12">
                        <div class="custom-control custom-checkbox">
    <input type="checkbox" checked class="custom-control-input" id="remember" name="remember">
  <label class="custom-control-label text-muted" for="remember">I agree <a data-toggle="modal" href="#privacy" data-backdrop="static" data-keyboard="false">PRIVACY POLICY</a></label>
                        </div>
                    </div>
                    
                </div>-->
      <div>
      <div class="text-center mt-3">
        <input type="submit" class="hover2"  id="submit" style="width:100%; color:#fff; background-color:var(--background-color) !important;" value="Register">
        </div>
        <div class="text-center mt-3">
        
        <a style="color:#ccc;border:1px solid #00ecbe;width:100%;background:transparent;" class="hover2" href="login">I have an account <span style="color:#00ecbe;">Login</span></a>
        </div>
      </div>
    </form>
      </div>

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


 <script>
        function myFunction()
        {
         var value = document.getElementById("mobile").value;  
        //alert(value);
         if((value!=null) && (value.length =='10'))
         {
         $.ajax({
                        url: 'number_search.php',
                        method: 'POST',
                        data: {
                            value: value
                        },
                        success: function (data) {
                          if(data>=1)
                          {
                             alert('mobile number already exit') 
                             document.getElementById("submit").disabled = true;
                             

                          }else{
                              
                               var timeleft = 120;
                        var downloadTimer = setInterval(function(){
                         timeleft--;
                       document.getElementById("reg_otp").textContent = 'Wait'+' '+ timeleft +' '+'s';
                       
                       if(timeleft >= 0)
                       {
                          document.getElementById("reg_otp").disabled = true; 
                       }
                       if(timeleft <= 0)
                       {
                       clearInterval(downloadTimer);
                       document.getElementById("reg_otp").disabled = false; 
                       }
                         },1000);
                          }
                        }
                            });
         }else{
             alert('Please Enter Valid Number');
         }
        }
      </script>





<div id="registerthanksPopup" class="modal fade" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content ">
      <div class="modal-body">
        <div class="text-center">
          <h5>Thank you !</h5>
          <h6>Your account has been created successfully....</h6>
          <div class="text-center">
<button type="button" class="btn btn-sm btn-primary" onClick="window.location='';">OK</button></div>
        </div>
      </div>
    </div>
  </div>
</div>
<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>
<div id="privacy" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
    <div class="modal-header">
    <h5 style="font-weight:normal;">Privacy Policy</h5>
              </div>
      <div class="modal-body responsive">
      <?php echo content($con,"privacy");?>

      </div>
      <div class="modal-footer">
    <a class="pull-left" data-dismiss="modal"><strong>CLOSE</strong></a>
              </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function checkFunction(val){
      
      var value= val;
      
       $.ajax({
                        url: 'otp_valied.php',
                        method: 'POST',
                        data: {
                            value: value
                        },
                        success: function (data) {
                          alert(data);
                          if(data == 'success')
                          {
                           document.getElementById("submit").disabled = false;   
                          }else{
                              document.getElementById("submit").disabled = true;  
                          }
                        }
                            });
      
}
    </script>
    <script type="text/javascript" src="general.js"></script>

<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>