Widget:VisnoTeste

De Wiki Gla
Revisão de 07h33min 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

     Monkey D. Luffy (TS)

     Capone Gang Bege

     Bon Clay

     Alvida

     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",
   "Monkey D. Luffy (TS)": "https://wiki.gla.com.br/index.php/Luffy_(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": "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=35887”