sachin.ganesh
/
anwi_website


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="shortcut icon" type="image/x-icon" href="./dist/assets/imgs/favicon.gif">
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./dist/css/main.css" />
    <link rel="stylesheet" href="./styles/style.css">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./libs/owlcarousel/Css/owl.carousel.min.css">
    <link rel="stylesheet" href="./libs/owlcarousel/Css/owl.theme.default.min.css">
    <link rel="stylesheet" href="./dist/css/login.css">


    <link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css">
    <link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css">
    <link rel="stylesheet" href="./dist/css/vendor/vandella.css">
    <link rel="stylesheet" href="./dist/css/vendor/jellybelly.css">
    <!-- <link rel="stylesheet" href="./dist/css/vendor/icofont.min.css"> -->
    <link rel="stylesheet" href="./dist/css/vendor/fontello.css">
    <link rel="stylesheet" href="./dist/css/plugins/easyzoom.css">
    <link rel="stylesheet" href="./dist/css/plugins/slick.css">
    <link rel="stylesheet" href="./dist/css/plugins/nice-select.css">
    <link rel="stylesheet" href="./dist/css/plugins/animate.css">
    <link rel="stylesheet" href="./dist/css/plugins/magnific-popup.css">
    <link rel="stylesheet" href="./dist/css/plugins/jquery-ui.css">
    <link rel="stylesheet" href="./dist/css/style.css">
    <link rel="stylesheet" href="./dist/css/fontawesome.all.min.css">
    <link rel="stylesheet" href="./dist/css/fontawesome.min.css">
    <title>Login | Anwi</title>
    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
        }
    </style>
</head>

<body class="login_page">
    <!-- navbar -->
    <div id="navbar-head" class="bg-white"></div>
    <!-- end-navbar -->

    <!-- main-body -->

    <section class="mainLogin h-100 mt-0 myaccount-content p-0">
        <div class="loginContainer mainLogin bg-gradient-anwi mt-0 pt-md-5 h-100 satoshi_font">
            <div class="container pt-5">
                <div class="row justify-content-center">
                 <div class="col-md-5 col-12 pt-5">
                    <form class="authBox bg-white pb-md-2 mx-auto account-details-form rounded-3">
                        <div class="formContanerAuth ">
                            <div>
                                <span class="authHeading satoshi_font text-theme-color fs-4">Login</span>
                                <!-- <span class="satoshi_font">or</span> <span class="satoshi_font authHeading text-theme-color">Signup</span> -->
                            </div>
                            <div class="space-login"></div>
                            <div>
                                <label class="text-danger fs-9 d-none" id="not_valid">Please Enter a valid Number</label>
                                <label class="text-danger fs-9 d-none" id="empt_num">Number should not be empty!</label>
                                <label class="text-danger fs-9 d-none pb-1" id="otp_valid">OTP Should not be Empty!</label>
                                <label for="user_number" class="required user_number">Mobile / Email</label>
                                <input type="text" class="form-control shadow-none border-bottom-theme rounded-0" maxlength="10" autocomplete="off" id="user_number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==10) return false;">
                            </div>
                            <div class="otp-form d-flex justify-content-between d-none pb-2">
                                <!-- <input type="text" class="form-input form-control users_otp" id="users_otp" placeholder="Please Enter your Otp"/> -->
                                <input id="users_otp1" type="password" maxlength="1" tabindex="1" autocomplete="off" name="user-otp" class="form-control shadow-none w-25 me-2"/>
                                <input id="users_otp2" type="password" maxlength="1" tabindex="2" autocomplete="off" name="user-otp" class="form-control shadow-none w-25 me-2"/>
                                <input id="users_otp3" type="password" maxlength="1" tabindex="3" autocomplete="off" name="user-otp" class="form-control shadow-none w-25 me-2"/>
                                <input id="users_otp4" type="password" maxlength="1" tabindex="4" autocomplete="off" name="user-otp" class="form-control shadow-none w-25 me-2"/>
                            </div>
                            <div class="otp_text d-none">
                                <p class="mb-0">Please enter your OTP</p>
                            </div>
                            <div class="space-login"></div>
        
                            <div class="satoshi_font">
                                <div class="text-center">
                                   By continuing, I agree to the
                                    <a href="#" class="text-theme-color text-decoration-underline fs-9">Terms of Use</a> &amp;
                                    <a href="#" class="text-theme-color text-decoration-underline fs-9">Privacy Policy</a>
                                </div>
                            </div>
                            <div class="space-login"></div>
                            <div class="single-input-item">
                                <a href="#" class="btn w-100 check-btn sqr-btn  text-white" id="get_otp">Continue</a>
                                <a href="#" class="btn w-100 btn-info text-white d-none" id="proceed">Proceed</a>
                            </div>
                            <div class="space-login"></div>
                            <div class="text-dark">Have trouble logging in? <a href="#" class="text-theme-color text-decoration-underline">Get help</a>
                            </div>
                        </div>
                    </form>
                 </div>
                </div>
            </div>
        </div>
    </section>


    <!-- footer -->
    <!-- <div id="footer-head"></div> -->
    <!-- end-footer -->
    <script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="./dist/js/jquery.min.js"></script>
    <script src="./libs/owlcarousel/js/owl.carousel.min.js"></script>
    <script src="./dist/js/auth/apiservice.js"></script>
    <script src="./dist/js/navbar.js"></script>
    <script src="./dist/js/footer.js"></script>
    <script src="./dist/js/auth/login.js"></script>
    <script src="./dist/js/vendor/modernizr-3.11.7.min.js"></script>
    <script src="./dist/js/vendor/jquery-v3.6.0.min.js"></script>
    <script src="./dist/js/vendor/jquery-migrate-v3.3.2.min.js"></script>
    <script src="./dist/js/vendor/bootstrap.min.js"></script>
    <script src="./dist/js/plugins/slick.js"></script>
    <script src="./dist/js/plugins/wow.js"></script>
    <script src="./dist/js/plugins/svg-injector.min.js"></script>
    <script src="./dist/js/plugins/jquery.nice-select.min.js"></script>
    <script src="./dist/js/plugins/mouse-parallax.js"></script>
    <script src="./dist/js/plugins/images-loaded.js"></script>
    <script src="./dist/js/plugins/isotope.js"></script>
    <script src="./dist/js/plugins/jquery-ui.js"></script>
    <script src="./dist/js/plugins/magnific-popup.js"></script>
    <script src="./dist/js/axios.min.js"></script>
    <script src="./dist/js/cookies.min.js"></script>
    <script src="./dist/js/fontawesome.all.js"></script>
    <script src="./dist/js/fontawesome.min.js"></script>
    <!-- Main JS -->
    <script src="./dist/js/main.js"></script>

    <script>
        $("#get_otp").click(function(){
            let empty_num = $("#user_number").val();
            if(empty_num !== "" ){
                $("#empt_num").removeClass("d-none");
                $("#not_valid").addClass("d-none");
            }
            else if(empty_num.length >= 9){
                $("#empt_num").addClass("d-none");
                $("#not_valid").removeClass("d-none");
            }
            else{
                $("#empt_num").addClass("d-none");
                $("#not_valid").addClass("d-none")
                $(this).addClass("d-none");
                $("#user_number").addClass("d-none");
                $(".user_number").addClass("d-none");

                $(".otp-form").removeClass("d-none");
                $(".otp_text").removeClass("d-none");
                $("#proceed").removeClass("d-none");
            }
        });
        $("#proceed").click(function(){

            $(".otp-form").find("input").each(function(){
                let otp_val = $(this).val();
                if(otp_val !== ""){
                    $("#otp_valid").removeClass("d-none");
                }else{
                    $("#otp_valid").addClass("d-none");
                    window.location.href = `/myaccount.html`;
                }
            })
            
        });

        $('.otp-form').find('input[type="password"]').on('keyup', function (e) {
            if (this.value.length >= this.maxLength) {
              if (e.keyCode !== 9 && e.keyCode !== 16) {
                var tabIndex = this.tabIndex + 1;
                $('.otp-form').find("input[tabindex='" + this.tabIndex + "']").val(this.value);
                $('.otp-form').find("input[tabindex='" + tabIndex + "']").focus();
              }
            }
            else {
              if (e.keyCode === 8) {
                var tabIndex = this.tabIndex - 1;
                $('.otp-form').find("input[tabindex='" + tabIndex + "']").focus();
              }

            }
          });
    </script>
</body>

</html>