Larifk em 13h17min de 29 de abril de 2026

2026-04-29T13:17:55Z

Larifk: Criou página com '

Conquistas

Acompanhe as conquistas disponíveis no Grand Line Adventures.
...'

2026-04-29T13:09:33Z

Criou página com '<div class="gla-achievements-widget"> <div class="gla-achievements-header"> <h2>Conquistas</h2> <p>Acompanhe as conquistas disponíveis no Grand Line Adventures.</p>...'

Página nova

<div class="gla-achievements-widget">
<div class="gla-achievements-header">
<h2>Conquistas</h2>
<p>Acompanhe as conquistas disponíveis no Grand Line Adventures.</p>
</div>

<div class="gla-tabs" role="tablist">
<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>
</div>
</div>

<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>

Widget:Lari2 - Histórico de revisão

Larifk em 13h17min de 29 de abril de 2026

Larifk: Criou página com ' Conquistas Acompanhe as conquistas disponíveis no Grand Line Adventures....'

Conquistas

Larifk: Criou página com '

Conquistas

Acompanhe as conquistas disponíveis no Grand Line Adventures.
...'