Widget:VisnoTeste

De Wiki Gla
Revisão de 17h35min 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;
   }

   .personagem.luffypre {
     background-position: center;
   }

   /* --------- 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)

     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

<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",
   "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/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",
 };

 //  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=35899”