Reseñas de clientes en vídeo

Los que mejor nos avalan Nuestros clientes ❤️ Reseñas en vídeo · OK Perfumes :root{--thumb-m:40vw;--thumb-d:170px;--brand:#ffd400;} body,html{margin:0;padding:0;} /* Galería horizontal ------------------------------------------------------ */ #okp-gallery{ display:flex;gap:8px;overflow-x:auto;padding:8px 4px; scroll-snap-type:x mandatory; /* solo móvil – se quita en desktop */ cursor:grab;scroll-behavior:smooth; } #okp-gallery.dragging{cursor:grabbing;} #okp-gallery::-webkit-scrollbar{height:6px;} .okp-thumb{ flex:0 0 var(--thumb-m);aspect-ratio:9/16;background:#eaeaea center/cover; border-radius:10px;scroll-snap-align:start;position:relative;cursor:pointer; transition:transform .25s; } @media(min-width:640px){ #okp-gallery{scroll-snap-type:none;} /* scroll libre en desktop */ .okp-thumb{flex:0 0 var(--thumb-d);scroll-snap-align:none;} } /* Contador de “likes” ----------------------------------------------------- */ .okp-like{ position:absolute;bottom:6px;left:6px;background:rgba(0,0,0,.55); color:#fff;font-size:.75rem;padding:2px 8px;border-radius:14px; display:flex;align-items:center;gap:4px;min-width:46px; backdrop-filter:blur(2px); pointer-events:none; } .okp-like svg{width:14px;height:14px;fill:#ff4757;} /* Overlay TikTok ---------------------------------------------------------- */ #okp-overlay{ position:fixed;inset:0;z-index:2147483647;background:rgba(0,0,0,.9); display:flex;flex-direction:column;align-items:center;justify-content:center; padding:18px;opacity:0;visibility:hidden;transition:opacity .25s; touch-action:none; } #okp-overlay.okp-open{opacity:1;visibility:visible;} .okp-player{ width:100%;max-width:620px;max-height:80vh;aspect-ratio:9/16;background:#000; border-radius:6px;outline:none; transition:opacity .25s,transform .25s;opacity:0;transform:scale(.92); } .okp-player.okp-ready{opacity:1;transform:scale(1);} .okp-controls{ display:flex;align-items:center;gap:16px;color:#fff;width:100%; max-width:620px;margin-top:10px; } .okp-controls button{ background:none;border:none;color:inherit;font-size:28px;cursor:pointer; } .okp-link{ margin-left:auto;background:var(--brand);color:#000;font-weight:600; padding:6px 16px;border-radius:22px;font-size:.9rem;text-decoration:none; } /* Seek bar --------------------------------------------------------------- */ #okp-seek{ -webkit-appearance:none;width:100%;height:4px;border-radius:2px; background:#666;outline:none;margin:8px 0; } #okp-seek::-webkit-slider-thumb{ -webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff; cursor:pointer;box-shadow:0 0 2px rgba(0,0,0,.6); } #okp-seek::-moz-range-thumb{ width:14px;height:14px;border:none;border-radius:50%;background:#fff;cursor:pointer; } /* Hint texts ------------------------------------------------------------- */ #okp-hint,#okp-swipe-hint{ display:block;margin:6px auto 0;width:max-content;background:#000;color:#fff; font-size:.75rem;padding:4px 10px;border-radius:14px;animation:pulse 1.1s infinite; } #okp-swipe-hint{ position:absolute;bottom:calc(18px + 100%);left:50%;transform:translateX(-50%); } @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}} /* Lista de perfumes ------------------------------------------------------ */ #okp-list{margin:24px auto 10px;max-width:700px;padding:0 10px;} #okp-list h3{text-align:center;font-size:1.1rem;margin-bottom:8px;} #okp-list ol{padding-left:18px;font-size:.9rem;line-height:1.45;} #okp-list a{color:#045;text-decoration:none;}#okp-list a:hover{text-decoration:underline;} /* Oculta Hoola/WhatsApp mientras el overlay está abierto ----------------- */ body.okp-modal-open #hoola-widget-wrapper{display:none!important;} ⬅︎ Desliza para ver todas las reseñas ➡︎ 🔇 ❤️0 Ver perfume → ✕ ⬆︎⬇︎ Desliza para más vídeos Perfumes mencionados en las reseñas /* 1. URLs de los vídeos --------------------------------------------------- */ const VIDEO_URLS=[ /* … lista completa como la tuya … */ "https://cdn.shopify.com/videos/c/o/v/b91e152d381947c6bbcb5cd5f21148fb.mp4", "https://cdn.shopify.com/videos/c/o/v/8162d28d6351478ebd07a7814409a911.mp4", "https://cdn.shopify.com/videos/c/o/v/0f9aefa52e40465eb15649718115a779.mp4", "https://cdn.shopify.com/videos/c/o/v/4b98b7609afc4edfb286f9d1ef6dc086.mp4", "https://cdn.shopify.com/videos/c/o/v/42dacde9c3334520b7bc5c6d9c019217.mp4", "https://cdn.shopify.com/videos/c/o/v/73a9274e60594045ac635241602ef953.mp4", "https://cdn.shopify.com/videos/c/o/v/8de86640539f4f2dbcf4a3bdeff21fb9.mp4", "https://cdn.shopify.com/videos/c/o/v/11d3f7a77230483ab15ec319b163df86.mov", "https://cdn.shopify.com/videos/c/o/v/0d51d8731962439499a7103418d5cfe0.mp4", "https://cdn.shopify.com/videos/c/o/v/ff3d26cec8ef4d448d19e6573817a4ef.mp4", "https://cdn.shopify.com/videos/c/o/v/5f3a50d45b0c41aca3b530103837a7ef.mov", "https://cdn.shopify.com/videos/c/o/v/13430cfa76564ca09075cb186e8fc84c.mp4", "https://cdn.shopify.com/videos/c/o/v/ba4cc74591ea4da4a09a08b482d8b031.mp4", "https://cdn.shopify.com/videos/c/o/v/f3b1cb5c9c254fe58c51735f546fcda2.mp4", "https://cdn.shopify.com/videos/c/o/v/ef2e4915f46e4446876659e19a3e571a.mp4", "https://cdn.shopify.com/videos/c/o/v/86bacc2dae9a45fca7b8587ea629fdee.mov", "https://cdn.shopify.com/videos/c/o/v/df4f3454d9a840f78699545549b96dfd.mp4", "https://cdn.shopify.com/videos/c/o/v/0dc9ad77a6d84c33bdb7f0421f507148.mp4", "https://cdn.shopify.com/videos/c/o/v/d119f3d366bb4194ac03b93956a1dbbf.mp4", "https://cdn.shopify.com/videos/c/o/v/8d08079955e14d7493018a263090cdfa.mp4", "https://cdn.shopify.com/videos/c/o/v/a5ec5f532915499896964c0974af2b21.mp4", "https://cdn.shopify.com/videos/c/o/v/638f0ac0eda74f4082567da32089af52.mp4", "https://cdn.shopify.com/videos/c/o/v/3aa232642f28476e8961e6fe58eb2004.mp4", "https://cdn.shopify.com/videos/c/o/v/7c8bb3ee4b934ad5b1c725e9e502683b.mp4", "https://cdn.shopify.com/videos/c/o/v/8483f951b9f64799902c4211516b94ac.mp4", "https://cdn.shopify.com/videos/c/o/v/4e4a90ce7ba64f9ab550d1e01bd95f23.mov", "https://cdn.shopify.com/videos/c/o/v/568cd80b0a1246319bc0f920ca554a34.mp4", "https://cdn.shopify.com/videos/c/o/v/56c4f53b711b4fb7af583794cfe0ea2d.mov", "https://cdn.shopify.com/videos/c/o/v/883e2fe1ab6c49b2a66f91e0a0c6ac5c.mp4", "https://cdn.shopify.com/videos/c/o/v/afc2b49474434a1f85957858813fa5cd.mp4", "https://cdn.shopify.com/videos/c/o/v/d4605d6ed48543269bbc30f8657fa110.mp4", "https://cdn.shopify.com/videos/c/o/v/df46c0f4b42d4094b10cc8ec27f5c019.mp4", "https://cdn.shopify.com/videos/c/o/v/0955499946564301b674d46ce0f2bbd4.mov", "https://cdn.shopify.com/videos/c/o/v/1cdc9570aa9a4afa8e525f8976a05f32.mp4", "https://cdn.shopify.com/videos/c/o/v/65bc1f31b739481d93a266876c7dc311.mp4", "https://cdn.shopify.com/videos/c/o/v/dca85f299e034fc9ae26cb22eeb6515c.mp4", "https://cdn.shopify.com/videos/c/o/v/e7ef4018bdc2412ab50c7131beee1fe7.mp4", "https://cdn.shopify.com/videos/c/o/v/6d610652474248ea8cfc37b95882714e.mp4", "https://cdn.shopify.com/videos/c/o/v/db743d066eb540519b559cbfa3638b38.mp4", "https://cdn.shopify.com/videos/c/o/v/b1b5443f7f4044bca96187d2dac05f7e.mp4", "https://cdn.shopify.com/videos/c/o/v/548197ade9334618829c5870e1551d66.mp4", "https://cdn.shopify.com/videos/c/o/v/1837574e20fa4653aea8f4c2294b9a19.mp4", "https://cdn.shopify.com/videos/c/o/v/c43e6fe6466a45f7bd3f2370b7d641be.mp4", "https://cdn.shopify.com/videos/c/o/v/66eadb9b50154a87b0397a7c496ade47.mp4", "https://cdn.shopify.com/videos/c/o/v/37138ef5c61f468a80cbee80e2910ef1.mp4", "https://cdn.shopify.com/videos/c/o/v/1225838038194fadbf13cc61f3ad2dc2.mp4", "https://cdn.shopify.com/videos/c/o/v/e19ff2164ab24fc7b8917e9ff8ea7446.mp4", "https://cdn.shopify.com/videos/c/o/v/f69c5a62fbb94f319d31c994ba720b4d.mp4", "https://cdn.shopify.com/videos/c/o/v/4dcbef59cd114cf8a3a1017fdce75319.mov" ]; /* 2. (Opcional) títulos y links reales ----------------------------------- */ const INFO={ /* 'id': ['Título', '/url'] */ }; const PREVIEW_BASE="https://cdn.shopify.com/s/files/1/0451/1085/3787/files/preview_images"; /* 3. Construye datos ------------------------------------------------------ */ const vids=VIDEO_URLS.map((url,i)=>{ const id=url.split('/').pop().split('.')[0]; const map=INFO[id]||[]; return { src:url, poster:`${PREVIEW_BASE}/${id}.thumbnail.0000000000.jpg?width=320`, title: map[0]||`Perfume #${i+1}`, href : map[1]||'/collections/all' }; }); /* 4. Elementos ------------------------------------------------------------ */ const G=document.getElementById('okp-gallery'), O=document.getElementById('okp-overlay'), P=O.querySelector('video'), seek=O.querySelector('#okp-seek'), likeBtn=O.querySelector('[data-act="like"]'), likeCnt=document.getElementById('okp-like-count'), muteBtn=O.querySelector('[data-act="mute"]'), closeBtn=O.querySelector('[data-act="close"]'), linkBtn=O.querySelector('.okp-link'), list=document.getElementById('perfume-list'), H=document.getElementById('okp-hint'), swipeHint=document.getElementById('okp-swipe-hint'); /* 5. Likes --------------------------------------------------------------- */ const key=i=>`okpl_${i}`, user=i=>+(localStorage.getItem(key(i))||0), seed=i=>60+i*2+Math.floor(Date.now()/864e5)*2, total=i=>user(i)+seed(i), inc=i=>{localStorage.setItem(key(i),user(i)+1);return total(i);}; /* 6. Render galería y lista ---------------------------------------------- */ vids.forEach((v,i)=>{ const d=document.createElement('div'); d.className='okp-thumb';d.dataset.i=i; d.style.backgroundImage=`url('${v.poster}')`; d.innerHTML=` ${total(i)}`; d.onclick=()=>open(i); G.appendChild(d); const li=document.createElement('li'); li.innerHTML=`${v.title}`; list.appendChild(li); }); /* 7. Overlay logic ------------------------------------------------------- */ let cur=0; function show(i){ cur=i; const v=vids[i]; P.classList.remove('okp-ready'); P.pause(); P.innerHTML=''; const s=document.createElement('source'); s.src=v.src; s.type='video/mp4'; /* fuerza mp4 – mejora compatibilidad */ P.appendChild(s); P.poster=v.poster.replace('320','420'); P.load(); P.play().catch(()=>{}); /* evita error en navegadores */ linkBtn.href=v.href; linkBtn.textContent=`${v.title} →`; likeCnt.textContent=total(i); seek.value=0; /* transición “guay” */ requestAnimationFrame(()=>P.classList.add('okp-ready')); /* vuelve a mostrar el hint unos segundos */ swipeHint.style.opacity=1; clearTimeout(show.hintTimeout); show.hintTimeout=setTimeout(()=>swipeHint.style.opacity=0,3000); } /* play/pause tocando el vídeo */ P.addEventListener('click',()=>P.paused?P.play():P.pause()); /* actualiza barra */ P.addEventListener('timeupdate',()=>{ seek.value=P.duration? (P.currentTime/P.duration)*100 : 0; }); seek.addEventListener('input',()=>{ if(P.duration)P.currentTime=seek.value/100*P.duration; }); /* open / close ----------------------------------------------------------- */ function open(i){ show(i); O.classList.add('okp-open'); document.body.style.overflow='hidden'; document.body.classList.add('okp-modal-open'); H?.remove(); } function close(){ O.classList.remove('okp-open'); P.pause(); document.body.style.overflow=''; document.body.classList.remove('okp-modal-open'); } likeBtn.onclick=()=>{likeCnt.textContent=inc(cur);likeBtn.animate( [{transform:'scale(1.3)'},{transform:'scale(1)'}],{duration:140}); }; muteBtn.onclick=()=>{P.muted=!P.muted;muteBtn.textContent=P.muted?'🔇':'🔊';}; closeBtn.onclick=close;O.onclick=e=>{if(e.target===O)close();}; /* 8. Swipe móvil ---------------------------------------------------------- */ let y0=null; O.addEventListener('touchstart',e=>y0=e.touches[0].clientY,{passive:true}); O.addEventListener('touchend',e=>{ if(y0===null)return; const dy=e.changedTouches[0].clientY-y0; if(Math.abs(dy)>60){ dy0&&show(cur-1); } y0=null; }); /* 9. Wheel (desktop) para cambiar vídeo ---------------------------------- */ O.addEventListener('wheel',e=>{ if(Math.abs(e.deltaY)0&&cur{ if(Math.abs(e.deltaY)>Math.abs(e.deltaX)){ G.scrollLeft+=e.deltaY; e.preventDefault(); } },{passive:false}); let drag=false,startX=0,scrollStart=0; G.addEventListener('mousedown',e=>{ drag=true;G.classList.add('dragging'); startX=e.pageX;scrollStart=G.scrollLeft; }); window.addEventListener('mouseup',()=>{drag=false;G.classList.remove('dragging');}); G.addEventListener('mousemove',e=>{ if(!drag)return; G.scrollLeft=scrollStart-(e.pageX-startX)*1.5; });