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

De Wiki Gla
Ir para navegação Ir para pesquisar
(Criou página com '<div class="gla-achievements-widget"> <div class="gla-header"> <h2>Conquistas</h2> <p>Acompanhe as conquistas disponíveis no Grand Line Adventures.</p> </div>...')
 
 
(5 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 class="gla-tab active" data-tab="geral">Geral</button>
     <span class="gla-conquistas-tab is-active" data-tab="geral">Geral</span>
     <button class="gla-tab" data-tab="personagens">Personagens</button>
     <span class="gla-conquistas-tab" data-tab="personagens">Personagens</span>
     <button class="gla-tab" data-tab="missao">Missão</button>
     <span class="gla-conquistas-tab" data-tab="missao">Missão</span>
     <button class="gla-tab" data-tab="bau">Baú</button>
     <span class="gla-conquistas-tab" data-tab="bau">Baú</span>
     <button class="gla-tab" data-tab="navegacao">Navegação</button>
     <span class="gla-conquistas-tab" data-tab="navegacao">Navegação</span>
     <button class="gla-tab" data-tab="pvp">PvP</button>
     <span class="gla-conquistas-tab" data-tab="pvp">PvP</span>
     <button class="gla-tab" data-tab="pve">PvE</button>
     <span class="gla-conquistas-tab" data-tab="pve">PvE</span>
     <button class="gla-tab" data-tab="coliseu">Coliseu</button>
     <span class="gla-conquistas-tab" data-tab="coliseu">Coliseu</span>
     <button class="gla-tab" data-tab="poneglyph">Poneglyph</button>
     <span class="gla-conquistas-tab" data-tab="poneglyph">Poneglyph</span>
     <button class="gla-tab" data-tab="indicacao">Indicação</button>
     <span class="gla-conquistas-tab" data-tab="indicacao">Indicação</span>
     <button class="gla-tab" data-tab="celular">Celular</button>
     <span class="gla-conquistas-tab" data-tab="celular">Celular</span>
     <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;
   font-weight: 700;
   font-weight: 700;
   color: #111827;
   color: #020617;
}
}


.gla-header p {
.gla-conquistas-header p {
   margin: 4px 0 16px;
   margin: 4px 0 16px;
   color: #6b7280;
   color: #64748b;
   font-size: 14px;
   font-size: 14px;
}
}


.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;
   border: 1px solid #d1d5db;
   border: 1px solid #cbd5e1;
   background: #f9fafb;
   background: #f8fafc;
   cursor: pointer;
   cursor: pointer;
   font-size: 13px;
   font-size: 13px;
   font-weight: 600;
   font-weight: 600;
   color: #374151;
   color: #0f172a;
  transition: all 0.2s ease;
}
}


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


.gla-tab.active {
.gla-conquistas-tab.is-active {
   background: #111827;
   background: #0f172a;
   color: #ffffff;
   color: #ffffff;
   border-color: #111827;
   border-color: #0f172a;
}
}


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


.gla-tab-panel.active {
.gla-conquistas-panel.is-active {
   display: block;
   display: block;
}
}


/* LISTA */
.gla-list {
.gla-list {
   display: flex;
   display: flex;
Linha 90: 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: #f9fafb;
   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;
   font-size: 15px;
   font-size: 15px;
   color: #111827;
   color: #0f172a;
}
}


.gla-item-desc {
.gla-item-desc {
   font-size: 13px;
   font-size: 13px;
   color: #6b7280;
   color: #64748b;
   margin-top: 2px;
   margin-top: 2px;
}
/* RECOMPENSA */
.gla-item-reward {
  font-size: 13px;
  color: #2563eb;
  font-weight: 600;
}
}
</style>
</style>
Linha 112: Linha 152:
<script>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
   const tabs = document.querySelectorAll(".gla-tab");
   var tabs = document.querySelectorAll(".gla-conquistas-tab");
   const panels = document.querySelectorAll(".gla-tab-panel");
   var panels = document.querySelectorAll(".gla-conquistas-panel");


   tabs.forEach(function(tab) {
   function abrirAba(nome) {
     tab.addEventListener("click", function() {
     tabs.forEach(function(t) {
       const selected = tab.getAttribute("data-tab");
       t.classList.remove("is-active");
    });


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


      panels.forEach(function(p) {
    var tab = document.querySelector('.gla-conquistas-tab[data-tab="' + nome + '"]');
        p.classList.remove("active");
    var panel = document.querySelector('.gla-conquistas-panel[data-tab-content="' + nome + '"]');
      });


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


      const panel = document.querySelector(
  tabs.forEach(function(tab) {
        '.gla-tab-panel[data-tab-content="' + selected + '"]'
    tab.addEventListener("click", function() {
      );
       abrirAba(tab.getAttribute("data-tab"));
 
       if (panel) {
        panel.classList.add("active");
      }
     });
     });
   });
   });
  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”