<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Shard Cloud - 502 Bad Gateway</title>
    <link
      rel="icon"
      href="https://shardcloud.app/favicon.ico"
      type="image/x-icon"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, sans-serif;
        background: #0a0e27;
        color: #ffffff;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        overflow-x: hidden;
        position: relative;
      }
      body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, #1a1a3e, #0f1419, #1e2a4a, #0a0e27);
        background-size: 400% 400%;
        animation: gradientShift 15s ease infinite;
        z-index: 0;
      }
      .particle {
        position: absolute;
        background: rgba(255, 107, 107, 0.08);
        border-radius: 50%;
        animation: float 20s infinite;
        z-index: 1;
      }
      .particle:nth-child(1) {
        width: 80px;
        height: 80px;
        top: 10%;
        left: 10%;
        animation-delay: 0s;
      }
      .particle:nth-child(2) {
        width: 120px;
        height: 120px;
        top: 70%;
        left: 80%;
        animation-delay: 4s;
      }
      .particle:nth-child(3) {
        width: 60px;
        height: 60px;
        top: 40%;
        left: 85%;
        animation-delay: 2s;
      }
      .particle:nth-child(4) {
        width: 100px;
        height: 100px;
        top: 80%;
        left: 15%;
        animation-delay: 6s;
      }
      @keyframes gradientShift {
        0%,
        100% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
      }
      @keyframes float {
        0%,
        100% {
          transform: translateY(0) translateX(0);
        }
        25% {
          transform: translateY(-30px) translateX(20px);
        }
        50% {
          transform: translateY(-60px) translateX(-20px);
        }
        75% {
          transform: translateY(-30px) translateX(-40px);
        }
      }
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes pulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.05);
        }
      }
      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      .container {
        max-width: 700px;
        text-align: center;
        padding: 40px 40px;
        background: rgba(15, 20, 35, 0.6);
        backdrop-filter: blur(20px);
        border-radius: 24px;
        border: 1px solid rgba(255, 107, 107, 0.15);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        position: relative;
        z-index: 2;
        animation: fadeInUp 0.8s ease;
      }
      .error-code {
        color: #ff6b6b;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 30px;
        padding: 8px 24px;
        background: rgba(255, 107, 107, 0.15);
        border-radius: 20px;
        display: inline-block;
        animation: fadeInUp 0.8s ease 0.2s backwards;
      }
      .description {
        color: #b8c2cc;
        font-size: 17px;
        line-height: 1.7;
        margin-bottom: 30px;
        animation: fadeInUp 0.8s ease 0.4s backwards;
      }
      .connection-status {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        margin-bottom: 25px;
        padding: 25px;
        background: rgba(10, 14, 39, 0.5);
        border-radius: 16px;
        animation: fadeInUp 0.8s ease 0.5s backwards;
        flex-wrap: wrap;
      }
      .status-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        justify-content: flex-start;
      }
      .status-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        transition: all 0.3s ease;
      }
      .status-icon.ok {
        background: rgba(76, 175, 80, 0.2);
        border: 2px solid #4caf50;
      }
      .status-icon.error {
        background: rgba(255, 107, 107, 0.2);
        border: 2px solid #ff6b6b;
        animation: pulse 2s ease-in-out infinite;
      }
      .status-label {
        font-size: 13px;
        font-weight: 600;
        color: #8a9ba8;
        text-align: center;
      }
      .status-url {
        font-size: 11px;
        color: #4a9eff;
        margin-top: 4px;
        word-break: break-all;
        max-width: 150px;
      }
      .status-arrow {
        font-size: 24px;
        color: #4a9eff;
        margin: 0 -5px;
      }
      .error-details {
        background: rgba(255, 107, 107, 0.08);
        border: 1px solid rgba(255, 107, 107, 0.2);
        border-radius: 12px;
        padding: 18px;
        margin-bottom: 30px;
        text-align: left;
        animation: fadeInUp 0.8s ease 0.6s backwards;
      }
      .error-details h3 {
        color: #ff6b6b;
        font-size: 17px;
        margin-bottom: 10px;
        font-weight: 600;
      }
      .error-details ul {
        color: #b8c2cc;
        font-size: 15px;
        line-height: 1.8;
        padding-left: 20px;
      }
      .button-group {
        display: flex;
        gap: 15px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 25px;
        animation: fadeInUp 0.8s ease 0.7s backwards;
      }
      .retry-button {
        background: linear-gradient(135deg, #ff6b35 0%, #ff8f00 100%);
        color: white;
        border: none;
        padding: 16px 40px;
        font-size: 17px;
        font-weight: 600;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.4s ease;
        text-decoration: none;
        align-items: center;
        box-shadow: 0 8px 24px rgba(255, 107, 53, 0.3);
        position: relative;
        overflow: hidden;
        text-align: center;
      }

      .retry-button:hover::before {
        left: 100%;
      }
      .retry-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 32px rgba(255, 107, 53, 0.4);
      }
      .retry-button.loading {
        opacity: 0.7;
        cursor: not-allowed;
      }
      .support-button {
        background: transparent;
        color: #4a9eff;
        border: 2px solid #4a9eff;
        padding: 14px 38px;
        font-size: 17px;
        font-weight: 600;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.4s ease;
        text-decoration: none;
        display: inline-block;
      }

      .support-button:hover {
        background: #4a9eff;
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(74, 158, 255, 0.3);
      }
      .auto-retry-text {
        color: #6b7a88;
        font-size: 14px;
        margin-bottom: 5px;
        animation: fadeInUp 0.8s ease 0.8s backwards;
      }
      .countdown {
        display: inline-block;
        color: #ff6b6b;
        font-weight: 600;
        min-width: 20px;
      }
      .powered-by {
        color: #4a9eff;
        font-size: 13px;
        text-decoration: none;
        opacity: 0.7;
        transition: all 0.3s ease;
        display: inline-block;
        animation: fadeInUp 0.8s ease 0.9s backwards;
      }
      .powered-by:hover {
        opacity: 1;
        transform: translateY(-2px);
      }
      @media (max-width: 768px) {
        .container {
          padding: 40px 24px;
        }
        .icon {
          font-size: 60px;
        }
        .connection-status {
          gap: 10px;
          padding: 20px 15px;
        }
        .status-icon {
          width: 40px;
          height: 40px;
          font-size: 20px;
        }
        .status-label {
          font-size: 11px;
        }
        .status-arrow {
          font-size: 20px;
        }
        .button-group {
          flex-direction: column;
          align-items: center;
        }
        .retry-button,
        .support-button {
          width: 100%;
          max-width: 300px;
        }
        body {
          padding: 0px;
        }
        .connection-status {
          flex-direction: column;
        }
        .status-arrow {
          display: none;
        }
        .status-item {
          min-height: auto;
        }
      }
    </style>
  </head>
  <body>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="container">
      <div class="error-code">502 Bad Gateway</div>
      <p class="description" data-i18n="description">
        The proxy server could not establish a connection with the destination
        server. This usually occurs due to some incorrect configuration in the
        destination application.
      </p>
      
      <div class="connection-status">
        <div class="status-item">
          <div class="status-icon ok">✓</div>
          <div class="status-label" data-i18n="browser">Your Browser</div>
        </div>
        <div class="status-arrow">→</div>
        <div class="status-item">
          <div class="status-icon ok">✓</div>
          <div class="status-label">Shard Cloud</div>
        </div>
        <div class="status-arrow">→</div>
        <div class="status-item">
          <div class="status-icon error">✕</div>
          <div class="status-label" id="destination-url"></div>
        </div>
      </div>
      <div class="error-details">
        <h3 data-i18n="causes-title">Possible causes:</h3>
        <ul>
          <li data-i18n="cause1">Destination server temporarily unavailable</li>
          <li data-i18n="cause2">Server is not on port 80</li>
          <li data-i18n="cause3">Server is not on interface 0.0.0.0</li>
          <li data-i18n="cause4">Connection timeout exceeded</li>
        </ul>
      </div>
      <div class="button-group">
        <a href="#" class="retry-button" onclick="retryConnection(event)">
          <span class="retry-text" data-i18n="retry">Try Again</span>
        </a>
        <a
          href="https://discord.gg/jjdYayFu5Q"
          target="_blank"
          class="support-button"
        >
          Discord Server
        </a>
      </div>
      <p class="auto-retry-text">
        <span data-i18n="auto-retry">Automatic retry in</span>
        <span class="countdown">15</span>
        <span data-i18n="seconds">seconds...</span>
      </p>
      <a href="https://shardcloud.app" class="powered-by"
        >Powered by Shard Cloud</a
      >
    </div>
    <script>
      const translations = {
        pt: {
          description:
            "O servidor proxy não conseguiu estabelecer conexão com o servidor de destino. Isso normalmente ocorre por alguma configuração incorreta na aplicação de destino.",
          browser: "Seu Navegador",
          "causes-title": "Possíveis causas:",
          cause1: "Servidor de destino temporariamente indisponível",
          cause2: "Servidor não está na porta 80",
          cause3: "Servidor não esta na interface 0.0.0.0",
          cause4: "Timeout de conexão excedido",
          retry: "Tentar Novamente",
          retrying: "Tentando...",
          "auto-retry": "Tentativa automática em",
          seconds: "segundos...",
        },
      };

      function detectLanguage() {
        const lang = navigator.language || navigator.userLanguage;
        return lang.startsWith("pt-PT") || lang.startsWith("pt-BR")
          ? "pt"
          : "en";
      }

      function applyTranslations(lang) {
        if (lang === "pt") {
          const t = translations.pt;
          document.querySelectorAll("[data-i18n]").forEach((el) => {
            const key = el.getAttribute("data-i18n");
            if (t[key]) {
              el.textContent = t[key];
            }
          });
          document.documentElement.lang = "pt-BR";
        }
      }

      const currentLang = detectLanguage();
      applyTranslations(currentLang);

      const hostname = window.location.host || "web.shardweb.app";
      document.querySelector("#destination-url").innerHTML = hostname;
      let countdown = 195;
      const countdownElement = document.querySelector(".countdown");
      const countdownInterval = setInterval(() => {
        countdown--;
        countdownElement.textContent = countdown;
        if (countdown <= 0) {
          clearInterval(countdownInterval);
          retryConnection();
        }
      }, 1000);
      function retryConnection(event) {
        if (event) {
          event.preventDefault();
        }
        const button = document.querySelector(".retry-button");
        const retryText = document.querySelector(".retry-text");
        button.classList.add("loading");
        const retryingText =
          currentLang === "pt" ? translations.pt.retrying : "Retrying...";
        retryText.textContent = retryingText;
        setTimeout(() => {
          location.reload();
        }, 500);
      }
    </script>
  </body>
</html>
