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

Edição das 19h26min de 16 de julho 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;
   }

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

}

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

}

 </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" data-tooltip-img="https://wiki.gla.com.br/images/e/e6/Fighter.png">Lutador</button>
       <button class="tipo-btn" data-tipo="atirador" data-tooltip-img="https://wiki.gla.com.br/images/e/ed/Shooter.png">Atirador</button>
       <button class="tipo-btn" data-tipo="cortante" data-tooltip-img="https://wiki.gla.com.br/images/9/9a/Slasher.png">Cortante</button>
       <button class="tipo-btn" data-tipo="especialista" data-tooltip-img="https://wiki.gla.com.br/images/f/f6/Especialist.png">Especialista</button>
       <button class="tipo-btn" data-tipo="tanque" data-tooltip-img="https://wiki.gla.com.br/images/9/9d/Tank.png">Tanque</button>
       <button class="tipo-btn" data-tipo="dps" data-tooltip-img="https://wiki.gla.com.br/images/6/60/Dps.png">DPS</button>
       <button class="tipo-btn" data-tipo="suporte" data-tooltip-img="https://wiki.gla.com.br/images/a/ab/Support.png">Suporte</button>
       <button class="tipo-btn" data-tipo="bruiser" data-tooltip-img="https://wiki.gla.com.br/images/e/e4/Bruiser.png">Bruiser</button>
       <button class="tipo-btn" data-tipo="outros" data-tooltip-text="Personagens que quebram parede e personagens que fazem ponte">Outros</button>

   </fieldset>

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

});

 </script>

</body>

</html>

@@ Linha 303: / Linha 303: @@
    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: #1b3cf7; }
+.estrela.azul { color: #14a3ee; }
 .estrela.dourada { color: #ffc107; }
 .estrela.prata { color: #c0c0c0; }
@@ Linha 359: / Linha 360: @@
          <button class="tipo-btn" data-tipo="suporte" data-tooltip-img="https://wiki.gla.com.br/images/a/ab/Support.png">Suporte</button>
          <button class="tipo-btn" data-tipo="bruiser" data-tooltip-img="https://wiki.gla.com.br/images/e/e4/Bruiser.png">Bruiser</button>
-         <button class="tipo-btn" data-tipo="parede">Parede</button>
+         <button class="tipo-btn" data-tipo="outros" data-tooltip-text="Personagens que quebram parede e personagens que fazem ponte">Outros</button>
-        <button class="tipo-btn" data-tipo="ponte">Ponte</button>
        </div>
      </fieldset>
@@ Linha 378: / Linha 378: @@
    <div class="novos-container">
    <div class="novos-header">
-     <span class="novos-title">🆕 Novos Personagens</span>
+     <span class="novos-title">Novos Personagens</span>
-     <img src="https://cdn-icons-png.flaticon.com/512/743/743007.png" alt="new" class="new-gif">
+     <img src="https://cdn-icons-png.flaticon.com/128/11135/11135991.png" alt="new" class="new-gif">
    </div>
    <div class="novos-grid" id="novos-grid">
@@ Linha 388: / Linha 388: @@
    <!-- Personagens -->
    <div class="container">
-        <!-- roger -->
-    <div class="personagem-box tier-diamante novo cortante  dps  ">
-      <div class="personagem" data-static="https://i.postimg.cc/4dNHLxKM/roger.png" data-gif="">
-        <span>Gol D. Roger</span>
-        <div class="gif-overlay"></div>
-      </div>
-    </div>
      <!-- aokiji -->
-     <div class="personagem-box tier-diamante cortante especialista tanque fruta ponte parede">
+     <div class="personagem-box tier-diamante cortante especialista tanque outros">
        <div class="personagem" data-static="https://i.postimg.cc/0NMJrvjJ/fundoaokiji.png" data-gif="https://i.postimg.cc/nzKrQhJM/aokijiemotecard2.gif">
          <span>Aokiji</span>
@@ Linha 406: / Linha 398: @@
      <!-- kuma -->
-     <div class="personagem-box tier-diamante especialista tanque fruta parede">
+     <div class="personagem-box tier-diamante especialista tanque outros">
        <div class="personagem" data-static="https://i.postimg.cc/8chnZGsF/kuma2.png" data-gif="">
          <span>Bartholomew Kuma</span>
@@ Linha 414: / Linha 406: @@
      <!-- hancock -->
-     <div class="personagem-box tier-diamante dps lutador fruta">
+     <div class="personagem-box tier-diamante dps lutador">
        <div class="personagem hancock" data-static="https://i.postimg.cc/2j25Px4K/boahan.png" data-gif="">
          <span>Boa Hancock</span>
@@ Linha 422: / Linha 414: @@
      <!-- kizaru -->
-     <div class="personagem-box tier-diamante dps especialista atirador fruta parede">
+     <div class="personagem-box tier-diamante dps especialista atirador outros">
        <div class="personagem kizaru" data-static="https://i.postimg.cc/PqjhLLWD/kizaru.webp" data-gif="">
          <span>Borsalino Kizaru</span>
@@ Linha 430: / Linha 422: @@
      <!-- brook -->
-     <div class="personagem-box tier-diamante suporte cortante fruta ponte">
+     <div class="personagem-box tier-diamante suporte cortante outros">
        <div class="personagem" data-static="https://i.postimg.cc/rmsHzcPW/brookts.png" data-gif="">
          <span>Brook (TS)</span>
@@ Linha 438: / Linha 430: @@
      <!-- chopper -->
-     <div class="personagem-box tier-diamante suporte lutador fruta parede">
+     <div class="personagem-box tier-diamante suporte lutador outros">
        <div class="personagem hancock" data-static="https://i.postimg.cc/QM26N5cL/chopperts.png" data-gif="">
          <span>Chopper (TS)</span>
@@ Linha 446: / Linha 438: @@
      <!-- doflamingo -->
-     <div class="personagem-box tier-diamante dps especialista atirador fruta ponte parede">
+     <div class="personagem-box tier-diamante dps especialista atirador outros">
        <div class="personagem hancock" data-static="https://i.postimg.cc/3JfFJmHL/doflamingo.png" data-gif="">
          <span>Donquixote Doflamingo</span>
@@ Linha 454: / Linha 446: @@
      <!-- mihawk -->
-     <div class="personagem-box tier-diamante dps cortante parede">
+     <div class="personagem-box tier-diamante dps cortante outros">
        <div class="personagem" data-static="https://i.postimg.cc/6QWWj28X/Dracule-Mihawk.webp" data-gif="">
          <span>Dracule Mihawk</span>
@@ Linha 462: / Linha 454: @@
      <!-- ivankov -->
-     <div class="personagem-box tier-diamante suporte lutador fruta parede">
+     <div class="personagem-box tier-diamante suporte lutador outros">
        <div class="personagem" data-static="https://i.postimg.cc/C1pWP9Pf/Ivan-chan.webp" data-gif="">
          <span>Emporio Ivankov</span>
@@ Linha 470: / Linha 462: @@
      <!-- enel -->
-     <div class="personagem-box tier-diamante fruta especialista atirador dps">
+     <div class="personagem-box tier-diamante especialista atirador dps">
        <div class="personagem perona" data-static="https://i.postimg.cc/DzLNXBvf/enel2.png" data-gif="">
          <span>Enel</span>
@@ Linha 478: / Linha 470: @@
      <!-- franky ts -->
-     <div class="personagem-box tier-diamante tanque atirador parede">
+     <div class="personagem-box tier-diamante tanque atirador outros">
        <div class="personagem" data-static="https://i.postimg.cc/mgDHryfP/frankyts.png" data-gif="">
          <span>Franky (TS)</span>
@@ Linha 486: / Linha 478: @@
      <!-- jinbe -->
-     <div class="personagem-box tier-diamante tanque lutador parede">
+     <div class="personagem-box tier-diamante tanque lutador outros">
        <div class="personagem" data-static="https://i.postimg.cc/s2mqJzH6/jinbe.png" data-gif="">
          <span>Jinbe</span>
@@ Linha 494: / Linha 486: @@
      <!-- teach -->
-     <div class="personagem-box tier-diamante especialista bruiser fruta">
+     <div class="personagem-box tier-diamante especialista bruiser">
        <div class="personagem" data-static="https://i.postimg.cc/vm5fRHwh/barba-Negra.png" data-gif="">
          <span>Marshall D. Teach</span>
@@ Linha 502: / Linha 494: @@
      <!-- marco -->
-     <div class="personagem-box tier-diamante fruta especialista lutador suporte">
+     <div class="personagem-box tier-diamante especialista lutador suporte">
        <div class="personagem" data-static="https://i.postimg.cc/d11ChRTH/marco.png" data-gif="">
          <span>Marco</span>
@@ Linha 510: / Linha 502: @@
      <!-- luffy -->
-     <div class="personagem-box tier-diamante dps lutador fruta parede">
+     <div class="personagem-box tier-diamante dps lutador outros">
        <div class="personagem luffy" data-static="https://i.postimg.cc/L8hJ0Sz0/luffycard.png" data-gif="https://i.postimg.cc/G2n92s6Z/luffytsemotecard.gif">
          <span>Monkey D. Luffy (TS)</span>
@@ Linha 526: / Linha 518: @@
      <!-- ace -->
-     <div class="personagem-box tier-diamante dps atirador especialista fruta">
+     <div class="personagem-box tier-diamante dps atirador especialista ">
        <div class="personagem" data-static="https://i.postimg.cc/52md08JF/ace.png" data-gif="">
          <span>Portgas D. Ace</span>
@@ Linha 534: / Linha 526: @@
      <!-- robin ts -->
-     <div class="personagem-box tier-diamante dps especialista fruta ponte parede">
+     <div class="personagem-box tier-diamante dps especialista outros">
        <div class="personagem" data-static="https://i.postimg.cc/9QL8KbV1/robints.png" data-gif="">
          <span>Nico Robin (TS)</span>
@@ Linha 543: / Linha 535: @@
      <!-- zoro ts -->
-     <div class="personagem-box tier-diamante dps cortante parede">
+     <div class="personagem-box tier-diamante dps cortante outros">
        <div class="personagem" data-static="https://i.postimg.cc/N01yLJMk/zorots.png" data-gif="">
          <span>Roronoa Zoro (TS)</span>
@@ Linha 551: / Linha 543: @@
      <!-- sabo -->
-     <div class="personagem-box tier-diamante dps especialista lutador fruta parede">
+     <div class="personagem-box tier-diamante dps especialista lutador outros">
        <div class="personagem hancock" data-static="https://i.postimg.cc/1tTQpXZP/sabo2.png" data-gif="">
          <span>Sabo</span>
@@ Linha 560: / Linha 552: @@
      <!-- akainu -->
-     <div class="personagem-box tier-diamante fruta especialista lutador dps parede">
+     <div class="personagem-box tier-diamante especialista lutador dps outros">
        <div class="personagem" data-static="https://i.postimg.cc/j2TBtj1h/akainu.png" data-gif="">
          <span>Sakazuki (Akainu)</span>
@@ Linha 568: / Linha 560: @@
      <!-- shanks -->
-     <div class="personagem-box tier-diamante cortante bruiser parede">
+     <div class="personagem-box tier-diamante cortante bruiser outros">
        <div class="personagem" data-static="https://i.postimg.cc/HnTvFhJZ/shanks.png" data-gif="">
          <span>Shanks</span>
@@ Linha 576: / Linha 568: @@
      <!-- usopp ts -->
-     <div class="personagem-box tier-diamante dps atirador parede">
+     <div class="personagem-box tier-diamante dps atirador outros">
        <div class="personagem" data-static="https://i.postimg.cc/tCVbsY9z/usoppts2.png" data-gif="">
          <span>Usopp (TS)</span>
@@ Linha 584: / Linha 576: @@
      <!-- uta -->
-     <div class="personagem-box tier-diamante dps especialista fruta parede">
+     <div class="personagem-box tier-diamante dps especialista outros">
        <div class="personagem hancock" data-static="https://i.postimg.cc/2y5FQRLD/uta.png" data-gif="">
          <span>Uta</span>
@@ Linha 592: / Linha 584: @@
      <!-- sanji ts -->
-     <div class="personagem-box tier-diamante dps lutador parede">
+     <div class="personagem-box tier-diamante dps lutador outros">
        <div class="personagem" data-static="https://i.postimg.cc/Vv5nSq2s/sanjits.png" data-gif="">
          <span>Sanji (TS)</span>
@@ Linha 600: / Linha 592: @@
      <!-- baby 5 -->
-     <div class="personagem-box tier-gold fruta atirador cortante dps">
+     <div class="personagem-box tier-gold atirador cortante dps">
        <div class="personagem" data-static="https://i.postimg.cc/DZf9sHxQ/bb5.webp" data-gif="">
          <span>Baby 5</span>
@@ Linha 608: / Linha 600: @@
      <!-- Bartolomeo -->
-     <div class="personagem-box tier-gold dps especialista fruta ponte parede">
+     <div class="personagem-box tier-gold dps especialista ponte outros">
        <div class="personagem" data-static="https://i.postimg.cc/ryrmqPvK/barto.png" data-gif="">
          <span>Bartolomeo</span>
@@ Linha 616: / Linha 608: @@
      <!-- Basil Hawkins -->
-     <div class="personagem-box tier-gold bruiser especialista fruta ponte">
+     <div class="personagem-box tier-gold bruiser especialista ponte">
        <div class="personagem" data-static="https://i.postimg.cc/V6FKtRhM/basil.png" data-gif="">
          <span>Basil Hawkins</span>
@@ Linha 624: / Linha 616: @@
      <!-- Bastille -->
-     <div class="personagem-box tier-gold tanque cortante parede">
+     <div class="personagem-box tier-gold tanque cortante outros">
        <div class="personagem" data-static="https://i.postimg.cc/C1J45KZs/bastille.png" data-gif="">
          <span>Bastille</span>
@@ Linha 632: / Linha 624: @@
      <!-- Bellamy -->
-     <div class="personagem-box tier-gold dps lutador fruta parede">
+     <div class="personagem-box tier-gold dps lutador outros">
        <div class="personagem hancock" data-static="https://i.postimg.cc/8ckxzHGK/bella.png" data-gif="">
          <span>Bellamy</span>
@@ Linha 640: / Linha 632: @@
      <!-- Bonney -->
-     <div class="personagem-box tier-gold suporte lutador fruta">
+     <div class="personagem-box tier-gold suporte lutador">
        <div class="personagem hancock" data-static="https://i.postimg.cc/mD8LyqnN/bonney4.png" data-gif="">
          <span>Jewelry Bonney</span>
@@ Linha 648: / Linha 640: @@
       <!-- Kalifa -->
-     <div class="personagem-box novo tier-gold">
+     <div class="personagem-box novo tier-gold tanque especialista suporte">
        <div class="personagem hancock" data-static="https://i.postimg.cc/x1C8H4zG/kalifa.png" data-gif="">
          <span>Kalifa</span>
@@ Linha 664: / Linha 656: @@
      <!-- Brook pré -->
-     <div class="personagem-box tier-gold suporte cortante fruta">
+     <div class="personagem-box tier-gold suporte cortante">
        <div class="personagem" data-static="https://i.postimg.cc/Sx7D24vR/brookpre.png" data-gif="">
          <span>Brook</span>
@@ Linha 680: / Linha 672: @@
      <!-- bege -->
-     <div class="personagem-box tier-gold dps atirador fruta parede">
+     <div class="personagem-box tier-gold dps atirador outros">
        <div class="personagem" data-static="https://i.postimg.cc/TwvptHqy/bege.webp" data-gif="">
          <span>Capone Gang Bege</span>
@@ Linha 696: / Linha 688: @@
      <!-- chopper pré -->
-     <div class="personagem-box tier-gold suporte lutador fruta parede">
+     <div class="personagem-box tier-gold suporte lutador outros">
        <div class="personagem" data-static="https://i.postimg.cc/7YqCPy0m/tonytony.png" data-gif="">
          <span>Chopper</span>
@@ Linha 704: / Linha 696: @@
      <!-- crocodile -->
-     <div class="personagem-box tier-gold tanque especialista fruta ponte parede">
+     <div class="personagem-box tier-gold tanque especialista ponte outros">
        <div class="personagem hancock" data-static="https://i.postimg.cc/hGm4bCVX/croco.png" data-gif="">
          <span>Sir Crocodile</span>
@@ Linha 712: / Linha 704: @@
      <!-- dalmatian -->
-     <div class="personagem-box tier-gold bruiser cortante fruta parede">
+     <div class="personagem-box tier-gold bruiser cortante outros">
        <div class="personagem hancock" data-static="https://i.postimg.cc/Gpnnrbsp/dalma.png" data-gif="">
          <span>Dalmatian</span>
@@ Linha 720: / Linha 712: @@
      <!-- franky pré -->
-     <div class="personagem-box tier-gold bruiser atirador parede">
+     <div class="personagem-box tier-gold bruiser atirador outros">
        <div class="personagem hancock" data-static="https://i.postimg.cc/RCJr33Q0/frankypre.png" data-gif="">
          <span>Franky</span>
@@ Linha 728: / Linha 720: @@
      <!-- moria -->
-     <div class="personagem-box tier-gold fruta cortante suporte">
+     <div class="personagem-box tier-gold cortante suporte">
        <div class="personagem" data-static="https://i.postimg.cc/tg4w974p/moria.png" data-gif="">
          <span>Gecko Moria</span>
@@ Linha 736: / Linha 728: @@
      <!-- hina -->
-     <div class="personagem-box tier-gold bruiser lutador fruta ponte parede">
+     <div class="personagem-box tier-gold bruiser lutador outros">
        <div class="personagem" data-static="https://i.postimg.cc/90hBFNYZ/hina.png" data-gif="">
          <span>Hina</span>
@@ Linha 744: / Linha 736: @@
      <!-- burgess -->
-     <div class="personagem-box tier-gold tanque lutador parede">
+     <div class="personagem-box tier-gold tanque lutador outros">
        <div class="personagem hancock" data-static="https://i.postimg.cc/hv27WCyS/burgess.png" data-gif="">
          <span>Jesus Burgess</span>
@@ Linha 760: / Linha 752: @@
      <!-- kid -->
-     <div class="personagem-box tier-gold atirador tanque fruta ponte parede">
+     <div class="personagem-box tier-gold atirador tanque outros">
        <div class="personagem" data-static="https://i.postimg.cc/wMq0QGRH/kid.png" data-gif="">
          <span>Eustass Kid</span>
@@ Linha 792: / Linha 784: @@
      <!-- leo e mansherry -->
-     <div class="personagem-box tier-gold suporte especialista fruta ponte">
+     <div class="personagem-box tier-gold suporte especialista outros">
        <div class="personagem hancock" data-static="https://i.postimg.cc/2yyXftkG/leo-masherry.png" data-gif="">
          <span>Leo & Mansherry</span>
@@ Linha 800: / Linha 792: @@
      <!-- luffy pré -->
-     <div class="personagem-box tier-gold bruiser lutador fruta parede">
+     <div class="personagem-box tier-gold bruiser lutador outros">
        <div class="personagem luffypre" data-static="https://i.postimg.cc/PrZ0fBbV/luffypre.png" data-gif="">
          <span>Monkey D. Luffy</span>
@@ Linha 808: / Linha 800: @@
      <!-- nami pré -->
-     <div class="personagem-box tier-gold dps especialista parede">
+     <div class="personagem-box tier-gold dps especialista outros">
        <div class="personagem" data-static="https://i.postimg.cc/Jn7YZdZL/nami3.png" data-gif="">
          <span>Nami</span>
@@ Linha 816: / Linha 808: @@
      <!-- perona -->
-     <div class="personagem-box tier-gold suporte especialista fruta parede">
+     <div class="personagem-box tier-gold suporte especialista outros">
        <div class="personagem" data-static="https://i.postimg.cc/BQfYC6xp/perona3.png" data-gif="">
          <span>Perona</span>
@@ Linha 832: / Linha 824: @@
      <!-- robin pré -->
-     <div class="personagem-box tier-gold dps especialista fruta ponte parede">
+     <div class="personagem-box tier-gold dps especialista outros">
        <div class="personagem" data-static="https://i.postimg.cc/W13DRLJC/robinpre.png" data-gif="">
          <span>Robin</span>
@@ Linha 840: / Linha 832: @@
      <!-- zoro pré -->
-     <div class="personagem-box tier-gold bruiser cortante parede">
+     <div class="personagem-box tier-gold bruiser cortante outros">
        <div class="personagem" data-static="https://i.postimg.cc/B6q9ysj1/zoropre.png" data-gif="">
          <span>Zoro</span>
@@ Linha 856: / Linha 848: @@
      <!-- apoo -->
-     <div class="personagem-box tier-gold suporte atirador fruta">
+     <div class="personagem-box tier-gold suporte atirador">
        <div class="personagem hancock" data-static="https://i.postimg.cc/fWVDhzHx/apoo.png" data-gif="">
          <span>Scratchmen Apoo</span>
@@ Linha 864: / Linha 856: @@
      <!-- smoker -->
-     <div class="personagem-box tier-gold tanque lutador fruta">
+     <div class="personagem-box tier-gold tanque lutador">
        <div class="personagem kizaru" data-static="https://i.postimg.cc/P53ShjVw/smoker.png" data-gif="">
          <span>Smoker</span>
@@ Linha 872: / Linha 864: @@
      <!-- law -->
-     <div class="personagem-box tier-gold dps cortante especialista fruta parede">
+     <div class="personagem-box tier-gold dps cortante especialista outros">
        <div class="personagem" data-static="https://i.postimg.cc/FRtgssy7/law.png" data-gif="">
          <span>Trafalgar D. Water Law</span>
@@ Linha 880: / Linha 872: @@
      <!-- urouge -->
-     <div class="personagem-box tier-gold tanque lutador fruta parede">
+     <div class="personagem-box tier-gold tanque lutador outros">
        <div class="personagem" data-static="https://i.postimg.cc/1zDVB0F3/urouge.png" data-gif="">
          <span>Urouge</span>
@@ Linha 888: / Linha 880: @@
      <!-- usopp pré -->
-     <div class="personagem-box tier-gold dps atirador parede">
+     <div class="personagem-box tier-gold dps atirador outros">
        <div class="personagem" data-static="https://i.postimg.cc/qRSRdzy5/usopppre.png" data-gif="">
          <span>Usopp</span>
@@ Linha 896: / Linha 888: @@
      <!-- van augur -->
-     <div class="personagem-box tier-gold dps atirador parede">
+     <div class="personagem-box tier-gold dps atirador outros">
        <div class="personagem hancock" data-static="https://i.postimg.cc/ZKTk5JH7/van.png" data-gif="">
          <span>Van Augur</span>
@@ Linha 904: / Linha 896: @@
      <!-- ichiji -->
-     <div class="personagem-box tier-gold bruiser lutador parede">
+     <div class="personagem-box tier-gold bruiser lutador outros">
        <div class="personagem" data-static="https://i.postimg.cc/x1wtqRYf/ichiji.png" data-gif="">
          <span>Vinsmoke Ichiji</span>
@@ Linha 928: / Linha 920: @@
      <!-- sanji pré -->
-     <div class="personagem-box tier-gold dps lutador parede">
+     <div class="personagem-box tier-gold dps lutador outros">
        <div class="personagem sanjipre" data-static="https://i.postimg.cc/CKKkhnnh/sanjipre.png" data-gif="">
          <span>Vinsmoke Sanji</span>
@@ Linha 936: / Linha 928: @@
      <!-- yonji -->
-     <div class="personagem-box tier-gold tanque lutador parede">
+     <div class="personagem-box tier-gold tanque lutador outros">
        <div class="personagem" data-static="https://i.postimg.cc/KvFKc3C6/yonji.png" data-gif="">
          <span>Vinsmoke Yonji</span>
@@ Linha 944: / Linha 936: @@
      <!-- drake -->
-     <div class="personagem-box tier-gold bruiser lutador fruta parede">
+     <div class="personagem-box tier-gold bruiser lutador outros">
        <div class="personagem" data-static="https://i.postimg.cc/tRDbP1sQ/drake.png" data-gif="">
          <span>X Drake</span>
@@ Linha 984: / Linha 976: @@
      <!-- arlong -->
-     <div class="personagem-box tier-prata bruiser lutador parede">
+     <div class="personagem-box tier-prata bruiser lutador outros">
        <div class="personagem" data-static="https://i.postimg.cc/j2LQcgrJ/arlong.png" data-gif="">
          <span>Arlong</span>
@@ Linha 1 000: / Linha 992: @@
      <!-- bon clay -->
-     <div class="personagem-box tier-prata dps lutador fruta">
+     <div class="personagem-box tier-prata dps lutador">
        <div class="personagem" data-static="https://i.postimg.cc/bJ3jBpZF/BonClay.webp" data-gif="">
          <span>Bon Clay</span>
@@ Linha 1 008: / Linha 1 000: @@
      <!-- buggy -->
-     <div class="personagem-box tier-prata dps atirador fruta parede">
+     <div class="personagem-box tier-prata dps atirador outros">
        <div class="personagem" data-static="https://i.postimg.cc/Vvmdg40W/buggy.png" data-gif="">
          <span>Buggy</span>
@@ Linha 1 024: / Linha 1 016: @@
      <!-- daz -->
-     <div class="personagem-box tier-prata tanque cortante fruta">
+     <div class="personagem-box tier-prata tanque cortante">
        <div class="personagem" data-static="https://i.postimg.cc/wjjymWDX/daz.png" data-gif="">
          <span>Daz Bonez</span>
@@ Linha 1 032: / Linha 1 024: @@
      <!-- zala -->
-     <div class="personagem-box tier-prata bruiser cortante fruta">
+     <div class="personagem-box tier-prata bruiser cortante">
        <div class="personagem" data-static="https://i.postimg.cc/PqZtpZVb/zala.png" data-gif="">
          <span>Zala</span>
@@ Linha 1 056: / Linha 1 048: @@
      <!-- galdino -->
-     <div class="personagem-box tier-prata suporte especialista fruta ponte">
+     <div class="personagem-box tier-prata suporte especialista outros">
        <div class="personagem" data-static="https://i.postimg.cc/VkZRr00N/galdino.png" data-gif="">
          <span>Galdino</span>
@@ Linha 1 080: / Linha 1 072: @@
      <!-- wapol -->
-     <div class="personagem-box tier-prata tanque atirador fruta parede">
+     <div class="personagem-box tier-prata tanque atirador outros">
        <div class="personagem" data-static="https://i.postimg.cc/26k8syT4/wapol.png" data-gif="">
          <span>Wapol</span>
@@ Linha 1 088: / Linha 1 080: @@
      <!-- alvida -->
-     <div class="personagem-box tier-bronze suporte lutador fruta">
+     <div class="personagem-box tier-bronze suporte lutador">
        <div class="personagem" data-static="https://i.postimg.cc/yxGC7jXm/Alvida-Slime.webp" data-gif="">
          <span>Alvida</span>
@@ Linha 1 112: / Linha 1 104: @@
      <!-- chew -->
-     <div class="personagem-box tier-bronze dps atirador parede">
+     <div class="personagem-box tier-bronze dps atirador outros">
        <div class="personagem sanjipre" data-static="https://i.postimg.cc/NG1LKh29/chew.png" data-gif="">
          <span>Chew</span>
@@ Linha 1 120: / Linha 1 112: @@
      <!-- eric -->
-     <div class="personagem-box tier-bronze fruta dps atirador cortante">
+     <div class="personagem-box tier-bronze dps atirador cortante">
        <div class="personagem hancock" data-static="https://i.postimg.cc/rmGcwkZq/eric.png" data-gif="">
          <span>Eric</span>
@@ Linha 1 160: / Linha 1 152: @@
      <!-- kuroobi -->
-     <div class="personagem-box tier-bronze tanque lutador parede">
+     <div class="personagem-box tier-bronze tanque lutador outros">
        <div class="personagem sanjipre" data-static="https://i.postimg.cc/bvkHrCxz/kuroobi.png" data-gif="">
          <span>Kuroobi</span>
@@ Linha 1 192: / Linha 1 184: @@
      <!-- gem & mikita -->
-     <div class="personagem-box tier-bronze dps atirador fruta">
+     <div class="personagem-box tier-bronze dps atirador">
        <div class="personagem hancock" data-static="https://i.postimg.cc/FsxyJWnp/gem.png" data-gif="">
          <span>Gem & Mikita</span>
@@ Linha 1 346: / Linha 1 338: @@
        "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",
+       "Babe & Drophy": "https://wiki.gla.com.br index.php/Mr.4",
-       "Gem & Mikita": "https://wiki.gla.com.br/index.php/Mr.5",
+       "Gem & Mikita": "https://wiki.gla.com.br index.php/Mr.5",
-       "Pearl": "https://wiki.gla.com.br/index.php/Pearl"
+       "Pearl": "https://wiki.gla.com.br index.php/Pearl"
      };
@@ Linha 1 462: / Linha 1 454: @@
      });
-document.querySelectorAll('[data-tooltip-img]').forEach(btn => {
+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) {
-     const tooltip = document.createElement('img');
+     tooltip = document.createElement('img');
      tooltip.src = imgUrl;
      tooltip.classList.add('tooltip-img');
-     btn.style.position = 'relative'; // para posicionar o tooltip corretamente
+     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';

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

Edição das 19h26min de 16 de julho de 2025

Menu de navegação

Pesquisa