Untitled

  showErrorScreen: function() {
    const currentHash = window.location.hash || '#';
    localStorage.setItem('lastRoute', currentHash);

    $("#header").empty();
    $(".bottom-menu").remove();

    document.body.innerHTML = `
      <div class="error-container" style="
        text-align: center; 
        padding: 20px; 
        height: 100vh; 
        background-color: #65BC98; 
        position: fixed; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;">
        <img src="assets/img/error.svg" style="
          filter: drop-shadow(1px 1px 15px black); 
          opacity: 90%; 
          width: 105px; 
          margin-top: 50px;" />
        <div class="error-container-text" style="
          flex: 1;
          margin-bottom: 120px !important;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;">
          <h3 style="font-size: 1.3rem; font-weight: bold; color: white; margin: 20px 0;">Lamentablemente, hubo un error de conexión. <br> Por favor, intenta nuevamente recargando la página.</h3>
          <button class="btn btn-primary reload-btn" style="padding: 15px 25px; background-color: #d70b51; border: none; color: white; border-radius: 999px;" onclick="window.location.reload()">
            Recargar <i style="margin-left: 10px;" class="fa fa-refresh"></i>
          </button>
          <div id="countdown" style="color: white; margin-top: 10px;">Recargando en 2 segundos...</div>
        </div>
        <img src="assets/img/logo.png" style="
          filter: drop-shadow(1px 1px 15px black) brightness(1); 
          width: 120px; 
          margin-bottom: 60px;" />
      </div>
    `;

    history.pushState(null, null, location.href);
    window.onpopstate = function(event) {
      history.go(1);
    };

    let timeLeft = 2;
    const countdownEl = document.getElementById('countdown');
    
    const countdownInterval = setInterval(() => {
      timeLeft--;
      if (countdownEl) {
        countdownEl.textContent = `Recargando en ${timeLeft} segundo${timeLeft !== 1 ? 's' : ''}...`;
      }
      
      if (timeLeft <= 0) {
        clearInterval(countdownInterval);
        const lastRoute = localStorage.getItem('lastRoute');
        if (lastRoute) {
          window.location.replace(window.location.origin + window.location.pathname + lastRoute);
          setTimeout(() => {
            if (document.querySelector('.error-container')) {
              window.location.reload(true);
            }
          }, 100);
        } else {
          window.location.reload(true);
        }
      }
    }, 1000);

    setTimeout(() => {
      if (document.querySelector('.error-container')) {
        window.location.reload(true);
      }
    }, 3000);
  }