Widget:Teste

<script> (function() {

   // Tabs functionality
   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');
   }));

   activateCarouselArrows();

   const skillsBar = document.querySelector('.character-skills-bar');
   const descriptionBox = document.querySelector('.character-description-box');
   const videoBox = document.querySelector('.character-video-box');
   const skillIcons = [...skillsBar.querySelectorAll('.character-skill-icon')];

   skillIcons.forEach(div => {
       const name = div.dataset.name;
       const desc = div.dataset.desc.replace(/(.*?)/g, '$1');
       const attr = div.dataset.attr;
       const video = div.dataset.video;

       div.title = name;

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

${name}

                       <button class="character-info-btn">i</button>
                       
                       Extra information, tips or effects for this skill.
                       

               ${generateAttributesHTML(attr)}

${desc}

`;

           videoBox.innerHTML = video ? `
               <video width="100%" controls playsinline>
               <source src="${video}" type="video/webm">
               </video>` : ;

           skillIcons.forEach(c => c.classList.remove('active'));
           div.classList.add('active');
       });

       ['data-name', 'data-desc', 'data-attr', 'data-video', 'data-index'].forEach(attr => div.removeAttribute(attr));
   });

   if (skillIcons.length) skillIcons[0].click();

   skillsBar.addEventListener('wheel', e => {
       if (e.deltaY) {
           e.preventDefault();
           skillsBar.scrollLeft += e.deltaY;
       }
   });

   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;

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

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

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

       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);
           if (!hasLeft && !hasRight) { carousel.style.justifyContent = 'center'; } else { carousel.style.justifyContent = ; }
       };

       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) {
       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> .character-box {

   padding: 24px;
   color: #fff;
   font-family: 'Orbitron', 'Noto Sans', Arial, sans-serif;
   width: 98%;
   margin: 28px auto;
   position: relative;
   user-select: none;
   background: #1c2025;
   border-radius: 18px;
   box-shadow: 0 2px 24px #0008;
   max-width: 1200px;

} .character-header {

   display: flex;
   align-items: flex-start;
   gap: 24px;
   margin-bottom: 10px;

} .character-icon {

   width: 88px;
   height: 88px;
   border-radius: 9px;
   object-fit: cover;
   border: 3px solid #2bd8d3;
   background: #181b1e;

} .character-info-block {

   display: flex;
   flex-direction: column;
   gap: 4px;

} .character-name {

   font-size: 3.3em;
   font-weight: 900;
   letter-spacing: 0.04em;
   color: #fff;
   margin-bottom: 2px;
   text-shadow: 2px 2px 0 #1ca8b6;

} .character-classes {

   font-size: 1.12em;
   color: #2bd8d3;
   margin-bottom: 3px;
   font-weight: bold;
   display: flex;
   gap: 10px;

} .character-desc {

   background: #1a252e;
   color: #b6eaff;
   border-radius: 7px;
   padding: 9px 16px;
   font-size: 1.21em;
   margin-top: 5px;
   box-shadow: 0 1px 4px #0003;
   max-width: 650px;

}

.character-tabs {

   margin: 20px 0 8px 0;
   display: flex;
   gap: 16px;

} .character-tab-btn {

   padding: 7px 28px;
   font-size: 1.14em;
   border: none;
   border-radius: 6px;
   background: #393a40;
   color: #fff;
   font-weight: bold;
   cursor: pointer;
   transition: background .18s;
   outline: none;
   letter-spacing: 1px;

} .character-tab-btn.active {

   background: #2bd8d3;
   color: #191c1d;

}

.character-tab-content {

   display: none;

} .character-tab-content.active {

   display: block;
   margin-top: 10px;

}

.character-skills-bar {

   display: flex;
   flex-wrap: nowrap;
   gap: 14px;
   padding: 6px 0 10px 2px;
   overflow-x: auto;
   scrollbar-width: thin;
   scrollbar-color: #2bd8d3 #181b1e;
   margin-bottom: 6px;

} .character-skill-icon {

   width: 54px;
   height: 54px;
   border-radius: 8px;
   border: 2px solid transparent;
   cursor: pointer;
   box-shadow: 0 1px 5px #0004;
   transition: border 0.2s, box-shadow 0.2s, transform 0.12s;
   background: #181b1e;
   display: flex;
   align-items: center;
   justify-content: center;

} .character-skill-icon.active {

   border: 2.5px solid #2bd8d3;
   box-shadow: 0 0 0 3px #2bd8d366;
   transform: scale(1.11);

} .character-skill-icon img {

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

}

.character-main-content {

   display: flex;
   gap: 24px;
   margin-top: 10px;

} .character-description-box {

   flex: 1 1 60%;
   display: flex;
   flex-direction: column;
   gap: 13px;
   background: #181b1e;
   border-radius: 10px;
   padding: 24px;
   box-shadow: 0 0 16px #0003;
   min-width: 350px;
   max-width: 600px;

} .character-desc-text {

   color: #fff;
   font-size: 1.1em;

} .character-skill-title h3 {

   font-size: 2.3em;
   letter-spacing: 1.6px;
   margin-bottom: 3px;
   color: #2bd8d3;

} .character-attributes-cards {

   display: flex;
   gap: 17px;
   margin-bottom: 9px;

} .character-attribute-card {

   background: #2bd8d320;
   border-radius: 6px;
   padding: 10px;
   min-width: 80px;
   text-align: center;
   color: #fff;
   font-weight: 600;

} .character-attribute-title {

   font-size: 1.1em;
   color: #b6eaff;

} .character-attribute-value {

   font-size: 1.22em;
   color: #fff;

}

.character-video-box {

   flex: 1 1 40%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #181b1e;
   border-radius: 10px;
   padding: 24px;
   box-shadow: 0 0 16px #0003;
   min-width: 350px;
   max-width: 600px;
   min-height: 240px;
   margin-left: 10px;

}

.character-tooltip-container {

   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);

} .character-info-btn {

   border: none;
   color: #D3DBDC;
   background-color: #787878;
   font-weight: bold;
   border-radius: 50%;
   width: 44px;
   height: 44px;
   font-family: 'Noto Sans';
   cursor: pointer;
   transition: 0.2s;
   box-shadow: 0 0 3px #000;
   font-size: 40px;
   padding: 0;
   line-height: 24px;
   text-align: center;

} .character-tooltip-text {

   visibility: hidden;
   width: 220px;
   background-color: #222;
   color: #fff;
   text-align: left;
   padding: 8px 10px;
   border-radius: 8px;
   position: absolute;
   z-index: 10;
   bottom: 130%;
   left: 50%;
   transform: translate(-85%, 110%);
   opacity: 0;
   transition: opacity 0.3s;
   font-size: 12px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.5);
   pointer-events: none;

} .character-tooltip-container:hover .character-tooltip-text {

   visibility: visible;
   opacity: 1;

}

@media (max-width: 1050px) {

   .character-main-content { flex-direction: column; }
   .character-video-box, .character-description-box { max-width: 100%; min-width: 0; }

} </style>