GUI a11y/perf polish

Non-blocking webfont load (preload + onload swap, noscript fallback) so text
paints immediately; introduce --ok-text for AA-contrast success labels; darken
muted/faint tokens; tabular numerics in data-date cells.

Author: HarryXin0919

scripts/gui.html

@@ -8,14 +8,15 @@
 (function(){var t=localStorage.getItem('theme');if(t!=='light'&&t!=='dark'){var h=new Date().getHours();t=(h>=7&&h<19)?'light':'dark';}document.documentElement.setAttribute('data-theme',t);})();</script>
 <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=Roboto:wght@400;500;700;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
+<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" onload="this.onload=null;this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap"></noscript>
 <style>
   :root{
     --brand:#FD4E63; --brand-ink:#D5344E; --brand2:#FF3B3B;
     --grad:linear-gradient(135deg,#FB7299 0%,#FF3B3B 100%);
     --brand-soft:rgba(253,78,99,.12);
-    --bili:#FB7299; --yt:#FF0000; --ok:#1F9D55;
-    --ink:#15181C; --muted:#6A7480; --faint:#9AA4AD;
+    --bili:#FB7299; --yt:#FF0000; --ok:#1F9D55; --ok-text:#157A42;
+    --ink:#15181C; --muted:#5E6873; --faint:#7C8893;
     --line:#EAEDF0; --card:#FFFFFF; --bg:#F6F7F9;
     --nav-bg:rgba(255,255,255,.82);
     --input-bg:#FFFFFF; --code-bg:#F0F2F4;
@@ -30,7 +31,7 @@
     --brand:#FF6E83; --brand-ink:#FF6E83; --brand2:#FF5A5A;
     --grad:linear-gradient(135deg,#FF8FB0 0%,#FF5A5A 100%);
     --brand-soft:rgba(255,110,131,.16);
-    --bili:#FF8FB0; --yt:#FF4D4D; --ok:#37C871;
+    --bili:#FF8FB0; --yt:#FF4D4D; --ok:#37C871; --ok-text:#37C871;
     --ink:#EDF0F3; --muted:#9BA7B3; --faint:#6C7783;
     --line:#262C34; --card:#181C22; --bg:#0F1216;
     --nav-bg:rgba(18,22,26,.80);
@@ -90,7 +91,7 @@
   .hero .meaning{margin-top:16px;font-size:17px;font-weight:600;color:var(--brand-ink)}
   .hero .desc{margin-top:8px;font-size:15.5px;color:var(--muted);max-width:680px;line-height:1.7}
   .hero .privacy{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:12.5px;
-    font-weight:600;color:var(--ok);background:rgba(31,157,85,.12);padding:5px 13px;border-radius:999px}
+    font-weight:600;color:var(--ok-text);background:rgba(31,157,85,.12);padding:5px 13px;border-radius:999px}
   .hero .privacy svg{width:13px;height:13px}
 
   /* ——— layout ——— */
@@ -112,7 +113,7 @@
   /* ——— pills (status) ——— */
   .pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
     border-radius:999px;padding:4px 11px;margin-left:8px}
-  .pill.on{background:rgba(31,157,85,.13);color:var(--ok)}
+  .pill.on{background:rgba(31,157,85,.13);color:var(--ok-text)}
   .pill.off{background:rgba(140,150,160,.16);color:var(--muted)}
 
   /* ——— platform chips ——— */
@@ -196,7 +197,7 @@
 
   /* ——— creators 表的「数据」列 ——— */
   .dcell{font-variant-numeric:tabular-nums;font-weight:600;font-size:12.5px;color:var(--ink);white-space:nowrap}
-  .dcell .ddate{color:var(--faint);font-weight:500}
+  .dcell .ddate{color:var(--muted);font-weight:500}
 
   /* ——— toolbar ——— */
   .toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 6px;align-items:center}
@@ -229,7 +230,7 @@
     font-variant-numeric:tabular-nums}
   .vstats span{display:inline-flex;align-items:center;gap:4px}
   .vstats svg{width:13px;height:13px;opacity:.65}
-  .empty{grid-column:1/-1;text-align:center;color:var(--faint);padding:38px 0;font-size:14px}
+  .empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:38px 0;font-size:14px}
   .more-wrap{text-align:center;margin-top:22px}
   #vmore{display:none}
 
@@ -247,14 +248,29 @@
     background:var(--ink);color:var(--bg);font-size:13.5px;font-weight:600;padding:12px 22px;border-radius:13px;
     box-shadow:0 16px 44px -16px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:80vw}
   #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
-  .foot{text-align:center;color:var(--faint);font-size:12.5px;margin-top:8px}
+  .foot{text-align:center;color:var(--muted);font-size:12.5px;margin-top:8px}
   .foot a{color:var(--brand-ink);font-weight:600}
   .foot a:hover{text-decoration:underline}
 
+  /* ——— 键盘焦点可见环(WCAG 2.4.7):统一所有可聚焦控件 ——— */
+  :focus-visible{outline:2px solid var(--brand);outline-offset:2px}
+  input:focus-visible,.sel:focus-visible{outline:none;border-color:var(--brand);
+    box-shadow:0 0 0 3px var(--brand-soft),0 0 0 1.5px var(--brand)}
+  .chip:has(input:focus-visible){border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
+  .vcard:focus-visible{border-color:transparent}
+
   @media (max-width:560px){
     .hero h1{font-size:38px} .hero-inner{padding:46px 22px 40px}
     .card{padding:22px 18px} .head-actions{width:100%;margin-left:0}
   }
+
+  /* ——— 尊重系统「减少动态效果」偏好(prefers-reduced-motion)——— */
+  @media (prefers-reduced-motion: reduce){
+    html{scroll-behavior:auto}
+    *,*::before,*::after{animation-duration:.001ms!important;
+      animation-iteration-count:1!important;transition-duration:.001ms!important}
+    body.lswitch .hero,body.lswitch .wrap{opacity:1}
+  }
 </style>
 </head>
 <body>
@@ -304,11 +320,11 @@ <h1>vira<span class="hl">lens</span></h1>
       </div>
 
       <div class="key-row" id="row-bili">
-        <label class="fld" data-i18n="sessLabel"></label>
+        <label class="fld" for="sessdata" data-i18n="sessLabel"></label>
         <input id="sessdata" type="password" autocomplete="off" data-i18n-ph="sessPh">
       </div>
       <div class="key-row" id="row-yt">
-        <label class="fld" data-i18n="ytLabel"></label>
+        <label class="fld" for="ytkey" data-i18n="ytLabel"></label>
         <input id="ytkey" type="password" autocomplete="off" data-i18n-ph="ytPh">
       </div>
 
@@ -379,17 +395,17 @@ <h1>vira<span class="hl">lens</span></h1>
       <div class="toolbar">
         <div class="search">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
-          <input id="vsearch" oninput="resetPage();renderGrid()" data-i18n-ph="searchPh">
+          <input id="vsearch" type="text" oninput="resetPage();renderGrid()" data-i18n-ph="searchPh" data-i18n-aria="searchAria">
         </div>
-        <select class="sel" id="vsort" onchange="resetPage();renderGrid()">
+        <select class="sel" id="vsort" onchange="resetPage();renderGrid()" data-i18n-aria="sortAria">
           <option value="play" data-i18n="sortPlay"></option>
           <option value="date" data-i18n="sortDate"></option>
           <option value="comment" data-i18n="sortComment"></option>
           <option value="like" data-i18n="sortLike"></option>
           <option value="danmaku" data-i18n="sortDanmaku"></option>
           <option value="duration_sec" data-i18n="sortDur"></option>
         </select>
-        <select class="sel" id="vplat" onchange="resetPage();renderGrid()">
+        <select class="sel" id="vplat" onchange="resetPage();renderGrid()" data-i18n-aria="platAria">
           <option value="all" data-i18n="platAll"></option>
           <option value="bilibili">Bilibili</option>
           <option value="youtube">YouTube</option>
@@ -454,6 +470,8 @@ <h1>vira<span class="hl">lens</span></h1>
     tDoneReport:"跑完了 ✓ 可以开报告", tDoneData:"数据取好了 ✓", tErr:"出错了,看日志",
     tNeedPath:"先填文件路径", tImportOk:(c,v)=>`导入成功:${c} 位 · ${v} 条`, tImportErr:e=>"导入失败:"+e,
     tPickOne:"至少选一个平台",
+    searchAria:"搜索视频", sortAria:"排序方式", platAria:"按平台筛选",
+    themeToDark:"切换到深色", themeToLight:"切换到浅色", tNeedRun:"先点「抓取并分析」生成",
   },
   en:{
     brandChip:"video data lens", langBtn:"中",
@@ -502,6 +520,8 @@ <h1>vira<span class="hl">lens</span></h1>
     tDoneReport:"Done ✓ report ready", tDoneData:"Data ready ✓", tErr:"Failed — check the log",
     tNeedPath:"Enter a file path first", tImportOk:(c,v)=>`Imported: ${c} creators · ${v} videos`, tImportErr:e=>"Import failed: "+e,
     tPickOne:"Pick at least one platform",
+    searchAria:"Search videos", sortAria:"Sort by", platAria:"Filter by platform",
+    themeToDark:"Switch to dark", themeToLight:"Switch to light", tNeedRun:"Run “Fetch & Analyze” first",
   }
 };
 /* 分区名:中英双语(原始值来自 creators.py 的 zone 字段) */
@@ -519,6 +539,8 @@ <h1>vira<span class="hl">lens</span></h1>
   document.getElementById('langLabel').textContent = L().langBtn;
   document.querySelectorAll('[data-i18n]').forEach(el=>{ const v=L()[el.dataset.i18n]; if(typeof v==='string') el.innerHTML=v; });
   document.querySelectorAll('[data-i18n-ph]').forEach(el=>{ const v=L()[el.dataset.i18nPh]; if(typeof v==='string') el.placeholder=v; });
+  document.querySelectorAll('[data-i18n-aria]').forEach(el=>{ const v=L()[el.dataset.i18nAria]; if(typeof v==='string') el.setAttribute('aria-label',v); });
+  updateThemeBtn();
 }
 function toggleLang(){
   lang = lang==='zh'?'en':'zh'; localStorage.setItem('lang',lang);
@@ -531,7 +553,7 @@ <h1>vira<span class="hl">lens</span></h1>
 const ICON_MOON='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>';
 const ICON_SUN ='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4.5"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>';
 function curTheme(){ return document.documentElement.getAttribute('data-theme')||'light'; }
-function updateThemeBtn(){ document.getElementById('themeBtn').innerHTML = curTheme()==='dark' ? ICON_SUN : ICON_MOON; }
+function updateThemeBtn(){ const b=document.getElementById('themeBtn'); b.innerHTML = curTheme()==='dark' ? ICON_SUN : ICON_MOON; b.setAttribute('aria-label', curTheme()==='dark' ? L().themeToLight : L().themeToDark); }
 function toggleTheme(){
   const next = curTheme()==='dark' ? 'light' : 'dark';
   const root = document.documentElement;
@@ -623,13 +645,17 @@ <h1>vira<span class="hl">lens</span></h1>
   const no_fetch=document.getElementById('nofetch').checked, force=document.getElementById('force').checked;
   const platforms=selectedPlatforms();
   const log=document.getElementById('log'); log.style.display='block'; log.textContent='…';
-  const r=await fetch('/api/run',{method:'POST',headers:{'Content-Type':'application/json'},
-    body:JSON.stringify({mode,no_fetch,force,platforms})});
+  let r;
+  try{ r=await fetch('/api/run',{method:'POST',headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({mode,no_fetch,force,platforms})}); }
+  catch(e){ log.textContent=''; toast(L().tErr); return; }
   if(r.status===409){ toast(L().tRunningWait); return; }
   setRunning(true); if(polling) clearInterval(polling); polling=setInterval(poll,900);
 }
 async function poll(){
-  const p=await (await fetch('/api/progress')).json();
+  let p;
+  try{ p=await (await fetch('/api/progress')).json(); }
+  catch(e){ clearInterval(polling); polling=null; setRunning(false); toast(L().tErr); return; }
   const log=document.getElementById('log'); log.textContent=p.lines.join('\n'); log.scrollTop=log.scrollHeight;
   if(!p.running){ clearInterval(polling); polling=null; setRunning(false);
     await refreshStatus(); await loadData();
@@ -689,8 +715,14 @@ <h1>vira<span class="hl">lens</span></h1>
   else more.style.display='none';
 }
 
-function openReport(){ window.open('/report','_blank'); }     /* 自包含 HTML 报告(跑过「抓取并分析」后生成) */
-function openDiag(){ window.open('/diagnose','_blank'); }      /* 单视频体检页(选一条视频逐维度诊断) */
+async function openReport(){                                   /* 自包含 HTML 报告(跑过「抓取并分析」后生成) */
+  try{ const r=await fetch('/report'); if(r.status===404){ toast(L().tNeedRun); return; } }catch(e){}
+  window.open('/report','_blank');
+}
+function openDiag(){                                            /* 单视频体检页(选一条视频逐维度诊断) */
+  if(!STATE.total){ toast(L().tNeedRun); return; }
+  window.open('/diagnose','_blank');
+}
 async function doImport(){
   const path=document.getElementById('imp').value.trim();
   if(!path){ toast(L().tNeedPath); return; }
@@ -701,7 +733,7 @@ <h1>vira<span class="hl">lens</span></h1>
 }
 
 /* ——————————————————— boot ——————————————————— */
-updateThemeBtn(); applyLang(); restorePlatforms(); refreshStatus(); loadData();
+updateThemeBtn(); applyLang(); restorePlatforms(); refreshStatus().catch(()=>{}); loadData().catch(()=>{});
 </script>
 </body>
 </html>