📸 Storie

<iframe id="glua-stories" src="https://gluaprime.com/StoriesPage" width="100%" height="280" frameborder="0" style="border:none;border-radius:12px;" allow="fullscreen"></iframe> <div id="glua-story-popup" style="display:none;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.85);align-items:center;justify-content:center;"> <div style="position:relative;width:100%;max-width:420px;height:100%;max-height:750px;background:#000;border-radius:16px;overflow:hidden;"> <div id="glua-story-bars" style="position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:10;"></div> <div id="glua-story-header" style="position:absolute;top:28px;left:10px;right:10px;z-index:10;display:flex;align-items:center;justify-content:space-between;"> <div style="display:flex;align-items:center;gap:10px;"> <div id="glua-story-avatar" style="width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#60a5fa,#6366f1);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;font-size:18px;"></div> <div><div id="glua-story-name" style="color:#fff;font-weight:700;font-size:15px;"></div><div id="glua-story-time" style="color:rgba(255,255,255,0.7);font-size:12px;"></div></div> </div> <button onclick="glua_closePopup()" style="background:rgba(0,0,0,0.4);border:none;border-radius:50%;width:36px;height:36px;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;">✕</button> </div> <img id="glua-story-img" style="width:100%;height:100%;object-fit:contain;" src="" /> <div id="glua-story-caption" style="position:absolute;bottom:30px;left:16px;right:16px;color:#fff;font-size:17px;font-weight:500;text-align:center;background:rgba(0,0,0,0.4);border-radius:12px;padding:10px;display:none;"></div> <button onclick="glua_prev()" style="position:absolute;left:0;top:0;bottom:0;width:40%;background:transparent;border:none;cursor:pointer;"></button> <button onclick="glua_next()" style="position:absolute;right:0;top:0;bottom:0;width:40%;background:transparent;border:none;cursor:pointer;"></button> </div> </div> <script> var glua_stories=[],glua_idx=0,glua_timer=null,glua_progress=0; function glua_timeAgo(d){if(!d)return'';var m=(new Date()-new Date(d))/60000;if(m<60)return Math.floor(m)+'min fa';var h=Math.floor(m/60);if(h<24)return h+'h fa';return Math.floor(h/24)+'g fa';} function glua_showStory(i){ glua_idx=i;var s=glua_stories[i]; document.getElementById('glua-story-img').src=s.image_url||''; document.getElementById('glua-story-name').innerText=s.user_name||''; document.getElementById('glua-story-avatar').innerText=(s.user_name||'?')[0].toUpperCase(); document.getElementById('glua-story-time').innerText=glua_timeAgo(s.created_date); var cap=document.getElementById('glua-story-caption'); if(s.caption){cap.innerText=s.caption;cap.style.display='block';}else{cap.style.display='none';} var bars=document.getElementById('glua-story-bars'); bars.innerHTML=''; for(var j=0;j<glua_stories.length;j++){var b=document.createElement('div');b.style.cssText='flex:1;height:3px;background:'+(j<i?'#fff':'rgba(255,255,255,0.3)')+';border-radius:2px;overflow:hidden;';if(j===i){var p=document.createElement('div');p.id='glua-bar-prog';p.style.cssText='height:100%;width:0%;background:#fff;transition:none;';b.appendChild(p);}bars.appendChild(b);} glua_progress=0;clearInterval(glua_timer); glua_timer=setInterval(function(){glua_progress+=1;var pr=document.getElementById('glua-bar-prog');if(pr)pr.style.width=glua_progress+'%';if(glua_progress>=100){glua_next();}},100); } function glua_next(){if(glua_idx<glua_stories.length-1){glua_showStory(glua_idx+1);}else{glua_closePopup();}} function glua_prev(){if(glua_idx>0)glua_showStory(glua_idx-1);} function glua_closePopup(){clearInterval(glua_timer);var p=document.getElementById('glua-story-popup');p.style.display='none';document.body.style.overflow='';} window.addEventListener('message',function(e){ if(e.data&&e.data.type==='stories-open'&&e.data.stories){ glua_stories=e.data.stories; var p=document.getElementById('glua-story-popup'); p.style.display='flex';document.body.style.overflow='hidden'; glua_showStory(0); } }); </script>