Spaces:

Dasdeman
/

Unstop_Retail

Running

File size: 5,728 Bytes

f7b9253

<!DOCTYPE html><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>