Avaliações de clientes em vídeo

Aqueles que melhor nos recomendam Os nossos clientes ❤️ Avaliações em vídeo OK Perfumes :root{--thumb-m:40vw;--thumb-d:170px;--brand:#ffd400;} body,html{margin:0;padding:0;} /* Galeria horizontal ------------------------------------------------------ */ #okp-gallery{ display:flex;gap:8px;overflow-x:auto;padding:8px 4px; scroll-snap-type:x mandatory; /* apenas para dispositivos móveis – removido no desktop */ cursor:grab;scroll-behavior:smooth; } #okp-gallery.dragging{cursor:agarrar;} #okp-gallery::-webkit-scrollbar{altura:6px;} .okp-thumb{ flex:0 0 var(--thumb-m);rácio:9/16;fundo:#eaeaea centro/cobertura; raio da borda:10px;alinhamento-encaixe-de-rolagem:início;posição:relativa;cursor:ponteiro; transição:transformação . 25s; } @media(min-width:640px){ #okp-gallery{scroll-snap-type:none;} /* scroll livre no ambiente de trabalho */ .okp-thumb{flex:0 0 var(--thumb-d);scroll-snap-align:none;} } /* Contador de gostos ----------------------------------------------------- */ .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{largura:14px;altura:14px;preenchimento:#ff4757;} /* Sobreposição TikTok ---------------------------------------------------------- */ #okp-overlay{ posição:fixa;inserção:0;z-index:2147483647;fundo:rgba(0,0,0,.9); display:flex;flex-direção:coluna;alinhar-itens:centro;justificar-conteúdo:centro; padding:18px;opacidade:0;visibilidade:oculto;transição:opacidade . 25s; ação de toque:nenhuma; } #okp-overlay.okp-open{opacidade:1;visibilidade:visível;} .okp-player{ largura:100%;largura-máx.:620px;altura-máx.:80vh;proporção-de-aspecto:9/16;fundo:#000; raio-da-borda:6px;contorno:nenhum; transição:opacidade . 25s,transformação . 25s;opacidade:0;transformação:escala(. 92); } .okp-player.okp-ready{opacidade:1;transformação:escala(1);} .okp-controls{ display:flex;alinhar-itens:centro;lacuna:16px;cor:#fff;largura:100%; largura-máx.:620px;margem-superior: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; } /* Barra de pesquisa --------------------------------------------------------------- */ #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;largura:14px;altura:14px;raio-da-borda:50%;fundo:#fff; cursor:ponteiro;sombra-da-caixa:0 0 2px rgba(0,0,0,.6); } #okp-seek::-moz-range-thumb{ largura:14px;altura:14px;borda:none;raio-da-borda:50%;fundo:#fff;cursor:ponteiro; } /* Textos de dicas ------------------------------------------------------------- */ #okp-hint,#okp-swipe-hint{ display:bloco;margem:6px auto 0;largura:máximo-conteúdo;fundo:#000;cor:#fff; tamanho da letra: . 75rem; padding: 4px 10px; raio da borda: 14px; animação: pulso 1,1s infinito; } #okp-swipe-hint{ posição: absoluto; inferior: calc(18px + 100%); esquerda: 50%; transformação: traduzir X(-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;} /* Ocultar Hoola/WhatsApp enquanto a sobreposição estiver aberta ----------------- */ body.okp-modal-open #hoola-widget-wrapper{display:none!important;} ⬅︎ Deslize para ver todas as avaliações ➡︎ 🔇 ❤️0 Ver perfume → ✕ ⬆︎⬇︎ Deslize para ver mais vídeos Perfumes mencionados nas avaliações /* 1. URLs de vídeo --------------------------------------------------- */ const VIDEO_URLS=[ /* … lista completa como a sua … */ "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 e links reais ----------------------------------- */ const INFO={ /* 'id': ['Título', '/url'] */ }; const PREVIEW_BASE="https://cdn.shopify.com/s/files/1/0451/1085/3787/files/preview_images"; /* 3. Dados de construção ------------------------------------------------------ */ 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. Gostos --------------------------------------------------------------- */ 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. Renderizar galeria e 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}`; P.pause(); P.innerHTML=''; const s=document.createElement('source'); s.src=v.src; s.type='video/mp4'; /* força mp4 – melhora a compatibilidade */ P.appendChild(s); /* evita erros nos browsers */ linkBtn.href=v.href; linkBtn.textContent=`${v.title} →`; likeCnt.textContent=total(i); seek.value=0; /* transição “cool” */ requestAnimationFrame(()=>P.classList.add('okp-ready')); swipeHint.style.opacity=1; clearTimeout(show.hintTimeout); show.hintTimeout=setTimeout(()=>swipeHint.style.opacity=0.3000); } /* reproduzir/pausar tocando no vídeo */ P.addEventListener('click',()=>P.paused?P.play():P.pause()); /* barra de atualização */ 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; }); function open(i){ show(i); O.classList.add('okp-open'); document.body.style.overflow='hidden'; document.body.classList.add('okp-modal-open'); 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();}; 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; G.scrollLeft+=e.deltaY; e.preventDefault(); } },{passive:false}); window.addEventListener('mouseup',()=>{drag=false;G.classList.remove('dragging');}); G.scrollLeft=scrollStart-(e.pageX-startX)*1.5;