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: 500px;
    height: 500px;
    border-radius: 10px;
    padding: 40px 30px;
    gap: 30px;
    border: 1px solid #000;
    background-color: #2c2c2c;
  }


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

  .title-icon {
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
  }

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

  .title {
    margin: 0;
    color: #fff;
    letter-spacing: 1.6px;
    white-space: nowrap;
    font: 400 30px/30px Overpass, sans-serif;
  }

  
  .login-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    gap: 20px;
  }

  .form-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 400px;
    height: 80px;
    padding: 10px;
    gap: 10px;
  }

  label {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: fit-content;
    height: 30px;
    gap: 10px;
  }

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

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

  .label {
    color: #fff;
    letter-spacing: 0.3px;
    font: 400 15px/30px Overpass, sans-serif;
  }

  .input-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: stretch;
    align-self: stretch;
    width: 100%;
    height: 30px;
    border-radius: 5px;
    padding: 3px 10px;
    box-shadow: 1px 1px 4px 0px 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: 0.6px;
    white-space: nowrap;
    font: 100 12px/20px Overpass, sans-serif;
  }
  input[type=button] {
    width: fit-content;
    align-self: flex-end;
    background-color: #00000000;
    border: none;
    color: #fff;
    letter-spacing: 0.6px;
    white-space: nowrap;
    font: 300 12px/20px Overpass, sans-serif;
  }
  
  #login-button {
    width: 220px;
    height: 70px;
    padding: 10px;
    border-radius: 10px;
    align-self: center;
    border: none;
    background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
    color: #fff;
    letter-spacing: 0.4px;
    white-space: nowrap;
    font: 600 20px/30px Overpass, sans-serif;
  }
  
  
  </style>