|
|
<!DOCTYPE html> |
|
|
<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> |
|
|
|
|
|
<path d="M100 20 L180 160 L20 160 Z" stroke="url(#rainbow)" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" fill="none"/> |
|
|
|
|
|
<path d="M100 70 L130 130 L70 130 Z" stroke="url(#rainbow)" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" fill="none"/> |
|
|
|
|
|
<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> |
|
|
|
