Widget:MainPageEvents

           <img class="global-event-image" src="/images/0/0a/Anyevent.png" alt="Global Event">

           <img class="worldboss-imagen" src="/images/9/93/Anywb_event.png">

           <img class="rankedd-image" src="/images/b/b0/Ranked_semranked_event.png" alt="Ranked Event">

<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" },
           ],
           2: [ // terça
               { 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" },
           ],
           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 week
           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/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>