<html>
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/server.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UnknownVPS &bullet; Login</title>
    <link href="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/css/tailwind.min.css" rel="stylesheet">
    <script defer src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/css/cdn.min.js"></script>
    <style>
        [x-cloak] {
            display: none !important;
        }
        html, body {
    height: 100%;
    background: linear-gradient(90deg, rgba(27,27,47,1) 35%, rgba(60,59,63,1) 100%);
}
    </style>
</head>
<body>
<body class="relative antialiased">
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="fixed inset-0 transition-opacity"></div>
  <div class="fixed inset-0 z-10 overflow-y-auto">
    <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
      <!--
        Modal panel, show/hide based on modal state.
        Entering: "ease-out duration-300"
          From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
          To: "opacity-100 translate-y-0 sm:scale-100"
        Leaving: "ease-in duration-200"
          From: "opacity-100 translate-y-0 sm:scale-100"
          To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
      -->
      <div class="flex flex-col justify-center items-center relative transform overflow-hidden rounded-lg text-center shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
        <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4 justify-center">
          <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full">
            <!-- Heroicon name: outline/exclamation-triangle -->
            <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/lock.png"/>
          </div>
          <div class="sm:flex sm:items-start">
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-center">
              <h3 style="color: azure" class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Authentication</h3>
              <h5 class="text-md font-medium text-white">Login to be granted access to the dashboard</h5>
            </div>
          </div>
        </div>
        <div style="padding-top: 1px;" class="px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 justify-center">
          <a href="/login" type="button" class="inline-flex w-full justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm">Login using Discord</a>
          <a href="/discord" type="button" class="mt-3 inline-flex w-full justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Discord Server</a>
        </div>
        <p class="text-gray-100 text-xs text-center">By Logging In you agree to our <a class="font-bold text-blue-600 hover:text-indigo-600" href="tos">TOS</a> and <a class="font-bold text-blue-600 hover:text-indigo-600" href="/privacypolicy">Privacy Policy</a></p>
      </div>
    </div>
  </div>
</div>
    </main>
    </body>
    </html> 
