<!DOCTYPE html>
<html lang="en">
  <%- include("partial/header") %>

  <body class="bg-gray-200">
    <div class="flex flex-col justify-center items-center h-screen">
      <form
        class="shadow m-auto max-w-lg sm:w-screen pt-8 pb-5 px-10 flex flex-col bg-white rounded justify-center items-center text-center"
        action="/subscribe"
        method="post"
      >
        <h1
          class="mb-4 text-gray-600 font-semibold text-2xl text-<%= colorTheme %>-500"
        >
          TONKEN
        </h1>
        <input
          class="bg-gray-200 p-1 m-2 rounded placeholder-gray-500 text-center"
          type="text"
          name="username"
          id=""
          placeholder="Username"
          onkeypress="return blockSpecialChar(event)"
        />
        <input
          class="bg-gray-200 p-1 m-2 rounded placeholder-gray-500 text-center"
          type="email"
          name="email"
          id=""
          placeholder="E-Mail"
        />
        <input
          class="bg-gray-200 p-1 m-2 rounded placeholder-gray-500 text-center"
          type="password"
          name="password"
          id=""
          placeholder="Password"
        />

        <button
          class="shadow px-4 py-2 mt-5 mb-8 text-white font-bold bg-<%= colorTheme %>-600 rounded hover:bg-<%= colorTheme %>-500"
          type="submit"
        >
          SUBSCRIBE
        </button>
      </form>
    </div>
    <script type="text/javascript">
      function blockSpecialChar(e) {
        var k = e.keyCode;
        return (
          (k > 64 && k < 91) ||
          (k > 96 && k < 123) ||
          k == 8 ||
          (k >= 48 && k <= 57)
        );
      }
    </script>
  </body>
</html>
