Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>PaperStack</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></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=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| h1, h2, h3, h4, h5, h6, .font-display { | |
| font-family: 'Space Grotesk', sans-serif; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .glass-panel { | |
| background: rgba(255, 255, 255, 0.7); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .dark .glass-panel { | |
| background: rgba(15, 23, 42, 0.6); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); | |
| } | |
| /* Gradient text helper */ | |
| .text-gradient { | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| /* Blog View - Prose Enhancements */ | |
| .prose blockquote { | |
| font-style: normal; | |
| quotes: none; | |
| } | |
| .prose blockquote::before { | |
| content: none; | |
| } | |
| /* Equation Fraction Styling */ | |
| .frac { | |
| display: inline-flex; | |
| flex-direction: column; | |
| align-items: center; | |
| vertical-align: middle; | |
| margin: 0 0.2em; | |
| } | |
| .frac > span:first-child { | |
| border-bottom: 1px solid currentColor; | |
| padding: 0 0.3em 0.1em; | |
| } | |
| .frac > span:last-child { | |
| padding: 0.1em 0.3em 0; | |
| } | |
| /* Smooth scroll behavior */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Animation utilities */ | |
| @keyframes fade-in-up { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-fade-in-up { | |
| animation: fade-in-up 0.6s ease-out forwards; | |
| } | |
| /* Stagger delays */ | |
| .delay-100 { animation-delay: 100ms; } | |
| .delay-200 { animation-delay: 200ms; } | |
| .delay-300 { animation-delay: 300ms; } | |
| .delay-400 { animation-delay: 400ms; } | |
| .delay-500 { animation-delay: 500ms; } | |
| /* Line clamp utilities */ | |
| .line-clamp-4 { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 4; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .line-clamp-\[12\] { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 12; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .line-clamp-\[20\] { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 20; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| /* Mermaid container */ | |
| .mermaid-container svg { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| /* Custom scrollbar for specific containers */ | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: rgba(0,0,0,0.2); | |
| border-radius: 3px; | |
| } | |
| .dark .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: rgba(255,255,255,0.2); | |
| } | |
| </style> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| brand: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 900: '#0c4a6e', | |
| } | |
| }, | |
| animation: { | |
| 'spin-slow': 'spin 20s linear infinite', | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/", | |
| "react/": "https://aistudiocdn.com/react@^19.2.0/", | |
| "react": "https://aistudiocdn.com/react@^19.2.0", | |
| "@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0", | |
| "lucide-react": "https://aistudiocdn.com/lucide-react@^0.554.0", | |
| "react-markdown": "https://aistudiocdn.com/react-markdown@^10.1.0", | |
| "mermaid": "https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.esm.min.mjs" | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="/index.css"> | |
| </head> | |
| <body class="antialiased transition-colors duration-300 bg-slate-50 dark:bg-slate-950"> | |
| <div id="root"></div> | |
| <script type="module" src="/index.tsx"></script> | |
| </body> | |
| </html> |