Spaces:
Sleeping
Sleeping
File size: 5,570 Bytes
cf599e0 6aad87c cf599e0 6aad87c cf599e0 6aad87c cf599e0 6aad87c cf599e0 6aad87c cf599e0 0acba57 cf599e0 0acba57 cf599e0 6aad87c cf599e0 ccc2569 cf599e0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | <!DOCTYPE html>
<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>
|