Mudanças entre as edições de "Widget:VisnoTeste"
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=" | </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 --> | ||
<fieldset class="filtro-box"> | |||
<fieldset class="filtro-box"> | <legend>Tier</legend> | ||
<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-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-bronze"><span class="estrela bronze" title="Bronze">★</span></button> | |||
</div> | |||
</fieldset> | |||
</div> | </div> | ||
<div class="novos-container"> | <div class="novos-container"> | ||
| Linha 390: | Linha 399: | ||
<!-- aokiji --> | <!-- aokiji --> | ||
<div class="personagem-box tier-diamante cortante especialista tanque | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | "Bon Clay": "https://wiki.gla.com.br index.php/Mr.2", | ||
"Buggy": "https://wiki.gla.com.br | "Buggy": "https://wiki.gla.com.br index.php/Buggy", | ||
"Daddy Masterson": "https://wiki.gla.com.br | "Daddy Masterson": "https://wiki.gla.com.br index.php/Daddy_Masterson", | ||
"Daz Bonez": "https://wiki.gla.com.br | "Daz Bonez": "https://wiki.gla.com.br index.php/Mr.1", | ||
"Zala": "https://wiki.gla.com.br | "Zala": "https://wiki.gla.com.br index.php/Miss_Doublefinger", | ||
"Don Krieg": "https://wiki.gla.com.br | "Don Krieg": "https://wiki.gla.com.br index.php/Don_Krieg", | ||
"Kuro": "https://wiki.gla.com.br | "Kuro": "https://wiki.gla.com.br index.php/Kuro", | ||
"Galdino": "https://wiki.gla.com.br | "Galdino": "https://wiki.gla.com.br index.php/Mr.3", | ||
"Tashigi": "https://wiki.gla.com.br | "Tashigi": "https://wiki.gla.com.br index.php/Tashigi", | ||
"Nefertari Vivi": "https://wiki.gla.com.br | "Nefertari Vivi": "https://wiki.gla.com.br index.php/Vivi", | ||
"Wapol": "https://wiki.gla.com.br | "Wapol": "https://wiki.gla.com.br index.php/Wapol", | ||
"Alvida": "https://wiki.gla.com.br | "Alvida": "https://wiki.gla.com.br index.php/Alvida", | ||
"Buchi & Sham": "https://wiki.gla.com.br | "Buchi & Sham": "https://wiki.gla.com.br index.php/Buchi", | ||
"Cabaji": "https://wiki.gla.com.br | "Cabaji": "https://wiki.gla.com.br index.php/Cabaji", | ||
"Chew": "https://wiki.gla.com.br | "Chew": "https://wiki.gla.com.br index.php/Chew", | ||
"Eric": "https://wiki.gla.com.br | "Eric": "https://wiki.gla.com.br index.php/Eric", | ||
"Gin": "https://wiki.gla.com.br | "Gin": "https://wiki.gla.com.br index.php/Gin", | ||
"Miss GoldenWeek": "https://wiki.gla.com.br | "Miss GoldenWeek": "https://wiki.gla.com.br index.php/Goldenweek", | ||
"Hatchan": "https://wiki.gla.com.br | "Hatchan": "https://wiki.gla.com.br index.php/Hatchan", | ||
"Jango": "https://wiki.gla.com.br | "Jango": "https://wiki.gla.com.br index.php/Jango", | ||
"Kuroobi": "https://wiki.gla.com.br | "Kuroobi": "https://wiki.gla.com.br index.php/Kuroobi", | ||
"Mohji": "https://wiki.gla.com.br | "Mohji": "https://wiki.gla.com.br index.php/Mohji", | ||
"Morgan": "https://wiki.gla.com.br | "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>