Widget:VisnoTeste

De Wiki Gla
Revisão de 08h30min de 16 de junho de 2025 por Visno (discussão | contribs)
Ir para navegação Ir para pesquisar

<!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;
   }

   /* --------- Tiers ----------- */
   .tier-diamante .personagem {
     background-color: #414c5c;
   }

   .tier-gold .personagem {
     background-color: #d4af37;
   }

   .tier-prata .personagem {
     background-color: #c0c0c0;
   }

   .tier-bronze .personagem {
     background-color: #cd7f32;
   }
 </style>

</head> <body> 

 <input type="text" id="search" placeholder="Pesquisar personagem...">

     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)



     Capone Gang Bege

     Bon Clay

     Alvida (Slime)

     Baby 5

<script> 

 const cards = document.querySelectorAll('.personagem');

 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()}`;
     overlay.style.backgroundImage = `url('${uniqueGifUrl}')`;
   });

   card.addEventListener('mouseleave', () => {
     overlay.style.backgroundImage = ;
   });
 });

 document.getElementById('search').addEventListener('input', function () {
   const term = this.value.toLowerCase();
   cards.forEach(card => {
     const name = card.querySelector('span').textContent.toLowerCase();
     card.parentElement.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"
 };

 //  Envolve as boxes com <a>
 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 = "block";
     wrapper.style.textDecoration = "none";
     card.parentElement.replaceChild(wrapper, card);
     wrapper.appendChild(card);
   }
 });

</script>

</body> </html>

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