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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<div class="gla-conquistas-headerbox">
  <div class="gla-conquistas-header">
    <h2>Conquistas</h2>
    <p>Acompanhe as conquistas disponíveis no Grand Line Adventures.</p>
  </div>
  <div class="gla-conquistas-tabs">
    <span class="gla-conquistas-tab is-active" data-tab="geral">Geral</span>
    <span class="gla-conquistas-tab" data-tab="personagens">Personagens</span>
    <span class="gla-conquistas-tab" data-tab="missao">Missão</span>
    <span class="gla-conquistas-tab" data-tab="bau">Baú</span>
    <span class="gla-conquistas-tab" data-tab="navegacao">Navegação</span>
    <span class="gla-conquistas-tab" data-tab="pvp">PvP</span>
    <span class="gla-conquistas-tab" data-tab="pve">PvE</span>
    <span class="gla-conquistas-tab" data-tab="coliseu">Coliseu</span>
    <span class="gla-conquistas-tab" data-tab="poneglyph">Poneglyph</span>
    <span class="gla-conquistas-tab" data-tab="indicacao">Indicação</span>
    <span class="gla-conquistas-tab" data-tab="celular">Celular</span>
    <span class="gla-conquistas-tab" data-tab="bossrush">Boss Rush</span>
  </div>
</div>
<style>
<style>
.gla-conquistas {
.gla-conquistas-headerbox {
   max-width: 1100px;
   max-width: 1100px;
   margin: 0 auto 20px;
   margin: 0 auto 20px;
Linha 26: Linha 48:
   flex-wrap: wrap;
   flex-wrap: wrap;
   gap: 8px;
   gap: 8px;
  margin-bottom: 20px;
}
}


.gla-conquistas-tab {
.gla-conquistas-tab {
  display: inline-block;
   padding: 8px 14px;
   padding: 8px 14px;
   border-radius: 999px;
   border-radius: 999px;
Linha 51: Linha 73:


.gla-conquistas-panel {
.gla-conquistas-panel {
   display: none;
   max-width: 1100px;
}
   margin: 20px auto 0;
 
.gla-conquistas-panel.is-active {
   display: block;
}
}


Linha 86: Linha 105:
<script>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
   var widgets = document.querySelectorAll(".gla-conquistas");
   var tabs = document.querySelectorAll(".gla-conquistas-tab");
 
  var panels = document.querySelectorAll(".gla-conquistas-panel");
  widgets.forEach(function(widget) {
    var tabs = widget.querySelectorAll(".gla-conquistas-tab");
    var panels = widget.querySelectorAll(".gla-conquistas-panel");


  function abrirAba(nomeAba) {
     tabs.forEach(function(tab) {
     tabs.forEach(function(tab) {
       tab.addEventListener("click", function() {
       tab.classList.remove("is-active");
        var selected = tab.getAttribute("data-tab");
    });


        tabs.forEach(function(item) {
    panels.forEach(function(panel) {
          item.classList.remove("is-active");
      panel.style.display = "none";
        });
    });


        panels.forEach(function(panel) {
    var abaAtiva = document.querySelector('.gla-conquistas-tab[data-tab="' + nomeAba + '"]');
          panel.classList.remove("is-active");
    var painelAtivo = document.querySelector('.gla-conquistas-panel[data-tab-content="' + nomeAba + '"]');
        });


        tab.classList.add("is-active");
    if (abaAtiva) {
      abaAtiva.classList.add("is-active");
    }


        var activePanel = widget.querySelector('.gla-conquistas-panel[data-tab-content="' + selected + '"]');
    if (painelAtivo) {
      painelAtivo.style.display = "block";
    }
  }


        if (activePanel) {
  tabs.forEach(function(tab) {
          activePanel.classList.add("is-active");
    tab.addEventListener("click", function() {
        }
      abrirAba(tab.getAttribute("data-tab"));
      });
     });
     });
   });
   });
  abrirAba("geral");
});
});
</script>
</script>

Edição das 13h39min de 29 de abril de 2026

Conquistas

Acompanhe as conquistas disponíveis no Grand Line Adventures.

   Geral
   Personagens
   Missão
   Baú
   Navegação
   PvP
   PvE
   Coliseu
   Poneglyph
   Indicação
   Celular
   Boss Rush

<style> .gla-conquistas-headerbox { 

 max-width: 1100px;
 margin: 0 auto 20px;
 padding: 20px;
 border-radius: 16px;
 background: #ffffff;
 border: 1px solid #e5e7eb;

}

.gla-conquistas-header h2 { 

 margin: 0;
 font-size: 26px;
 font-weight: 700;
 color: #020617;

}

.gla-conquistas-header p { 

 margin: 4px 0 16px;
 color: #64748b;
 font-size: 14px;

}

.gla-conquistas-tabs { 

 display: flex;
 flex-wrap: wrap;
 gap: 8px;

}

.gla-conquistas-tab { 

 display: inline-block;
 padding: 8px 14px;
 border-radius: 999px;
 border: 1px solid #cbd5e1;
 background: #f8fafc;
 cursor: pointer;
 font-size: 13px;
 font-weight: 600;
 color: #0f172a;

}

.gla-conquistas-tab:hover { 

 background: #e2e8f0;

}

.gla-conquistas-tab.is-active { 

 background: #0f172a;
 color: #ffffff;
 border-color: #0f172a;

}

.gla-conquistas-panel { 

 max-width: 1100px;
 margin: 20px auto 0;

}

.gla-list { 

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

}

.gla-item { 

 padding: 12px 14px;
 border-radius: 10px;
 border: 1px solid #e5e7eb;
 background: #f8fafc;

}

.gla-item-title { 

 font-weight: 700;
 font-size: 15px;
 color: #0f172a;

}

.gla-item-desc { 

 font-size: 13px;
 color: #64748b;
 margin-top: 2px;

} </style>

<script> document.addEventListener("DOMContentLoaded", function () { 

 var tabs = document.querySelectorAll(".gla-conquistas-tab");
 var panels = document.querySelectorAll(".gla-conquistas-panel");

 function abrirAba(nomeAba) {
   tabs.forEach(function(tab) {
     tab.classList.remove("is-active");
   });

   panels.forEach(function(panel) {
     panel.style.display = "none";
   });

   var abaAtiva = document.querySelector('.gla-conquistas-tab[data-tab="' + nomeAba + '"]');
   var painelAtivo = document.querySelector('.gla-conquistas-panel[data-tab-content="' + nomeAba + '"]');

   if (abaAtiva) {
     abaAtiva.classList.add("is-active");
   }

   if (painelAtivo) {
     painelAtivo.style.display = "block";
   }
 }

 tabs.forEach(function(tab) {
   tab.addEventListener("click", function() {
     abrirAba(tab.getAttribute("data-tab"));
   });
 });

 abrirAba("geral");

}); </script>

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