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="carousel-container">
<div class="carousel-track">
    <div class="carousel-track">
<div class="carousel-slide global-event-widget">
        <div class="carousel-slide global-event-widget">
<img class="global-event-image" src="/images/0/0a/Anyevent.png" alt="Global Event">
            <img class="global-event-image" src="/images/0/0a/Anyevent.png" alt="Global Event">
<div id="global-event-timer"></div>
            <div id="global-event-timer"></div>
</div>
        </div>
<div class="carousel-slide worldboss-widget">
        <div class="carousel-slide worldboss-widget">
<img class="worldboss-imagen" src="/images/9/93/Anywb_event.png">
            <img class="worldboss-imagen" src="/images/9/93/Anywb_event.png">
<div id="worldboss-timer"></div>
            <div id="worldboss-timer"></div>
</div>
        </div>
<div class="carousel-slide ranked-widget">
        <div class="carousel-slide ranked-widget">
<img class="ranked-image" src="/images/b/b0/Ranked_semranked_event.png" alt="Ranked Event">
            <img class="ranked-image" src="/images/b/b0/Ranked_semranked_event.png" alt="Ranked Event">
<div id="ranked-timer"></div>
            <div id="ranked-timer"></div>
</div>
        </div>
</div>
    </div>
</div>
</div>
<div class="carousel-controls-images">
<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-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-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>
    <i class="fa-solid fa-shield-halved carousel-thumb" data-index="2" title="Ranked"></i>
</div>
</div>




<script>
<script>
(function loadFontAwesome() {
    (function loadFontAwesome() {
if (!document.querySelector('link[href*="font-awesome"]')) {
        if (!document.querySelector('link[href*="font-awesome"]')) {
const faLink = document.createElement('link');
            const faLink = document.createElement('link');
faLink.rel = 'stylesheet';
            faLink.rel = 'stylesheet';
faLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css';
            faLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css';
document.head.appendChild(faLink);
            document.head.appendChild(faLink);
}
        }
})();
    })();


const track = document.querySelector('.carousel-track');
    const track = document.querySelector('.carousel-track');
const thumbs = document.querySelectorAll('.carousel-thumb');
    const thumbs = document.querySelectorAll('.carousel-thumb');


let currentSlide = 0;
    let currentSlide = 0;
let totalSlides = thumbs.length - 1;
    let totalSlides = thumbs.length - 1;
let intervalId;
    let intervalId;
let rankedTimer, rankedImage;
let rankedInterval;


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


function resetInterval() {
    function resetInterval() {
clearInterval(intervalId);
        clearInterval(intervalId);
intervalId = setInterval(() => goToSlide(currentSlide + 1), 12000);
        intervalId = setInterval(() => goToSlide(currentSlide + 1), 12000);
}
    }


thumbs.forEach(thumb => {
    thumbs.forEach(thumb => {
thumb.addEventListener('click', () => {
        thumb.addEventListener('click', () => {
const idx = parseInt(thumb.getAttribute('data-index'));
            const idx = parseInt(thumb.getAttribute('data-index'));
goToSlide(idx);
            goToSlide(idx);
resetInterval();
            resetInterval();
});
        });
});
    });


resetInterval();
    resetInterval();
(function () {
    (function () {
let globalEventsTimer, globalEventsImage, worldBossTimer, worldBossImage;
        let globalEventsTimer, globalEventsImage, worldBossTimer, worldBossImage, rankedTimer, rankedImage;
let globalEventsInterval, worldBossInterval, globalEventsInfo = {};
        let globalEventsInterval, worldBossInterval, rankedInterval, globalEventsInfo = {};


// Função para cargar os eventos a partir do JSON
        // Função para cargar os eventos a partir do JSON
async function cargarEventos() {
        async function cargarEventos() {
try {
            try {
const response = await fetch('https://wiki.gla.com.br/index.php?title=Globalevents.json&action=raw');
                const response = await fetch('https://wiki.gla.com.br/index.php?title=Globalevents.json&action=raw');
const data = await response.json();
                const data = await response.json();
globalEventsInfo = data;
                globalEventsInfo = data;
setGlobalEvent();
                setGlobalEvent();


} catch (error) {
            } catch (error) {
console.error('Error al cargar los eventos:', error);
                console.error('Error al cargar los eventos:', error);
alert('No se pudieron cargar los eventos. Por favor, inténtalo más tarde.');
                alert('No se pudieron cargar los eventos. Por favor, inténtalo más tarde.');
}
            }
}
        }


const rankedEvents = {
        const rankedEvents = {
  0: [ // domingo
            0: [ // domingo
    { hour: 15, image: "/images/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
                { hour: 15, image: "/images/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
    { hour: 16, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
                { hour: 16, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
    { hour: 17, image: "/images/4/4e/Ranked_1x1.png", label: "Ranked 1v1" },
                { hour: 17, image: "/images/4/4e/Ranked_1x1.png", label: "Ranked 1v1" },
  ],
            ],
  2: [ // terça
            3: [ // terça
    { hour: 20, image: "/images/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
                { hour: 15, image: "/images/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
    { hour: 21, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
                { hour: 21, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
    { hour: 22, image: "/images/4/4e/Ranked_1x1.png", label: "Ranked 1v1" },
                { hour: 22, image: "/images/4/4e/Ranked_1x1.png", label: "Ranked 1v1" },
  ],
            ],
  4: [ // quinta
            4: [ // quinta
    { hour: 20, image: "/images/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
                { hour: 20, image: "/images/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
    { hour: 21, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
                { hour: 21, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
    { hour: 22, image: "/images/4/4e/Ranked_1x1.png", label: "Ranked 1v1" },
                { hour: 22, image: "/images/4/4e/Ranked_1x1.png", label: "Ranked 1v1" },
  ],
            ],
  6: [ // sabado
            6: [ // sabado
    { hour: 15, image: "/images/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
                { hour: 15, image: "/images/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
    { hour: 16, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
                { hour: 16, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
    { hour: 17, image: "/images/4/4e/Ranked_1x1.png", label: "Ranked 1v1" },
                { hour: 17, image: "/images/4/4e/Ranked_1x1.png", label: "Ranked 1v1" },
  ]
            ]
};
        };




const alternatedEvents = [
        const alternatedEvents = [
{
            {
name: 'Marineford',
                name: 'Marineford',
image: '/images/e/e6/Marineford_event.png'
                image: '/images/e/e6/Marineford_event.png'
},
            },
{
            {
name: 'World Boss',
                name: 'World Boss',
image: '/images/9/93/Anywb_event.png'
                image: '/images/9/93/Anywb_event.png'
}
            }


];
        ];


function rankedCountdown(eventStart, eventEnd) {
        function getWeekNumber(date) {
    if (rankedInterval) clearInterval(rankedInterval);
            const start = new Date(date.getFullYear(), 0, 1);
            const diff = (date - start + ((start.getTimezoneOffset() - date.getTimezoneOffset()) * 60000));
            const oneWeek = 604800000; // ms en una semana
            return Math.floor(diff / oneWeek);
        }


    rankedInterval = setInterval(() => {
        function pad(value) {
      const now = getBrazilTime().getTime();
            return value < 10 ? '0' + value : value;
        }


      if (now < eventStart) {
        function getBrazilTime() {
        const timeLeft = Math.floor((eventStart - now) / 1000);
            const formatter = new Intl.DateTimeFormat('en-US', {
        const min = Math.floor(timeLeft / 60);
                timeZone: 'America/Sao_Paulo',
        const sec = timeLeft % 60;
                hour12: false,
        rankedTimer.innerHTML = 'Começa em: ' + pad(min) + ':' + pad(sec);
                year: 'numeric',
      } else if (now >= eventStart && now < eventEnd) {
                month: '2-digit',
        const timeLeft = Math.floor((eventEnd - now) / 1000);
                day: '2-digit',
        const min = Math.floor(timeLeft / 60);
                hour: '2-digit',
        const sec = timeLeft % 60;
                minute: '2-digit',
        rankedTimer.innerHTML = 'Em andamento: ' + pad(min) + ':' + pad(sec);
                second: '2-digit'
      } else {
            });
        clearInterval(rankedInterval);
        rankedTimer.innerHTML = 'Evento finalizado';
      }
    }, 1000);
  }


            const parts = formatter.formatToParts(new Date());
            const values = Object.fromEntries(parts.map(({ type, value }) => [type, value]));


function getWeekNumber(date) {
            return new Date(
const start = new Date(date.getFullYear(), 0, 1);
                parseInt(values.year),
const diff = (date - start + ((start.getTimezoneOffset() - date.getTimezoneOffset()) * 60000));
                parseInt(values.month) - 1,
const oneWeek = 604800000; // ms en una semana
                parseInt(values.day),
return Math.floor(diff / oneWeek);
                parseInt(values.hour),
}
                parseInt(values.minute),
                parseInt(values.second)
            );
        }


function getCurrentEventIndex(now) {
        function createBrazilDate(hour, minute, second = 0) {
const current = new Date(now);
            const today = getBrazilTime();
const day = current.getDay();
            return new Date(
                today.getFullYear(), today.getMonth(),
                today.getDate(), hour,
                minute, second
            );
        }


// Encontrar último sábado a las 10:31
        function ajustarHoraBrasilALocal(dateBrasil) {
const lastSaturday = new Date(current);
            const offsetUsuarioMin = dateBrasil.getTimezoneOffset();
const offset = (day >= 6) ? day - 6 : day + 1; // cuántos días restar para llegar al último sábado
            const offsetBrasilMin = 180;
lastSaturday.setDate(current.getDate() - offset);
lastSaturday.setHours(10, 31, 0, 0); // 10:31 BR


if (current < lastSaturday) {
            const diferenciaMin = offsetUsuarioMin - offsetBrasilMin;
lastSaturday.setDate(lastSaturday.getDate() - 7);
}


const weekNumber = getWeekNumber(lastSaturday);
            return new Date(dateBrasil.getTime() - diferenciaMin * 60 * 1000);
return weekNumber % 2; // par = World Boss, ímpar = Marineford
        }
}


function pad(value) {
        function startGlobalEventCountdown(eventStartTime, eventEndTime) {
return value < 10 ? '0' + value : value;
            if (globalEventsInterval) clearInterval(globalEventsInterval);
}


function getBrazilTime() {
            globalEventsInterval = setInterval(() => {
const formatter = new Intl.DateTimeFormat('en-US', {
                const now = getBrazilTime().getTime();
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());
                if (now < eventStartTime) {
const values = Object.fromEntries(parts.map(({ type, value }) => [type, value]));
                    // 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);
        }


return new Date(
        function rankedCountdown(eventStart, eventEnd) {
parseInt(values.year),
            if (rankedInterval) clearInterval(rankedInterval);
parseInt(values.month) - 1,
parseInt(values.day),
parseInt(values.hour),
parseInt(values.minute),
parseInt(values.second)
);
}


            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 startGlobalEventCountdown(eventStartTime, eventEndTime) {
        function worldBossCountdown(eventStartTime, eventEndTime) {
if (globalEventsInterval) clearInterval(globalEventsInterval);
            if (worldBossInterval) clearInterval(worldBossInterval);


globalEventsInterval = setInterval(() => {
            worldBossInterval = setInterval(() => {
const now = getBrazilTime().getTime();
                const now = getBrazilTime().getTime();


if (now < eventStartTime) {
                if (now < eventStartTime) {
// Ainda não começou, mostrar contagem regressiva
                    const diff = eventStartTime - now;
const timeToStart = Math.floor((eventStartTime - now) / 1000);
                    const totalSeconds = Math.floor(diff / 1000);
const minutes = Math.floor(timeToStart / 60);
                    const hours = Math.floor(totalSeconds / 3600);
const seconds = timeToStart % 60;
                    const minutes = Math.floor((totalSeconds % 3600) / 60);
globalEventsTimer.innerHTML = pad(minutes) + ":" + pad(seconds);
                    const seconds = totalSeconds % 60;
} 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 createBrazilDate(hour, minute, second = 0) {
                    worldBossTimer.innerHTML =
const today = getBrazilTime();
                        'Começa em: ' +
return new Date(
                        pad(hours) + ':' +
today.getFullYear(), today.getMonth(),
                        pad(minutes) + ':' +
today.getDate(), hour,
                        pad(seconds);
minute, second
                } 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;


function ajustarHoraBrasilALocal(dateBrasil) {
                    worldBossTimer.innerHTML =
const offsetUsuarioMin = dateBrasil.getTimezoneOffset();
                        'Em andamento: ' +
const offsetBrasilMin = 180;
                        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()] || [];


const diferenciaMin = offsetUsuarioMin - offsetBrasilMin;
            if (dayEvents.length === 0 && userNow.getDate() == now.getDate()) {
                globalEventsImage.setAttribute('src', '/images/0/0a/Anyevent.png');
                globalEventsTimer.innerHTML = 'Acabaram os eventos por hoje';
                return;
            }


return new Date(dateBrasil.getTime() - diferenciaMin * 60 * 1000);
            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);


function worldBossCountdown(eventStartTime, eventEndTime) {
                const localTime = horaLocal.toLocaleTimeString(undefined, {
if (worldBossInterval) clearInterval(worldBossInterval);
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false
                });
                //Converte a hora dependendo do fuso horário do usuário


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 =
                if (nowMs >= eventStartMs && nowMs < eventEndMs) {
'Começa em: ' +
                    // Evento em andamento
pad(hours) + ':' +
                    globalEventsImage.setAttribute('src', event.src);
pad(minutes) + ':' +
                    startGlobalEventCountdown(eventStartMs, eventEndMs);
pad(seconds);
                    return;
} 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 =
                if (nowMs < eventStartMs) {
'Em andamento: ' +
                    // Evento ainda não começou
pad(hours) + ':' +
                    globalEventsImage.setAttribute('src', event.src);
pad(minutes) + ':' +
pad(seconds);
} else {
clearInterval(worldBossInterval);
worldBossTimer.innerHTML = 'Evento finalizado';
}
}, 1000);
}


function setGlobalEvent() {
                    if (eventStartMs - nowMs <= 60 * 60 * 1000) {
const userNow = new Date();
                        // Falta menos de 1 hora => mostrar contador
const now = getBrazilTime();
                        startGlobalEventCountdown(eventStartMs, eventEndMs);
const dayEvents = globalEventsInfo[now.getDay()] || [];
                    } else {
                        // Falta mais de 1 hora => apenas mostrar o horário
                        globalEventsTimer.innerHTML = localTime;
                    }


if (dayEvents.length === 0 && userNow.getDate() == now.getDate()) {
                    return;
globalEventsImage.setAttribute('src', '/images/0/0a/Anyevent.png');
                }
globalEventsTimer.innerHTML = 'Acabaram os eventos por hoje';
            }
return;
}


for (let event of dayEvents) {
            globalEventsImage.setAttribute('src', '/images/0/0a/Anyevent.png');
const [h, m, s] = event.time.split(':').map(Number);
            globalEventsTimer.innerHTML = 'Acabaram os eventos por hoje';
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, {
        function setWorldBossEvent() {
hour: '2-digit',
            const now = getBrazilTime();
minute: '2-digit',
            const [h, m, s] = [11, 00, 0];
hour12: false
});
//Converte a hora dependendo do fuso horário do usuário


            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);


if (nowMs >= eventStartMs && nowMs < eventEndMs) {
            const eventStartTime = lastFriday.getTime();
// Evento em andamento
            const eventEndTime = eventStartTime + 23 * 60 * 60 * 1000;
globalEventsImage.setAttribute('src', event.src);
startGlobalEventCountdown(eventStartMs, eventEndMs);
return;
}


if (nowMs < eventStartMs) {
            const weekNumber = getWeekNumber(lastFriday);
// Evento ainda não começou
            const eventIndex = weekNumber % 2;
globalEventsImage.setAttribute('src', event.src);
            const nextEventIndex = (eventIndex + 1) % 2;


if (eventStartMs - nowMs <= 60 * 60 * 1000) {
            const currentEvent = alternatedEvents[eventIndex];
// Falta menos de 1 hora => mostrar contador
            const nextEvent = alternatedEvents[nextEventIndex];
startGlobalEventCountdown(eventStartMs, eventEndMs);
} else {
// Falta mais de 1 hora => apenas mostrar o horário
globalEventsTimer.innerHTML = localTime;
}


return;
            const nowTime = now.getTime();
}
            const nowDateOnly = new Date(now);
}
            nowDateOnly.setHours(0, 0, 0, 0);


globalEventsImage.setAttribute('src', '/images/0/0a/Anyevent.png');
            if (nowTime >= eventStartTime && nowTime < eventEndTime) {
globalEventsTimer.innerHTML = 'Acabaram os eventos por hoje';
                // Evento em andamento
}
                worldBossImage.setAttribute('src', currentEvent.image);
                worldBossCountdown(eventStartTime, eventEndTime);
            } else if (nowTime < eventStartTime) {
                // Evento ainda não começou
                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));
                worldBossImage.setAttribute('src', nextEvent.image);
                worldBossTimer.innerHTML = `Em ${daysLeft} dia${daysLeft > 1 ? 's' : ''}`;
            }
        }


function setWorldBossEvent() {
        function setRankedEvent() {
const now = getBrazilTime();
            const now = getBrazilTime();
const [h, m, s] = [11, 00, 0];
            const day = now.getDay();
            const todayEvents = rankedEvents[day];


const currentWeekday = now.getDay();
            if (!todayEvents || todayEvents.length === 0) {
                rankedImage.setAttribute('src', '/images/b/b0/Ranked_semranked_event.png');
                rankedTimer.innerHTML = 'Sem eventos hoje';
                return;
            }


const lastFriday = new Date(createBrazilDate(h, m, s));
            let found = false;
const daysSinceFriday = (currentWeekday >= 5) ? currentWeekday - 5 : currentWeekday + 2;
lastFriday.setDate(now.getDate() - daysSinceFriday);
lastFriday.setHours(h, m, s, 0);


const eventStartTime = lastFriday.getTime();
            for (let event of todayEvents) {
const eventEndTime = eventStartTime + 23 * 60 * 60 * 1000;
                const start = createBrazilDate(event.hour, 0, 0);
                const end = new Date(start.getTime() + 60 * 60 * 1000);
                const nowMs = now.getTime();


const weekNumber = getWeekNumber(lastFriday);
                if (nowMs < start.getTime()) {
const eventIndex = weekNumber % 2;
                    rankedImage.setAttribute('src', event.image);
const nextEventIndex = (eventIndex + 1) % 2;
                    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;
                }
            }


const currentEvent = alternatedEvents[eventIndex];
            if (!found) {
const nextEvent = alternatedEvents[nextEventIndex];
                // 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/4/44/Ranked_2x2_duo.png');
                rankedTimer.innerHTML = `Em ${daysToNext} dia${daysToNext > 1 ? 's' : ''}`;
            }
        }


const nowTime = now.getTime();
const nowDateOnly = new Date(now);
nowDateOnly.setHours(0, 0, 0, 0);


if (nowTime >= eventStartTime && nowTime < eventEndTime) {
        document.addEventListener('DOMContentLoaded', function () {
// Evento em andamento
            globalEventsTimer = document.getElementById('global-event-timer');
worldBossImage.setAttribute('src', currentEvent.image);
            globalEventsImage = document.querySelector('.global-event-image');
worldBossCountdown(eventStartTime, eventEndTime);
            worldBossTimer = document.getElementById('worldboss-timer');
} else if (nowTime < eventStartTime) {
            worldBossImage = document.querySelector('.worldboss-imagen');
// Evento ainda não começou
            rankedTimer = document.getElementById('ranked-timer');
worldBossImage.setAttribute('src', currentEvent.image);
            rankedImage = document.querySelector('.ranked-image');
worldBossCountdown(eventStartTime, eventEndTime);
            setWorldBossEvent();
} else {
            setRankedEvent();
// Evento já terminou, mostrar o próximo
            cargarEventos();
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));
worldBossImage.setAttribute('src', nextEvent.image);
worldBossTimer.innerHTML = `Em ${daysLeft} dia${daysLeft > 1 ? 's' : ''}`;
}
}


function setRankedEvent() {
     // CSS
     const now = getBrazilTime();
     document.head.insertAdjacentHTML('beforeend', `
     const day = now.getDay();
  <style>
    const todayEvents = rankedEvents[day];


     if (!todayEvents || todayEvents.length === 0) {
     .carousel-controls-images {
      rankedImage.setAttribute('src', '/images/4/44/Ranked_2x2_duo.png');
        display: flex;
      rankedTimer.innerHTML = 'Sem eventos hoje';
        justify-content: center;
      return;
        gap: 16px;
        margin-top: 8px;
     }
     }


     let found = false;
     .carousel-thumb {
        font-size: 22px;
        color: #999;
        cursor: pointer;
        transition: color 0.3s, transform 0.3s;
        will-change: transform;
    }


     for (let event of todayEvents) {
     .carousel-thumb.active {
      const start = createBrazilDate(event.hour, 0, 0);
         color: #459cca;
      const end = new Date(start.getTime() + 60 * 60 * 1000);
         transform: scale(1.2);
      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) {
     .carousel-thumb.hidden {
      // Mostrar próximo dia com eventos
         display: none;
      let daysToNext = 1;
      while (daysToNext < 7) {
        const nextDay = (day + daysToNext) % 7;
        if (rankedEvents[nextDay]) break;
         daysToNext++;
      }
      rankedImage.setAttribute('src', '/images/4/44/Ranked_2x2_duo.png');
      rankedTimer.innerHTML = `Em ${daysToNext} dia${daysToNext > 1 ? 's' : ''}`;
     }
     }
  }




document.addEventListener('DOMContentLoaded', function () {
    .carousel-container {
globalEventsTimer = document.getElementById('global-event-timer');
        width: 320px;
globalEventsImage = document.querySelector('.global-event-image');
        height: 90px;
worldBossTimer = document.getElementById('worldboss-timer');
        overflow: hidden;
worldBossImage = document.querySelector('.worldboss-imagen');
        margin: 0 auto;
rankedTimer = document.getElementById('ranked-timer');
        position: relative;
rankedImage = document.querySelector('.ranked-image');
    }
setWorldBossEvent();
setRankedEvent();
cargarEventos();
});
})();


    .carousel-track {
        display: flex;
        width: 100%;
        transition: transform 0.5s ease-in-out;
    }


// CSS
    .carousel-slide {
document.head.insertAdjacentHTML('beforeend', `
        width: 100%;
  <style>
        flex: 0 0 100%;
        height: 90px;
        position: relative;
    }


  .carousel-controls-images {
    .global-event-image,
display: flex;
    .worldboss-imagen,
justify-content: center;
    .ranked-image {
gap: 16px;
        width: 100%;
margin-top: 8px;
        height: 100%;
}
        object-fit: cover;
    }


.carousel-thumb {
    #global-event-timer,
font-size: 22px;
    #worldboss-timer,
color: #999;
    #ranked-timer {
cursor: pointer;
        user-select: none;
transition: color 0.3s, transform 0.3s;
        pointer-events: none;
will-change: transform;
        position: absolute;
}
        bottom: 3%;
 
        left: 3px;
.carousel-thumb.active {
        padding: 2px 5px;
color: #459cca;
        font-size: 1.2em;
transform: scale(1.2);
        font-weight: bold;
}
        color: #fff;
 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
.carousel-thumb.hidden {
        background: linear-gradient(to right, rgba(25, 25, 25, 0.85), rgba(0, 0, 0, 0));
display: none;
        border-top-right-radius: 4px;
}
        border-bottom-right-radius: 4px;
 
        max-width: fit-content;
 
    }
  .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,
.ranked-image {
width: 100%;
height: 100%;
object-fit: cover;
}
 
#global-event-timer,
#worldboss-timer,
#ranked-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;
}
   </style>
   </style>
   `);
   `);
</script>
</script>

Edição das 17h44min de 14 de maio de 2025


<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) {
       currentSlide = (index + totalSlides + 1) % (totalSlides + 1);
       track.style.transform = `translateX(-${currentSlide * 100}%)`;
       thumbs.forEach(thumb => thumb.classList.remove('active'));
       thumbs[currentSlide].classList.add('active');
   }
   function resetInterval() {
       clearInterval(intervalId);
       intervalId = setInterval(() => goToSlide(currentSlide + 1), 12000);
   }
   thumbs.forEach(thumb => {
       thumb.addEventListener('click', () => {
           const idx = parseInt(thumb.getAttribute('data-index'));
           goToSlide(idx);
           resetInterval();
       });
   });
   resetInterval();
   (function () {
       let globalEventsTimer, globalEventsImage, worldBossTimer, worldBossImage, rankedTimer, rankedImage;
       let globalEventsInterval, worldBossInterval, rankedInterval, globalEventsInfo = {};
       // 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/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
               { hour: 16, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
               { hour: 17, image: "/images/4/4e/Ranked_1x1.png", label: "Ranked 1v1" },
           ],
           3: [ // terça
               { hour: 15, image: "/images/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
               { hour: 21, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
               { hour: 22, image: "/images/4/4e/Ranked_1x1.png", label: "Ranked 1v1" },
           ],
           4: [ // quinta
               { hour: 20, image: "/images/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
               { hour: 21, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
               { hour: 22, image: "/images/4/4e/Ranked_1x1.png", label: "Ranked 1v1" },
           ],
           6: [ // sabado
               { hour: 15, image: "/images/4/44/Ranked_2x2_duo.png", label: "Ranked Duo 2v2" },
               { hour: 16, image: "/images/8/83/Ranked_2x2_solo.png", label: "Ranked Solo 2v2" },
               { hour: 17, image: "/images/4/4e/Ranked_1x1.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 en una semana
           return Math.floor(diff / oneWeek);
       }
       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 + 23 * 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
               worldBossImage.setAttribute('src', currentEvent.image);
               worldBossCountdown(eventStartTime, eventEndTime);
           } else if (nowTime < eventStartTime) {
               // Evento ainda não começou
               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));
               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/4/44/Ranked_2x2_duo.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('ranked-timer');
           rankedImage = document.querySelector('.ranked-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,
   .ranked-image {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   #global-event-timer,
   #worldboss-timer,
   #ranked-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;
   }
 </style>
 `);

</script>