Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>{{ title }} — ISL AI Suite</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #0d1117; | |
| --gold: #d4a853; | |
| --goldb: #f0c76a; | |
| --txt: #f0ede6; | |
| --txtm: #a8a096; | |
| --txtl: #5a5650; | |
| --fD: 'Playfair Display', Georgia, serif; | |
| --fB: 'DM Sans', system-ui, sans-serif; | |
| --fM: 'DM Mono', monospace; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: var(--txt); | |
| font-family: var(--fB); | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| /* Subtle background grid pattern */ | |
| body::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background-image: | |
| linear-gradient(rgba(212, 168, 83, 0.015) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(212, 168, 83, 0.015) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* Ambient background glow */ | |
| .bg-glow { | |
| position: absolute; | |
| width: 50vw; | |
| height: 50vh; | |
| background: radial-gradient(circle, rgba(212, 168, 83, 0.05) 0%, transparent 70%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* Findora-style zoom-in animation */ | |
| @keyframes findoraZoomIn { | |
| 0% { | |
| opacity: 0; | |
| transform: scale(0.85); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| .splash-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| position: relative; | |
| z-index: 1; | |
| animation: findoraZoomIn 1s cubic-bezier(0.16, 1, 0.3, 1) both; | |
| width: 100%; | |
| max-width: 90%; | |
| padding: 0 20px; | |
| } | |
| .splash-title { | |
| font-family: var(--fD); | |
| font-size: clamp(1.8rem, 4vw, 2.6rem); | |
| font-weight: 700; | |
| color: var(--txt); | |
| letter-spacing: -0.01em; | |
| margin-bottom: 10px; | |
| } | |
| .splash-subtitle { | |
| font-family: var(--fM); | |
| font-size: clamp(0.7rem, 1.5vw, 0.8rem); | |
| color: var(--gold); | |
| text-transform: uppercase; | |
| letter-spacing: 0.18em; | |
| font-weight: 500; | |
| margin-bottom: 30px; | |
| } | |
| /* Bouncing loader dots */ | |
| .dots-loader { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background-color: var(--goldd); | |
| animation: dotBounce 1.4s infinite ease-in-out both; | |
| } | |
| .dot:nth-child(1) { animation-delay: -0.32s; } | |
| .dot:nth-child(2) { animation-delay: -0.16s; } | |
| @keyframes dotBounce { | |
| 0%, 80%, 100% { | |
| transform: scale(0.6); | |
| opacity: 0.4; | |
| } | |
| 40% { | |
| transform: scale(1.1); | |
| opacity: 1; | |
| background-color: var(--goldb); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-glow"></div> | |
| <div class="splash-container"> | |
| <h1 class="splash-title">{{ title }}</h1> | |
| <div class="splash-subtitle">{{ subtitle }}</div> | |
| <div class="dots-loader"> | |
| <div class="dot"></div> | |
| <div class="dot"></div> | |
| <div class="dot"></div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const phase = "{{ phase }}"; | |
| const proto = location.protocol; | |
| const host = location.hostname; | |
| const port = location.port; | |
| let redirectUrl = ""; | |
| if (port && port !== '80' && port !== '443') { | |
| // Local mode redirects | |
| if (phase === "1") { | |
| redirectUrl = proto + '//' + host + ':' + port + '/dashboard'; | |
| } else { | |
| redirectUrl = proto + '//' + host + ':5001/'; | |
| } | |
| } else { | |
| // Cloud mode redirects | |
| if (phase === "1") { | |
| redirectUrl = proto + '//' + host + '/dashboard'; | |
| } else { | |
| redirectUrl = proto + '//' + host + '/avatar/'; | |
| } | |
| } | |
| // Automatically redirect with a smooth fade out transition | |
| setTimeout(() => { | |
| document.body.style.transition = 'opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1)'; | |
| document.body.style.opacity = '0'; | |
| setTimeout(() => { | |
| window.location.href = redirectUrl; | |
| }, 600); | |
| }, 2000); // 2 seconds display, then fade out | |
| }); | |
| </script> | |
| </body> | |
| </html> | |