Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VELIN - Offline</title> | |
| <style> | |
| body { | |
| font-family: 'Roboto', Arial, sans-serif; | |
| background: #121212; | |
| color: #ffffff; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| text-align: center; | |
| } | |
| .container { | |
| max-width: 400px; | |
| padding: 2rem; | |
| } | |
| .logo { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| margin-bottom: 1rem; | |
| color: #0d6efd; | |
| } | |
| .message { | |
| font-size: 1.2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .description { | |
| color: #cccccc; | |
| margin-bottom: 2rem; | |
| } | |
| .button { | |
| background: #0d6efd; | |
| color: white; | |
| border: none; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 0.5rem; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| .button:hover { | |
| background: #0b5ed7; | |
| } | |
| .offline-icon { | |
| width: 64px; | |
| height: 64px; | |
| margin: 0 auto 2rem; | |
| opacity: 0.5; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="offline-icon"> | |
| <svg viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.68 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.81-.34-3.68L23 12zM13 17h-2v-6h2v6zm0-8h-2V7h2v2z"/> | |
| </svg> | |
| </div> | |
| <div class="logo">VELIN</div> | |
| <div class="message">You're offline</div> | |
| <div class="description"> | |
| No internet connection detected. You can still listen to your downloaded podcasts in the Downloads section. | |
| </div> | |
| <a href="/" class="button" onclick="window.location.reload()"> | |
| Try Again | |
| </a> | |
| </div> | |
| <script> | |
| // Check for connection and reload when back online | |
| window.addEventListener('online', () => { | |
| window.location.reload(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |