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>
{{#widget:Droflax}}
<html lang="pt-BR">


<head>
{{Persona
   <meta charset="UTF-8">
|nome=Franky (Timeskip)
   <title>Teste GIF Hover</title>
|tier=Diamante
   <style>
|classe=Atirador/Tanque
    body {
|image=/images/9/91/Franky_ts_splash.png
      margin: 0;
|habilidadesRaw=<nowiki>
      font-family: sans-serif;
<!--Hab1-->
      color: white;
   nome=Strong Hammer
    }
| icon=/images/0/05/Frankyts_sk1.png
| level=1
| desc=Franky soca o oponente com um soco de ferro puro.
| atr=2, -, 15, 9
| video=/images/e/e5/Franky_ts_sk1.webm
||
<!--Hab2-->
  nome=Franky Boxing
| icon=/images/e/ed/Frankyts_sk2.png
| level=5
| desc=Basicamente, golpes de boxe padrão, mas, em razão dos punhos do Franky serem feitos de ferro, são muito superiores aos socos de um humano comum. Acerta até duas vezes e reduz a velocidade de movimento em <b>140</b> dos inimigos por <b>1 segundo</b>.
| atr=10, -, 14, 10
| video=/images/3/37/Franky_ts_sk2.webm
||
<!--Hab3-->
  nome=Franky Fireball
| icon=/images/e/ed/Frankyts_sk3.png
| level=12
| desc=Uma versão aprimorada da técnica Fresh Fire. Franky lança uma bola de fogo diretamente de sua boca, queimando o oponente por 6 vezes durante <b>2,5 segundos</b>.
| atr=18, -, 7, 5
| video=/images/2/21/Franky_ts_sk3.webm
||
<!--Hab4-->
  nome=Iron Pirate: Franky Shougun
| icon=/images/3/3a/Frankyts_sk4.png
| level=20
| desc=epois de dois anos estudando plantas de projetos deixadas pelo Dr. Vegapunk na Karakuri Island, Franky projetou e construiu o Franky Shogun. Um veículo de uma única pessoa, operado pelo próprio Franky em uma sala de controle dentro do peito. Enquanto está nessa forma, Franky ganha <b>15%</b> de redução de dano e desbloqueia novas técnicas. Se usado em uma instância PvP, a energia consumida enquanto estiver no Shogun será dobrada.
| atr=5, -, -, -
| video=/images/b/b8/Franky_ts_sk4.webm
||
<!--Hab5-->
  nome=General Sword
| icon=/images/f/fe/Frankyts_sk4-1.png
| level=20
| desc=Franky Shogun é equipado com uma grande espada chamada Franken. Ele a utiliza para cortar o oponente em uma área frontal. Inimigos atingidos tem a velocidade de movimento reduzida em <b>80</b> por <b>3 segundos</b>.
| atr=3, -, 25, 14
| video=/images/1/1a/Franky_ts_sk4-1.webm
||
<!--Hab6-->
  nome=General Shield
| icon=/images/8/84/Frankyts_sk4-2.png
| level=20
| desc=Franky remove uma parte do ombro do Franky Shogun, que tem uma estrela desenhada, e a utiliza como um escudo, tornando-se invulnerável e imparável durante <b>3 segundos</b> e reduzindo a velocidade de movimento de todos os inimigos em <b>50</b> por <b>3 segundos</b>. Ele também causa dano aos inimigos ao redor dele durante 3 segundos e provocando os inimigos.
| atr=25, -, -, -
| video=/images/9/95/Franky_ts_sk4-2.webm
||
<!--Hab7-->
  nome=Leave Franky Shougun
| icon=/images/3/3a/Frankyts_sk4.png
| level=20
| desc=Franky sai do Franky Shogun.
| atr=2, -, -, -
| video=/images/2/2a/Franky_ts_sk4-5.webm
||
<!--Hab8-->
   nome=Change Hair
| icon=/images/a/ab/Frankyts_sk8.png
| level=25
| desc=Depois de pressionar o seu nariz de metal como um botão, o cabelo de Franky saltará para fora do seu couro cabeludo. O cabelo é controlável e ele pode mudar para o estilo que desejar.
| atr=10, -, -, -
| video=/images/d/d0/Franky_ts_emote2.webm
||
<!--Hab9-->
  nome=General Ashimoto Dangerous
| icon=/images/5/5a/Frankyts_sk4-3.png
| level=30
| desc=Franky mantém o Franky Shogun agachado e, segurando a Franken no nível do joelho, faz com que o torso do robô gire rapidamente, puxando os inimigos em sua direção e causando dano até 5 vezes.
| atr=45, -, 9, 4
| video=/images/4/4e/Franky_ts_sk4-3.webm
||
<!--Hab10-->
  nome=Nipple Light
| icon=/images/3/39/Frankyts_sk5.png
| level=50
| desc=Franky usa seus mamilos para liberar uma luz muito forte, que reduz em <b>40%</b> o ataque dos oponentes e a velocidade deles em <b>60</b> por <b>6 segundos</b>.
| atr=50, -, -, -
| video=/images/2/26/Franky_ts_sk5.webm
||
<!--Hab11-->
   nome=Rocket Launcher
| icon=/images/6/6f/Frankyts_sk6.png
| level=70
| desc=Usando a tecnologia que adquiriu em Barjimoa Island, Franky usa seus grande ombros, dos quais ele libera uma linha (Battle Franky 37), revelando três pequenos, porém poderosos, mísseis que serão lançados no oponente. Causa dano em uma grande área e puxa o oponente. Oponentes que estiverem no caminho dos mísseis recebem apenas <b>75%</b> de dano e não são puxados.
| atr=35, -, 40, 35
| video=/images/0/00/Franky_ts_sk6.webm
||
<!--Hab12-->
  nome=Franky Radical Beam
| icon=/images/1/19/Frankyts_sk7.png
| level=90
| desc=Fazendo um gesto circular com ambas as mãos, Franky dispara um grande e poderoso raio laser capaz de destruir o oponente.
| atr=30, -, 45, 25
| video=/images/a/a9/Franky_ts_sk7.webm
||
<!--Hab13-->
  nome=General Cannon
| icon=/images/1/19/Frankyts_sk7.png
| level=90
| desc=Franky junta os braços do Franky Shogun, como se estivesse se preparando para carregar o Coup de Vent ou o Franky Radical Beam, então enche os braços com ar e dispara uma grande rajada de ar comprimido em direção ao oponente.
| atr=60, -, 90, 50
| video=/images/4/4b/Franky_ts_sk4-4.webm
||
<!--Hab14-->
  nome=No Fuel (Passiva)
| icon=/images/3/3e/Frankyts_passiva.png
| level=20
| desc=Franky precisa de Cola para manter o Franky Shogun. Quando estiver sem energia, Franky deixará o Shogun para trás.
| atr=1, -, -, -
| video=
||
<!--Hab15-->
  nome=Emote
| icon=/images/4/4b/Icon-emote.png
| level=25
| desc=
| atr=12, -, -, -
| video=/images/e/e8/Franky_ts_emote.webm
||
</nowiki>


    .search-bar {
|skinsRaw=<nowiki>
      text-align: right;
<!--Skin1-->
      padding: 20px;
   image=/images/4/48/Franky_ts_dressrosa.png
    }
| tooltip=<b>Franky - Dressrosa</b><br>Pode ser obtido(a) trocando por <b>Medalhas de Valentia</b>
 
||
    .search-bar input {
</nowiki>
      padding: 8px;
}}
      width: 250px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
 
    .container {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
      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 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;
    }
 
    .filtros button:hover {
      background-color: #307ac2;
    }
 
    .filtros button.ativo {
      background-color: #006eff;
      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: 2;
      pointer-events: none;
      transition: transform 0.4s ease;
    }
 
    .classe-icon {
      width: 24px;
      height: 24px;
      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;
    }
  </style>
</head>
 
<body>
 
  <!-- Barra de Pesquisa -->
  <div class="search-bar">
    <input type="text" id="search" placeholder="Pesquisar personagem...">
  </div>
 
 
  <div class="filtros" style="display: flex; gap: 20px; justify-content: space-around; margin-bottom: 20px;">
    <!-- Filtro por Classe -->
    <div>
      <button class="tipo-btn" data-tipo="all">Todos</button>
      <button class="tipo-btn" data-tipo="lutador">Lutador</button>
      <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>
    <!-- Filtro por Tier -->
    <div>
      <button class="tier-btn" data-tier="all">Todos</button>
      <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>
   </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>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 Materson</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 Bones</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>
 
    <!-- nefitari 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>
 
    <!-- golden week -->
    <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}')`;
      });
 
      card.addEventListener('mouseleave', () => {
        overlay.style.backgroundImage = '';
      });
    });
 
    // Filtragem por nome no campo de busca
    document.getElementById('search').addEventListener('input', function () {
      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';
      });
    });
 
 
    //  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)",
      "Capone Gang Bege": "https://wiki.gla.com.br/index.php/Capone_Bege",
      "Bon Clay": "https://wiki.gla.com.br/index.php/Mr.2",
      "Alvida (Slime)": "https://wiki.gla.com.br/index.php/Alvida",
      "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",
      "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",
      "X Drake": "https://wiki.gla.com.br/index.php/X_Drake",
      "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",
      "Ichiji": "https://wiki.gla.com.br/index.php/Ichiji",
      "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 Materson": "https://wiki.gla.com.br/index.php/Daddy_Masterson",
      "Daz Bones": "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",
      "Mohji": "https://wiki.gla.com.br/index.php/Mohji",
      "Galdino": "https://wiki.gla.com.br/index.php/Mr.3",
      "Tashigi": "https://wiki.gla.com.br/index.php/Tashigi",
      "Nefitari 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",
      "Golden Week": "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",
      "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;
    if (selectedTipo === 'all') {
      activeTipos.clear();
      tipoButtons.forEach(btn => 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');
      });
    }
    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>
 
</body>
 
</html>

Edição das 06h40min de 19 de junho de 2025

Predefinição:Persona

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