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

De Wiki Gla
Ir para navegação Ir para pesquisar
(Página substituída por '<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Botões de Idioma - Wiki GLA</title> <style> body { font-family: Arial, sans-se...')
Etiqueta: Substituído
Linha 1: Linha 1:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="pt-BR">
<html lang="pt-BR">
<head>
<head>
   <meta charset="UTF-8">
   <meta charset="UTF-8">
   <title>Teste GIF Hover</title>
   <title>Botões de Idioma - Wiki GLA</title>
   <style>
   <style>
     body {
     body {
      margin: 0;
       font-family: Arial, sans-serif;
       font-family: sans-serif;
       padding: 40px;
       color: white;
       background-color: #f9f9f9;
    }
 
    .search-bar {
       text-align: right;
      padding: 20px;
     }
     }


     .search-bar input {
     .language-buttons {
       padding: 8px;
       position: fixed;
       width: 250px;
       top: 20px;
       border-radius: 5px;
       right: 20px;
      border: 1px solid #ccc;
    }
 
    .container {
       display: flex;
       display: flex;
       gap: 10px;
       gap: 10px;
      flex-wrap: wrap;
       background-color: #ffffffcc;
      justify-content: center;
       padding: 6px 10px;
      padding-bottom: 40px;
    }
 
    .personagem {
      width: 250px;
      height: 115px;
      border-radius: 10px;
      background-size: 150%;
       background-position: center -30px;
      transition: transform 0.3s;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      padding: 5px;
      font-weight: bold;
      color: white;
      text-shadow: 1px 1px 4px #000, 0 0 20px #000;
      position: relative;
      cursor: pointer;
      border: 2px solid #58aaff;
      overflow: hidden;
      text-decoration: none;
    }
 
    .personagem span {
      z-index: 2;
    }
 
    .gif-overlay {
      position: absolute;
      inset: 0;
      background-repeat: no-repeat;
      background-size: 150%;
      background-position: center -30px;
      opacity: 0;
      z-index: 1;
      pointer-events: none;
    }
 
    .personagem:hover .gif-overlay {
      opacity: 1;
    }
 
    .personagem.luffy .gif-overlay {
      background-position: center 0px;
    }
 
    .personagem.hancock {
      background-size: 115%;
    }
 
    .personagem.daddy {
      background-size: 100%;
      background-position: top;
    }
 
    .personagem.kizaru {
      background-position: center -20px;
    }
 
    .personagem.luffypre {
      background-position: center;
    }
 
    .personagem.perona {
      background-position: center -80px;
    }
 
    .personagem.sanjipre {
      background-position: center -50px;
    }
 
    .personagem.cabaji {
      background-size: 240%;
      background-position: center -80px;
    }
 
    .personagem.gin {
      background-position: center -120px;
    }
 
    .personagem.jango {
      background-position: left -40px top -20px;
      background-size: 180%;
    }
 
    /* --------- Tiers ----------- */
    .tier-diamante .personagem {
      background-color: #414c5c;
    }
 
    .tier-gold .personagem {
      background-color: #d4af37;
    }
 
    .tier-prata .personagem {
      background-color: #c0c0c0;
    }
 
    .tier-bronze .personagem {
      background-color: #7e4f20;
    }
 
    .filtros {
      flex-wrap: wrap;
      align-items: flex-start;
      padding: 10px 20px;
      display: flex;
      gap: 20px;
      justify-content: space-between;
      margin-bottom: 20px;
    }
 
    .filtros button {
       padding: 8px 14px;
      margin: 0 4px;
      border: none;
      border-radius: 5px;
      background-color: #58aaff;
      color: white;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s;
    }
 
    .filtro-grupo {
      /*display: flex;
      flex-wrap: wrap;
      gap: 6px;*/
      display: grid;
      grid-template-columns: repeat(2, auto);
      gap: 6px 10px;
    }
 
    .filtro-box {
      background: #5a5a5a13;
      padding: 10px;
       border-radius: 8px;
       border-radius: 8px;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
      z-index: 999;
     }
     }


     .filtro-box legend {
     .language-buttons a img {
      font-size: 16px;
       width: 40px;
      font-weight: bold;
      color: #000000cc;
      margin-bottom: 6px;
      text-align: center;
    }
 
    .filtros button:hover {
      background-color: #3388dd;
    }
 
    .filtros button.ativo {
      background-color: #3588f5;
      color: white;
      border-color: #2672d4;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      transform: scale(1.05);
    }
 
    .classe-icon-wrapper {
      position: absolute;
      top: 5px;
      left: 5px;
      display: flex;
      flex-direction: column;
      gap: 1px;
      z-index: 10;
      pointer-events: none;
      transition: transform 0.4s ease;
    }
 
    .classe-icon {
       width: 28px;
       height: 28px;
       height: 28px;
       user-select: none;
       border-radius: 6px;
       pointer-events: none;
       border: 1px solid #ccc;
      opacity: 1;
       transition: transform 0.2s ease;
       transition: opacity 0.3s ease-in-out;
      object-fit: cover;
     }
     }


     .personagem-box {
     .language-buttons a img:hover {
      position: relative;
       transform: scale(1.1);
      transition: transform 0.4s ease;
       cursor: pointer;
      transform-origin: center center;
       border-color: #888;
    }
 
    .personagem-box:hover {
       transform: scale(1.05);
    }
 
    .personagem-box:hover .classe-icon {
      opacity: 0.8;
    }
 
    .classe-filtro-container {
       display: flex;
       align-items: center;
      gap: 12px;
    }
 
    .btn-vertical {
      writing-mode: vertical-rl;
      rotate: 270deg;
    }
 
    .classe-grid {
      display: grid;
      grid-template-columns: repeat(5, auto);
      gap: 6px 10px;
    }
 
    @media screen and (max-aspect-ratio: 3/4) {
      .filtros {
        align-items: center;
        flex-direction: column;
        align-content: center;
        scale: 1.0;
      }
 
      .search-bar{
        justify-self: center;
      }
      .filtro-grupo{
        display: flex;
        gap: 6px 10px;
      }
      .filtros button{
        padding: 10px 18px;
        font-size: 20px;
      }
      .filtro-box legend {
        font-size: 28px;
      }
      .search-bar input {
        padding: 14px;
        width: 300px;
        font-size: 22px;
      }
      .classe-filtro-container {
        display: flex;
        flex-direction: column-reverse;
      }
      .btn-vertical{
        margin-inline: 4px;
      }
     }
     }
   </style>
   </style>
</head>
</head>
<body>
<body>


   <!-- Barra de Pesquisa -->
   <div class="language-buttons">
  <div class="search-bar">
     <a href="#" onclick="goToLang('pt')" title="Português">
    <input type="text" id="search" placeholder="Pesquisar personagem...">
       <img src="https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg" alt="Português">
  </div>
     </a>
 
     <a href="#" onclick="goToLang('en')" title="English">
 
       <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" alt="English">
  <div class="filtros">
     </a>
    <!-- Filtro por Classe -->
     <a href="#" onclick="goToLang('es')" title="Español">
    <fieldset class="filtro-box classe-filtro-container">
       <img src="https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg" alt="Español">
      <legend>Classe</legend>
     </a>
      <button class="btn-vertical tipo-btn ativo" data-tipo="all">ALL</button>
     <a href="#" onclick="goToLang('pl')" title="Polski">
      <div class="classe-grid">
       <img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" alt="Polski">
        <button class="tipo-btn" data-tipo="lutador">Lutador</button>
     </a>
        <button class="tipo-btn" data-tipo="atirador">Atirador</button>
        <button class="tipo-btn" data-tipo="cortante">Cortante</button>
        <button class="tipo-btn" data-tipo="especialista">Especialista</button>
        <button class="tipo-btn" data-tipo="tanque">Tanque</button>
        <button class="tipo-btn" data-tipo="dps">DPS</button>
        <button class="tipo-btn" data-tipo="suporte">Suporte</button>
        <button class="tipo-btn" data-tipo="bruiser">Bruiser</button>
        <button class="tipo-btn" data-tipo="parede">Parede</button>
        <button class="tipo-btn" data-tipo="ponte">Ponte</button>
      </div>
    </fieldset>
 
    <!-- Filtro por Tier -->
    <fieldset class="filtro-box">
      <legend>Tier</legend>
      <div class="filtro-grupo">
        <button class="tier-btn" data-tier="tier-diamante">💎 Diamante</button>
        <button class="tier-btn" data-tier="tier-gold">⭐ Ouro</button>
        <button class="tier-btn" data-tier="tier-prata">🥈 Prata</button>
        <button class="tier-btn" data-tier="tier-bronze">🥉 Bronze</button>
      </div>
    </fieldset>
  </div>
 
  <!-- Personagens -->
  <div class="container">
 
    <!-- aokiji -->
    <div class="personagem-box tier-diamante cortante especialista tanque fruta ponte parede">
      <div class="personagem" data-static="https://i.postimg.cc/0NMJrvjJ/fundoaokiji.png" data-gif="https://i.postimg.cc/nzKrQhJM/aokijiemotecard2.gif">
        <span>Aokiji</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- kuma -->
    <div class="personagem-box tier-diamante especialista tanque fruta parede">
      <div class="personagem" data-static="https://i.postimg.cc/8chnZGsF/kuma2.png" data-gif="">
        <span>Bartholomew Kuma</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- hancock -->
    <div class="personagem-box tier-diamante dps lutador fruta">
      <div class="personagem hancock" data-static="https://i.postimg.cc/2j25Px4K/boahan.png" data-gif="">
        <span>Boa Hancock</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- kizaru -->
    <div class="personagem-box tier-diamante dps especialista atirador fruta parede">
      <div class="personagem kizaru" data-static="https://i.postimg.cc/PqjhLLWD/kizaru.webp" data-gif="">
        <span>Borsalino Kizaru</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- brook -->
     <div class="personagem-box tier-diamante suporte cortante fruta ponte">
      <div class="personagem" data-static="https://i.postimg.cc/rmsHzcPW/brookts.png" data-gif="">
        <span>Brook (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- chopper -->
    <div class="personagem-box tier-diamante suporte lutador fruta parede">
       <div class="personagem hancock" data-static="https://i.postimg.cc/QM26N5cL/chopperts.png" data-gif="">
        <span>Chopper (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- doflamingo -->
    <div class="personagem-box tier-diamante dps especialista atirador fruta ponte parede">
      <div class="personagem hancock" data-static="https://i.postimg.cc/3JfFJmHL/doflamingo.png" data-gif="">
        <span>Donquixote Doflamingo</span>
        <div class="gif-overlay"></div>
      </div>
     </div>
 
     <!-- mihawk -->
    <div class="personagem-box tier-diamante dps cortante parede">
      <div class="personagem" data-static="https://i.postimg.cc/6QWWj28X/Dracule-Mihawk.webp" data-gif="">
        <span>Dracule Mihawk</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- ivankov -->
    <div class="personagem-box tier-diamante suporte lutador fruta parede">
      <div class="personagem" data-static="https://i.postimg.cc/C1pWP9Pf/Ivan-chan.webp" data-gif="">
        <span>Emporio Ivankov</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- enel -->
    <div class="personagem-box tier-diamante fruta especialista atirador dps">
      <div class="personagem perona" data-static="https://i.postimg.cc/DzLNXBvf/enel2.png" data-gif="">
        <span>Enel</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- franky ts -->
    <div class="personagem-box tier-diamante tanque atirador parede">
      <div class="personagem" data-static="https://i.postimg.cc/mgDHryfP/frankyts.png" data-gif="">
        <span>Franky (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- jinbe -->
    <div class="personagem-box tier-diamante tanque lutador parede">
       <div class="personagem" data-static="https://i.postimg.cc/s2mqJzH6/jinbe.png" data-gif="">
        <span>Jinbe</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- teach -->
    <div class="personagem-box tier-diamante especialista bruiser fruta">
      <div class="personagem" data-static="https://i.postimg.cc/vm5fRHwh/barba-Negra.png" data-gif="">
        <span>Marshall D. Teach</span>
        <div class="gif-overlay"></div>
      </div>
     </div>
 
     <!-- marco -->
    <div class="personagem-box tier-diamante fruta especialista lutador suporte">
      <div class="personagem" data-static="https://i.postimg.cc/d11ChRTH/marco.png" data-gif="">
        <span>Marco</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- luffy -->
    <div class="personagem-box tier-diamante dps lutador fruta parede">
      <div class="personagem luffy" data-static="https://i.postimg.cc/L8hJ0Sz0/luffycard.png" data-gif="https://i.postimg.cc/G2n92s6Z/luffytsemotecard.gif">
        <span>Monkey D. Luffy (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- nami ts -->
    <div class="personagem-box tier-diamante dps especialista">
       <div class="personagem" data-static="https://i.postimg.cc/CLnPG8Bz/namits2.png" data-gif="">
        <span>Nami (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- ace -->
    <div class="personagem-box tier-diamante dps atirador especialista fruta">
      <div class="personagem" data-static="https://i.postimg.cc/52md08JF/ace.png" data-gif="">
        <span>Portgas D. Ace</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- robin ts -->
    <div class="personagem-box tier-diamante dps especialista fruta ponte parede">
      <div class="personagem" data-static="https://i.postimg.cc/9QL8KbV1/robints.png" data-gif="">
        <span>Nico Robin (TS)</span>
        <div class="gif-overlay"></div>
      </div>
     </div>
 
 
     <!-- zoro ts -->
    <div class="personagem-box tier-diamante dps cortante parede">
      <div class="personagem" data-static="https://i.postimg.cc/N01yLJMk/zorots.png" data-gif="">
        <span>Roronoa Zoro (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- sabo -->
    <div class="personagem-box tier-diamante dps especialista lutador fruta parede">
       <div class="personagem hancock" data-static="https://i.postimg.cc/1tTQpXZP/sabo2.png" data-gif="">
        <span>Sabo</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
 
    <!-- akainu -->
    <div class="personagem-box tier-diamante fruta especialista lutador dps parede">
      <div class="personagem" data-static="https://i.postimg.cc/j2TBtj1h/akainu.png" data-gif="">
        <span>Sakazuki (Akainu)</span>
        <div class="gif-overlay"></div>
      </div>
     </div>
 
    <!-- shanks -->
    <div class="personagem-box tier-diamante cortante bruiser parede">
      <div class="personagem" data-static="https://i.postimg.cc/HnTvFhJZ/shanks.png" data-gif="">
        <span>Shanks</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- usopp ts -->
    <div class="personagem-box tier-diamante dps atirador parede">
      <div class="personagem" data-static="https://i.postimg.cc/tCVbsY9z/usoppts2.png" data-gif="">
        <span>Usopp (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- uta -->
    <div class="personagem-box tier-diamante dps especialista fruta parede">
      <div class="personagem hancock" data-static="https://i.postimg.cc/2y5FQRLD/uta.png" data-gif="">
        <span>Uta</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- sanji ts -->
    <div class="personagem-box tier-diamante dps lutador parede">
      <div class="personagem" data-static="https://i.postimg.cc/Vv5nSq2s/sanjits.png" data-gif="">
        <span>Sanji (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- baby 5 -->
    <div class="personagem-box tier-gold fruta atirador cortante dps">
      <div class="personagem" data-static="https://i.postimg.cc/DZf9sHxQ/bb5.webp" data-gif="">
        <span>Baby 5</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- Bartolomeo -->
    <div class="personagem-box tier-gold dps especialista fruta ponte parede">
      <div class="personagem" data-static="https://i.postimg.cc/ryrmqPvK/barto.png" data-gif="">
        <span>Bartolomeo</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- Basil Hawkins -->
    <div class="personagem-box tier-gold bruiser especialista fruta ponte">
      <div class="personagem" data-static="https://i.postimg.cc/V6FKtRhM/basil.png" data-gif="">
        <span>Basil Hawkins</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- Bastille -->
    <div class="personagem-box tier-gold tanque cortante parede">
      <div class="personagem" data-static="https://i.postimg.cc/C1J45KZs/bastille.png" data-gif="">
        <span>Bastille</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- Bellamy -->
    <div class="personagem-box tier-gold dps lutador fruta parede">
      <div class="personagem hancock" data-static="https://i.postimg.cc/8ckxzHGK/bella.png" data-gif="">
        <span>Bellamy</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- Bonney -->
    <div class="personagem-box tier-gold suporte lutador fruta">
      <div class="personagem hancock" data-static="https://i.postimg.cc/mD8LyqnN/bonney4.png" data-gif="">
        <span>Jewelry Bonney</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- Brook pré -->
    <div class="personagem-box tier-gold suporte cortante fruta">
      <div class="personagem" data-static="https://i.postimg.cc/Sx7D24vR/brookpre.png" data-gif="">
        <span>Brook</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- bege -->
    <div class="personagem-box tier-gold dps atirador fruta parede">
      <div class="personagem" data-static="https://i.postimg.cc/TwvptHqy/bege.webp" data-gif="">
        <span>Capone Gang Bege</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- carrot -->
    <div class="personagem-box tier-gold dps especialista cortante">
      <div class="personagem" data-static="https://i.postimg.cc/MpPfrrct/carrot.png" data-gif="">
        <span>Carrot</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- chopper pré -->
    <div class="personagem-box tier-gold suporte lutador fruta parede">
      <div class="personagem" data-static="https://i.postimg.cc/7YqCPy0m/tonytony.png" data-gif="">
        <span>Chopper</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- crocodile -->
    <div class="personagem-box tier-gold tanque especialista fruta ponte parede">
      <div class="personagem hancock" data-static="https://i.postimg.cc/hGm4bCVX/croco.png" data-gif="">
        <span>Sir Crocodile</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- dalmatian -->
    <div class="personagem-box tier-gold bruiser cortante fruta parede">
      <div class="personagem hancock" data-static="https://i.postimg.cc/Gpnnrbsp/dalma.png" data-gif="">
        <span>Dalmatian</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- franky pré -->
    <div class="personagem-box tier-gold bruiser atirador parede">
      <div class="personagem hancock" data-static="https://i.postimg.cc/RCJr33Q0/frankypre.png" data-gif="">
        <span>Franky</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- moria -->
    <div class="personagem-box tier-gold fruta cortante suporte">
      <div class="personagem" data-static="https://i.postimg.cc/tg4w974p/moria.png" data-gif="">
        <span>Gecko Moria</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- hina -->
    <div class="personagem-box tier-gold bruiser lutador fruta ponte parede">
      <div class="personagem" data-static="https://i.postimg.cc/90hBFNYZ/hina.png" data-gif="">
        <span>Hina</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- burgess -->
    <div class="personagem-box tier-gold tanque lutador parede">
      <div class="personagem hancock" data-static="https://i.postimg.cc/hv27WCyS/burgess.png" data-gif="">
        <span>Jesus Burgess</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- kid -->
    <div class="personagem-box tier-gold atirador tanque fruta ponte parede">
      <div class="personagem" data-static="https://i.postimg.cc/wMq0QGRH/kid.png" data-gif="">
        <span>Eustass Kid</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- killer -->
    <div class="personagem-box tier-gold dps cortante">
      <div class="personagem" data-static="https://i.postimg.cc/44W5Twh7/killer.png" data-gif="">
        <span>Killer</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- koala -->
    <div class="personagem-box tier-gold dps lutador">
      <div class="personagem" data-static="https://i.postimg.cc/FsqwhhJL/koala.png" data-gif="">
        <span>Koala</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- leo e mansherry -->
    <div class="personagem-box tier-gold suporte especialista fruta ponte">
      <div class="personagem hancock" data-static="https://i.postimg.cc/2yyXftkG/leo-masherry.png" data-gif="">
        <span>Leo & Mansherry</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- luffy pré -->
    <div class="personagem-box tier-gold bruiser lutador fruta parede">
      <div class="personagem luffypre" data-static="https://i.postimg.cc/PrZ0fBbV/luffypre.png" data-gif="">
        <span>Monkey D. Luffy</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- nami pré -->
    <div class="personagem-box tier-gold dps especialista parede">
      <div class="personagem" data-static="https://i.postimg.cc/Jn7YZdZL/nami3.png" data-gif="">
        <span>Nami</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- perona -->
    <div class="personagem-box tier-gold suporte especialista fruta parede">
      <div class="personagem" data-static="https://i.postimg.cc/BQfYC6xp/perona3.png" data-gif="">
        <span>Perona</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- rebecca -->
    <div class="personagem-box tier-gold tanque cortante">
      <div class="personagem hancock" data-static="https://i.postimg.cc/9XKgwCct/rebecca.png" data-gif="">
        <span>Rebecca</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- robin pré -->
    <div class="personagem-box tier-gold dps especialista fruta ponte parede">
      <div class="personagem" data-static="https://i.postimg.cc/W13DRLJC/robinpre.png" data-gif="">
        <span>Robin</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- zoro pré -->
    <div class="personagem-box tier-gold bruiser cortante parede">
      <div class="personagem" data-static="https://i.postimg.cc/B6q9ysj1/zoropre.png" data-gif="">
        <span>Zoro</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- ryuma -->
    <div class="personagem-box tier-gold dps cortante">
      <div class="personagem" data-static="https://i.postimg.cc/vmhS4nmc/ryuma.png" data-gif="">
        <span>Ryuma</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- apoo -->
    <div class="personagem-box tier-gold suporte atirador fruta">
      <div class="personagem hancock" data-static="https://i.postimg.cc/fWVDhzHx/apoo.png" data-gif="">
        <span>Scratchmen Apoo</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- smoker -->
    <div class="personagem-box tier-gold tanque lutador fruta">
      <div class="personagem kizaru" data-static="https://i.postimg.cc/P53ShjVw/smoker.png" data-gif="">
        <span>Smoker</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- law -->
    <div class="personagem-box tier-gold dps cortante especialista fruta parede">
      <div class="personagem" data-static="https://i.postimg.cc/FRtgssy7/law.png" data-gif="">
        <span>Trafalgar D. Water Law</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- urouge -->
    <div class="personagem-box tier-gold tanque lutador fruta parede">
      <div class="personagem" data-static="https://i.postimg.cc/1zDVB0F3/urouge.png" data-gif="">
        <span>Urouge</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- usopp pré -->
    <div class="personagem-box tier-gold dps atirador parede">
      <div class="personagem" data-static="https://i.postimg.cc/qRSRdzy5/usopppre.png" data-gif="">
        <span>Usopp</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- van augur -->
    <div class="personagem-box tier-gold dps atirador parede">
      <div class="personagem hancock" data-static="https://i.postimg.cc/ZKTk5JH7/van.png" data-gif="">
        <span>Van Augur</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- ichiji -->
    <div class="personagem-box tier-gold bruiser lutador parede">
      <div class="personagem" data-static="https://i.postimg.cc/x1wtqRYf/ichiji.png" data-gif="">
        <span>Vinsmoke Ichiji</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- niji -->
    <div class="personagem-box tier-gold dps atirador">
      <div class="personagem" data-static="https://i.postimg.cc/RhYwySZS/niji.png" data-gif="">
        <span>Vinsmoke Niji</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- reiju -->
    <div class="personagem-box tier-gold suporte especialista">
      <div class="personagem" data-static="https://i.postimg.cc/5NHBvCs6/reiju.png" data-gif="">
        <span>Vinsmoke Reiju</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- sanji pré -->
    <div class="personagem-box tier-gold dps lutador parede">
      <div class="personagem sanjipre" data-static="https://i.postimg.cc/CKKkhnnh/sanjipre.png" data-gif="">
        <span>Vinsmoke Sanji</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- yonji -->
    <div class="personagem-box tier-gold tanque lutador parede">
      <div class="personagem" data-static="https://i.postimg.cc/KvFKc3C6/yonji.png" data-gif="">
        <span>Vinsmoke Yonji</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- drake -->
    <div class="personagem-box tier-gold bruiser lutador fruta parede">
      <div class="personagem" data-static="https://i.postimg.cc/tRDbP1sQ/drake.png" data-gif="">
        <span>X Drake</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- satori -->
    <div class="personagem-box tier-prata especialista atirador suporte">
      <div class="personagem" data-static="https://i.postimg.cc/mkYZvRRx/satori.png" data-gif="">
        <span>Satori</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- gedatsu -->
    <div class="personagem-box tier-prata lutador dps">
      <div class="personagem hancock" data-static="https://i.postimg.cc/pTv60t05/gedatsu.png" data-gif="">
        <span>Gedatsu</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- ohm -->
    <div class="personagem-box tier-prata cortante tanque">
      <div class="personagem hancock" data-static="https://i.postimg.cc/65q1bchc/ohm.png" data-gif="">
        <span>Ohm</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- shura -->
    <div class="personagem-box tier-prata cortante dps">
      <div class="personagem" data-static="https://i.postimg.cc/j25v9qy2/shura.png" data-gif="">
        <span>Shura</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- arlong -->
    <div class="personagem-box tier-prata bruiser lutador parede">
      <div class="personagem" data-static="https://i.postimg.cc/j2LQcgrJ/arlong.png" data-gif="">
        <span>Arlong</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- bepo -->
    <div class="personagem-box tier-prata dps lutador">
      <div class="personagem" data-static="https://i.postimg.cc/MKfmjFDC/bepo.png" data-gif="">
        <span>Bepo</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- bon clay -->
    <div class="personagem-box tier-prata dps lutador fruta">
      <div class="personagem" data-static="https://i.postimg.cc/bJ3jBpZF/BonClay.webp" data-gif="">
        <span>Bon Clay</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- buggy -->
    <div class="personagem-box tier-prata dps atirador fruta parede">
      <div class="personagem" data-static="https://i.postimg.cc/Vvmdg40W/buggy.png" data-gif="">
        <span>Buggy</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- daddy -->
    <div class="personagem-box tier-prata dps atirador">
      <div class="personagem daddy" data-static="https://i.postimg.cc/X7mfYHVX/daddy3.png" data-gif="">
        <span>Daddy Masterson</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- daz -->
    <div class="personagem-box tier-prata tanque cortante fruta">
      <div class="personagem" data-static="https://i.postimg.cc/wjjymWDX/daz.png" data-gif="">
        <span>Daz Bonez</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- zala -->
    <div class="personagem-box tier-prata bruiser cortante fruta">
      <div class="personagem" data-static="https://i.postimg.cc/PqZtpZVb/zala.png" data-gif="">
        <span>Zala</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- krieg -->
    <div class="personagem-box tier-prata dps atirador">
      <div class="personagem" data-static="https://i.postimg.cc/8Cg2YYwW/krieg.png" data-gif="">
        <span>Don Krieg</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- kuro -->
    <div class="personagem-box tier-prata dps cortante">
      <div class="personagem" data-static="https://i.postimg.cc/W47HH1dL/kuro.png" data-gif="">
        <span>Kuro</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- galdino -->
    <div class="personagem-box tier-prata suporte especialista fruta ponte">
      <div class="personagem" data-static="https://i.postimg.cc/VkZRr00N/galdino.png" data-gif="">
        <span>Galdino</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- tashigi -->
    <div class="personagem-box tier-prata dps cortante">
      <div class="personagem kizaru" data-static="https://i.postimg.cc/rwH1F670/tashigi.png" data-gif="">
        <span>Tashigi</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- nefertari vivi -->
    <div class="personagem-box tier-prata suporte cortante">
      <div class="personagem" data-static="https://i.postimg.cc/jdFwyHcB/vivi.png" data-gif="">
        <span>Nefertari Vivi</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- wapol -->
    <div class="personagem-box tier-prata tanque atirador fruta parede">
      <div class="personagem" data-static="https://i.postimg.cc/26k8syT4/wapol.png" data-gif="">
        <span>Wapol</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- alvida -->
    <div class="personagem-box tier-bronze suporte lutador fruta">
      <div class="personagem" data-static="https://i.postimg.cc/yxGC7jXm/Alvida-Slime.webp" data-gif="">
        <span>Alvida</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- buchi -->
    <div class="personagem-box tier-bronze bruiser cortante">
      <div class="personagem" data-static="https://i.postimg.cc/VLLZJ8ZD/Splashartbuchi.png" data-gif="">
        <span>Buchi & Sham</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- cabaji -->
    <div class="personagem-box tier-bronze dps cortante">
      <div class="personagem cabaji" data-static="https://i.postimg.cc/G3MJSszx/cabaji.png" data-gif="">
        <span>Cabaji</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- chew -->
    <div class="personagem-box tier-bronze dps atirador parede">
      <div class="personagem sanjipre" data-static="https://i.postimg.cc/NG1LKh29/chew.png" data-gif="">
        <span>Chew</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- eric -->
    <div class="personagem-box tier-bronze fruta dps atirador cortante">
      <div class="personagem hancock" data-static="https://i.postimg.cc/rmGcwkZq/eric.png" data-gif="">
        <span>Eric</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- gin -->
    <div class="personagem-box tier-bronze dps atirador lutador">
      <div class="personagem gin" data-static="https://i.postimg.cc/pLB6rdRG/gin.png" data-gif="">
        <span>Gin</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- goldenweek -->
    <div class="personagem-box tier-bronze suporte especialista">
      <div class="personagem sanjipre" data-static="https://i.postimg.cc/8CMsMxX0/goldenweek.png" data-gif="">
        <span>Miss GoldenWeek</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- hatchan -->
    <div class="personagem-box tier-bronze suporte cortante">
      <div class="personagem gin" data-static="https://i.postimg.cc/fy2bMskJ/hatchan.png" data-gif="">
        <span>Hatchan</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- jango -->
    <div class="personagem-box tier-bronze atirador suporte">
      <div class="personagem jango" data-static="https://i.postimg.cc/t40jW709/jango2.png" data-gif="">
        <span>Jango</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- kuroobi -->
    <div class="personagem-box tier-bronze tanque lutador parede">
      <div class="personagem sanjipre" data-static="https://i.postimg.cc/bvkHrCxz/kuroobi.png" data-gif="">
        <span>Kuroobi</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- mohji -->
    <div class="personagem-box tier-bronze bruiser especialista">
      <div class="personagem sanjipre" data-static="https://i.postimg.cc/MTRWhRJ3/mohji.png" data-gif="">
        <span>Mohji</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- morgan -->
    <div class="personagem-box tier-bronze bruiser cortante">
      <div class="personagem cabaji" data-static="https://i.postimg.cc/RVwPpLpJ/morgan.png" data-gif="">
        <span>Morgan</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- babe & drophy -->
    <div class="personagem-box tier-bronze bruiser atirador">
      <div class="personagem hancock" data-static="https://i.postimg.cc/vmTtyrhz/babe.png" data-gif="">
        <span>Babe & Drophy</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- gem & mikita -->
    <div class="personagem-box tier-bronze dps atirador fruta">
      <div class="personagem hancock" data-static="https://i.postimg.cc/FsxyJWnp/gem.png" data-gif="">
        <span>Gem & Mikita</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- pearl -->
    <div class="personagem-box tier-bronze tanque lutador especialista">
      <div class="personagem" data-static="https://i.postimg.cc/Y0HFvY6T/pearl.png" data-gif="">
        <span>Pearl</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
   </div>
   </div>


  <!-- Scripts -->
   <script>
   <script>
     const cards = document.querySelectorAll('.personagem');
     const pageMap = {
 
       'Chefões': {
    // Define as imagens estáticas e gifs, além do reset ao sair
        en: 'Bosses',
    cards.forEach(card => {
        es: 'Jefes',
       const staticImg = card.getAttribute('data-static');
        pl: 'Bossowie',
      const gifImg = card.getAttribute('data-gif');
         pt: 'Chefões'
      const overlay = card.querySelector('.gif-overlay');
       },
      card.style.backgroundImage = `url('${staticImg}')`;
       'Bosses': {
 
         pt: 'Chefões',
      card.addEventListener('mouseenter', () => {
        es: 'Jefes',
         const uniqueGifUrl = `${gifImg}?t=${new Date().getTime()}`; // Força reset
         pl: 'Bossowie',
        overlay.style.backgroundImage = `url('${uniqueGifUrl}')`;
         en: 'Bosses'
       });
       },
 
       'Jefes': {
       card.addEventListener('mouseleave', () => {
        pt: 'Chefões',
         overlay.style.backgroundImage = '';
        en: 'Bosses',
      });
        pl: 'Bossowie',
    });
        es: 'Jefes'
 
       },
    // Filtragem por nome no campo de busca
       'Bossowie': {
    document.getElementById('search').addEventListener('input', function () {
        pt: 'Chefões',
      const term = this.value.toLowerCase();
        en: 'Bosses',
      cards.forEach(card => {
        es: 'Jefes',
         const name = card.querySelector('span').textContent.toLowerCase();
        pl: 'Bossowie'
         const wrapper = card.parentElement;
       },
        const tierBox = wrapper.parentElement;
       'Página_em_Português': {
        tierBox.style.display = name.includes(term) ? 'block' : 'none';
        en: 'Page_in_English',
       });
        es: 'Pagina_en_Espanol',
    });
        pl: 'Strona_po_Polsku',
 
         pt: 'Página_em_Português'
 
    //  Links dos personagens
    const personagemLinks = {
      "Aokiji": "https://wiki.gla.com.br/index.php/Aokiji",
       "Bartholomew Kuma": "https://wiki.gla.com.br/index.php/Kuma",
      "Boa Hancock": "https://wiki.gla.com.br/index.php/Boa_Hancock",
      "Borsalino Kizaru": "https://wiki.gla.com.br/index.php/Kizaru",
      "Brook (TS)": "https://wiki.gla.com.br/index.php/Brook_(Timeskip)",
      "Chopper (TS)": "https://wiki.gla.com.br/index.php/Chopper_(Timeskip)",
       "Donquixote Doflamingo": "https://wiki.gla.com.br/index.php/Doflamingo",
       "Dracule Mihawk": "https://wiki.gla.com.br/index.php/Mihawk",
      "Emporio Ivankov": "https://wiki.gla.com.br/index.php/Ivankov",
      "Enel": "https://wiki.gla.com.br/index.php/Enel",
      "Franky (TS)": "https://wiki.gla.com.br/index.php/Franky_(Timeskip)",
      "Jinbe": "https://wiki.gla.com.br/index.php/Jinbe",
       "Marshall D. Teach": "https://wiki.gla.com.br/index.php/Marshall_D._Teach",
       "Marco": "https://wiki.gla.com.br/index.php/Marco",
      "Monkey D. Luffy (TS)": "https://wiki.gla.com.br/index.php/Luffy_(Timeskip)",
      "Nami (TS)": "https://wiki.gla.com.br/index.php/Nami_(Timeskip)",
      "Portgas D. Ace": "https://wiki.gla.com.br/index.php/Ace",
      "Nico Robin (TS)": "https://wiki.gla.com.br/index.php/Robin_(Timeskip)",
      "Roronoa Zoro (TS)": "https://wiki.gla.com.br/index.php/Zoro_(Timeskip)",
      "Sabo": "https://wiki.gla.com.br/index.php/Sabo",
      "Sakazuki (Akainu)": "https://wiki.gla.com.br/index.php/Akainu",
      "Shanks": "https://wiki.gla.com.br/index.php/Shanks",
      "Usopp (TS)": "https://wiki.gla.com.br/index.php/Usopp_(Timeskip)",
      "Uta": "https://wiki.gla.com.br/index.php/Uta",
      "Sanji (TS)": "https://wiki.gla.com.br/index.php/Sanji_(Timeskip)",
      "Baby 5": "https://wiki.gla.com.br/index.php/Baby_5",
      "Bartolomeo": "https://wiki.gla.com.br/index.php/Bartolomeo",
      "Basil Hawkins": "https://wiki.gla.com.br/index.php/Basil_Hawkins",
      "Bastille": "https://wiki.gla.com.br/index.php/Bastille",
      "Bellamy": "https://wiki.gla.com.br/index.php/Bellamy",
      "Jewelry Bonney": "https://wiki.gla.com.br/index.php/Bonney",
      "Brook": "https://wiki.gla.com.br/index.php/Brook",
      "Capone Gang Bege": "https://wiki.gla.com.br/index.php/Capone_Bege",
      "Carrot": "https://wiki.gla.com.br/index.php/Carrot",
      "Chopper": "https://wiki.gla.com.br/index.php/Chopper",
      "Sir Crocodile": "https://wiki.gla.com.br/index.php/Crocodile",
      "Dalmatian": "https://wiki.gla.com.br/index.php/Dalmatian",
      "Franky": "https://wiki.gla.com.br/index.php/Franky",
      "Gecko Moria": "https://wiki.gla.com.br/index.php/Gecko_Moria",
      "Hina": "https://wiki.gla.com.br/index.php/Hina",
      "Jesus Burgess": "https://wiki.gla.com.br/index.php/Jesus_Burgess",
      "Eustass Kid": "https://wiki.gla.com.br/index.php/Kid",
      "Killer": "https://wiki.gla.com.br/index.php/Killer",
      "Koala": "https://wiki.gla.com.br/index.php/Koala",
      "Leo & Mansherry": "https://wiki.gla.com.br/index.php/Leo",
      "Monkey D. Luffy": "https://wiki.gla.com.br/index.php/Luffy",
      "Nami": "https://wiki.gla.com.br/index.php/Nami",
      "Perona": "https://wiki.gla.com.br/index.php/Perona",
      "Rebecca": "https://wiki.gla.com.br/index.php/Rebecca",
      "Robin": "https://wiki.gla.com.br/index.php/Robin",
      "Zoro": "https://wiki.gla.com.br/index.php/Zoro",
      "Ryuma": "https://wiki.gla.com.br/index.php/Ryuma",
      "Scratchmen Apoo": "https://wiki.gla.com.br/index.php/Apoo",
      "Smoker": "https://wiki.gla.com.br/index.php/Smoker",
      "Trafalgar D. Water Law": "https://wiki.gla.com.br/index.php/Law",
      "Urouge": "https://wiki.gla.com.br/index.php/Urouge",
      "Usopp": "https://wiki.gla.com.br/index.php/Usopp",
      "Van Augur": "https://wiki.gla.com.br/index.php/Van_Augur",
      "Vinsmoke Ichiji": "https://wiki.gla.com.br/index.php/Ichiji",
      "Vinsmoke Niji": "https://wiki.gla.com.br/index.php/Niji",
      "Vinsmoke Reiju": "https://wiki.gla.com.br/index.php/Reiju",
      "Vinsmoke Sanji": "https://wiki.gla.com.br/index.php/Sanji",
      "Vinsmoke Yonji": "https://wiki.gla.com.br/index.php/Yonji",
      "X Drake": "https://wiki.gla.com.br/index.php/X_Drake",
      "Satori": "https://wiki.gla.com.br/index.php/Satori",
      "Gedatsu": "https://wiki.gla.com.br/index.php/Gedatsu",
      "Ohm": "https://wiki.gla.com.br/index.php/Ohm",
      "Shura": "https://wiki.gla.com.br/index.php/Shura",
      "Arlong": "https://wiki.gla.com.br/index.php/Arlong",
      "Bepo": "https://wiki.gla.com.br/index.php/Bepo",
      "Bon Clay": "https://wiki.gla.com.br/index.php/Mr.2",
      "Buggy": "https://wiki.gla.com.br/index.php/Buggy",
      "Daddy Masterson": "https://wiki.gla.com.br/index.php/Daddy_Masterson",
      "Daz Bonez": "https://wiki.gla.com.br/index.php/Mr.1",
      "Zala": "https://wiki.gla.com.br/index.php/Miss_Doublefinger",
      "Don Krieg": "https://wiki.gla.com.br/index.php/Don_Krieg",
      "Kuro": "https://wiki.gla.com.br/index.php/Kuro",
      "Galdino": "https://wiki.gla.com.br/index.php/Mr.3",
      "Tashigi": "https://wiki.gla.com.br/index.php/Tashigi",
      "Nefertari Vivi": "https://wiki.gla.com.br/index.php/Vivi",
      "Wapol": "https://wiki.gla.com.br/index.php/Wapol",
      "Alvida": "https://wiki.gla.com.br/index.php/Alvida",
      "Buchi & Sham": "https://wiki.gla.com.br/index.php/Buchi",
      "Cabaji": "https://wiki.gla.com.br/index.php/Cabaji",
      "Chew": "https://wiki.gla.com.br/index.php/Chew",
      "Eric": "https://wiki.gla.com.br/index.php/Eric",
      "Gin": "https://wiki.gla.com.br/index.php/Gin",
      "Miss GoldenWeek": "https://wiki.gla.com.br/index.php/Goldenweek",
      "Hatchan": "https://wiki.gla.com.br/index.php/Hatchan",
      "Jango": "https://wiki.gla.com.br/index.php/Jango",
      "Kuroobi": "https://wiki.gla.com.br/index.php/Kuroobi",
      "Mohji": "https://wiki.gla.com.br/index.php/Mohji",
      "Morgan": "https://wiki.gla.com.br/index.php/Morgan",
      "Babe & Drophy": "https://wiki.gla.com.br/index.php/Mr.4",
      "Gem & Mikita": "https://wiki.gla.com.br/index.php/Mr.5",
      "Pearl": "https://wiki.gla.com.br/index.php/Pearl"
    };
 
    // Envolve as boxes com <a> e aplica links clicáveis
    cards.forEach(card => {
      const span = card.querySelector('span');
      const nomePersonagem = span?.textContent.trim();
      const link = personagemLinks[nomePersonagem];
      if (link) {
         const wrapper = document.createElement('a');
        wrapper.href = link;
        wrapper.target = "_blank";
        wrapper.style.display = "flex";
        wrapper.style.textDecoration = "none";
        wrapper.style.flex = "0 1 auto";
        wrapper.style.alignItems = "stretch";
        card.parentElement.replaceChild(wrapper, card);
        wrapper.appendChild(card);
       }
       }
    });
    const tierButtons = document.querySelectorAll('.tier-btn');
    const tipoButtons = document.querySelectorAll('.tipo-btn');
    const personagemBoxes = document.querySelectorAll('.personagem-box');
    let activeTier = 'all';
    let activeTipos = new Set();
    const iconesClasse = {
      lutador: 'https://wiki.gla.com.br/images/e/e6/Fighter.png',
      especialista: 'https://wiki.gla.com.br/images/f/f6/Especialist.png',
      tanque: 'https://wiki.gla.com.br/images/9/9d/Tank.png',
      suporte: 'https://wiki.gla.com.br/images/a/ab/Support.png',
      bruiser: 'https://wiki.gla.com.br/images/e/e4/Bruiser.png',
      atirador: 'https://wiki.gla.com.br/images/e/ed/Shooter.png',
      dps: 'https://wiki.gla.com.br/images/6/60/Dps.png',
      cortante: 'https://wiki.gla.com.br/images/9/9a/Slasher.png',
      fruta: 'https://wiki.gla.com.br/images/e/e4/Devil-fruit.png',
     };
     };


    function goToLang(lang) {
      const path = window.location.pathname;
      const currentPage = decodeURIComponent(path.split('/').pop());


function updateFiltros() {
      const mapping = pageMap[currentPage];
  personagemBoxes.forEach(box => {
      if (mapping && mapping[lang]) {
    const matchesTier = activeTier === 'all' || box.classList.contains(activeTier);
        const newPage = mapping[lang];
    const matchesTipo =
        const newPath = path.replace(currentPage, encodeURIComponent(newPage));
      activeTipos.size === 0 ||
        window.location.pathname = newPath;
      [...activeTipos].every(tipo => box.classList.contains(tipo));
 
    box.style.display = (matchesTier && matchesTipo) ? 'block' : 'none';
  });
}
 
tierButtons.forEach(button => {
  button.addEventListener('click', () => {
    const selectedTier = button.dataset.tier;
    if (selectedTier === activeTier || selectedTier === 'all') {
      activeTier = 'all';
      tierButtons.forEach(btn => btn.classList.remove('ativo'));
    } else {
      activeTier = selectedTier;
      tierButtons.forEach(btn => btn.classList.remove('ativo'));
      button.classList.add('ativo');
    }
    updateFiltros();
  });
});
 
tipoButtons.forEach(button => {
  button.addEventListener('click', () => {
    const selectedTipo = button.dataset.tipo;
    console.log(selectedTipo)
    if (selectedTipo === 'all') {
      activeTipos.clear();
      tipoButtons.forEach(btn => {if (btn.dataset.tipo === 'all') {btn.classList.add('ativo');} else {btn.classList.remove('ativo');}});
    } else {
      if (activeTipos.has(selectedTipo)) {
        activeTipos.delete(selectedTipo);
        button.classList.remove('ativo');
       } else {
       } else {
         activeTipos.add(selectedTipo);
         alert('Tradução não disponível para esta página.');
        button.classList.add('ativo');
      }
      tipoButtons.forEach(btn => {
        if (btn.dataset.tipo === 'all') btn.classList.remove('ativo');
      });
      if (activeTipos.size === 0) {
        tipoButtons.forEach(btn => {if (btn.dataset.tipo === 'all') {btn.classList.add('ativo');}});
       }
       }
     }
     }
    updateFiltros();
  });
});
    document.querySelectorAll('.personagem-box').forEach(box => {
      const classes = box.className.split(/\s+/);
      const icones = classes
        .filter(classe => iconesClasse.hasOwnProperty(classe))
        .map(classe => {
          const img = document.createElement('img');
          img.src = iconesClasse[classe];
          img.alt = classe;
          img.className = 'classe-icon';
          return img;
        });
      if (icones.length > 0) {
        const wrapper = document.createElement('div');
        wrapper.className = 'classe-icon-wrapper';
        icones.forEach(icon => wrapper.appendChild(icon));
        box.appendChild(wrapper);
      }
    });
   </script>
   </script>


</body>
</body>
</html>
</html>

Edição das 23h24min de 27 de junho de 2025

<!DOCTYPE html> <html lang="pt-BR"> <head> 

 <meta charset="UTF-8">
 <title>Botões de Idioma - Wiki GLA</title>
 <style>
   body {
     font-family: Arial, sans-serif;
     padding: 40px;
     background-color: #f9f9f9;
   }

   .language-buttons {
     position: fixed;
     top: 20px;
     right: 20px;
     display: flex;
     gap: 10px;
     background-color: #ffffffcc;
     padding: 6px 10px;
     border-radius: 8px;
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
     z-index: 999;
   }

   .language-buttons a img {
     width: 40px;
     height: 28px;
     border-radius: 6px;
     border: 1px solid #ccc;
     transition: transform 0.2s ease;
     object-fit: cover;
   }

   .language-buttons a img:hover {
     transform: scale(1.1);
     cursor: pointer;
     border-color: #888;
   }
 </style>

</head> <body> 

   <a href="#" onclick="goToLang('pt')" title="Português">
     <img src="https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg" alt="Português">
   </a>
   <a href="#" onclick="goToLang('en')" title="English">
     <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" alt="English">
   </a>
   <a href="#" onclick="goToLang('es')" title="Español">
     <img src="https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg" alt="Español">
   </a>
   <a href="#" onclick="goToLang('pl')" title="Polski">
     <img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" alt="Polski">
   </a>

 <script>
   const pageMap = {
     'Chefões': {
       en: 'Bosses',
       es: 'Jefes',
       pl: 'Bossowie',
       pt: 'Chefões'
     },
     'Bosses': {
       pt: 'Chefões',
       es: 'Jefes',
       pl: 'Bossowie',
       en: 'Bosses'
     },
     'Jefes': {
       pt: 'Chefões',
       en: 'Bosses',
       pl: 'Bossowie',
       es: 'Jefes'
     },
     'Bossowie': {
       pt: 'Chefões',
       en: 'Bosses',
       es: 'Jefes',
       pl: 'Bossowie'
     },
     'Página_em_Português': {
       en: 'Page_in_English',
       es: 'Pagina_en_Espanol',
       pl: 'Strona_po_Polsku',
       pt: 'Página_em_Português'
     }
   };

   function goToLang(lang) {
     const path = window.location.pathname;
     const currentPage = decodeURIComponent(path.split('/').pop());

     const mapping = pageMap[currentPage];
     if (mapping && mapping[lang]) {
       const newPage = mapping[lang];
       const newPath = path.replace(currentPage, encodeURIComponent(newPage));
       window.location.pathname = newPath;
     } else {
       alert('Tradução não disponível para esta página.');
     }
   }
 </script>

</body> </html>

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