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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 99: Linha 99:
       background-position: center -50px;
       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 ----------- */
     /* --------- Tiers ----------- */
Linha 114: Linha 128:


     .tier-bronze .personagem {
     .tier-bronze .personagem {
       background-color: #cd7f32;
       background-color: #7e4f20;
     }
     }
   </style>
   </style>
Linha 638: Linha 652:
     <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>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
      <!-- satori -->
  <div class="tier-prata">
    <div class="personagem" data-static="https://i.postimg.cc/mkYZvRRx/satori.png" data-gif="">
      <span>Satori</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
 
      <!-- gedatsu -->
  <div class="tier-prata">
    <div class="personagem hancock" data-static="https://i.postimg.cc/pTv60t05/gedatsu.png" data-gif="">
      <span>Gedatsu</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
      <!-- ohm -->
  <div class="tier-prata">
    <div class="personagem hancock" data-static="https://i.postimg.cc/65q1bchc/ohm.png" data-gif="">
      <span>Ohm</span>
       <div class="gif-overlay"></div>
       <div class="gif-overlay"></div>
     </div>
     </div>
   </div>   
   </div>   
      <!-- shura -->
  <div class="tier-prata">
    <div class="personagem" data-static="https://i.postimg.cc/j25v9qy2/shura.png" data-gif="">
      <span>Shura</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
 
      <!-- arlong -->
  <div class="tier-prata">
    <div class="personagem" data-static="https://i.postimg.cc/j2LQcgrJ/arlong.png" data-gif="">
      <span>Arlong  </span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
      <!-- bepo -->
  <div class="tier-prata">
    <div class="personagem" data-static="https://i.postimg.cc/MKfmjFDC/bepo.png" data-gif="">
      <span>Bepo</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
  <!-- bon clay -->
  <div class="tier-prata">
    <div class="personagem" data-static="https://i.postimg.cc/bJ3jBpZF/BonClay.webp" data-gif="">
      <span>Bon Clay</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
  <!-- buggy -->
  <div class="tier-prata">
    <div class="personagem" data-static="https://i.postimg.cc/Vvmdg40W/buggy.png" data-gif="">
      <span>Buggy</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
  <!-- daddy -->
  <div class="tier-prata">
    <div class="personagem" data-static="https://i.postimg.cc/Vvmdg40W/buggy.png" data-gif="">
      <span>Daddy Materson</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
  <!-- daz -->
  <div class="tier-prata">
    <div class="personagem" data-static="https://i.postimg.cc/wjjymWDX/daz.png" data-gif="">
      <span>Daz Bones</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
 
  <!-- zala -->
  <div class="tier-prata">
    <div class="personagem" data-static="https://i.postimg.cc/PqZtpZVb/zala.png" data-gif="">
      <span>Zala</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
  <!-- krieg -->
  <div class="tier-prata">
    <div class="personagem" data-static="https://i.postimg.cc/8Cg2YYwW/krieg.png" data-gif="">
      <span>Don Krieg</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
  <!-- kuro -->
  <div class="tier-prata">
    <div class="personagem" data-static="https://i.postimg.cc/W47HH1dL/kuro.png" data-gif="">
      <span>Kuro</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
  <!-- galdino -->
  <div class="tier-prata">
    <div class="personagem" data-static="https://i.postimg.cc/VkZRr00N/galdino.png" data-gif="">
      <span>Galdino</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
 
  <!-- tashigi -->
  <div class="tier-prata">
    <div class="personagem kizaru" data-static="https://i.postimg.cc/rwH1F670/tashigi.png" data-gif="">
      <span>Tashigi</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
  <!-- nefitari vivi -->
  <div class="tier-prata">
    <div class="personagem" data-static="https://i.postimg.cc/jdFwyHcB/vivi.png" data-gif="">
      <span>Nefitari Vivi</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
    <!-- wapol -->
  <div class="tier-prata">
    <div class="personagem" data-static="https://i.postimg.cc/26k8syT4/wapol.png" data-gif="">
      <span>Wapol</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
  <!-- alvida -->
  <div class="tier-bronze">
    <div class="personagem" data-static="https://i.postimg.cc/yxGC7jXm/Alvida-Slime.webp" data-gif="">
      <span>Alvida</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
  <!-- buchi -->
  <div class="tier-bronze">
    <div class="personagem" data-static="https://i.postimg.cc/VLLZJ8ZD/Splashartbuchi.png" data-gif="">
      <span>Buchi & Sham</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
  <!-- cabaji -->
  <div class="tier-bronze">
    <div class="personagem cabaji" data-static="https://i.postimg.cc/G3MJSszx/cabaji.png" data-gif="">
      <span>Cabaji</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
  <!-- chew -->
  <div class="tier-bronze">
    <div class="personagem sanjipre" data-static="https://i.postimg.cc/NG1LKh29/chew.png" data-gif="">
      <span>Chew</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
 
  <!-- eric -->
  <div class="tier-bronze">
    <div class="personagem hancock" data-static="https://i.postimg.cc/rmGcwkZq/eric.png" data-gif="">
      <span>Eric</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
  <!-- gin -->
  <div class="tier-bronze">
    <div class="personagem gin" data-static="https://i.postimg.cc/pLB6rdRG/gin.png" data-gif="">
      <span>Gin</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
  <!-- golden week -->
  <div class="tier-bronze">
    <div class="personagem sanjipre" data-static="https://i.postimg.cc/8CMsMxX0/goldenweek.png" data-gif="">
      <span>Golden Week</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
  <!-- hatchan -->
  <div class="tier-bronze">
    <div class="personagem gin" data-static="https://i.postimg.cc/fy2bMskJ/hatchan.png" data-gif="">
      <span>Hatchan</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
 
  <!-- jango -->
  <div class="tier-bronze">
    <div class="personagem jango" data-static="https://i.postimg.cc/t40jW709/jango2.png" data-gif="">
      <span>Jango</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
 
  <!-- kuroobi -->
  <div class="tier-bronze">
    <div class="personagem sanjipre" data-static="https://i.postimg.cc/bvkHrCxz/kuroobi.png" data-gif="">
      <span>Kuroobi</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
  <!-- mohji -->
  <div class="tier-bronze">
    <div class="personagem sanjipre" data-static="https://i.postimg.cc/MTRWhRJ3/mohji.png" data-gif="">
      <span>Mohji</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
 
  <!-- morgan -->
  <div class="tier-bronze">
    <div class="personagem cabaji" data-static="https://i.postimg.cc/RVwPpLpJ/morgan.png" data-gif="">
      <span>Morgan</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
  <!-- babe & drophy -->
  <div class="tier-bronze">
    <div class="personagem hancock" data-static="https://i.postimg.cc/vmTtyrhz/babe.png" data-gif="">
      <span>Babe & Drophy</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
 
  <!-- gem & mikita -->
  <div class="tier-bronze">
    <div class="personagem hancock" data-static="https://i.postimg.cc/FsxyJWnp/gem.png" data-gif="">
      <span>Gem & Mikita</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
 
  <!-- pearl -->
  <div class="tier-bronze">
    <div class="personagem" data-static="https://i.postimg.cc/Y0HFvY6T/pearl.png" data-gif="">
      <span>Pearl</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
</div>
</div>


Linha 745: Linha 1 015:
     "Vinsmoke Yonji": "https://wiki.gla.com.br/index.php/Yonji",
     "Vinsmoke Yonji": "https://wiki.gla.com.br/index.php/Yonji",
     "Ichiji": "https://wiki.gla.com.br/index.php/Ichiji",
     "Ichiji": "https://wiki.gla.com.br/index.php/Ichiji",
    "Satori": "https://wiki.gla.com.br/index.php/Satori",
    "Gedatsu": "https://wiki.gla.com.br/index.php/Gedatsu",
    "Ohm": "https://wiki.gla.com.br/index.php/Ohm",
    "Shura": "https://wiki.gla.com.br/index.php/Shura",
    "Arlong": "https://wiki.gla.com.br/index.php/Arlong",
    "Bepo": "https://wiki.gla.com.br/index.php/Bepo",
    "Bon Clay": "https://wiki.gla.com.br/index.php/Mr.2",
    "Buggy": "https://wiki.gla.com.br/index.php/Buggy",
    "Daddy Materson": "https://wiki.gla.com.br/index.php/Daddy_Masterson",
    "Daz Bones": "https://wiki.gla.com.br/index.php/Mr.1",
    "Zala": "https://wiki.gla.com.br/index.php/Miss_Doublefinger",
    "Don Krieg": "https://wiki.gla.com.br/index.php/Don_Krieg",
    "Kuro": "https://wiki.gla.com.br/index.php/Kuro",
    "Mohji": "https://wiki.gla.com.br/index.php/Mohji",
    "Galdino": "https://wiki.gla.com.br/index.php/Mr.3",
    "Tashigi": "https://wiki.gla.com.br/index.php/Tashigi",
    "Nefitari Vivi": "https://wiki.gla.com.br/index.php/Vivi",
    "Wapol": "https://wiki.gla.com.br/index.php/Wapol",
    "Alvida": "https://wiki.gla.com.br/index.php/Alvida",
    "Buchi & Sham": "https://wiki.gla.com.br/index.php/Buchi",
    "Cabaji": "https://wiki.gla.com.br/index.php/Cabaji",
    "Chew": "https://wiki.gla.com.br/index.php/Chew",
    "Eric": "https://wiki.gla.com.br/index.php/Eric",
    "Gin": "https://wiki.gla.com.br/index.php/Gin",
    "Golden Week": "https://wiki.gla.com.br/index.php/Goldenweek",
    "Hatchan": "https://wiki.gla.com.br/index.php/Hatchan",
    "Jango": "https://wiki.gla.com.br/index.php/Jango",
    "Kuroobi": "https://wiki.gla.com.br/index.php/Kuroobi",
    "Morgan": "https://wiki.gla.com.br/index.php/Morgan",
    "Babe & Drophy": "https://wiki.gla.com.br/index.php/Mr.4",
    "Gem & Mikita": "https://wiki.gla.com.br/index.php/Mr.5",
    "Pearl": "https://wiki.gla.com.br/index.php/Pearl"
   };
   };



Edição das 21h01min de 16 de junho 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;
     transition: opacity 0.4s ease;
     z-index: 1;
     pointer-events: none;
   }
   .personagem:hover {
     transform: scale(1.05);
   }
   .personagem:hover .gif-overlay {
     opacity: 1;
   }
   .personagem.luffy .gif-overlay {
     background-position: center 0px;
   }
   .personagem.hancock {
     background-size: 115%;
   }
   .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;
   }
 </style>

</head> <body>

     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
     Brook
     Capone Gang Bege
     Carrot
     Chopper
     Sir Crocodile
     Dalmatian
     Franky
     Gecko Moria
     Hina
     Jesus Burgess
     Eustass Kid
     Killer
     Koala
     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 Materson
     Daz Bones
     Zala
     Don Krieg
     Kuro
     Galdino
     Tashigi
     Nefitari Vivi
     Wapol
     Alvida
     Buchi & Sham
     Cabaji
     Chew
     Eric
     Gin
     Golden Week
     Hatchan
     Jango
     Kuroobi
     Mohji
     Morgan
     Babe & Drophy
     Gem & Mikita
     Pearl

<script>

 const cards = document.querySelectorAll('.personagem');
 // Define as imagens estáticas e gifs, além do reset ao sair
 cards.forEach(card => {
   const staticImg = card.getAttribute('data-static');
   const gifImg = card.getAttribute('data-gif');
   const overlay = card.querySelector('.gif-overlay');
   card.style.backgroundImage = `url('${staticImg}')`;
   card.addEventListener('mouseenter', () => {
     const uniqueGifUrl = `${gifImg}?t=${new Date().getTime()}`; // Força reset
     overlay.style.backgroundImage = `url('${uniqueGifUrl}')`;
   });
   card.addEventListener('mouseleave', () => {
     overlay.style.backgroundImage = ;
   });
 });
 // Filtragem por nome no campo de busca

document.getElementById('search').addEventListener('input', function () {

 const term = this.value.toLowerCase();
 cards.forEach(card => {
   const name = card.querySelector('span').textContent.toLowerCase();
   const wrapper = card.parentElement;
   const tierBox = wrapper.parentElement;
   tierBox.style.display = name.includes(term) ? 'block' : 'none';
 });

});


 //  Links dos personagens
 const personagemLinks = {
   "Aokiji": "https://wiki.gla.com.br/index.php/Aokiji",
   "Bartholomew Kuma": "https://wiki.gla.com.br/index.php/Kuma",
   "Boa Hancock": "https://wiki.gla.com.br/index.php/Boa_Hancock",
   "Borsalino Kizaru": "https://wiki.gla.com.br/index.php/Kizaru",
   "Brook (TS)": "https://wiki.gla.com.br/index.php/Brook_(Timeskip)",
   "Chopper (TS)": "https://wiki.gla.com.br/index.php/Chopper_(Timeskip)",
   "Donquixote Doflamingo": "https://wiki.gla.com.br/index.php/Doflamingo",
   "Dracule Mihawk": "https://wiki.gla.com.br/index.php/Mihawk",
   "Emporio Ivankov": "https://wiki.gla.com.br/index.php/Ivankov",
   "Enel": "https://wiki.gla.com.br/index.php/Enel",
   "Franky (TS)": "https://wiki.gla.com.br/index.php/Franky_(Timeskip)",
   "Jinbe": "https://wiki.gla.com.br/index.php/Jinbe",
   "Marshall D. Teach": "https://wiki.gla.com.br/index.php/Marshall_D._Teach",
   "Marco": "https://wiki.gla.com.br/index.php/Marco",
   "Monkey D. Luffy (TS)": "https://wiki.gla.com.br/index.php/Luffy_(Timeskip)",
   "Nami (TS)": "https://wiki.gla.com.br/index.php/Nami_(Timeskip)",
   "Portgas D. Ace": "https://wiki.gla.com.br/index.php/Ace",
   "Nico Robin (TS)": "https://wiki.gla.com.br/index.php/Robin_(Timeskip)",
   "Roronoa Zoro (TS)": "https://wiki.gla.com.br/index.php/Zoro_(Timeskip)",
   "Sabo": "https://wiki.gla.com.br/index.php/Sabo",
   "Sakazuki (Akainu)": "https://wiki.gla.com.br/index.php/Akainu",
   "Shanks": "https://wiki.gla.com.br/index.php/Shanks",
   "Usopp (TS)": "https://wiki.gla.com.br/index.php/Usopp_(Timeskip)",
   "Uta": "https://wiki.gla.com.br/index.php/Uta",
   "Sanji (TS)": "https://wiki.gla.com.br/index.php/Sanji_(Timeskip)",
   "Capone Gang Bege": "https://wiki.gla.com.br/index.php/Capone_Bege",
   "Bon Clay": "https://wiki.gla.com.br/index.php/Mr.2",
   "Alvida (Slime)": "https://wiki.gla.com.br/index.php/Alvida",
   "Baby 5": "https://wiki.gla.com.br/index.php/Baby_5",
   "Bartolomeo": "https://wiki.gla.com.br/index.php/Bartolomeo",
   "Basil Hawkins": "https://wiki.gla.com.br/index.php/Basil_Hawkins",
   "Bastille": "https://wiki.gla.com.br/index.php/Bastille",
   "Bellamy": "https://wiki.gla.com.br/index.php/Bellamy",
   "Jewelry Bonney": "https://wiki.gla.com.br/index.php/Bonney",
   "Brook": "https://wiki.gla.com.br/index.php/Brook",
   "Carrot": "https://wiki.gla.com.br/index.php/Carrot",
   "Chopper": "https://wiki.gla.com.br/index.php/Chopper",
   "Sir Crocodile": "https://wiki.gla.com.br/index.php/Crocodile",
   "Dalmatian": "https://wiki.gla.com.br/index.php/Dalmatian",
   "Franky": "https://wiki.gla.com.br/index.php/Franky",
   "Gecko Moria": "https://wiki.gla.com.br/index.php/Gecko_Moria",
   "Hina": "https://wiki.gla.com.br/index.php/Hina",
   "Jesus Burgess": "https://wiki.gla.com.br/index.php/Jesus_Burgess",
   "Eustass Kid": "https://wiki.gla.com.br/index.php/Kid",
   "Killer": "https://wiki.gla.com.br/index.php/Killer",
   "Koala": "https://wiki.gla.com.br/index.php/Koala",
   "Leo & Mansherry": "https://wiki.gla.com.br/index.php/Leo",
   "Monkey D. Luffy": "https://wiki.gla.com.br/index.php/Luffy",
   "Nami": "https://wiki.gla.com.br/index.php/Nami",
   "Perona": "https://wiki.gla.com.br/index.php/Perona",
   "Rebecca": "https://wiki.gla.com.br/index.php/Rebecca",
   "Robin": "https://wiki.gla.com.br/index.php/Robin",
   "Zoro": "https://wiki.gla.com.br/index.php/Zoro",
   "Ryuma": "https://wiki.gla.com.br/index.php/Ryuma",
   "Scratchmen Apoo": "https://wiki.gla.com.br/index.php/Apoo",
   "Smoker": "https://wiki.gla.com.br/index.php/Smoker",
   "Trafalgar D. Water Law": "https://wiki.gla.com.br/index.php/Law",
   "Urouge": "https://wiki.gla.com.br/index.php/Urouge",
   "X Drake": "https://wiki.gla.com.br/index.php/X_Drake",
   "Usopp": "https://wiki.gla.com.br/index.php/Usopp",
   "Van Augur": "https://wiki.gla.com.br/index.php/Van_Augur",
   "Vinsmoke Ichiji": "https://wiki.gla.com.br/index.php/Ichiji",
   "Vinsmoke Niji": "https://wiki.gla.com.br/index.php/Niji",
   "Vinsmoke Reiju": "https://wiki.gla.com.br/index.php/Reiju",
   "Vinsmoke Sanji": "https://wiki.gla.com.br/index.php/Sanji",
   "Vinsmoke Yonji": "https://wiki.gla.com.br/index.php/Yonji",
   "Ichiji": "https://wiki.gla.com.br/index.php/Ichiji",
   "Satori": "https://wiki.gla.com.br/index.php/Satori",
   "Gedatsu": "https://wiki.gla.com.br/index.php/Gedatsu",
   "Ohm": "https://wiki.gla.com.br/index.php/Ohm",
   "Shura": "https://wiki.gla.com.br/index.php/Shura",
   "Arlong": "https://wiki.gla.com.br/index.php/Arlong",
   "Bepo": "https://wiki.gla.com.br/index.php/Bepo",
   "Bon Clay": "https://wiki.gla.com.br/index.php/Mr.2",
   "Buggy": "https://wiki.gla.com.br/index.php/Buggy",
   "Daddy Materson": "https://wiki.gla.com.br/index.php/Daddy_Masterson",
   "Daz Bones": "https://wiki.gla.com.br/index.php/Mr.1",
   "Zala": "https://wiki.gla.com.br/index.php/Miss_Doublefinger",
   "Don Krieg": "https://wiki.gla.com.br/index.php/Don_Krieg",
   "Kuro": "https://wiki.gla.com.br/index.php/Kuro",
   "Mohji": "https://wiki.gla.com.br/index.php/Mohji",
   "Galdino": "https://wiki.gla.com.br/index.php/Mr.3",
   "Tashigi": "https://wiki.gla.com.br/index.php/Tashigi",
   "Nefitari Vivi": "https://wiki.gla.com.br/index.php/Vivi",
   "Wapol": "https://wiki.gla.com.br/index.php/Wapol",
   "Alvida": "https://wiki.gla.com.br/index.php/Alvida",
   "Buchi & Sham": "https://wiki.gla.com.br/index.php/Buchi",
   "Cabaji": "https://wiki.gla.com.br/index.php/Cabaji",
   "Chew": "https://wiki.gla.com.br/index.php/Chew",
   "Eric": "https://wiki.gla.com.br/index.php/Eric",
   "Gin": "https://wiki.gla.com.br/index.php/Gin",
   "Golden Week": "https://wiki.gla.com.br/index.php/Goldenweek",
   "Hatchan": "https://wiki.gla.com.br/index.php/Hatchan",
   "Jango": "https://wiki.gla.com.br/index.php/Jango",
   "Kuroobi": "https://wiki.gla.com.br/index.php/Kuroobi",
   "Morgan": "https://wiki.gla.com.br/index.php/Morgan",
   "Babe & Drophy": "https://wiki.gla.com.br/index.php/Mr.4",
   "Gem & Mikita": "https://wiki.gla.com.br/index.php/Mr.5",
   "Pearl": "https://wiki.gla.com.br/index.php/Pearl"
 };
 // Envolve as boxes com <a> e aplica links clicáveis
 cards.forEach(card => {
   const span = card.querySelector('span');
   const nomePersonagem = span?.textContent.trim();
   const link = personagemLinks[nomePersonagem];
   if (link) {
     const wrapper = document.createElement('a');
     wrapper.href = link;
     wrapper.target = "_blank";
     wrapper.style.display = "flex";
     wrapper.style.textDecoration = "none";
     wrapper.style.flex = "0 1 auto";
     wrapper.style.alignItems = "stretch";
     card.parentElement.replaceChild(wrapper, card);
     wrapper.appendChild(card);
   }
 });

</script>


</body> </html>