Mudanças entre as edições de "Widget:Conquistas"

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(4 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<div class="gla-achievements-widget">
<div class="gla-conquistas-headerbox">
 
   <div class="gla-conquistas-header">
   <div class="gla-header">
     <h2>Conquistas</h2>
     <h2>Conquistas</h2>
     <p>Acompanhe as conquistas disponíveis no Grand Line Adventures.</p>
     <p>Acompanhe as conquistas disponíveis no Grand Line Adventures.</p>
   </div>
   </div>


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


<style>
<style>
.gla-achievements-widget {
.gla-conquistas-headerbox {
   max-width: 1100px;
   max-width: 1100px;
   margin: 0 auto 20px;
   margin: 0 auto 20px;
Linha 33: Linha 31:
}
}


.gla-header h2 {
.gla-conquistas-header h2 {
   margin: 0;
   margin: 0;
   font-size: 26px;
   font-size: 26px;
Linha 40: Linha 38:
}
}


.gla-header p {
.gla-conquistas-header p {
   margin: 4px 0 16px;
   margin: 4px 0 16px;
   color: #64748b;
   color: #64748b;
Linha 46: Linha 44:
}
}


.gla-tabs {
.gla-conquistas-tabs {
   display: flex;
   display: flex;
   flex-wrap: wrap;
   flex-wrap: wrap;
Linha 52: Linha 50:
}
}


.gla-tab {
.gla-conquistas-tab {
  display: inline-block;
   padding: 8px 14px;
   padding: 8px 14px;
   border-radius: 999px;
   border-radius: 999px;
Linha 61: Linha 60:
   font-weight: 600;
   font-weight: 600;
   color: #0f172a;
   color: #0f172a;
  transition: all 0.2s ease;
}
}


.gla-tab:hover {
.gla-conquistas-tab:hover {
   background: #e2e8f0;
   background: #e2e8f0;
}
}


.gla-tab.active {
.gla-conquistas-tab.is-active {
   background: #0f172a;
   background: #0f172a;
   color: #ffffff;
   color: #ffffff;
Linha 74: Linha 72:
}
}


.gla-tab-panel {
/* PAINEL */
.gla-conquistas-panel {
   max-width: 1100px;
   max-width: 1100px;
   margin: 20px auto 0;
   margin: 20px auto 0;
  display: none;
}
}


.gla-tab-panel[hidden] {
.gla-conquistas-panel.is-active {
   display: none !important;
   display: block;
}
}


/* LISTA */
.gla-list {
.gla-list {
   display: flex;
   display: flex;
Linha 89: Linha 90:
}
}


/* ITEM */
.gla-item {
.gla-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
   padding: 12px 14px;
   padding: 12px 14px;
   border-radius: 10px;
   border-radius: 12px;
   border: 1px solid #e5e7eb;
   border: 1px solid #e5e7eb;
   background: #f8fafc;
   background: #f8fafc;
}
}


/* LADO ESQUERDO */
.gla-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* ICONE */
.gla-item-icon img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  /* REMOVE BORDA DO MEDIAWIKI */
  border: none !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
/* fallback extra */
.thumbimage {
  border: none !important;
  padding: 0 !important;
  background: none !important;
}
/* TEXTO */
.gla-item-title {
.gla-item-title {
   font-weight: 700;
   font-weight: 700;
Linha 106: Linha 140:
   color: #64748b;
   color: #64748b;
   margin-top: 2px;
   margin-top: 2px;
}
/* RECOMPENSA */
.gla-item-reward {
  font-size: 13px;
  color: #2563eb;
  font-weight: 600;
}
}
</style>
</style>
Linha 111: Linha 152:
<script>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
   var tabs = document.querySelectorAll(".gla-tab");
   var tabs = document.querySelectorAll(".gla-conquistas-tab");
   var panels = document.querySelectorAll(".gla-tab-panel");
   var panels = document.querySelectorAll(".gla-conquistas-panel");


   function openTab(tabName) {
   function abrirAba(nome) {
     tabs.forEach(function(tab) {
     tabs.forEach(function(t) {
       tab.classList.remove("active");
       t.classList.remove("is-active");
     });
     });


     panels.forEach(function(panel) {
     panels.forEach(function(p) {
       panel.hidden = true;
       p.classList.remove("is-active");
     });
     });


     var activeTab = document.querySelector('.gla-tab[data-tab="' + tabName + '"]');
     var tab = document.querySelector('.gla-conquistas-tab[data-tab="' + nome + '"]');
     var activePanel = document.querySelector('.gla-tab-panel[data-tab-content="' + tabName + '"]');
     var panel = document.querySelector('.gla-conquistas-panel[data-tab-content="' + nome + '"]');
 
    if (activeTab) {
      activeTab.classList.add("active");
    }


     if (activePanel) {
     if (tab) tab.classList.add("is-active");
      activePanel.hidden = false;
     if (panel) panel.classList.add("is-active");
     }
   }
   }


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


   openTab("geral");
   abrirAba("geral");
});
});
</script>
</script>

Edição atual tal como às 21h58min de 29 de abril de 2026

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;

}

/* PAINEL */ .gla-conquistas-panel { 

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

}

.gla-conquistas-panel.is-active { 

 display: block;

}

/* LISTA */ .gla-list { 

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

}

/* ITEM */ .gla-item { 

 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 12px 14px;
 border-radius: 12px;
 border: 1px solid #e5e7eb;
 background: #f8fafc;

}

/* LADO ESQUERDO */ .gla-item-left { 

 display: flex;
 align-items: center;
 gap: 12px;

}

/* ICONE */ .gla-item-icon img { 

 width: 56px;
 height: 56px;
 object-fit: cover;

 /* REMOVE BORDA DO MEDIAWIKI */
 border: none !important;
 padding: 0 !important;
 background: none !important;
 box-shadow: none !important;

}

/* fallback extra */ .thumbimage { 

 border: none !important;
 padding: 0 !important;
 background: none !important;

}

/* TEXTO */ .gla-item-title { 

 font-weight: 700;
 font-size: 15px;
 color: #0f172a;

}

.gla-item-desc { 

 font-size: 13px;
 color: #64748b;
 margin-top: 2px;

}

/* RECOMPENSA */ .gla-item-reward { 

 font-size: 13px;
 color: #2563eb;
 font-weight: 600;

} </style>

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

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

 function abrirAba(nome) {
   tabs.forEach(function(t) {
     t.classList.remove("is-active");
   });

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

   var tab = document.querySelector('.gla-conquistas-tab[data-tab="' + nome + '"]');
   var panel = document.querySelector('.gla-conquistas-panel[data-tab-content="' + nome + '"]');

   if (tab) tab.classList.add("is-active");
   if (panel) panel.classList.add("is-active");
 }

 tabs.forEach(function(tab) {
   tab.addEventListener("click", function() {
     abrirAba(tab.getAttribute("data-tab"));
   });
 });

 abrirAba("geral");

}); </script>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Conquistas&oldid=46565”