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

<!-- Modern UI header with logo and PyDetect title -->
<div class="site-header">
  <div class="header-inner">
    <div class="logo-cluster">
      <span (click)="navigateHome()" style="cursor:pointer;display:flex;align-items:center;">
        <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img-header" />
      </span>
      <div class="py-detect-title-header">
        <span class="py-letter p">P</span>
        <span class="py-letter y">Y</span>
        <span class="py-shape"></span>
        <span class="py-letter d">D</span>
        <span class="py-letter e">E</span>
        <span class="py-letter t">T</span>
        <span class="py-letter e2">E</span>
        <span class="py-letter c">C</span>
        <span class="py-letter t2">T</span>
      </div>
    </div>
  </div>
</div>

<!-- Button Bar Below Header -->
<div class="button-bar">
  <button class="header-btn home-btn" (click)="navigateHome()">Home</button>
  <button class="header-btn camera-btn" (click)="startCamera()">Start Camera</button>
  <button class="header-btn voice-btn" (click)="startVoice()">Start Voice</button>
  <button class="header-btn tts-btn" [class.active]="ttsEnabled()"> <i class="fas fa-volume-up"></i> TTS On</button>
</div>

<main class="main-flex-layout">
  <!-- Left Panel: Controls & Question -->
  <section class="left-panel">
    <div class="case-meta">
      <div class="case-id">Case ID: <span class="case-id-value">{{ caseId }}</span></div>
      <div class="officer">Officer: <span class="officer-value">{{ officer }}</span></div>
      <div class="progress-label">Progress: <span class="progress-value">{{ progress }}%</span></div>
    </div>
    <div class="question-card">
      <!-- Show Start button if no question is active -->
      <div *ngIf="!currentQuestionText">
        <button class="btn-start-gradient" (click)="onStartRecording()">
          <i class="fas fa-search"></i> Start Investigation
        </button>
      </div>
      <!-- Show question if active -->
      <div *ngIf="currentQuestionText">
        <div class="question-number" style="font-size:1.1em;color:#6366f1;font-weight:600;margin-bottom:8px;">
          Question {{ currentQuestionIndex }} of {{ totalQuestions }}
        </div>
        <div class="question-typewriter">
          {{ currentQuestionText }}
        </div>
        <!-- Asking popup -->
        <div *ngIf="status() === 'asking'" class="popup asking-popup">
          <span>Asking...</span>
        </div>
        <!-- Idle popup -->
        <div *ngIf="status() === 'idle-wait'" class="popup idle-popup">
          <span>Waiting for suspect reply...</span>
        </div>
        <div *ngIf="status() === 'recording'" class="recording-indicator" style="color:#38bdf8;font-weight:600;margin-top:12px;">Recording...</div>
       </div>
      <div class="audio-status">
        <span *ngIf="isRecording" class="recording-text">Recording...</span>
        <span *ngIf="isProcessing" class="processing-text">Processing Answer...</span>
        <div class="waveform-animation" *ngIf="isRecording"></div>
      </div>
    </div>
    <div class="controls-row" *ngIf="currentQuestionText">
      <button class="btn-pause" (click)="pauseRecording()"><i class="fas fa-pause"></i> Pause</button>
      <button class="btn-skip" (click)="skipQuestion()"><i class="fas fa-forward"></i> Skip Question</button>
    </div>
  </section>

  <!-- Right Panel: Video + Transcript -->
  <section class="right-panel">
    <div class="video-preview">
      <ng-container *ngIf="!videoStream">
        <div class="camera-inactive-block">
          <i class="fas fa-video camera-inactive-icon"></i>
          <div class="camera-inactive-title">Camera Inactive</div>
          <div class="camera-inactive-sub">Click "Start Camera" to begin video recording</div>
        </div>
      </ng-container>
      <ng-container *ngIf="videoStream">
        <video #videoElement autoplay muted playsinline class="camera-video camera-video-large"></video>
        <div class="video-status stylish-font">{{ videoStatus }}</div>
      </ng-container>
    </div>
    <div class="transcript-panel">
      <div class="transcript-title">Transcription (Live):</div>
      <div class="transcript-scrollable">
        <div *ngFor="let line of transcriptLines" class="transcript-line">{{ line }}</div>
      </div>
    </div>
  </section>
</main>

<!-- Completion Summary Modal -->
<div class="summary-modal" *ngIf="showSummary">
  <div class="summary-modal-content">
    <h2>Interview Summary</h2>
    <div *ngFor="let qa of summaryData" class="summary-qa-row">
      <div class="summary-question">Q: {{ qa.question }}</div>
      <div class="summary-answer">A: {{ qa.answer }}</div>
      <div class="summary-duration">Audio: {{ qa.duration }}s</div>
    </div>
    <button class="btn-close-summary" (click)="closeSummary()">Close</button>
  </div>
</div>

<footer>
  <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
</footer>