src/app/sign-in/sign-in.component.html

<section class="signin-popup ai-bg-animate">
  <div class="ai-particle-bg"></div>
  <!-- Added brand logo top-left -->
  <div class="signin-brand-logo" role="banner">
    <a routerLink="/" aria-label="Pykara Home" class="brand-link">
      <img [src]="brand.logo" [alt]="brand.name + ' Logo'" class="brand-logo-img" />


    </a>
  </div>


  <!-- Social Media Icons Top-Right -->
  <div class="social-icons signin-social-icons">
    <a [href]="socialLinks.linkedin" target="_blank" class="social-icon linkedin" aria-label="LinkedIn">
      <i class="fab fa-linkedin-in"></i>
    </a>
    <a [href]="socialLinks.youtube" target="_blank" class="social-icon youtube" aria-label="YouTube">
      <i class="fab fa-youtube"></i>
    </a>
    <a [href]="socialLinks.facebook" target="_blank" class="social-icon facebook" aria-label="Facebook">
      <i class="fab fa-facebook-f"></i>
    </a>
    <a [href]="socialLinks.instagram" target="_blank" class="social-icon instagram" aria-label="Instagram">
      <i class="fab fa-instagram"></i>
    </a>
    <a [href]="socialLinks.website" target="_blank" class="social-icon website" aria-label="Website">
      <i class="fas fa-globe"></i>
    </a>
  </div>

  <div class="signin-header">
  </div>

  <div class="auth-card" [class.flipped]="isFlipped">
    <div class="card-inner">
      <!-- FRONT: sign-in on main panel, image side on left -->
      <div class="card-front">
        <div class="card-content">
          <div class="side-panel side-left">
            <!-- Decorative background shapes -->
            <img class="side-img" src="assets/images/login/lion.png" alt="Lion" />
            <!-- Overlay text and button -->
            <div class="side-welcome-overlay">

              <div class="welcome-back-desc">First time here? Create your account to get started.</div>
              <button class="action-btn" type="button" (click)="flipToSignUp()">Sign Up</button>
            </div>
            <!-- Replace /assets/side-placeholder-left.jpg with your chosen image -->
          </div>

          <div class="main-panel">
            <!-- brand header above login -->
            <div class="logo-header">
              <span class="py-learn-text">{{ brand.name }}</span>
              <div class="self-learning-system">(A Self-Learning System)</div>
            </div>
            <!-- existing sign-in form -->
            <button class="signin-close" type="button" (click)="closePopup()" aria-label="Close">&times;</button>
            <h2 class="signin-title">

              <span class="login-text">Login</span>
              <span [innerHTML]="typingTitle"></span>
            </h2>

            <form [formGroup]="form" (ngSubmit)="signIn()" novalidate>
              <div class="signin-row">
                <div class="signin-field">
                  <label for="email">Email or Username</label>
                  <input id="email" type="email" placeholder="you@example.com" formControlName="email" [class.invalid]="submitted && form.get('email')?.invalid" [attr.aria-invalid]="form.get('email')?.invalid && form.get('email')?.touched" />
                  <small *ngIf="submitted && form.get('email')?.errors?.['required']" class="error">Email or Username is required.</small>
                </div>
              </div>
              <div class="signin-row">
                <div class="signin-field">
                  <label for="password">Password</label>
                  <div class="input-with-icon">
                    <input id="password" [type]="showPassword ? 'text' : 'password'" placeholder="••••••••" formControlName="password" [class.invalid]="submitted && form.get('password')?.invalid" [attr.aria-invalid]="form.get('password')?.invalid && form.get('password')?.touched" />
                    <button type="button"
                            class="eye-toggle"
                            (click)="togglePasswordVisibility()"
                            tabindex="-1"
                            [attr.aria-pressed]="showPassword"
                            aria-label="Show/Hide password">
                      {{ showPassword ? '🙈' : '👁️' }}
                    </button>
                  </div>
                  <small *ngIf="submitted && form.get('password')?.errors?.['required']" class="error">Password is required.</small>
                  <div *ngIf="errorMessage" class="signin-error-toast">{{ errorMessage }}</div>
                </div>
              </div>
              <div class="signin-row signin-options-row">
                <div class="remember-me">
                  <label class="switch">
                    <input id="rememberMe" type="checkbox" />
                    <span class="slider"></span>
                  </label>
                  <span>Remember me</span>
                </div>
                <div class="forgot-password">
                  <a href="#" class="forgot-link" (click)="openForgotModal($event)">Forgot password?</a>
                </div>
              </div>
              <!--<div class="signin-hint">Press Enter to Sign In</div>-->
              <button class="signin-btn ai-pulse" type="submit" [disabled]="loading">
                <ng-container *ngIf="!loading; else loggingIn">
                  Login
                </ng-container>
                <ng-template #loggingIn>
                  <span class="spinner"></span> Logging in...
                </ng-template>
              </button>

              <!-- Divider with 'or' -->
              <div class="signin-divider-row">
                <div class="divider"></div>
                <span class="divider-or">or</span>
                <div class="divider"></div>
              </div>

              <!-- Custom Google Sign-In button -->
              <button class="google-btn" type="button" (click)="onGoogleSignIn()">
                <img src="assets/images/google-logo.svg" alt="Google logo" class="google-logo" />
                <span>Log in with Google</span>
              </button>

            </form>
          </div>
        </div>
      </div>

      <!-- BACK: sign-up on main panel, image side on right -->
      <div class="card-back">
        <div class="card-content card-content-reverse">
          <div class="main-panel">
            <div class="panel-right-embed">

              <app-sign-up [embedded]="true" (switchToSignIn)="flipToSignIn()"></app-sign-up>
            </div>
            <div class="signin-footer">
              <a href="#" (click)="flipToSignIn(); $event.preventDefault()">Back to Sign In</a>
            </div>
          </div>

          <!-- Right side: lion image + requested minimal text/buttons -->
          <div class="side-panel side-right">
            <div class="side-info-box">
              <div class="welcome-back-title">Learn Smarter.</div>
              <div class="welcome-back-title">Practice Better.</div>
              <div class="welcome-back-desc">Existing user? Log in to your account.</div>
              <button class="action-btn" type="button" (click)="goToLogin()">Sign In</button>
            </div>
            <img class="side-img" src="assets/images/login/lion.png" alt="Lion" />
          </div>
        </div>
      </div>

    </div>
  </div>

  <div *ngIf="showForgotModal" class="forgot-modal-bg">
    <div class="forgot-modal">
      <h3>Forgot Password</h3>
      <p>Enter your email to receive password reset instructions.</p>
      <input type="email" [(ngModel)]="forgotEmail" placeholder="Your email" />
      <button class="signin-btn" (click)="sendForgotEmail()">Send Reset Link</button>
      <button class="modal-close" (click)="closeForgotModal()">Close</button>
    </div>
  </div>
  <a class="signin-watermark" [href]="socialLinks.website" target="_blank">
    {{ websiteDisplay }}
  </a>
</section>