inspectra-engine 0.0.0-stage → 1.0.2

package/ui/index.html

@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Accessibility Scanner</title>
+<style>
+  :root{--bg:#f7f8fa;--card:#fff;--fg:#14161a;--mut:#667085;--line:#e6e8ec;--soft:#f2f4f7;--acc:#5b5bf0;--acc2:#8b5cf6;--good:#0a7a3d;--avg:#c33300;--bad:#c7221f;--r:14px}
+  @media(prefers-color-scheme:dark){:root{--bg:#0d0f13;--card:#161920;--fg:#eceef2;--mut:#98a2b3;--line:#262a33;--soft:#1d212a;--good:#3ddc84;--avg:#ffb020;--bad:#ff6b61}}
+  *{box-sizing:border-box}
+  body{font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;max-width:1180px;margin:0 auto;padding:2.2rem 1.2rem 4rem;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased}
+  h1{font-size:1.9rem;letter-spacing:-.03em;margin:0 0 1.2rem;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
+  h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:2rem 0 .6rem;font-weight:600}
+  a{color:var(--acc)}
+  code{font:.85em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--soft);padding:.1em .35em;border-radius:5px}
+  form{display:flex;gap:.6rem;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem;box-shadow:0 1px 2px rgba(16,24,40,.04)}
+  label.opt:first-child{color:var(--mut);font-size:.8rem;font-weight:500}
+  input[type=url]{flex:1;min-width:240px;padding:.7rem .9rem;font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:10px;outline:0;transition:.15s}
+  input[type=url]:focus{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
+  button{padding:.7rem 1.4rem;font:600 .95rem ui-sans-serif,system-ui,sans-serif;border:0;border-radius:10px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;cursor:pointer;transition:.15s}
+  button:hover{filter:brightness(1.08)}button:active{transform:scale(.98)}
+  button:disabled{opacity:.55;cursor:progress}
+  .opt{width:100%;font-size:.85rem;color:var(--mut)}
+  input[type=checkbox]{accent-color:var(--acc);margin-right:.4rem}
+  #out>p:first-child{display:inline-block;background:var(--soft);border-radius:99px;padding:.25rem .8rem;font-size:.85rem;color:var(--mut);margin:1.2rem 0 0}
+  .sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.7rem;margin:1rem 0}
+  .sum div{padding:.8rem 1rem;border-radius:var(--r);background:var(--card);border:1px solid var(--line);color:var(--mut);font-size:.85rem}
+  .sum b{display:block;font-size:1.5rem;color:var(--fg);letter-spacing:-.02em}
+  details{border:1px solid var(--line);background:var(--card);border-radius:12px;margin:.5rem 0;padding:.7rem 1rem}
+  details[open]{box-shadow:0 1px 3px rgba(16,24,40,.06)}
+  summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:.3rem}
+  summary::-webkit-details-marker{display:none}
+  summary::before{content:"›";color:var(--mut);display:inline-block;width:1rem;transition:transform .15s}
+  details[open]>summary::before{transform:rotate(90deg)}
+  summary:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
+  .tag{font-size:.7rem;font-weight:600;text-transform:capitalize;padding:.1rem .55rem;border-radius:99px;color:#fff;margin-right:.4rem}
+  .critical{background:#d92d20}.serious{background:#e5590a}.moderate{background:#a16207}.minor{background:#667085}
+  pre{background:var(--soft);padding:.6rem .8rem;border-radius:8px;overflow:auto;white-space:pre-wrap;word-break:break-all;font:.8rem ui-monospace,Menlo,monospace}
+  .gauges{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin:.6rem 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1rem}
+  .gauge{text-align:center;width:104px}
+  .gauge svg{width:84px;height:84px;transform:rotate(-90deg)}
+  .gauge .bg{fill:none;stroke-width:7;opacity:.15}
+  .gauge .fg{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .8s}
+  .gauge .n{font:600 1.5rem/84px ui-sans-serif,system-ui;position:absolute;inset:0 0 auto 0;height:84px;letter-spacing:-.02em}
+  .gauge .wrap{position:relative;width:84px;margin:0 auto}
+  .gauge .l{margin-top:.5rem;font-size:.82rem;font-weight:500}
+  .gauge small{display:block;color:var(--mut);font-size:.7rem}
+  .g-good{color:var(--good);stroke:#0cce6b}.g-avg{color:var(--avg);stroke:#ffa400}.g-bad{color:var(--bad);stroke:#ff4e42}
+  .g-na{color:var(--mut);stroke:#999}
+  .pill{display:inline-block;height:auto;font:600 1rem ui-sans-serif,system-ui;padding:.4rem .9rem;border-radius:99px;margin-top:1.4rem;background:color-mix(in srgb,var(--good) 14%,transparent);stroke:none}
+  .pill.g-avg{background:color-mix(in srgb,var(--avg) 14%,transparent)}.pill.g-bad{background:color-mix(in srgb,var(--bad) 14%,transparent)}
+  .gauge .wrap:has(.pill){height:84px}
+  .lh-cat{margin-top:.7rem}
+  .lh-cat>summary{font-size:1rem}
+  .lh-cat h3{font-size:.8rem;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin:1.1rem 0 .3rem}
+  .lh-a{border:0;border-top:1px solid var(--line);border-radius:0;margin:0;padding:.5rem 0;box-shadow:none!important;background:none}
+  .lh-a>summary{font-weight:500;font-size:.92rem}
+  .dot{display:inline-block;flex:none;width:.55rem;height:.55rem;border-radius:50%;margin-right:.3rem}
+  .dot.fail,.dot.error{background:#ff4e42}.dot.pass{background:#0cce6b}.dot.manual,.dot.info,.dot.na{background:#98a2b3}
+  .val{color:var(--bad);font-size:.8rem;margin-left:.4rem;font-weight:500}
+  .lh-a p{margin:.3rem 0 .3rem 1.5rem;font-size:.88rem;color:var(--mut)}
+  .tw{overflow:auto;margin:.3rem 0 .3rem 1.5rem;border:1px solid var(--line);border-radius:10px}
+  table{border-collapse:collapse;font-size:.78rem;width:100%}
+  th,td{border-bottom:1px solid var(--line);padding:.35rem .6rem;text-align:left;vertical-align:top;word-break:break-all;max-width:420px}
+  tr:last-child td{border-bottom:0}
+  th{background:var(--soft);font-weight:600;color:var(--mut)}
+  .full{display:inline-block;margin:.6rem 0;font-size:.88rem;font-weight:500;text-decoration:none}
+  .full:hover{text-decoration:underline}
+  .err{color:var(--bad)}
+  .nav{display:flex;gap:.6rem;margin-bottom:1.8rem;border-bottom:1px solid var(--line);padding-bottom:.8rem}
+  .nav-link{text-decoration:none;font-weight:600;font-size:.9rem;padding:.4rem .9rem;border-radius:8px;color:var(--mut);transition:.15s}
+  .nav-link:hover{color:var(--fg);background:var(--soft)}
+  .nav-link.active{color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2))}
+  @media(max-width:520px){body{padding-top:1.5rem}.gauge{width:90px}}
+  @media(prefers-reduced-motion:reduce){*{transition:none!important}}
+</style>
+</head>
+<body>
+<nav class="nav">
+  <a href="/" class="nav-link active">Accessibility Scanner</a>
+  <a href="/compare" class="nav-link">Visual Regression Comparison</a>
+  <a href="/compare-2" class="nav-link">UI Differences</a>
+  <a href="/compare-3" class="nav-link">UI Completeness Check</a>
+</nav>
+<h1>Accessibility Scanner</h1>
+<form id="f">
+  <label for="u" class="opt">Page URL</label>
+  <input id="u" type="url" required placeholder="https://your-site.com" autofocus>
+  <button id="b">Scan</button>
+  <label class="opt"><input type="checkbox" id="bp" checked> Include best-practice rules (beyond WCAG A/AA)</label>
+</form>
+<div id="out" aria-live="polite"></div>
+<script>
+const gauge=(label,s)=>{
+  const v=s.score,cls=v==null?'g-na':v>=90?'g-good':v>=50?'g-avg':'g-bad',C=2*Math.PI*45;
+  return `<div class="gauge ${cls}"><div class="wrap"><svg viewBox="0 0 100 100" aria-hidden="true"><circle class="bg" cx="50" cy="50" r="45" stroke="currentColor"/>
+    <circle class="fg" cx="50" cy="50" r="45" stroke-dasharray="${C}" stroke-dashoffset="${C*(1-(v||0)/100)}"/></svg>
+    <span class="n">${v==null?'–':v}</span></div><div class="l">${label}</div>${s.failed==null?'':`<small>${s.failed} failed · ${s.passed} passed</small>`}</div>`;
+};
+const agentic=a=>a?`<div class="gauge"><div class="wrap"><span class="pill ${a.passed===a.total?'g-good':a.passed?'g-avg':'g-bad'}">${a.passed}/${a.total}</span></div><div class="l">Agentic Browsing</div></div>`:'';
+const md=s=>esc(s).replace(/\[([^\]]+)\]\((https?:[^)\s]+)\)/g,'<a href="$2" target="_blank" rel="noopener">$1</a>').replace(/`([^`]+)`/g,'<code>$1</code>');
+const lhAudit=a=>`<details class="lh-a"><summary><span class="dot ${a.status}"></span>${esc(a.title)}${a.displayValue?`<span class="val">${esc(a.displayValue)}</span>`:''}</summary>
+  <p>${md(a.description||'')}</p>${a.details?`<div class="tw"><table><thead><tr>${a.details.headings.map(x=>`<th>${esc(x)}</th>`).join('')}</tr></thead><tbody>${a.details.rows.map(r=>`<tr>${r.map(c=>`<td>${esc(c)}</td>`).join('')}</tr>`).join('')}</tbody></table>${a.details.total>a.details.rows.length?`<small>Showing ${a.details.rows.length} of ${a.details.total}</small>`:''}</div>`:''}</details>`;
+const lhSection=(t,list,open)=>list.length?`<h3>${t} (${list.length})</h3>${open?list.map(lhAudit).join(''):`<details><summary>Show</summary>${list.map(lhAudit).join('')}</details>`}`:'';
+const lhCategory=c=>{
+  const by=s=>c.audits.filter(a=>s.includes(a.status));
+  const bad=by(['fail','error']).sort((x,y)=>(x.score??0)-(y.score??0));
+  return `<details class="lh-cat" ${bad.length?'open':''}><summary>${esc(c.title)} — ${bad.length} to improve</summary>
+    ${bad.length?lhSection('Needs improvement',bad,true):'<p>Nothing to improve.</p>'}
+    ${lhSection('Manual checks',by(['manual']),false)}${lhSection('Additional info',by(['info']),false)}
+    ${lhSection('Passed audits',by(['pass']),false)}${lhSection('Not applicable',by(['na']),false)}</details>`;
+};
+const esc=s=>String(s).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
+f.onsubmit=async e=>{
+  e.preventDefault(); b.disabled=true; out.textContent='Scanning… this can take 10-30 seconds.';
+  try{
+    const r=await fetch('/scan',{method:'POST',body:JSON.stringify({url:u.value.trim(),bestPractice:bp.checked})});
+    const d=await r.json(); if(d.error) throw new Error(d.error);
+    out.innerHTML=`<p>Scanned <strong>${esc(d.url)}</strong></p>
+      <h2>Lighthouse</h2>
+      ${d.lighthouse?`<div class="gauges" role="group" aria-label="Lighthouse scores">${[['performance','Performance'],['accessibility','Accessibility'],['best-practices','Best Practices'],['seo','SEO']].map(([k,l])=>gauge(l,{score:d.lighthouse[k]})).join('')}${agentic(d.lighthouse['agentic-browsing'])}</div>`:`<p class="err">Lighthouse scores unavailable: ${esc(d.lighthouseError||'unknown error')}</p>`}
+      ${d.reportId?`<a class="full" href="/report/${d.reportId}" target="_blank" rel="noopener">Open full Lighthouse report (same as Chrome) ↗</a>`:''}
+      ${(d.lighthouseCategories||[]).map(lhCategory).join('')}
+      <h2>WCAG (axe-core)</h2>
+      <div class="gauges" role="group" aria-label="WCAG scores">${gauge('WCAG overall',d.scores.overall)}${gauge('WCAG A',d.scores.a)}${gauge('WCAG AA',d.scores.aa)}</div>
+      <div class="sum"><div><b>${d.counts.violations}</b> violations</div><div><b>${d.counts.incomplete}</b> need review</div><div><b>${d.counts.passes}</b> passed</div></div>`+
+      (d.violations.length?'':'<p>No WCAG A/AA violations found automatically. Manual checks are still needed.</p>')+
+      d.violations.map(v=>`<details><summary><span class="tag ${v.impact}">${v.impact}</span>${esc(v.help)} <small>(${v.totalNodes} elements)</small></summary>
+        <p>Rule <code>${esc(v.id)}</code> · ${esc(v.tags.join(', '))} · <a href="${esc(v.helpUrl)}" target="_blank" rel="noopener">How to fix</a></p>
+        ${v.nodes.map(n=>`<p><code>${esc(n.target)}</code></p><pre>${esc(n.html)}</pre><pre>${esc(n.fix)}</pre>`).join('')}</details>`).join('');
+  }catch(err){out.innerHTML=`<p class="err">Error: ${esc(err.message)}</p>`}
+  b.disabled=false;
+};
+</script>
+</body>
+</html>