Spaces:
Running
Running
File size: 3,079 Bytes
3442585 4db53ab 3442585 4db53ab 3442585 4db53ab 3442585 4db53ab 3442585 | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sentinel Hawk | Notifications</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
amber: {
50: '#fffbeb',
100: '#fef3c7',
200: '#fde68a',
300: '#fcd34d',
400: '#fbbf24',
500: '#f59e0b',
600: '#d97706',
700: '#b45309',
800: '#92400e',
900: '#78350f',
950: '#451a03',
}
},
animation: {
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'fade-in': 'fadeIn 0.3s ease-out',
'slide-up': 'slideUp 0.4s ease-out',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
}
}
}
}
}
</script>
</head>
<body class="bg-gray-50 min-h-screen font-sans text-gray-800">
<!-- Navigation -->
<sentinel-navbar></sentinel-navbar>
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Notification Settings Component -->
<notification-settings></notification-settings>
<!-- Notification Log Component -->
<notification-log class="mt-8 block"></notification-log>
</main>
<!-- Toast Notification -->
<toast-notification id="global-toast"></toast-notification>
<!-- Scripts -->
<script src="components/navbar.js"></script>
<script src="components/toast-notification.js"></script>
<script src="components/notification-settings.js"></script>
<script src="components/notification-log.js"></script>
<script>
// Global toast handler
document.addEventListener('toast', (e) => {
const toast = document.getElementById('global-toast');
toast.setAttribute('type', e.detail.type);
toast.setAttribute('title', e.detail.title);
toast.setAttribute('message', e.detail.message);
toast.setAttribute('visible', 'true');
toast.show();
});
</script>
</body>
</html> |