Widget:Teste

<script> (function() {

   // Tab switching
   const buttons = document.querySelectorAll('.character-tab-btn');
   const contents = document.querySelectorAll('.character-tab-content');
   buttons.forEach(btn => btn.addEventListener('click', () => {
       buttons.forEach(b => b.classList.remove('active'));
       contents.forEach(c => c.classList.remove('active'));
       btn.classList.add('active');
       document.getElementById(btn.dataset.tab).classList.add('active');
   }));

   // Carousel arrows (skins)
   activateCarouselArrows();

   // Ability card click/preview
   const skillbar = document.querySelector('.character-skillbar');
   const descContainer = document.querySelector('.character-description');
   const videoContainer = document.querySelector('.character-video-container');
   if (skillbar && descContainer) {
       const skills = [...skillbar.querySelectorAll('.character-skill')];
       skills.forEach(div => {
           const name = div.dataset.name;
           const desc = div.dataset.desc ? div.dataset.desc.replace(/(.*?)/g, '$1') : ;
           const attr = div.dataset.attr || ;
           const video = div.dataset.video || ;

           div.title = name;

           div.addEventListener('click', () => {
               descContainer.innerHTML = `

${name || }

                           <button class="character-info-btn">i</button>
                           
                               Additional info about the ability, tips or special effects.
                           

                   ${generateAttributesHTML(attr)}

${desc}

               `;
               videoContainer.innerHTML = video ? `
                   <video width="100%" controls playsinline>
                       <source src="${video}" type="video/webm">
                   </video>
               ` : ;
               skills.forEach(c => c.classList.remove('active'));
               div.classList.add('active');
           });
           // Limpa data-* pra não poluir o DOM
           ['data-name', 'data-desc', 'data-attr', 'data-video', 'data-index'].forEach(attr => div.removeAttribute(attr));
       });
       // Seleciona a primeira habilidade automaticamente
       if (skills.length) skills[0].click();
   }

   // Permite scroll horizontal do skillbar via roda do mouse
   if (skillbar) {
       skillbar.addEventListener('wheel', e => {
           if (e.deltaY) {
               e.preventDefault();
               skillbar.scrollLeft += e.deltaY;
           }
       });
   }

   // Oculta o título da página automaticamente
   const heading = document.querySelector('.firstHeading') || document.querySelector('.mw-first-heading');
   if (heading) heading.style.display = 'none';

   // Faz a ficha ocupar toda a largura
   ['.mw-body', '.mw-body-content', '.mw-content-ltr'].forEach(sel => {
       document.querySelectorAll(sel).forEach(el => {
           el.style.width = '100vw';
           el.style.maxWidth = '100vw';
           el.style.margin = '0';
           el.style.padding = '0';
           el.style.background = 'transparent';
       });
   });

   // ========== FUNCTIONS ==========

   function activateCarouselArrows() {
       const carousel = document.querySelector('.character-skins-carousel');
       const wrapper = document.querySelector('.character-skins-carousel-wrapper');
       const [leftBtn, rightBtn] = ['.character-skins-arrow.left', '.character-skins-arrow.right'].map(sel => document.querySelector(sel));
       let isPredictingScroll = false;

       if (!carousel || !leftBtn || !rightBtn || !wrapper) return;

       const getScrollAmount = () => carousel.clientWidth * 0.6;

       const hideArrow = btn => {
           if (!btn.classList.contains('disappearing') && btn.style.display !== 'none') {
               btn.classList.add('disappearing');
               setTimeout(() => {
                   btn.style.display = 'none';
                   btn.classList.remove('disappearing');
               }, 300);
           }
       };

       const showArrow = btn => {
           if (btn.style.display === 'none') {
               btn.style.display = 'inline-block';
               void btn.offsetWidth;
           }
           btn.classList.remove('disappearing');
       };

       const setArrowsState = scrollLeft => {
           const maxScroll = carousel.scrollWidth - carousel.clientWidth;
           const hasLeft = scrollLeft > 5, hasRight = scrollLeft < maxScroll - 5;
           hasLeft ? showArrow(leftBtn) : hideArrow(leftBtn);
           hasRight ? showArrow(rightBtn) : hideArrow(rightBtn);
           wrapper.classList.toggle('has-left', hasLeft);
           wrapper.classList.toggle('has-right', hasRight);
           carousel.style.justifyContent = (!hasLeft && !hasRight) ? 'center' : ;
       };

       const handleArrowClick = dir => {
           isPredictingScroll = true;
           const scrollLeft = carousel.scrollLeft, maxScroll = carousel.scrollWidth - carousel.clientWidth;
           const nextScroll = dir === 'left' ? Math.max(0, scrollLeft - getScrollAmount()) : Math.min(maxScroll, scrollLeft + getScrollAmount());
           setArrowsState(nextScroll);
           carousel.scrollTo({ left: nextScroll, behavior: 'smooth' });

           let last = -1, still = 0;
           const wait = setInterval(() => {
               const current = Math.round(carousel.scrollLeft);
               if (current === last) {
                   if (++still >= 2) {
                       clearInterval(wait);
                       isPredictingScroll = false;
                       setArrowsState(current);
                   }
               } else {
                   last = current;
                   still = 0;
               }
           }, 50);
       };

       carousel.addEventListener('scroll', () => {
           if (!isPredictingScroll) setArrowsState(carousel.scrollLeft);
       });

       new ResizeObserver(() => {
           if (!isPredictingScroll) setArrowsState(carousel.scrollLeft);
       }).observe(carousel);

       leftBtn.addEventListener('click', () => handleArrowClick('left'));
       rightBtn.addEventListener('click', () => handleArrowClick('right'));
       setArrowsState(carousel.scrollLeft);
   }

   function generateAttributesHTML(str) {
       if (!str) return ;
       const vals = str.split(',').map(v => v.trim());
       const title = ['PVE Power','PVP Power','Energy','Cooldown'];
       return `

               ${vals.map((v, i) => {
                   let f = v === '-' ? '-' : parseInt(v);
                   if (i === 2 && !isNaN(f)) f = (f > 0 ? '+' : ) + f;
                   return `

                           ${title[i]}

${f}${i === 3 && f !== '-' ? ' sec' : }

                   `;
               }).join()}

`;

   }

})(); </script> <style> /* Esconde o título da página */ .firstHeading, .mw-first-heading {

   display: none !important;

}

/* Ficha centralizada, não invade lateral da wiki */ .character-box {

   width: 98%;
   max-width: 1200px;
   margin: 20px auto 40px auto;
   background: #222;
   border-radius: 10px;
   box-shadow: 0 4px 32px #000a, 0 1px 8px #2227;
   padding: 0;
   position: relative;
   color: #fff;
   font-family: 'Noto Sans', sans-serif;

}

/* HEADER ESTRELADO */ .character-header {

   background: #4eb9e2 url('https://static.wikia.nocookie.net/onepiece/images/3/38/Background_Effects_Star.png') repeat;
   border-radius: 10px 10px 0 0;
   padding: 16px 24px 8px 16px;
   display: flex;
   align-items: flex-start;
   position: relative;
   min-height: 125px;

}

.character-icon {

   width: 90px;
   height: 90px;
   border-radius: 8px;
   margin-right: 14px;
   border: 3px solid #fff;
   box-shadow: 0 2px 8px #0006;
   background: #333;

}

.character-header-right {

   flex: 1;
   display: flex;
   flex-direction: column;

}

.character-name {

   font-size: 2.8em;
   font-weight: 900;
   letter-spacing: 1px;
   margin-bottom: 0.1em;
   color: #222;
   text-shadow: 1px 2px 0 #fff7, 2px 2px 6px #0003;
   font-family: 'Orbitron', sans-serif;

}

.character-class-list {

   display: flex;
   gap: 8px;
   margin-bottom: 8px;

}

.character-class {

   font-size: 1em;
   font-weight: bold;
   background: #17a2b8;
   color: #fff;
   border-radius: 6px;
   padding: 3px 12px;
   box-shadow: 0 1px 3px #0002;
   border: none;

}

.character-description-top {

   font-size: 1.08em;
   margin-bottom: 2px;
   color: #333;
   background: #bbf7f6;
   padding: 2px 14px;
   border-radius: 8px;
   display: inline-block;

}

/* TABS */ .character-tabs {

   display: flex;
   gap: 8px;
   margin-top: 14px;
   margin-bottom: 6px;
   margin-left: 4px;

}

.character-tab-btn {

   padding: 5px 20px;
   background: #333;
   color: #fff;
   border: none;
   border-radius: 8px;
   font-size: 1.09em;
   cursor: pointer;
   transition: background 0.15s;

}

.character-tab-btn.active {

   background: #156bc7;
   font-weight: bold;

}

/* TABS CONTEÚDO */ .character-tab-content {

   display: none;
   background: #232124;
   padding: 20px 10px 18px 14px;
   border-radius: 0 0 10px 10px;

}

.character-tab-content.active {

   display: flex;
   gap: 12px;
   align-items: flex-start;

}

/* HABILIDADES */ .character-skillbar {

   display: flex;
   flex-direction: row;
   gap: 8px;
   background: #232124;
   border-radius: 8px;
   padding: 5px 6px;
   margin-bottom: 7px;
   overflow-x: auto;
   max-width: 92vw;

}

.character-skill {

   width: 44px;
   height: 44px;
   border-radius: 5px;
   background: #222;
   border: 2px solid #fbcc47;
   box-shadow: 0 2px 6px #0004;
   cursor: pointer;
   transition: transform 0.18s, box-shadow 0.15s;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;

}

.character-skill.active, .character-skill:hover {

   border-color: #f9e98f;
   box-shadow: 0 0 8px #FFD70099;
   transform: scale(1.08);

}

.character-skill-icon {

   width: 100%;
   height: 100%;
   object-fit: contain;

}

.character-details {

   background: #231e1c;
   border-radius: 10px;
   box-shadow: 0 1px 4px #0002;
   padding: 22px 18px;
   flex: 1;
   min-width: 320px;
   max-width: 600px;

}

.character-ability-title h3 {

   font-size: 2.2em;
   color: #fff;
   margin: 0 0 14px 0;
   font-weight: 700;

}

.attribute-cards-container {

   display: flex;
   gap: 18px;
   margin-bottom: 12px;
   flex-wrap: wrap;

}

.attribute-card {

   background: #33292c;
   border-radius: 7px;
   padding: 6px 12px;
   text-align: center;
   min-width: 90px;

}

.attribute-card-title {

   font-size: 0.95em;
   color: #d4d4d4;
   font-weight: bold;

}

.attribute-card-value {

   font-size: 1.18em;
   color: #fff;
   font-weight: bold;

}

.desc {

   margin-top: 11px;
   color: #f4f4f4;
   font-size: 1.13em;
   line-height: 1.6;

}

.character-video-container {

   flex: 1;
   background: #151415;
   border-radius: 10px;
   padding: 0 12px 0 10px;
   box-shadow: 0 1px 6px #0002;
   min-width: 260px;
   max-width: 480px;
   display: flex;
   align-items: center;
   justify-content: center;

}

.character-video-container video {

   width: 100%;
   border-radius: 8px;
   background: #000;
   box-shadow: 0 2px 7px #0004;

}

@media (max-width: 900px) {

   .character-box {
       width: 99vw;
       max-width: 99vw;
       padding: 0;
   }
   .character-header { flex-direction: column; align-items: center; text-align: center; }
   .character-header-right { align-items: center; }
   .character-details, .character-video-container { min-width: 170px; max-width: 100vw; padding: 10px 5px; }
   .character-tab-content.active { flex-direction: column; }

} </style>