Spaces:
Configuration error
Configuration error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>SEA PrepAIR</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| slate: { | |
| 850: '#1e293b', | |
| 950: '#020617', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=Kaushan+Script&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous"> | |
| <script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.11/dist/dotlottie-wc.js" type="module"></script> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| /* Custom scrollbar for webkit */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #94a3b8; /* slate-400 */ | |
| border-radius: 4px; | |
| } | |
| .dark ::-webkit-scrollbar-thumb { | |
| background: #475569; /* slate-600 */ | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #cbd5e1; | |
| } | |
| .dark ::-webkit-scrollbar-thumb:hover { | |
| background: #64748b; | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* SVG Animations */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| @keyframes float-delayed { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| } | |
| @keyframes orbit { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes orbit-reverse { | |
| from { transform: rotate(360deg); } | |
| to { transform: rotate(0deg); } | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { opacity: 0.3; transform: scale(1); } | |
| 50% { opacity: 0.8; transform: scale(1.05); } | |
| } | |
| @keyframes write { | |
| 0% { transform: rotate(0deg) translateX(0); } | |
| 25% { transform: rotate(-5deg) translateX(-5px); } | |
| 75% { transform: rotate(5deg) translateX(5px); } | |
| 100% { transform: rotate(0deg) translateX(0); } | |
| } | |
| /* Enhanced SVG Support */ | |
| .animate-float { animation: float 6s ease-in-out infinite; transform-box: fill-box; } | |
| .animate-float-delayed { animation: float-delayed 7s ease-in-out infinite; transform-box: fill-box; } | |
| .animate-orbit { animation: orbit 20s linear infinite; transform-box: fill-box; transform-origin: center; } | |
| .animate-orbit-reverse { animation: orbit-reverse 15s linear infinite; transform-box: fill-box; transform-origin: center; } | |
| .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } | |
| .animate-write { animation: write 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } | |
| .glass-panel { | |
| background: rgba(255, 255, 255, 0.7); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| .dark .glass-panel { | |
| background: rgba(15, 23, 42, 0.6); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| /* Reinvert utility to fix color issues when parent is inverted */ | |
| .invert .reinvert { | |
| filter: invert(1) hue-rotate(180deg); | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| transform: translateZ(0); | |
| image-rendering: -webkit-optimize-contrast; | |
| will-change: filter; | |
| } | |
| /* 3D Flip Card Utilities */ | |
| .perspective-1000 { | |
| perspective: 1000px; | |
| } | |
| .transform-style-3d { | |
| transform-style: preserve-3d; | |
| } | |
| .backface-hidden { | |
| backface-visibility: hidden; | |
| -webkit-backface-visibility: hidden; | |
| } | |
| .rotate-y-180 { | |
| transform: rotateY(180deg); | |
| } | |
| /* Interactive Elements Cursors */ | |
| [id^="btn-"], | |
| [data-draggable], | |
| [data-dropzone], | |
| .interactive-node, | |
| .glass-node { | |
| cursor: pointer ; | |
| } | |
| </style> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "react": "https://esm.sh/react@18.3.1", | |
| "react-dom": "https://esm.sh/react-dom@18.3.1", | |
| "react-dom/": "https://esm.sh/react-dom@18.3.1/", | |
| "react/": "https://esm.sh/react@18.3.1/", | |
| "@google/genai": "https://esm.sh/@google/genai@^1.37.0", | |
| "lucide-react": "https://esm.sh/lucide-react@0.469.0?external=react,react-dom", | |
| "recharts": "https://esm.sh/recharts@2.15.0?external=react,react-dom", | |
| "katex": "https://esm.sh/katex@0.16.9", | |
| "html2canvas": "https://esm.sh/html2canvas@1.4.1", | |
| "@lottiefiles/dotlottie-react": "https://esm.sh/@lottiefiles/dotlottie-react@0.8.8?external=react,react-dom", | |
| "react-player": "https://esm.sh/react-player@2.16.0?external=react,react-dom" | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="/index.css"> | |
| </head> | |
| <body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 h-screen overflow-hidden selection:bg-cyan-500/30 selection:text-cyan-700 dark:selection:text-cyan-200 transition-colors duration-300"> | |
| <div id="root"></div> | |
| <script type="module" src="/index.tsx"></script> | |
| </body> | |
| </html> |