<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  <link rel='stylesheet' href='/dist/styles.css'>
  <title>Admin Login</title>
</head>

<style>
  .border-animate:focus {
    animation-name: border-animate;
    animation-duration: 1s;
    animation-iteration-count: 1;
  }

  @keyframes border-animate {
    from {
      border-color: white;
    }

    to {
      border-color: rgba(126, 34, 206);
    }
  }

  html {
    height: 100%;
  }
</style>

<body class='h-full bg-gradient-to-r bg-black'>
  <div class='absolute text-purple-600 font-bold text-4xl p-14 sm:pl-52'>
    <i class="far fa-user-shield">AhoPanel</i>
  </div>
  <div class='w-full mx-auto h-full text-purple-600 '>
    <div class='w-3/4 mx-auto pt-52 sm:w-1/3'>
      <form action='/adminLogin' method='POST'>
        <div class='bg-transparent rounded-3xl'>
          <label class='font-bold text-3xl p-3 text-purple-600 sm:text-5xl'>Log in</label>
          <div class='text-center font-medium p-5 text-xl '>
            <label for='adminName'>Admin Name</label>
            <div class="">
              <input
                class='border-animate rounded-sm mt-3 w-full outline-none h-12 bg-transparent border-b-2 border-purple-200 focus:border-purple-700 placeholder-purple-500 placeholder-opacity-80'
                type='text' id='adminName' name='adminName' placeholder='Your name..'>
            </div>
          </div>
          <div class='text-center font-medium p-5 text-xl'>
            <label for='adminName'>Password</label>
            <div class="">
              <input
                class='border-animate rounded-sm mt-3 w-full outline-none h-12 bg-transparent border-b-2 border-purple-200 focus:border-purple-700 placeholder-purple-500 placeholder-opacity-80'
                type='password' id='adminPassword' name='adminPassword' placeholder='Your password..'>
            </div>
          </div>
          <div class='text-center p-5 text-xl'>
            <input class='w-full rounded-full bg-purple-800 text-white p-2' type='submit' placeholder='Log In'>
          </div>
        </div>
      </form>
      <a href='./forgotPassword' class='text-purple-500'>
        Forgot your password?
      </a>
    </div>
  </div>
</body>

</html>