crie uma plataforma de monitoramento com foco em tratamento de alarmes e cameras,crie abas dashboards, alarmes, clientes ,plantas e alertas

README.md

@@ -1,10 +1,13 @@
 ---
-title: Watchtower Sentinel
-emoji: 🐠
+title: WatchTower Sentinel 🚨
 colorFrom: gray
-colorTo: indigo
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/alert-card.js

@@ -0,0 +1,71 @@
+class CustomAlertCard extends HTMLElement {
+    connectedCallback() {
+        const type = this.getAttribute('type') || 'alert';
+        const location = this.getAttribute('location') || 'Unknown';
+        const time = this.getAttribute('time') || 'Just now';
+        const priority = this.getAttribute('priority') || 'medium';
+        
+        const priorityColors = {
+            'critical': 'red',
+            'high': 'orange',
+            'medium': 'yellow',
+            'low': 'green'
+        };
+        
+        const typeIcons = {
+            'motion': 'activity',
+            'door': 'unlock',
+            'temperature': 'thermometer',
+            'power': 'zap',
+            'fire': 'flame',
+            'water': 'droplet'
+        };
+        
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .alert-card {
+                    border-left: 4px solid;
+                    transition: all 0.2s ease;
+                }
+                .alert-card:hover {
+                    transform: translateX(2px);
+                }
+                .critical {
+                    border-left-color: rgb(239, 68, 68);
+                }
+                .high {
+                    border-left-color: rgb(249, 115, 22);
+                }
+                .medium {
+                    border-left-color: rgb(234, 179, 8);
+                }
+                .low {
+                    border-left-color: rgb(34, 197, 94);
+                }
+            </style>
+            <div class="alert-card bg-white p-4 rounded shadow-sm ${priority}">
+                <div class="flex items-start">
+                    <div class="p-2 rounded-lg bg-${priorityColors[priority]}-100 text-${priorityColors[priority]}-600 mr-3">
+                        <i data-feather="${typeIcons[type] || 'alert-circle'}"></i>
+                    </div>
+                    <div class="flex-1">
+                        <div class="flex justify-between items-start">
+                            <h4 class="font-medium text-gray-800 capitalize">${type} detected</h4>
+                            <span class="text-xs text-gray-500">${time}</span>
+                        </div>
+                        <p class="text-sm text-gray-600 mt-1">Location: ${location}</p>
+                        <div class="mt-2 flex justify-between items-center">
+                            <span class="text-xs px-2 py-1 rounded bg-${priorityColors[priority]}-100 text-${priorityColors[priority]}-800 capitalize">${priority}</span>
+                            <div class="flex space-x-2">
+                                <button class="text-xs text-blue-600 hover:text-blue-800">Acknowledge</button>
+                                <button class="text-xs text-gray-600 hover:text-gray-800">Details</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-alert-card', CustomAlertCard);

components/camera-card.js

@@ -0,0 +1,54 @@
+class CustomCameraCard extends HTMLElement {
+    connectedCallback() {
+        const name = this.getAttribute('name') || 'Camera';
+        const status = this.getAttribute('status') || 'active';
+        const lastAlert = this.getAttribute('last-alert') || 'Never';
+        const image = this.getAttribute('image') || 'http://static.photos/technology/640x360/1';
+        
+        const statusColors = {
+            'active': 'green',
+            'alert': 'red',
+            'offline': 'gray'
+        };
+        
+        const statusTexts = {
+            'active': 'Active',
+            'alert': 'Alert',
+            'offline': 'Offline'
+        };
+        
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .camera-image {
+                    height: 180px;
+                    object-fit: cover;
+                }
+                .status-badge {
+                    font-size: 0.75rem;
+                    padding: 0.25rem 0.5rem;
+                }
+            </style>
+            <div class="bg-white rounded-lg overflow-hidden border border-gray-200">
+                <div class="relative">
+                    <img src="${image}" alt="${name}" class="w-full camera-image">
+                    <div class="absolute top-2 right-2">
+                        <span class="status-badge rounded-full bg-${statusColors[status]}-100 text-${statusColors[status]}-800">
+                            ${statusTexts[status]}
+                        </span>
+                    </div>
+                </div>
+                <div class="p-4">
+                    <h3 class="font-medium text-gray-800">${name}</h3>
+                    <div class="flex justify-between items-center mt-2">
+                        <span class="text-sm text-gray-500">Last alert: ${lastAlert}</span>
+                        <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
+                            View
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-camera-card', CustomCameraCard);

components/navbar.js

@@ -0,0 +1,43 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .navbar {
+                    height: 60px;
+                    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+                }
+                .user-menu {
+                    transition: all 0.3s ease;
+                }
+                .user-menu:hover {
+                    background-color: rgba(0, 0, 0, 0.05);
+                }
+            </style>
+            <nav class="navbar bg-white w-full fixed z-10">
+                <div class="flex items-center justify-between h-full px-6">
+                    <div class="flex items-center space-x-4">
+                        <span class="text-xl font-bold text-gray-800">WatchTower Sentinel</span>
+                    </div>
+                    
+                    <div class="flex items-center space-x-4">
+                        <button class="p-2 rounded-full hover:bg-gray-100">
+                            <i data-feather="bell"></i>
+                        </button>
+                        <button class="p-2 rounded-full hover:bg-gray-100">
+                            <i data-feather="settings"></i>
+                        </button>
+                        
+                        <div class="flex items-center space-x-2 pl-4 user-menu rounded-full cursor-pointer">
+                            <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">
+                                JS
+                            </div>
+                            <span class="text-sm font-medium text-gray-700">John Smith</span>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

components/sidebar.js

@@ -0,0 +1,80 @@
+class CustomSidebar extends HTMLElement {
+    connectedCallback() {
+        const active = this.getAttribute('active') || 'dashboard';
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .sidebar {
+                    width: 240px;
+                    height: calc(100vh - 60px);
+                    top: 60px;
+                }
+                .nav-item {
+                    transition: all 0.2s ease;
+                }
+                .nav-item:hover {
+                    background-color: rgba(59, 130, 246, 0.1);
+                }
+                .nav-item.active {
+                    background-color: rgba(59, 130, 246, 0.1);
+                    border-left: 3px solid rgb(59, 130, 246);
+                }
+                .nav-item.active .nav-text {
+                    color: rgb(59, 130, 246);
+                    font-weight: 500;
+                }
+                .nav-item.active i {
+                    color: rgb(59, 130, 246);
+                }
+            </style>
+            <aside class="sidebar bg-white fixed shadow-sm">
+                <div class="py-4">
+                    <div class="px-4 mb-6">
+                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Monitoring</div>
+                        <a href="index.html" class="nav-item flex items-center px-4 py-2 ${active === 'dashboard' ? 'active' : ''}">
+                            <i data-feather="activity" class="mr-3"></i>
+                            <span class="nav-text">Dashboard</span>
+                        </a>
+                        <a href="alarms.html" class="nav-item flex items-center px-4 py-2 ${active === 'alarms' ? 'active' : ''}">
+                            <i data-feather="bell" class="mr-3"></i>
+                            <span class="nav-text">Alarms</span>
+                        </a>
+                        <a href="alerts.html" class="nav-item flex items-center px-4 py-2 ${active === 'alerts' ? 'active' : ''}">
+                            <i data-feather="alert-triangle" class="mr-3"></i>
+                            <span class="nav-text">Alerts</span>
+                        </a>
+                    </div>
+                    
+                    <div class="px-4 mb-6">
+                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Management</div>
+                        <a href="cameras.html" class="nav-item flex items-center px-4 py-2 ${active === 'cameras' ? 'active' : ''}">
+                            <i data-feather="video" class="mr-3"></i>
+                            <span class="nav-text">Cameras</span>
+                        </a>
+                        <a href="clients.html" class="nav-item flex items-center px-4 py-2 ${active === 'clients' ? 'active' : ''}">
+                            <i data-feather="users" class="mr-3"></i>
+                            <span class="nav-text">Clients</span>
+                        </a>
+                        <a href="plants.html" class="nav-item flex items-center px-4 py-2 ${active === 'plants' ? 'active' : ''}">
+                            <i data-feather="map" class="mr-3"></i>
+                            <span class="nav-text">Plants</span>
+                        </a>
+                    </div>
+                    
+                    <div class="px-4">
+                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Settings</div>
+                        <a href="settings.html" class="nav-item flex items-center px-4 py-2 ${active === 'settings' ? 'active' : ''}">
+                            <i data-feather="settings" class="mr-3"></i>
+                            <span class="nav-text">System Settings</span>
+                        </a>
+                        <a href="users.html" class="nav-item flex items-center px-4 py-2 ${active === 'users' ? 'active' : ''}">
+                            <i data-feather="user" class="mr-3"></i>
+                            <span class="nav-text">User Management</span>
+                        </a>
+                    </div>
+                </div>
+            </aside>
+        `;
+    }
+}
+customElements.define('custom-sidebar', CustomSidebar);

components/status-card.js

@@ -0,0 +1,43 @@
+class CustomStatusCard extends HTMLElement {
+    connectedCallback() {
+        const title = this.getAttribute('title') || '';
+        const value = this.getAttribute('value') || '0';
+        const icon = this.getAttribute('icon') || 'activity';
+        const trend = this.getAttribute('trend') || 'same';
+        const change = this.getAttribute('change') || '0';
+        const color = this.getAttribute('color') || 'blue';
+        
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .card {
+                    transition: all 0.3s ease;
+                }
+                .card:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+                }
+            </style>
+            <div class="card bg-white rounded-xl shadow p-6">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-sm font-medium text-gray-500">${title}</p>
+                        <h3 class="text-2xl font-bold text-gray-800 mt-1">${value}</h3>
+                    </div>
+                    <div class="p-3 rounded-lg bg-${color}-100 text-${color}-600">
+                        <i data-feather="${icon}"></i>
+                    </div>
+                </div>
+                <div class="mt-4 flex items-center text-sm ${trend === 'up' ? 'text-green-600' : trend === 'down' ? 'text-red-600' : 'text-gray-500'}">
+                    ${trend === 'up' ? 
+                        '<i data-feather="trending-up" class="mr-1"></i>' : 
+                        trend === 'down' ? 
+                        '<i data-feather="trending-down" class="mr-1"></i>' : 
+                        '<i data-feather="minus" class="mr-1"></i>'}
+                    <span>${change} ${trend === 'same' ? '' : trend === 'up' ? 'increase' : 'decrease'} from yesterday</span>
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-status-card', CustomStatusCard);

index.html

@@ -1,19 +1,140 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<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>

script.js

@@ -0,0 +1,59 @@
+// Global functions and event listeners
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+    
+    // Handle dark mode toggle if needed
+    const darkModeToggle = document.getElementById('darkModeToggle');
+    if(darkModeToggle) {
+        darkModeToggle.addEventListener('click', function() {
+            document.documentElement.classList.toggle('dark');
+        });
+    }
+});
+
+// API functions
+async function fetchAlarms() {
+    try {
+        const response = await fetch('/api/alarms');
+        return await response.json();
+    } catch (error) {
+        console.error('Error fetching alarms:', error);
+        return [];
+    }
+}
+
+async function fetchCameras() {
+    try {
+        const response = await fetch('/api/cameras');
+        return await response.json();
+    } catch (error) {
+        console.error('Error fetching cameras:', error);
+        return [];
+    }
+}
+
+// Utility functions
+function formatDateTime(dateString) {
+    const options = { 
+        year: 'numeric', 
+        month: 'short', 
+        day: 'numeric',
+        hour: '2-digit', 
+        minute: '2-digit' 
+    };
+    return new Date(dateString).toLocaleDateString('en-US', options);
+}
+
+function getPriorityColor(priority) {
+    const colors = {
+        'critical': 'red',
+        'high': 'orange',
+        'medium': 'yellow',
+        'low': 'green'
+    };
+    return colors[priority.toLowerCase()] || 'gray';
+}

style.css

@@ -1,28 +1,39 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Animation for alerts */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
 }
+
+.alert-pulse {
+    animation: pulse 2s infinite;
+}