| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>MindSpark - AI Notebook</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#6366f1', |
| secondary: '#4f46e5', |
| dark: '#1e293b', |
| surface: '#334155', |
| }, |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'], |
| }, |
| }, |
| }, |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); |
| |
| :root { |
| --bg-deep: #0B0F19; |
| --bg-surface: #0F1117; |
| --accent: #6366f1; |
| } |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: var(--bg-deep); |
| color: #f8fafc; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
| |
| |
| html { |
| font-size: 14px; |
| } |
| @media (min-width: 768px) { |
| html { font-size: 15px; } |
| } |
| @media (min-width: 1280px) { |
| html { font-size: 16px; } |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 10px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: rgba(255, 255, 255, 0.2); |
| } |
| |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .animate-fadeIn { |
| animation: fadeIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards; |
| } |
| |
| |
| .glass { |
| background: rgba(255, 255, 255, 0.03); |
| backdrop-filter: blur(12px); |
| -webkit-backdrop-filter: blur(12px); |
| border: 1px solid rgba(255, 255, 255, 0.05); |
| } |
| |
| .glass-dark { |
| background: rgba(15, 17, 23, 0.6); |
| backdrop-filter: blur(20px); |
| -webkit-backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.05); |
| } |
| |
| |
| .custom-scrollbar::-webkit-scrollbar { |
| width: 4px; |
| } |
| .custom-scrollbar::-webkit-scrollbar-thumb { |
| background: rgba(99, 102, 241, 0.2); |
| } |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { |
| background: rgba(99, 102, 241, 0.4); |
| } |
| |
| |
| .mermaid-container { |
| width: 100%; |
| overflow-x: auto; |
| background: rgba(255, 255, 255, 0.02); |
| padding: 2rem; |
| border-radius: 1.5rem; |
| border: 1px solid rgba(255, 255, 255, 0.05); |
| } |
| .mermaid-container svg { |
| max-width: 100% !important; |
| height: auto !important; |
| } |
| .mermaid-container .node rect, |
| .mermaid-container .node circle { |
| transition: all 0.3s ease; |
| } |
| .mermaid-container .node:hover rect, |
| .mermaid-container .node:hover circle { |
| filter: brightness(1.2); |
| stroke-width: 3px; |
| stroke: #6366f1; |
| } |
| </style> |
| <script type="importmap"> |
| { |
| "imports": { |
| "@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0", |
| "react/": "https://aistudiocdn.com/react@^19.2.0/", |
| "react": "https://aistudiocdn.com/react@^19.2.0", |
| "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/" |
| } |
| } |
| </script> |
| <link rel="stylesheet" href="/index.css"> |
| </head> |
| <body> |
| <div id="root"></div> |
| <script type="module" src="/index.tsx"></script> |
| </body> |
| </html> |
