Spaces:
Running
Running
| <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> |