omarakhmedov-web
diff --git a/‎index.html‎
Lines changed: 64 additions & 0 deletions b/‎index.html‎
Lines changed: 64 additions & 0 deletions
@@ -25,6 +25,14 @@
 <meta content="Scan tokens in seconds. Deep checks on demand." name="twitter:description"/>
 <meta content="https://metridex.com/og-image.png" name="twitter:image"/>
 <script data-domain="metridex.com" defer="" src="https://plausible.io/js/script.js"></script>
+
+<style>
+.mdx-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center}
+.mdx-lightbox.open{display:flex}
+.mdx-lightbox img{max-width:95vw;max-height:90vh;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.55)}
+.mdx-lightbox .mdx-close{position:fixed;top:18px;right:18px;width:40px;height:40px;border-radius:999px;background:rgba(17,17,17,.7);color:#fff;border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;cursor:pointer}
+</style>
+
 </head>
 <body>
 <header class="nav" id="siteNav">
@@ -303,5 +311,61 @@ <h2 data-i18n="contact.title">Contact</h2>
   <img alt="Screenshot preview">
   <button class="mdx-close" aria-label="Close">✕</button>
 </div>
+
+<script>
+(function(){
+  // Helper: ensure lightbox exists
+  function ensureLightbox(){
+    var lb = document.getElementById('mdxLightbox');
+    if(!lb){
+      lb = document.createElement('div');
+      lb.id='mdxLightbox'; lb.className='mdx-lightbox'; lb.setAttribute('hidden','');
+      var img=document.createElement('img'); var btn=document.createElement('button');
+      btn.className='mdx-close'; btn.setAttribute('aria-label','Close'); btn.textContent='✕';
+      lb.appendChild(img); lb.appendChild(btn); document.body.appendChild(lb);
+    }
+    return lb;
+  }
+  function openLB(src){
+    var lb=ensureLightbox(); var img=lb.querySelector('img'); var btn=lb.querySelector('.mdx-close');
+    img.src=src; lb.classList.add('open'); lb.removeAttribute('hidden');
+    function close(){ lb.classList.remove('open'); lb.setAttribute('hidden',''); }
+    lb.addEventListener('click', close, {once:true}); btn&&btn.addEventListener('click', close, {once:true});
+    document.addEventListener('keydown', function esc(e){ if(e.key==='Escape'){ close(); document.removeEventListener('keydown', esc);} });
+  }
+  function init(){
+    document.querySelectorAll('.mdx-frame').forEach(function(frame){
+      var list=(frame.getAttribute('data-images')||'').split(',').map(function(s){return s.trim();}).filter(Boolean);
+      // If no stage exists, create it:
+      var stage = frame.querySelector('.mdx-stage') || (function(){ var d=document.createElement('div'); d.className='mdx-stage'; frame.appendChild(d); return d; })();
+      // If no image child, insert one:
+      var img = stage.querySelector('img') || (function(){ var i=new Image(); stage.appendChild(i); return i; })();
+      // Render first image
+      var i = 0; function render(){ img.src = list[i]; counter.textContent = (i+1)+' / '+list.length; }
+      // Controls (create if not exist)
+      var nav = frame.querySelector('.mdx-nav') || (function(){
+        var n=document.createElement('div'); n.className='mdx-nav';
+        var p=document.createElement('button'); p.className='mdx-btn mdx-prev'; p.textContent='◀'; p.setAttribute('aria-label','Prev');
+        var nx=document.createElement('button'); nx.className='mdx-btn mdx-next'; nx.textContent='▶'; nx.setAttribute('aria-label','Next');
+        n.appendChild(p); n.appendChild(nx); frame.appendChild(n); return n;
+      })();
+      var prev = nav.querySelector('.mdx-prev'), next = nav.querySelector('.mdx-next');
+      var counter = frame.querySelector('.mdx-counter') || (function(){ var c=document.createElement('div'); c.className='mdx-counter'; frame.appendChild(c); return c; })();
+      function step(d){ if(!list.length) return; i = (i + d + list.length) % list.length; render(); }
+      prev.onclick=function(){ step(-1); }; next.onclick=function(){ step(1); };
+      // Click to open
+      img.style.cursor='zoom-in';
+      img.onclick=function(){ openLB(img.currentSrc || img.src); };
+      // Touch swipe
+      var sx=null; stage.addEventListener('touchstart', function(e){ sx=e.touches[0].clientX; }, {passive:true});
+      stage.addEventListener('touchend', function(e){ if(sx==null) return; var dx=e.changedTouches[0].clientX - sx; if(Math.abs(dx)>40) step(dx<0?1:-1); sx=null; }, {passive:true});
+      // Initial
+      if(list.length){ render(); }
+    });
+  }
+  if(document.readyState==='loading'){ document.addEventListener('DOMContentLoaded', init); } else { init(); }
+})();
+</script>
+
 </body>
 </html>