optimización.html

MaanKoloo · Dec 3, 2023 · 0ffa9ab · 0ffa9ab
1 parent f18af82
commit 0ffa9ab
Showing 1 changed file with 149 additions and 19 deletions.
diff --git a/status/index.html b/status/index.html
@@ -3,33 +3,163 @@
 
 <head>
   <title>VPN Check</title>
-  <meta http-equiv="refresh" content="5; url=/" />
+  <style>
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      height: 100vh;
+      margin: 0;
+      background-color: #f0f0f0;
+    }
+
+    #status-container {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      position: relative;
+    }
+
+    #loading-text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 18px;
+      color: #333;
+      opacity: 0;
+      animation: fadeIn 1s forwards;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    #indicator {
+      visibility: hidden;
+      opacity: 0;
+      width: 150px;
+      height: 75px;
+      background-color: #ccc;
+      border-radius: 25px;
+      margin-top: 20px;
+      overflow: hidden;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      transition: visibility 0s, opacity 1s ease;
+    }
+
+    #slider {
+      flex: 1;
+      width: 100%;
+      background-color: #2196F3;
+      border-radius: 25px;
+      transition: .4s;
+    }
+
+    #indicator.connected #slider {
+      background-color: #4CAF50;
+    }
+
+    #indicator.disconnected #slider {
+      background-color: #FF4444;
+    }
+
+    #indicator-text {
+      font-size: 18px;
+      color: white;
+    }
+
+    #welcome-message {
+      display: none;
+      font-size: 24px;
+      color: #4CAF50;
+      margin-top: 20px;
+      text-align: center;
+    }
+
+    #warning-message {
+      display: none;
+      font-size: 16px;
+      color: #FF4444;
+      margin-top: 20px;
+      text-align: center;
+    }
+
+    #return-button {
+      display: none;
+      margin-top: 20px;
+      padding: 10px;
+      background-color: #2196F3;
+      color: white;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+  </style>
   <script>
     setTimeout(function() {
-      // Obtén la dirección IP del cliente
-      var ipCliente = "<?php echo $_SERVER['REMOTE_ADDR']; ?>";
+      fetch('https://ipapi.co/json/')
+        .then(response => response.json())
+        .then(data => {
+          var ipCliente = data.ip;
 
-      // Dirección IP esperada para la conexión VPN
-      var ipEsperada = '32.123.32.12';
+          // Dirección IP esperada para la conexión VPN
+          var ipEsperada = '32.123.32.12';
 
-      // Verifica si la dirección IP del cliente coincide con la esperada
-      if (ipCliente.trim() === ipEsperada.trim()) {
-        window.location.href = "/status/1";
-      } else {
-        window.location.href = "/status/2";
-      }
-    }, 5000); // Redirige después de 5 segundos
+          var statusContainer = document.getElementById("status-container");
+          var loadingText = document.getElementById("loading-text");
+          var indicator = document.getElementById("indicator");
+          var welcomeMessage = document.getElementById("welcome-message");
+          var warningMessage = document.getElementById("warning-message");
+          var returnButton = document.getElementById("return-button");
+
+          setTimeout(function() {
+
+            loadingText.style.display = "none";
+            indicator.style.visibility = "visible";
+            indicator.style.opacity = 1;
+
+            if (ipCliente.trim() === ipEsperada.trim()) {
+              indicator.classList.add("connected");
+              indicator.innerHTML = '<div id="slider"></div><div id="indicator-text">Conectado</div>';
+              welcomeMessage.style.display = "block";
+              returnButton.style.display = "block";
+            } else {
+              console.log('Desconectado.');
+              indicator.classList.add("disconnected");
+              indicator.innerHTML = '<div id="slider"></div><div id="indicator-text">Desconectado</div>';
+              warningMessage.style.display = "block";
+              returnButton.style.display = "block";
+            }
+          }, 1000);
+        })
+        .catch(error => {
+          console.error('Error al obtener la dirección IP:', error);
+          console.log('Continuando con el código principal.');
+        });
+    }, 3000);
   </script>
 </head>
 
 <body>
-  <h1 style="text-align:center;color:green;">
-    Verificando conexión VPN
-  </h1>
-
-  <p style="text-align:center;">
-    Serás redirigido en 5 segundos
-  </p>
+  <div id="status-container">
+    <div id="loading-text">Verificando conexión...</div>
+    <div id="indicator"></div>
+    <div id="welcome-message">¡Bien! Estás conectado.</div>
+    <div id="warning-message">No estás conectado a nuestro VPN. Solicita ayuda.</div>
+    <button id="return-button" onclick="window.location.href='https://maankoloo.github.io/'">Volver al sitio principal</button>
+  </div>
 </body>
 
 </html>