Widget:Lari1

<style>

   /* ===== RESET ===== */
   .ba-wrap, .ba-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
   .ba-wrap {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       border-radius: 12px;
       overflow: hidden;
       transition: background .3s, color .3s;
   }

   /* ===== TEMAS ===== */
   .ba-wrap.dark { background: #14141f; color: #c8c8d8; }
   .ba-wrap.light { background: #f0f0f5; color: #2a2a3d; }

   /* ===== HEADER ===== */
   .ba-header {
       display: flex; align-items: center; justify-content: space-between;
       padding: 16px 20px 0;
   }
   .ba-title { font-size: 20px; font-weight: 700; }
   .ba-wrap.dark .ba-title { color: #fff; }
   .ba-wrap.light .ba-title { color: #1a1a2a; }

   .ba-controls { display: flex; align-items: center; gap: 10px; }

   .ba-mode-toggle {
       display: flex; gap: 4px; border-radius: 20px; padding: 3px;
       transition: background .3s;
   }
   .ba-wrap.dark .ba-mode-toggle { background: #1e1e30; }
   .ba-wrap.light .ba-mode-toggle { background: #dddde5; }

   .ba-mode-btn {
       padding: 5px 16px; border-radius: 16px; border: none;
       font-size: 12px; font-weight: 700; cursor: pointer;
       background: transparent; transition: all .2s;
       text-transform: uppercase; letter-spacing: .5px;
   }
   .ba-wrap.dark .ba-mode-btn { color: #6a6a8a; }
   .ba-wrap.light .ba-mode-btn { color: #8888a0; }
   .ba-wrap.dark .ba-mode-btn.active { background: #2a2a44; color: #e8c84a; }
   .ba-wrap.light .ba-mode-btn.active { background: #fff; color: #5a5a7a; box-shadow: 0 1px 3px rgba(0,0,0,.1); }

   .ba-theme-btn {
       display: flex; align-items: center; gap: 6px;
       padding: 6px 14px; border-radius: 20px; border: none;
       cursor: pointer; font-size: 13px; font-weight: 600;
       transition: all .2s; white-space: nowrap;
   }
   .ba-wrap.dark .ba-theme-btn { background: #1e1e30; color: #c8c8d8; }
   .ba-wrap.light .ba-theme-btn { background: #dddde5; color: #5a5a7a; }

   /* ===== TABS BOSSES ===== */
   .ba-tabs-bar {
       padding: 16px 20px 0;
       overflow-x: auto;
   }
   .ba-tabs-bar::-webkit-scrollbar { height: 0; }

   .ba-tabs {
       display: flex; justify-content: center; gap: 0;
       border-bottom: 1px solid rgba(120,120,180,.15);
   }
   .ba-wrap.light .ba-tabs { border-bottom-color: rgba(0,0,0,.08); }

   .ba-tab {
       padding: 10px 20px; background: transparent; border: none; cursor: pointer;
       font-size: 13px; font-weight: 600; white-space: nowrap;
       transition: all .2s; position: relative;
   }
   .ba-wrap.dark .ba-tab { color: #6a6a8a; }
   .ba-wrap.light .ba-tab { color: #8888a0; }
   .ba-wrap.dark .ba-tab.active { color: #e05555; }
   .ba-wrap.light .ba-tab.active { color: #c04040; }

   .ba-tab.active::after {
       content: ; position: absolute; bottom: -1px; left: 15%; right: 15%;
       height: 2px; border-radius: 2px;
   }
   .ba-wrap.dark .ba-tab.active::after { background: #6ab4ff; }
   .ba-wrap.light .ba-tab.active::after { background: #5a8ad0; }

   /* ===== BODY ===== */
   .ba-body {
       padding: 20px; min-height: 320px; transition: background .3s;
   }
   .ba-wrap.dark .ba-body { background: #1c1c2e; }
   .ba-wrap.light .ba-body { background: #fff; }

   .ba-section-label {
       font-size: 11px; font-weight: 700;
       letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px;
   }
   .ba-wrap.dark .ba-section-label { color: #7e7e9e; }
   .ba-wrap.light .ba-section-label { color: #9090a8; }

   /* ===== SKILLS ===== */
   .ba-skills-area { display: flex; gap: 16px; }

   .ba-skills-list {
       width: 200px; flex-shrink: 0; display: flex;
       flex-direction: column; gap: 4px;
   }

   .ba-skill-btn {
       display: flex; align-items: center; gap: 10px;
       padding: 9px 12px; border-radius: 8px; border: none;
       cursor: pointer; font-size: 13px; font-weight: 500;
       text-align: left; transition: all .15s; width: 100%;
       background: transparent;
   }
   .ba-wrap.dark .ba-skill-btn { color: #9090aa; }
   .ba-wrap.light .ba-skill-btn { color: #7a7a90; }
   .ba-wrap.dark .ba-skill-btn:hover { background: #24243a; color: #c8c8d8; }
   .ba-wrap.light .ba-skill-btn:hover { background: #f0f0f5; color: #2a2a3d; }
   .ba-wrap.dark .ba-skill-btn.active { background: #2a2a44; color: #fff; border-left: 3px solid #6ab4ff; }
   .ba-wrap.light .ba-skill-btn.active { background: #eef4ff; color: #1a1a2a; border-left: 3px solid #5a8ad0; }

   .ba-skill-num {
       width: 20px; height: 20px; border-radius: 50%;
       display: flex; align-items: center; justify-content: center;
       font-size: 10px; font-weight: 700; flex-shrink: 0;
   }
   .ba-wrap.dark .ba-skill-num { background: #2a2a44; color: #6ab4ff; }
   .ba-wrap.light .ba-skill-num { background: #dde8f8; color: #5a8ad0; }
   .ba-wrap.dark .ba-skill-btn.active .ba-skill-num { background: #6ab4ff; color: #14141f; }
   .ba-wrap.light .ba-skill-btn.active .ba-skill-num { background: #5a8ad0; color: #fff; }

   /* ===== VIDEO ===== */
   .ba-video-area {
       border-radius: 10px; overflow: hidden;
       aspect-ratio: 16/9; width: 480px; min-width: 360px;
       display: flex; align-items: center; justify-content: center;
       flex-shrink: 0;
   }
   .ba-wrap.dark .ba-video-area { background: #111; border: 1px solid rgba(100,100,160,.15); }
   .ba-wrap.light .ba-video-area { background: #e8e8f0; border: 1px solid rgba(0,0,0,.08); }

   .ba-video-placeholder { text-align: center; }
   .ba-wrap.dark .ba-video-placeholder { color: #555; }
   .ba-wrap.light .ba-video-placeholder { color: #aaa; }
   .ba-video-placeholder p { font-size: 12px; }

   .ba-skill-desc {
       font-size: 12px; line-height: 1.5;
       padding: 8px 12px; border-radius: 8px;
       flex: 1; min-width: 80px;
   }
   .ba-wrap.dark .ba-skill-desc { color: #8888a8; background: #1a1a2a; border-left: 2px solid #6ab4ff; }
   .ba-wrap.light .ba-skill-desc { color: #6a6a80; background: #f5f5fa; border-left: 2px solid #5a8ad0; }

   .ba-video-row {
       display: flex; gap: 14px; align-items: flex-start; flex: 1;
   }

   .ba-empty {
       text-align: center; padding: 60px 20px; opacity: .4; font-size: 14px;
   }

   /* ===== RESPONSIVO ===== */
   @media (max-width: 600px) {
       .ba-skills-area { flex-direction: column; }
       .ba-skills-list {
           width: 100%; flex-direction: row;
           overflow-x: auto; gap: 6px;
       }
       .ba-skill-btn { white-space: nowrap; }
       .ba-video-row { flex-direction: column; }
       .ba-video-area { min-width: unset; max-width: 100%; width: 100%; }
   }

/* Fix MediaWiki

wrapping */ .mw-parser-output > p:has(> style), .mw-parser-output > p:has(> script) { margin: 0 !important; } </style> <script> (function () { function run() { var wrap = document.getElementById('ba-wrap'); if (!wrap) return; var bosses; try { bosses = JSON.parse(wrap.getAttribute('data-bosses') || '[]'); } catch (e) { return; } if (!bosses.length) return; var titulo = wrap.getAttribute('data-titulo') || ; var currentMode = 'elite'; var currentBoss = 0; var currentSkill = 0; var isDark = wrap.classList.contains('dark'); /* ---------- Extrai YouTube ID ---------- */ function ytId(str) { if (!str) return ; var m = str.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/); if (m) return m[1]; if (/^[A-Za-z0-9_-]{11}$/.test(str.trim())) return str.trim(); return ; } /* ---------- Monta HTML interno ---------- */ function buildShell() { wrap.innerHTML = ; /* Header */ var header = document.createElement('div'); header.className = 'ba-header'; var titleEl = document.createElement('div'); titleEl.className = 'ba-title'; titleEl.textContent = titulo; header.appendChild(titleEl); var controls = document.createElement('div'); controls.className = 'ba-controls'; var modeToggle = document.createElement('div'); modeToggle.className = 'ba-mode-toggle'; var btnElite = document.createElement('button'); btnElite.className = 'ba-mode-btn active'; btnElite.textContent = 'ELITE'; btnElite.addEventListener('click', function () { setMode('elite', this); }); var btnHard = document.createElement('button'); btnHard.className = 'ba-mode-btn'; btnHard.textContent = 'HARD'; btnHard.addEventListener('click', function () { setMode('hard', this); }); modeToggle.appendChild(btnElite); modeToggle.appendChild(btnHard); controls.appendChild(modeToggle); var themeBtn = document.createElement('button'); themeBtn.className = 'ba-theme-btn'; themeBtn.id = 'ba-theme-btn'; themeBtn.innerHTML = isDark ? '❄️ Light' : '🌙 Dark'; themeBtn.addEventListener('click', toggleTheme); controls.appendChild(themeBtn); header.appendChild(controls); wrap.appendChild(header); /* Tabs bar */ var tabsBar = document.createElement('div'); tabsBar.className = 'ba-tabs-bar'; var tabsEl = document.createElement('div'); tabsEl.className = 'ba-tabs'; tabsEl.id = 'ba-tabs'; tabsBar.appendChild(tabsEl); wrap.appendChild(tabsBar); /* Body */ var body = document.createElement('div'); body.className = 'ba-body'; body.id = 'ba-body'; wrap.appendChild(body); } /* ---------- Render tabs ---------- */ function renderTabs() { var el = document.getElementById('ba-tabs'); if (!el) return; el.innerHTML = ; bosses.forEach(function (b, i) { var btn = document.createElement('button'); btn.className = 'ba-tab' + (i === currentBoss ? ' active' : ); btn.textContent = b.nome; btn.addEventListener('click', function () { currentBoss = i; currentSkill = 0; render(); }); el.appendChild(btn); }); } /* ---------- Render body ---------- */ function renderBody() { var el = document.getElementById('ba-body'); if (!el) return; var boss = bosses[currentBoss]; if (!boss) { currentBoss = 0; boss = bosses[0]; } var skills = boss[currentMode] || []; if (!skills.length) { el.innerHTML = '

Nenhuma skill cadastrada para este modo.

';

               return;
           }
           if (currentSkill >= skills.length) currentSkill = 0;

var html = '

Skills

'; html += '

';

           /* Lista de skills */

html += '

';

           skills.forEach(function (s, i) {
               html += '<button class="ba-skill-btn' + (i === currentSkill ? ' active' : ) + '" data-si="' + i + '">';
               html += '' + (i + 1) + ' ' + s.nome + '</button>';
           });

html += '

';

           /* Vídeo + descrição lado a lado */
           var skill = skills[currentSkill];

html += '

';

           var vid = ytId(skill.video);
           if (vid) {

html += '

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/' + vid + '" frameborder="0" allowfullscreen style="border:0;"></iframe>

';

           } else {

html += '

Sem vídeo disponível

';

           }

           if (skill.desc) {

html += '

' + skill.desc + '

';

           }

html += '

';

           el.innerHTML = html;

           /* Listeners skills */
           el.querySelectorAll('.ba-skill-btn').forEach(function (btn) {
               btn.addEventListener('click', function () {
                   currentSkill = parseInt(this.getAttribute('data-si'));
                   renderBody();
               });
           });
       }

       /* ---------- Render completo ---------- */
       function render() {
           renderTabs();
           renderBody();
       }

       /* ---------- Trocar modo ---------- */
       function setMode(mode, btn) {
           currentMode = mode;
           currentBoss = 0;
           currentSkill = 0;
           wrap.querySelectorAll('.ba-mode-btn').forEach(function (b) {
               b.classList.remove('active');
           });
           btn.classList.add('active');
           render();
       }

       /* ---------- Trocar tema ---------- */
       function toggleTheme() {
           isDark = !isDark;
           wrap.classList.toggle('dark', isDark);
           wrap.classList.toggle('light', !isDark);
           var tb = document.getElementById('ba-theme-btn');
           if (tb) tb.innerHTML = isDark ? '❄️ Light' : '🌙 Dark';
       }

       buildShell();
       render();
   }

   if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', run);
   } else {
       run();
   }

})(); </script>