Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Redirecting...</title> | |
| <style> | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| font-family: Arial, sans-serif; | |
| overflow: hidden; | |
| background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */ | |
| backdrop-filter: blur(10px); | |
| position: relative; | |
| } | |
| .background { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(45deg, #80d0c7, #68c3a3, #6eb5e0, #78a6d2, #7096c4, #6c86b5); | |
| background-size: 400% 400%; | |
| animation: gradientAnimation 30s linear infinite; | |
| z-index: -2; | |
| } | |
| @keyframes gradientAnimation { | |
| 0% { background-position: 0% 50%; } | |
| 100% { background-position: 100% 50%; } | |
| } | |
| .grain { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAn0A2p/CFvsAAAAASUVORK5CYII='); | |
| opacity: 0.1; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .container { | |
| text-align: center; | |
| background: #fff; /* Solid background */ | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| z-index: 1; | |
| } | |
| .countdown { | |
| font-size: 2rem; | |
| color: #333; | |
| } | |
| .video-logo { | |
| width: 100px; | |
| height: auto; | |
| margin-bottom: 20px; | |
| } | |
| .company-name { | |
| font-size: 1.5rem; | |
| margin-bottom: 20px; | |
| color: #555; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="background"></div> | |
| <div class="grain"></div> | |
| <div class="container"> | |
| <video class="video-logo" id="company-video" autoplay muted loop> | |
| <source src="path/to/your/logo.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| <p class="company-name" id="company-name">Redirecting to [Company Name]</p> | |
| <p>Redirecting in <span class="countdown" id="countdown">6</span> seconds...</p> | |
| </div> | |
| <script> | |
| let countdownNumber = 6; | |
| const countdownElement = document.getElementById('countdown'); | |
| const redirectUrl = "https://chat.whatsapp.com/H0AraNmzBr1CjHFZNRfGXZ"; // Replace with your desired URL | |
| const companyName = "RiSG WhatsApp"; // Replace with the name of your company | |
| document.getElementById('company-name').textContent = `Redirecting to ${companyName}`; | |
| // Replace 'path/to/your/logo.mp4' with the path to your video | |
| document.getElementById('company-video').src = 'q.mp4'; | |
| const countdownInterval = setInterval(() => { | |
| countdownNumber--; | |
| countdownElement.textContent = countdownNumber; | |
| if (countdownNumber <= 0) { | |
| clearInterval(countdownInterval); | |
| window.location.href = redirectUrl; | |
| } | |
| }, 1000); | |
| </script> | |
| </body> | |
| </html> | |