Spaces:
Sleeping
Sleeping
| <html lang="en" class="h-full bg-slate-50"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <base href="/" /> | |
| <!-- Google Fonts: Inter --> | |
| <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Tailwind CSS Play CDN --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| colors: { | |
| mystic: { | |
| 50: '#fcfbff', | |
| 100: '#e3dfff', // Main Soft Lavender | |
| 200: '#d3c0cd', // Muted Rose | |
| 300: '#c1acb9', | |
| 400: '#b19994', // Warm Taupe | |
| 500: '#a3877d', | |
| 600: '#937666', // Muted Brown | |
| 700: '#7a5f51', | |
| 800: '#5a4b5d', | |
| 900: '#3d3a4b', // Dark Slate Purple | |
| 950: '#2a2736', | |
| }, | |
| primary: { | |
| 50: '#f4f4f6', | |
| 100: '#e9e9ed', | |
| 200: '#d3d2db', | |
| 300: '#bdbcc9', | |
| 400: '#908fa7', | |
| 500: '#646285', | |
| 600: '#5a5878', | |
| 700: '#4b4a64', | |
| 800: '#3d3a4b', // Using mystic-900 as primary base | |
| 900: '#32303d', | |
| 950: '#2a2736', | |
| }, | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style type="text/tailwindcss"> | |
| @@layer base { | |
| body { @@apply text-mystic-900 antialiased h-full bg-mystic-100/30; } | |
| html { @@apply bg-mystic-100/30; } | |
| } | |
| @@layer components { | |
| .nav-link { @@apply flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md transition-colors text-mystic-600 hover:text-mystic-900 hover:bg-mystic-200/50; } | |
| .nav-link.active { @@apply bg-mystic-900 text-white hover:bg-mystic-900 hover:text-white; } | |
| .card { @@apply bg-white border border-mystic-200 rounded-xl shadow-sm overflow-hidden; } | |
| .btn-primary { @@apply inline-flex items-center justify-center rounded-md bg-mystic-900 px-4 py-2 text-sm font-medium text-white shadow transition-colors hover:bg-mystic-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-mystic-950 disabled:pointer-events-none disabled:opacity-50; } | |
| .btn-secondary { @@apply inline-flex items-center justify-center rounded-md border border-mystic-200 bg-white px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-mystic-100 hover:text-mystic-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-mystic-950 disabled:pointer-events-none disabled:opacity-50; } | |
| } | |
| </style> | |
| <link rel="icon" type="image/png" href="favicon.png" /> | |
| <HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" /> | |
| </head> | |
| <body class="h-full"> | |
| <Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" /> | |
| <script src="_framework/blazor.web.js"></script> | |
| <!-- Toast Notification Container --> | |
| <div id="toast-container" class="fixed bottom-5 right-5 z-[100] flex flex-col gap-3 pointer-events-none"></div> | |
| <script> | |
| function showToast(message, type = 'success') { | |
| const container = document.getElementById('toast-container'); | |
| const toast = document.createElement('div'); | |
| const bgColor = type === 'success' ? 'bg-mystic-900' : 'bg-red-600'; | |
| const icon = type === 'success' | |
| ? '<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>' | |
| : '<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>'; | |
| toast.className = `${bgColor} text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 transition-all duration-300 transform translate-y-10 opacity-0 pointer-events-auto min-w-[250px]`; | |
| toast.innerHTML = ` | |
| <div class="shrink-0">${icon}</div> | |
| <div class="text-sm font-medium tracking-tight">${message}</div> | |
| `; | |
| container.appendChild(toast); | |
| // Animate in | |
| setTimeout(() => { | |
| toast.classList.remove('translate-y-10', 'opacity-0'); | |
| }, 10); | |
| // Remove after 3 seconds | |
| setTimeout(() => { | |
| toast.classList.add('translate-y-[-10px]', 'opacity-0'); | |
| setTimeout(() => toast.remove(), 300); | |
| }, 3000); | |
| } | |
| </script> | |
| <script type="module" src="firebase-init.js"></script> | |
| </body> | |
| </html> | |