<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="assets/favicon.webp" rel="shortcut icon" type="image/png"/>
    <title>2-Factor Verification</title>
    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
          integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" rel="stylesheet">
    <link href="https://fonts.googleapis.com" rel="preconnect">
    <link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/feather-icons"></script>

    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #1b1c1e;
        }

        .nav-color {
            background-color: #212226;
        }

        .nav-radius {
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }

        .card {
            position: center;
            margin: auto;
            margin-top: 3%;
            margin-bottom: 2%;
            text-align: center;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            background-color: #212226;
        }

        .icon {
            position: center;
            margin-top: -5%;
            margin-left: 10%;
            width: 80%;
            height: 80%;
            padding-bottom: 0%;
        }

        .text {
            margin-bottom: -6%;
        }

        .text-resend {
            color: white;
            text-align: center;
        }

        .text-resend a:hover {
            color: white;
        }

        .btn-success:hover {
            margin-left: 0%;
        }

        .input-container input {
            width: 40px;
            height: 40px;
        }

        @media screen and (max-width: 425px) {
            .card a, input {
                font-size: 3vw;
            }

            .card-header {
                font-size: 6vw;
            }
        }

        @media screen and (min-width: 426px) {
            .card a, input {
                font-size: 2vw;
            }

            .card-header {
                font-size: 5vw;
            }
        }

        @media screen and (min-width: 767px) {
            .card a, input {
                font-size: 2vw;
            }

            .card-header {
                font-size: 4vw;
            }
        }

        @media screen and (min-width: 993px) {
            .card a, input {
                font-size: 1vw;
            }

            .card-header {
                font-size: 2.5vw;
            }
        }

        @media screen and (min-width: 1400px) {
            .card a, input {
                font-size: 1vw;
            }

            .card-header {
                font-size: 2.5vw;
            }
        }

        @media screen and (max-width: 500px) {
            .form {
                width: 95%;
            }

            .form .user-input {
                width: 100%
            }

            .form .btn {
                width: 100%;
            }
        }

        .verify-btn {
            width: 100%;
            background-color: darkred;
            border-color: darkred;
            border-radius: 100px;
        }

        .verify-btn:hover {
            background-color: red;
            border-color: red;
        }
    </style>
</head>

<body>
<nav class="navbar navbar-dark nav-color ml-5 mr-5 nav-radius">
    <img alt="Banner" class="navbar-brand" src="assets/logo_transparent.webp" style="margin-top: 0%;" width="5%">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a style="color: white; font-size: 16pt;">2-Factor Verification</a>
        </li>
    </ul>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01"></div>
</nav>

<div class="container">
    <div class="row">
        <div class="col">
            <div class="card text-white col-md-9 col-lg-6 col-xl-5">
                <h1 class="card-header text-white">OTP VERIFICATION</h1>
                <lottie-player autoplay background="transparent"
                               class="icon"
                               loop speed="1"
                               src="https://assets2.lottiefiles.com/packages/lf20_zztlhuue.json"></lottie-player>
                <div class="py-3 text" style="padding: 0% 5%; text-align: center;">
                    <a>A String of OTP Code Has Been Sent to kel*****@gmail.com</a>
                </div>
                <br>
                <div class="input-container d-flex flex-row justify-content-center mt-2">
                    <input class="m-1 text-center form-control rounded" id='ist' maxlength="1"
                           onkeyup="clickEvent(this,'sec')"
                           type="text">
                    <input class="m-1 text-center form-control rounded" id="sec" maxlength="1"
                           onkeyup="clickEvent(this,'third')"
                           type="text">
                    <input class="m-1 text-center form-control rounded" id="third" maxlength="1"
                           onkeyup="clickEvent(this,'fourth')"
                           type="text">
                    <input class="m-1 text-center form-control rounded" id="fourth" maxlength="1"
                           onkeyup="clickEvent(this,'fifth')"
                           type="text">
                    <input class="m-1 text-center form-control rounded" id="fifth" maxlength="1"
                           onkeyup="clickEvent(this,'sixth')"
                           type="text">
                    <input class="m-1 text-center form-control rounded" id="sixth" maxlength="1" type="text">
                </div>
                <div class="text-resend">
                    <small>
                        Didn't Get An Email?? &nbsp;
                        <a class="text-decoration-none" href="forgot-password.html">Resend Code</a>
                    </small>
                </div>

                <div class="mt-3 mb-5">
                    <button class="btn btn-success px-4 verify-btn" style="width: 65%;">Verify</button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>


<script>
    function clickEvent(first, last) {
        if (first.value.length) {
            document.getElementById(last).focus();
        }
    }
</script>
<script>
    feather.replace()
</script>
<script crossorigin="anonymous"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script crossorigin="anonymous"
        integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
        src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</body>

</html>