Widget:VisnoTeste

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

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

   .tier-btn {
 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;

}

.tier-btn:hover { 

 background-color: #307ac2;

} 

 </style>

</head> <body> 

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



   <button class="tier-btn" data-tier="all">Todos</button>
   <button class="tier-btn" data-tier="tier-diamante">💎 Diamante</button>
   <button class="tier-btn" data-tier="tier-gold">⭐ Ouro</button>
   <button class="tier-btn" data-tier="tier-prata">🥈 Prata</button>
   <button class="tier-btn" data-tier="tier-bronze">🥉 Bronze</button>

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

// Filtro por tier com clique nos botões const tierButtons = document.querySelectorAll('.tier-btn'); const tierBoxes = document.querySelectorAll('.tier-diamante, .tier-gold, .tier-prata, .tier-bronze');

let activeTier = 'all';

tierButtons.forEach(button => { 

 button.addEventListener('click', () => {
   const selectedTier = button.dataset.tier;

   // Toggle: se clicar no mesmo botão, volta ao normal
   if (selectedTier === activeTier || selectedTier === 'all') {
     tierBoxes.forEach(box => box.style.display = 'block');
     activeTier = 'all';
   } else {
     tierBoxes.forEach(box => {
       if (box.classList.contains(selectedTier)) {
         box.style.display = 'block';
       } else {
         box.style.display = 'none';
       }
     });
     activeTier = selectedTier;
   }
 });

});

</script>


</body> </html>

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