src/app/py-detect/py-detect.component.html

<div class="h-full bg-gray-900 text-gray-200 flex flex-col">
  <!-- Topbar Section -->
  <header class="flex justify-between items-center p-4 border-b border-gray-700 bg-gray-800">
    <div class="flex items-center space-x-4">
      <!-- Logo Image and Title -->
      <img src="./assets/pykara-logo.png" alt="Logo" class="pykara-logo-consistent" />
      <div class="text-lg font-semibold tracking-wide text-white">Py-Detect</div>
    </div>

    <div class="flex items-center gap-4">
      <!-- Home Button -->
      <button class="home-btn" (click)="navigateHome()">Home</button>

      <!-- Start Button -->
      <button class="btn-start stylish-font" (click)="start()" [disabled]="startDisabled()" [ngClass]="{'fade-out': startDisabled()}">Start</button>
      <!-- Stop Button -->
      <button class="btn-stop stylish-font" (click)="stopAll()" [disabled]="stopDisabled()">Stop</button>
      <!-- Final Submit Button -->
      <button class="btn-submit stylish-font" (click)="submitAll()" [disabled]="submitDisabled()">Final Submit</button>
    </div>
  </header>

  <!-- Main Stage Section -->
  <main class="main-flex-layout">
    <!-- Left: Question Section -->
    <section class="question-section">
      <div *ngIf="currentQuestion()" class="text-sm text-gray-400 mb-2 stylish-font">Question {{ questionIndex() + 1 }}</div>
      <div class="big-question stylish-font big-question-animated" style="min-height: 64px;">
        <ng-container *ngIf="currentQuestion(); else showStart">
          {{ currentQuestion() }}
        </ng-container>
        <ng-template #showStart>
          <button class="btn-start stylish-font" (click)="start()" [disabled]="startDisabled()" [ngClass]="{'fade-out': startDisabled()}">Start</button>
        </ng-template>
      </div>
      <div class="flex items-center justify-between mt-6">
        <span class="badge stylish-font"
              [ngClass]="{
            'bg-blue-600': status() === 'asking',
            'bg-green-600': status() === 'listening',
            'bg-yellow-600': status() === 'processing'
          }">
          {{ status() | uppercase }}
        </span>
        <span class="mic" [class.bg-green-600]="micOn()"></span>
        <span class="recog stylish-font" [class.bg-blue-600]="recognizerReady()">STT</span>
      </div>
    </section>
    <!-- Right: Camera Section -->
    <section class="video-section">
      <video #videoElement autoplay muted playsinline class="camera-video camera-video-large"></video>
      <div class="video-status stylish-font">{{ videoStatus }}</div>
    </section>
  </main>
  <!-- Back Button moved outside main to be fixed at bottom left -->
  <button class="back-btn global-bottom-left-btn" (click)="goToInfoPage()">Back</button>
</div>