TueIT_App/components/LoginForm.vue

<template>
  <form class="login-form">
    <div class="title-field">
      <span class="title-icon" id="logo-icon">
        <img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
      </span>
      <pre class="title">Login</pre>
    </div>
    <div class="login-field">
      <div class="form-field" id="username-field">
        <label for="username-input" id="username-label">
          <span class="icon" id="username-icon">
            <img loading="lazy" src="../icons/Mail-Icon.svg" />
          </span>
          <div class="label">Username:</div>
        </label>
        <div class="input-field">
          <input type="text" id="username-input" placeholder="user@example.com">
        </div>
      </div>
      <div class="form-field" id="password-field">
        <label for="password-input" id="password-label">
          <span class="icon" id="password-icon">
            <img loading="lazy" src="../icons/Lock-Icon.svg" />
          </span>
          <div class="label">Password:</div>
        </label>
        <div class="input-field">
          <input type="text" id="password-input" placeholder="*******">
          <input type="button" id="show-password-toggle" value="Show">
      </div>
      </div>
    </div>
    <input type="button" id="login-button" value="Login">
  </form>
</template>



<script>

export default {
    name: "LoginForm",
}

</script>
  
  

<style scoped>

  * {
    box-sizing: border-box;
  }


  .login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 31.25rem;
    height: 31.25rem;
    border-radius: 0.625rem;
    padding: 2.5rem 1.875rem;
    gap: 1.875rem;
    border: 0.0625rem solid #000;
    background-color: #2c2c2c;
  }


  .title-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
  }

  .title-icon {
    justify-content: center;
    align-items: center;
    width: 3.125rem;
    height: 3.125rem;
  }

  .title-icon > img {
    width: 3.125rem;
    height: 3.125rem;
    object-fit: contain;
    object-position: center;
    overflow: hidden;
  }

  .title {
    margin: 0;
    color: #fff;
    letter-spacing: 5%;
    white-space: nowrap;
    font: 400 1.875rem/1.875rem Overpass, sans-serif;
  }

  
  .login-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    gap: 1.25rem;
  }

  .form-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 25rem;
    height: 5rem;
    padding: 0.625rem;
    gap: 0.625rem;
  }

  label {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: fit-content;
    height: 1.875rem;
    gap: 0.625rem;
  }

  .icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
  }

  .icon > img {
    filter: invert(100%);
    object-fit: contain;
    object-position: center;
    overflow: hidden;
  }
  #username-icon > img {
    width: auto;
    height: 0.9375rem;
  }
  #password-icon > img {
    width: 0.9375rem;
    height: auto;
  }

  .label {
    color: #fff;
    letter-spacing: 2%;
    font: 400 0.9375rem/1.875rem Overpass, sans-serif;
  }

  .input-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: stretch;
    align-self: stretch;
    width: 100%;
    height: 1.875rem;
    border-radius: 0.3125rem;
    padding: 0.1875rem 0.625rem;
    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
    background-color: #212121;
  }

  input[type=text] {
    width: 100%;
    height: 100%;
    background-color: #00000000;
    border: none;
    color: #8e8e8e;
    letter-spacing: 5%;
    white-space: nowrap;
    font: 100 0.75rem/1.25rem Overpass, sans-serif;
  }
  input[type=button] {
    width: fit-content;
    align-self: flex-end;
    background-color: #00000000;
    border: none;
    color: #fff;
    letter-spacing: 5%;
    white-space: nowrap;
    font: 300 0.75rem/1.25rem Overpass, sans-serif;
  }
  
  #login-button {
    width: 13.75rem;
    height: 4.375rem;
    padding: 0.625rem;
    border-radius: 0.625rem;
    align-self: center;
    border: none;
    background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
    color: #fff;
    letter-spacing: 2%;
    white-space: nowrap;
    font: 600 1.25rem/1.875rem Overpass, sans-serif;
  }
  
  
  </style>