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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<script>
(function () {
  function onReady(fn) {
    if (document.readyState !== 'loading') {
      fn();
    } else {
      document.addEventListener('DOMContentLoaded', fn);
    }
  }
  onReady(function () {
    const langs = ['pt', 'en', 'es', 'pl'];
    const langFlags = {
      pt: 'https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg',
      en: 'https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg',
      es: 'https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg',
      pl: 'https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg'
    };
    // Obtener título desde la URL real, no desde wgPageName
    const pathParts = decodeURIComponent(window.location.pathname).split('/index.php/')[1].split('/');
    const possibleLang = pathParts[pathParts.length - 1];
    const currentLang = langs.includes(possibleLang) ? possibleLang : 'pt';
    const baseTitle = langs.includes(possibleLang) ? pathParts.slice(0, -1).join('/') : pathParts.join('/');
    const preferedLang = localStorage.getItem('preferedLang');
    const alreadyInLang = currentLang === preferedLang;
    const redirected = sessionStorage.getItem('langRedirectDone');
    // Redireccionamiento automático
    if (preferedLang && !alreadyInLang && !redirected) {
      const targetTitle = baseTitle + (preferedLang === 'pt' ? '' : '/' + preferedLang);
      const baseUrl = '/index.php/' + targetTitle.split('/').map(encodeURIComponent).join('/');
      fetch(baseUrl, { method: 'HEAD' }).then(response => {
        sessionStorage.setItem('langRedirectDone', '1');
        window.location.href = response.ok ? baseUrl : '/index.php/' + encodeURIComponent(baseTitle);
      }).catch(() => {
        sessionStorage.setItem('langRedirectDone', '1');
        window.location.href = '/index.php/' + encodeURIComponent(baseTitle);
      });
      return;
    }
    // Contenedor de banderas
    var container = document.createElement('div');
    container.className = 'language-buttons';
    container.style.position = 'absolute';
    container.style.top = '1px';
    container.style.right = '438px';
    container.style.display = 'flex';
    container.style.padding = '6px 10px';
    container.style.gap = '8px';
    container.style.zIndex = '999';
    langs.forEach(function (lang) {
      var pageTitle = baseTitle + (lang === 'pt' ? '' : '/' + lang);
      var fullUrl = '/index.php/' + pageTitle.split('/').map(encodeURIComponent).join('/')
      var link = document.createElement('a');
      link.href = '#';
      link.title = lang.toUpperCase();
      link.addEventListener('click', function (e) {
        e.preventDefault();
        fetch(fullUrl, { method: 'HEAD' }).then(response => {
          if (response.ok) {
            localStorage.setItem('preferedLang', lang);
            sessionStorage.setItem('langRedirectDone', '1');
            window.location.href = fullUrl;
          } else {
            sessionStorage.setItem('langRedirectDone', '1');
            const langNames = { es: 'Español', en: 'English', pl: 'Polski' };
            const msgTranslations = {
              es: 'La versión en {lang} no está disponible.',
              en: 'The {lang} version is not available.',
              pl: 'Wersja w języku {lang} jest niedostępna.',
              pt: 'A versão em {lang} não está disponível.'
            };
            if (lang !== 'pt') {
              const userLang = (navigator.language || 'en').substring(0, 2);
              const messageTemplate = msgTranslations[userLang] || msgTranslations['en'];
              const langLabel = langNames[lang] || lang;
              const msg = document.createElement('div');
              msg.textContent = messageTemplate.replace('{lang}', langLabel);
              msg.style.position = 'fixed';
              msg.style.top = '20px';
              msg.style.left = '50%';
              msg.style.transform = 'translateX(-50%)';
              msg.style.background = '#ffdddd';
              msg.style.color = '#a00';
              msg.style.padding = '12px 24px';
              msg.style.border = '1px solid #a00';
              msg.style.borderRadius = '8px';
              msg.style.fontSize = '16px';
              msg.style.zIndex = '1000';
              msg.style.boxShadow = '0 0 6px rgba(0,0,0,0.2)';
              msg.style.opacity = '0';
              msg.style.transition = 'opacity 0.3s ease';
              document.body.appendChild(msg);
              setTimeout(() => { msg.style.opacity = '1'; }, 10);
              setTimeout(() => {
                msg.style.opacity = '0';
                setTimeout(() => {
                  msg.remove();
                  window.location.href = '/index.php/' + encodeURIComponent(baseTitle);
                }, 500);
              }, 3000);
            } else {
              window.location.href = '/index.php/' + encodeURIComponent(baseTitle);
            }
          }
        }).catch(() => {
          sessionStorage.setItem('langRedirectDone', '1');
          window.location.href = '/index.php/' + encodeURIComponent(baseTitle);
        });
      });
      var img = document.createElement('img');
      img.src = langFlags[lang];
      img.style.width = '32px';
      img.style.height = '24px';
      img.style.borderRadius = '6px';
      img.style.border = (lang === currentLang) ? '2px solid #333' : '1px solid #ccc';
      img.style.transition = 'transform 0.2s ease';
      img.style.objectFit = 'cover';
      img.style.cursor = 'pointer';
      img.addEventListener('mouseenter', function () {
        img.style.transform = 'scale(1.1)';
        img.style.borderColor = '#888';
      });
      img.addEventListener('mouseleave', function () {
        img.style.transform = 'scale(1)';
        img.style.borderColor = (lang === currentLang) ? '#333' : '#ccc';
      });
      link.appendChild(img);
      container.appendChild(link);
    });
    document.body.appendChild(container);
  });
})();
</script>
<!-- PERSONAGENS -->
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="pt-BR">
<html lang="pt-BR">
Linha 404: Linha 253:
   box-shadow: 0 2px 8px rgba(0,0,0,0.3);
   box-shadow: 0 2px 8px rgba(0,0,0,0.3);
   z-index: 99;
   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;
}
.estrela.azul { color: #1b3cf7; }
.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;
}
}


Linha 438: Linha 358:


     <!-- Filtro por Tier -->
     <!-- Filtro por Tier -->
    <fieldset class="filtro-box">
<!-- Substitua os botões do filtro de Tier por estrelas coloridas -->
      <legend>Tier</legend>
<fieldset class="filtro-box">
      <div class="filtro-grupo">
  <legend>Tier</legend>
        <button class="tier-btn" data-tier="tier-diamante">💎 Diamante</button>
  <div class="filtro-grupo">
        <button class="tier-btn" data-tier="tier-gold">⭐ Ouro</button>
    <button class="tier-btn" data-tier="tier-diamante"><span class="estrela azul" title="Diamante">★</span></button>
        <button class="tier-btn" data-tier="tier-prata">🥈 Prata</button>
    <button class="tier-btn" data-tier="tier-gold"><span class="estrela dourada" title="Ouro">★</span></button>
        <button class="tier-btn" data-tier="tier-bronze">🥉 Bronze</button>
    <button class="tier-btn" data-tier="tier-prata"><span class="estrela prata" title="Prata">★</span></button>
      </div>
    <button class="tier-btn" data-tier="tier-bronze"><span class="estrela bronze" title="Bronze">★</span></button>
     </fieldset>
  </div>
</fieldset>
 
  <div class="novos-container">
  <div class="novos-header">
     <span class="novos-title">🆕 Novos Personagens</span>
    <img src="https://cdn-icons-png.flaticon.com/512/743/743007.png" alt="new" class="new-gif">
  </div>
  <div class="novos-grid" id="novos-grid">
    <!-- Os personagens com classe "novo" serão movidos para cá automaticamente -->
   </div>
   </div>
</div>


   <!-- Personagens -->
   <!-- Personagens -->
   <div class="container">
   <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 -->
     <!-- aokiji -->
Linha 701: Linha 639:
       </div>
       </div>
     </div>
     </div>
    <!-- Kalifa -->
    <div class="personagem-box novo tier-gold suporte lutador fruta">
      <div class="personagem hancock" data-static="https://i.postimg.cc/x1C8H4zG/kalifa.png" data-gif="">
        <span>Kalifa</span>
        <div class="gif-overlay"></div>
      </div>
    </div> 
    <!-- Kaku -->
<div class="personagem-box novo tier-gold dps cortante fruta">
  <div class="personagem" data-static="https://i.postimg.cc/vmyVnzGG/kaku.png" data-gif="">
    <span>Kaku</span>
    <div class="gif-overlay"></div>
  </div>
</div>


     <!-- Brook pré -->
     <!-- Brook pré -->
Linha 710: Linha 664:
     </div>
     </div>


<!-- Blueno -->
<div class="personagem-box novo tier-gold especialista fruta">
  <div class="personagem" data-static="https://i.postimg.cc/m248bQHW/blueno.png" data-gif="">
    <span>Blueno</span>
    <div class="gif-overlay"></div>
  </div>
</div>
   
     <!-- bege -->
     <!-- bege -->
     <div class="personagem-box tier-gold dps atirador fruta parede">
     <div class="personagem-box tier-gold dps atirador fruta parede">
Linha 781: Linha 743:
       </div>
       </div>
     </div>
     </div>
    <!-- Jabra -->
<div class="personagem-box novo tier-gold dps lutador fruta">
  <div class="personagem" data-static="https://i.postimg.cc/J4y4zkVK/jabra.png" data-gif="">
    <span>Jabra</span>
    <div class="gif-overlay"></div>
  </div>
</div>


     <!-- kid -->
     <!-- kid -->
Linha 805: Linha 775:
       </div>
       </div>
     </div>
     </div>
    <!-- Rob Lucci -->
<div class="personagem-box novo tier-gold dps lutador fruta">
  <div class="personagem" data-static="https://i.postimg.cc/9MvgPK0D/lucci.png" data-gif="">
    <span>Rob Lucci</span>
    <div class="gif-overlay"></div>
  </div>
</div>


     <!-- leo e mansherry -->
     <!-- leo e mansherry -->
Linha 1 215: Linha 1 193:


     <!-- pearl -->
     <!-- pearl -->
     <div class="personagem-box tier-bronze tanque lutador especialista">
     <div class="personagem-box tier-bronze tanque lutador especialista">
       <div class="personagem" data-static="https://i.postimg.cc/Y0HFvY6T/pearl.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/Y0HFvY6T/pearl.png" data-gif="">
         <span>Pearl</span>
         <span>Pearl</span>
Linha 1 225: Linha 1 203:
   <!-- Scripts -->
   <!-- Scripts -->
   <script>
   <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');
     const cards = document.querySelectorAll('.personagem');


Linha 1 251: Linha 1 236:
         const wrapper = card.parentElement;
         const wrapper = card.parentElement;
         const tierBox = wrapper.parentElement;
         const tierBox = wrapper.parentElement;
         tierBox.style.display = name.includes(term) ? 'block' : 'none';
         // 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';
        }
       });
       });
     });
     });

Edição das 01h59min de 15 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;

} .estrela.azul { color: #1b3cf7; } .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;

} 


 </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="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">★</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/512/743/743007.png" alt="new" class="new-gif">

       Gol D. Roger

       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]').forEach(btn => { 

 const imgUrl = btn.getAttribute('data-tooltip-img');

 if (imgUrl) {
   const tooltip = document.createElement('img');
   tooltip.src = imgUrl;
   tooltip.classList.add('tooltip-img');
   btn.style.position = 'relative'; // para posicionar o tooltip corretamente
   btn.appendChild(tooltip);

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

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

}); 


 </script>

</body>

</html>

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