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

De Wiki Gla
Ir para navegação Ir para pesquisar
Etiqueta: Reversão manual
Linha 1: Linha 1:
<div class="carousel-container">
<div class="infobox-boss-wide">
     <div class="carousel-track">
  <div class="infobox-boss-right">
         <div class="carousel-slide global-event-widget">
     <div class="infobox-skill-info-area">
            <img class="global-event-image" src="/images/0/0a/Anyevent.png" alt="Global Event">
      <div class="skill-box">
            <div id="global-event-timer"></div>
         <div class="infobox-skill-tabs">
          <button class="infobox-skill-tab active" data-video="video1">Golpe Congelante</button>
          <button class="infobox-skill-tab" data-video="video2">Muralha de Gelo</button>
          <button class="infobox-skill-tab" data-video="video3">Explosão Ártica</button>
         </div>
         </div>
         <div class="carousel-slide worldboss-widget">
         <div class="skill-desc" id="desc-text">
            <img class="worldboss-imagen" src="/images/9/93/Anywb_event.png">
          Golpe Congelante: Causa dano em área e reduz a velocidade dos inimigos.
            <div id="worldboss-timer"></div>
        </div>
        <div class="carousel-slide rankedd-widget">
            <img class="rankedd-image" src="/images/b/b0/Ranked_semranked_event.png" alt="Ranked Event">
            <div id="rankedd-timer"></div>
         </div>
         </div>
      </div>
    </div>
    <div class="infobox-skill-video-area">
      <video id="video1" class="skill-video" controls autoplay loop>
        <source src="https://wiki.gla.com.br/images/2/22/Aokiji_sk3.webm" type="video/mp4">
        Seu navegador não suporta vídeo.
      </video>
      <video id="video2" class="skill-video" controls autoplay loop style="display:none"></video>
      <video id="video3" class="skill-video" controls autoplay loop style="display:none"></video>
     </div>
     </div>
</div>
  </div>
<div class="carousel-controls-images">
    <i class="fa-solid fa-star carousel-thumb active" data-index="0" title="Evento Global"></i>
    <i class="fa-solid fa-skull carousel-thumb" data-index="1" title="World Boss"></i>
    <i class="fa-solid fa-shield-halved carousel-thumb" data-index="2" title="Ranked"></i>
</div>
</div>


<script>
<script>
    (function loadFontAwesome() {
  const videoSources = {
        if (!document.querySelector('link[href*="font-awesome"]')) {
    video1: "https://wiki.gla.com.br/images/2/22/Aokiji_sk3.webm",
            const faLink = document.createElement('link');
    video2: "https://wiki.gla.com.br/images/6/6b/Aokiji_sk2.webm",
            faLink.rel = 'stylesheet';
    video3: "https://wiki.gla.com.br/images/7/76/Aokiji_sk1.webm"
            faLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css';
  };
            document.head.appendChild(faLink);
  const skillDescriptions = {
        }
    video1: "Golpe Congelante: Causa dano em área e reduz a velocidade dos inimigos.",
    })();
    video2: "Muralha de Gelo: Cria uma barreira protetora de gelo.",
    video3: "Explosão Ártica: Dispara fragmentos de gelo em várias direções."
  };


    const track = document.querySelector('.carousel-track');
  const tabs = document.querySelectorAll('.infobox-skill-tab');
    const thumbs = document.querySelectorAll('.carousel-thumb');
  const videos = document.querySelectorAll('.skill-video');
  const desc = document.getElementById('desc-text');


    let currentSlide = 0;
  tabs.forEach(tab => {
     let totalSlides = thumbs.length - 1;
     tab.addEventListener('click', () => {
    let intervalId;
      tabs.forEach(i => i.classList.remove('active'));
 
      tab.classList.add('active');
    function goToSlide(index) {
      const vid = tab.getAttribute('data-video');
        currentSlide = (index + totalSlides + 1) % (totalSlides + 1);
      desc.textContent = skillDescriptions[vid];
        track.style.transform = `translateX(-${currentSlide * 100}%)`;
      videos.forEach(v => {
        thumbs.forEach(thumb => thumb.classList.remove('active'));
         if (v.id === vid) {
        thumbs[currentSlide].classList.add('active');
          if (!v.querySelector('source')) {
    }
             const source = document.createElement('source');
 
            source.src = videoSources[vid];
    function resetInterval() {
            source.type = "video/mp4";
        clearInterval(intervalId);
            v.appendChild(source);
        intervalId = setInterval(() => goToSlide(currentSlide + 1), 12000);
          }
    }
          v.style.display = '';
 
          v.load();
    thumbs.forEach(thumb => {
          v.play();
         thumb.addEventListener('click', () => {
        } else {
             const idx = parseInt(thumb.getAttribute('data-index'));
          v.pause();
            goToSlide(idx);
          v.style.display = 'none';
            resetInterval();
          while (v.firstChild) v.removeChild(v.firstChild);
         });
         }
      });
     });
     });
  });
</script>


    resetInterval();
<style>
    (function () {
.infobox-boss-wide {
        let globalEventsTimer, globalEventsImage, worldBossTimer, worldBossImage, rankedTimer, rankedImage;
  display: flex;
        let globalEventsInterval, worldBossInterval, rankedInterval, globalEventsInfo = {};
  flex-direction: column;
 
  align-items: center;
        // Função para cargar os eventos a partir do JSON
  justify-content: center;
        async function cargarEventos() {
  width: 100%;
            try {
  min-height: unset;
                const response = await fetch('https://wiki.gla.com.br/index.php?title=Globalevents.json&action=raw');
  background: none;
                const data = await response.json();
  border: none;
                globalEventsInfo = data;
  border-radius: 12px;
                setGlobalEvent();
  box-shadow: none;
 
  font-family: sans-serif;
            } catch (error) {
  color: #222;
                console.error('Error al cargar los eventos:', error);
  overflow: hidden;
                alert('No se pudieron cargar los eventos. Por favor, inténtalo más tarde.');
}
            }
.infobox-boss-right {
        }
  width: 100%;
 
  display: flex;
        const rankedEvents = {
  flex-direction: column;
            0: [ // domingo
  align-items: center;
                { hour: 15, image: "/images/7/7e/Ranked_duo_2v2_event.png", label: "Ranked Duo 2v2" },
  justify-content: center;
                { 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" },
.skill-box {
            ],
  background: none;;
            2: [ // terça
  color: #222;
                { hour: 20, image: "/images/7/7e/Ranked_duo_2v2_event.png", label: "Ranked Duo 2v2" },
  border-radius: 12px;
                { hour: 21, image: "/images/b/b1/Ranked_solo_2v2_event.png", label: "Ranked Solo 2v2" },
  box-shadow: none;
                { hour: 22, image: "/images/e/ed/Ranked_1v1_event.png", label: "Ranked 1v1" },
  width: 100%;
            ],
  max-width: 700px;
            4: [ // quinta
  box-sizing: border-box;
                { hour: 20, image: "/images/7/7e/Ranked_duo_2v2_event.png", label: "Ranked Duo 2v2" },
  padding: 24px 24px 20px 24px;
                { hour: 21, image: "/images/b/b1/Ranked_solo_2v2_event.png", label: "Ranked Solo 2v2" },
  display: flex;
                { hour: 22, image: "/images/e/ed/Ranked_1v1_event.png", label: "Ranked 1v1" },
  flex-direction: column;
            ],
  align-items: center;
            6: [ // sabado
  gap: 18px;
                { hour: 15, image: "/images/7/7e/Ranked_duo_2v2_event.png", label: "Ranked Duo 2v2" },
  backdrop-filter: blur(2px);
                { hour: 16, image: "/images/b/b1/Ranked_solo_2v2_event.png", label: "Ranked Solo 2v2" },
  margin: 0 auto 24px auto;
                { hour: 17, image: "/images/e/ed/Ranked_1v1_event.png", label: "Ranked 1v1" },
}
            ]
.infobox-skill-info-area {
        };
  width: 100%;
 
  max-width: 900px;
 
  display: flex;
        const alternatedEvents = [
  flex-direction: column;
            {
  align-items: center;
                name: 'Marineford',
  justify-content: center;
                image: '/images/e/e6/Marineford_event.png'
  margin-bottom: 16px;
            },
  margin-top: 24px;
            {
  gap: 12px;
                name: 'World Boss',
}
                image: '/images/9/93/Anywb_event.png'
.infobox-skill-tabs {
            }
  display: flex;
 
  gap: 12px;
        ];
  justify-content: center;
 
  margin-bottom: 0;
        function getWeekNumber(date) {
  width: 100%;
            const start = new Date(date.getFullYear(), 0, 1);
}
            const diff = (date - start + ((start.getTimezoneOffset() - date.getTimezoneOffset()) * 60000));
.infobox-skill-tab {
            const oneWeek = 604800000; // ms week
  cursor: pointer;
            return Math.floor(diff / oneWeek);
  background: #fff;
        }
  color: #222;
 
  border: 2px solid #ffc107;
        async function obtenerImagenWorldBoss(modo = 'actual') {
  border-radius: 8px;
            try {
  padding: 10px 24px;
                const response = await fetch('https://wiki.gla.com.br/index.php?title=Wbevents.json&action=raw');
  font-size: 1em;
                const data = await response.json();
  font-weight: bold;
                const events = data.world_boss_events;
  transition: 0.2s;
 
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                const now = getBrazilTime();
  opacity: 0.7;
                const currentTime = now.getTime();
  margin-bottom: 0;
 
}
                const sortedDates = Object.keys(events).sort(); // Asegura orden
.infobox-skill-tab.active,
 
.infobox-skill-tab:hover {
                for (const fechaStr of sortedDates) {
  opacity: 1;
                    const [year, month, day] = fechaStr.split('-').map(Number);
  background: #ffc107;
                    const inicio = new Date(Date.UTC(year, month - 1, day, 14, 0)); // Viernes 11:00 BR
  color: #181f2a;
                    const fin = new Date(Date.UTC(year, month - 1, day + 1, 12, 0)); // Sábado 09:00 BR
  border-color: #ffc107;
 
}
                    if (modo === 'actual' && currentTime >= inicio.getTime() && currentTime < fin.getTime()) {
.skill-desc {
                        return events[fechaStr];
  font-size: 1.08em;
                    }
  width: 100%;
 
  text-align: center;
                    if (modo === 'proximo' && currentTime < inicio.getTime()) {
  font-weight: 500;
                        return events[fechaStr];
  line-height: 1.5;
                    }
  margin-top: 0;
                }
  margin-bottom: 0;
 
  background: none;
                return null;
  color: #222;
            } catch (error) {
  box-shadow: none;
                console.error('Error al obtener imagen del World Boss:', error);
  border-radius: 0;
                return null;
  padding: 0;
            }
}
        }
.infobox-skill-video-area {
 
  width: 100%;
        function pad(value) {
  max-width: 900px;
            return value < 10 ? '0' + value : value;
  min-height: 270px;
        }
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 8px;
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: none;
  padding: 16px 0;
  margin-left: auto;
  margin-right: auto;
}
.skill-video {
  width: 100%;
  height: auto;
  max-width: 700px;
  border-radius: 8px;
  background: #000;
  display: block;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .infobox-boss-wide {
    min-height: unset;
  }
  .infobox-skill-info-area,
  .infobox-skill-video-area {
    max-width: 100vw;
    width: 100%;
    padding: 0 2vw;
  }
  .skill-video,
  .skill-box {
    max-width: 100vw;
    width: 100%;
  }
}


        function getBrazilTime() {
</style>
            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);
                    });
                } 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);
                    });
                } 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);
                    });
                } 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 {
        font-size: 22px;
        color: #999;
        cursor: pointer;
        transition: color 0.3s, transform 0.3s;
        will-change: transform;
    }
 
    .carousel-thumb.active {
        color: #459cca;
        transform: scale(1.2);
    }
 
    .carousel-thumb.hidden {
        display: none;
    }
 
 
    .carousel-container {
        width: 320px;
        height: 90px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
    }
 
    .carousel-track {
        display: flex;
        width: 100%;
        transition: transform 0.5s ease-in-out;
    }
 
    .carousel-slide {
        width: 100%;
        flex: 0 0 100%;
        height: 90px;
        position: relative;
    }
 
    .global-event-image,
    .worldboss-imagen,
    .rankedd-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
 
    #global-event-timer,
    #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 {
        object-fit: fill !important;
    }
  </style>
  `);
</script>

Edição das 00h14min de 21 de maio de 2025

         <button class="infobox-skill-tab active" data-video="video1">Golpe Congelante</button>
         <button class="infobox-skill-tab" data-video="video2">Muralha de Gelo</button>
         <button class="infobox-skill-tab" data-video="video3">Explosão Ártica</button>

         Golpe Congelante: Causa dano em área e reduz a velocidade dos inimigos.

     <video id="video1" class="skill-video" controls autoplay loop>
       <source src="https://wiki.gla.com.br/images/2/22/Aokiji_sk3.webm" type="video/mp4">
       Seu navegador não suporta vídeo.
     </video>
     <video id="video2" class="skill-video" controls autoplay loop style="display:none"></video>
     <video id="video3" class="skill-video" controls autoplay loop style="display:none"></video>

<script> 

 const videoSources = {
   video1: "https://wiki.gla.com.br/images/2/22/Aokiji_sk3.webm",
   video2: "https://wiki.gla.com.br/images/6/6b/Aokiji_sk2.webm",
   video3: "https://wiki.gla.com.br/images/7/76/Aokiji_sk1.webm"
 };
 const skillDescriptions = {
   video1: "Golpe Congelante: Causa dano em área e reduz a velocidade dos inimigos.",
   video2: "Muralha de Gelo: Cria uma barreira protetora de gelo.",
   video3: "Explosão Ártica: Dispara fragmentos de gelo em várias direções."
 };

 const tabs = document.querySelectorAll('.infobox-skill-tab');
 const videos = document.querySelectorAll('.skill-video');
 const desc = document.getElementById('desc-text');

 tabs.forEach(tab => {
   tab.addEventListener('click', () => {
     tabs.forEach(i => i.classList.remove('active'));
     tab.classList.add('active');
     const vid = tab.getAttribute('data-video');
     desc.textContent = skillDescriptions[vid];
     videos.forEach(v => {
       if (v.id === vid) {
         if (!v.querySelector('source')) {
           const source = document.createElement('source');
           source.src = videoSources[vid];
           source.type = "video/mp4";
           v.appendChild(source);
         }
         v.style.display = ;
         v.load();
         v.play();
       } else {
         v.pause();
         v.style.display = 'none';
         while (v.firstChild) v.removeChild(v.firstChild);
       }
     });
   });
 });

</script>

<style> .infobox-boss-wide { 

 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 min-height: unset;
 background: none;
 border: none;
 border-radius: 12px;
 box-shadow: none;
 font-family: sans-serif;
 color: #222;
 overflow: hidden;

} .infobox-boss-right { 

 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;

} .skill-box { 

 background: none;;
 color: #222;
 border-radius: 12px;
 box-shadow: none;
 width: 100%;
 max-width: 700px;
 box-sizing: border-box;
 padding: 24px 24px 20px 24px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 18px;
 backdrop-filter: blur(2px);
 margin: 0 auto 24px auto;

} .infobox-skill-info-area { 

 width: 100%;
 max-width: 900px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 margin-bottom: 16px;
 margin-top: 24px;
 gap: 12px;

} .infobox-skill-tabs { 

 display: flex;
 gap: 12px;
 justify-content: center;
 margin-bottom: 0;
 width: 100%;

} .infobox-skill-tab { 

 cursor: pointer;
 background: #fff;
 color: #222;
 border: 2px solid #ffc107;
 border-radius: 8px;
 padding: 10px 24px;
 font-size: 1em;
 font-weight: bold;
 transition: 0.2s;
 box-shadow: 0 2px 8px rgba(0,0,0,0.08);
 opacity: 0.7;
 margin-bottom: 0;

} .infobox-skill-tab.active, .infobox-skill-tab:hover { 

 opacity: 1;
 background: #ffc107;
 color: #181f2a;
 border-color: #ffc107;

} .skill-desc { 

 font-size: 1.08em;
 width: 100%;
 text-align: center;
 font-weight: 500;
 line-height: 1.5;
 margin-top: 0;
 margin-bottom: 0;
 background: none;
 color: #222;
 box-shadow: none;
 border-radius: 0;
 padding: 0;

} .infobox-skill-video-area { 

 width: 100%;
 max-width: 900px;
 min-height: 270px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: transparent;
 border-radius: 8px;
 margin-top: 0;
 margin-bottom: 0;
 box-shadow: none;
 padding: 16px 0;
 margin-left: auto;
 margin-right: auto;

} .skill-video { 

 width: 100%;
 height: auto;
 max-width: 700px;
 border-radius: 8px;
 background: #000;
 display: block;
 margin: 0 auto;

} @media (max-width: 900px) { 

 .infobox-boss-wide {
   min-height: unset;
 }
 .infobox-skill-info-area,
 .infobox-skill-video-area {
   max-width: 100vw;
   width: 100%;
   padding: 0 2vw;
 }
 .skill-video,
 .skill-box {
   max-width: 100vw;
   width: 100%;
 }

}

</style>

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