jobtrackingapp/docs/ui-modernisation/visual-correction/route-review.html

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>A3 real application review — work in progress</title>
<style>
body{margin:24px;font:16px/1.5 system-ui,sans-serif;color:#302744;background:#f5f4f9}h1{font-size:26px}p{max-width:95ch}nav{display:flex;flex-wrap:wrap;gap:16px}label{display:grid;gap:4px}select{min-height:44px;max-width:100%;font:inherit;padding:6px}main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}figure{margin:0;min-width:0}figcaption{font-weight:600;margin-bottom:12px}img{display:block;width:100%}a{color:#694394}:focus-visible{outline:3px solid #694394;outline-offset:3px}@media(max-width:850px){body{margin:16px}main{grid-template-columns:1fr}}
</style>
<h1>A3: approved reference and real application</h1>
<p>Development evidence, not final acceptance. References are unchanged PNG bytes from approved A3 commit237c79b8. They include workshop controls and different synthetic content. Compare hierarchy, spacing, borders, navigation and available actions rather than whole-image pixels. Reference text is English/light; the real capture follows the controls below. Human, device, native-language and final security/release qualifications remain separate.</p>
<nav aria-label="Review controls">
  <label>Screen<select id="screen"></select></label>
  <label>Width<select id="width"><option value="320">320px phone</option><option value="360">360px phone</option><option value="390" selected>390px phone</option><option value="430">430px phone</option><option value="768">768px tablet</option><option value="1024">1024px</option><option value="1280">1280px</option><option value="1440">1440px desktop</option><option value="1920">1920px desktop</option></select></label>
  <label>Application language<select id="language"><option value="en">English</option><option value="nb">Norwegian Bokmål</option></select></label>
  <label>Application theme<select id="theme"><option value="light">Light</option><option value="dark">Dark</option></select></label>
</nav>
<p id="scope" role="status"></p>
<main>
  <figure><figcaption id="reference-caption">Approved A3 reference · English/light</figcaption><a id="reference-link"><img id="reference" alt=""></a></figure>
  <figure><figcaption>Real application · controlled fixtures</figcaption><a id="actual-link"><img id="actual" alt=""></a></figure>
</main>
<p><a href="comparison.html">Earlier CV comparison</a> · <a href="ROUTE_COVERAGE.json">All34 route dispositions</a> · <a href="DISCREPANCIES.md">Discrepancy register</a> · <a href="APPROVED_REFERENCE_MANIFEST.json">Frozen reference hashes</a></p>
<script>
const screens = [
  {name:'Dashboard',reference:'dashboard',folder:'dashboard',state:'dashboard',source:'a7d72673',scope:'Default density partially improved; saved geometry and all widgets retained. Full A3 visual parity remains open.'},
  {name:'Application table',reference:'applications',folder:'applications-flat',state:'table',source:'b6d830f2',scope:'Scoped populated table/phone rows; columns and actions retained.'},
  {name:'Application detail',reference:'detail',folder:'applications-flat',state:'detail',source:'b6d830f2',scope:'Recorded role hierarchy and right-side context; scoped fixture only.'},
  {name:'Job discovery',reference:'discover',folder:'discovery',state:'results',source:'a7d72673',scope:'Divided vacancies and existing supported source semantics. Synthetic NAV-shaped data; no new provider permissions.'},
  {name:'Career overview',reference:'career',folder:'career',state:'overview',source:'b31ce617',scope:'Open overview sections and all14 edit actions. Scoped216-state qualification passed; company/preview reads remain unavailable.'},
  {name:'Calendar agenda',reference:'calendar',folder:'calendar',state:'agenda',source:'b31ce617',scope:'Recorded deadlines/follow-ups only. Scoped108-state qualification passed; no invented interview appointments or original timezone precision.'},
  {name:'Document results',reference:'documents',folder:'documents-inbox',state:'document-filtered',source:'b31ce617',scope:'Targeted result viewport; filters, downloads and source links remain. Scoped document/mail216-state qualification passed.'},
  {name:'Opened mail message',reference:'correspondence',folder:'mail-flat',state:'message',source:'a9208ab4',scope:'Open mail rows and recorded application context. Synthetic draft/confirmed-send/uncertain outcome only; label-count grammar remains open.'},
  {name:'Sign in',reference:'login',folder:'public-entry',state:'login',source:'fa6bd5d9',scope:'Public EN/NB controls, browser-local preference and current-locale feedback. Real authentication remains unqualified.'},
  {name:'Registration',reference:'register',folder:'public-entry',state:'register',source:'fa6bd5d9',scope:'Scoped public form presentation; no real account creation.'},
  {name:'Password recovery',reference:'recovery',folder:'public-entry',state:'password-request',source:'fa6bd5d9',scope:'Scoped recovery form; no real email delivery or password reset.'},
];
const screen = document.getElementById('screen');
screens.forEach((entry,index)=>{const option=document.createElement('option');option.value=String(index);option.textContent=entry.name;screen.append(option);});
function update(){
  const item=screens[Number(screen.value)],width=document.getElementById('width').value,language=document.getElementById('language').value,theme=document.getElementById('theme').value;
  const referenceWidth=Number(width)<=430?'390':'1440';
  const reference=`evidence/reference/approved-${item.reference}-${referenceWidth}.png`,actual=`evidence/${item.folder}/${item.state}-${language}-${theme}-${width}.png`;
  document.getElementById('reference-caption').textContent=`Approved A3 reference · ${referenceWidth}px · English/light`;
  document.getElementById('reference').src=reference;document.getElementById('reference').alt=`Approved A3 ${item.name}, ${referenceWidth}px, English/light, with workshop controls`;
  document.getElementById('actual').src=actual;document.getElementById('actual').alt=`Actual ${item.name}, ${width}px, ${language}, ${theme}, source ${item.source}`;
  document.getElementById('reference-link').href=reference;document.getElementById('actual-link').href=actual;
  document.getElementById('scope').textContent=`Source ${item.source}. ${item.scope} Click an image to inspect the original capture.`;
}
document.querySelectorAll('select').forEach(control=>control.addEventListener('change',update));update();
</script>
</html>