| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Damage Report — CarDentIQ</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="css/base.css"> |
| <link rel="stylesheet" href="css/report.css"> |
| </head> |
| <body> |
| <header class="navbar"> |
| <div class="container navbar-inner"> |
| <a href="index.html" class="brand"> |
| <span class="brand-mark" aria-hidden="true"> |
| <svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M3 12.5 4.6 8a2 2 0 0 1 1.9-1.4h11a2 2 0 0 1 1.9 1.4L21 12.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/> |
| <rect x="2.4" y="12.5" width="19.2" height="5.2" rx="1.6" stroke="currentColor" stroke-width="1.7"/> |
| <circle cx="6.6" cy="17.7" r="1.6" fill="currentColor"/> |
| <circle cx="17.4" cy="17.7" r="1.6" fill="currentColor"/> |
| </svg> |
| </span> |
| <span class="brand-name">CarDentIQ</span> |
| </a> |
| <div class="navbar-actions"> |
| <a href="workspace.html" class="btn-secondary btn-sm">New Scan</a> |
| </div> |
| </div> |
| </header> |
|
|
| <div class="stepper-bar"> |
| <div class="stepper"> |
| <div class="step completed" data-step="1"><span class="step-num">✓</span><span class="step-label">Upload</span></div> |
| <div class="step-line filled"></div> |
| <div class="step completed" data-step="2"><span class="step-num">✓</span><span class="step-label">Analyze</span></div> |
| <div class="step-line filled"></div> |
| <div class="step active" data-step="3"><span class="step-num">3</span><span class="step-label">Report</span></div> |
| </div> |
| </div> |
|
|
| <main class="report-page"> |
| <div class="container"> |
|
|
| <div class="report-empty glass-card" id="emptyState" hidden> |
| <h2>No scan data found</h2> |
| <p>Start a new scan to generate a damage report.</p> |
| <a href="workspace.html" class="btn-primary">Start a Scan</a> |
| </div> |
|
|
| <div class="report-container" id="reportContainer" hidden> |
| <div class="severity-banner glass-card" id="severityBanner"> |
| <div class="severity-banner-left"> |
| <span class="severity-pill" id="severityPill">—</span> |
| <span class="severity-filename" id="severityFilename"></span> |
| </div> |
| <div class="summary-stats"> |
| <div class="stat"> |
| <span class="stat-value mono" id="statDefects">0</span> |
| <span class="stat-label">defects found</span> |
| </div> |
| <div class="stat"> |
| <span class="stat-value mono" id="statTypes">0</span> |
| <span class="stat-label">damage types</span> |
| </div> |
| <div class="stat"> |
| <span class="stat-value mono" id="statScore">0</span> |
| <span class="stat-label">severity score /10</span> |
| </div> |
| </div> |
| </div> |
| <div class="findings" id="findings"></div> |
|
|
| <div class="card glass-card"> |
| <div class="result-header"> |
| <h3>Detection Result</h3> |
| <span class="image-meta mono" id="imageMeta"></span> |
| </div> |
| <div class="result-image-wrap"> |
| <img id="outputImage" class="result-image" alt="Annotated image with detected damage"> |
| </div> |
| </div> |
|
|
| <div class="card glass-card detections-card"> |
| <h3>Detected Issues</h3> |
| <div class="detections-list" id="detectionsList"></div> |
| </div> |
|
|
| <details class="card glass-card technical-details"> |
| <summary>Technical details & export</summary> |
| <div class="advanced-body"> |
| <table id="resultsTable"> |
| <thead><tr><th>Class</th><th>Confidence</th><th>YOLO [cx, cy, w, h]</th></tr></thead> |
| <tbody></tbody> |
| </table> |
| <div class="downloads"> |
| <button class="btn-secondary" id="downloadCsv" disabled>Download CSV</button> |
| <button class="btn-secondary" id="downloadTxt" disabled>Download YOLO Labels (.txt)</button> |
| </div> |
| </div> |
| </details> |
|
|
| <div class="report-cta"> |
| <a href="workspace.html" class="btn-primary" id="scanAnotherBtn">Scan Another Vehicle</a> |
| </div> |
| </div> |
|
|
| </div> |
| </main> |
|
|
| <div class="toast-stack" id="toastStack" aria-live="polite"></div> |
|
|
| <script src="js/ui.js"></script> |
| <script src="js/report.js"></script> |
| </body> |
| </html> |
|
|
