Mudanças entre as edições de "Teste2"

Edição das 17h45min de 4 de novembro de 2025

<!DOCTYPE html> <html lang="pt-BR">

<head>

 <meta charset="UTF-8">
 <title>Teste GIF Hover</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
   /* --- Melhorias gerais de estilo e responsividade, e código mais limpo --- */
   body {
     margin: 0;
     font-family: 'Segoe UI', Arial, sans-serif;
     color: #fff;
     background: #171f2b;
     min-height: 100vh;
   }

   .search-bar {
     text-align: right;
     padding: 20px;
     background: #222c3a;
   }

   .search-bar input {
     padding: 8px 14px;
     width: 270px;
     max-width: 90vw;
     border-radius: 7px;
     border: 1px solid #2f425e;
     font-size: 1rem;
     background: #101926;
     color: #fff;
     outline: none;
     transition: border-color .2s;
   }
   .search-bar input:focus {
     border-color: #58aaff;
   }

   .container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
     gap: 22px;
     width: 96vw;
     margin: 0 auto;
     justify-items: center;
     padding-bottom: 30px;
   }

   @media (max-width: 1200px) {
     .container { grid-template-columns: repeat(3, 1fr);}
   }
   @media (max-width: 900px) {
     .container { grid-template-columns: repeat(2, 1fr);}
   }
   @media (max-width: 600px) {
     .container { grid-template-columns: 1fr; }
   }

   .personagem {
     width: 245px;
     min-width: 0;
     height: 110px;
     aspect-ratio: 16/7;
     border-radius: 10px;
     background-size: 150% auto;
     background-position: center -30px;
     transition: transform 0.3s, box-shadow .3s;
     display: flex;
     align-items: flex-end;
     justify-content: flex-end;
     padding: 5px;
     font-weight: bold;
     color: #fff;
     text-shadow: 1px 1px 4px #222, 0 0 20px #111;
     position: relative;
     cursor: pointer;
     border: 2px solid #58aaff;
     overflow: hidden;
     text-decoration: none;
     box-shadow: 0 2px 13px rgba(44,65,122, 0.08);
     background-repeat: no-repeat;
   }
   @media (max-width: 400px) {
     .personagem {
       width: 98vw;
       height: 80px;
       font-size: 0.92em;
     }
   }

   .personagem span {
     z-index: 2;
     font-size: 1.10rem;
     font-weight: 900;
     padding: 3px 10px;
     border-radius: 7px;
     background: linear-gradient(90deg, #000c 60%, #29292999 100%);
     color: #fff;
     text-shadow:
       0 0 6px #001a33,
       0 2px 8px #0008,
       2px 2px 0 #000,
       -2px -2px 0 #000;
     box-shadow: 0 2px 8px #000a;
   }

   .gif-overlay {
     position: absolute;
     inset: 0;
     background-repeat: no-repeat;
     background-size: 150% auto;
     background-position: center -30px;
     opacity: 0;
     z-index: 1;
     pointer-events: none;
     transition: opacity 0.3s;
   }

   .personagem:hover,
   .personagem:focus-visible {
     transform: scale(1.06);
     box-shadow: 0px 4px 22px #46b6ff44, 0 1.5px 0 #1394ed;
   }
   .personagem:hover .gif-overlay,
   .personagem:focus-visible .gif-overlay {
     opacity: 1;
   }

   .personagem.luffy .gif-overlay { background-position: center 0px; }
   .personagem.hancock { background-size: 115% auto; }
   .personagem.daddy   { background-size: 100% auto; 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% auto; background-position: center -80px;}
   .personagem.gin     { background-position: center -120px;}
   .personagem.jango   { background-position: left -40px top -20px; background-size: 180% auto;}

   /* --------- Tiers ----------- */
   .tier-diamante .personagem { background-color: #414c5c; }
   .tier-gold .personagem     { background-color: #c6a64e; }
   .tier-prata .personagem    { background-color: #a5a4af; }
   .tier-bronze .personagem   { background-color: #83623d; }

   .filtros {
     flex-wrap: wrap;
     align-items: flex-start;
     padding: 9px 2vw;
     display: flex;
     gap: 18px;
     justify-content: space-between;
     margin-bottom: 18px;
     background: #212e3e;
     border-bottom: 1.5px solid #19212c;
     font-size: 1rem;
   }

   .filtros button {
     padding: 8px 12px;
     margin: 0 2px;
     border: none;
     border-radius: 5px;
     background-color: #337cd7;
     color: white;
     font-weight: bold;
     cursor: pointer;
     transition: background 0.18s, filter .21s;
     font-size: inherit;
     outline: none;
     border: 1.5px solid transparent;
   }

   .filtros button:focus-visible {
     outline: 2px solid #58aaff;
     filter: brightness(1.13);
   }

   .filtro-grupo,
   .classe-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 7px 9px;
     align-items: center;
     justify-content: center;
   }

   .filtro-box {
     background: #34475f11;
     padding: 8px 12px;
     border-radius: 8px;
     min-width: 145px;
   }

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

   .filtros button:hover, .filtros button.ativo {
     background-color: #2491e7;
     filter: brightness(1.09);
     border-color: #58aaff;
     box-shadow: 0 0 6px #2473b355;
     transform: scale(1.045);
   }
   .btn-vertical {
     writing-mode: vertical-rl;
     rotate: 270deg;
     font-size: 0.97em;
     letter-spacing: 0.15em;
   }

   .tier-btn {
     background: #234;
     border: none;
     border-radius: 50%;
     padding: 5px 8px;
     cursor: pointer;
     font-size: 0;
     box-shadow: none;
     outline: none;
     transition: background 0.18s;
   }
   .tier-btn.ativo, .tier-btn:focus-visible {
     background: #eaf2fb;
     outline: 2px solid #58aaff;
   }

   .estrela {
     font-size: 26px;
     line-height: 1;
     pointer-events: none;
     filter: drop-shadow(0 0 2px #002) drop-shadow(0 1px 1px #0005);
   }
   .estrela.azul   { color: #14a3ee; }
   .estrela.dourada{ color: #ffc107; }
   .estrela.prata  { color: #c0c0c0; }
   .estrela.bronze { color: #cd7f32; }

   .classe-icon-wrapper {
     position: absolute;
     top: 5px;
     left: 5px;
     display: flex;
     flex-direction: column;
     gap: 2px;
     z-index: 10;
     pointer-events: none;
     transition: transform 0.4s;
   }
   .classe-icon {
     width: 28px;
     height: 28px;
     user-select: none;
     pointer-events: none;
     opacity: 0.94;
     transition: opacity 0.3s;
   }
   .personagem-box:hover .classe-icon,
   .personagem-box:focus-within .classe-icon {
     opacity: 1;
   }

   .personagem-box {
     position: relative;
     transition: transform 0.4s, box-shadow .3s;
     transform-origin: center center;
   }
   .personagem-box:hover, .personagem-box:focus-within {
     transform: scale(1.04);
     z-index: 2;
     box-shadow: 0 6px 22px #23234770;
   }

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

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

   .novos-container {
     padding: 20px;
     background: linear-gradient(to right, #e0f0ff, #ffffff);
     border-radius: 12px;
     margin: 20px auto;
     width: 95%;
     max-width: 1200px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.11);
     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.17); opacity: 0.72; }
     100% { transform: scale(1); opacity: 1; }
   }
   .novos-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
   }

 </style>

</head>

<body>

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

   <fieldset class="filtro-box classe-filtro-container" aria-label="Filtrar por Classe">
     <legend>Classe</legend>
     <button class="btn-vertical tipo-btn ativo" data-tipo="all" title="Todos">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" aria-label="Filtrar por Outros">
     <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" aria-label="Filtrar por Tier">
     <legend>Tier</legend>

       <button class="tier-btn" data-tier="tier-diamante" aria-label="Diamante">★</button>
       <button class="tier-btn" data-tier="tier-gold"    aria-label="Ouro">★</button>
       <button class="tier-btn" data-tier="tier-prata"   aria-label="Prata">★</button>
       <button class="tier-btn" data-tier="tier-bronze"  aria-label="Bronze">★</button>

   </fieldset>

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

 <script>
   // Melhoria: evite código duplicado, use funções utilitárias

   // Mover personagens novos
   (() => {
     const novosGrid = document.getElementById('novos-grid');
     document.querySelectorAll('.personagem-box.novo').forEach(novoCard => {
       novosGrid.appendChild(novoCard);
     });
     if (novosGrid.children.length === 0) {
       document.querySelector('.novos-container').style.display = 'none';
     }
   })();

   // Inicialização dos cards e overlays de gifs
   document.querySelectorAll('.personagem').forEach(card => {
     const staticImg = card.getAttribute('data-static');
     const gifImg = card.getAttribute('data-gif');
     const overlay = card.querySelector('.gif-overlay');

     card.style.backgroundImage = staticImg ? `url('${staticImg}')` : ;

     card.addEventListener('mouseenter', () => {
       if (gifImg) overlay.style.backgroundImage = `url('${gifImg}?t=${Date.now()}')`;
     });
     card.addEventListener('mouseleave', () => {
       overlay.style.backgroundImage = ;
     });
     card.addEventListener('focus', () => {
       if (gifImg) overlay.style.backgroundImage = `url('${gifImg}?t=${Date.now()}')`;
     });
     card.addEventListener('blur', () => {
       overlay.style.backgroundImage = ;
     });
   });

   // Busca por nome, acessível e otimizada
   document.getElementById('search').addEventListener('input', function () {
     const term = this.value.toLowerCase();
     document.querySelectorAll('.personagem').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';
       }
     });
   });

   // Corrigido URLs dos links e checado duplicidade.
   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"
   };

   // Torna os personagens cards clicáveis, sem duplicar <a>
   document.querySelectorAll('.personagem').forEach(card => {
     const span = card.querySelector('span');
     const nomePersonagem = span?.textContent.trim();
     const link = personagemLinks[nomePersonagem];
     if (link) {
       if (card.parentElement.tagName.toLowerCase() !== 'a') {
         const wrapper = document.createElement('a');
         wrapper.href = link;
         wrapper.target = "_blank";
         wrapper.rel = "noopener";
         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);
       }
     }
   });

   // Filtros: tier, tipo
   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();

   function updateFiltros() {
     personagemBoxes.forEach(box => {
       const matchesTier = activeTier === 'all' || box.classList.contains(activeTier);
       const matchesTipo = activeTipos.size === 0 ||
         Array.from(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;
       if (selectedTipo === 'all') {
         activeTipos.clear();
         tipoButtons.forEach(btn =>
           btn.dataset.tipo === 'all'
             ? btn.classList.add('ativo')
             : 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 =>
             btn.dataset.tipo === 'all'
               ? btn.classList.add('ativo')
               : null
           );
         }
       }
       updateFiltros();
     });
   });

   // Adiciona ícones de classes dinamicamente (mais eficiente e sem repetição)
   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',
   };
   document.querySelectorAll('.personagem-box').forEach(box => {
     // Evita adicionar múltiplos wrappers (caso do hot-reload ou rerun)
     if (box.querySelector('.classe-icon-wrapper')) return;
     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);
     }
   });

   // Tooltips melhorados e mais leves
   document.querySelectorAll('[data-tooltip-img], [data-tooltip-text]').forEach(btn => {
     let tooltip;
     if (btn.dataset.tooltipImg) {
       tooltip = document.createElement('img');
       tooltip.src = btn.dataset.tooltipImg;
       tooltip.className = 'tooltip-img';
     }
     if (btn.dataset.tooltipText) {
       tooltip = document.createElement('div');
       tooltip.textContent = btn.dataset.tooltipText;
       tooltip.className = '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.minWidth = '140px';
       tooltip.style.maxWidth = '220px';
       tooltip.style.wordBreak = "break-word";
     }
     if (tooltip) {
       btn.style.position = 'relative';
       btn.appendChild(tooltip);
       btn.addEventListener('mouseenter', () => tooltip.style.display = 'block');
       btn.addEventListener('mouseleave', () => tooltip.style.display = 'none');
       btn.addEventListener('focus', () => tooltip.style.display = 'block');
       btn.addEventListener('blur', () => tooltip.style.display = 'none');
     }
   });

   // Sugestão de melhoria extra:
   // Poderia carregar a lista de personagens dinamicamente por JSON para separação do conteúdo/HTML
   // Poderia adicionar um "role" e "tabindex" nos cards para acessibilidade
   // Poderia criar um fallback para caso o gif não carregue, etc.
 </script>

</body> </html>

Mudanças entre as edições de "Teste2"

Edição das 17h45min de 4 de novembro de 2025

Menu de navegação

Pesquisa