Widget:Larifk
<style> /* === LARIFK DESIGN SYSTEM === */
- root {
--lk-bg: #ffffff; --lk-surface: #f3f4f6; --lk-accent: #2563eb; --lk-text-1: #111827; --lk-text-2: #6b7280; --lk-text-3: #9ca3af; --lk-border: rgba(0,0,0,0.06); --lk-card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02); --lk-tab-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --lk-qty-bg: #1f2937; --lk-qty-text: #fff; --lk-media-bg: #000; --lk-slide-btn-bg: rgba(255,255,255,0.85); --lk-slide-btn-color: #111; --lk-slide-btn-hover: #fff; --lk-counter-bg: rgba(0,0,0,0.5);
} @media (prefers-color-scheme: dark) {
:root {
--lk-bg: #1a1a2e;
--lk-surface: #16213e;
--lk-accent: #4f8cff;
--lk-text-1: #e2e8f0;
--lk-text-2: #94a3b8;
--lk-text-3: #64748b;
--lk-border: rgba(255,255,255,0.08);
--lk-card-shadow: 0 1px 4px rgba(0,0,0,0.3);
--lk-tab-shadow: 0 1px 4px rgba(0,0,0,0.4);
--lk-qty-bg: #0f172a;
--lk-qty-text: #e2e8f0;
--lk-media-bg: #0f0f1a;
--lk-slide-btn-bg: rgba(30,30,50,0.85);
--lk-slide-btn-color: #e2e8f0;
--lk-slide-btn-hover: #2a2a4a;
--lk-counter-bg: rgba(0,0,0,0.6);
}
}
.lk-wrap {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--lk-bg); border: 1px solid var(--lk-border); border-radius: 16px; padding: 24px; margin: 1rem 0; box-shadow: var(--lk-card-shadow); color: var(--lk-text-1);
} .lk-titulo {
font-size: 1.4rem; font-weight: 700; color: var(--lk-text-1); margin: 0 0 1rem;
}
/* Tabs principais */ .lk-tabs {
display: flex; gap: 6px; background: var(--lk-surface); padding: 5px; border-radius: 12px; margin-bottom: 24px; overflow-x: auto; flex-wrap: wrap; scrollbar-width: 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: var(--lk-text-2); cursor: pointer; border-radius: 8px; transition: all 0.2s ease; white-space: nowrap; user-select: none;
} .lk-tab:hover {
background: rgba(128,128,128,0.08); color: var(--lk-text-1);
} .lk-tab.active {
background: var(--lk-bg); color: var(--lk-accent); box-shadow: var(--lk-tab-shadow);
} .lk-tab img {
width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin-right: 5px; border-radius: 4px;
}
/* Painéis */ .lk-panel {
display: none; animation: lk-fadeIn 0.25s ease;
} .lk-panel.active {
display: flex; flex-direction: column; gap: 14px; padding: .25rem 0;
} @keyframes lk-fadeIn {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
.lk-slabel {
font-size: 10px; font-weight: 700; color: var(--lk-text-3); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 5px;
}
/* Recompensas */ .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; background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: 8px; 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: var(--lk-accent); } .lk-rsprite img { max-width: 100%; max-height: 100%; object-fit: contain; } .lk-rqty { display: flex; align-items: baseline; gap: 1px; background: var(--lk-qty-bg); border-radius: 999px; padding: 1px 6px; } .lk-rqty-num { font-size: 12px; font-weight: 700; color: var(--lk-qty-text); } .lk-rqty-x { font-size: 10px; font-weight: 600; color: var(--lk-text-3); }
.lk-divider { height: 1px; background: var(--lk-border); }
/* Sub-tabs centralizadas */ .lk-ctabs {
display: flex; justify-content: center; gap: 0; margin-bottom: 14px;
} .lk-ctab {
display: inline-flex; padding: 5px 16px; font-size: 12px; font-weight: 600; color: var(--lk-text-2); cursor: pointer; border-radius: 6px; transition: all 0.2s ease; user-select: none; background: var(--lk-surface);
} .lk-ctab:first-child { border-radius: 6px 0 0 6px; } .lk-ctab:last-child { border-radius: 0 6px 6px 0; } .lk-ctab.active {
background: var(--lk-bg); color: var(--lk-text-1); box-shadow: 0 1px 2px rgba(0,0,0,0.06);
} .lk-ctab:hover:not(.active) { color: var(--lk-text-1); }
.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: var(--lk-media-bg); border: 1px solid var(--lk-border); 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;
}
/* Slider */ .lk-slider {
position: relative; width: 40%; border-radius: 12px; overflow: hidden; background: var(--lk-media-bg); border: 1px solid var(--lk-border);
} .lk-slider-track { display: flex; transition: transform 0.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: var(--lk-slide-btn-bg); color: var(--lk-slide-btn-color); 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; backdrop-filter: blur(4px); border: 1px solid var(--lk-border); transition: all 0.15s ease;
} .lk-slide-btn:hover { background: var(--lk-slide-btn-hover); transform: translateY(-50%) scale(1.08); } .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: var(--lk-counter-bg); border-radius: 999px; padding: 1px 8px;
}
@media (max-width: 520px) {
.lk-media-wrap { width: 100%; }
.lk-slider { width: 100%; }
.lk-wrap { padding: 16px; border-radius: 12px; }
.lk-tabs { gap: 4px; }
.lk-tab { padding: 7px 12px; font-size: 12px; }
} </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>