Mudanças entre as edições de "Widget:Droflax"
Ir para navegação
Ir para pesquisar
| Linha 1: | Linha 1: | ||
<div class="char-box"> | |||
<div class="char-header"> | |||
<img src="{{{imagen}}}" alt="Arte del personaje"> | |||
<div class="char-info"> | |||
<div class="name">{{{nombre}}}</div> | |||
<div class="tier">Tier: {{{tier}}}</div> | |||
<div class="clase">Clase: {{{clase}}}</div> | |||
</div> | |||
</div> | |||
<div class="tabs"> | |||
<button class="tab-button active" data-tab="skills">Habilidades</button> | |||
<button class="tab-button" data-tab="skins">Skins</button> | |||
</div> | |||
<div class="tab-content" id="skills"> | |||
{{Persona}} | |||
</div> | |||
<div class="tab-content hidden" id="skins"> | |||
{{Skins}} | |||
</div> | |||
</div> | |||
<script> | |||
(function() { | |||
const buttons = document.querySelectorAll(".tab-button"); | |||
const contents = document.querySelectorAll(".tab-content"); | |||
buttons.forEach(btn => { | |||
btn.addEventListener("click", () => { | |||
buttons.forEach(b => b.classList.remove("active")); | |||
contents.forEach(c => c.classList.add("hidden")); | |||
btn.classList.add("active"); | |||
const tabId = btn.getAttribute("data-tab"); | |||
document.getElementById(tabId).classList.remove("hidden"); | |||
}); | |||
}); | |||
})(); | |||
</script> | |||
<style> | <style> | ||
.char-box { | .char-box { | ||
| Linha 74: | Linha 116: | ||
} | } | ||
</style> | </style> | ||
Edição das 16h51min de 2 de maio de 2025
<img src="{{{imagen}}}" alt="Arte del personaje">
{{{nombre}}}
Tier: {{{tier}}}
Clase: {{{clase}}}
<button class="tab-button active" data-tab="skills">Habilidades</button> <button class="tab-button" data-tab="skins">Skins</button>
<script> (function() {
const buttons = document.querySelectorAll(".tab-button");
const contents = document.querySelectorAll(".tab-content");
buttons.forEach(btn => {
btn.addEventListener("click", () => {
buttons.forEach(b => b.classList.remove("active"));
contents.forEach(c => c.classList.add("hidden"));
btn.classList.add("active");
const tabId = btn.getAttribute("data-tab");
document.getElementById(tabId).classList.remove("hidden");
});
});
})(); </script>
<style> .char-box {
border: 2px solid #444; border-radius: 12px; padding: 20px; background: #1e1e1e; color: white; font-family: 'Segoe UI', sans-serif; max-width: 900px; margin: auto;
}
.char-header {
display: flex; align-items: center; gap: 20px; border-bottom: 2px solid #555; padding-bottom: 10px;
}
.char-header img {
width: 120px; border-radius: 10px; border: 2px solid #888;
}
.char-info {
display: flex; flex-direction: column; gap: 5px;
}
.char-info .name {
font-size: 28px; font-weight: bold;
}
.char-info .tier {
font-size: 16px; color: #bbb;
}
.tabs {
margin-top: 20px; display: flex; gap: 10px;
}
.tab-button {
padding: 8px 16px; background: #333; color: white; border: none; cursor: pointer; border-radius: 6px; transition: background 0.3s;
}
.tab-button:hover {
background: #555;
}
.tab-button.active {
background: #007bff; font-weight: bold;
}
.tab-content {
margin-top: 20px;
}
.hidden {
display: none;
} </style>