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

De Wiki Gla
Ir para navegação Ir para pesquisar
Etiqueta: Revertido
 
(3 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<!DOCTYPE html>
<html lang="pt-BR">


<head>
<includeonly>
  <meta charset="UTF-8">
<div style="background:#22232a; border-radius:12px; padding:12px; width:330px; max-width:95%; border:2px solid #383946; font-family: 'Segoe UI', sans-serif; color:white; box-shadow:0 0 10px #19191f;">
  <title>Teste GIF Hover</title>
   <div style="display:flex; flex-direction:row; align-items:flex-start; gap:12px;">
  <meta name="viewport" content="width=device-width, initial-scale=1">
     <div style="flex-shrink:0;">
  <style>
       <div style="position:relative; width:94px; height:132px;">
    /* --- Melhorias gerais de estilo e responsividade, e código mais limpo --- */
        <img src="{{{imagem|https://via.placeholder.com/94x132?text=Criatura}}}" style="width:94px; height:132px; border-radius:8px; object-fit:cover; border: 2px solid #383946;" alt="Imagem da criatura">
    body {
        <div style="position:absolute; top:6px; right:6px;">
      margin: 0;
          {{#if:{{{favorita|}}}|<span style="font-size:20px; color:#e14658;">&#10084;</span>|}}
      font-family: 'Segoe UI', Arial, sans-serif;
        </div>
      color: #fff;
      </div>
      background: #171f2b;
     </div>
      min-height: 100vh;
    <div style="flex:1">
    }
       <div style="font-size:1.2em; font-weight:bold; margin-bottom:3px;">
 
         {{{nome|Nome da Criatura}}}
    .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>
 
  <!-- Barra de Pesquisa -->
  <div class="search-bar">
     <input type="text" id="search" placeholder="Pesquisar personagem...">
  </div>
 
  <div class="filtros" aria-label="Filtros">
    <!-- Filtro por Classe -->
    <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>
       <div class="classe-grid">
        <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>
       </div>
       </div>
    </fieldset>
       <div style="font-size:0.97em; color:#aad2fa; margin-bottom:6px;">
 
         <span style="font-size:0.9em;">{{{tipo|Tipo}}}</span>
    <!-- Filtro por Outros (Parede e Ponte) -->
    <fieldset class="filtro-box" aria-label="Filtrar por Outros">
      <legend>Outros</legend>
       <div class="classe-grid">
        <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>
       </div>
       </div>
    </fieldset>
       <div>
 
         '''Habitat:''' {{{habitat|Desconhecido}}}<br />
    <!-- Filtro por Tier -->
         '''Perigo:''' {{{perigo|?}}}
    <fieldset class="filtro-box" aria-label="Filtrar por Tier">
      <legend>Tier</legend>
       <div class="filtro-grupo">
         <button class="tier-btn" data-tier="tier-diamante" aria-label="Diamante"><span class="estrela azul" title="Diamante">★</span></button>
         <button class="tier-btn" data-tier="tier-gold"    aria-label="Ouro"><span class="estrela dourada" title="Ouro">★</span></button>
        <button class="tier-btn" data-tier="tier-prata"  aria-label="Prata"><span class="estrela prata" title="Prata">★</span></button>
        <button class="tier-btn" data-tier="tier-bronze"  aria-label="Bronze"><span class="estrela bronze" title="Bronze">★</span></button>
       </div>
       </div>
     </fieldset>
     </div>
   </div>
   </div>
 
   <div style="margin-top:10px;">
   <div class="novos-container">
     <div style="background:#171821; border-radius:8px; padding:8px 10px; margin-bottom:6px;">
     <div class="novos-header">
       <span style="font-weight:bold; color:#f7de72;">Descrição</span><br />
       <span class="novos-title">Novos Personagens</span>
       <span style="font-size:0.98em;">{{{descricao|Sem descrição.}}}</span>
       <img src="https://cdn-icons-png.flaticon.com/128/11135/11135991.png" alt="novo" class="new-gif">
    </div>
    {{#if:{{{ultima_vista|}}}|
    <div style="background:#171821; border-radius:8px; padding:7px 10px; margin-bottom:2px;">
      <span style="font-weight:bold; color:#f7de72;">Última Vista:</span>
      <span style="margin-left:4px; font-size:0.97em;">
        <span style="color:gold;">&#9679;</span> {{{ultima_vista}}}
      </span>
     </div>
     </div>
     <div class="novos-grid" id="novos-grid">
    |}}
       <!-- Os personagens com classe "novo" serão movidos para cá automaticamente -->
    {{#if:{{{primeira_aparicao|}}}|
     <div style="background:#171821; border-radius:8px; padding:7px 10px;">
      <span style="font-weight:bold; color:#f7de72;">Primeira Aparição:</span>
       <span style="margin-left:4px; font-size:0.97em;">
        <span style="color:gold;">&#9679;</span> {{{primeira_aparicao}}}
      </span>
     </div>
     </div>
    |}}
   </div>
   </div>
</div>
</includeonly>
<noinclude>
{{Teste2}}


  <!-- Personagens -->
'''Uso:'''
  <div class="container">
<pre>
    <!-- ... Os personagens já estão bem estruturados, não vou listar tudo de novo aqui, mas: ... -->
{{Bestiario
    <!-- Sugestão: Manter como está, mas considere desacoplar completamente a lista HTML, carregando os dados por JS externo ou JSON para manutenção mais fácil. -->
|nome = Grifinório
    <!-- (Mantive igual para o demo, pois faz parte do funcionamento.) -->
|imagem = Example.jpg
    <!-- ... (todas as .personagem-box como antes) ... -->
|tipo = Ave Lendária
    <!-- Você pode implementar paginação/infinite scroll para longas listas no futuro -->
|habitat = Montanhas rochosas
    <!-- ... (fim da lista) ... -->
|perigo = Alto
  </div>
|descricao = Um pássaro colossal com garras afiadas e bico dourado, sabe voar longas distâncias e proteger tesouros.
 
|ultima_vista = há 2 dias
  <script>
|primeira_aparicao = Capítulo 7
    // Melhoria: evite código duplicado, use funções utilitárias
|favorita = 1
 
}}
    // Mover personagens novos
</pre>
    (() => {
      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:
'''Parâmetros:'''
    // Poderia carregar a lista de personagens dinamicamente por JSON para separação do conteúdo/HTML
* <code>nome</code> — Nome da criatura.
    // Poderia adicionar um "role" e "tabindex" nos cards para acessibilidade
* <code>imagem</code> — Imagem da criatura (URL ou wiki-arquivo).
    // Poderia criar um fallback para caso o gif não carregue, etc.
* <code>tipo</code> — Tipo/Espécie da criatura.
  </script>
* <code>habitat</code> — Onde é encontrada.
</body>
* <code>perigo</code> — Nível de perigo (baixo, médio, alto, etc.)
</html>
* <code>descricao</code> — Texto descritivo.

Edição atual tal como às 22h18min de 15 de novembro de 2025



Uso: 

{{Bestiario
|nome = Grifinório
|imagem = Example.jpg
|tipo = Ave Lendária
|habitat = Montanhas rochosas
|perigo = Alto
|descricao = Um pássaro colossal com garras afiadas e bico dourado, sabe voar longas distâncias e proteger tesouros.
|ultima_vista = há 2 dias
|primeira_aparicao = Capítulo 7
|favorita = 1
}}

Parâmetros:

  • nome — Nome da criatura.
  • imagem — Imagem da criatura (URL ou wiki-arquivo).
  • tipo — Tipo/Espécie da criatura.
  • habitat — Onde é encontrada.
  • perigo — Nível de perigo (baixo, médio, alto, etc.)
  • descricao — Texto descritivo.
Disponível em “https://wiki.gla.com.br/index.php?title=Teste2&oldid=40628”