Widget:VisnoTeste

De Wiki Gla
Revisão de 18h58min de 11 de setembro 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: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     max-width: 1200px;
     margin: 0 auto;
     gap: 14px;
     padding-bottom: 40px;
   }

   @media (max-width: 1200px) {
     .container {
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       max-width: 100vw;
       padding-left: 10px;
       padding-right: 10px;
     }
   }

   @media (max-width: 700px) {
     .container {
       grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
       gap: 10px;
     }
   }

   .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;
     font-size: 1.10rem;
     font-weight: bold;
     padding: 2px 8px;
     border-radius: 6px;
     background: linear-gradient(90deg, #000000cc 60%, #22222288 100%);
     color: #fff;
     text-shadow:
       0 0 6px #000,
       0 2px 8px #000,
       2px 2px 0 #000,
       -2px -2px 0 #000;
     box-shadow: 0 2px 8px #0008;
   }

   .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(4, auto);
     gap: 6px 10px;
   }

   .tooltip-img {
     position: absolute;
     top: -110px;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: auto;
     display: none;
     pointer-events: none;
     border-radius: 6px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     z-index: 99;
   }



   .novos-container {
     padding: 20px;
     background: linear-gradient(to right, #e0f0ff, #ffffff);
     border-radius: 12px;
     margin: 20px auto;
     width: 95%;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     border: 2px solid #58aaff;
   }

   .novos-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 15px;
     border-bottom: 2px solid #58aaff;
     padding-bottom: 6px;
   }

   .novos-title {
     font-size: 20px;
     font-weight: bold;
     color: #006eff;
   }

   .new-gif {
     width: 32px;
     height: 32px;
     animation: pulse 1.5s infinite;
   }

   @keyframes pulse {
     0% {
       transform: scale(1);
       opacity: 1;
     }

     50% {
       transform: scale(1.2);
       opacity: 0.7;
     }

     100% {
       transform: scale(1);
       opacity: 1;
     }
   }

   .novos-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
   }

   .estrela {
     font-size: 28px;
     line-height: 1;
     pointer-events: none;
     text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 0 #000, -1px -1px 0 #000;
   }

   .estrela.azul {
     color: #14a3ee;
   }

   .estrela.dourada {
     color: #ffc107;
   }

   .estrela.prata {
     color: #c0c0c0;
   }

   .estrela.bronze {
     color: #cd7f32;
   }

   .tier-btn {
     background: none;
     border: none;
     border-radius: 50%;
     padding: 6px 8px;
     cursor: pointer;
     transition: background 0.2s;
     font-size: 0;
     box-shadow: none;
     outline: none;
   }

   .tier-btn.ativo {
     background: #eaf2fb;
     outline: 2px solid #58aaff;
   }

   .filtro-grupo {
     display: flex;
     flex-direction: row;
     gap: 10px;
     justify-content: center;
     align-items: center;
   }

   .tipo-btn[data-tipo="parede"],
   .tipo-btn[data-tipo="ponte"] {
     margin-left: 16px;
   }
 </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>

   </fieldset>

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

       <button class="tipo-btn" data-tipo="parede" data-tooltip-text="Personagens que quebram parede">
         <img src="https://wiki.gla.com.br/images/2/21/Wall-break.png" alt="parede" width="32" height="32">
       </button>
       <button class="tipo-btn" data-tipo="ponte" data-tooltip-text="Personagens que fazem ponte">
         <img src="https://wiki.gla.com.br/images/8/80/Bridge.png" alt="ponte" width="32" height="32">
       </button>

   </fieldset>

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

       <button class="tier-btn" data-tier="tier-diamante">★</button>
       <button class="tier-btn" data-tier="tier-gold">★</button>
       <button class="tier-btn" data-tier="tier-prata">★</button>
       <button class="tier-btn" data-tier="tier-bronze">★</button>

   </fieldset>

     Novos Personagens
     <img src="https://cdn-icons-png.flaticon.com/128/11135/11135991.png" alt="new" class="new-gif">

       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

       Kalifa

       Kaku

       Brook

       Blueno

       Capone Gang Bege

       Carrot

       Chopper

       Sir Crocodile

       Dalmatian

       Franky

       Gecko Moria

       Hina

       Jesus Burgess

       Jabra

       Eustass Kid

       Killer

       Koala

       Rob Lucci

       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>
   // Mover personagens com classe "novo" para a área de novos
   const novosGrid = document.getElementById('novos-grid');
   document.querySelectorAll('.personagem-box.novo').forEach(novoCard => {
     novosGrid.appendChild(novoCard);
   });

   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;
       // Só filtra se NÃO estiver na grid de novos personagens
       if (!tierBox.classList.contains('novos-grid')) {
         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);
     }
   });

   document.querySelectorAll('[data-tooltip-img], [data-tooltip-text]').forEach(btn => {
     const imgUrl = btn.getAttribute('data-tooltip-img');
     const tooltipText = btn.getAttribute('data-tooltip-text');

     let tooltip;
     if (imgUrl) {
       tooltip = document.createElement('img');
       tooltip.src = imgUrl;
       tooltip.classList.add('tooltip-img');
       btn.style.position = 'relative';
       btn.appendChild(tooltip);
     }
     if (tooltipText) {
       tooltip = document.createElement('div');
       tooltip.textContent = tooltipText;
       tooltip.classList.add('tooltip-img');
       tooltip.style.background = '#222';
       tooltip.style.color = '#fff';
       tooltip.style.padding = '6px 10px';
       tooltip.style.fontSize = '14px';
       tooltip.style.textAlign = 'center';
       tooltip.style.width = '180px';
       btn.style.position = 'relative';
       btn.appendChild(tooltip);
     }

     if (tooltip) {
       btn.addEventListener('mouseenter', () => {
         tooltip.style.display = 'block';
       });
       btn.addEventListener('mouseleave', () => {
         tooltip.style.display = 'none';
       });
     }
   });

   if (novosGrid.children.length === 0) {
     document.querySelector('.novos-container').style.display = 'none';
   }
 </script>

</body>

</html>

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