파일
anwi_website/login.html
T
2023-04-24 12:50:08 +05:30

612 라인
41 KiB
HTML

<!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="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/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.css" />
<!-- <link rel="stylesheet" href="./dist/css/fontawesome.min.css" /> -->
<!-- <link rel="stylesheet" href="./libs/toaster/toastr.js" /> -->
<link rel="stylesheet" href="./dist/toaster/toastr.css" />
<title>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="container">
<div class="spinner d-flex justify-content-center align-items-center">
<div class="spinner-border d-none" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<div class="loginContainer mainLogin bg-gradient-violet mt-0 pt-md-5 h-100 satoshi_font d-flex align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-4 ">
<div class="card p-4 shadow rounded-3">
<a href="index.html" class="text-center mx-auto mb-5 mt-2"><img src="../dist/assets/imgs/anwi-logo-1.png" alt="logo" class="w-50"></a>
<div class="alert alert-danger error_msg " role="alert" style="font-size:12px;display:none"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.2646 3.41366C11.7212 3.15681 12.2788 3.15681 12.7354 3.41366L19.2354 7.06991C19.7077 7.33558 20 7.83536 20 8.37727V15.6227C20 16.1646 19.7077 16.6644 19.2354 16.9301L12.7354 20.5863C12.2788 20.8432 11.7212 20.8432 11.2646 20.5863L4.76461 16.9301C4.29229 16.6644 4 16.1646 4 15.6227V8.37727C4 7.83536 4.29229 7.33559 4.76461 7.06991L11.2646 3.41366Z" fill="#FF3A2E"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M11 7.4C11 7.17909 11.1791 7 11.4 7H12.6C12.8209 7 13 7.17909 13 7.4V12.6C13 12.8209 12.8209 13 12.6 13H11.4C11.1791 13 11 12.8209 11 12.6V7.4Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16Z" fill="white"></path></svg>
<span class="error_msg_res" ></span>
</div>
<div class="login_section">
<form id="login_form">
<div class="login-email-password-div">
<div class="input-group has-validation email-login-inputgroup">
<div class="form-floating py-0">
<input type="email" class="form-control shadow-none h-50p"
id="User_Email" placeholder="Enter Your Email"
autocomplete="off">
<label for="User_Email">Email address</label>
</div>
<div class="invalid-feedback">
Please enter your email.
</div>
</div>
<div class="input-group has-validation mt-3 password-login-inputgroup">
<div class="form-floating py-0" id="password-input-div">
<input type="password" class="form-control shadow-none h-50p"
id="User_password" placeholder="Password"
autocomplete="no password">
<label for="User_password">Password</label>
</div>
<div class="invalid-feedback">
Please enter your password.
</div>
</div>
<div class="my-2">
<a href="#" class="text-theme-color fs-9 fw-500" id="forgotPassword">Forgot password?</a>
</div>
<div class="fs-7 mt-2 satoshi_font">
By continuing, I agree to the
<a href="#"
class="text-theme-color text-decoration-underline fs-7 fw-600">Terms
of
Use</a>
&amp;
<a href="#"
class="text-theme-color text-decoration-underline fs-7 fw-600">Privacy
Policy</a>
</div>
<div class="mt-4 ">
<div>
<div class="btn bg-gradient-anwi w-100 loader-btn"
style="display: none;">
<span class="loader"></span>
</div>
<a href="#" class="btn bg-gradient-anwi w-100 fw-500" id="Login_btn"
type="submit">Login</a>
</div>
</div>
<div class="my-3 mt-4">
<p class="or_line"><span>or</span></p>
</div>
<div class="mt-4 mb-5">
<a href="#" class="btn bg-gradient-anwi-outline w-100 fw-500 register_sectionbtn" id="register_sectionbtn"
>Sign Up</a>
</div>
</div>
<div class="login-forgot-password-div" style="display:none">
<div
class="font-16 d-flex justify-content-end font-w600 text-darkgrey w-100 backtologin">
<!-- <span>Forgot Password?</span> -->
<a href="./login.html" class="" id="forgot_Password_Back"><span
class=" cursor-pointer text-center d-flex align-items-center"><i
class="fa-solid fa-arrow-left"></i></span></a>
</div>
<div class="email-validation">
<div class="font-14 w-100">Please enter your email address.
</div>
<div class="input-group has-validation forgot-password-inputgroup">
<div class="form-floating py-0">
<input type="email" class="form-control shadow-none h-50p"
id="forgot_User_Email" placeholder="Enter Your Email"
autocomplete="off">
<label for="forgot_User_Email">Email address</label>
</div>
<div class="invalid-feedback">
Please enter your email.
</div>
</div>
<div class="mt-3">
<div>
<div class="btn bg-gradient-anwi w-100 loader-btn"
style="display: none;">
<span class="loader"></span>
</div>
<a href="#" class="btn bg-gradient-anwi w-100 text-white fw-500"
id="forgot_password_submit" type="submit">Submit</a>
</div>
</div>
</div>
<div class="otp-validation">
<div class="otp-input-group mt-3" style="display: none;">
<div>
<h4 class="text-center">Enter OTP</h4>
<div class="text-center">we have sent an OTP to this Email
</div>
<p class="user_email text-center"></p>
<div class="otp-sent-email fw-600 text-center"></div>
</div>
<div class="d-flex my-4">
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"
name="code" maxlength="1" tabindex="1"
autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"
name="code" maxlength="1" tabindex="2"
autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"
name="code" maxlength="1" tabindex="3"
autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"
name="code" maxlength="1" tabindex="4"
autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"
name="code" maxlength="1" tabindex="5"
autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"
name="code" maxlength="1" tabindex="6"
autocomplete="off">
</div>
</div>
</div>
<div>
<div class="btn bg-gradient-anwi w-100 loader-btn"
style="display: none;">
<span class="loader"></span>
</div>
<a href="#" class="bg-gradient-anwi btn fw-500 text-white w-100"
id="Forgot_pass_proceed" type="submit">CONFIRM</a>
</div>
</div>
</div>
</div>
<div class="login-forgot-password-details-div" style="display:none">
<!-- <div
class="font-16 d-flex justify-content-between font-w600 text-darkgrey w-100 backtologin">
<span>Forgot Password?</span>
<a href="#" class=""
id="forgot_Password_Details_Back"><span
class=" cursor-pointer text-center d-flex align-items-center"><i
class="fa-solid fa-arrow-left"></i></span></a>
</div> -->
<div class="font-14 w-100 password_display">Please Enter your New Password.
</div>
<div class="input-group has-validation forgot-password-details-inputgroup">
<div class=" align-items-center d-flex form-floating position-relative py-0">
<input type="password"
class="form-control shadow-none h-50p user_pass"
id="forgot-password-input-one" placeholder="Enter New Password "
autocomplete="off">
<span class="end-0 pswd_eye me-3 position-absolute"><svg
class="svg-inline--fa fa-eye" aria-hidden="true"
focusable="false" data-prefix="fas" data-icon="eye"
role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512" data-fa-i2svg="">
<path fill="currentColor"
d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z">
</path>
</svg><!-- <i class="fa-solid fa-eye"></i> Font Awesome fontawesome.com --></span>
<label for="forgot-password-input-one">Enter New Password</label>
</div>
<div class="invalid-feedback">
Please enter your Password.
</div>
<div class="pswd_info" style="display: none;z-index: 1;">
<p>Password must contain:</p>
<ul>
<li id="chck_capital" class="invalid">At least <strong>one
capital
letter</strong></li>
<li id="chck_special" class="invalid">At least <strong>one
special
letter</strong></li>
<li id="chck_number" class="invalid">At least <strong>one
number</strong></li>
<li id="chck_length" class="invalid">At least <strong>8
characters</strong></li>
</ul>
</div>
</div>
<div
class="input-group has-validation forgot-password-details-inputgroup mt-4">
<div class="form-floating py-0">
<input type="text" class="form-control shadow-none h-50p user_pass"
id="forgot-password-input-two"
placeholder="Confirm New Password" autocomplete="off">
<label for="forgot-password-input-two">Confirm New Password</label>
</div>
<div class="invalid-feedback">
Please enter your Password.
</div>
</div>
<div class="mt-3 ">
<div>
<div class="btn bg-gradient-anwi w-100 loader-btn"
style="display: none;">
<span class="loader"></span>
</div>
<a href="#" class="btn bg-gradient-anwi w-100 text-white fw-500"
id="forgot_password_details_submit" type="submit">Submit</a>
</div>
</div>
</div>
</form>
</div>
<div class="email-validate-div" style="display:none">
<div
class="font-16 d-flex justify-content-end font-w600 text-darkgrey w-100 backtologin">
<!-- <span>Forgot Password?</span> -->
<a href="./login.html" class="" id="email_validate_back"><span
class=" cursor-pointer text-center d-flex align-items-center"><i
class="fa-solid fa-arrow-left"></i></span></a>
</div>
<div class="email-validation">
<div class="font-14 w-100">Please enter your email address.
</div>
<div class="input-group has-validation forgot-password-inputgroup">
<div class="form-floating py-0">
<input type="email" class="form-control shadow-none h-50p"
id="email_validation_input" placeholder="Enter Your Email"
autocomplete="off">
<label for="email_validation_input">Email address</label>
</div>
<div class="invalid-feedback">
Please enter your email.
</div>
</div>
<div class="mt-3">
<div>
<div class="btn bg-gradient-anwi w-100 loader-btn"
style="display: none;">
<span class="loader"></span>
</div>
<a href="#" class="btn bg-gradient-anwi w-100 text-white fw-500"
id="email_validate_submit" type="submit">Submit</a>
</div>
</div>
</div>
<div class="otp-validation">
<div class="otp-input-group mt-3" style="display: none;">
<div>
<h4 class="text-center">Enter OTP</h4>
<div class="text-center">we have sent an OTP to this Email
</div>
<p class="user_email text-center"></p>
<div class="otp-sent-email fw-600 text-center"></div>
</div>
<div class="d-flex my-4">
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"
name="code" maxlength="1" tabindex="1"
autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"
name="code" maxlength="1" tabindex="2"
autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"
name="code" maxlength="1" tabindex="3"
autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"
name="code" maxlength="1" tabindex="4"
autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"
name="code" maxlength="1" tabindex="5"
autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"
name="code" maxlength="1" tabindex="6"
autocomplete="off">
</div>
</div>
</div>
<div>
<div class="btn bg-gradient-anwi w-100 loader-btn"
style="display: none;">
<span class="loader"></span>
</div>
<a href="#" class="bg-gradient-anwi btn fw-500 text-white w-100"
id="email_validate_proceed" type="submit">CONFIRM</a>
</div>
</div>
</div>
</div>
<div class="register_section" style="display: none;">
<form id="register_form">
<div class="email-password-group">
<div class="input-group has-validation email-login-inputgroup">
<div class="form-floating py-0">
<input type="email" class="form-control shadow-none h-50p"
id="User_Email" placeholder="Enter Your Email"
autocomplete="off">
<label for="User_Email">Email address</label>
</div>
<div class="invalid-feedback">
Please enter your email.
</div>
</div>
<div class="input-group has-validation mt-3 password-login-inputgroup">
<div class="align-items-center d-flex form-floating position-relative py-0"
id="password-input-div">
<input type="password" class="form-control shadow-none h-50p"
id="User_password" placeholder="Password"
autocomplete="no password" required="">
<span class="end-0 pswd_eye me-4 pe-2 position-absolute"><svg
class="svg-inline--fa fa-eye" aria-hidden="true"
focusable="false" data-prefix="fas" data-icon="eye"
role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512" data-fa-i2svg="">
<path fill="currentColor"
d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z">
</path>
</svg><!-- <i class="fa-solid fa-eye"></i> Font Awesome fontawesome.com --></span>
<label for="User_password">Password</label>
</div>
<div class="invalid-feedback">
Please enter your password.
</div>
<div class="pswd_info" style="display: none;">
<p>Password must contain:</p>
<ul>
<li id="chck_capital" class="invalid">At least <strong>one
capital
letter</strong></li>
<li id="chck_special" class="invalid">At least <strong>one
special
letter</strong></li>
<li id="chck_number" class="invalid">At least <strong>one
number</strong></li>
<li id="chck_length" class="invalid">At least <strong>8
characters</strong></li>
</ul>
</div>
</div>
<div class="fs-7 mt-2 satoshi_font">
By continuing, I agree to the
<a href="#"
class="text-theme-color text-decoration-underline fs-7 fw-600">Terms
of
Use</a>
&amp;
<a href="#"
class="text-theme-color text-decoration-underline fs-7 fw-600">Privacy
Policy</a>
</div>
<div class="mt-3 ">
<div>
<div class="btn bg-gradient-anwi w-100 loader-btn"
style="display: none;">
<span class="loader"></span>
</div>
<a href="#" class="btn bg-gradient-anwi text-white w-100 fw-500"
id="register_btn" type="submit">REGISTER</a>
</div>
</div>
<div class="my-3 mt-4">
<p class="or_line"><span>or</span></p>
</div>
<div class="mt-4 mb-5">
<a href="#" class="btn bg-gradient-anwi-outline w-100 fw-500" id="login_sectionbtn"
>Login</a>
</div>
</div>
<div class="register_otp otp-input-group mt-3" style="display: none;">
<div>
<h4 class="text-center">Enter OTP</h4>
<div class="text-center">we have sent an OTP to this Email </div>
<div class="otp-sent-email fw-600 text-center"></div>
</div>
<div class="d-flex my-4">
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code"
maxlength="1" tabindex="1" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code"
maxlength="1" tabindex="2" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code"
maxlength="1" tabindex="3" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code"
maxlength="1" tabindex="4" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code"
maxlength="1" tabindex="5" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code"
maxlength="1" tabindex="6" autocomplete="off">
</div>
</div>
</div>
<div>
<div class="btn bg-gradient-anwi w-100 loader-btn"
style="display: none;">
<span class="loader"></span>
</div>
<a href="#" class="btn btn-primary w-100 fw-500" id="proceed"
type="submit">CONFIRM</a>
</div>
</div>
</form>
</div>
</div>
</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="./libs/cookies.min.js"></script>
<script src="./libs/axios.min.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/fontawesome.all.js"></script>
<script src="./dist/js/utils/CookieHelper.js"></script>
<script src="./dist/toaster/toastr.js"></script>
<script src="./dist/js/auth/login.js"></script>
<script src="./dist/js/navbar1.js"></script>
<script src="./dist/js/footer.js"></script>
<!-- Main JS -->
<script src="./dist/js/main.js"></script>
<script>
$(".register_sectionbtn").click(function(){
$(".login_section").css("display","none");
$(".register_section").css("display","block");
$(".login_section").find("#User_Email").removeClass("is-invalid");
$(".login_section").find(".form-floating").removeClass("is-invalid");
$(".login_section").find("#User_password").removeClass("is-invalid");
$(".login_section").find(".form-floating").removeClass("is-invalid");
$('.error_msg').hide();
});
$("#login_sectionbtn").click(function(){
$(".login_section").css("display","block");
$(".register_section").css("display","none");
$(".register_section").find("#User_Email").removeClass("is-invalid");
$(".register_section").find(".form-floating").removeClass("is-invalid");
$(".register_section").find("#User_password").removeClass("is-invalid");
$(".register_section").find(".form-floating").removeClass("is-invalid");
$('.error_msg').hide();
});
</script>
</body>
</html>