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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<div class="gla-achievements-widget">
  <div class="gla-header">
    <h2>Conquistas</h2>
    <p>Acompanhe as conquistas disponíveis no Grand Line Adventures.</p>
  </div>
  <div class="gla-tabs">
    <button type="button" class="gla-tab active" data-tab="geral">Geral</button>
    <button type="button" class="gla-tab" data-tab="personagens">Personagens</button>
    <button type="button" class="gla-tab" data-tab="missao">Missão</button>
    <button type="button" class="gla-tab" data-tab="bau">Baú</button>
    <button type="button" class="gla-tab" data-tab="navegacao">Navegação</button>
    <button type="button" class="gla-tab" data-tab="pvp">PvP</button>
    <button type="button" class="gla-tab" data-tab="pve">PvE</button>
    <button type="button" class="gla-tab" data-tab="coliseu">Coliseu</button>
    <button type="button" class="gla-tab" data-tab="poneglyph">Poneglyph</button>
    <button type="button" class="gla-tab" data-tab="indicacao">Indicação</button>
    <button type="button" class="gla-tab" data-tab="celular">Celular</button>
    <button type="button" class="gla-tab" data-tab="bossrush">Boss Rush</button>
  </div>
</div>
<style>
<style>
.gla-achievements-widget {
.gla-conquistas {
   max-width: 1100px;
   max-width: 1100px;
   margin: 0 auto 20px;
   margin: 0 auto 20px;
Linha 33: Linha 9:
}
}


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


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


.gla-tabs {
.gla-conquistas-tabs {
   display: flex;
   display: flex;
   flex-wrap: wrap;
   flex-wrap: wrap;
   gap: 8px;
   gap: 8px;
  margin-bottom: 20px;
}
}


.gla-tab {
.gla-conquistas-tab {
   padding: 8px 14px;
   padding: 8px 14px;
   border-radius: 999px;
   border-radius: 999px;
Linha 61: Linha 38:
   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 50:
}
}


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


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


Linha 111: Linha 86:
<script>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
   var tabs = document.querySelectorAll(".gla-tab");
   var widgets = document.querySelectorAll(".gla-conquistas");
  var panels = document.querySelectorAll(".gla-tab-panel");
 
  widgets.forEach(function(widget) {
    var tabs = widget.querySelectorAll(".gla-conquistas-tab");
    var panels = widget.querySelectorAll(".gla-conquistas-panel");


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


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


    var activeTab = document.querySelector('.gla-tab[data-tab="' + tabName + '"]');
        panels.forEach(function(panel) {
    var activePanel = document.querySelector('.gla-tab-panel[data-tab-content="' + tabName + '"]');
          panel.classList.remove("is-active");
        });


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


    if (activePanel) {
        var activePanel = widget.querySelector('.gla-conquistas-panel[data-tab-content="' + selected + '"]');
      activePanel.hidden = false;
    }
  }


  tabs.forEach(function(tab) {
        if (activePanel) {
    tab.addEventListener("click", function() {
          activePanel.classList.add("is-active");
      var selected = tab.getAttribute("data-tab");
        }
       openTab(selected);
       });
     });
     });
   });
   });
  openTab("geral");
});
});
</script>
</script>

Edição das 13h37min de 29 de abril de 2026

<style> .gla-conquistas { 

 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;
 margin-bottom: 20px;

}

.gla-conquistas-tab { 

 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;

}

.gla-conquistas-panel { 

 display: none;

}

.gla-conquistas-panel.is-active { 

 display: block;

}

.gla-list { 

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

}

.gla-item { 

 padding: 12px 14px;
 border-radius: 10px;
 border: 1px solid #e5e7eb;
 background: #f8fafc;

}

.gla-item-title { 

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

}

.gla-item-desc { 

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

} </style>

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

 var widgets = document.querySelectorAll(".gla-conquistas");

 widgets.forEach(function(widget) {
   var tabs = widget.querySelectorAll(".gla-conquistas-tab");
   var panels = widget.querySelectorAll(".gla-conquistas-panel");

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

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

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

       tab.classList.add("is-active");

       var activePanel = widget.querySelector('.gla-conquistas-panel[data-tab-content="' + selected + '"]');

       if (activePanel) {
         activePanel.classList.add("is-active");
       }
     });
   });
 });

}); </script>

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