29 lines
2.3 MiB
HTML
29 lines
2.3 MiB
HTML
|
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · 嵌入照片窗预览</title><style>
|
|||
|
|
*{box-sizing:border-box}body{margin:0;background:#f6f8fb;color:#172033;font:14px/1.6 system-ui,-apple-system,'Segoe UI','PingFang SC',sans-serif}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #459aff;outline-offset:3px}.site-nav{height:78px;padding:0 7%;display:flex;align-items:center;gap:30px;background:white}.brand{font-weight:800;font-size:23px;letter-spacing:-1px;margin-right:auto}.brand b{color:#1a73e8}.site-nav a{text-decoration:none;font-size:13px;color:#647084}.nav-cta{background:#172d50;color:white!important;padding:10px 20px;border-radius:6px}.hero{min-height:440px;background:#112642;position:relative;overflow:hidden;color:white;display:flex;align-items:center}.hero-art{position:absolute;inset:0 0 0 40%;opacity:.55}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#112642 15%,#112642c9 45%,transparent)}.hero-copy{position:relative;z-index:1;max-width:750px;padding:64px 7%}.eyebrow{font-size:11px;letter-spacing:3px;color:#aacaf3}.hero h1{font-size:clamp(36px,4.5vw,64px);line-height:1.13;letter-spacing:-2px;font-weight:600;margin:20px 0}.hero p{color:#c6d3e2;max-width:360px;font-size:15px}.hero-link{display:inline-block;background:#fff;color:#193c65;padding:12px 24px;text-decoration:none;border-radius:5px;margin-top:16px;font-weight:600;font-size:13px}.content{max-width:1120px;margin:0 auto;padding:46px 24px 360px}.section-heading{display:flex;align-items:end;gap:20px;justify-content:space-between}.section-heading h2{font-size:28px;letter-spacing:-1px;margin:0}.section-heading span{font-size:12px;color:#8b95a5}.intro{color:#6d798d;max-width:600px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}.story{background:white;border:1px solid #e5eaf1;border-radius:10px;overflow:hidden}.story-art{height:180px;position:relative;overflow:hidden}.story-body{padding:18px}.story small{color:#1a73e8;letter-spacing:1px}.story h3{font-size:17px;margin:7px 0}.story p{color:#7a8697;font-size:13px;margin:0}.art{position:relative;overflow:hidden}.art img{position:absolute;max-width:none;pointer-events:none}.preview-tools{margin-top:32px;border:1px solid #dce4ef;background:#edf3fa;border-radius:12px;padding:22px;max-width:680px}.preview-tools h3{margin:0 0 6px;font-size:15px}.preview-tools p{font-size:12px;color:#66748b;margin:0 0 16px}.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.controls button{border:1px solid #d5dfed;border-radius:7px;background:white;color:#285586;min-height:40px;padding:0 13px}.controls label{font-size:12px;display:flex;gap:6px;align-items:center}.measure{font-size:12px;margin-top:12px;color:#718198;font-variant-numeric:tabular-nums}.widget{position:fixed;z-index:1000;right:16px;bottom:calc(24px + env(safe-area-inset-bottom));width:195px;height:280px;border:1px solid #fffc;border-radius:12px;background:#10161e;box-shadow:0 4px 16px #0f172a29;overflow:hidden}.viewport{position:absolute;inset:0;overflow:hidden;touch-action:none}.track{will-change:transform}.photo-link{display:block;width:100%;margin-bottom:3px;background:#f6f8fb;position:relative;text-decoration:none}.photo-link .art{width:100%}.photo-link:focus-visible{outline-offset:-4px}.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}.collapse{position:absolute;z-index:4;right:0;top:0;width:44px;height:44px;border:0;background:none;padding:0;color:#647084}.collapse span{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;background:#ffffffd1;display:grid;place-items:center;font-size:19px;font-weight:400;line-height:1}.handle{position:fixed;z-index:1000;right:16px;bottom:calc(24px + env(safe-area-inset-bottom));height:44px;width:100px;border-radius:22px;border:1px solid #e3eaf2;background:white;box-shadow:0 4px 16px #0f172a20;color:#32618e;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px}.handle svg{width:16px;height:16px;color:#1a73e8}[hidden]{display:none!important}.heart{positio
|
|||
|
|
</style></head><body><header class="site-nav"><div class="brand"><b>◈</b> PhotoLive<span style="font-weight:400;color:#9aa6b6;font-size:11px;letter-spacing:1px;margin-left:12px">EVENTS</span></div><a href="#moments">Discover</a><a href="#moments">Exhibitions</a><a href="#preview" class="nav-cta">Preview studio ↗</a></header><section class="hero"><div class="hero-art art" id="heroArt"></div><div class="hero-copy"><div class="eyebrow">CONNECT. EXPLORE. BE INSPIRED.</div><h1>A world of ideas.<br>A moment to connect.</h1><p>Meet the people, stories and possibilities shaping tomorrow. Experience the fair, wherever you are.</p><a href="#moments" class="hero-link">Explore the event ↗</a></div></section><main class="content"><div class="section-heading" id="moments"><h2>Inside the experience</h2><span>GUANGZHOU · AUTUMN 2026</span></div><p class="intro">A closer look at the conversations and discoveries that bring us together.</p><section class="cards" id="stories"></section><section class="preview-tools" id="preview"><h3>嵌入组件 · 交互效果预览</h3><p>右下角为实际 195 × 280 px 照片窗，电脑和手机尺寸一致。此页使用示例图片；下方气泡为明确标记的模拟事件，不连接正式服务。为便于看效果，手机预览首次也展开。</p><div class="controls"><button id="burst">模拟点赞气泡</button><button id="toggle">暂停上滚</button><button id="reduce" aria-pressed="false">减少动画</button><label><input type="checkbox" id="simulate">循环演示气泡</label></div><div class="measure" id="measure"></div><p style="margin:12px 0 0">悬停、键盘聚焦时暂停；离开后恢复。可触摸拖动或滚轮浏览。点击照片新开观众页预览；右上角 − 收起。</p></section></main><aside class="widget" id="widget" aria-label="活动照片窗"><div class="viewport" id="viewport" tabindex="0" aria-label="活动照片，空格暂停或恢复，方向键浏览，Escape 收起"><div class="track" id="track"></div></div><div class="particles" id="particles" aria-hidden="true"></div><div class="focus-tip">空格 暂停 / 恢复 · ↑↓ 浏览 · Esc 收起</div><button class="collapse" id="collapse" aria-label="收起照片窗"><span>−</span></button></aside><button class="handle" id="handle" hidden aria-label="展开照片窗"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="m4 17 5-5 4 4 3-3 5 5"/><circle cx="15.5" cy="8" r="1.5"/></svg>照片</button><script>
|
|||
|
|
const SOURCE='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABgAAAAQACAIAAACoEwUVAABVeWNhQlgAAFV5anVtYgAAAB5qdW1kYzJwYQARABCAAACqADibcQNjMnBhAAAAVVNqdW1iAAAAR2p1bWRjMm1hABEAEIAAAKoAOJtxA3VybjpjMnBhOmY3ODY4MTc0LWNkZjgtNDBjYi05NTFjLTRhMWYyN2RmYzRhYwAAAAx8anVtYgAAAClqdW1kYzJhcwARABCAAACqADibcQNjMnBhLmFzc2VydGlvbnMAAAAJ0Wp1bWIAAAA7anVtZEDLDDK7ikidpwsq1vR/Q2kTYzJwYS5pY29uAAAAABhjMnNoRu/9tJ5wISF2JgwbANcFowAAABdiZmRiAGltYWdlL3N2Zyt4bWwAAAAJd2JpZGI8c3ZnIHdpZHRoPSI3MTYiIGhlaWdodD0iNzE2IiB2aWV3Qm94PSIwIDAgNzE2IDcxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUwOC43NDkgMzE3LjM5OUM1MTYuNzc3IDI4Ny4zMTQgNTA4Ljk5MSAyNTMuODg0IDQ4NS4zODkgMjMwLjI4MkM0NjEuNzg4IDIwNi42ODEgNDI4LjM2IDE5OC44OTUgMzk4LjI3MyAyMDYuOTIzQzM3Ni4yMzEgMTg0LjkyOCAzNDMuMzkgMTc0Ljk1NiAzMTEuMTQ4IDE4My41OTZDMjc4LjkwNiAxOTIuMjM0IDI1NS40NSAyMTcuMjkyIDI0Ny4zNiAyNDcuMzYxQzIxNy4yOTEgMjU1LjQ1MSAxOTIuMjMzIDI3OC45MSAxODMuNTk1IDMxMS4xNDlDMTc0Ljk1NyAzNDMuMzkxIDE4NC45MjcgMzc2LjIzMiAyMDYuOTI0IDM5OC4yNzRDMTk4Ljg5NiA0MjguMzU5IDIwNi42ODMgNDYxLjc4OSAyMzAuMjg0IDQ4NS4zOTFDMjUzLjg4NSA1MDguOTkyIDI4Ny4zMTMgNTE2Ljc3OSAzMTcuNDAxIDUwOC43NUMzMzkuNDQyIDUzMC43NDUgMzcyLjI4NiA1NDAuNzE3IDQwNC41MjUgNTMyLjA3OUM0MzYuNzY3IDUyMy40NDEgNDYwLjIyMyA0OTguMzg0IDQ2OC4zMTMgNDY4LjMxNUM0OTguMzgzIDQ2MC4yMjQgNTIzLjQ0IDQzNi43NjYgNTMyLjA3OCA0MDQuNTI2QzU0MC43MTYgMzcyLjI4NSA1MzAuNzQ3IDMzOS40NDMgNTA4Ljc0OSAzMTcuNDAyVjMxNy4zOTlaTTQ3MC44OTkgMjQ0Ljc3NkM0ODYuODkyIDI2MC43NyA0OTMuNDg4IDI4Mi42MDEgNDkwLjY4NyAzMDMuNDEyTDQxNS41NzcgMjYwLjA0NkM0MTIuNDExIDI1OC4yMTggNDA4LjUwOSAyNTguMjE4IDQwNS4zNDUgMjYwLjA0NkwzMTcuNDAxIDMxMC44MlYyNzcuNTI2QzMxNy40MDEgMjc1LjE5MSAzMTguNjUyIDI3My4wMDUgMzIwLjY3NiAyNzEuODM3TDM4Ny42NDQgMjMzLjE3NEM0MTQuMTc4IDIxOC4zNTMgNDQ4LjM0NiAyMjIuMjIzIDQ3MC45MDEgMjQ0Ljc3Nkg0NzAuODk5Wk0zNTcuODM3IDMxMS4xNDRMMzk4LjI3NSAzMzQuNDkxVjM4MS4xODVMMzU3LjgzNyA0MDQuNTMyTDMxNy4zOTggMzgxLjE4NVYzMzQuNDkxTDM1Ny44MzcgMzExLjE0NFpNMjY0Ljc3NiAyNjkuNjkzQzI2NS4yMDcgMjM5LjMwNSAyODUuNjQ0IDIxMS42NDkgMzE2LjQ1MyAyMDMuMzkzQzMzOC4zIDE5Ny41NCAzNjAuNTA1IDIwMi43NDQgMzc3LjEyNyAyMTUuNTczTDMwMi4wMTQgMjU4LjkzN0MyOTguODQ4IDI2MC43NjQgMjk2Ljg5OCAyNjQuMTQ0IDI5Ni44OTggMjY3Ljc5OFYzNjkuMzQ2TDI2OC4wNjUgMzUyLjY5OUMyNjYuMDQzIDM1MS41MzEgMjY0Ljc3NiAzNDkuMzUzIDI2NC43NzYgMzQ3LjAxN1YyNjkuNjkxVjI2OS42OTNaTTIwMy4zOTEgMzE2LjQ1NEMyMDkuMjQ0IDI5NC42MDggMjI0Ljg1NCAyNzcuOTc4IDI0NC4yNzYgMjY5Ljk5OVYzNTYuNzNDMjQ0LjI3NiAzNjAuMzg0IDI0Ni4yMjYgMzYzLjc2MyAyNDkuMzkyIDM2NS41OTFMMzM3LjMzNyA0MTYuMzY1TDMwOC41MDMgNDMzLjAxM0MzMDYuNDgxIDQzNC4xODEgMzAzLjk2MSA0MzQuMTg4IDMwMS45MzkgNDMzLjAyTDIzNC45NzEgMzk0LjM1N0MyMDguODY4IDM3OC43ODkgMTk1LjEzOCAzNDcuMjYxIDIwMy4zOTEgMzE2LjQ1NFpNMjQ0Ljc3NSA0NzAuOUMyMjguNzgxIDQ1NC45MDYgMjIyLjE4NiA0MzMuMDc1IDIyNC45ODYgNDEyLjI2NEwzMDAuMDk2IDQ1NS42M0MzMDMuMjYzIDQ1Ny40NTcgMzA3LjE2NCA0NTcuNDU3IDMxMC4zMjggNDU1LjYzTDM5OC4yNzMgNDA0Ljg1NlY0MzguMTQ5QzM5OC4yNzMgNDQwLjQ4NSAzOTcuMDIyIDQ0Mi42NzEgMzk0Ljk5NyA0NDMuODM5TDMyOC4wMjkgNDgyLjUwMkMzMDEuNDk1IDQ5Ny4zMjIgMjY3LjMyNyA0OTMuNDUyIDI0NC43NzIgNDcwLjlIMjQ0Ljc3NVpNNDUwLjg5NyA0NDUuOTgyQzQ1MC40NjYgNDc2LjM3MSA0MzAuMDI5IDUwNC4wMjcgMzk5LjIyIDUxMi4yODNDMzc3LjM3MyA1MTguMTM2IDM1NS4xNjggNTEyLjkzMiAzMzguNTQ3IDUwMC4xMDJMNDEzLjY1OSA0NTYuNzM4QzQxNi44MjYgNDU0LjkxMSA0MTguNzc1IDQ1MS41MzIgNDE4Ljc3NSA0NDcuODc3VjM0Ni4zMjlMNDQ3LjYwOSAzNjIuOTc3QzQ0OS42MzEgMzY0LjE0NSA0NTAuODk3IDM2Ni4zMjMgNDUwLjg5NyAzNjguNjU5VjQ0NS45ODVWNDQ1Ljk4MlpNNTEyLjI4MiAzOTkuMjIxQzUwNi40MjkgNDIxLjA2OCA0OTAuODE5IDQzNy42OTcgNDcxLjM5NyA0NDUuNjc2VjM1OC45NDZDNDcxLjM5NyAzNTUuMjkyIDQ2OS40NDggMzUxLjkxMiA0NjYuMjgxIDM1MC4wODVMMzc4LjMzNiAyOTkuMzExTDQwNy4xNyAyODIuNjYzQzQwOS4xOTIgMjgxLjQ5NSA0MTEuNzEyIDI4MS40ODcgNDEzLjczNCAyODIuNjU1TDQ4MC43MDIgMzIxLjMxOEM1MDYuODA1IDMzNi44ODcgNTIwLjUzNiAzNjguNDE1IDUxMi4yODIgMzk5LjIyMVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgoAAAG3anVtYgAAAEFqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmFjdGlvbnMudjIAAAAAGGMyc2jlsK0JQZMdazj27vDFsjECAAABbmNib3KiZ2FjdGlvbnODpGZhY3Rpb25sYzJwYS5jcmVhdGVkZHdoZW7AeB4yMDI2LTA5LTIxVDA3OjI0OjQwLjA1MjA4OTA0MVptc29mdHdhcmVBZ2VudKJkbmFtZWdDaGF0R1BUZ3ZlcnNpb25pZ3B0LWltYWdlcWRpZ2l0YWxTb3VyY2VUeXBleEZodHRwOi8vY3YuaXB0Yy5vcmcvbmV3c2NvZGVzL2RpZ2l0YWxzb3VyY2V0eXBlL3RyYWluZWRBbGdvcml0aG1pY01lZGlhomZhY3Rpb25uYzJwYS5jb252ZXJ0ZWRkd2hlbsB4HjIwMjYtMDk
|
|||
|
|
const $=s=>document.querySelector(s), heart='<svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor"><path d="M12 21s-9-5.5-9-12a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.5-9 12-9 12Z"/></svg>';
|
|||
|
|
const photos=[{id:'exterior',r:[262,486,230,128]},{id:'conversation',r:[845,248,358,435]},{id:'networking',r:[264,661,224,122]},{id:'robotics',r:[506,656,185,142]},{id:'hall',r:[265,824,224,126]},{id:'speaker',r:[504,823,181,129]}];
|
|||
|
|
function art(el,r){const[x,y,w,h]=r;el.style.aspectRatio=w+'/'+h;const img=new Image();img.src=SOURCE;img.alt='';img.style.cssText=`width:${1536/w*100}%;height:${1024/h*100}%;left:${-x/w*100}%;top:${-y/h*100}%`;el.append(img);return img}
|
|||
|
|
art($('#heroArt'),[254,98,487,198]);['Spaces that inspire','Conversations that matter','Innovation in focus'].forEach((title,i)=>{const el=document.createElement('article');el.className='story';el.innerHTML='<div class="story-art art"></div><div class="story-body"><small>THE EVENT JOURNAL</small><h3>'+title+'</h3><p>Discover a new perspective, one moment at a time.</p></div>';art(el.firstChild,photos[i].r);$('#stories').append(el)});
|
|||
|
|
const track=$('#track'),viewport=$('#viewport'),reasons=new Set(['loading']);let offset=32,last=0,frame=0,resumeTimer,manualTimer,reduced=matchMedia('(prefers-reduced-motion: reduce)').matches,collapsed=false,particleId=0,toastTimer,simTimer,press=null;
|
|||
|
|
if(reduced)reasons.add('reduced');
|
|||
|
|
function photoNode(p){const a=document.createElement('a');a.className='photo-link';a.href='viewer-preview-2026-09-22.html#'+p.id;a.target='_blank';a.rel='noopener noreferrer';a.setAttribute('aria-label','查看活动照片 '+p.id);a.dataset.id=p.id;const el=document.createElement('div');el.className='art';art(el,p.r);a.append(el);return a}
|
|||
|
|
photos.forEach(p=>track.append(photoNode(p)));
|
|||
|
|
function stride(el){const p=photos.find(p=>p.id===el.dataset.id);return viewport.clientWidth*p.r[3]/p.r[2]+3}
|
|||
|
|
function translate(){while(offset>=stride(track.firstElementChild)){offset-=stride(track.firstElementChild);track.append(track.firstElementChild)}while(offset<0){const el=track.lastElementChild;track.prepend(el);offset+=stride(el)}track.style.transform=`translateY(${-offset}px)`}
|
|||
|
|
function tick(now){if(!reasons.size&&last)offset+=16*Math.min(now-last,50)/1000;last=now;translate();frame=requestAnimationFrame(tick)}
|
|||
|
|
function pause(reason){reasons.add(reason);last=0}
|
|||
|
|
function resume(reason,delay=0){if(delay){setTimeout(()=>{reasons.delete(reason);last=0},delay)}else{reasons.delete(reason);last=0}}
|
|||
|
|
function manual(delta){pause('manual');offset+=delta;translate();clearTimeout(manualTimer);manualTimer=setTimeout(()=>resume('manual'),500)}
|
|||
|
|
function measure(){const rect=$('#widget').getBoundingClientRect();$('#measure').textContent=`尺寸 ${Math.round(rect.width)} × ${Math.round(rect.height)} CSS px · 速度 16 px/s · ${track.children.length} 个照片节点`}
|
|||
|
|
function notify(text){let el=$('.toast');if(!el){el=document.createElement('div');el.className='toast';el.setAttribute('role','status');document.body.append(el)}el.textContent=text;clearTimeout(toastTimer);toastTimer=setTimeout(()=>el.remove(),2600)}
|
|||
|
|
function collapse(){collapsed=true;pause('collapsed');$('#widget').hidden=true;$('#handle').hidden=false;$('#particles').replaceChildren();$('#handle').focus()}
|
|||
|
|
function expand(){collapsed=false;$('#widget').hidden=false;$('#handle').hidden=true;resume('collapsed');resume('focus');resume('hover');measure()}
|
|||
|
|
function burst(){if(collapsed||document.hidden||reduced)return;let y=-offset,visible=[];for(const el of track.children){const h=stride(el)-3;const top=Math.max(44,y),bottom=Math.min(viewport.clientHeight,y+h);if(bottom-top>=20)visible.push({bottom});y+=h}if(!visible.length)return;const origin=visible[visible.length-1].bottom-10;for(let i=0;i<3;i++){setTimeout(()=>{if(collapsed||document.hidden||reduced||$('#particles').children.length>=8)return;const n=particleId++,el=document.createElement('span');el.className='heart';el.innerHTML=heart;const size=[12,16,20][n%3];el.style.cssText=`width:${size}px;height:${size}px;top:${origin-size}px;right:${10+n%3*10}px;color:${n%2?'#FF8B98':'#FF6B7A'};--drift:${[-8,5,8][n%3]}px`;$('#particles').append(el);el.onanimationend=()=>el.remove()},i*300)}}
|
|||
|
|
function setReduced(){document.body.classList.toggle('reduced',reduced);$('#reduce').setAttribute('aria-pressed',reduced);$('#reduce').textContent=reduced?'恢复动效':'减少动画';if(reduced){pause('reduced');$('#particles').replaceChildren()}else resume('reduced')}
|
|||
|
|
$('#burst').onclick=()=>{if(reduced){notify('减少动画已开启；关闭后可预览气泡');return}if(collapsed)expand();burst()};$('#toggle').onclick=()=>{if(reasons.has('explicit')){resume('explicit');$('#toggle').textContent='暂停上滚'}else{pause('explicit');$('#toggle').textContent='恢复上滚'}};$('#reduce').onclick=()=>{reduced=!reduced;setReduced()};$('#simulate').onchange=e=>{clearInterval(simTimer);if(e.target.checked){burst();simTimer=setInterval(burst,2400)}};$('#collapse').onclick=collapse;$('#handle').onclick=expand;
|
|||
|
|
$('#widget').addEventListener('pointerenter',e=>{if(e.pointerType==='mouse'){clearTimeout(resumeTimer);pause('hover')}});$('#widget').addEventListener('pointerleave',e=>{if(e.pointerType==='mouse')resumeTimer=setTimeout(()=>resume('hover'),500)});$('#widget').addEventListener('focusin',()=>pause('focus'));$('#widget').addEventListener('focusout',()=>{setTimeout(()=>{if(!$('#widget').contains(document.activeElement))resume('focus')},500)});
|
|||
|
|
viewport.addEventListener('wheel',e=>{e.preventDefault();manual(e.deltaY)},{passive:false});viewport.addEventListener('pointerdown',e=>{pause('pointer');press={x:e.clientX,y:e.clientY,last:e.clientY,moved:false,id:e.pointerId}});viewport.addEventListener('pointermove',e=>{if(!press)return;if(Math.hypot(e.clientX-press.x,e.clientY-press.y)>8){press.moved=true;manual(press.last-e.clientY)}press.last=e.clientY});window.addEventListener('pointerup',()=>{resume('pointer');setTimeout(()=>press=null,0)});window.addEventListener('pointercancel',()=>{press=null;resume('pointer')});viewport.addEventListener('click',e=>{if(press?.moved)e.preventDefault()});viewport.addEventListener('keydown',e=>{if(e.code==='Space'){e.preventDefault();$('#toggle').click()}if(e.key==='Escape'){e.preventDefault();collapse()}if(e.key==='ArrowDown'||e.key==='ArrowUp'){e.preventDefault();manual(e.key==='ArrowDown'?40:-40)}});document.addEventListener('visibilitychange',()=>{if(document.hidden){pause('hidden');$('#particles').replaceChildren()}else resume('hidden')});window.addEventListener('resize',()=>{measure();translate()});window.addEventListener('pagehide',()=>{cancelAnimationFrame(frame);clearInterval(simTimer);clearTimeout(manualTimer);clearTimeout(resumeTimer)});setReduced();measure();translate();Promise.all([...track.querySelectorAll('img')].map(img=>img.decode().catch(()=>{}))).then(()=>setTimeout(()=>{resume('loading');frame=requestAnimationFrame(tick)},500));
|
|||
|
|
</script></body></html>
|