@layout('layouts/portal')
@section('body')
   
 



<script>
  const video = document.querySelector("video");

  if (video) {
    video.addEventListener("canplaythrough", () => {
      document.body.classList.add("loaded");
    });
  }
 
  setTimeout(() => {
    document.body.classList.add("loaded");
  }, 3000); 
</script>





<div class="preloader-container">
  <div class="preloader"></div>
</div>
<video autoplay="" loop="" muted="" playsinline="" preload="auto" class="w-full absolute -mt-[180px] -z-10 h-[800px]" style="object-fit: cover; width: 100%; height: 100%; opacity: 1; ">
  <source src="/images/BG4.mp4" type="video/mp4">
  
</video>

 

<div style="width: 100%; height: 50px;   overflow: hidden; position: relative;">
  <div style="position: absolute; white-space: nowrap; animation: marquee 20s linear infinite; color: #fff; font-size: 18px; line-height: 50px; padding-left: 100%;">
    ⚔️ Promoção ativa por tempo limitado! | 💎 Pacotes com bônus de Cash disponíveis na loja! | 🎉 Eventos especiais aos fins de semana! | 🛡️ Conquiste sua cidade com sua guilda! | 📢 Siga-nos nas redes sociais para novidades exclusivas!
  </div>
</div>

<style>
@keyframes marquee {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}.banner-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 50px auto 0 auto; /* Centralizar horizontalmente */
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-container img {
  width: 100%;
  height: auto;
  display: block;
  animation: brightnessAnimation 4s infinite alternate;
}
#countdown {
  position: absolute;
  top: 50%;
  left: 62%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 62px;
  font-size: 50px;
  font-weight: bold;
  color: #00ccff;
  text-shadow: 0 0 5px #00ccff, 0 0 10px #00ccff, 0 0 20px #ffffff;
  animation: glow-pulse 2s ease-in-out infinite;
  transition: all 0.5s ease-in-out;
}
 

/* Responsivo */
@media (max-width: 768px) {
  #countdown {
    font-size: 1.5rem;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  #countdown {
    font-size: 1.1rem;
    gap: 4px;
  }
}
</style>
<div class="banner-container">
  <img src="/images/Anuncio.png" alt="Semana de Halloween" />
  <div id="countdown">
    <span id="days">00</span>
    <span id="hours">00</span>
    <span id="minutes">00</span>
    <span id="seconds">00</span>
  </div>
</div>







<!-- Script do Cronômetro -->
<script>
  const endDate = new Date('2025-10-11T00:00:00').getTime(); // Atualizado para 16/04/2025 às 20h

  function updateCountdown() {
    const now = new Date().getTime();
    const timeLeft = endDate - now;

    if (timeLeft <= 0) {
      document.getElementById('days').innerText = "00";
      document.getElementById('hours').innerText = "00";
      document.getElementById('minutes').innerText = "00";
      document.getElementById('seconds').innerText = "00";
      return;
    }

    const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
    const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

    const formatNumber = (num) => String(num).padStart(2, '0');

    document.getElementById('days').innerText = formatNumber(days);
    document.getElementById('hours').innerText = formatNumber(hours);
    document.getElementById('minutes').innerText = formatNumber(minutes);
    document.getElementById('seconds').innerText = formatNumber(seconds);
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
</script>





</div>
</div>
<div class="container">
  
@include('partials/header_infos/last_news')
@include('partials/header_infos/last_videos')
@include('partials/portal/ranking_home')
<div>
  <div style="height: 800px; width: 100%; padding-top: 25px; display: flex; justify-content: center; padding-bottom: 50px">
    <div class="salsa" style="color: white; display: flex; flex-direction: column; align-items: center;">
      <div style="font-size: 3.75rem; line-height: 1;">MÍDIAS SOCIAIS</div>
      <div style="margin-top: 10px;">Siga-nos para receber sempre nossas novidades!</div>
      <div style="margin-top: 20px; display: flex; justify-content: space-between; gap: 30px">
        
        <!-- Discord -->
        <iframe 
          src="https://discord.com/widget?id=1387167899747225652&theme=dark/" 
          width="350" 
          height="500" 
          allowtransparency="true" 
          frameborder="0" 
          sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts">
        </iframe>
         <!-- Facebook SDK -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" 
  src="https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v20.0">
</script>

<!-- Facebook Page Plugin -->
<div 
  class="fb-page" 
  data-href="https://www.facebook.com/wydgold23/" 
  data-tabs="timeline" 
  data-width="350" 
  data-height="500" 
  data-small-header="false" 
  data-adapt-container-width="true" 
  data-hide-cover="false" 
  data-show-facepile="true">
</div>


        <!-- Instagram -->
        <blockquote 
          class="instagram-media" 
          data-instgrm-permalink="https://www.instagram.com/dsadsadsadsa" 
          style="background:#FFF; border:0; border-radius:5px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:350px; min-width:326px; padding:0; width:calc(100% - 2px);">
        </blockquote>
        <script async src="//www.instagram.com/embed.js"></script>

      </div>
    </div>
  </div>
</div>


</div>
</div>
</div>   
         

@endsection