Widget:Conquistas

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>