Widget:Larifk
Ir para navegação
Ir para pesquisar
<style> /* === LARIFK DESIGN SYSTEM === */ .lk-wrap {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #ffffff; border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; padding: 24px; margin: 1rem 0; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02); color: #111827;
}
/* Título */ .lk-titulo {
font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 20px; color: #111827;
}
/* === TABBER PRINCIPAL (BAÚS) === */ .lk-tabs {
display: flex; gap: 6px; background: #f3f4f6; padding: 5px; border-radius: 12px; margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
} .lk-tabs::-webkit-scrollbar { display: none; }
.lk-tab {
display: flex; align-items: center; gap: 7px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: #6b7280; cursor: pointer; border-radius: 8px; transition: all 0.2s ease; white-space: nowrap; user-select: none; border: none; background: transparent;
} .lk-tab:hover {
background: rgba(0,0,0,0.04); color: #374151;
} .lk-tab.active {
background: #ffffff; color: #2563eb; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
} .lk-tab img {
width: 20px; height: 20px; object-fit: contain; border-radius: 4px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.08));
}
/* === PAINÉIS === */ .lk-panel {
display: none; animation: lk-fadeIn 0.25s ease;
} .lk-panel.active {
display: flex; flex-direction: column; gap: 16px;
} @keyframes lk-fadeIn {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
/* Labels */ .lk-slabel {
font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
/* === GRID DE RECOMPENSAS === */ .lk-rewards {
display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px;
} .lk-reward {
display: flex; flex-direction: column; align-items: center; gap: 5px;
} .lk-rsprite {
width: 48px; height: 48px; background: #f9fafb; border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease;
} .lk-reward:hover .lk-rsprite {
transform: translateY(-2px); border-color: #2563eb;
} .lk-rsprite img {
max-width: 100%; max-height: 100%; object-fit: contain;
} .lk-rqty {
display: flex; align-items: baseline; gap: 1px; background: #1f2937; border-radius: 999px; padding: 2px 7px;
} .lk-rqty-num { font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } .lk-rqty-x { font-size: 9px; font-weight: 500; color: #9ca3af; }
/* Divisor */ .lk-divider {
height: 1px; background: rgba(0,0,0,0.06); margin: 4px 0;
}
/* === SUB-TABS (Vídeo / Imagem) === */ .lk-ctabs {
display: inline-flex; background: #f3f4f6; padding: 4px; border-radius: 8px; margin: 0 auto 14px auto;
} .lk-ctab {
padding: 5px 16px; font-size: 12px; font-weight: 600; color: #6b7280; cursor: pointer; border-radius: 6px; transition: all 0.2s ease; user-select: none;
} .lk-ctab.active {
background: #ffffff; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,0.06);
} .lk-ctab:hover:not(.active) { color: #374151; }
.lk-cpanel {
display: none; text-align: center;
} .lk-cpanel.active {
display: flex; flex-direction: column; align-items: center;
}
/* === MÍDIA === */ .lk-media-wrap {
border-radius: 12px; overflow: hidden; background: #000; border: 1px solid rgba(0,0,0,0.06); width: 100%; max-width: 560px; 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;
}
/* Slider */ .lk-slider {
position: relative; width: 100%; max-width: 560px; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid rgba(0,0,0,0.06);
} .lk-slider-track {
display: flex; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
} .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(255,255,255,0.85); color: #111; border-radius: 50%; width: 32px; height: 32px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; user-select: none; backdrop-filter: blur(4px); border: 1px solid rgba(0,0,0,0.08); transition: all 0.15s ease;
} .lk-slide-btn:hover { background: #fff; transform: translateY(-50%) scale(1.08); } .lk-slide-prev { left: 8px; } .lk-slide-next { right: 8px; }
.lk-slide-counter {
position: absolute; bottom: 8px; right: 10px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.5); border-radius: 999px; padding: 3px 10px; backdrop-filter: blur(4px);
}
/* === RESPONSIVO === */ @media (min-width: 768px) {
.lk-media-wrap { width: 60%; }
.lk-slider { width: 60%; }
}
@media (max-width: 520px) {
.lk-wrap {
padding: 16px;
border-radius: 12px;
}
.lk-tabs { gap: 4px; }
.lk-tab { padding: 7px 12px; font-size: 12px; }
.lk-rewards { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.lk-rsprite { width: 42px; height: 42px; }
} </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>