Widget:Larifk

De Wiki Gla
Revisão de 20h47min de 16 de março de 2026 por Larifk (discussão | contribs)
Ir para navegação Ir para pesquisar

<style> .lk-titulo{font-size:1.4rem;font-weight:700;color:#222;margin:0 0 1rem;} .lk-tabs{display:flex;gap:0;border-bottom:2px solid #e0e0e0;margin-bottom:1rem;flex-wrap:wrap;} .lk-tab{display:flex;align-items:center;padding:6px 16px;font-size:13px;font-weight:600;color:#555;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s;white-space:nowrap;user-select:none;} .lk-tab.active{color:#2a6496;border-bottom-color:#2a6496;} .lk-tab:hover:not(.active){color:#333;} .lk-tab img{width:20px;height:20px;object-fit:contain;vertical-align:middle;margin-right:5px;border-radius:4px;} .lk-panel{display:none;} .lk-panel.active{display:flex;flex-direction:column;gap:14px;padding:.25rem 0;} .lk-slabel{font-size:10px;font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px;} .lk-rewards{display:flex;flex-wrap:wrap;gap:8px;} .lk-reward{display:flex;flex-direction:column;align-items:center;gap:3px;} .lk-rsprite{width:38px;height:38px;border-radius:8px;background:#f5f5f5;border:.5px solid rgba(0,0,0,.1);overflow:hidden;display:flex;align-items:center;justify-content:center;} .lk-rsprite img{max-width:100%;max-height:100%;object-fit:contain;} .lk-rqty{display:flex;align-items:baseline;gap:1px;background:#222;border-radius:999px;padding:1px 6px;} .lk-rqty-num{font-size:12px;font-weight:700;color:#fff;} .lk-rqty-x{font-size:10px;font-weight:600;color:#aaa;} .lk-divider{height:.5px;background:rgba(0,0,0,.09);} .lk-ctabs{display:flex;gap:0;border-bottom:1px solid #e0e0e0;margin-bottom:10px;justify-content:center;} .lk-ctab{padding:4px 14px;font-size:12px;font-weight:600;color:#888;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;user-select:none;} .lk-ctab.active{color:#2a6496;border-bottom-color:#2a6496;} .lk-ctab:hover:not(.active){color:#333;} .lk-cpanel{display:none;text-align:center;} .lk-cpanel.active{display:flex;flex-direction:column;align-items:center;} .lk-media-wrap{border-radius:10px;overflow:hidden;background:#f0f0f0;border:.5px solid rgba(0,0,0,.1);width:40%;aspect-ratio:16/9;position:relative;} .lk-media-wrap img{position:absolute;inset:0;width:100%;height:100%;border:none;object-fit:cover;display:block;} .lk-slider{position:relative;width:40%;border-radius:10px;overflow:hidden;background:#f0f0f0;border:.5px solid rgba(0,0,0,.1);} .lk-slider-track{display:flex;transition:transform .3s ease;} .lk-slide{min-width:100%;display:flex;align-items:center;justify-content:center;} .lk-slide img{width:100%;height:auto;display:block;} .lk-slide a{display:block;line-height:0;} .lk-slide-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);color:#fff;border-radius:50%;width:28px;height:28px;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;user-select:none;} .lk-slide-prev{left:6px;} .lk-slide-next{right:6px;} .lk-slide-counter{position:absolute;bottom:6px;right:8px;font-size:11px;font-weight:600;color:#fff;background:rgba(0,0,0,.45);border-radius:999px;padding:1px 8px;} @media(max-width:520px){

 .lk-media-wrap{width:100%;}
 .lk-slider{width:100%;}

} </style> <script> document.addEventListener('DOMContentLoaded', function() {

   document.querySelectorAll('.lk-wrap').forEach(function(wrap) {
       wrap.querySelectorAll('.lk-tab').forEach(function(tab) {
           tab.addEventListener('click', function() {
               wrap.querySelectorAll('.lk-tab').forEach(function(t) { t.classList.remove('active'); });
               wrap.querySelectorAll('.lk-panel').forEach(function(p) { p.classList.remove('active'); });
               tab.classList.add('active');
               var panel = wrap.querySelector('.lk-panel[data-panel="' + tab.dataset.tab + '"]');
               panel.classList.add('active');
               mountVideo(panel);
           });
       });
       mountVideo(wrap.querySelector('.lk-panel.active'));
   });
   document.querySelectorAll('.lk-panel').forEach(function(panel) {
       panel.querySelectorAll('.lk-ctab').forEach(function(ctab) {
           ctab.addEventListener('click', function() {
               panel.querySelectorAll('.lk-ctab').forEach(function(t) { t.classList.remove('active'); });
               panel.querySelectorAll('.lk-cpanel').forEach(function(p) { p.classList.remove('active'); });
               ctab.classList.add('active');
               var cpanel = panel.querySelector('.lk-cpanel[data-cpanel="' + ctab.dataset.ctab + '"]');
               cpanel.classList.add('active');
               mountVideo(cpanel);
           });
       });
   });
   document.querySelectorAll('.lk-slider').forEach(function(slider) {
       var track   = slider.querySelector('.lk-slider-track');
       var counter = slider.querySelector('.lk-slide-counter');
       var total   = counter ? parseInt(counter.getAttribute('data-total')) : 0;
       var current = 0;
       function goTo(idx) {
           current = (idx + total) % total;
           track.style.transform = 'translateX(-' + (current * 100) + '%)';
           if (counter) counter.textContent = (current + 1) + ' / ' + total;
       }
       var prev = slider.querySelector('.lk-slide-prev');
       var next = slider.querySelector('.lk-slide-next');
       if (prev) prev.addEventListener('click', function() { goTo(current - 1); });
       if (next) next.addEventListener('click', function() { goTo(current + 1); });
   });
   function mountVideo(panel) {
       if (!panel) return;
       var wrap = panel.querySelector('.lk-media-wrap[data-video]');
       if (!wrap || wrap.querySelector('iframe')) return;
       var id = wrap.getAttribute('data-video');
       var iframe = document.createElement('iframe');
       iframe.src = 'https://www.youtube.com/embed/' + id;
       iframe.setAttribute('allowfullscreen', );
       iframe.setAttribute('frameborder', '0');
       iframe.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border:none;display:block;';
       wrap.appendChild(iframe);
   }

}); </script>