src/app/validationpage/validationpage.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 class="header-actions-right">
 <button class="back-btn" (click)="navigateBackToPyDetect()">
 <span class="back-icon">←</span> Back to Investigation Page
 </button>
 </div>
 </div>
</div>

<!-- Hero / Top summary bar -->
<header class="hero-bar">
 <div class="hero-inner">
 <div class="hero-title">
 <h1>Investigation Validation Summary</h1>
 <div class="hero-sub">Snapshot of the current investigation — concise, actionable</div>
 </div>
 <div class="hero-actions">
 <div class="progress-badge">Analysis: <strong>100% Complete</strong></div>
 <button class="icon-btn" title="Settings">⚙️</button>
 <button class="icon-btn" title=" Report">🔍</button>
 <!-- More details pill button -->
 <button class="hero-more-btn" (click)="goToQuestionSummary()" title="More details">
 <span class="hero-more-icon">🛈</span>
 <span class="hero-more-label">More details</span>
 </button>
 </div>
 </div>
</header>

<div class="validation-template-main">
 <div class="validation-template-flex">

 <!-- Single horizontal row containing independent card-modals -->
 <div class="cards-row">

 <!-- Case Summary Card (card-modal) -->
 <article class="card-modal card-modal-case">
 <header class="card-modal-header">Case Summary</header>
 <div class="card-modal-body">
 <div class="case-summary-fields">
 <div>Case ID: <b>CASE-007</b></div>
 <div>Officer: <b>Ganesh</b></div>
 <div>Date: <b>2025-10-15</b></div>
 <div>Suspect: <b>Jeeva</b></div>
 </div>
 <div class="case-summary-text">
 <div class="case-summary-heading">Investigation Summary</div>
 The suspect displayed calm emotions overall but showed minor inconsistency in hand gestures. <br />
 <b>Recommendation:</b> Conduct a short follow-up session.
 </div>
 </div>
 </article>

 <!-- Metrics Card -->
 <article class="card-modal card-modal-metrics">
 <header class="card-modal-header">Audio / Video Metrics</header>
 <div class="card-modal-body">
 <div class="metrics-bars">
 <div class="metrics-row-item">
 <div class="metrics-label">Speech</div>
 <div class="metrics-bar-bg">
 <div class="metrics-bar-fill" [style.width.%]="audioMetric1"></div>
 </div>
 <div class="metrics-value">{{ audioMetric1 }}%</div>
 </div>

 <div class="metrics-row-item">
 <div class="metrics-label">Eye Contact</div>
 <div class="metrics-bar-bg">
 <div class="metrics-bar-fill cyan" [style.width.%]="audioMetric2"></div>
 </div>
 <div class="metrics-value">{{ audioMetric2 }}%</div>
 </div>

 <div class="metrics-row-item">
 <div class="metrics-label">Emotion</div>
 <div class="metrics-bar-bg">
 <div class="metrics-bar-fill amber" [style.width.%]="audioMetric3"></div>
 </div>
 <div class="metrics-value">{{ audioMetric3 }}%</div>
 </div>

 <div class="metrics-row-item">
 <div class="metrics-label">Clarity</div>
 <div class="metrics-bar-bg">
 <div class="metrics-bar-fill" [style.width.%]="audioMetric4"></div>
 </div>
 <div class="metrics-value">{{ audioMetric4 }}%</div>
 </div>

 <div class="metrics-row-item">
 <div class="metrics-label">Confidence</div>
 <div class="metrics-bar-bg">
 <div class="metrics-bar-fill" [style.width.%]="audioMetric5"></div>
 </div>
 <div class="metrics-value">{{ audioMetric5 }}%</div>
 </div>
 </div>
 </div>
 </article>

 <!-- Validation Results Card -->
 <article class="card-modal card-modal-results">
 <header class="card-modal-header">Validation Results</header>
 <div class="card-modal-body results-horizontal">
 <div class="radial-chart-wrapper" aria-hidden="true">
 <svg viewBox="0 0 220 220" preserveAspectRatio="xMidYMid meet" class="radial-svg" role="img" aria-label="Validation radial chart">
 <g transform="translate(110,110) rotate(-90)">
 <circle [attr.r]="r1" class="radial-bg outer" stroke-width="10" fill="none" [attr.stroke-dasharray]="circumference1"></circle>
 <circle [attr.r]="r1" class="radial-anim outer-fg" stroke-width="10" fill="none" [attr.stroke-dasharray]="circumference1" [attr.stroke-dashoffset]="offset1" stroke-linecap="round"></circle>

 <circle [attr.r]="r2" class="radial-bg middle" stroke-width="10" fill="none" [attr.stroke-dasharray]="circumference2"></circle>
 <circle [attr.r]="r2" class="radial-anim middle-fg" stroke-width="10" fill="none" [attr.stroke-dasharray]="circumference2" [attr.stroke-dashoffset]="offset2" stroke-linecap="round"></circle>

 <circle [attr.r]="r3" class="radial-bg inner" stroke-width="10" fill="none" [attr.stroke-dasharray]="circumference3"></circle>
 <circle [attr.r]="r3" class="radial-anim inner-fg" stroke-width="10" fill="none" [attr.stroke-dasharray]="circumference3" [attr.stroke-dashoffset]="offset3" stroke-linecap="round"></circle>
 </g>
 </svg>
 </div>

 <div class="radial-values horizontal-values">
 <div class="radial-item">
 <div class="radial-icon" title="Audio"><span class="icon-audio">🔊</span></div>
 <div>
 <div class="radial-number">{{ audioAnalysisScore }}%</div>
 <div class="radial-label">Audio-Analysis</div>
 <div class="radial-detail">Truthness: <strong>{{ audioTruthness }}%</strong></div>
 </div>
 </div>
 <div class="radial-item">
 <div class="radial-icon" title="Video"><span class="icon-video">🎥</span></div>
 <div>
 <div class="radial-number">{{ videoAnalysisScore }}%</div>
 <div class="radial-label">Video-Analysis</div>
 <div class="radial-detail">Truthness: <strong>{{ videoTruthness }}%</strong></div>
 </div>
 </div>
 <div class="radial-item">
 <div class="radial-icon" title="Verified"><span class="icon-verified">✔️</span></div>
 <div>
 <div class="radial-number">{{ verifiedScore }}%</div>
 <div class="radial-label">Verified-Scores</div>
 <div class="radial-detail">Overall Truth Probability : <strong>{{ verifiedConfidence }}%</strong></div>
 </div>
 </div>
 </div>
 </div>
  </article>

 <!-- Summary Card (combined) -->
 <article class="card-modal card-modal-summary">
 <header class="card-modal-header">Summary</header>
 <div class="card-modal-body summary-grid">
 <div class="summary-card card-glass">
 <div class="card-top">Verdict / Status</div>
 <div class="card-value status-badge status-badge-green">Consistent</div>
 <div class="card-sub">Verdict derived from multi-modal analysis</div>
 </div>
 <div class="summary-card card-glass">
 <div class="card-top">Investigation Confidence</div>
 <div class="card-value confidence-percentage">92%</div>
 <div class="card-sub">Overall system confidence</div>
 </div>
 <div class="summary-card card-glass">
 <div class="card-top">Dominant Emotion</div>
 <div class="card-value emotion-emoji">😌 Calm</div>
 <div class="card-sub">Detected from vocal and facial cues</div>
 </div>
 <div class="summary-card card-glass">
 <div class="card-top">Session Overview</div>
 <div class="card-value">Audio {{ audioAnalysisScore }}% · Video {{ videoAnalysisScore }}% · Truth {{ verifiedConfidence }}%</div>
 <div class="card-sub">Quick breakdown of modal scores</div>
 </div>
 </div>
 </article>

 </div>

 </div>
</div>

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

<!-- Action buttons: Download / Email / Re-Analyze placed below the main template -->
<div class="validation-actions" aria-hidden="false">
 <button class="action-btn action-download" (click)="downloadPDF()" aria-label="Download Report">
 <span class="action-icon blue" aria-hidden="true"></span>
 <span class="action-label">Download Report</span>
 </button>

 <button class="action-btn action-email" (click)="emailReport()" aria-label="Email to Supervisor">
 <span class="action-icon purple" aria-hidden="true"></span>
 <span class="action-label">Email to Supervisor</span>
 </button>

 <button class="action-btn action-reanalyze" (click)="reAnalyze()" aria-label="Re-Analyze Audio/Video">
 <span class="action-icon green" aria-hidden="true"></span>
 <span class="action-label">Re-Analyze Audio/Video</span>
 </button>
</div>