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)}
`;
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> /* Hide page title (MediaWiki skins) */ .firstHeading, .mw-first-heading {
display: none !important;
}
/* Expand wiki body to full width */ .mw-body, .mw-body-content, .mw-content-ltr {
width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; background: transparent !important;
}
/* Character Box (ficha ocupa tudo) */ .character-box {
width: 100vw !important; min-height: 100vh; margin: 0 auto !important; background: none !important; box-shadow: none !important; padding: 0 !important; color: #fff; font-family: 'Noto Sans', sans-serif !important;
}
.character-header { display: flex; gap: 10px; flex-direction: column; align-items: flex-start; padding: 8px 16px; } .character-icon { margin-top: 8px; width: 100px; height: 100px; object-fit: cover; } .character-name { font-size: 56px; font-family: 'Orbitron', sans-serif; font-weight: 900; } .character-class-list { display: flex; gap: 6px; flex-wrap: wrap; } .character-class { padding: 1px 6px; border-radius: 4px; font-size: 1.15em; font-weight: bold; box-shadow: 0 0 2px rgb(0 0 0 / 70%); background: #444; color: #fff; }
.character-tabs { margin: 4px 0 4px 8px; display: flex; gap: 12px; justify-content: flex-start; } .character-tab-btn { padding: 5px 20px; background: #333; color: white; border: none; border-radius: 8px; font-size: 20px; cursor: pointer; } .character-tab-btn.active { background: #156bc7; font-weight: bold; } .character-tab-content { display: none; background: #26211cd6; padding: 0 8px 8px; } .character-tab-content.active { display: block; }
.character-container { display: flex; gap: 20px; } .character-details { flex: 1; display: flex; flex-direction: column; gap: 10px; width: 50%; justify-content: center; } .character-skillbar { display: flex; flex-wrap: nowrap; gap: 10px; width: 56%; overflow-x: auto; overflow-y: hidden; padding: 10px 0 3px 1px; margin-bottom: 6px; scrollbar-width: thin; scrollbar-color: #ababab transparent; scroll-behavior: smooth; } .character-skillbar::-webkit-scrollbar { height: 6px; } .character-skillbar::-webkit-scrollbar-track { background: transparent; } .character-skillbar::-webkit-scrollbar-thumb { background-color: #151515; border-radius: 3px; } .character-skill { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 5px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .character-skill.active { box-shadow: 0 0 10px 3px rgba(255, 255, 0, 0.5); border: 1px solid #FFD700; animation: glow 2s ease-in-out infinite; }
.character-ability-title { position: relative; display: flex; justify-content: center; align-items: center; margin-bottom: 8px; padding-right: 32px; } .character-ability-title h3 { font-size: 1.6em; color: white; text-align: center; margin: 0; width: 100%; } .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; } .character-description h3 { font-size: 2.7em; margin: 0; text-align: center; padding-top: 0px; } .character-description p, .desc { font-size: 1.2em; margin: 0; } .character-description { min-height: 27.5rem; max-height: 50%; padding: 4px 16px !important; background: #26211C; border-radius: 8px; position: relative; box-shadow: 0 0 7px rgb(255 255 255 / 82%), 0 0 5px rgb(255 255 255 / 96%); color: #fff; backdrop-filter: blur(2px); transition: all 0.3s ease; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; padding-top: 0px !important; } .desc { overflow-y: auto !important; max-height: inherit; margin-top: 10px; } .desc * { font-size: inherit !important; line-height: inherit; } .character-description .descLevel { margin-top: 5px; font-weight: bold; }
.character-video-container { width: 43%; height: fit-content; display: flex; align-items: center; justify-content: center; background-color: #000; padding: 0; overflow: hidden; align-self: center; border-radius: 2%; box-shadow: 0 0 7px rgb(255 255 255 / 82%), 0 0 5px rgb(255 255 255 / 96%); z-index: 999; }
.attribute-cards-container { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; background: unset; border: unset; } .attribute-card { width: 138px; height: 60px; background-color: #473838; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2px; box-shadow: 0 3px 7px rgba(0,0,0,0.5); transition: transform 0.2s; border: 1px solid #00000047; } .attribute-card-title { font-size: 1.1rem; font-weight: bold; } .attribute-card-value { font-size: 14px !important; font-weight: bold; margin: 0 !important; color: white; border-bottom: unset; }
.character-skins-carousel-wrapper { min-height: 21.1rem; max-height: 60%; padding: 0 16px 1px !important; background: #26211C; border-radius: 8px; position: relative; box-shadow: 0 0 7px rgb(255 255 255 / 82%), 0 0 5px rgb(255 255 255 / 96%); color: #fff; backdrop-filter: blur(2px); transition: all 0.3s ease; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; flex: 1; display: flex; flex-direction: row; gap: 10px; justify-content: center; align-items: center; overflow: visible; z-index: 99; } .character-skins-carousel { display: flex; gap: 1vw; overflow-x: auto; scroll-behavior: smooth; padding: 10px 0; flex-grow: 1; } .character-skins-arrow { background: none; border: none; color: white; font-size: 36px; cursor: pointer; padding: 8px; z-index: 5; transition: 0.2s; } .character-skins-arrow.left { margin-right: 8px; } .character-skins-arrow.right { margin-left: 8px; }
@media (min-width: 800px) and (max-width: 1610px) and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 16/10){
.character-class{ font-size: 1.15em; }
.character-tab-btn { padding: 6px 18px; }
.attribute-title, .card-skins-title { width: 100% !important; }
.character-art {
display: none;
width: 360px;
height: 267px;
position: absolute;
right: 0.7rem;
top: 0.9rem;
z-index: 9;
}
.character-tab-content{ padding: 0 8px 20px; }
.character-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
width: 90%;
align-self: center;
}
.character-container{ flex-direction:column-reverse; }
.character-skillbar {
display: flex;
flex-wrap: nowrap;
gap: 16px;
width: 95%;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 8px;
margin-bottom: 1%;
justify-self: center;
justify-content: center;
}
.character-description h3{ justify-self: center; }
.character-skillbar .character-skill {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 5px;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.character-description .descLevel{
margin-top: 5px;
justify-self: center;
font-weight: bold;
border-bottom: 2px solid #9d9c9c;
}
.character-video-container {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
padding: 0;
overflow: hidden;
align-self: center;
border-radius: 1%;
}
.character-box{ width:97%; }
}
/* Efeitos visuais essenciais */ @keyframes glow {
0% { box-shadow: 0 0 2px 1px rgba(255,255,0,0.35); }
50% { box-shadow: 0 0 4px 2px rgba(255,255,0,0.7); }
100% { box-shadow: 0 0 2px 1px rgba(255,255,0,0.35); }
} </style>