Widget:Conquistas

Conquistas

Acompanhe as conquistas disponíveis no Grand Line Adventures.

   <button type="button" class="gla-tab active" data-tab="geral">Geral</button>
   <button type="button" class="gla-tab" data-tab="personagens">Personagens</button>
   <button type="button" class="gla-tab" data-tab="missao">Missão</button>
   <button type="button" class="gla-tab" data-tab="bau">Baú</button>
   <button type="button" class="gla-tab" data-tab="navegacao">Navegação</button>
   <button type="button" class="gla-tab" data-tab="pvp">PvP</button>
   <button type="button" class="gla-tab" data-tab="pve">PvE</button>
   <button type="button" class="gla-tab" data-tab="coliseu">Coliseu</button>
   <button type="button" class="gla-tab" data-tab="poneglyph">Poneglyph</button>
   <button type="button" class="gla-tab" data-tab="indicacao">Indicação</button>
   <button type="button" class="gla-tab" data-tab="celular">Celular</button>
   <button type="button" class="gla-tab" data-tab="bossrush">Boss Rush</button>

<style> .gla-achievements-widget {

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

}

.gla-header h2 {

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

}

.gla-header p {

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

}

.gla-tabs {

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

}

.gla-tab {

 padding: 8px 14px;
 border-radius: 999px;
 border: 1px solid #cbd5e1;
 background: #f8fafc;
 cursor: pointer;
 font-size: 13px;
 font-weight: 600;
 color: #0f172a;
 transition: all 0.2s ease;

}

.gla-tab:hover {

 background: #e2e8f0;

}

.gla-tab.active {

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

}

.gla-tab-panel {

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

}

.gla-tab-panel[hidden] {

 display: none !important;

}

.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-tab");
 var panels = document.querySelectorAll(".gla-tab-panel");

 function openTab(tabName) {
   tabs.forEach(function(tab) {
     tab.classList.remove("active");
   });

   panels.forEach(function(panel) {
     panel.hidden = true;
   });

   var activeTab = document.querySelector('.gla-tab[data-tab="' + tabName + '"]');
   var activePanel = document.querySelector('.gla-tab-panel[data-tab-content="' + tabName + '"]');

   if (activeTab) {
     activeTab.classList.add("active");
   }

   if (activePanel) {
     activePanel.hidden = false;
   }
 }

 tabs.forEach(function(tab) {
   tab.addEventListener("click", function() {
     var selected = tab.getAttribute("data-tab");
     openTab(selected);
   });
 });

 openTab("geral");

}); </script>