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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 360: Linha 360:
         <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="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="bruiser" data-tooltip-img="https://wiki.gla.com.br/images/e/e4/Bruiser.png">Bruiser</button>
         <button class="tipo-btn" data-tipo="outros" data-tooltip-text="Personagens que quebram parede e personagens que fazem ponte">Outros</button>
      </div>
    </fieldset>
 
    <!-- Filtro por Outros (Parede e Ponte) -->
    <fieldset class="filtro-box">
      <legend>Outros</legend>
      <div class="classe-grid">
         <button class="tipo-btn" data-tipo="parede" data-tooltip-text="Personagens que quebram parede">Parede</button>
        <button class="tipo-btn" data-tipo="ponte" data-tooltip-text="Personagens que fazem ponte">Ponte</button>
       </div>
       </div>
     </fieldset>
     </fieldset>


     <!-- Filtro por Tier -->
     <!-- Filtro por Tier -->
<!-- Substitua os botões do filtro de Tier por estrelas coloridas -->
    <fieldset class="filtro-box">
<fieldset class="filtro-box">
      <legend>Tier</legend>
  <legend>Tier</legend>
      <div class="filtro-grupo">
  <div class="filtro-grupo">
        <button class="tier-btn" data-tier="tier-diamante"><span class="estrela azul" title="Diamante">★</span></button>
    <button class="tier-btn" data-tier="tier-diamante"><span class="estrela azul" title="Diamante">★</span></button>
        <button class="tier-btn" data-tier="tier-gold"><span class="estrela dourada" title="Ouro">★</span></button>
    <button class="tier-btn" data-tier="tier-gold"><span class="estrela dourada" title="Ouro">★</span></button>
        <button class="tier-btn" data-tier="tier-prata"><span class="estrela prata" title="Prata">★</span></button>
    <button class="tier-btn" data-tier="tier-prata"><span class="estrela prata" title="Prata">★</span></button>
        <button class="tier-btn" data-tier="tier-bronze"><span class="estrela bronze" title="Bronze">★</span></button>
    <button class="tier-btn" data-tier="tier-bronze"><span class="estrela bronze" title="Bronze">★</span></button>
      </div>
    </fieldset>
 
   </div>
   </div>
</fieldset>


   <div class="novos-container">
   <div class="novos-container">
Linha 390: Linha 399:


     <!-- aokiji -->
     <!-- aokiji -->
     <div class="personagem-box tier-diamante cortante especialista tanque outros">
     <div class="personagem-box tier-diamante cortante especialista tanque ponte parede">
       <div class="personagem" data-static="https://i.postimg.cc/0NMJrvjJ/fundoaokiji.png" data-gif="https://i.postimg.cc/nzKrQhJM/aokijiemotecard2.gif">
       <div class="personagem" data-static="https://i.postimg.cc/0NMJrvjJ/fundoaokiji.png" data-gif="https://i.postimg.cc/nzKrQhJM/aokijiemotecard2.gif">
         <span>Aokiji</span>
         <span>Aokiji</span>
Linha 398: Linha 407:


     <!-- kuma -->
     <!-- kuma -->
     <div class="personagem-box tier-diamante especialista tanque outros">
     <div class="personagem-box tier-diamante especialista tanque parede">
       <div class="personagem" data-static="https://i.postimg.cc/8chnZGsF/kuma2.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/8chnZGsF/kuma2.png" data-gif="">
         <span>Bartholomew Kuma</span>
         <span>Bartholomew Kuma</span>
Linha 414: Linha 423:


     <!-- kizaru -->
     <!-- kizaru -->
     <div class="personagem-box tier-diamante dps especialista atirador outros">
     <div class="personagem-box tier-diamante dps especialista atirador parede">
       <div class="personagem kizaru" data-static="https://i.postimg.cc/PqjhLLWD/kizaru.webp" data-gif="">
       <div class="personagem kizaru" data-static="https://i.postimg.cc/PqjhLLWD/kizaru.webp" data-gif="">
         <span>Borsalino Kizaru</span>
         <span>Borsalino Kizaru</span>
Linha 422: Linha 431:


     <!-- brook -->
     <!-- brook -->
     <div class="personagem-box tier-diamante suporte cortante outros">
     <div class="personagem-box tier-diamante suporte cortante ponte">
       <div class="personagem" data-static="https://i.postimg.cc/rmsHzcPW/brookts.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/rmsHzcPW/brookts.png" data-gif="">
         <span>Brook (TS)</span>
         <span>Brook (TS)</span>
Linha 430: Linha 439:


     <!-- chopper -->
     <!-- chopper -->
     <div class="personagem-box tier-diamante suporte lutador outros">
     <div class="personagem-box tier-diamante suporte lutador parede">
       <div class="personagem hancock" data-static="https://i.postimg.cc/QM26N5cL/chopperts.png" data-gif="">
       <div class="personagem hancock" data-static="https://i.postimg.cc/QM26N5cL/chopperts.png" data-gif="">
         <span>Chopper (TS)</span>
         <span>Chopper (TS)</span>
Linha 438: Linha 447:


     <!-- doflamingo -->
     <!-- doflamingo -->
     <div class="personagem-box tier-diamante dps especialista atirador outros">
     <div class="personagem-box tier-diamante dps especialista atirador ponte parede">
       <div class="personagem hancock" data-static="https://i.postimg.cc/3JfFJmHL/doflamingo.png" data-gif="">
       <div class="personagem hancock" data-static="https://i.postimg.cc/3JfFJmHL/doflamingo.png" data-gif="">
         <span>Donquixote Doflamingo</span>
         <span>Donquixote Doflamingo</span>
Linha 446: Linha 455:


     <!-- mihawk -->
     <!-- mihawk -->
     <div class="personagem-box tier-diamante dps cortante outros">
     <div class="personagem-box tier-diamante dps cortante parede">
       <div class="personagem" data-static="https://i.postimg.cc/6QWWj28X/Dracule-Mihawk.webp" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/6QWWj28X/Dracule-Mihawk.webp" data-gif="">
         <span>Dracule Mihawk</span>
         <span>Dracule Mihawk</span>
Linha 454: Linha 463:


     <!-- ivankov -->
     <!-- ivankov -->
     <div class="personagem-box tier-diamante suporte lutador outros">
     <div class="personagem-box tier-diamante suporte lutador parede">
       <div class="personagem" data-static="https://i.postimg.cc/C1pWP9Pf/Ivan-chan.webp" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/C1pWP9Pf/Ivan-chan.webp" data-gif="">
         <span>Emporio Ivankov</span>
         <span>Emporio Ivankov</span>
Linha 470: Linha 479:


     <!-- franky ts -->
     <!-- franky ts -->
     <div class="personagem-box tier-diamante tanque atirador outros">
     <div class="personagem-box tier-diamante tanque atirador parede">
       <div class="personagem" data-static="https://i.postimg.cc/mgDHryfP/frankyts.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/mgDHryfP/frankyts.png" data-gif="">
         <span>Franky (TS)</span>
         <span>Franky (TS)</span>
Linha 478: Linha 487:


     <!-- jinbe -->
     <!-- jinbe -->
     <div class="personagem-box tier-diamante tanque lutador outros">
     <div class="personagem-box tier-diamante tanque lutador parede">
       <div class="personagem" data-static="https://i.postimg.cc/s2mqJzH6/jinbe.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/s2mqJzH6/jinbe.png" data-gif="">
         <span>Jinbe</span>
         <span>Jinbe</span>
Linha 502: Linha 511:


     <!-- luffy -->
     <!-- luffy -->
     <div class="personagem-box tier-diamante dps lutador outros">
     <div class="personagem-box tier-diamante dps lutador parede">
       <div class="personagem luffy" data-static="https://i.postimg.cc/L8hJ0Sz0/luffycard.png" data-gif="https://i.postimg.cc/G2n92s6Z/luffytsemotecard.gif">
       <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>
         <span>Monkey D. Luffy (TS)</span>
Linha 526: Linha 535:


     <!-- robin ts -->
     <!-- robin ts -->
     <div class="personagem-box tier-diamante dps especialista outros">
     <div class="personagem-box tier-diamante dps especialista ponte parede">
       <div class="personagem" data-static="https://i.postimg.cc/9QL8KbV1/robints.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/9QL8KbV1/robints.png" data-gif="">
         <span>Nico Robin (TS)</span>
         <span>Nico Robin (TS)</span>
Linha 535: Linha 544:


     <!-- zoro ts -->
     <!-- zoro ts -->
     <div class="personagem-box tier-diamante dps cortante outros">
     <div class="personagem-box tier-diamante dps cortante parede">
       <div class="personagem" data-static="https://i.postimg.cc/N01yLJMk/zorots.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/N01yLJMk/zorots.png" data-gif="">
         <span>Roronoa Zoro (TS)</span>
         <span>Roronoa Zoro (TS)</span>
Linha 543: Linha 552:


     <!-- sabo -->
     <!-- sabo -->
     <div class="personagem-box tier-diamante dps especialista lutador outros">
     <div class="personagem-box tier-diamante dps especialista lutador parede">
       <div class="personagem hancock" data-static="https://i.postimg.cc/1tTQpXZP/sabo2.png" data-gif="">
       <div class="personagem hancock" data-static="https://i.postimg.cc/1tTQpXZP/sabo2.png" data-gif="">
         <span>Sabo</span>
         <span>Sabo</span>
Linha 552: Linha 561:


     <!-- akainu -->
     <!-- akainu -->
     <div class="personagem-box tier-diamante especialista lutador dps outros">
     <div class="personagem-box tier-diamante especialista lutador dps parede">
       <div class="personagem" data-static="https://i.postimg.cc/j2TBtj1h/akainu.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/j2TBtj1h/akainu.png" data-gif="">
         <span>Sakazuki (Akainu)</span>
         <span>Sakazuki (Akainu)</span>
Linha 560: Linha 569:


     <!-- shanks -->
     <!-- shanks -->
     <div class="personagem-box tier-diamante cortante bruiser outros">
     <div class="personagem-box tier-diamante cortante bruiser parede">
       <div class="personagem" data-static="https://i.postimg.cc/HnTvFhJZ/shanks.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/HnTvFhJZ/shanks.png" data-gif="">
         <span>Shanks</span>
         <span>Shanks</span>
Linha 568: Linha 577:


     <!-- usopp ts -->
     <!-- usopp ts -->
     <div class="personagem-box tier-diamante dps atirador outros">
     <div class="personagem-box tier-diamante dps atirador parede">
       <div class="personagem" data-static="https://i.postimg.cc/tCVbsY9z/usoppts2.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/tCVbsY9z/usoppts2.png" data-gif="">
         <span>Usopp (TS)</span>
         <span>Usopp (TS)</span>
Linha 576: Linha 585:


     <!-- uta -->
     <!-- uta -->
     <div class="personagem-box tier-diamante dps especialista outros">
     <div class="personagem-box tier-diamante dps especialista parede">
       <div class="personagem hancock" data-static="https://i.postimg.cc/2y5FQRLD/uta.png" data-gif="">
       <div class="personagem hancock" data-static="https://i.postimg.cc/2y5FQRLD/uta.png" data-gif="">
         <span>Uta</span>
         <span>Uta</span>
Linha 584: Linha 593:


     <!-- sanji ts -->
     <!-- sanji ts -->
     <div class="personagem-box tier-diamante dps lutador outros">
     <div class="personagem-box tier-diamante dps lutador parede">
       <div class="personagem" data-static="https://i.postimg.cc/Vv5nSq2s/sanjits.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/Vv5nSq2s/sanjits.png" data-gif="">
         <span>Sanji (TS)</span>
         <span>Sanji (TS)</span>
Linha 600: Linha 609:


     <!-- Bartolomeo -->
     <!-- Bartolomeo -->
     <div class="personagem-box tier-gold dps especialista ponte outros">
     <div class="personagem-box tier-gold dps especialista ponte parede">
       <div class="personagem" data-static="https://i.postimg.cc/ryrmqPvK/barto.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/ryrmqPvK/barto.png" data-gif="">
         <span>Bartolomeo</span>
         <span>Bartolomeo</span>
Linha 616: Linha 625:


     <!-- Bastille -->
     <!-- Bastille -->
     <div class="personagem-box tier-gold tanque cortante outros">
     <div class="personagem-box tier-gold tanque cortante parede">
       <div class="personagem" data-static="https://i.postimg.cc/C1J45KZs/bastille.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/C1J45KZs/bastille.png" data-gif="">
         <span>Bastille</span>
         <span>Bastille</span>
Linha 624: Linha 633:


     <!-- Bellamy -->
     <!-- Bellamy -->
     <div class="personagem-box tier-gold dps lutador outros">
     <div class="personagem-box tier-gold dps lutador parede">
       <div class="personagem hancock" data-static="https://i.postimg.cc/8ckxzHGK/bella.png" data-gif="">
       <div class="personagem hancock" data-static="https://i.postimg.cc/8ckxzHGK/bella.png" data-gif="">
         <span>Bellamy</span>
         <span>Bellamy</span>
Linha 672: Linha 681:
      
      
     <!-- bege -->
     <!-- bege -->
     <div class="personagem-box tier-gold dps atirador outros">
     <div class="personagem-box tier-gold dps atirador parede">
       <div class="personagem" data-static="https://i.postimg.cc/TwvptHqy/bege.webp" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/TwvptHqy/bege.webp" data-gif="">
         <span>Capone Gang Bege</span>
         <span>Capone Gang Bege</span>
Linha 688: Linha 697:


     <!-- chopper pré -->
     <!-- chopper pré -->
     <div class="personagem-box tier-gold suporte lutador outros">
     <div class="personagem-box tier-gold suporte lutador parede">
       <div class="personagem" data-static="https://i.postimg.cc/7YqCPy0m/tonytony.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/7YqCPy0m/tonytony.png" data-gif="">
         <span>Chopper</span>
         <span>Chopper</span>
Linha 696: Linha 705:


     <!-- crocodile -->
     <!-- crocodile -->
     <div class="personagem-box tier-gold tanque especialista ponte outros">
     <div class="personagem-box tier-gold tanque especialista ponte parede">
       <div class="personagem hancock" data-static="https://i.postimg.cc/hGm4bCVX/croco.png" data-gif="">
       <div class="personagem hancock" data-static="https://i.postimg.cc/hGm4bCVX/croco.png" data-gif="">
         <span>Sir Crocodile</span>
         <span>Sir Crocodile</span>
Linha 704: Linha 713:


     <!-- dalmatian -->
     <!-- dalmatian -->
     <div class="personagem-box tier-gold bruiser cortante outros">
     <div class="personagem-box tier-gold bruiser cortante parede">
       <div class="personagem hancock" data-static="https://i.postimg.cc/Gpnnrbsp/dalma.png" data-gif="">
       <div class="personagem hancock" data-static="https://i.postimg.cc/Gpnnrbsp/dalma.png" data-gif="">
         <span>Dalmatian</span>
         <span>Dalmatian</span>
Linha 712: Linha 721:


     <!-- franky pré -->
     <!-- franky pré -->
     <div class="personagem-box tier-gold bruiser atirador outros">
     <div class="personagem-box tier-gold bruiser atirador parede">
       <div class="personagem hancock" data-static="https://i.postimg.cc/RCJr33Q0/frankypre.png" data-gif="">
       <div class="personagem hancock" data-static="https://i.postimg.cc/RCJr33Q0/frankypre.png" data-gif="">
         <span>Franky</span>
         <span>Franky</span>
Linha 728: Linha 737:


     <!-- hina -->
     <!-- hina -->
     <div class="personagem-box tier-gold bruiser lutador outros">
     <div class="personagem-box tier-gold bruiser lutador ponte parede">
       <div class="personagem" data-static="https://i.postimg.cc/90hBFNYZ/hina.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/90hBFNYZ/hina.png" data-gif="">
         <span>Hina</span>
         <span>Hina</span>
Linha 736: Linha 745:


     <!-- burgess -->
     <!-- burgess -->
     <div class="personagem-box tier-gold tanque lutador outros">
     <div class="personagem-box tier-gold tanque lutador parede">
       <div class="personagem hancock" data-static="https://i.postimg.cc/hv27WCyS/burgess.png" data-gif="">
       <div class="personagem hancock" data-static="https://i.postimg.cc/hv27WCyS/burgess.png" data-gif="">
         <span>Jesus Burgess</span>
         <span>Jesus Burgess</span>
Linha 752: Linha 761:


     <!-- kid -->
     <!-- kid -->
     <div class="personagem-box tier-gold atirador tanque outros">
     <div class="personagem-box tier-gold atirador tanque ponte parede">
       <div class="personagem" data-static="https://i.postimg.cc/wMq0QGRH/kid.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/wMq0QGRH/kid.png" data-gif="">
         <span>Eustass Kid</span>
         <span>Eustass Kid</span>
Linha 784: Linha 793:


     <!-- leo e mansherry -->
     <!-- leo e mansherry -->
     <div class="personagem-box tier-gold suporte especialista outros">
     <div class="personagem-box tier-gold suporte especialista ponte">
       <div class="personagem hancock" data-static="https://i.postimg.cc/2yyXftkG/leo-masherry.png" data-gif="">
       <div class="personagem hancock" data-static="https://i.postimg.cc/2yyXftkG/leo-masherry.png" data-gif="">
         <span>Leo & Mansherry</span>
         <span>Leo & Mansherry</span>
Linha 792: Linha 801:


     <!-- luffy pré -->
     <!-- luffy pré -->
     <div class="personagem-box tier-gold bruiser lutador outros">
     <div class="personagem-box tier-gold bruiser lutador parede">
       <div class="personagem luffypre" data-static="https://i.postimg.cc/PrZ0fBbV/luffypre.png" data-gif="">
       <div class="personagem luffypre" data-static="https://i.postimg.cc/PrZ0fBbV/luffypre.png" data-gif="">
         <span>Monkey D. Luffy</span>
         <span>Monkey D. Luffy</span>
Linha 800: Linha 809:


     <!-- nami pré -->
     <!-- nami pré -->
     <div class="personagem-box tier-gold dps especialista outros">
     <div class="personagem-box tier-gold dps especialista parede">
       <div class="personagem" data-static="https://i.postimg.cc/Jn7YZdZL/nami3.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/Jn7YZdZL/nami3.png" data-gif="">
         <span>Nami</span>
         <span>Nami</span>
Linha 808: Linha 817:


     <!-- perona -->
     <!-- perona -->
     <div class="personagem-box tier-gold suporte especialista outros">
     <div class="personagem-box tier-gold suporte especialista parede">
       <div class="personagem" data-static="https://i.postimg.cc/BQfYC6xp/perona3.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/BQfYC6xp/perona3.png" data-gif="">
         <span>Perona</span>
         <span>Perona</span>
Linha 824: Linha 833:


     <!-- robin pré -->
     <!-- robin pré -->
     <div class="personagem-box tier-gold dps especialista outros">
     <div class="personagem-box tier-gold dps especialista ponte parede">
       <div class="personagem" data-static="https://i.postimg.cc/W13DRLJC/robinpre.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/W13DRLJC/robinpre.png" data-gif="">
         <span>Robin</span>
         <span>Robin</span>
Linha 832: Linha 841:


     <!-- zoro pré -->
     <!-- zoro pré -->
     <div class="personagem-box tier-gold bruiser cortante outros">
     <div class="personagem-box tier-gold bruiser cortante parede">
       <div class="personagem" data-static="https://i.postimg.cc/B6q9ysj1/zoropre.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/B6q9ysj1/zoropre.png" data-gif="">
         <span>Zoro</span>
         <span>Zoro</span>
Linha 864: Linha 873:


     <!-- law -->
     <!-- law -->
     <div class="personagem-box tier-gold dps cortante especialista outros">
     <div class="personagem-box tier-gold dps cortante especialista parede">
       <div class="personagem" data-static="https://i.postimg.cc/FRtgssy7/law.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/FRtgssy7/law.png" data-gif="">
         <span>Trafalgar D. Water Law</span>
         <span>Trafalgar D. Water Law</span>
Linha 872: Linha 881:


     <!-- urouge -->
     <!-- urouge -->
     <div class="personagem-box tier-gold tanque lutador outros">
     <div class="personagem-box tier-gold tanque lutador parede">
       <div class="personagem" data-static="https://i.postimg.cc/1zDVB0F3/urouge.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/1zDVB0F3/urouge.png" data-gif="">
         <span>Urouge</span>
         <span>Urouge</span>
Linha 880: Linha 889:


     <!-- usopp pré -->
     <!-- usopp pré -->
     <div class="personagem-box tier-gold dps atirador outros">
     <div class="personagem-box tier-gold dps atirador parede">
       <div class="personagem" data-static="https://i.postimg.cc/qRSRdzy5/usopppre.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/qRSRdzy5/usopppre.png" data-gif="">
         <span>Usopp</span>
         <span>Usopp</span>
Linha 888: Linha 897:


     <!-- van augur -->
     <!-- van augur -->
     <div class="personagem-box tier-gold dps atirador outros">
     <div class="personagem-box tier-gold dps atirador parede">
       <div class="personagem hancock" data-static="https://i.postimg.cc/ZKTk5JH7/van.png" data-gif="">
       <div class="personagem hancock" data-static="https://i.postimg.cc/ZKTk5JH7/van.png" data-gif="">
         <span>Van Augur</span>
         <span>Van Augur</span>
Linha 896: Linha 905:


     <!-- ichiji -->
     <!-- ichiji -->
     <div class="personagem-box tier-gold bruiser lutador outros">
     <div class="personagem-box tier-gold bruiser lutador parede">
       <div class="personagem" data-static="https://i.postimg.cc/x1wtqRYf/ichiji.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/x1wtqRYf/ichiji.png" data-gif="">
         <span>Vinsmoke Ichiji</span>
         <span>Vinsmoke Ichiji</span>
Linha 920: Linha 929:


     <!-- sanji pré -->
     <!-- sanji pré -->
     <div class="personagem-box tier-gold dps lutador outros">
     <div class="personagem-box tier-gold dps lutador parede">
       <div class="personagem sanjipre" data-static="https://i.postimg.cc/CKKkhnnh/sanjipre.png" data-gif="">
       <div class="personagem sanjipre" data-static="https://i.postimg.cc/CKKkhnnh/sanjipre.png" data-gif="">
         <span>Vinsmoke Sanji</span>
         <span>Vinsmoke Sanji</span>
Linha 928: Linha 937:


     <!-- yonji -->
     <!-- yonji -->
     <div class="personagem-box tier-gold tanque lutador outros">
     <div class="personagem-box tier-gold tanque lutador parede">
       <div class="personagem" data-static="https://i.postimg.cc/KvFKc3C6/yonji.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/KvFKc3C6/yonji.png" data-gif="">
         <span>Vinsmoke Yonji</span>
         <span>Vinsmoke Yonji</span>
Linha 936: Linha 945:


     <!-- drake -->
     <!-- drake -->
     <div class="personagem-box tier-gold bruiser lutador outros">
     <div class="personagem-box tier-gold bruiser lutador parede">
       <div class="personagem" data-static="https://i.postimg.cc/tRDbP1sQ/drake.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/tRDbP1sQ/drake.png" data-gif="">
         <span>X Drake</span>
         <span>X Drake</span>
Linha 976: Linha 985:


     <!-- arlong -->
     <!-- arlong -->
     <div class="personagem-box tier-prata bruiser lutador outros">
     <div class="personagem-box tier-prata bruiser lutador parede">
       <div class="personagem" data-static="https://i.postimg.cc/j2LQcgrJ/arlong.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/j2LQcgrJ/arlong.png" data-gif="">
         <span>Arlong</span>
         <span>Arlong</span>
Linha 1 000: Linha 1 009:


     <!-- buggy -->
     <!-- buggy -->
     <div class="personagem-box tier-prata dps atirador outros">
     <div class="personagem-box tier-prata dps atirador parede">
       <div class="personagem" data-static="https://i.postimg.cc/Vvmdg40W/buggy.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/Vvmdg40W/buggy.png" data-gif="">
         <span>Buggy</span>
         <span>Buggy</span>
Linha 1 048: Linha 1 057:


     <!-- galdino -->
     <!-- galdino -->
     <div class="personagem-box tier-prata suporte especialista outros">
     <div class="personagem-box tier-prata suporte especialista ponte">
       <div class="personagem" data-static="https://i.postimg.cc/VkZRr00N/galdino.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/VkZRr00N/galdino.png" data-gif="">
         <span>Galdino</span>
         <span>Galdino</span>
Linha 1 072: Linha 1 081:


     <!-- wapol -->
     <!-- wapol -->
     <div class="personagem-box tier-prata tanque atirador outros">
     <div class="personagem-box tier-prata tanque atirador parede">
       <div class="personagem" data-static="https://i.postimg.cc/26k8syT4/wapol.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/26k8syT4/wapol.png" data-gif="">
         <span>Wapol</span>
         <span>Wapol</span>
Linha 1 104: Linha 1 113:


     <!-- chew -->
     <!-- chew -->
     <div class="personagem-box tier-bronze dps atirador outros">
     <div class="personagem-box tier-bronze dps atirador parede">
       <div class="personagem sanjipre" data-static="https://i.postimg.cc/NG1LKh29/chew.png" data-gif="">
       <div class="personagem sanjipre" data-static="https://i.postimg.cc/NG1LKh29/chew.png" data-gif="">
         <span>Chew</span>
         <span>Chew</span>
Linha 1 152: Linha 1 161:


     <!-- kuroobi -->
     <!-- kuroobi -->
     <div class="personagem-box tier-bronze tanque lutador outros">
     <div class="personagem-box tier-bronze tanque lutador parede">
       <div class="personagem sanjipre" data-static="https://i.postimg.cc/bvkHrCxz/kuroobi.png" data-gif="">
       <div class="personagem sanjipre" data-static="https://i.postimg.cc/bvkHrCxz/kuroobi.png" data-gif="">
         <span>Kuroobi</span>
         <span>Kuroobi</span>
Linha 1 315: Linha 1 324:
       "Arlong": "https://wiki.gla.com.br/index.php/Arlong",
       "Arlong": "https://wiki.gla.com.br/index.php/Arlong",
       "Bepo": "https://wiki.gla.com.br/index.php/Bepo",
       "Bepo": "https://wiki.gla.com.br/index.php/Bepo",
       "Bon Clay": "https://wiki.gla.com.br/index.php/Mr.2",
       "Bon Clay": "https://wiki.gla.com.br index.php/Mr.2",
       "Buggy": "https://wiki.gla.com.br/index.php/Buggy",
       "Buggy": "https://wiki.gla.com.br index.php/Buggy",
       "Daddy Masterson": "https://wiki.gla.com.br/index.php/Daddy_Masterson",
       "Daddy Masterson": "https://wiki.gla.com.br index.php/Daddy_Masterson",
       "Daz Bonez": "https://wiki.gla.com.br/index.php/Mr.1",
       "Daz Bonez": "https://wiki.gla.com.br index.php/Mr.1",
       "Zala": "https://wiki.gla.com.br/index.php/Miss_Doublefinger",
       "Zala": "https://wiki.gla.com.br index.php/Miss_Doublefinger",
       "Don Krieg": "https://wiki.gla.com.br/index.php/Don_Krieg",
       "Don Krieg": "https://wiki.gla.com.br index.php/Don_Krieg",
       "Kuro": "https://wiki.gla.com.br/index.php/Kuro",
       "Kuro": "https://wiki.gla.com.br index.php/Kuro",
       "Galdino": "https://wiki.gla.com.br/index.php/Mr.3",
       "Galdino": "https://wiki.gla.com.br index.php/Mr.3",
       "Tashigi": "https://wiki.gla.com.br/index.php/Tashigi",
       "Tashigi": "https://wiki.gla.com.br index.php/Tashigi",
       "Nefertari Vivi": "https://wiki.gla.com.br/index.php/Vivi",
       "Nefertari Vivi": "https://wiki.gla.com.br index.php/Vivi",
       "Wapol": "https://wiki.gla.com.br/index.php/Wapol",
       "Wapol": "https://wiki.gla.com.br index.php/Wapol",
       "Alvida": "https://wiki.gla.com.br/index.php/Alvida",
       "Alvida": "https://wiki.gla.com.br index.php/Alvida",
       "Buchi & Sham": "https://wiki.gla.com.br/index.php/Buchi",
       "Buchi & Sham": "https://wiki.gla.com.br index.php/Buchi",
       "Cabaji": "https://wiki.gla.com.br/index.php/Cabaji",
       "Cabaji": "https://wiki.gla.com.br index.php/Cabaji",
       "Chew": "https://wiki.gla.com.br/index.php/Chew",
       "Chew": "https://wiki.gla.com.br index.php/Chew",
       "Eric": "https://wiki.gla.com.br/index.php/Eric",
       "Eric": "https://wiki.gla.com.br index.php/Eric",
       "Gin": "https://wiki.gla.com.br/index.php/Gin",
       "Gin": "https://wiki.gla.com.br index.php/Gin",
       "Miss GoldenWeek": "https://wiki.gla.com.br/index.php/Goldenweek",
       "Miss GoldenWeek": "https://wiki.gla.com.br index.php/Goldenweek",
       "Hatchan": "https://wiki.gla.com.br/index.php/Hatchan",
       "Hatchan": "https://wiki.gla.com.br index.php/Hatchan",
       "Jango": "https://wiki.gla.com.br/index.php/Jango",
       "Jango": "https://wiki.gla.com.br index.php/Jango",
       "Kuroobi": "https://wiki.gla.com.br/index.php/Kuroobi",
       "Kuroobi": "https://wiki.gla.com.br index.php/Kuroobi",
       "Mohji": "https://wiki.gla.com.br/index.php/Mohji",
       "Mohji": "https://wiki.gla.com.br index.php/Mohji",
       "Morgan": "https://wiki.gla.com.br/index.php/Morgan",
       "Morgan": "https://wiki.gla.com.br index.php/Morgan",
       "Babe & Drophy": "https://wiki.gla.com.br index.php/Mr.4",
       "Babe & Drophy": "https://wiki.gla.com.br index.php/Mr.4",
       "Gem & Mikita": "https://wiki.gla.com.br index.php/Mr.5",
       "Gem & Mikita": "https://wiki.gla.com.br index.php/Mr.5",

Edição das 19h55min de 16 de julho de 2025

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

<head>

 <meta charset="UTF-8">
 <title>Teste GIF Hover</title>
 <style>
   body {
     margin: 0;
     font-family: sans-serif;
     color: white;
   }
   .search-bar {
     text-align: right;
     padding: 20px;
   }
   .search-bar input {
     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 {
     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;

}


.novos-container {

 padding: 20px;
 background: linear-gradient(to right, #e0f0ff, #ffffff);
 border-radius: 12px;
 margin: 20px auto;
 width: 95%;
 box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}

.novos-header {

 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 15px;
 border-bottom: 2px solid #58aaff;
 padding-bottom: 6px;

}

.novos-title {

 font-size: 20px;
 font-weight: bold;
 color: #006eff;

}

.new-gif {

 width: 32px;
 height: 32px;
 animation: pulse 1.5s infinite;

}

@keyframes pulse {

 0% { transform: scale(1); opacity: 1; }
 50% { transform: scale(1.2); opacity: 0.7; }
 100% { transform: scale(1); opacity: 1; }

}

.novos-grid {

 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 justify-content: center;

}

.estrela {

 font-size: 28px;
 line-height: 1;
 pointer-events: none;
 text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 0 #000, -1px -1px 0 #000;

} .estrela.azul { color: #14a3ee; } .estrela.dourada { color: #ffc107; } .estrela.prata { color: #c0c0c0; } .estrela.bronze { color: #cd7f32; }

.tier-btn {

 background: none;
 border: none;
 border-radius: 50%;
 padding: 6px 8px;
 cursor: pointer;
 transition: background 0.2s;
 font-size: 0;
 box-shadow: none;
 outline: none;

}

.tier-btn.ativo {

 background: #eaf2fb;
 outline: 2px solid #58aaff;

}

.filtro-grupo {

 display: flex;
 flex-direction: row;
 gap: 10px;
 justify-content: center;
 align-items: center;

}

 </style>

</head>

<body>


   <fieldset class="filtro-box classe-filtro-container">
     <legend>Classe</legend>
     <button class="btn-vertical tipo-btn ativo" data-tipo="all">ALL</button>
       <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>
   </fieldset>
   <fieldset class="filtro-box">
     <legend>Outros</legend>
       <button class="tipo-btn" data-tipo="parede" data-tooltip-text="Personagens que quebram parede">Parede</button>
       <button class="tipo-btn" data-tipo="ponte" data-tooltip-text="Personagens que fazem ponte">Ponte</button>
   </fieldset>
   <fieldset class="filtro-box">
     <legend>Tier</legend>
       <button class="tier-btn" data-tier="tier-diamante"></button>
       <button class="tier-btn" data-tier="tier-gold"></button>
       <button class="tier-btn" data-tier="tier-prata"></button>
       <button class="tier-btn" data-tier="tier-bronze"></button>
   </fieldset>
   Novos Personagens
   <img src="https://cdn-icons-png.flaticon.com/128/11135/11135991.png" alt="new" class="new-gif">
       Aokiji
       Bartholomew Kuma
       Boa Hancock
       Borsalino Kizaru
       Brook (TS)
       Chopper (TS)
       Donquixote Doflamingo
       Dracule Mihawk
       Emporio Ivankov
       Enel
       Franky (TS)
       Jinbe
       Marshall D. Teach
       Marco
       Monkey D. Luffy (TS)
       Nami (TS)
       Portgas D. Ace
       Nico Robin (TS)


       Roronoa Zoro (TS)
       Sabo


       Sakazuki (Akainu)
       Shanks
       Usopp (TS)
       Uta
       Sanji (TS)
       Baby 5
       Bartolomeo
       Basil Hawkins
       Bastille
       Bellamy
       Jewelry Bonney
       Kalifa
   Kaku
       Brook
   Blueno
       Capone Gang Bege
       Carrot
       Chopper
       Sir Crocodile
       Dalmatian
       Franky
       Gecko Moria
       Hina
       Jesus Burgess
   Jabra
       Eustass Kid
       Killer
       Koala
   Rob Lucci
       Leo & Mansherry
       Monkey D. Luffy
       Nami
       Perona
       Rebecca
       Robin
       Zoro
       Ryuma
       Scratchmen Apoo
       Smoker
       Trafalgar D. Water Law
       Urouge
       Usopp
       Van Augur
       Vinsmoke Ichiji
       Vinsmoke Niji
       Vinsmoke Reiju
       Vinsmoke Sanji
       Vinsmoke Yonji
       X Drake
       Satori
       Gedatsu
       Ohm
       Shura
       Arlong
       Bepo
       Bon Clay
       Buggy
       Daddy Masterson
       Daz Bonez
       Zala
       Don Krieg
       Kuro
       Galdino
       Tashigi
       Nefertari Vivi
       Wapol
       Alvida
       Buchi & Sham
       Cabaji
       Chew
       Eric
       Gin
       Miss GoldenWeek
       Hatchan
       Jango
       Kuroobi
       Mohji
       Morgan
       Babe & Drophy
       Gem & Mikita
       Pearl
 <script>
   // Mover personagens com classe "novo" para a área de novos

const novosGrid = document.getElementById('novos-grid'); document.querySelectorAll('.personagem-box.novo').forEach(novoCard => {

 novosGrid.appendChild(novoCard);

});

   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;
       // Só filtra se NÃO estiver na grid de novos personagens
       if (!tierBox.classList.contains('novos-grid')) {
         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)",
     "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], [data-tooltip-text]').forEach(btn => {

 const imgUrl = btn.getAttribute('data-tooltip-img');
 const tooltipText = btn.getAttribute('data-tooltip-text');
 let tooltip;
 if (imgUrl) {
   tooltip = document.createElement('img');
   tooltip.src = imgUrl;
   tooltip.classList.add('tooltip-img');
   btn.style.position = 'relative';
   btn.appendChild(tooltip);
 }
 if (tooltipText) {
   tooltip = document.createElement('div');
   tooltip.textContent = tooltipText;
   tooltip.classList.add('tooltip-img');
   tooltip.style.background = '#222';
   tooltip.style.color = '#fff';
   tooltip.style.padding = '6px 10px';
   tooltip.style.fontSize = '14px';
   tooltip.style.textAlign = 'center';
   tooltip.style.width = '180px';
   btn.style.position = 'relative';
   btn.appendChild(tooltip);
 }
 if (tooltip) {
   btn.addEventListener('mouseenter', () => {
     tooltip.style.display = 'block';
   });
   btn.addEventListener('mouseleave', () => {
     tooltip.style.display = 'none';
   });
 }

});


 </script>

</body>

</html>