114 lines
4.1 KiB
HTML
114 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Celestial Time - Our Grimoire</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<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=Cinzel:wght@400;600;700;900&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Nunito', 'sans-serif'],
|
|
magical: ['Cinzel', 'serif'],
|
|
},
|
|
colors: {
|
|
'cosmic-dark': '#0B0B15',
|
|
'cosmic-card': 'rgba(20, 20, 40, 0.6)',
|
|
'neon-pink': '#FF00CC',
|
|
'neon-blue': '#3333FF',
|
|
'witch-purple': '#7000FF',
|
|
},
|
|
animation: {
|
|
'spin-slow': 'spin 120s linear infinite',
|
|
'float': 'float 6s ease-in-out infinite',
|
|
'twinkle': 'twinkle 4s ease-in-out infinite',
|
|
'flicker': 'flicker 0.1s infinite alternate',
|
|
'shoot': 'shoot 4s ease-in-out infinite',
|
|
},
|
|
keyframes: {
|
|
float: {
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
'50%': { transform: 'translateY(-20px)' },
|
|
},
|
|
twinkle: {
|
|
'0%, 100%': { opacity: '0.2' },
|
|
'50%': { opacity: '1' },
|
|
},
|
|
flicker: {
|
|
'0%': { transform: 'scale(1)', opacity: '1' },
|
|
'50%': { transform: 'scale(0.98) skewX(1deg)', opacity: '0.9' },
|
|
'100%': { transform: 'scale(1.02) skewX(-1deg)', opacity: '0.8' },
|
|
},
|
|
shoot: {
|
|
'0%': { transform: 'translateX(0) translateY(0) rotate(45deg) scale(0)', opacity: '0' },
|
|
'10%': { opacity: '1', transform: 'translateX(-50px) translateY(50px) rotate(45deg) scale(1)' },
|
|
'20%': { transform: 'translateX(-300px) translateY(300px) rotate(45deg) scale(0.5)', opacity: '0' },
|
|
'100%': { transform: 'translateX(-300px) translateY(300px) rotate(45deg) scale(0)', opacity: '0' }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #050510;
|
|
color: #E2E8F0;
|
|
overflow-x: hidden;
|
|
}
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(0,0,0,0.3);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(112, 0, 255, 0.3);
|
|
border-radius: 10px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(112, 0, 255, 0.6);
|
|
}
|
|
.glass-panel {
|
|
background: rgba(15, 15, 30, 0.7);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
|
}
|
|
.text-glow {
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(112, 0, 255, 0.3);
|
|
}
|
|
.candle-flame {
|
|
background: radial-gradient(ellipse at bottom, #ffee00 0%, #ff6600 50%, transparent 80%);
|
|
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
|
filter: blur(1px);
|
|
}
|
|
</style>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"uuid": "https://esm.sh/uuid@^13.0.0",
|
|
"react": "https://esm.sh/react@^19.2.4",
|
|
"react/": "https://esm.sh/react@^19.2.4/",
|
|
"framer-motion": "https://esm.sh/framer-motion@^12.34.0",
|
|
"lucide-react": "https://esm.sh/lucide-react@^0.564.0",
|
|
"react-dom/": "https://esm.sh/react-dom@^19.2.4/",
|
|
"@google/genai": "https://esm.sh/@google/genai@^1.41.0",
|
|
"date-fns": "https://esm.sh/date-fns@^4.1.0"
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="/index.css">
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/index.tsx"></script>
|
|
</body>
|
|
</html> |