src/app/auth/auth.component.html

<div class="login-wrapper">
  <div class="login-container">
    <!-- Left side image and logo -->
    <div class="login-image">
      <img src="assets/images/login/lion.png" alt="Login Illustration" class="bgImage" />
      <img src="assets/images/pykara-logo.png" alt="Pykara Logo" class="logo" />
    </div>

    <!-- Right side form -->
    <div class="login-box">
      <div class="logo-header">
        <span class="py-learn-text">Py- Learn</span>
        <!-- Added self-learning system text here -->
        <div class="self-learning-system">(A Self-Learning System)</div>
      </div>

      <h2>Login</h2>
      <!--<p class="subtitle">Use your Pykara account</p>-->
      <!--<input type="text" [(ngModel)]="username" placeholder="Username or Email" />

  <div class="password-field">
    <input [type]="showPassword ? 'text' : 'password'"
           [(ngModel)]="password"
           placeholder="Password" />
    <span class="toggle-password" (click)="togglePasswordVisibility()">
      <i class="{{ showPassword ? 'fas fa-eye' : 'fas fa-eye-slash' }}"></i>
    </span>
  </div>

  <p *ngIf="errorMessage" class="error">{{ errorMessage }}</p>

  <button (click)="login()">Login</button>-->

      <form (ngSubmit)="login()" #loginForm="ngForm" autocomplete="on">
        <input type="text" name="username" [(ngModel)]="username" placeholder="Username or Email" required />

        <div class="password-field">
          <input [type]="showPassword ? 'text' : 'password'"
                 name="password"
                 [(ngModel)]="password"
                 placeholder="Password"
                 required
                  autocomplete="current-password"
      (keydown.enter)="login(); $event.preventDefault()"/>
          <span class="toggle-password" (click)="togglePasswordVisibility()">
            <i class="{{ showPassword ? 'fas fa-eye' : 'fas fa-eye-slash' }}"></i>
          </span>
        </div>

        <p *ngIf="errorMessage" class="error">{{ errorMessage }}</p>

        <button type="submit">Login</button>
      </form>


      <div class="language-grade-container">
        <div class="language-switcher">
          <label for="lang-select" class="language-label">Language:</label>
          <select id="lang-select" class="dropdown-select">
            <option value="en-GB">English (UK)</option>
            <option value="en-US">English (US)</option>
            <option value="sv">Svenska</option>
            <option value="fr">Français</option>
            <option value="de">Deutsch</option>
            <option value="es">Español</option>
          </select>
        </div>

        <div class="grade-switcher">
          <label for="grade-select" class="grade-label">Grade:</label>
          <select id="grade-select" class="dropdown-select">
            <option value="4th">4th</option>
            <option value="5th">5th</option>
            <option value="6th">6th</option>
          </select>
        </div>
      </div>


    </div>
  </div>

  <div class="footer-link">
    <a href="https://pykara.ai" target="_blank">www.pykara.ai</a>
  </div>


  <!-- Social Media Icons at the top-right -->
  <div class="social-media-icons">
    <a href="https://www.youtube.com/@PykaraTechnologies/videos" target="_blank" class="social-icon">

      <img src="assets/images/home/youtube-icon.png" alt="YouTube">
    </a>
    <a href="https://www.linkedin.com/in/pykara-technologies" target="_blank" class="social-icon">

      <img src="assets/images/home/linkedin-icon.png" alt="LinkedIn">
    </a>
  </div>


</div>