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

De Wiki Gla
Ir para navegação Ir para pesquisar
Etiqueta: Revertido
m
 
(8 revisões intermediárias por 2 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<!DOCTYPE html>
Nesta página você encontra todos os Bosses semanais do jogo. Os Bosses fazem parte do conteúdo semanal do GLA e são resetados toda sexta-feira às 00h00m (UTC/GMT -03:00). Ao clicar na imagem de um Boss, você será redirecionado para a página com as informações completas sobre ele.
<html lang="pt-BR">


<head>
Eles estão organizados em dois tipos: Weekly Bosses e World Bosses.
  <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 {
{{Title|Weekly Bosses|Os Weekly Bosses são Bosses espalhados pelas ilhas do jogo que podem ser enfrentados a qualquer momento da semana. Eles se dividem em dois grupos: as Provações de Skypiea e os Bosses de ilha.}}{{WeeklyBosses
      text-align: right;
|{{WeeklyBossButton|link=Provação do Ferro|name=Provação do Ferro|img=OhmBoss sprite.png|bgimg=OhmBossBg.png|imgx=6|imgy=22}}
      padding: 20px;
|{{WeeklyBossButton|link=Provação das Cordas|name=Provação das Cordas|img=ShuraBoss sprite.png|bgimg=ShuraBossBg.png|imgx=4|imgy=24}}
      background: #222c3a;
|{{WeeklyBossButton|link=Provação das Bolas|name=Provação das Bolas|img=SatoriBoss sprite.png|bgimg=SatoriBossBg.png|imgx=8|imgy=23}}
    }
|{{WeeklyBossButton|link=Provação do Pântano|name=Provação do Pântano|img=GedatsuBoss sprite.png|bgimg=GedatsuBossBg.png|imgx=-2|imgy=24}}
}}
{{WeeklyBosses
|{{WeeklyBossButton|link=Barbarossa|name=Barbarossa|img=Barbarossa_sprite.png|bgimg=BarbarossaBg.png|imgx=1|imgy=23}}
|{{WeeklyBossButton|link=Deathstalker|name=Deathstalker|img=Deathstalker sprite.png|bgimg=DeathstalkerBg.png|imgx=3|imgy=22}}
|{{WeeklyBossButton|link=Madera|name=Madera|img=Madera sprite.png|bgimg=MaderaBg.png|imgx=-15|imgy=23}}
|{{WeeklyBossButton|link=Hassan|name=Hassan|img=Hassan sprite.png|bgimg=HassanBg.png|imgx=-7|imgy=22}}
|{{WeeklyBossButton|link=Sanshoo|name=Sanshoo|img=Sanshoo sprite.png|bgimg=SanshooBg.png|imgx=-1|imgy=17}}
}}{{WeeklyBosses
|{{WeeklyBossButton|link=Jesus Burgess|name=Jesus Burgess|img=Jesus sprite.png|bgimg=JayaBossesBg.png|imgx=-1|imgy=21}}
|{{WeeklyBossButton|link=Van Augur|name=Van Augur|img=Augur sprite.png|bgimg=JayaBossesBg.png|imgx=2|imgy=21}}
|{{WeeklyBossButton|link=Yokozuna|name=Yokozuna|img=Yokozuna sprite.png|bgimg=YokozunaBg.png|imgx=8|imgy=19}}
|{{WeeklyBossButton|link=Humandrill Swordmaster|name=Humandrill Swordmaster|img=HumandrillSwordmaster sprite.png|bgimg=HumandrillSwordmasterBg.png|imgx=-1|imgy=22}}
|{{WeeklyBossButton|link=Duval|name=Duval|img=Duval sprite.png|bgimg=DuvalBg.png|imgx=2|imgy=23}}
}}


    .search-bar input {
{{Title|World Bosses}}
      padding: 8px 14px;
{{WeeklyBosses
      width: 270px;
|{{WeeklyBossButton|link=Byakko|name=Byakko|img=Byakko sprite.png|bgimg=ByakkoBg.png|imgx=2|imgy=23}}
      max-width: 90vw;
|{{WeeklyBossButton|link=Mihawk (WB)|name=Dracule Mihawk|img=MihawkBoss Sprite.png|bgimg=MihawkwbBg.png|imgx=2|imgy=23}}
      border-radius: 7px;
|{{WeeklyBossButton|link=Aokiji (WB)|name=Kuzan "Aokiji"|img=AokijiBoss Sprite.png|bgimg=AokijiwbBg.png|imgx=2|imgy=23}}
      border: 1px solid #2f425e;
|{{WeeklyBossButton|link=Shai-Hulud|name=Shai-Hulud|img=ShaiHulud Sprite.png|bgimg=ShaihuludBg.png|imgx=2|imgy=23}}
      font-size: 1rem;
|{{WeeklyBossButton|link=Plesiosaur|name=Plesiosaur|img=Plesiosaur Sprite.png|bgimg=PlesiosaurBg.png|imgx=2|imgy=23}}
      background: #101926;
}}{{WeeklyBosses
      color: #fff;
|{{WeeklyBossButton|link=Hiking Bear|name=Hiking Bear|img=HikingBear Sprite.png|bgimg=HikingbearBg.png|imgx=2|imgy=16}}
      outline: none;
|{{WeeklyBossButton|link=Bananawani|name=Bananawani|img=Bananawani sprite.png|bgimg=BananawaniBg.png|imgx=2|imgy=23}}
      transition: border-color .2s;
|{{WeeklyBossButton|link=Barba Negra (WB)|name=Blackbeard|img=BlackbeardBoss Sprite.png|bgimg=BlackbeardBg.png|imgx=2|imgy=23}}
    }
}}
    .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>
    </fieldset>
 
    <!-- 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>
    </fieldset>
 
    <!-- Filtro por Tier -->
    <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>
    </fieldset>
  </div>
 
  <div class="novos-container">
    <div class="novos-header">
      <span class="novos-title">Novos Personagens</span>
      <img src="https://cdn-icons-png.flaticon.com/128/11135/11135991.png" alt="novo" class="new-gif">
    </div>
    <div class="novos-grid" id="novos-grid">
      <!-- Os personagens com classe "novo" serão movidos para cá automaticamente -->
    </div>
  </div>
 
  <!-- Personagens -->
  <div class="container">
    <!-- ... Os personagens já estão bem estruturados, não vou listar tudo de novo aqui, mas: ... -->
    <!-- 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. -->
    <!-- (Mantive igual para o demo, pois faz parte do funcionamento.) -->
    <!-- ... (todas as .personagem-box como antes) ... -->
    <!-- Você pode implementar paginação/infinite scroll para longas listas no futuro -->
    <!-- ... (fim da lista) ... -->
  </div>
 
  <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>

Edição atual tal como às 22h42min de 12 de julho de 2026

Nesta página você encontra todos os Bosses semanais do jogo. Os Bosses fazem parte do conteúdo semanal do GLA e são resetados toda sexta-feira às 00h00m (UTC/GMT -03:00). Ao clicar na imagem de um Boss, você será redirecionado para a página com as informações completas sobre ele.

Eles estão organizados em dois tipos: Weekly Bosses e World Bosses.

Weekly Bosses
Os Weekly Bosses são Bosses espalhados pelas ilhas do jogo que podem ser enfrentados a qualquer momento da semana. Eles se dividem em dois grupos: as Provações de Skypiea e os Bosses de ilha.

OhmBoss sprite.png
Provação do Ferro
ShuraBoss sprite.png
Provação das Cordas
SatoriBoss sprite.png
Provação das Bolas
GedatsuBoss sprite.png
Provação do Pântano

Barbarossa sprite.png
Barbarossa
Deathstalker sprite.png
Deathstalker
Madera sprite.png
Madera
Hassan sprite.png
Hassan
Sanshoo sprite.png
Sanshoo

Jesus sprite.png
Jesus Burgess
Augur sprite.png
Van Augur
Yokozuna sprite.png
Yokozuna
HumandrillSwordmaster sprite.png
Humandrill Swordmaster
Duval sprite.png
Duval

World Bosses

Byakko sprite.png
Byakko
MihawkBoss Sprite.png
Dracule Mihawk
AokijiBoss Sprite.png
Kuzan "Aokiji"
ShaiHulud Sprite.png
Shai-Hulud
Plesiosaur Sprite.png
Plesiosaur

HikingBear Sprite.png
Hiking Bear
Bananawani sprite.png
Bananawani
BlackbeardBoss Sprite.png
Blackbeard
Disponível em “http://wiki.gla.com.br/index.php?title=Teste2&oldid=48890”