diff --git a/assets/template.html b/assets/template.html index 5d0695f..dbd3bb1 100644 --- a/assets/template.html +++ b/assets/template.html @@ -573,7 +573,47 @@ function go(n){ lock=true;setTimeout(()=>lock=false,700); } +/* =============== ESC 索引视图 =============== */ +let overviewOn=false; +const ov=document.createElement('div'); +ov.id='overview'; +ov.style.cssText='position:fixed;inset:0;z-index:100;background:rgba(var(--ink-rgb),.92);backdrop-filter:blur(12px);display:none;overflow-y:auto;padding:4vh 4vw'; +document.body.appendChild(ov); + +function buildOverview(){ + ov.innerHTML=''; + const grid=document.createElement('div'); + grid.style.cssText='display:grid;grid-template-columns:repeat(4,1fr);gap:2vh 1.6vw;max-width:90vw;margin:0 auto'; + slides.forEach((s,i)=>{ + const card=document.createElement('div'); + card.style.cssText='cursor:pointer;border-radius:6px;overflow:hidden;border:2px solid '+(i===idx?'rgba(var(--paper-rgb),.8)':'rgba(var(--paper-rgb),.15)')+';transition:border-color .2s'; + card.onmouseenter=()=>card.style.borderColor='rgba(var(--paper-rgb),.6)'; + card.onmouseleave=()=>card.style.borderColor=i===idx?'rgba(var(--paper-rgb),.8)':'rgba(var(--paper-rgb),.15)'; + const wrap=document.createElement('div'); + wrap.style.cssText='width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;pointer-events:none;background:'+(s.classList.contains('light')?'var(--paper)':'var(--ink)'); + const clone=s.cloneNode(true); + clone.style.cssText='width:100vw;height:100vh;transform:scale('+(1/4.5)+');transform-origin:top left;position:absolute;top:0;left:0;pointer-events:none'; + wrap.appendChild(clone); + const label=document.createElement('div'); + label.style.cssText='padding:6px 10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);opacity:.7'; + label.textContent=(i+1)+' / '+total; + card.appendChild(wrap); + card.appendChild(label); + card.onclick=()=>{toggleOverview();go(i)}; + grid.appendChild(card); + }); + ov.appendChild(grid); +} + +function toggleOverview(){ + overviewOn=!overviewOn; + if(overviewOn){buildOverview();ov.style.display='block';} + else{ov.style.display='none';} +} + addEventListener('keydown',e=>{ + if(e.key==='Escape'){e.preventDefault();toggleOverview();return;} + if(overviewOn)return; if(e.key==='ArrowRight'||e.key==='PageDown'||e.key===' '||e.key==='ArrowDown')go(idx+1); if(e.key==='ArrowLeft'||e.key==='PageUp'||e.key==='ArrowUp')go(idx-1); if(e.key==='Home')go(0);