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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<div class="carousel-container">
<!DOCTYPE html>
    <div class="carousel-track">
<html lang="pt-BR">
        <div class="carousel-slide global-event-widget">
 
            <img class="global-event-image" src="/images/0/0a/Anyevent.png" alt="Global Event">
<head>
            <div id="global-event-timer"></div>
  <meta charset="UTF-8">
        </div>
  <title>Teste GIF Hover</title>
        <div class="carousel-slide worldboss-widget">
  <style>
            <a id="worldboss-link" style="display: block;" href="#" target="_blank">
    body {
              <img class="worldboss-imagen" src="/images/9/93/Anywb_event.png">
      margin: 0;
            </a>
      font-family: sans-serif;
            <div id="worldboss-timer"></div>
      color: white;
        </div>
    }
        <div class="carousel-slide rankedd-widget">
 
            <img class="rankedd-image" src="/images/b/b0/Ranked_semranked_event.png" alt="Ranked Event">
    .search-bar {
            <div id="rankedd-timer"></div>
      text-align: right;
        </div>
      padding: 20px;
     </div>
    }
</div>
 
<div class="carousel-controls-images">
    .search-bar input {
     <i class="fa-solid fa-star carousel-thumb active" data-index="0" title="Evento Global"></i>
      padding: 8px;
     <i class="fa-solid fa-skull carousel-thumb" data-index="1" title="World Boss"></i>
      width: 250px;
     <i class="fa-solid fa-shield-halved carousel-thumb" data-index="2" title="Ranked"></i>
      border-radius: 5px;
</div>
      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.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 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;
    }


    .filtros button:hover {
      background-color: #307ac2;
    }


<script>
     .filtros button.ativo {
     (function loadFontAwesome() {
      background-color: #006eff;
        if (!document.querySelector('link[href*="font-awesome"]')) {
      color: white;
            const faLink = document.createElement('link');
      border-color: #2672d4;
            faLink.rel = 'stylesheet';
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
            faLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css';
      transform: scale(1.05);
            document.head.appendChild(faLink);
    }
        }
 
     })();
    .classe-icon-wrapper {
      position: absolute;
      top: 5px;
      right: 5px;
      display: flex;
      gap: 1px;
      z-index: 10;
      pointer-events: none;
     }


     const track = document.querySelector('.carousel-track');
     .classe-icon {
    const thumbs = document.querySelectorAll('.carousel-thumb');
      width: 32px;
      height: 32px;
      opacity: 0.9;
      user-select: none;
      pointer-events: none;
    }


     let currentSlide = 0;
     .personagem-box {
    let totalSlides = thumbs.length - 1;
      position: relative;
     let intervalId;
      transition: transform 0.4s ease;
      transform-origin: center center;
     }


     function goToSlide(index) {
     .personagem-box:hover {
        currentSlide = (index + totalSlides + 1) % (totalSlides + 1);
      transform: scale(1.05);
        track.style.transform = `translateX(-${currentSlide * 100}%)`;
        thumbs.forEach(thumb => thumb.classList.remove('active'));
        thumbs[currentSlide].classList.add('active');
     }
     }


     function resetInterval() {
     .personagem-box:hover .classe-icon {
        clearInterval(intervalId);
      opacity: 0.7;
        intervalId = setInterval(() => goToSlide(currentSlide + 1), 12000);
     }
     }
  </style>
</head>
<body>
  <!-- Barra de Pesquisa -->
  <div class="search-bar">
    <input type="text" id="search" placeholder="Pesquisar personagem...">
  </div>
  <div class="filtros" style="display: flex; gap: 20px; justify-content: center; margin-bottom: 20px;">
    <!-- Filtro por Classe -->
    <div>
      <button class="tipo-btn" data-tipo="all">Todos</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="dps">🥈 DPS</button>
      <button class="tipo-btn" data-tipo="bruiser">🥉 Bruiser</button>
      <button class="tipo-btn" data-tipo="suporte">🥉 Suporte</button>
      <button class="tipo-btn" data-tipo="tanque">🥉 Tanque</button>
      <button class="tipo-btn" data-tipo="atirador">🥉 Atirador</button>
      <button class="tipo-btn" data-tipo="lutador">🥉 Lutador</button>
    </div>
    <!-- Filtro por Tier -->
    <div>
      <button class="tier-btn" data-tier="all">Todos</button>
      <button class="tier-btn" data-tier="tier-diamante">💎 Diamante</button>
      <button class="tier-btn" data-tier="tier-gold">⭐ Ouro</button>
      <button class="tier-btn" data-tier="tier-prata">🥈 Prata</button>
      <button class="tier-btn" data-tier="tier-bronze">🥉 Bronze</button>
    </div>
  </div>
  <!-- Personagens -->
  <div class="container">
    <!-- aokiji -->
    <div class="personagem-box tier-diamante cortante especialista tanque fruta">
      <div class="personagem" data-static="https://i.postimg.cc/0NMJrvjJ/fundoaokiji.png"
        data-gif="https://i.postimg.cc/nzKrQhJM/aokijiemotecard2.gif">
        <span>Aokiji</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- kuma -->
    <div class="personagem-box tier-diamante especialista tanque fruta">
      <div class="personagem" data-static="https://i.postimg.cc/8chnZGsF/kuma2.png" data-gif="">
        <span>Bartholomew Kuma</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- hancock -->
    <div class="personagem-box tier-diamante dps lutador fruta">
      <div class="personagem hancock" data-static="https://i.postimg.cc/2j25Px4K/boahan.png" data-gif="">
        <span>Boa Hancock</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- kizaru -->
    <div class="personagem-box tier-diamante dps especialista atirador fruta">
      <div class="personagem kizaru" data-static="https://i.postimg.cc/PqjhLLWD/kizaru.webp" data-gif="">
        <span>Borsalino Kizaru</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- brook -->
    <div class="personagem-box tier-diamante suporte cortante fruta">
      <div class="personagem" data-static="https://i.postimg.cc/rmsHzcPW/brookts.png" data-gif="">
        <span>Brook (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- chopper -->
    <div class="personagem-box tier-diamante suporte lutador fruta">
      <div class="personagem hancock" data-static="https://i.postimg.cc/QM26N5cL/chopperts.png" data-gif="">
        <span>Chopper (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- doflamingo -->
    <div class="personagem-box tier-diamante dps especialista atirador fruta">
      <div class="personagem hancock" data-static="https://i.postimg.cc/3JfFJmHL/doflamingo.png" data-gif="">
        <span>Donquixote Doflamingo</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- mihawk -->
    <div class="personagem-box tier-diamante dps cortante">
      <div class="personagem" data-static="https://i.postimg.cc/6QWWj28X/Dracule-Mihawk.webp" data-gif="">
        <span>Dracule Mihawk</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- ivankov -->
    <div class="personagem-box tier-diamante suporte lutador fruta">
      <div class="personagem" data-static="https://i.postimg.cc/C1pWP9Pf/Ivan-chan.webp" data-gif="">
        <span>Emporio Ivankov</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- enel -->
    <div class="personagem-box tier-diamante fruta especialista atirador dps">
      <div class="personagem perona" data-static="https://i.postimg.cc/DzLNXBvf/enel2.png" data-gif="">
        <span>Enel</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- franky ts -->
    <div class="personagem-box tier-diamante tanque atirador">
      <div class="personagem" data-static="https://i.postimg.cc/mgDHryfP/frankyts.png" data-gif="">
        <span>Franky (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- jinbe -->
    <div class="personagem-box tier-diamante tanque lutador">
      <div class="personagem" data-static="https://i.postimg.cc/s2mqJzH6/jinbe.png" data-gif="">
        <span>Jinbe</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- teach -->
    <div class="personagem-box tier-diamante especialista bruiser fruta">
      <div class="personagem" data-static="https://i.postimg.cc/vm5fRHwh/barba-Negra.png" data-gif="">
        <span>Marshall D. Teach</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- marco -->
    <div class="personagem-box tier-diamante fruta especialista lutador suporte">
      <div class="personagem" data-static="https://i.postimg.cc/d11ChRTH/marco.png" data-gif="">
        <span>Marco</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- luffy -->
    <div class="personagem-box tier-diamante dps lutador fruta">
      <div class="personagem luffy" data-static="https://i.postimg.cc/L8hJ0Sz0/luffycard.png"
        data-gif="https://i.postimg.cc/G2n92s6Z/luffytsemotecard.gif">
        <span>Monkey D. Luffy (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- nami ts -->
    <div class="personagem-box tier-diamante dps especialista">
      <div class="personagem" data-static="https://i.postimg.cc/bvRMyPQ0/namits.png" data-gif="">
        <span>Nami (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- ace -->
    <div class="personagem-box tier-diamante dps atirador especialista fruta">
      <div class="personagem" data-static="https://i.postimg.cc/52md08JF/ace.png" data-gif="">
        <span>Portgas D. Ace</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- robin ts -->
    <div class="personagem-box tier-diamante dps especialista fruta">
      <div class="personagem" data-static="https://i.postimg.cc/9QL8KbV1/robints.png" data-gif="">
        <span>Nico Robin (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- zoro ts -->
    <div class="personagem-box tier-diamante dps cortante">
      <div class="personagem" data-static="https://i.postimg.cc/N01yLJMk/zorots.png" data-gif="">
        <span>Roronoa Zoro (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- sabo -->
    <div class="personagem-box tier-diamante dps especialista lutador fruta">
      <div class="personagem" data-static="https://i.postimg.cc/rmsL7svR/sabo.png" data-gif="">
        <span>Sabo</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- akainu -->
    <div class="personagem-box tier-diamante fruta especialista lutador dps">
      <div class="personagem" data-static="https://i.postimg.cc/j2TBtj1h/akainu.png" data-gif="">
        <span>Sakazuki (Akainu)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- shanks -->
    <div class="personagem-box tier-diamante cortante bruiser">
      <div class="personagem" data-static="https://i.postimg.cc/HnTvFhJZ/shanks.png" data-gif="">
        <span>Shanks</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- usopp ts -->
    <div class="personagem-box tier-diamante dps atirador">
      <div class="personagem" data-static="https://i.postimg.cc/Hx9B09SQ/usoppts.png" data-gif="">
        <span>Usopp (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- uta -->
    <div class="personagem-box tier-diamante dps especialista fruta">
      <div class="personagem hancock" data-static="https://i.postimg.cc/2y5FQRLD/uta.png" data-gif="">
        <span>Uta</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- sanji ts -->
    <div class="personagem-box tier-diamante dps lutador">
      <div class="personagem" data-static="https://i.postimg.cc/Vv5nSq2s/sanjits.png" data-gif="">
        <span>Sanji (TS)</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- baby 5 -->
    <div class="personagem-box tier-gold fruta atirador cortante dps">
      <div class="personagem" data-static="https://i.postimg.cc/DZf9sHxQ/bb5.webp" data-gif="">
        <span>Baby 5</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- Bartolomeo -->
    <div class="personagem-box tier-gold dps especialista fruta">
      <div class="personagem" data-static="https://i.postimg.cc/ryrmqPvK/barto.png" data-gif="">
        <span>Bartolomeo</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- Basil Hawkins -->
    <div class="personagem-box tier-gold bruiser especialista fruta">
      <div class="personagem" data-static="https://i.postimg.cc/V6FKtRhM/basil.png" data-gif="">
        <span>Basil Hawkins</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- Bastille -->
    <div class="personagem-box tier-gold tanque cortante">
      <div class="personagem" data-static="https://i.postimg.cc/C1J45KZs/bastille.png" data-gif="">
        <span>Bastille</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
    <!-- Bellamy -->
    <div class="personagem-box tier-gold dps lutador fruta">
      <div class="personagem hancock" data-static="https://i.postimg.cc/8ckxzHGK/bella.png" data-gif="">
        <span>Bellamy</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


     thumbs.forEach(thumb => {
     <!-- Bonney -->
         thumb.addEventListener('click', () => {
    <div class="personagem-box tier-gold suporte lutador fruta">
            const idx = parseInt(thumb.getAttribute('data-index'));
      <div class="personagem" data-static="https://i.postimg.cc/k4D2NM1c/bonney.png" data-gif="">
            goToSlide(idx);
        <span>Jewelry Bonney</span>
            resetInterval();
         <div class="gif-overlay"></div>
         });
      </div>
     });
    </div>
 
    <!-- Brook pré -->
    <div class="personagem-box tier-gold suporte cortante fruta">
      <div class="personagem" data-static="https://i.postimg.cc/Sx7D24vR/brookpre.png" data-gif="">
        <span>Brook</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- bege -->
    <div class="personagem-box tier-gold dps atirador fruta">
      <div class="personagem" data-static="https://i.postimg.cc/TwvptHqy/bege.webp" data-gif="">
        <span>Capone Gang Bege</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
    <!-- carrot -->
    <div class="personagem-box tier-gold dps especialista cortante">
      <div class="personagem" data-static="https://i.postimg.cc/MpPfrrct/carrot.png" data-gif="">
         <span>Carrot</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
 
     <!-- chopper pré -->
    <div class="personagem-box tier-gold suporte lutador fruta">
      <div class="personagem" data-static="https://i.postimg.cc/7YqCPy0m/tonytony.png" data-gif="">
        <span>Chopper</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


     resetInterval();
     <!-- crocodile -->
     (function () {
     <div class="personagem-box tier-gold tanque especialista fruta">
        let globalEventsTimer, globalEventsImage, worldBossTimer, worldBossImage, rankedTimer, rankedImage;
      <div class="personagem hancock" data-static="https://i.postimg.cc/hGm4bCVX/croco.png" data-gif="">
        let globalEventsInterval, worldBossInterval, rankedInterval, globalEventsInfo = {};
         <span>Sir Crocodile</span>
       
         <div class="gif-overlay"></div>
        const bossLinks = {
      </div>
        "Aokiji_wb_event.png": "https://wiki.gla.com.br/index.php/Aokiji_(World_Boss)",
    </div>
        "Shai_hulud_wb_event.png": "https://wiki.gla.com.br/index.php/Shai-Hulud",
        "Plesiosaur_wb_event.png": "https://wiki.gla.com.br/index.php/Plesiosaur",
         "Mihawk_wb_event.png": "https://wiki.gla.com.br/index.php/Mihawk_(World_Boss)",
         "Bananawani_wb_event.png": "https://wiki.gla.com.br/index.php/Bananawani",
        "Byakko_wb_event.png": "https://wiki.gla.com.br/index.php/Byakko",
        "Hiking_bear_wb_event.png": "https://wiki.gla.com.br/index.php/Hiking_Bear"
        };


        function bossLink(img, image){
    <!-- dalamtian -->
        const imgSrc = img || image;
    <div class="personagem-box tier-gold bruiser cortante fruta">
        const fileName = imgSrc.split('/').pop();
      <div class="personagem hancock" data-static="https://i.postimg.cc/Gpnnrbsp/dalma.png" data-gif="">
        const link = bossLinks[fileName] || 'https://wiki.gla.com.br/index.php/World_Boss';
        <span>Dalmatian</span>
         document.getElementById('worldboss-link').setAttribute('href', link);
         <div class="gif-overlay"></div>
        }
      </div>
    </div>


        // Função para cargar os eventos a partir do JSON
    <!-- franky pré -->
        async function cargarEventos() {
    <div class="personagem-box tier-gold bruiser atirador">
            try {
      <div class="personagem hancock" data-static="https://i.postimg.cc/RCJr33Q0/frankypre.png" data-gif="">
                const response = await fetch('https://wiki.gla.com.br/index.php?title=Globalevents.json&action=raw');
        <span>Franky</span>
                const data = await response.json();
        <div class="gif-overlay"></div>
                globalEventsInfo = data;
      </div>
                setGlobalEvent();
    </div>


            } catch (error) {
    <!-- moria -->
                console.error('Error al cargar los eventos:', error);
    <div class="personagem-box tier-gold fruta cortante suporte">
                alert('No se pudieron cargar los eventos. Por favor, inténtalo más tarde.');
      <div class="personagem" data-static="https://i.postimg.cc/tg4w974p/moria.png" data-gif="">
            }
        <span>Gecko Moria</span>
         }
         <div class="gif-overlay"></div>
      </div>
    </div>


        const rankedEvents = {
    <!-- hina -->
            0: [ // domingo
    <div class="personagem-box tier-gold bruiser lutador fruta">
                { hour: 15, image: "/images/7/7e/Ranked_duo_2v2_event.png", label: "Ranked Duo 2v2" },
      <div class="personagem" data-static="https://i.postimg.cc/90hBFNYZ/hina.png" data-gif="">
                { hour: 16, image: "/images/b/b1/Ranked_solo_2v2_event.png", label: "Ranked Solo 2v2" },
        <span>Hina</span>
                { hour: 17, image: "/images/e/ed/Ranked_1v1_event.png", label: "Ranked 1v1" },
        <div class="gif-overlay"></div>
            ],
      </div>
            2: [ // terça
    </div>
                { hour: 20, image: "/images/7/7e/Ranked_duo_2v2_event.png", label: "Ranked Duo 2v2" },
                { hour: 21, image: "/images/b/b1/Ranked_solo_2v2_event.png", label: "Ranked Solo 2v2" },
                { hour: 22, image: "/images/e/ed/Ranked_1v1_event.png", label: "Ranked 1v1" },
            ],
            4: [ // quinta
                { hour: 20, image: "/images/7/7e/Ranked_duo_2v2_event.png", label: "Ranked Duo 2v2" },
                { hour: 21, image: "/images/b/b1/Ranked_solo_2v2_event.png", label: "Ranked Solo 2v2" },
                { hour: 22, image: "/images/e/ed/Ranked_1v1_event.png", label: "Ranked 1v1" },
            ],
            6: [ // sabado
                { hour: 15, image: "/images/7/7e/Ranked_duo_2v2_event.png", label: "Ranked Duo 2v2" },
                { hour: 16, image: "/images/b/b1/Ranked_solo_2v2_event.png", label: "Ranked Solo 2v2" },
                { hour: 17, image: "/images/e/ed/Ranked_1v1_event.png", label: "Ranked 1v1" },
            ]
        };


    <!-- burgess -->
    <div class="personagem-box tier-gold tanque lutador">
      <div class="personagem hancock" data-static="https://i.postimg.cc/hv27WCyS/burgess.png" data-gif="">
        <span>Jesus Burgess</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


        const alternatedEvents = [
    <!-- kclass -->
            {
    <div class="personagem-box tier-gold atirador tanque fruta">
                name: 'Marineford',
      <div class="personagem" data-static="https://i.postimg.cc/wMq0QGRH/kclass.png" data-gif="">
                image: '/images/e/e6/Marineford_event.png'
        <span>Eustass Kclass</span>
            },
        <div class="gif-overlay"></div>
            {
      </div>
                name: 'World Boss',
    </div>
                image: '/images/9/93/Anywb_event.png'
            }


         ];
    <!-- killer -->
    <div class="personagem-box tier-gold dps cortante">
      <div class="personagem" data-static="https://i.postimg.cc/44W5Twh7/killer.png" data-gif="">
         <span>Killer</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


        function getWeekNumber(date) {
    <!-- koala -->
            const start = new Date(date.getFullYear(), 0, 1);
    <div class="personagem-box tier-gold dps lutador">
            const diff = (date - start + ((start.getTimezoneOffset() - date.getTimezoneOffset()) * 60000));
      <div class="personagem" data-static="https://i.postimg.cc/FsqwhhJL/koala.png" data-gif="">
            const oneWeek = 604800000; // ms week
        <span>Koala</span>
            return Math.floor(diff / oneWeek);
        <div class="gif-overlay"></div>
        }
      </div>
    </div>


        function createBrazilDateFromYMD(year, month, day, hour, minute, second = 0) {
    <!-- leo e mansherry -->
            return new Date(
    <div class="personagem-box tier-gold suporte especialista fruta">
                year, month - 1, day,
      <div class="personagem hancock" data-static="https://i.postimg.cc/2yyXftkG/leo-masherry.png" data-gif="">
                hour, minute, second
        <span>Leo & Mansherry</span>
            );
        <div class="gif-overlay"></div>
        }
      </div>
    </div>


        async function obtenerImagenWorldBoss(modo = 'actual') {
    <!-- luffy pré -->
            try {
    <div class="personagem-box tier-gold bruiser lutador fruta">
                const response = await fetch('https://wiki.gla.com.br/index.php?title=Wbevents.json&action=raw');
      <div class="personagem luffypre" data-static="https://i.postimg.cc/PrZ0fBbV/luffypre.png" data-gif="">
                const data = await response.json();
        <span>Monkey D. Luffy</span>
                const events = data.world_boss_events;
        <div class="gif-overlay"></div>
      </div>
    </div>


                const now = getBrazilTime();
    <!-- nami pré -->
                const currentTime = now.getTime();
    <div class="personagem-box tier-gold dps especialista">
      <div class="personagem" data-static="https://i.postimg.cc/dQh6Rp1s/namipre2.png" data-gif="">
        <span>Nami</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


                const sortedDates = Object.keys(events).sort(); // Asegura orden
    <!-- perona -->
    <div class="personagem-box tier-gold suporte especialista fruta">
      <div class="personagem perona" data-static="https://i.postimg.cc/138VbhkX/perona2.png" data-gif="">
        <span>Perona</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


                for (const fechaStr of sortedDates) {
    <!-- rebecca -->
                    const [year, month, day] = fechaStr.split('-').map(Number);
    <div class="personagem-box tier-gold tanque cortante">
                    const inicio = createBrazilDateFromYMD(year, month, day, 11, 0);
      <div class="personagem hancock" data-static="https://i.postimg.cc/9XKgwCct/rebecca.png" data-gif="">
                    const fin = createBrazilDateFromYMD(year, month, day + 1, 9, 0);
        <span>Rebecca</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


                    if (modo === 'actual' && currentTime >= inicio.getTime() && currentTime < fin.getTime()) {
    <!-- robin pré -->
                        return events[fechaStr];
    <div class="personagem-box tier-gold dps especialista fruta">
                    }
      <div class="personagem" data-static="https://i.postimg.cc/W13DRLJC/robinpre.png" data-gif="">
        <span>Robin</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


                    if (modo === 'proximo' && currentTime < inicio.getTime()) {
    <!-- zoro pré -->
                        return events[fechaStr];
    <div class="personagem-box tier-gold bruiser cortante">
                    }
      <div class="personagem" data-static="https://i.postimg.cc/B6q9ysj1/zoropre.png" data-gif="">
                }
        <span>Zoro</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


                return null;
    <!-- ryuma -->
            } catch (error) {
    <div class="personagem-box tier-gold dps cortante">
                console.error('Error al obtener imagen del World Boss:', error);
      <div class="personagem" data-static="https://i.postimg.cc/vmhS4nmc/ryuma.png" data-gif="">
                return null;
        <span>Ryuma</span>
            }
        <div class="gif-overlay"></div>
        }
      </div>
    </div>


        function pad(value) {
    <!-- apoo -->
            return value < 10 ? '0' + value : value;
    <div class="personagem-box tier-gold suporte atirador fruta">
         }
      <div class="personagem hancock" data-static="https://i.postimg.cc/fWVDhzHx/apoo.png" data-gif="">
        <span>Scratchmen Apoo</span>
         <div class="gif-overlay"></div>
      </div>
    </div>


        function getBrazilTime() {
    <!-- smoker -->
            const formatter = new Intl.DateTimeFormat('en-US', {
    <div class="personagem-box tier-gold tanque lutador fruta">
                timeZone: 'America/Sao_Paulo',
      <div class="personagem kizaru" data-static="https://i.postimg.cc/P53ShjVw/smoker.png" data-gif="">
                hour12: false,
        <span>Smoker</span>
                year: 'numeric',
        <div class="gif-overlay"></div>
                month: '2-digit',
      </div>
                day: '2-digit',
    </div>
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });


            const parts = formatter.formatToParts(new Date());
    <!-- law -->
            const values = Object.fromEntries(parts.map(({ type, value }) => [type, value]));
    <div class="personagem-box tier-gold dps cortante especialista fruta">
      <div class="personagem" data-static="https://i.postimg.cc/FRtgssy7/law.png" data-gif="">
        <span>Trafalgar D. Water Law</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


            return new Date(
    <!-- urouge -->
                parseInt(values.year),
    <div class="personagem-box tier-gold tanque lutador fruta">
                parseInt(values.month) - 1,
      <div class="personagem" data-static="https://i.postimg.cc/1zDVB0F3/urouge.png" data-gif="">
                parseInt(values.day),
        <span>Urouge</span>
                parseInt(values.hour),
        <div class="gif-overlay"></div>
                parseInt(values.minute),
      </div>
                parseInt(values.second)
    </div>
            );
        }


        function createBrazilDate(hour, minute, second = 0) {
    <!-- usopp pré -->
            const today = getBrazilTime();
    <div class="personagem-box tier-gold dps atirador">
            return new Date(
      <div class="personagem" data-static="https://i.postimg.cc/qRSRdzy5/usopppre.png" data-gif="">
                today.getFullYear(), today.getMonth(),
        <span>Usopp</span>
                today.getDate(), hour,
        <div class="gif-overlay"></div>
                minute, second
      </div>
            );
    </div>
        }


        function ajustarHoraBrasilALocal(dateBrasil) {
    <!-- van augur -->
            const offsetUsuarioMin = dateBrasil.getTimezoneOffset();
    <div class="personagem-box tier-gold dps atirador">
            const offsetBrasilMin = 180;
      <div class="personagem hancock" data-static="https://i.postimg.cc/ZKTk5JH7/van.png" data-gif="">
        <span>Van Augur</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


            const diferenciaMin = offsetUsuarioMin - offsetBrasilMin;
    <!-- ichiji -->
    <div class="personagem-box tier-gold bruiser lutador">
      <div class="personagem" data-static="https://i.postimg.cc/x1wtqRYf/ichiji.png" data-gif="">
        <span>Vinsmoke Ichiji</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


            return new Date(dateBrasil.getTime() - diferenciaMin * 60 * 1000);
    <!-- niji -->
         }
    <div class="personagem-box tier-gold dps atirador">
      <div class="personagem" data-static="https://i.postimg.cc/RhYwySZS/niji.png" data-gif="">
        <span>Vinsmoke Niji</span>
         <div class="gif-overlay"></div>
      </div>
    </div>


         function startGlobalEventCountdown(eventStartTime, eventEndTime) {
    <!-- reiju -->
            if (globalEventsInterval) clearInterval(globalEventsInterval);
    <div class="personagem-box tier-gold suporte especialista">
      <div class="personagem" data-static="https://i.postimg.cc/5NHBvCs6/reiju.png" data-gif="">
        <span>Vinsmoke Reiju</span>
         <div class="gif-overlay"></div>
      </div>
    </div>


            globalEventsInterval = setInterval(() => {
    <!-- sanji pré -->
                const now = getBrazilTime().getTime();
    <div class="personagem-box tier-gold dps lutador">
      <div class="personagem sanjipre" data-static="https://i.postimg.cc/CKKkhnnh/sanjipre.png" data-gif="">
        <span>Vinsmoke Sanji</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


                if (now < eventStartTime) {
    <!-- yonji -->
                    // Ainda não começou, mostrar contagem regressiva
    <div class="personagem-box tier-gold tanque lutador">
                    const timeToStart = Math.floor((eventStartTime - now) / 1000);
      <div class="personagem" data-static="https://i.postimg.cc/KvFKc3C6/yonji.png" data-gif="">
                    const minutes = Math.floor(timeToStart / 60);
        <span>Vinsmoke Yonji</span>
                    const seconds = timeToStart % 60;
        <div class="gif-overlay"></div>
                    globalEventsTimer.innerHTML = pad(minutes) + ":" + pad(seconds);
      </div>
                } else if (now >= eventStartTime && now < eventEndTime) {
    </div>
                    // Já começou, mostrar "Iniciando: mm:ss"
                    const timeRemaining = Math.ceil((eventEndTime - now) / 1000);
                    const minutes = Math.floor(timeRemaining / 60);
                    const seconds = timeRemaining % 60;
                    globalEventsTimer.innerHTML = 'Iniciando: ' + pad(minutes) + ":" + pad(seconds);
                } else {
                    // Terminou
                    clearInterval(globalEventsInterval);
                    setGlobalEvent();
                }
            }, 1000);
        }


         function rankedCountdown(eventStart, eventEnd) {
    <!-- drake -->
            if (rankedInterval) clearInterval(rankedInterval);
    <div class="personagem-box tier-gold bruiser lutador fruta">
      <div class="personagem" data-static="https://i.postimg.cc/tRDbP1sQ/drake.png" data-gif="">
        <span>X Drake</span>
         <div class="gif-overlay"></div>
      </div>
    </div>


            rankedInterval = setInterval(() => {
    <!-- satori -->
                const now = getBrazilTime().getTime();
    <div class="personagem-box tier-prata especialista atirador suporte">
      <div class="personagem" data-static="https://i.postimg.cc/mkYZvRRx/satori.png" data-gif="">
        <span>Satori</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


                if (now < eventStart) {
    <!-- gedatsu -->
                    const timeLeft = Math.floor((eventStart - now) / 1000);
    <div class="personagem-box tier-prata lutador dps">
                    const min = Math.floor(timeLeft / 60);
      <div class="personagem hancock" data-static="https://i.postimg.cc/pTv60t05/gedatsu.png" data-gif="">
                    const sec = timeLeft % 60;
        <span>Gedatsu</span>
                    rankedTimer.innerHTML = 'Começa em: ' + pad(min) + ':' + pad(sec);
        <div class="gif-overlay"></div>
                } else if (now >= eventStart && now < eventEnd) {
      </div>
                    const timeLeft = Math.floor((eventEnd - now) / 1000);
    </div>
                    const min = Math.floor(timeLeft / 60);
                    const sec = timeLeft % 60;
                    rankedTimer.innerHTML = 'Em andamento: ' + pad(min) + ':' + pad(sec);
                } else {
                    clearInterval(rankedInterval);
                    rankedTimer.innerHTML = 'Evento finalizado';
                }
            }, 1000);
        }


         function worldBossCountdown(eventStartTime, eventEndTime) {
    <!-- ohm -->
            if (worldBossInterval) clearInterval(worldBossInterval);
    <div class="personagem-box tier-prata cortante tanque">
      <div class="personagem hancock" data-static="https://i.postimg.cc/65q1bchc/ohm.png" data-gif="">
        <span>Ohm</span>
         <div class="gif-overlay"></div>
      </div>
    </div>


            worldBossInterval = setInterval(() => {
    <!-- shura -->
                const now = getBrazilTime().getTime();
    <div class="personagem-box tier-prata cortante dps">
      <div class="personagem" data-static="https://i.postimg.cc/j25v9qy2/shura.png" data-gif="">
        <span>Shura</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


                if (now < eventStartTime) {
    <!-- arlong -->
                    const diff = eventStartTime - now;
    <div class="personagem-box tier-prata bruiser lutador">
                    const totalSeconds = Math.floor(diff / 1000);
      <div class="personagem" data-static="https://i.postimg.cc/j2LQcgrJ/arlong.png" data-gif="">
                    const hours = Math.floor(totalSeconds / 3600);
        <span>Arlong </span>
                    const minutes = Math.floor((totalSeconds % 3600) / 60);
        <div class="gif-overlay"></div>
                    const seconds = totalSeconds % 60;
      </div>
    </div>


                    worldBossTimer.innerHTML =
    <!-- bepo -->
                        'Começa em: ' +
    <div class="personagem-box tier-prata dps lutador">
                        pad(hours) + ':' +
      <div class="personagem" data-static="https://i.postimg.cc/MKfmjFDC/bepo.png" data-gif="">
                        pad(minutes) + ':' +
        <span>Bepo</span>
                        pad(seconds);
        <div class="gif-overlay"></div>
                } else if (now >= eventStartTime && now < eventEndTime) {
      </div>
                    const diff = eventEndTime - now;
    </div>
                    const totalSeconds = Math.floor(diff / 1000);
                    const hours = Math.floor(totalSeconds / 3600);
                    const minutes = Math.floor((totalSeconds % 3600) / 60);
                    const seconds = totalSeconds % 60;


                    worldBossTimer.innerHTML =
    <!-- bon clay -->
                        'Em andamento: ' +
    <div class="personagem-box tier-prata dps lutador fruta">
                        pad(hours) + ':' +
      <div class="personagem" data-static="https://i.postimg.cc/bJ3jBpZF/BonClay.webp" data-gif="">
                        pad(minutes) + ':' +
        <span>Bon Clay</span>
                        pad(seconds);
        <div class="gif-overlay"></div>
                } else {
      </div>
                    clearInterval(worldBossInterval);
    </div>
                    worldBossTimer.innerHTML = 'Evento finalizado';
                }
            }, 1000);
        }


        function setGlobalEvent() {
    <!-- buggy -->
            const userNow = new Date();
    <div class="personagem-box tier-prata dps atirador fruta">
            const now = getBrazilTime();
      <div class="personagem" data-static="https://i.postimg.cc/Vvmdg40W/buggy.png" data-gif="">
            const dayEvents = globalEventsInfo[now.getDay()] || [];
        <span>Buggy</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


            if (dayEvents.length === 0 && userNow.getDate() == now.getDate()) {
    <!-- daddy -->
                globalEventsImage.setAttribute('src', '/images/0/0a/Anyevent.png');
    <div class="personagem-box tier-prata dps atirador">
                globalEventsTimer.innerHTML = 'Acabaram os eventos por hoje';
      <div class="personagem" data-static="https://i.postimg.cc/Vvmdg40W/buggy.png" data-gif="">
                return;
        <span>Daddy Materson</span>
            }
        <div class="gif-overlay"></div>
      </div>
    </div>


            for (let event of dayEvents) {
    <!-- daz -->
                const [h, m, s] = event.time.split(':').map(Number);
    <div class="personagem-box tier-prata tanque cortante fruta">
                const eventStartTime = createBrazilDate(h, m, s);
      <div class="personagem" data-static="https://i.postimg.cc/wjjymWDX/daz.png" data-gif="">
                const eventEndTime = new Date(eventStartTime.getTime() + 5 * 60 * 1000);
        <span>Daz Bones</span>
                const eventStartMs = eventStartTime.getTime();
        <div class="gif-overlay"></div>
                const eventEndMs = eventEndTime.getTime();
      </div>
                const nowMs = now.getTime();
    </div>


                const horaLocal = ajustarHoraBrasilALocal(eventStartTime);
    <!-- zala -->
    <div class="personagem-box tier-prata bruiser cortante fruta">
      <div class="personagem" data-static="https://i.postimg.cc/PqZtpZVb/zala.png" data-gif="">
        <span>Zala</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


                const localTime = horaLocal.toLocaleTimeString(undefined, {
    <!-- krieg -->
                    hour: '2-digit',
    <div class="personagem-box tier-prata dps atirador">
                    minute: '2-digit',
      <div class="personagem" data-static="https://i.postimg.cc/8Cg2YYwW/krieg.png" data-gif="">
                    hour12: false
        <span>Don Krieg</span>
                });
        <div class="gif-overlay"></div>
                //Converte a hora dependendo do fuso horário do usuário
      </div>
    </div>


    <!-- kuro -->
    <div class="personagem-box tier-prata dps cortante">
      <div class="personagem" data-static="https://i.postimg.cc/W47HH1dL/kuro.png" data-gif="">
        <span>Kuro</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


    <!-- galdino -->
    <div class="personagem-box tier-prata suporte especialista fruta">
      <div class="personagem" data-static="https://i.postimg.cc/VkZRr00N/galdino.png" data-gif="">
        <span>Galdino</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


                if (nowMs >= eventStartMs && nowMs < eventEndMs) {
    <!-- tashigi -->
                    // Evento em andamento
    <div class="personagem-box tier-prata dps cortante">
                    globalEventsImage.setAttribute('src', event.src);
      <div class="personagem kizaru" data-static="https://i.postimg.cc/rwH1F670/tashigi.png" data-gif="">
                    startGlobalEventCountdown(eventStartMs, eventEndMs);
        <span>Tashigi</span>
                    return;
        <div class="gif-overlay"></div>
                }
      </div>
    </div>


                if (nowMs < eventStartMs) {
    <!-- nefitari vivi -->
                    // Evento ainda não começou
    <div class="personagem-box tier-prata suporte cortante">
                    globalEventsImage.setAttribute('src', event.src);
      <div class="personagem" data-static="https://i.postimg.cc/jdFwyHcB/vivi.png" data-gif="">
        <span>Nefitari Vivi</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


                    if (eventStartMs - nowMs <= 60 * 60 * 1000) {
    <!-- wapol -->
                        // Falta menos de 1 hora => mostrar contador
    <div class="personagem-box tier-prata tanque atirador fruta">
                        startGlobalEventCountdown(eventStartMs, eventEndMs);
      <div class="personagem" data-static="https://i.postimg.cc/26k8syT4/wapol.png" data-gif="">
                    } else {
        <span>Wapol</span>
                        // Falta mais de 1 hora => apenas mostrar o horário
        <div class="gif-overlay"></div>
                        globalEventsTimer.innerHTML = localTime;
      </div>
                    }
    </div>


                    return;
    <!-- alvclassa -->
                }
    <div class="personagem-box tier-bronze suporte lutador fruta">
            }
      <div class="personagem" data-static="https://i.postimg.cc/yxGC7jXm/Alvclassa-Slime.webp" data-gif="">
        <span>Alvclassa</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


            globalEventsImage.setAttribute('src', '/images/0/0a/Anyevent.png');
    <!-- buchi -->
            globalEventsTimer.innerHTML = 'Acabaram os eventos por hoje';
    <div class="personagem-box tier-bronze bruiser cortante">
        }
      <div class="personagem" data-static="https://i.postimg.cc/VLLZJ8ZD/Splashartbuchi.png" data-gif="">
        <span>Buchi & Sham</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


    <!-- cabaji -->
    <div class="personagem-box tier-bronze dps cortante">
      <div class="personagem cabaji" data-static="https://i.postimg.cc/G3MJSszx/cabaji.png" data-gif="">
        <span>Cabaji</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


         function setWorldBossEvent() {
    <!-- chew -->
            const now = getBrazilTime();
    <div class="personagem-box tier-bronze dps atirador">
            const [h, m, s] = [11, 00, 0];
      <div class="personagem sanjipre" data-static="https://i.postimg.cc/NG1LKh29/chew.png" data-gif="">
         <span>Chew</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


            const currentWeekday = now.getDay();
    <!-- eric -->
    <div class="personagem-box tier-bronze fruta dps atirador cortante">
      <div class="personagem hancock" data-static="https://i.postimg.cc/rmGcwkZq/eric.png" data-gif="">
        <span>Eric</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


            const lastFriday = new Date(createBrazilDate(h, m, s));
    <!-- gin -->
            const daysSinceFriday = (currentWeekday >= 5) ? currentWeekday - 5 : currentWeekday + 2;
    <div class="personagem-box tier-bronze dps atirador lutador">
            lastFriday.setDate(now.getDate() - daysSinceFriday);
      <div class="personagem gin" data-static="https://i.postimg.cc/pLB6rdRG/gin.png" data-gif="">
            lastFriday.setHours(h, m, s, 0);
        <span>Gin</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


            const eventStartTime = lastFriday.getTime();
    <!-- golden week -->
            const eventEndTime = eventStartTime + 22 * 60 * 60 * 1000;
    <div class="personagem-box tier-bronze suporte especialista">
      <div class="personagem sanjipre" data-static="https://i.postimg.cc/8CMsMxX0/goldenweek.png" data-gif="">
        <span>Golden Week</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


            const weekNumber = getWeekNumber(lastFriday);
    <!-- hatchan -->
            const eventIndex = weekNumber % 2;
    <div class="personagem-box tier-bronze suporte cortante">
            const nextEventIndex = (eventIndex + 1) % 2;
      <div class="personagem gin" data-static="https://i.postimg.cc/fy2bMskJ/hatchan.png" data-gif="">
        <span>Hatchan</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


            const currentEvent = alternatedEvents[eventIndex];
    <!-- jango -->
            const nextEvent = alternatedEvents[nextEventIndex];
    <div class="personagem-box tier-bronze atirador suporte">
      <div class="personagem jango" data-static="https://i.postimg.cc/t40jW709/jango2.png" data-gif="">
        <span>Jango</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


            const nowTime = now.getTime();
    <!-- kuroobi -->
            const nowDateOnly = new Date(now);
    <div class="personagem-box tier-bronze tanque lutador">
            nowDateOnly.setHours(0, 0, 0, 0);
      <div class="personagem sanjipre" data-static="https://i.postimg.cc/bvkHrCxz/kuroobi.png" data-gif="">
        <span>Kuroobi</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


            if (nowTime >= eventStartTime && nowTime < eventEndTime) {
    <!-- mohji -->
                // Evento em andamento
    <div class="personagem-box tier-bronze bruiser especialista">
                if (currentEvent.name === 'World Boss') {
      <div class="personagem sanjipre" data-static="https://i.postimg.cc/MTRWhRJ3/mohji.png" data-gif="">
                    obtenerImagenWorldBoss('actual').then(img => {
        <span>Mohji</span>
                        worldBossImage.setAttribute('src', img || currentEvent.image);
        <div class="gif-overlay"></div>
                        bossLink(img, currentEvent.image);
      </div>
                    });
    </div>
                } else {
                    worldBossImage.setAttribute('src', currentEvent.image);
                }
                worldBossCountdown(eventStartTime, eventEndTime);
            } else if (nowTime < eventStartTime) {
                // Evento ainda não começou
                if (currentEvent.name === 'World Boss') {
                    obtenerImagenWorldBoss('proximo').then(img => {
                        worldBossImage.setAttribute('src', img || currentEvent.image);
                        bossLink(img, currentEvent.image);
                    });
                } else {
                    worldBossImage.setAttribute('src', currentEvent.image);
                }
                worldBossCountdown(eventStartTime, eventEndTime);
            } else {
                // Evento já terminou, mostrar o próximo
                const nextFriday = new Date(lastFriday);
                nextFriday.setDate(lastFriday.getDate() + 7);
                nextFriday.setHours(0, 0, 0, 0);


                const daysLeft = Math.round((nextFriday - nowDateOnly) / (24 * 60 * 60 * 1000));
    <!-- morgan -->
                if (nextEvent.name === 'World Boss') {
    <div class="personagem-box tier-bronze bruiser cortante">
                    obtenerImagenWorldBoss('proximo').then(img => {
      <div class="personagem cabaji" data-static="https://i.postimg.cc/RVwPpLpJ/morgan.png" data-gif="">
                        worldBossImage.setAttribute('src', img || nextEvent.image);
        <span>Morgan</span>
                        bossLink(img, nextEvent.image);
        <div class="gif-overlay"></div>
                    });
      </div>
                } else {
    </div>
                    worldBossImage.setAttribute('src', nextEvent.image);
                }
                worldBossTimer.innerHTML = `Em ${daysLeft} dia${daysLeft > 1 ? 's' : ''}`;
            }
        }


        function setRankedEvent() {
    <!-- babe & drophy -->
            const now = getBrazilTime();
    <div class="personagem-box tier-bronze bruiser atirador">
            const day = now.getDay();
      <div class="personagem hancock" data-static="https://i.postimg.cc/vmTtyrhz/babe.png" data-gif="">
            const todayEvents = rankedEvents[day];
        <span>Babe & Drophy</span>
        <div class="gif-overlay"></div>
      </div>
    </div>


            if (!todayEvents || todayEvents.length === 0) {
    <!-- gem & mikita -->
                rankedImage.setAttribute('src', '/images/b/b0/Ranked_semranked_event.png');
    <div class="personagem-box tier-bronze dps atirador fruta">
                rankedTimer.innerHTML = 'Sem eventos hoje';
      <div class="personagem hancock" data-static="https://i.postimg.cc/FsxyJWnp/gem.png" data-gif="">
                return;
        <span>Gem & Mikita</span>
            }
        <div class="gif-overlay"></div>
      </div>
    </div>


            let found = false;
    <!-- pearl -->
    <div class="personagem-box tier-bronze tanque lutador especialista">
      <div class="personagem" data-static="https://i.postimg.cc/Y0HFvY6T/pearl.png" data-gif="">
        <span>Pearl</span>
        <div class="gif-overlay"></div>
      </div>
    </div>
  </div>


            for (let event of todayEvents) {
  <!-- Scripts -->
                const start = createBrazilDate(event.hour, 0, 0);
  <script>
                const end = new Date(start.getTime() + 60 * 60 * 1000);
    const cards = document.querySelectorAll('.personagem');
                const nowMs = now.getTime();


                if (nowMs < start.getTime()) {
    // Define as imagens estáticas e gifs, além do reset ao sair
                    rankedImage.setAttribute('src', event.image);
    cards.forEach(card => {
                    if (start.getTime() - nowMs <= 60 * 60 * 1000) {
      const staticImg = card.getAttribute('data-static');
                        rankedCountdown(start.getTime(), end.getTime());
      const gifImg = card.getAttribute('data-gif');
                    } else {
      const overlay = card.querySelector('.gif-overlay');
                        const local = ajustarHoraBrasilALocal(start).toLocaleTimeString(undefined, {
      card.style.backgroundImage = `url('${staticImg}')`;
                            hour: '2-digit',
                            minute: '2-digit',
                            hour12: false
                        });
                        rankedTimer.innerHTML = local;
                    }
                    found = true;
                    break;
                } else if (nowMs >= start.getTime() && nowMs < end.getTime()) {
                    rankedImage.setAttribute('src', event.image);
                    rankedCountdown(start.getTime(), end.getTime());
                    found = true;
                    break;
                }
            }


            if (!found) {
      card.addEventListener('mouseenter', () => {
                // Mostrar próximo dia com eventos
        const uniqueGifUrl = `${gifImg}?t=${new Date().getTime()}`; // Força reset
                let daysToNext = 1;
        overlay.style.backgroundImage = `url('${uniqueGifUrl}')`;
                while (daysToNext < 7) {
      });
                    const nextDay = (day + daysToNext) % 7;
                    if (rankedEvents[nextDay]) break;
                    daysToNext++;
                }
                rankedImage.setAttribute('src', '/images/b/b0/Ranked_semranked_event.png');
                rankedTimer.innerHTML = `Em ${daysToNext} dia${daysToNext > 1 ? 's' : ''}`;
            }
        }


      card.addEventListener('mouseleave', () => {
        overlay.style.backgroundImage = '';
      });
    });


        document.addEventListener('DOMContentLoaded', function () {
    // Filtragem por nome no campo de busca
            globalEventsTimer = document.getElementById('global-event-timer');
    document.getElementById('search').addEventListener('input', function () {
            globalEventsImage = document.querySelector('.global-event-image');
      const term = this.value.toLowerCase();
            worldBossTimer = document.getElementById('worldboss-timer');
      cards.forEach(card => {
            worldBossImage = document.querySelector('.worldboss-imagen');
        const name = card.querySelector('span').textContent.toLowerCase();
            rankedTimer = document.getElementById('rankedd-timer');
        const wrapper = card.parentElement;
            rankedImage = document.querySelector('.rankedd-image');
        const tierBox = wrapper.parentElement;
            setWorldBossEvent();
        tierBox.style.display = name.includes(term) ? 'block' : 'none';
            setRankedEvent();
      });
            cargarEventos();
     });
        });
     })();




     // CSS
     // Links dos personagens
     document.head.insertAdjacentHTML('beforeend', `
     const personagemLinks = {
  <style>
      "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)",
      "Capone Gang Bege": "https://wiki.gla.com.br/index.php/Capone_Bege",
      "Bon Clay": "https://wiki.gla.com.br/index.php/Mr.2",
      "Alvida (Slime)": "https://wiki.gla.com.br/index.php/Alvida",
      "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",
      "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",
      "X Drake": "https://wiki.gla.com.br/index.php/X_Drake",
      "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",
      "Ichiji": "https://wiki.gla.com.br/index.php/Ichiji",
      "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 Materson": "https://wiki.gla.com.br/index.php/Daddy_Masterson",
      "Daz Bones": "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",
      "Mohji": "https://wiki.gla.com.br/index.php/Mohji",
      "Galdino": "https://wiki.gla.com.br/index.php/Mr.3",
      "Tashigi": "https://wiki.gla.com.br/index.php/Tashigi",
      "Nefitari 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",
      "Golden Week": "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",
      "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"
    };


     .carousel-controls-images {
     // Envolve as boxes com <a> e aplica links clicáveis
         display: flex;
    cards.forEach(card => {
         justify-content: center;
      const span = card.querySelector('span');
         gap: 16px;
      const nomePersonagem = span?.textContent.trim();
         margin-top: 8px;
      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);
      }
     });


     .carousel-thumb {
     const tierButtons = document.querySelectorAll('.tier-btn');
        font-size: 22px;
    const tipoButtons = document.querySelectorAll('.tipo-btn');
        color: #999;
    const personagemBoxes = document.querySelectorAll('.personagem-box');
        cursor: pointer;
        transition: color 0.3s, transform 0.3s;
        will-change: transform;
    }


     .carousel-thumb.active {
     let activeTier = 'all';
        color: #459cca;
    let activeTipo = 'all';
        transform: scale(1.2);
    }


     .carousel-thumb.hidden {
     const iconesClasse = {
        display: none;
      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',
     };




     .carousel-container {
     function updateFiltros() {
         width: 320px;
      personagemBoxes.forEach(box => {
         height: 90px;
         const matchesTier = activeTier === 'all' || box.classList.contains(activeTier);
         overflow: hidden;
         const matchesTipo = activeTipo === 'all' || box.classList.contains(activeTipo);
        margin: 0 auto;
         box.style.display = (matchesTier && matchesTipo) ? 'block' : 'none';
        position: relative;
      });
     }
     }


     .carousel-track {
     tierButtons.forEach(button => {
         display: flex;
      button.addEventListener('click', () => {
         width: 100%;
        const selectedTier = button.dataset.tier;
         transition: transform 0.5s ease-in-out;
        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 === activeTipo || selectedTipo === 'all') {
          activeTipo = 'all';
          tipoButtons.forEach(btn => btn.classList.remove('ativo'));
         } else {
          activeTipo = selectedTipo;
          tipoButtons.forEach(btn => btn.classList.remove('ativo'));
          button.classList.add('ativo');
        }
        updateFiltros();
      });
     });


     .carousel-slide {
     document.querySelectorAll('.personagem-box').forEach(box => {
         width: 100%;
      const classes = box.className.split(/\s+/);
        flex: 0 0 100%;
      const icones = classes
        height: 90px;
         .filter(classe => iconesClasse.hasOwnProperty(classe))
        position: relative;
        .map(classe => {
    }
          const img = document.createElement('img');
          img.src = iconesClasse[classe];
          img.alt = classe;
          img.className = 'classe-icon';
          return img;
        });


    .global-event-image,
      if (icones.length > 0) {
    .worldboss-imagen,
        const wrapper = document.createElement('div');
    .rankedd-image {
        wrapper.className = 'classe-icon-wrapper';
         width: 100%;
         icones.forEach(icon => wrapper.appendChild(icon));
         height: 100%;
         box.appendChild(wrapper);
        object-fit: cover;
      }
     }
     });


    #global-event-timer,
  </script>
    #worldboss-timer,
    #rankedd-timer {
        user-select: none;
        pointer-events: none;
        position: absolute;
        bottom: 3%;
        left: 3px;
        padding: 2px 5px;
        font-size: 1.2em;
        font-weight: bold;
        color: #fff;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        background: linear-gradient(to right, rgba(25, 25, 25, 0.85), rgba(0, 0, 0, 0));
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        max-width: fit-content;
    }


    .rankedd-image {
</body>
        object-fit: fill !important;
    }


    .worldboss-imagen{
</html>
        user-select: unset;
        cursor: pointer;
    }
  </style>
  `);
</script>

Edição das 22h33min de 18 de junho 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.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 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;
   }

   .filtros button:hover {
     background-color: #307ac2;
   }

   .filtros button.ativo {
     background-color: #006eff;
     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;
     right: 5px;
     display: flex;
     gap: 1px;
     z-index: 10;
     pointer-events: none;
   }

   .classe-icon {
     width: 32px;
     height: 32px;
     opacity: 0.9;
     user-select: none;
     pointer-events: none;
   }

   .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.7;
   }
 </style>

</head>

<body> 

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



     <button class="tipo-btn" data-tipo="all">Todos</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="dps">🥈 DPS</button>
     <button class="tipo-btn" data-tipo="bruiser">🥉 Bruiser</button>
     <button class="tipo-btn" data-tipo="suporte">🥉 Suporte</button>
     <button class="tipo-btn" data-tipo="tanque">🥉 Tanque</button>
     <button class="tipo-btn" data-tipo="atirador">🥉 Atirador</button>
     <button class="tipo-btn" data-tipo="lutador">🥉 Lutador</button>

     <button class="tier-btn" data-tier="all">Todos</button>
     <button class="tier-btn" data-tier="tier-diamante">💎 Diamante</button>
     <button class="tier-btn" data-tier="tier-gold">⭐ Ouro</button>
     <button class="tier-btn" data-tier="tier-prata">🥈 Prata</button>
     <button class="tier-btn" data-tier="tier-bronze">🥉 Bronze</button>

       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

       Brook

       Capone Gang Bege

       Carrot

       Chopper

       Sir Crocodile

       Dalmatian

       Franky

       Gecko Moria

       Hina

       Jesus Burgess

       Eustass Kclass

       Killer

       Koala

       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 Materson

       Daz Bones

       Zala

       Don Krieg

       Kuro

       Galdino

       Tashigi

       Nefitari Vivi

       Wapol

       Alvclassa

       Buchi & Sham

       Cabaji

       Chew

       Eric

       Gin

       Golden Week

       Hatchan

       Jango

       Kuroobi

       Mohji

       Morgan

       Babe & Drophy

       Gem & Mikita

       Pearl

 <script>
   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;
       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)",
     "Capone Gang Bege": "https://wiki.gla.com.br/index.php/Capone_Bege",
     "Bon Clay": "https://wiki.gla.com.br/index.php/Mr.2",
     "Alvida (Slime)": "https://wiki.gla.com.br/index.php/Alvida",
     "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",
     "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",
     "X Drake": "https://wiki.gla.com.br/index.php/X_Drake",
     "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",
     "Ichiji": "https://wiki.gla.com.br/index.php/Ichiji",
     "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 Materson": "https://wiki.gla.com.br/index.php/Daddy_Masterson",
     "Daz Bones": "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",
     "Mohji": "https://wiki.gla.com.br/index.php/Mohji",
     "Galdino": "https://wiki.gla.com.br/index.php/Mr.3",
     "Tashigi": "https://wiki.gla.com.br/index.php/Tashigi",
     "Nefitari 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",
     "Golden Week": "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",
     "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 activeTipo = 'all';

   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 = activeTipo === 'all' || box.classList.contains(activeTipo);
       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 === activeTipo || selectedTipo === 'all') {
         activeTipo = 'all';
         tipoButtons.forEach(btn => btn.classList.remove('ativo'));
       } else {
         activeTipo = selectedTipo;
         tipoButtons.forEach(btn => btn.classList.remove('ativo'));
         button.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);
     }
   });

 </script>

</body>

</html>

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