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="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">
<div class="char-tabs">
     <button class="tab-button active" data-tab="skills">Habilidades</button>
   <div class="tabs-buttons">
     <button class="tab-button" data-tab="skins">Skins</button>
     <button class="tab-button active" data-tab="tab-skills">Habilidades</button>
     <button class="tab-button" data-tab="tab-skins">Skins</button>
   </div>
   </div>


   <div class="tab-content" id="skills">
   <div class="tabs-content">
    {{Persona}}
    <div id="tab-skills" class="tab-pane active">
  </div>
      {{Persona|personaje={{{personaje}}}}}
 
    </div>
  <div class="tab-content hidden" id="skins">
    <div id="tab-skins" class="tab-pane">
    {{Skins}}
      {{Skins|personaje={{{personaje}}}}}
    </div>
   </div>
   </div>
</div>
</div>
Linha 25: Linha 18:
<script>
<script>
(function() {
(function() {
   const buttons = document.querySelectorAll(".tab-button");
   const buttons = document.querySelectorAll('.tab-button');
   const contents = document.querySelectorAll(".tab-content");
   const panes = document.querySelectorAll('.tab-pane');


   buttons.forEach(btn => {
   buttons.forEach(button => {
     btn.addEventListener("click", () => {
     button.addEventListener('click', () => {
       buttons.forEach(b => b.classList.remove("active"));
       const target = button.dataset.tab;
      contents.forEach(c => c.classList.add("hidden"));


       btn.classList.add("active");
       buttons.forEach(btn => btn.classList.remove('active'));
       const tabId = btn.getAttribute("data-tab");
       panes.forEach(pane => pane.classList.remove('active'));
       document.getElementById(tabId).classList.remove("hidden");
 
      button.classList.add('active');
       document.getElementById(target).classList.add('active');
     });
     });
   });
   });
})();
})();
</script>
</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>

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

   <button class="tab-button active" data-tab="tab-skills">Habilidades</button>
   <button class="tab-button" data-tab="tab-skins">Skins</button>

<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>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Droflax&oldid=31777”