Mudanças entre as edições de "Widget:Droflax"

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<div class="personaje-box">
  <div class="personaje-header">
    <img src="{{{imagen}}}" alt="Arte del personaje">
    <div class="personaje-info">
      <div class="nombre">{{{nombre}}}</div>
      <div class="tier">Tier: {{{tier}}}</div>
      <div class="clase">Clase: {{{clase}}}</div>
    </div>
  </div>


<div class="char-tabs">
  <div class="personaje-tabs">
  <div class="tabs-buttons">
     <button class="tab-btn active" data-tab="habilidades">Habilidades</button>
     <button class="tab-button active" data-tab="tab-skills">Habilidades</button>
     <button class="tab-btn" data-tab="skins">Skins</button>
     <button class="tab-button" data-tab="tab-skins">Skins</button>
   </div>
   </div>


   <div class="tabs-content">
   <div class="tab-content active" id="habilidades">
    <div id="tab-skills" class="tab-pane active">
    {{Persona}} <!-- usa Plantilla:Persona -->
      {{Persona|personaje={{{personaje}}}}}
  </div>
    </div>
  <div class="tab-content" id="skins">
    <div id="tab-skins" class="tab-pane">
    {{Skins}} <!-- usa Plantilla:Skins -->
      {{Skins|personaje={{{personaje}}}}}
    </div>
   </div>
   </div>
</div>
</div>
<script>
(function() {
  const buttons = document.querySelectorAll('.tab-button');
  const panes = document.querySelectorAll('.tab-pane');
  buttons.forEach(button => {
    button.addEventListener('click', () => {
      const target = button.dataset.tab;
      buttons.forEach(btn => btn.classList.remove('active'));
      panes.forEach(pane => pane.classList.remove('active'));
      button.classList.add('active');
      document.getElementById(target).classList.add('active');
    });
  });
})();
</script>

Edição das 19h38min de 2 de maio de 2025

   <img src="{{{imagen}}}" alt="Arte del personaje">
{{{nombre}}}
Tier: {{{tier}}}
Clase: {{{clase}}}
   <button class="tab-btn active" data-tab="habilidades">Habilidades</button>
   <button class="tab-btn" data-tab="skins">Skins</button>