Widget:Lari2

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 {

 width: 100%;
 max-width: 1100px;
 margin: 0 auto 18px auto;
 padding: 18px;
 border-radius: 18px;
 background: linear-gradient(180deg, #24150e 0%, #130b08 100%);
 border: 1px solid rgba(255, 214, 124, 0.18);
 box-shadow: 0 10px 35px rgba(0,0,0,.35);
 box-sizing: border-box;

}

.gla-achievements-header {

 margin-bottom: 16px;

}

.gla-achievements-header h2 {

 margin: 0;
 color: #fff4c8;
 font-size: 28px;
 line-height: 1.1;
 font-weight: 800;
 text-shadow: 0 2px 4px rgba(0,0,0,.6);

}

.gla-achievements-header p {

 margin: 6px 0 0;
 color: #c9bba2;
 font-size: 14px;

}

.gla-tabs {

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

}

.gla-tab {

 appearance: none;
 border: 1px solid rgba(255, 226, 142, .22);
 background: rgba(255, 255, 255, .045);
 color: #dac7a6;
 padding: 9px 13px;
 border-radius: 999px;
 font-size: 13px;
 font-weight: 700;
 cursor: pointer;
 transition: all .2s ease;

}

.gla-tab:hover {

 background: rgba(255, 226, 142, .12);
 color: #fff0bd;
 transform: translateY(-1px);

}

.gla-tab.active {

 color: #2b1709;
 background: linear-gradient(180deg, #fff47a 0%, #e7bf2e 100%);
 border-color: #fff58b;
 box-shadow: 0 0 16px rgba(255, 231, 83, .35);

}

.gla-tab-panel {

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

}

.gla-tab-panel.active {

 display: block;

}

.gla-achievement-list {

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

}

.gla-achievement-card {

 display: grid;
 grid-template-columns: 72px 1fr;
 gap: 14px;
 align-items: center;
 padding: 12px;
 border-radius: 14px;
 background: linear-gradient(180deg, #20120c 0%, #140b08 100%);
 border: 1px solid rgba(255, 221, 143, .12);
 box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);

}

.gla-achievement-icon {

 width: 64px;
 height: 64px;
 border-radius: 10px;
 overflow: hidden;
 background: #2a160d;
 border: 2px solid #f3d34f;
 box-shadow: 0 0 10px rgba(0,0,0,.45);

}

.gla-achievement-icon img {

 width: 100%;
 height: 100%;
 object-fit: cover;

}

.gla-achievement-content {

 min-width: 0;

}

.gla-achievement-title {

 margin: 0 0 4px;
 color: #fff3d2;
 font-size: 17px;
 font-weight: 800;
 line-height: 1.2;
 text-shadow: 0 2px 4px rgba(0,0,0,.7);

}

.gla-achievement-desc {

 margin: 0 0 9px;
 color: #b7aa98;
 font-size: 14px;
 font-weight: 600;

}

.gla-progress-wrap {

 position: relative;
 width: 100%;
 height: 14px;
 border-radius: 999px;
 overflow: hidden;
 background: #201410;
 border: 1px solid rgba(255,255,255,.12);

}

.gla-progress-bar {

 height: 100%;
 border-radius: 999px;
 background: linear-gradient(90deg, #e8ff4f 0%, #fff27a 55%, #c8eb43 100%);
 box-shadow: 0 0 12px rgba(239, 255, 83, .35);

}

.gla-progress-text {

 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #ffffff;
 font-size: 11px;
 font-weight: 800;
 text-shadow: 0 1px 3px #000;

}

@media (max-width: 640px) {

 .gla-achievements-widget {
   padding: 14px;
   border-radius: 14px;
 }

 .gla-achievements-header h2 {
   font-size: 23px;
 }

 .gla-tab {
   font-size: 12px;
   padding: 8px 10px;
 }

 .gla-achievement-card {
   grid-template-columns: 56px 1fr;
   gap: 10px;
   padding: 10px;
 }

 .gla-achievement-icon {
   width: 52px;
   height: 52px;
 }

 .gla-achievement-title {
   font-size: 15px;
 }

 .gla-achievement-desc {
   font-size: 12px;
 }

} </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 selectedTab = tab.getAttribute("data-tab");

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

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

     tab.classList.add("active");

     const activePanel = document.querySelector('.gla-tab-panel[data-tab-content="' + selectedTab + '"]');
     if (activePanel) {
       activePanel.classList.add("active");
     }
   });
 });

}); </script>