Widget:Conquistas

Conquistas

Acompanhe as conquistas disponíveis no Grand Line Adventures.

   <button class="gla-tab active" data-tab="geral">Geral</button>
   <button class="gla-tab" data-tab="personagens">Personagens</button>
   <button class="gla-tab" data-tab="missao">Missão</button>
   <button class="gla-tab" data-tab="bau">Baú</button>
   <button class="gla-tab" data-tab="navegacao">Navegação</button>
   <button class="gla-tab" data-tab="pvp">PvP</button>
   <button class="gla-tab" data-tab="pve">PvE</button>
   <button class="gla-tab" data-tab="coliseu">Coliseu</button>
   <button class="gla-tab" data-tab="poneglyph">Poneglyph</button>
   <button class="gla-tab" data-tab="indicacao">Indicação</button>
   <button class="gla-tab" data-tab="celular">Celular</button>
   <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: #111827;

}

.gla-header p {

 margin: 4px 0 16px;
 color: #6b7280;
 font-size: 14px;

}

.gla-tabs {

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

}

.gla-tab {

 padding: 8px 14px;
 border-radius: 999px;
 border: 1px solid #d1d5db;
 background: #f9fafb;
 cursor: pointer;
 font-size: 13px;
 font-weight: 600;
 color: #374151;
 transition: all 0.2s ease;

}

.gla-tab:hover {

 background: #f3f4f6;

}

.gla-tab.active {

 background: #111827;
 color: #ffffff;
 border-color: #111827;

}

.gla-tab-panel {

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

}

.gla-tab-panel.active {

 display: block;

}

.gla-list {

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

}

.gla-item {

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

}

.gla-item-title {

 font-weight: 700;
 font-size: 15px;
 color: #111827;

}

.gla-item-desc {

 font-size: 13px;
 color: #6b7280;
 margin-top: 2px;

} </style>

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

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

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

     tabs.forEach(function(t) {
       t.classList.remove("active");
     });

     panels.forEach(function(p) {
       p.classList.remove("active");
     });

     tab.classList.add("active");

     const panel = document.querySelector(
       '.gla-tab-panel[data-tab-content="' + selected + '"]'
     );

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

}); </script>