| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>SoulMate AI</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Nunito', sans-serif; |
| |
| overscroll-behavior: none; |
| } |
| |
| @keyframes breathe { |
| 0%, 100% { transform: scale(1); opacity: 0.9; } |
| 50% { transform: scale(1.05); opacity: 1; } |
| } |
| @keyframes float { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| } |
| @keyframes morph { |
| 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } |
| 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } |
| 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } |
| } |
| @keyframes gradient-flow { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| |
| .animate-breathe { |
| animation: breathe 6s ease-in-out infinite; |
| } |
| .animate-float { |
| animation: float 8s ease-in-out infinite; |
| } |
| .animate-morph { |
| animation: morph 8s ease-in-out infinite; |
| } |
| .animate-gradient-slow { |
| background-size: 200% 200%; |
| animation: gradient-flow 15s ease infinite; |
| } |
| </style> |
| <script type="importmap"> |
| { |
| "imports": { |
| "lucide-react": "https://esm.sh/lucide-react@^0.562.0", |
| "react": "https://esm.sh/react@^19.2.3", |
| "react/": "https://esm.sh/react@^19.2.3/", |
| "react-dom/": "https://esm.sh/react-dom@^19.2.3/" |
| } |
| } |
| </script> |
| <link rel="stylesheet" href="/index.css"> |
| </head> |
| <body> |
| <div id="root"></div> |
| <script type="module" src="/index.tsx"></script> |
| </body> |
| </html> |
