src/app/findword/findword.component.html

<div class="full-container">
  <app-header [title]="'Find the Word'"></app-header>

  <img src="assets/images/grammar-bg.png" alt="Chat Background" class="grammar-bg" />

  <div class="findword-container">
    <div *ngIf="step === 1" class="card1">
      <div class="content-container">
        <div class="image-container">
          <img src="assets/images/find_word/4.png" alt="Vocabulary Image" class="quiz-image" />
        </div>
        <div class="description-container">
          <h2>Improve Your Word Skills!</h2>
          <p>
            Find the Word is a fun and educational activity that helps students improve their listening, spelling, and vocabulary skills.
            Students hear a word through audio and then type what they hear. They get instant feedback to know if their answer is right or wrong.
            If needed, they can listen again. The exercise also has buttons to show the word’s meaning and an example sentence.
            A reset option lets students try again. This activity helps students practice listening and writing skills in an easy and engaging way, making learning more enjoyable and effective.
          </p>
          <app-button (click)="startGame()">Start Learning</app-button>
        </div>
      </div>
    </div>

    <div *ngIf="step === 2" class="game-screen">
      <div class="game-header">
        <img src="assets/images/back.png" alt="Go Back" class="back-btn" (click)="goBack()" />
        <h2 class="game-title">Listen & Type</h2>
        <button class="user-guide-close-icon" (click)=" closeToStart()">×</button>
      </div>

      <div class="game-content">
        <div class="audio-card audio-card--kids">
          <div class="ac-header">
            <button (click)="fetchAudio()"
                    [disabled]="isGenerateDisabled"
                    class="btn generate-btn ac-generate"
                    aria-label="Generate a new question">
              <span *ngIf="!isLoading">Generate audio</span>
              <span *ngIf="isLoading">Generating</span>
            </button>
          </div>
          <img class="left-illustration"
               src="assets/images/find_word/audio.png"
               alt="" />
          <div class="ac-player" [class.is-disabled]="!audioUrl" [class.is-playing]="isPlaying">
            <button class="play-btn"
                    [disabled]="!audioUrl"
                    (click)="togglePlayback()"
                    [attr.aria-pressed]="isPlaying"
                    [attr.aria-label]="isPlaying ? 'Pause audio' : 'Play audio'">
              <svg *ngIf="!isPlaying" viewBox="0 0 24 24" class="icon">
                <path d="M8 5v14l11-7z"></path>
              </svg>
              <svg *ngIf="isPlaying" viewBox="0 0 24 24" class="icon">
                <path d="M6 5h4v14H6zM14 5h4v14h-4z"></path>
              </svg>
              <span class="pulse" aria-hidden="true"></span>
            </button>

            <div class="wave-shell" aria-hidden="true">
              <span class="bar" *ngFor="let b of bars; let i = index" [style.animation-delay.ms]="(i%6)*120"></span>
            </div>

            <div class="timeline" [class.is-disabled]="!audioUrl">
              <div class="progress" [style.width.%]="progress"></div>
            </div>

            <div class="ac-hint" *ngIf="!audioUrl">
              Tap <strong>Generate audio</strong> to load the audio.
            </div>
          </div>

          <audio #audioPlayer
                 (timeupdate)="onTimeUpdate()"
                 (ended)="onAudioEnded()"
                 (loadedmetadata)="onLoadedMeta()"
                 hidden>
            <source [src]="audioUrl" type="audio/mp3" />
            Your browser does not support the audio tag.
          </audio>
        </div>

        <div class="input-card kid-panel"
             [class.is-correct]="isCorrect"
             [class.is-shake]="ui.shake">
          <div class="kp-top">
            <h3 class="kp-title">Type the word</h3>
            <div class="kp-attempts" aria-label="Attempts left">
              <span class="heart" [class.is-off]="attemptsLeft < 1"></span>
              <span class="heart" [class.is-off]="attemptsLeft < 2"></span>
              <span class="heart" [class.is-off]="attemptsLeft < 3"></span>
            </div>
          </div>
          <div class="kp-input-wrap">
            <input type="text"
                   class="kp-input"
                   [(ngModel)]="userInput"
                   [disabled]="!audioFinished"
                   (ngModelChange)="onInputChange()"
                   placeholder="Type what you heard"
                   [ngClass]="{ 'correct': isCorrect, 'error': !isCorrect && validationMessage }" />
            <div class="ok-badge" *ngIf="isCorrect || ui?.pulseOk" aria-hidden="true">
              <svg viewBox="0 0 24 24" class="ok-icon">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M7 12l3 3 7-7"></path>
              </svg>
            </div>
          </div>
          <p *ngIf="validationMessage" class="error-message">{{ validationMessage }}</p>
          <app-button (click)="validateWord()"
                      [disabled]="!canSubmit || attemptsLeft === 0">
            Submit
          </app-button>
          <div class="action-bar">
            <div class="left-buttons">
              <app-button (click)="showMeaningPanel()"
                          [disabled]="isMeaningButtonDisabled">
                <span class="btn__icon" aria-hidden="true">📘</span>
                <span>Meaning</span>
              </app-button>

              <app-button (click)="showSentencePanel()"
                          [disabled]="isExampleButtonDisabled">
                <span class="btn__icon" aria-hidden="true">✍️</span>
                <span>Example</span>
              </app-button>
            </div>

            <app-button (click)="nextQuestion()"
                        [disabled]="attemptsLeft > 0 && !isCorrect">
              <span class="btn__icon" aria-hidden="true">⟲</span>
              <span>Reset</span>
            </app-button>
          </div>
        </div>
      </div>
    </div>

    <div *ngIf="isPopupVisible" class="popup-overlay">
      <div class="popup-content">
        <p>{{ popupMessage }}</p>
        <app-button (click)="closePopup()">Close</app-button>
      </div>
    </div>
  </div>
</div>