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

Edição das 16h30min de 19 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;
     z-index: 1;
     pointer-events: none;
   }

   .personagem:hover .gif-overlay {
     opacity: 1;
   }

   .personagem.luffy .gif-overlay {
     background-position: center 0px;
   }

   .personagem.hancock {
     background-size: 115%;
   }

   .personagem.daddy {
     background-size: 100%;
     background-position: top;
   }

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

   .filtros {
     flex-wrap: wrap;
     align-items: flex-start;
     padding: 10px 20px;
     display: flex;
     gap: 20px;
     justify-content: space-between;
     margin-bottom: 20px;
   }

   .filtros button {
     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;
   }

   .filtro-grupo {
     /*display: flex;
     flex-wrap: wrap;
     gap: 6px;*/
     display: grid;
     grid-template-columns: repeat(2, auto);
     gap: 6px 10px;
   }

   .filtro-box {
     background: #5a5a5a13;
     padding: 10px;
     border-radius: 8px;
   }

   .filtro-box legend {
     font-size: 16px;
     font-weight: bold;
     color: #000000cc;
     margin-bottom: 6px;
     text-align: center;
   }

   .filtros button:hover {
     background-color: #3388dd;
   }

   .filtros button.ativo {
     background-color: #3588f5;
     color: white;
     border-color: #2672d4;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
     transform: scale(1.05);
   }

   .classe-icon-wrapper {
     position: absolute;
     top: 5px;
     left: 5px;
     display: flex;
     flex-direction: column;
     gap: 1px;
     z-index: 10;
     pointer-events: none;
     transition: transform 0.4s ease;
   }

   .classe-icon {
     width: 28px;
     height: 28px;
     user-select: none;
     pointer-events: none;
     opacity: 1;
     transition: opacity 0.3s ease-in-out;
   }

   .personagem-box {
     position: relative;
     transition: transform 0.4s ease;
     transform-origin: center center;
   }

   .personagem-box:hover {
     transform: scale(1.05);
   }

   .personagem-box:hover .classe-icon {
     opacity: 0.8;
   }

   .classe-filtro-container {
     display: flex;
     align-items: center;
     gap: 12px;
   }

   .btn-vertical {
     writing-mode: vertical-rl;
     rotate: 270deg;
   }

   .classe-grid {
     display: grid;
     grid-template-columns: repeat(5, auto);
     gap: 6px 10px;
   }
 </style>

</head>

<body>

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

   <fieldset class="filtro-box classe-filtro-container">
     <legend>Classe</legend>
     <button class="btn-vertical tipo-btn ativo" data-tipo="all">ALL</button>

       <button class="tipo-btn" data-tipo="lutador">Lutador</button>
       <button class="tipo-btn" data-tipo="atirador">Atirador</button>
       <button class="tipo-btn" data-tipo="cortante">Cortante</button>
       <button class="tipo-btn" data-tipo="especialista">Especialista</button>
       <button class="tipo-btn" data-tipo="tanque">Tanque</button>
       <button class="tipo-btn" data-tipo="dps">DPS</button>
       <button class="tipo-btn" data-tipo="suporte">Suporte</button>
       <button class="tipo-btn" data-tipo="bruiser">Bruiser</button>
       <button class="tipo-btn" data-tipo="parede">Parede</button>
       <button class="tipo-btn" data-tipo="ponte">Ponte</button>

   </fieldset>

   <fieldset class="filtro-box">
     <legend>Tier</legend>

       <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>

   </fieldset>

       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 Masterson

       Daz Bonez

       Zala

       Don Krieg

       Kuro

       Galdino

       Tashigi

       Nefertari Vivi

       Wapol

       Alvida

       Buchi & Sham

       Cabaji

       Chew

       Eric

Gin

       Miss GoldenWeek

       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)",
     "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/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",
     "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",
     "X Drake": "https://wiki.gla.com.br/index.php/X_Drake",
     "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 Masterson": "https://wiki.gla.com.br/index.php/Daddy_Masterson",
     "Daz Bonez": "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",
     "Galdino": "https://wiki.gla.com.br/index.php/Mr.3",
     "Tashigi": "https://wiki.gla.com.br/index.php/Tashigi",
     "Nefertari 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",
     "Miss GoldenWeek": "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",
     "Mohji": "https://wiki.gla.com.br/index.php/Mohji",
     "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);
     }
   });

   const tierButtons = document.querySelectorAll('.tier-btn');
   const tipoButtons = document.querySelectorAll('.tipo-btn');
   const personagemBoxes = document.querySelectorAll('.personagem-box');

   let activeTier = 'all';
   let activeTipos = new Set();

   const iconesClasse = {
     lutador: 'https://wiki.gla.com.br/images/e/e6/Fighter.png',
     especialista: 'https://wiki.gla.com.br/images/f/f6/Especialist.png',
     tanque: 'https://wiki.gla.com.br/images/9/9d/Tank.png',
     suporte: 'https://wiki.gla.com.br/images/a/ab/Support.png',
     bruiser: 'https://wiki.gla.com.br/images/e/e4/Bruiser.png',
     atirador: 'https://wiki.gla.com.br/images/e/ed/Shooter.png',
     dps: 'https://wiki.gla.com.br/images/6/60/Dps.png',
     cortante: 'https://wiki.gla.com.br/images/9/9a/Slasher.png',
     fruta: 'https://wiki.gla.com.br/images/e/e4/Devil-fruit.png',
   };

function updateFiltros() {

 personagemBoxes.forEach(box => {
   const matchesTier = activeTier === 'all' || box.classList.contains(activeTier);
   const matchesTipo =
     activeTipos.size === 0 ||
     [...activeTipos].every(tipo => box.classList.contains(tipo));

   box.style.display = (matchesTier && matchesTipo) ? 'block' : 'none';
 });

}

tierButtons.forEach(button => {

 button.addEventListener('click', () => {
   const selectedTier = button.dataset.tier;
   if (selectedTier === activeTier || selectedTier === 'all') {
     activeTier = 'all';
     tierButtons.forEach(btn => btn.classList.remove('ativo'));
   } else {
     activeTier = selectedTier;
     tierButtons.forEach(btn => btn.classList.remove('ativo'));
     button.classList.add('ativo');
   }
   updateFiltros();
 });

});

tipoButtons.forEach(button => {

 button.addEventListener('click', () => {
   const selectedTipo = button.dataset.tipo;
   console.log(selectedTipo)
   if (selectedTipo === 'all') {
     activeTipos.clear();
     tipoButtons.forEach(btn => {if (btn.dataset.tipo === 'all') {btn.classList.add('ativo');} else {btn.classList.remove('ativo');}});
   } else {
     if (activeTipos.has(selectedTipo)) {
       activeTipos.delete(selectedTipo);
       button.classList.remove('ativo');
     } else {
       activeTipos.add(selectedTipo);
       button.classList.add('ativo');
     }
     tipoButtons.forEach(btn => {
       if (btn.dataset.tipo === 'all') btn.classList.remove('ativo');
     });
     if (activeTipos.size === 0) {
       tipoButtons.forEach(btn => {if (btn.dataset.tipo === 'all') {btn.classList.add('ativo');}});
     }
   }
   updateFiltros();
 });

});

   document.querySelectorAll('.personagem-box').forEach(box => {
     const classes = box.className.split(/\s+/);
     const icones = classes
       .filter(classe => iconesClasse.hasOwnProperty(classe))
       .map(classe => {
         const img = document.createElement('img');
         img.src = iconesClasse[classe];
         img.alt = classe;
         img.className = 'classe-icon';
         return img;
       });

     if (icones.length > 0) {
       const wrapper = document.createElement('div');
       wrapper.className = 'classe-icon-wrapper';
       icones.forEach(icon => wrapper.appendChild(icon));
       box.appendChild(wrapper);
     }
   });

 </script>

</body>

</html>

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

Edição das 16h30min de 19 de junho de 2025

Menu de navegação

Pesquisa