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>Model Runner</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| min-height: 100vh; | |
| background: #000000; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| overflow: hidden; | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| .logo { | |
| width: 200px; | |
| height: 200px; | |
| position: relative; | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .logo svg { | |
| width: 100%; | |
| height: 100%; | |
| filter: drop-shadow(0 0 30px rgba(255, 100, 100, 0.3)); | |
| } | |
| .status { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: rgba(255, 255, 255, 0.6); | |
| font-size: 0.875rem; | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| background: #22c55e; | |
| border-radius: 50%; | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| .sparkle { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| opacity: 0.4; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.5; transform: scale(1.2); } | |
| } | |
| @keyframes spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="logo"> | |
| <svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <defs> | |
| <linearGradient id="rainbow" x1="0%" y1="100%" x2="100%" y2="0%"> | |
| <stop offset="0%" stop-color="#ff0080"/> | |
| <stop offset="20%" stop-color="#ff4d00"/> | |
| <stop offset="40%" stop-color="#ffcc00"/> | |
| <stop offset="60%" stop-color="#00ff88"/> | |
| <stop offset="80%" stop-color="#00ccff"/> | |
| <stop offset="100%" stop-color="#6644ff"/> | |
| </linearGradient> | |
| </defs> | |
| <!-- Outer triangle --> | |
| <path d="M100 20 L180 160 L20 160 Z" stroke="url(#rainbow)" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" fill="none"/> | |
| <!-- Inner A shape --> | |
| <path d="M100 70 L130 130 L70 130 Z" stroke="url(#rainbow)" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" fill="none"/> | |
| <!-- Horizontal bar --> | |
| <line x1="80" y1="115" x2="120" y2="115" stroke="url(#rainbow)" stroke-width="6" stroke-linecap="round"/> | |
| </svg> | |
| </div> | |
| <div class="status"> | |
| <span class="status-dot"></span> | |
| <span>Ready</span> | |
| </div> | |
| </div> | |
| <svg class="sparkle" width="24" height="24" viewBox="0 0 24 24" fill="none"> | |
| <path d="M12 2L13.5 8.5L20 10L13.5 11.5L12 18L10.5 11.5L4 10L10.5 8.5L12 2Z" fill="rgba(255,255,255,0.6)"/> | |
| </svg> | |
| </body> | |
| </html> | |