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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<!DOCTYPE html>
<script>
<html lang="pt-BR">
(function () {
 
   function onReady(fn) {
<head>
     if (document.readyState !== 'loading') {
   <meta charset="UTF-8">
       fn();
  <title>Teste GIF Hover</title>
    } else {
  <style>
       document.addEventListener('DOMContentLoaded', fn);
     body {
       margin: 0;
      font-family: sans-serif;
       color: white;
     }
     }
  }


     .search-bar {
  onReady(function () {
       text-align: right;
    const langs = ['pt', 'en', 'es', 'pl'];
       padding: 20px;
     const langFlags = {
     }
      pt: 'https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg',
      en: 'https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg',
       es: 'https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg',
       pl: 'https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg'
     };


     .search-bar input {
     // Obtener título desde la URL real, no desde wgPageName
      padding: 8px;
    const pathParts = decodeURIComponent(window.location.pathname).split('/index.php/')[1].split('/');
      width: 250px;
    const possibleLang = pathParts[pathParts.length - 1];
      border-radius: 5px;
    const currentLang = langs.includes(possibleLang) ? possibleLang : 'pt';
      border: 1px solid #ccc;
    const baseTitle = langs.includes(possibleLang) ? pathParts.slice(0, -1).join('/') : pathParts.join('/');
    }


     .container {
     const preferedLang = localStorage.getItem('preferedLang');
      display: flex;
    const alreadyInLang = currentLang === preferedLang;
      gap: 10px;
    const redirected = sessionStorage.getItem('langRedirectDone');
      flex-wrap: wrap;
      justify-content: center;
      padding-bottom: 40px;
    }


     .personagem {
     // Redireccionamiento automático
       width: 250px;
    if (preferedLang && !alreadyInLang && !redirected) {
       height: 115px;
       const targetTitle = baseTitle + (preferedLang === 'pt' ? '' : '/' + preferedLang);
       border-radius: 10px;
       const baseUrl = '/index.php/' + targetTitle.split('/').map(encodeURIComponent).join('/');
      background-size: 150%;
       fetch(baseUrl, { method: 'HEAD' }).then(response => {
      background-position: center -30px;
        sessionStorage.setItem('langRedirectDone', '1');
      transition: transform 0.3s;
        window.location.href = response.ok ? baseUrl : '/index.php/' + encodeURIComponent(baseTitle);
      display: flex;
       }).catch(() => {
      align-items: flex-end;
        sessionStorage.setItem('langRedirectDone', '1');
      justify-content: flex-end;
        window.location.href = '/index.php/' + encodeURIComponent(baseTitle);
      padding: 5px;
       });
      font-weight: bold;
       return;
      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 {
     // Contenedor de banderas
      background-position: center 0px;
    var container = document.createElement('div');
     }
    container.className = 'language-buttons';
    container.style.position = 'absolute';
    container.style.top = '1px';
     container.style.right = '438px';
    container.style.display = 'flex';
    container.style.padding = '6px 10px';
    container.style.gap = '8px';
    container.style.zIndex = '999';


     .personagem.hancock {
     langs.forEach(function (lang) {
       background-size: 115%;
       var pageTitle = baseTitle + (lang === 'pt' ? '' : '/' + lang);
    }
      var fullUrl = '/index.php/' + pageTitle.split('/').map(encodeURIComponent).join('/')


    .personagem.daddy {
      var link = document.createElement('a');
       background-size: 100%;
       link.href = '#';
       background-position: top;
       link.title = lang.toUpperCase();
    }


    .personagem.kizaru {
      link.addEventListener('click', function (e) {
      background-position: center -20px;
        e.preventDefault();
    }


    .personagem.luffypre {
        fetch(fullUrl, { method: 'HEAD' }).then(response => {
      background-position: center;
          if (response.ok) {
    }
            localStorage.setItem('preferedLang', lang);
            sessionStorage.setItem('langRedirectDone', '1');
            window.location.href = fullUrl;
          } else {
            sessionStorage.setItem('langRedirectDone', '1');


    .personagem.perona {
            const langNames = { es: 'Español', en: 'English', pl: 'Polski' };
      background-position: center -80px;
            const msgTranslations = {
    }
              es: 'La versión en {lang} no está disponible.',
              en: 'The {lang} version is not available.',
              pl: 'Wersja w języku {lang} jest niedostępna.',
              pt: 'A versão em {lang} não está disponível.'
            };


    .personagem.sanjipre {
            if (lang !== 'pt') {
      background-position: center -50px;
              const userLang = (navigator.language || 'en').substring(0, 2);
    }
              const messageTemplate = msgTranslations[userLang] || msgTranslations['en'];
 
              const langLabel = langNames[lang] || lang;
    .personagem.cabaji {
              const msg = document.createElement('div');
      background-size: 240%;
              msg.textContent = messageTemplate.replace('{lang}', langLabel);
      background-position: center -80px;
              msg.style.position = 'fixed';
    }
              msg.style.top = '20px';
              msg.style.left = '50%';
              msg.style.transform = 'translateX(-50%)';
              msg.style.background = '#ffdddd';
              msg.style.color = '#a00';
              msg.style.padding = '12px 24px';
              msg.style.border = '1px solid #a00';
              msg.style.borderRadius = '8px';
              msg.style.fontSize = '16px';
              msg.style.zIndex = '1000';
              msg.style.boxShadow = '0 0 6px rgba(0,0,0,0.2)';
              msg.style.opacity = '0';
              msg.style.transition = 'opacity 0.3s ease';
              document.body.appendChild(msg);
              setTimeout(() => { msg.style.opacity = '1'; }, 10);
              setTimeout(() => {
                msg.style.opacity = '0';
                setTimeout(() => {
                  msg.remove();
                  window.location.href = '/index.php/' + encodeURIComponent(baseTitle);
                }, 500);
              }, 3000);
            } else {
              window.location.href = '/index.php/' + encodeURIComponent(baseTitle);
            }
          }
        }).catch(() => {
          sessionStorage.setItem('langRedirectDone', '1');
          window.location.href = '/index.php/' + encodeURIComponent(baseTitle);
        });
      });


    .personagem.gin {
      var img = document.createElement('img');
       background-position: center -120px;
      img.src = langFlags[lang];
    }
      img.style.width = '32px';
       img.style.height = '24px';
      img.style.borderRadius = '6px';
      img.style.border = (lang === currentLang) ? '2px solid #333' : '1px solid #ccc';
      img.style.transition = 'transform 0.2s ease';
      img.style.objectFit = 'cover';
      img.style.cursor = 'pointer';


    .personagem.jango {
       img.addEventListener('mouseenter', function () {
       background-position: left -40px top -20px;
        img.style.transform = 'scale(1.1)';
      background-size: 180%;
         img.style.borderColor = '#888';
    }
 
    /* --------- 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;
    }
 
    .filtro-box legend {
      font-size: 16px;
      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;
      user-select: none;
      pointer-events: none;
      opacity: 1;
      transition: opacity 0.3s ease-in-out;
    }
 
    .personagem-box {
      position: relative;
      transition: transform 0.4s ease;
      transform-origin: center center;
    }
 
    .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;
    }
 
.tooltip-img {
  position: absolute;
  top: -110px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: auto;
  display: none;
  pointer-events: none;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 99;
}
 
 
  </style>
</head>
 
<body>
 
  <!-- Barra de Pesquisa -->
  <div class="search-bar">
    <input type="text" id="search" placeholder="Pesquisar personagem...">
  </div>
 
 
  <div class="filtros">
    <!-- Filtro por Classe -->
    <fieldset class="filtro-box classe-filtro-container">
      <legend>Classe</legend>
      <button class="btn-vertical tipo-btn ativo" data-tipo="all">ALL</button>
      <div class="classe-grid">
        <button class="tipo-btn" data-tipo="lutador" data-tooltip-img="https://wiki.gla.com.br/images/e/e6/Fighter.png">Lutador</button>
        <button class="tipo-btn" data-tipo="atirador" data-tooltip-img="https://wiki.gla.com.br/images/e/ed/Shooter.png">Atirador</button>
        <button class="tipo-btn" data-tipo="cortante" data-tooltip-img="https://wiki.gla.com.br/images/9/9a/Slasher.png">Cortante</button>
        <button class="tipo-btn" data-tipo="especialista" data-tooltip-img="https://wiki.gla.com.br/images/f/f6/Especialist.png">Especialista</button>
        <button class="tipo-btn" data-tipo="tanque" data-tooltip-img="https://wiki.gla.com.br/images/9/9d/Tank.png">Tanque</button>
        <button class="tipo-btn" data-tipo="dps" data-tooltip-img="https://wiki.gla.com.br/images/6/60/Dps.png">DPS</button>
        <button class="tipo-btn" data-tipo="suporte" data-tooltip-img="https://wiki.gla.com.br/images/a/ab/Support.png">Suporte</button>
        <button class="tipo-btn" data-tipo="bruiser" data-tooltip-img="https://wiki.gla.com.br/images/e/e4/Bruiser.png">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 parede">
      <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>
 
  <!-- Scripts -->
  <script>
    const cards = document.querySelectorAll('.personagem');
 
    // Define as imagens estáticas e gifs, além do reset ao sair
    cards.forEach(card => {
      const staticImg = card.getAttribute('data-static');
      const gifImg = card.getAttribute('data-gif');
      const overlay = card.querySelector('.gif-overlay');
      card.style.backgroundImage = `url('${staticImg}')`;
 
      card.addEventListener('mouseenter', () => {
        const uniqueGifUrl = `${gifImg}?t=${new Date().getTime()}`; // Força reset
         overlay.style.backgroundImage = `url('${uniqueGifUrl}')`;
       });
       });
 
       img.addEventListener('mouseleave', function () {
       card.addEventListener('mouseleave', () => {
        img.style.transform = 'scale(1)';
         overlay.style.backgroundImage = '';
         img.style.borderColor = (lang === currentLang) ? '#333' : '#ccc';
       });
       });
    });


    // Filtragem por nome no campo de busca
       link.appendChild(img);
    document.getElementById('search').addEventListener('input', function () {
       container.appendChild(link);
       const term = this.value.toLowerCase();
       cards.forEach(card => {
        const name = card.querySelector('span').textContent.toLowerCase();
        const wrapper = card.parentElement;
        const tierBox = wrapper.parentElement;
        tierBox.style.display = name.includes(term) ? 'block' : 'none';
      });
     });
     });


 
     document.body.appendChild(container);
     //  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 updateFiltros() {
  personagemBoxes.forEach(box => {
    const matchesTier = activeTier === 'all' || box.classList.contains(activeTier);
    const matchesTipo =
      activeTipos.size === 0 ||
      [...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 {
        activeTipos.add(selectedTipo);
        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);
      }
    });
 
document.querySelectorAll('[data-tooltip-img]').forEach(btn => {
  const imgUrl = btn.getAttribute('data-tooltip-img');
 
  if (imgUrl) {
    const tooltip = document.createElement('img');
    tooltip.src = imgUrl;
    tooltip.classList.add('tooltip-img');
    btn.style.position = 'relative'; // para posicionar o tooltip corretamente
    btn.appendChild(tooltip);
 
    btn.addEventListener('mouseenter', () => {
      tooltip.style.display = 'block';
    });
 
    btn.addEventListener('mouseleave', () => {
      tooltip.style.display = 'none';
    });
  }
});
 
 
  </script>
 
</body>
 
</html>
 
<!-- tradutor teste -->
 
<!-- Botões de idiomas-->
<style>
.language-buttons {
  position: fixed;
  top: 1px;
  right: 438px;
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  z-index: 999;
}
 
.language-buttons img {
  width: 32px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #ccc;
  transition: transform 0.2s ease;
  object-fit: cover;
  cursor: pointer;
}
 
.language-buttons img.active {
  border: 2px solid #333;
}
 
.language-buttons img:hover {
  transform: scale(1.1);
  border-color: #888;
}
 
/* Mensagem flutuante de idioma indisponível */
.lang-alert {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffdddd;
  color: #a00;
  padding: 12px 24px;
  border: 1px solid #a00;
  border-radius: 8px;
  font-size: 16px;
  z-index: 1000;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}
</style>
 
<div class="language-buttons">
  <!-- Português -->
  <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>
 
  <!-- Inglês -->
  <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>
 
  <!-- Espanhol -->
  <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>
 
  <!-- Polonês -->
  <a href="#" onclick="goToLang('pl')" title="Polski">
    <img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" alt="Polski">
  </a>
</div>
 
<script>
  // Mapeamento de URLs completas para versões traduzidas
  const pageMap = {
    'https://wiki.gla.com.br/index.php/Usu%C3%A1rio:Visno': {
      en: 'https://wiki.gla.com.br/index.php/Usu%C3%A1rio:Droflax',
      pt: 'https://wiki.gla.com.br/index.php/Usu%C3%A1rio:Visno',
      es: 'https://wiki.gla.com.br/index.php/Usu%C3%A1rio:Droflax',
      pl: 'https://wiki.gla.com.br/index.php/Usu%C3%A1rio:Droflax'
    }
    // Adicione outras URLs completas aqui
  };
 
  function goToLang(lang) {
    const currentUrl = window.location.href;
    const mapping = pageMap[currentUrl];
 
    if (mapping && mapping[lang]) {
      window.location.href = mapping[lang];
    } else {
      alert('Tradução não disponível para esta URL.');
    }
  }
</script>
</script>

Edição das 01h29min de 1 de julho de 2025

<script> (function () {

 function onReady(fn) {
   if (document.readyState !== 'loading') {
     fn();
   } else {
     document.addEventListener('DOMContentLoaded', fn);
   }
 }
 onReady(function () {
   const langs = ['pt', 'en', 'es', 'pl'];
   const langFlags = {
     pt: 'https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg',
     en: 'https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg',
     es: 'https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg',
     pl: 'https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg'
   };
   // Obtener título desde la URL real, no desde wgPageName
   const pathParts = decodeURIComponent(window.location.pathname).split('/index.php/')[1].split('/');
   const possibleLang = pathParts[pathParts.length - 1];
   const currentLang = langs.includes(possibleLang) ? possibleLang : 'pt';
   const baseTitle = langs.includes(possibleLang) ? pathParts.slice(0, -1).join('/') : pathParts.join('/');
   const preferedLang = localStorage.getItem('preferedLang');
   const alreadyInLang = currentLang === preferedLang;
   const redirected = sessionStorage.getItem('langRedirectDone');
   // Redireccionamiento automático
   if (preferedLang && !alreadyInLang && !redirected) {
     const targetTitle = baseTitle + (preferedLang === 'pt' ?  : '/' + preferedLang);
     const baseUrl = '/index.php/' + targetTitle.split('/').map(encodeURIComponent).join('/');
     fetch(baseUrl, { method: 'HEAD' }).then(response => {
       sessionStorage.setItem('langRedirectDone', '1');
       window.location.href = response.ok ? baseUrl : '/index.php/' + encodeURIComponent(baseTitle);
     }).catch(() => {
       sessionStorage.setItem('langRedirectDone', '1');
       window.location.href = '/index.php/' + encodeURIComponent(baseTitle);
     });
     return;
   }
   // Contenedor de banderas
   var container = document.createElement('div');
   container.className = 'language-buttons';
   container.style.position = 'absolute';
   container.style.top = '1px';
   container.style.right = '438px';
   container.style.display = 'flex';
   container.style.padding = '6px 10px';
   container.style.gap = '8px';
   container.style.zIndex = '999';
   langs.forEach(function (lang) {
     var pageTitle = baseTitle + (lang === 'pt' ?  : '/' + lang);
     var fullUrl = '/index.php/' + pageTitle.split('/').map(encodeURIComponent).join('/')
     var link = document.createElement('a');
     link.href = '#';
     link.title = lang.toUpperCase();
     link.addEventListener('click', function (e) {
       e.preventDefault();
       fetch(fullUrl, { method: 'HEAD' }).then(response => {
         if (response.ok) {
           localStorage.setItem('preferedLang', lang);
           sessionStorage.setItem('langRedirectDone', '1');
           window.location.href = fullUrl;
         } else {
           sessionStorage.setItem('langRedirectDone', '1');
           const langNames = { es: 'Español', en: 'English', pl: 'Polski' };
           const msgTranslations = {
             es: 'La versión en {lang} no está disponible.',
             en: 'The {lang} version is not available.',
             pl: 'Wersja w języku {lang} jest niedostępna.',
             pt: 'A versão em {lang} não está disponível.'
           };
           if (lang !== 'pt') {
             const userLang = (navigator.language || 'en').substring(0, 2);
             const messageTemplate = msgTranslations[userLang] || msgTranslations['en'];
             const langLabel = langNames[lang] || lang;
             const msg = document.createElement('div');
             msg.textContent = messageTemplate.replace('{lang}', langLabel);
             msg.style.position = 'fixed';
             msg.style.top = '20px';
             msg.style.left = '50%';
             msg.style.transform = 'translateX(-50%)';
             msg.style.background = '#ffdddd';
             msg.style.color = '#a00';
             msg.style.padding = '12px 24px';
             msg.style.border = '1px solid #a00';
             msg.style.borderRadius = '8px';
             msg.style.fontSize = '16px';
             msg.style.zIndex = '1000';
             msg.style.boxShadow = '0 0 6px rgba(0,0,0,0.2)';
             msg.style.opacity = '0';
             msg.style.transition = 'opacity 0.3s ease';
             document.body.appendChild(msg);
             setTimeout(() => { msg.style.opacity = '1'; }, 10);
             setTimeout(() => {
               msg.style.opacity = '0';
               setTimeout(() => {
                 msg.remove();
                 window.location.href = '/index.php/' + encodeURIComponent(baseTitle);
               }, 500);
             }, 3000);
           } else {
             window.location.href = '/index.php/' + encodeURIComponent(baseTitle);
           }
         }
       }).catch(() => {
         sessionStorage.setItem('langRedirectDone', '1');
         window.location.href = '/index.php/' + encodeURIComponent(baseTitle);
       });
     });
     var img = document.createElement('img');
     img.src = langFlags[lang];
     img.style.width = '32px';
     img.style.height = '24px';
     img.style.borderRadius = '6px';
     img.style.border = (lang === currentLang) ? '2px solid #333' : '1px solid #ccc';
     img.style.transition = 'transform 0.2s ease';
     img.style.objectFit = 'cover';
     img.style.cursor = 'pointer';
     img.addEventListener('mouseenter', function () {
       img.style.transform = 'scale(1.1)';
       img.style.borderColor = '#888';
     });
     img.addEventListener('mouseleave', function () {
       img.style.transform = 'scale(1)';
       img.style.borderColor = (lang === currentLang) ? '#333' : '#ccc';
     });
     link.appendChild(img);
     container.appendChild(link);
   });
   document.body.appendChild(container);
 });

})(); </script>