<?php
session_start();
require_once "SystemController/DbConnection.php";
$db_handle = new Dbconnection();
$msg = "";

?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width,initial-scale=1">
    
    <title>Ovoh Initiative</title>
    <link rel="icon" href="assets/img/favicon.png" type="image/x-icon">
        <link rel="icon" href="assets/img/favicon.ico" sizes="any">
        <link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml">
        <link rel="apple-touch-icon" href="assets/img/favicon.png">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Bootstrap CSS -->
  
    
    <!-- FontAwesome CSS -->
    <link rel="stylesheet" href="style.css"><!-- Custom CSS -->
     <link rel="stylesheet" href="responsive.css">
    
        <style>
      :root {
          /* Color */
          --bs-primary: #000000;
          --bs-secondary: #c0a146;
      }
  </style>
  <style>
   .otp-box {
     height: 40px;
     width: 100%;
     font-size: 25px;
     text-align: center;
     border: 2px solid #BA0C2F;
   }

   .otp-box::-webkit-inner-spin-button,
   .otp-box::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
   }
 </style>
</head>
<body>
    
    <main>
            <section>
        <div class="row align-items-center g-0 w-100 h-100vh position-relative">
            <div class="col-md-5 d-md-block d-none">
                <div class="login-left-content">
                    <a href="">
                        <img src="assets/img/logo.png" class="logo-img" alt="">
                    </a>
                </div>
            </div>
            <div class="col-md-7 overflow-hidden bg-white">
                <div class="login-right-content login-forgot-padding row">
                    <div class="pb-0 px-0">
                        <div class=" d-flex align-items-center justify-content-between">
                            <div>
                                <h3 class="fw-bold text-color title-text mb-2" style="color:#BA0C2F">We just send you an OTP</h3>
                                
                            </div>
                            <!-- FOR SMALL DEVICE TOP CATEGORIES -->
                                                    </div>

                                                    
         <p class="login-box-msg">Enter the code verification code sent to your email.</p>
         <br>
         <br>
         <p><b>One-Time Password</b></p>
         <br>

         <div class="" id="error"></div>
<div class="row">
         
           <div class="col-3">
             <input id="codeBox1" class="otp-box" type="text" maxlength="1" onkeyup="onKeyUpEvent(1, event)" onfocus="onFocusEvent(1)" />
           </div>

           <div class=" col-3">
             <input id="codeBox2" class="otp-box" type="text" maxlength="1" onkeyup="onKeyUpEvent(2, event)" onfocus="onFocusEvent(2)" />
           </div>

           <div class="col-3">
             <input id="codeBox3" class="otp-box" type="text" maxlength="1" onkeyup="onKeyUpEvent(3, event)" onfocus="onFocusEvent(3)" />
           </div>

           <div class="col-3">
             <input id="codeBox4" class="otp-box" type="text" maxlength="1" onkeyup="onKeyUpEvent(4, event)" onfocus="onFocusEvent(4)" />
           </div>


         </div>

                                                                   </div>
                                                               </div>
                                               </div>                
        </div>
    </section>
        </main>
    <script src="assets/js/jquery.min.js"></script><!-- jQuery JS -->
    <script src="assets/js/bootstrap.bundle.min.js"></script><!-- Bootstrap JS -->
    
    <script src="assets/js/verify-otp.js"></script>
            
</body>
</html>