Files
jobtrackingapp/docs/ui-modernisation/visual-correction/comparison.html
T

18 lines
2.1 KiB
HTML

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>A3 CV visual comparison — implementation in progress</title>
<style>
body{font:16px/1.5 system-ui,sans-serif;color:#302744;background:#f5f4f9;margin:24px}h1{font-size:26px}p{max-width:85ch}main{display:grid;grid-template-columns:repeat(3,minmax(280px,1fr));gap:24px;align-items:start}figure{margin:0}figcaption{font-weight:600;margin-bottom:12px}img{width:100%;max-width:430px;display:block}a{color:#694394}@media(max-width:950px){main{grid-template-columns:1fr}}
</style>
<h1>A3 CV workspace: visual correction in progress</h1>
<p>This compares actual browser captures with the approved design reference. The prototype includes workshop controls above its application canvas and uses different synthetic content. Compare hierarchy, borders, spacing and controls; these are not pixel-identical fixtures. The application is not ready for final owner acceptance.</p>
<main>
<figure><figcaption>Approved A3 reference, 390px</figcaption><a href="evidence/reference/approved-cv-390.png"><img src="evidence/reference/approved-cv-390.png" alt="Approved A3 mobile CV design with open sections, below workshop controls"></a></figure>
<figure><figcaption>Earlier actual UI, 320px</figcaption><a href="evidence/reference/before-ai-review-en-light-320.png"><img src="evidence/reference/before-ai-review-en-light-320.png" alt="Earlier implementation with two-row app header and nested CV and AI cards"></a></figure>
<figure><figcaption>Corrected actual UI, 320px</figcaption><a href="evidence/cv/ai-review-en-light-320.png"><img src="evidence/cv/ai-review-en-light-320.png" alt="Current implementation with compact app header and open CV and AI sections"></a></figure>
</main>
<p><a href="evidence/cv/content-en-light-390.png">Corrected mobile content</a> · <a href="evidence/cv/content-nb-dark-390.png">Norwegian dark content</a> · <a href="evidence/reference/approved-cv-1440.png">Approved desktop reference</a> · <a href="evidence/cv/content-en-light-1440.png">Current desktop content</a> · <a href="DISCREPANCIES.md">Open discrepancies</a></p>
</html>