File size: 4,970 Bytes
6f093ab 463dbc3 6f093ab 463dbc3 6f093ab 463dbc3 6f093ab 463dbc3 6f093ab 463dbc3 6f093ab 463dbc3 6f093ab 463dbc3 6f093ab |
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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<!-- 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>
|