| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Analyze a Vehicle — 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/workspace.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="index.html" class="btn-secondary btn-sm">← Home</a> |
| </div> |
| </div> |
| </header> |
|
|
| <div class="stepper-bar"> |
| <div class="stepper"> |
| <div class="step active" data-step="1"> |
| <span class="step-num">1</span><span class="step-label">Upload</span> |
| </div> |
| <div class="step-line" id="line1"></div> |
| <div class="step" data-step="2"> |
| <span class="step-num">2</span><span class="step-label">Analyze</span> |
| </div> |
| <div class="step-line" id="line2"></div> |
| <div class="step" data-step="3"> |
| <span class="step-num">3</span><span class="step-label">Report</span> |
| </div> |
| </div> |
| </div> |
|
|
| <main class="workspace-page"> |
| <span class="glow-orb orb-1"></span> |
| <span class="glow-orb orb-2"></span> |
|
|
| <div class="workspace-header"> |
| <span class="eyebrow" id="stepEyebrow"><span class="dot"></span> Step 1 of 3</span> |
| <h1>Upload a vehicle photo</h1> |
| <p>We'll detect and classify damage, then hand you a full report.</p> |
| </div> |
|
|
| <section class="card workspace-card glass-card"> |
| <div class="dropzone" id="dropzone" tabindex="0" role="button" aria-label="Upload vehicle image"> |
| <input type="file" id="imageInput" accept="image/*" hidden> |
| <div class="dropzone-empty" id="dropzoneEmpty"> |
| <div class="upload-icon"> |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M12 15V4m0 0 4 4m-4-4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/> |
| <path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/> |
| </svg> |
| </div> |
| <p class="dropzone-title">Drag & drop a vehicle photo, or click to browse</p> |
| <p class="dropzone-hint">JPG, PNG or WebP</p> |
| </div> |
| <div class="dropzone-preview" id="dropzonePreview" hidden> |
| <div class="dropzone-preview-frame"> |
| <img id="previewImage" alt="Selected vehicle image"> |
| <div class="scan-overlay" id="scanOverlay"> |
| <div class="scan-line"></div> |
| <span class="scan-overlay-label">Analyzing…</span> |
| </div> |
| </div> |
| <div class="dropzone-preview-meta"> |
| <span id="previewFileName"></span> |
| <span class="dot-sep">·</span> |
| <span id="previewFileInfo" class="mono"></span> |
| <button type="button" class="btn-ghost" id="changeImageBtn">Change image</button> |
| </div> |
| </div> |
| </div> |
|
|
| <details class="advanced"> |
| <summary>Advanced detection settings</summary> |
| <div class="advanced-body"> |
| <label class="checkbox"> |
| <input type="checkbox" id="resizeCb"> |
| Resize to 1024px max before inference (faster on large images) |
| </label> |
|
|
| <h4>Per-class confidence thresholds</h4> |
| <div id="sliders" class="sliders-grid"></div> |
|
|
| <div id="legend" class="legend"></div> |
| </div> |
| </details> |
|
|
| <button id="runBtn" class="btn-primary btn-block" disabled>Analyze Image</button> |
| </section> |
| </main> |
|
|
| <div class="toast-stack" id="toastStack" aria-live="polite"></div> |
|
|
| <script src="js/ui.js"></script> |
| <script src="js/workspace.js"></script> |
| </body> |
| </html> |
|
|
