Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WatchTower Sentinel | Dashboard</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/sidebar.js"></script> | |
| <script src="components/status-card.js"></script> | |
| <script src="components/camera-card.js"></script> | |
| <script src="components/alert-card.js"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <div class="flex"> | |
| <custom-sidebar active="dashboard"></custom-sidebar> | |
| <main class="flex-1 p-8"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-8">Monitoring Dashboard</h1> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <custom-status-card | |
| title="Active Cameras" | |
| value="24" | |
| icon="video" | |
| trend="up" | |
| change="3" | |
| color="blue"> | |
| </custom-status-card> | |
| <custom-status-card | |
| title="Active Alarms" | |
| value="8" | |
| icon="bell" | |
| trend="down" | |
| change="2" | |
| color="red"> | |
| </custom-status-card> | |
| <custom-status-card | |
| title="Clients" | |
| value="42" | |
| icon="users" | |
| trend="up" | |
| change="5" | |
| color="green"> | |
| </custom-status-card> | |
| <custom-status-card | |
| title="Critical Alerts" | |
| value="3" | |
| icon="alert-triangle" | |
| trend="same" | |
| change="0" | |
| color="orange"> | |
| </custom-status-card> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Live Camera Feed</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-md text-sm">All</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md text-sm">Critical</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md text-sm">Offline</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> | |
| <custom-camera-card | |
| name="Lobby Camera" | |
| status="active" | |
| last-alert="5m ago" | |
| image="http://static.photos/technology/640x360/1"> | |
| </custom-camera-card> | |
| <custom-camera-card | |
| name="Parking Lot" | |
| status="alert" | |
| last-alert="2m ago" | |
| image="http://static.photos/cityscape/640x360/2"> | |
| </custom-camera-card> | |
| <custom-camera-card | |
| name="Server Room" | |
| status="active" | |
| last-alert="1h ago" | |
| image="http://static.photos/technology/640x360/3"> | |
| </custom-camera-card> | |
| <custom-camera-card | |
| name="Main Entrance" | |
| status="offline" | |
| last-alert="30m ago" | |
| image="http://static.photos/office/640x360/4"> | |
| </custom-camera-card> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Recent Alerts</h2> | |
| <div class="space-y-4"> | |
| <custom-alert-card | |
| type="motion" | |
| location="Lobby Camera" | |
| time="2 minutes ago" | |
| priority="high"> | |
| </custom-alert-card> | |
| <custom-alert-card | |
| type="door" | |
| location="Back Entrance" | |
| time="15 minutes ago" | |
| priority="medium"> | |
| </custom-alert-card> | |
| <custom-alert-card | |
| type="temperature" | |
| location="Server Room" | |
| time="45 minutes ago" | |
| priority="low"> | |
| </custom-alert-card> | |
| <custom-alert-card | |
| type="power" | |
| location="Main Building" | |
| time="1 hour ago" | |
| priority="critical"> | |
| </custom-alert-card> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |