
<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    * {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      box-sizing: border-box;
    }

    .login-form {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      max-width: 320px;
    }

    .title {
      font-weight: 600;
      font-size: 24px;
      text-align: center;
    }

    .subtitle {
      font-weight: 400;
      font-size: 16px;
      text-align: center;
      margin-bottom: 40px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    .form-group label {
      font-weight: 600;
      font-size: 14px;
      display: block;
      margin-bottom: 8px;
    }

    .form-group input {
      display: block;
      width: 100%;
      height: 32px;
      padding-inline: 12px;
    }

    .align-right {
      text-align: right;
    }
  </style>


</head>

<body>
    <div class="login-form">
      <div>
        <h1 class="title">Labton</h1>
        <p class="subtitle">Machine teaching annotation tool</p>
      </div>
      <form action="" method="post">
        <div class="form-group">
          <label for="name">Annotator name</label>
          <input type=text name="username", placeholder="Professer Oak...">
        </div>
        <div class="form-group" style="display: none;">
          <label for="name">Password</label>
          <input type=text name="password" placeholder="***">
        </div>
        <div class="align-right">
          <input type=submit name="Start" style="height: 32px;">  
        </div>
    </form>
    </div>
</body>