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

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">
<head>
            <a id="global-event-link" style="display: block;" href="#" target="_blank">
  <meta charset="UTF-8">
              <img class="global-event-image" src="/images/0/0a/Anyevent.png" alt="Global Event">
  <title>Teste GIF Hover</title>
            </a>
  <style>
            <div id="global-event-timer"></div>
    .personagem {
        </div>
      width: 200px;
        <div class="carousel-slide worldboss-widget">
      height: 100px;
            <a id="worldboss-link" style="display: block;" href="#" target="_blank">
      border-radius: 10px;
              <img class="worldboss-imagen" src="/images/9/93/Anywb_event.png">
      background-color: #414c5c;
            </a>
      background-image: url('https://postimg.cc/CZ0K6WjF');
            <div id="worldboss-timer"></div>
      background-size: 150%;
        </div>
      background-position: center -30px;
        <div class="carousel-slide rankedd-widget">
      transition: transform 0.3s;
            <a id="ranked-link" style="display: block;" href="https://wiki.gla.com.br/index.php/PVP" target="_blank">
      display: flex;
              <img class="rankedd-image" src="/images/b/b0/Ranked_semranked_event.png" alt="Ranked Event">
      align-items: flex-end;
            </a>
      justify-content: flex-end;
            <div id="rankedd-timer"></div>
      padding: 5px;
        </div>
      font-weight: bold;
    </div>
      font-family: sans-serif;
</div>
      color: white;
<div class="carousel-controls-images">
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    <i class="fa-solid fa-star carousel-thumb active" data-index="0" title="Evento Global"></i>
      position: relative;
    <i class="fa-solid fa-skull carousel-thumb" data-index="1" title="World Boss"></i>
      cursor: pointer;
    <i class="fa-solid fa-shield-halved carousel-thumb" data-index="2" title="Ranked"></i>
      border: 2px solid #58aaff;
</div>
      overflow: hidden;
 
     }
 
<script>
    (function loadFontAwesome() {
        if (!document.querySelector('link[href*="font-awesome"]')) {
            const faLink = document.createElement('link');
            faLink.rel = 'stylesheet';
            faLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css';
            document.head.appendChild(faLink);
        }
    })();
 
    const track = document.querySelector('.carousel-track');
    const thumbs = document.querySelectorAll('.carousel-thumb');
 
    let currentSlide = 0;
    let totalSlides = thumbs.length - 1;
     let intervalId;


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


     function resetInterval() {
     .gif-overlay {
        clearInterval(intervalId);
      position: absolute;
        intervalId = setInterval(() => goToSlide(currentSlide + 1), 12000);
      inset: 0;
      background-repeat: no-repeat;
      background-size: 150%;
      background-position: center -30px;
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 1;
      pointer-events: none;
     }
     }


     thumbs.forEach(thumb => {
     .personagem:hover {
        thumb.addEventListener('click', () => {
      transform: scale(1.05);
            const idx = parseInt(thumb.getAttribute('data-index'));
            goToSlide(idx);
            resetInterval();
        });
    });
 
    resetInterval();
    (function () {
        let globalEventsTimer, globalEventsImage, worldBossTimer, worldBossImage, rankedTimer, rankedImage;
        let globalEventsInterval, worldBossInterval, rankedInterval, globalEventsInfo = {};
       
        const bossLinks = {
        "Aokiji_wb_event.png": "https://wiki.gla.com.br/index.php/Aokiji_(World_Boss)",
        "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){
        const imgSrc = img || image;
        const fileName = imgSrc.split('/').pop();
        const link = bossLinks[fileName] || 'https://wiki.gla.com.br/index.php/World_Boss';
        document.getElementById('worldboss-link').setAttribute('href', link);
        }
      const foxyLinks = {
      "Anyevent.png": "https://wiki.gla.com.br/index.php/Eventos_Globais",
      "Foxy_memory_event.png": "https://wiki.gla.com.br/index.php/Foxy_Memory",
      "Foxy_race_ship_event.png": "https://wiki.gla.com.br/index.php/Foxy_Race_Ship",
      "Foxy_quiz_event.png": "https://wiki.gla.com.br/index.php/Foxy_Quiz",
      "Foxy_count_event.png": "https://wiki.gla.com.br/index.php/Foxy_Count",
      "Foxy_race_event.png": "https://wiki.gla.com.br/index.php/Foxy_Race"
      };
 
      function foxyLink(img, image) {
      const imgSrc = img || image;
      const fileName = imgSrc.split('/').pop();
      const link = foxyLinks[fileName] || 'https://wiki.gla.com.br/index.php/Eventos_Globais';
      document.getElementById('global-event-link').setAttribute('href', link);
      }
 
        // Função para cargar os eventos a partir do JSON
        async function cargarEventos() {
            try {
                const response = await fetch('https://wiki.gla.com.br/index.php?title=Globalevents.json&action=raw');
                const data = await response.json();
                globalEventsInfo = data;
                setGlobalEvent();
 
            } catch (error) {
                console.error('Error al cargar los eventos:', error);
                alert('No se pudieron cargar los eventos. Por favor, inténtalo más tarde.');
            }
        }
 
        const rankedEvents = {
            0: [ // domingo
                { 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" },
            ],
            2: [ // terça
                { 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" },
            ]
        };
 
 
        const alternatedEvents = [
            {
                name: 'Marineford',
                image: '/images/e/e6/Marineford_event.png'
            },
            {
                name: 'World Boss',
                image: '/images/9/93/Anywb_event.png'
            }
 
        ];
 
        function getWeekNumber(date) {
            const start = new Date(date.getFullYear(), 0, 1);
            const diff = (date - start + ((start.getTimezoneOffset() - date.getTimezoneOffset()) * 60000));
            const oneWeek = 604800000; // ms week
            return Math.floor(diff / oneWeek);
        }
 
        function createBrazilDateFromYMD(year, month, day, hour, minute, second = 0) {
            return new Date(
                year, month - 1, day,
                hour, minute, second
            );
        }
 
        async function obtenerImagenWorldBoss(modo = 'actual') {
            try {
                const response = await fetch('https://wiki.gla.com.br/index.php?title=Wbevents.json&action=raw');
                const data = await response.json();
                const events = data.world_boss_events;
 
                const now = getBrazilTime();
                const currentTime = now.getTime();
 
                const sortedDates = Object.keys(events).sort(); // Asegura orden
 
                for (const fechaStr of sortedDates) {
                    const [year, month, day] = fechaStr.split('-').map(Number);
                    const inicio = createBrazilDateFromYMD(year, month, day, 11, 0);
                    const fin = createBrazilDateFromYMD(year, month, day + 1, 9, 0);
 
                    if (modo === 'actual' && currentTime >= inicio.getTime() && currentTime < fin.getTime()) {
                        return events[fechaStr];
                    }
 
                    if (modo === 'proximo' && currentTime < inicio.getTime()) {
                        return events[fechaStr];
                    }
                }
 
                return null;
            } catch (error) {
                console.error('Error al obtener imagen del World Boss:', error);
                return null;
            }
        }
 
        function pad(value) {
            return value < 10 ? '0' + value : value;
        }
 
        function getBrazilTime() {
            const formatter = new Intl.DateTimeFormat('en-US', {
                timeZone: 'America/Sao_Paulo',
                hour12: false,
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
 
            const parts = formatter.formatToParts(new Date());
            const values = Object.fromEntries(parts.map(({ type, value }) => [type, value]));
 
            return new Date(
                parseInt(values.year),
                parseInt(values.month) - 1,
                parseInt(values.day),
                parseInt(values.hour),
                parseInt(values.minute),
                parseInt(values.second)
            );
        }
 
        function createBrazilDate(hour, minute, second = 0) {
            const today = getBrazilTime();
            return new Date(
                today.getFullYear(), today.getMonth(),
                today.getDate(), hour,
                minute, second
            );
        }
 
        function ajustarHoraBrasilALocal(dateBrasil) {
            const offsetUsuarioMin = dateBrasil.getTimezoneOffset();
            const offsetBrasilMin = 180;
 
            const diferenciaMin = offsetUsuarioMin - offsetBrasilMin;
 
            return new Date(dateBrasil.getTime() - diferenciaMin * 60 * 1000);
        }
 
        function startGlobalEventCountdown(eventStartTime, eventEndTime) {
            if (globalEventsInterval) clearInterval(globalEventsInterval);
 
            globalEventsInterval = setInterval(() => {
                const now = getBrazilTime().getTime();
 
                if (now < eventStartTime) {
                    // Ainda não começou, mostrar contagem regressiva
                    const timeToStart = Math.floor((eventStartTime - now) / 1000);
                    const minutes = Math.floor(timeToStart / 60);
                    const seconds = timeToStart % 60;
                    globalEventsTimer.innerHTML = pad(minutes) + ":" + pad(seconds);
                } else if (now >= eventStartTime && now < eventEndTime) {
                    // 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) {
            if (rankedInterval) clearInterval(rankedInterval);
 
            rankedInterval = setInterval(() => {
                const now = getBrazilTime().getTime();
 
                if (now < eventStart) {
                    const timeLeft = Math.floor((eventStart - now) / 1000);
                    const min = Math.floor(timeLeft / 60);
                    const sec = timeLeft % 60;
                    rankedTimer.innerHTML = 'Começa em: ' + pad(min) + ':' + pad(sec);
                } else if (now >= eventStart && now < eventEnd) {
                    const timeLeft = Math.floor((eventEnd - now) / 1000);
                    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) {
            if (worldBossInterval) clearInterval(worldBossInterval);
 
            worldBossInterval = setInterval(() => {
                const now = getBrazilTime().getTime();
 
                if (now < eventStartTime) {
                    const diff = eventStartTime - now;
                    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 =
                        'Começa em: ' +
                        pad(hours) + ':' +
                        pad(minutes) + ':' +
                        pad(seconds);
                } else if (now >= eventStartTime && now < eventEndTime) {
                    const diff = eventEndTime - now;
                    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 =
                        'Em andamento: ' +
                        pad(hours) + ':' +
                        pad(minutes) + ':' +
                        pad(seconds);
                } else {
                    clearInterval(worldBossInterval);
                    worldBossTimer.innerHTML = 'Evento finalizado';
                }
            }, 1000);
        }
 
        function setGlobalEvent() {
            const userNow = new Date();
            const now = getBrazilTime();
            const dayEvents = globalEventsInfo[now.getDay()] || [];
 
            if (dayEvents.length === 0 && userNow.getDate() == now.getDate()) {
                globalEventsImage.setAttribute('src', '/images/0/0a/Anyevent.png');
                globalEventsTimer.innerHTML = 'Acabaram os eventos por hoje';
                return;
            }
 
            for (let event of dayEvents) {
                const [h, m, s] = event.time.split(':').map(Number);
                const eventStartTime = createBrazilDate(h, m, s);
                const eventEndTime = new Date(eventStartTime.getTime() + 5 * 60 * 1000);
                const eventStartMs = eventStartTime.getTime();
                const eventEndMs = eventEndTime.getTime();
                const nowMs = now.getTime();
 
                const horaLocal = ajustarHoraBrasilALocal(eventStartTime);
 
                const localTime = horaLocal.toLocaleTimeString(undefined, {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false
                });
                //Converte a hora dependendo do fuso horário do usuário
 
 
 
                if (nowMs >= eventStartMs && nowMs < eventEndMs) {
                    // Evento em andamento
                    globalEventsImage.setAttribute('src', event.src);
                    startGlobalEventCountdown(eventStartMs, eventEndMs);
                    return;
                }
 
                if (nowMs < eventStartMs) {
                    // Evento ainda não começou
                    globalEventsImage.setAttribute('src', event.src);
 
                    if (eventStartMs - nowMs <= 60 * 60 * 1000) {
                        // Falta menos de 1 hora => mostrar contador
                        startGlobalEventCountdown(eventStartMs, eventEndMs);
                    } else {
                        // Falta mais de 1 hora => apenas mostrar o horário
                        globalEventsTimer.innerHTML = localTime;
                    }
 
                    return;
                }
            }
 
            globalEventsImage.setAttribute('src', '/images/0/0a/Anyevent.png');
            globalEventsTimer.innerHTML = 'Acabaram os eventos por hoje';
        }
 
 
        function setWorldBossEvent() {
            const now = getBrazilTime();
            const [h, m, s] = [11, 00, 0];
 
            const currentWeekday = now.getDay();
 
            const lastFriday = new Date(createBrazilDate(h, m, s));
            const daysSinceFriday = (currentWeekday >= 5) ? currentWeekday - 5 : currentWeekday + 2;
            lastFriday.setDate(now.getDate() - daysSinceFriday);
            lastFriday.setHours(h, m, s, 0);
 
            const eventStartTime = lastFriday.getTime();
            const eventEndTime = eventStartTime + 22 * 60 * 60 * 1000;
 
            const weekNumber = getWeekNumber(lastFriday);
            const eventIndex = weekNumber % 2;
            const nextEventIndex = (eventIndex + 1) % 2;
 
            const currentEvent = alternatedEvents[eventIndex];
            const nextEvent = alternatedEvents[nextEventIndex];
 
            const nowTime = now.getTime();
            const nowDateOnly = new Date(now);
            nowDateOnly.setHours(0, 0, 0, 0);
 
            if (nowTime >= eventStartTime && nowTime < eventEndTime) {
                // Evento em andamento
                if (currentEvent.name === 'World Boss') {
                    obtenerImagenWorldBoss('actual').then(img => {
                        worldBossImage.setAttribute('src', img || currentEvent.image);
                        bossLink(img, currentEvent.image);
                    });
                } 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));
                if (nextEvent.name === 'World Boss') {
                    obtenerImagenWorldBoss('proximo').then(img => {
                        worldBossImage.setAttribute('src', img || nextEvent.image);
                        bossLink(img, nextEvent.image);
                    });
                } else {
                    worldBossImage.setAttribute('src', nextEvent.image);
                }
                worldBossTimer.innerHTML = `Em ${daysLeft} dia${daysLeft > 1 ? 's' : ''}`;
            }
        }
 
        function setRankedEvent() {
            const now = getBrazilTime();
            const day = now.getDay();
            const todayEvents = rankedEvents[day];
 
            if (!todayEvents || todayEvents.length === 0) {
                rankedImage.setAttribute('src', '/images/b/b0/Ranked_semranked_event.png');
                rankedTimer.innerHTML = 'Sem eventos hoje';
                return;
            }
 
            let found = false;
 
            for (let event of todayEvents) {
                const start = createBrazilDate(event.hour, 0, 0);
                const end = new Date(start.getTime() + 60 * 60 * 1000);
                const nowMs = now.getTime();
 
                if (nowMs < start.getTime()) {
                    rankedImage.setAttribute('src', event.image);
                    if (start.getTime() - nowMs <= 60 * 60 * 1000) {
                        rankedCountdown(start.getTime(), end.getTime());
                    } else {
                        const local = ajustarHoraBrasilALocal(start).toLocaleTimeString(undefined, {
                            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) {
                // Mostrar próximo dia com eventos
                let daysToNext = 1;
                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' : ''}`;
            }
        }
 
 
        document.addEventListener('DOMContentLoaded', function () {
            globalEventsTimer = document.getElementById('global-event-timer');
            globalEventsImage = document.querySelector('.global-event-image');
            worldBossTimer = document.getElementById('worldboss-timer');
            worldBossImage = document.querySelector('.worldboss-imagen');
            rankedTimer = document.getElementById('rankedd-timer');
            rankedImage = document.querySelector('.rankedd-image');
            setWorldBossEvent();
            setRankedEvent();
            cargarEventos();
        });
    })();
 
 
    // CSS
    document.head.insertAdjacentHTML('beforeend', `
  <style>
 
    .carousel-controls-images {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 8px;
     }
     }


     .carousel-thumb {
     .personagem:hover .gif-overlay {
        font-size: 22px;
      opacity: 1;
        color: #999;
     }  
        cursor: pointer;
        transition: color 0.3s, transform 0.3s;
        will-change: transform;
     }


     .carousel-thumb.active {
     .container {
        color: #459cca;
  display: flex;
        transform: scale(1.2);
  gap: 10px; /* espaçamento entre os botões */
    }
  flex-wrap: wrap; /* para quebrar linha se não couber */
  justify-content: center; /* opcional: centraliza */
}


    .carousel-thumb.hidden {
        display: none;
    }


.personagem.luffy .gif-overlay {
  background-position: center 0px; /* ajuste aqui para mover para baixo (ex: 10px, 20px...) */
}
  </style>
</head>
<body>


    .carousel-container {
<div class="container">
        width: 320px;
  <div class="personagem"
        height: 90px;
      data-static="https://postimg.cc/CZ0K6WjF"
        overflow: hidden;
      data-gif="https://postimg.cc/vgBbJMDd">
        margin: 0 auto;
    <span>Aokiji</span>
        position: relative;
    <div class="gif-overlay"></div>
    }
  </div>


     .carousel-track {
     <div class="personagem luffy"
        display: flex;
      data-static="https://postimg.cc/SnFQJw1W"
        width: 100%;
      data-gif="https://postimg.cc/CZJwrdhN">
        transition: transform 0.5s ease-in-out;
    <span>Monkey D. Luffy (TS)</span>
    }
    <div class="gif-overlay"></div>
  </div>
</div>
<script>
const cards = document.querySelectorAll('.personagem');


    .carousel-slide {
cards.forEach(card => {
        width: 100%;
  const staticImg = card.getAttribute('data-static');
        flex: 0 0 100%;
  const gifImg = card.getAttribute('data-gif');
        height: 90px;
  const overlay = card.querySelector('.gif-overlay');
        position: relative;
    }


    .global-event-image,
  // Define o fundo estático
    .worldboss-imagen,
  card.style.backgroundImage = `url('${staticImg}')`;
    .rankedd-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    #global-event-timer,
  card.addEventListener('mouseenter', () => {
     #worldboss-timer,
     const uniqueGifUrl = `${gifImg}?t=${new Date().getTime()}`;
    #rankedd-timer {
    overlay.style.backgroundImage = `url('${uniqueGifUrl}')`;
        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 {
  card.addEventListener('mouseleave', () => {
        object-fit: fill !important;
     overlay.style.backgroundImage = '';
    }
  });
});


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

Edição das 02h26min de 16 de junho de 2025

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

 <meta charset="UTF-8">
 <title>Teste GIF Hover</title>
 <style>
   .personagem {
     width: 200px;
     height: 100px;
     border-radius: 10px;
     background-color: #414c5c;
     background-image: url('https://postimg.cc/CZ0K6WjF');
     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;
     font-family: sans-serif;
     color: white;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
     position: relative;
     cursor: pointer;
     border: 2px solid #58aaff;
     overflow: hidden;
   }

   .personagem span {
     z-index: 2;
   }

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

   .personagem:hover {
     transform: scale(1.05);
   }

   .personagem:hover .gif-overlay {
     opacity: 1;
   } 

   .container {
 display: flex;
 gap: 10px; /* espaçamento entre os botões */
 flex-wrap: wrap; /* para quebrar linha se não couber */
 justify-content: center; /* opcional: centraliza */

}


.personagem.luffy .gif-overlay { 

 background-position: center 0px; /* ajuste aqui para mover para baixo (ex: 10px, 20px...) */

} 

 </style>

</head> <body> 

   Aokiji

   Monkey D. Luffy (TS)

<script> const cards = document.querySelectorAll('.personagem');

cards.forEach(card => { 

 const staticImg = card.getAttribute('data-static');
 const gifImg = card.getAttribute('data-gif');
 const overlay = card.querySelector('.gif-overlay');

 // Define o fundo estático
 card.style.backgroundImage = `url('${staticImg}')`;

 card.addEventListener('mouseenter', () => {
   const uniqueGifUrl = `${gifImg}?t=${new Date().getTime()}`;
   overlay.style.backgroundImage = `url('${uniqueGifUrl}')`;
 });

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

});

</script>

</body> </html>

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