Spaces:
Running
Running
| <html><head><meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| <style> | |
| *{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;background:transparent;overflow:hidden}.car{position:relative;width:100%;height:100%;background:#e8edf2;border-radius:8px;overflow:hidden;cursor:zoom-in;user-select:none;touch-action:pan-y}.car img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .25s}.car img.hidden{opacity:0;pointer-events:none}.car img.visible{opacity:1}.btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.42);color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s;z-index:5;-webkit-tap-highlight-color:transparent}.btn:hover{background:#F59E0B;color:#000}.prev{left:8px}.next{right:8px}.dots{position:absolute;bottom:8px;width:100%;display:flex;justify-content:center;gap:7px;z-index:5;pointer-events:none}.dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:background .2s;pointer-events:auto;-webkit-tap-highlight-color:transparent}.dot.on{background:#F59E0B}.lb{display:none;position:fixed;inset:0;background:rgba(0,0,0,.98);z-index:9999;align-items:center;justify-content:center}.lb.open{display:flex}.lb img{max-width:100vw;max-height:100vh;object-fit:contain;animation:pop .2s ease;pointer-events:none;user-select:none}@keyframes pop{from{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}.lb-x{position:absolute;top:14px;right:18px;color:#fff;font-size:2.4rem;cursor:pointer;width:48px;height:48px;display:flex;align-items:center;justify-content:center;opacity:.75;transition:opacity .2s;-webkit-tap-highlight-color:transparent;line-height:1;z-index:10000}.lb-x:hover{opacity:1}.lb-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.13);color:#fff;border:none;border-radius:50%;width:52px;height:52px;font-size:2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;-webkit-tap-highlight-color:transparent;z-index:10000}.lb-btn:hover{background:#F59E0B;color:#000}.lbp{left:14px}.lbn{right:14px}.lb-num{position:absolute;bottom:14px;width:100%;text-align:center;color:rgba(255,255,255,.7);font-size:.9rem;pointer-events:none;z-index:10000} | |
| </style></head><body> | |
| <div class="car" id="car"> | |
| <button class="btn prev" id="prev">‹</button> | |
| <button class="btn next" id="next">›</button> | |
| <div class="dots" id="dots"></div> | |
| </div> | |
| <div class="lb" id="lb"> | |
| <span class="lb-x" id="lbx">×</span> | |
| <button class="lb-btn lbp" id="lbp">‹</button> | |
| <img id="lbimg" src="" alt=""> | |
| <button class="lb-btn lbn" id="lbn">›</button> | |
| <div class="lb-num" id="lbnum"></div> | |
| </div> | |
| <script> | |
| var IMGS={{imgs_json | safe}},N={{n}},cur=0,lbOpen=false; | |
| var car=document.getElementById('car'), dotsEl=document.getElementById('dots'), lb=document.getElementById('lb'), lbImg=document.getElementById('lbimg'), lbNum=document.getElementById('lbnum'); | |
| var slides=[]; | |
| IMGS.forEach(function(src,i){ | |
| var img=document.createElement('img'); | |
| img.src=src; img.className=i===0?'visible':'hidden'; | |
| car.insertBefore(img,document.getElementById('prev')); | |
| slides.push(img); | |
| var dot=document.createElement('span'); | |
| dot.className='dot'+(i===0?' on':''); | |
| (function(idx){dot.addEventListener('click',function(e){e.stopPropagation();goTo(idx);})})(i); | |
| dotsEl.appendChild(dot); | |
| }); | |
| var dots=dotsEl.querySelectorAll('.dot'); | |
| function goTo(n){ | |
| slides[cur].className='hidden'; dots[cur].classList.remove('on'); | |
| cur=(n+N)%N; | |
| slides[cur].className='visible'; dots[cur].classList.add('on'); | |
| } | |
| document.getElementById('prev').addEventListener('click',function(e){e.stopPropagation();goTo(cur-1);}); | |
| document.getElementById('next').addEventListener('click',function(e){e.stopPropagation();goTo(cur+1);}); | |
| var ts=0; | |
| car.addEventListener('touchstart',function(e){if(!lbOpen)ts=e.touches[0].clientX;},{passive:true}); | |
| car.addEventListener('touchend',function(e){if(lbOpen)return;var dx=e.changedTouches[0].clientX-ts;if(Math.abs(dx)>40)goTo(dx<0?cur+1:cur-1);},{passive:true}); | |
| car.addEventListener('click',function(){openLB(cur);}); | |
| function openLB(i){ | |
| cur=i; lbImg.src=IMGS[i]; lbNum.textContent=(i+1)+' / '+N; | |
| lb.classList.add('open'); lbOpen=true; | |
| var doc = document.documentElement; | |
| var req = doc.requestFullscreen || doc.webkitRequestFullscreen || doc.mozRequestFullScreen || doc.msRequestFullscreen; | |
| if(req) req.call(doc).catch(function(){}); | |
| } | |
| function closeLB(){ | |
| lb.classList.remove('open'); lbOpen=false; | |
| var exit = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen; | |
| if(exit && document.fullscreenElement) exit.call(document).catch(function(){}); | |
| } | |
| function lbNav(d){cur=(cur+d+N)%N;lbImg.src=IMGS[cur];lbNum.textContent=(cur+1)+' / '+N;} | |
| document.getElementById('lbx').addEventListener('click',closeLB); | |
| document.getElementById('lbp').addEventListener('click',function(e){e.stopPropagation();lbNav(-1);}); | |
| document.getElementById('lbn').addEventListener('click',function(e){e.stopPropagation();lbNav(1);}); | |
| lb.addEventListener('click',function(e){if(e.target===lb)closeLB();}); | |
| var lts=0; | |
| lb.addEventListener('touchstart',function(e){lts=e.touches[0].clientX;},{passive:true}); | |
| lb.addEventListener('touchend',function(e){var dx=e.changedTouches[0].clientX-lts;if(Math.abs(dx)>40)lbNav(dx<0?1:-1);},{passive:true}); | |
| </script></body></html> |