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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(3 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<div class="gla-conquistas-headerbox">
  <div class="gla-conquistas-header">
    <h2>Conquistas</h2>
    <p>Acompanhe as conquistas disponíveis no Grand Line Adventures.</p>
  </div>
  <div class="gla-conquistas-tabs">
    <span class="gla-conquistas-tab is-active" data-tab="geral">Geral</span>
    <span class="gla-conquistas-tab" data-tab="personagens">Personagens</span>
    <span class="gla-conquistas-tab" data-tab="missao">Missão</span>
    <span class="gla-conquistas-tab" data-tab="bau">Baú</span>
    <span class="gla-conquistas-tab" data-tab="navegacao">Navegação</span>
    <span class="gla-conquistas-tab" data-tab="pvp">PvP</span>
    <span class="gla-conquistas-tab" data-tab="pve">PvE</span>
    <span class="gla-conquistas-tab" data-tab="coliseu">Coliseu</span>
    <span class="gla-conquistas-tab" data-tab="poneglyph">Poneglyph</span>
    <span class="gla-conquistas-tab" data-tab="indicacao">Indicação</span>
    <span class="gla-conquistas-tab" data-tab="celular">Celular</span>
    <span class="gla-conquistas-tab" data-tab="bossrush">Boss Rush</span>
  </div>
</div>
<style>
<style>
.gla-conquistas {
.gla-conquistas-headerbox {
   max-width: 1100px;
   max-width: 1100px;
   margin: 0 auto 20px;
   margin: 0 auto 20px;
Linha 26: Linha 48:
   flex-wrap: wrap;
   flex-wrap: wrap;
   gap: 8px;
   gap: 8px;
  margin-bottom: 20px;
}
}


.gla-conquistas-tab {
.gla-conquistas-tab {
  display: inline-block;
   padding: 8px 14px;
   padding: 8px 14px;
   border-radius: 999px;
   border-radius: 999px;
Linha 50: Linha 72:
}
}


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


/* LISTA */
.gla-list {
.gla-list {
   display: flex;
   display: flex;
Linha 64: 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 81: 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 86: Linha 152:
<script>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
   var widgets = document.querySelectorAll(".gla-conquistas");
   var tabs = document.querySelectorAll(".gla-conquistas-tab");
  var panels = document.querySelectorAll(".gla-conquistas-panel");


   widgets.forEach(function(widget) {
   function abrirAba(nome) {
    var tabs = widget.querySelectorAll(".gla-conquistas-tab");
    tabs.forEach(function(t) {
     var panels = widget.querySelectorAll(".gla-conquistas-panel");
      t.classList.remove("is-active");
     });


     tabs.forEach(function(tab) {
     panels.forEach(function(p) {
       tab.addEventListener("click", function() {
       p.classList.remove("is-active");
        var selected = tab.getAttribute("data-tab");
    });


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


        panels.forEach(function(panel) {
    if (tab) tab.classList.add("is-active");
          panel.classList.remove("is-active");
    if (panel) panel.classList.add("is-active");
        });
  }


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