File size: 2,748 Bytes
463dbc3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<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>
|