ajouter un system HT pour connecter les talkie walkie qui ont Bluetooth avec le systeme dashboard exemple phots
f05bb21 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Security Dashboard - ComSync Pro</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .security-level-critical { color: #EF4444; } | |
| .security-level-high { color: #F59E0B; } | |
| .security-level-medium { color: #3B82F6; } | |
| .security-level-low { color: #10B981; } | |
| .security-level-info { color: #6B7280; } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .animate-pulse { | |
| animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> | |
| <div class="relative z-10 min-h-screen p-4 md:p-6"> | |
| <!-- Header --> | |
| <header class="bg-gray-800/80 backdrop-blur-md rounded-xl p-4 mb-6 border border-gray-700/50 shadow-lg"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="shield" class="w-8 h-8 text-red-400"></i> | |
| <h1 class="text-2xl font-bold bg-gradient-to-r from-red-400 to-orange-400 bg-clip-text text-transparent">Security Operations Center</h1> | |
| </div> | |
| <div class="flex flex-wrap items-center gap-4"> | |
| <div class="status-pill flex items-center px-3 py-1 rounded-full text-sm bg-green-900/30 text-green-400"> | |
| <i data-feather="check-circle" class="w-4 h-4 mr-1"></i> | |
| <span id="security-status">All Systems Secure</span> | |
| </div> | |
| <div class="flex items-center space-x-1"> | |
| <i data-feather="clock" class="w-5 h-5"></i> | |
| <span class="text-sm" id="current-time">14:45:32</span> | |
| </div> | |
| <button id="emergency-lockdown" class="px-3 py-1 bg-red-600 hover:bg-red-700 rounded text-sm font-medium"> | |
| Emergency Lockdown | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Security Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6"> | |
| <div class="bg-red-900/30 p-4 rounded-lg text-center border border-red-900/30"> | |
| <i data-feather="alert-triangle" class="w-6 h-6 text-red-400 mx-auto mb-2"></i> | |
| <p class="text-sm">Critical Alerts</p> | |
| <p class="text-lg font-semibold text-red-400" id="critical-count">0</p> | |
| </div> | |
| <div class="bg-orange-900/30 p-4 rounded-lg text-center border border-orange-900/30"> | |
| <i data-feather="shield" class="w-6 h-6 text-orange-400 mx-auto mb-2"></i> | |
| <p class="text-sm">High Priority</p> | |
| <p class="text-lg font-semibold text-orange-400" id="high-count">2</p> | |
| </div> | |
| <div class="bg-blue-900/30 p-4 rounded-lg text-center border border-blue-900/30"> | |
| <i data-feather="eye" class="w-6 h-6 text-blue-400 mx-auto mb-2"></i> | |
| <p class="text-sm">Monitoring</p> | |
| <p class="text-lg font-semibold text-blue-400">24/7</p> | |
| </div> | |
| <div class="bg-green-900/30 p-4 rounded-lg text-center border border-green-900/30"> | |
| <i data-feather="check-circle" class="w-6 h-6 text-green-400 mx-auto mb-2"></i> | |
| <p class="text-sm">Systems Online</p> | |
| <p class="text-lg font-semibold text-green-400">98%</p> | |
| </div> | |
| <div class="bg-purple-900/30 p-4 rounded-lg text-center border border-purple-900/30"> | |
| <i data-feather="users" class="w-6 h-6 text-purple-400 mx-auto mb-2"></i> | |
| <p class="text-sm">Active Personnel</p> | |
| <p class="text-lg font-semibold text-purple-400">12</p> | |
| </div> | |
| </div> | |
| <!-- Main Content Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Security Alerts Panel --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Active Threats --> | |
| <div class="bg-gray-800/80 backdrop-blur-md rounded-xl p-5 border border-gray-700/50 shadow-lg"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold flex items-center"> | |
| <i data-feather="alert-octagon" class="w-5 h-5 mr-2 text-red-400"></i> | |
| Active Security Threats | |
| </h2> | |
| <span class="text-xs bg-red-900/30 text-red-400 px-2 py-1 rounded-full">2 Active</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="bg-red-900/20 p-4 rounded-lg border border-red-700/50"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 animate-pulse"></div> | |
| <span class="font-medium security-level-critical">CRITICAL THREAT</span> | |
| </div> | |
| <span class="text-xs text-gray-400">14:32</span> | |
| </div> | |
| <h3 class="font-semibold mb-2">Unauthorized Access Attempt</h3> | |
| <p class="text-sm text-gray-300 mb-3">Multiple failed login attempts detected from IP 192.168.1.45. User: admin@system.local</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-xs bg-red-900/30 text-red-400 px-2 py-1 rounded">System Login</span> | |
| <span class="text-xs text-gray-400">Source: Internal Network</span> | |
| </div> | |
| <button class="px-3 py-1 bg-red-600 hover:bg-red-700 rounded text-sm"> | |
| Investigate | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-orange-900/20 p-4 rounded-lg border border-orange-700/50"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-orange-500"></div> | |
| <span class="font-medium security-level-high">HIGH PRIORITY</span> | |
| </div> | |
| <span class="text-xs text-gray-400">14:28</span> | |
| </div> | |
| <h3 class="font-semibold mb-2">Unusual Data Transfer</h3> | |
| <p class="text-sm text-gray-300 mb-3">Large file transfer detected from Maria Garcia's terminal to external storage device</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-xs bg-orange-900/30 text-orange-400 px-2 py-1 rounded">Data Exfiltration</span> | |
| <span class="text-xs text-gray-400">Sector: Base Camp</span> | |
| </div> | |
| <button class="px-3 py-1 bg-orange-600 hover:bg-orange-700 rounded text-sm"> | |
| Monitor | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Security Logs --> | |
| <div class="bg-gray-800/80 backdrop-blur-md rounded-xl p-5 border border-gray-700/50 shadow-lg"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold flex items-center"> | |
| <i data-feather="file-text" class="w-5 h-5 mr-2 text-blue-400"></i> | |
| Security Event Log | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-700 rounded text-sm hover:bg-gray-600">All</button> | |
| <button class="px-3 py-1 bg-red-900/30 text-red-400 rounded text-sm">Critical</button> | |
| <button class="px-3 py-1 bg-orange-900/30 text-orange-400 rounded text-sm">High</button> | |
| </div> | |
| </div> | |
| <div class="space-y-3 max-h-80 overflow-y-auto scrollbar-hide"> | |
| <div class="bg-gray-700/50 p-3 rounded-lg"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="shield" class="w-4 h-4 text-blue-400"></i> | |
| <span class="font-medium">System Scan Completed</span> | |
| </div> | |
| <span class="text-xs text-gray-400">14:45</span> | |
| </div> | |
| <p class="text-sm text-gray-300">Weekly security scan completed successfully. No threats detected.</p> | |
| <div class="flex items-center text-xs text-gray-400 mt-2"> | |
| <span class="bg-blue-900/30 text-blue-400 px-2 py-1 rounded">INFO</span> | |
| <span class="ml-2">Duration: 12 minutes</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700/50 p-3 rounded-lg"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="user-check" class="w-4 h-4 text-green-400"></i> | |
| <span class="font-medium">User Authentication</span> | |
| </div> | |
| <span class="text-xs text-gray-400">14:42</span> | |
| </div> | |
| <p class="text-sm text-gray-300">John Smith authenticated via secure channel</p> | |
| <div class="flex items-center text-xs text-gray-400 mt-2"> | |
| <span class="bg-green-900/30 text-green-400 px-2 py-1 rounded">SUCCESS</span> | |
| <span class="ml-2">Sector: 7</span> | |
| </div> | |
| </div> | |
| <div class="bg-red-900/30 p-3 rounded-lg border border-red-700/50"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="alert-triangle" class="w-4 h-4 text-red-400"></i> | |
| <span class="font-medium">Access Denied</span> | |
| </div> | |
| <span class="text-xs text-gray-400">14:35</span> | |
| </div> | |
| <p class="text-sm text-gray-300">Unauthorized access attempt to FM Dashboard blocked</p> | |
| <div class="flex items-center text-xs text-gray-400 mt-2"> | |
| <span class="bg-red-900/30 text-red-400 px-2 py-1 rounded">CRITICAL</span> | |
| <span class="ml-2">IP: 192.168.1.45</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700/50 p-3 rounded-lg"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="wifi" class="w-4 h-4 text-yellow-400"></i> | |
| <span class="font-medium">Network Anomaly</span> | |
| </div> | |
| <span class="text-xs text-gray-400">14:30</span> | |
| </div> | |
| <p class="text-sm text-gray-300">Unusual network traffic pattern detected from Robert Johnson's terminal</p> | |
| <div class="flex items-center text-xs text-gray-400 mt-2"> | |
| <span class="bg-yellow-900/30 text-yellow-400 px-2 py-1 rounded">WARNING</span> | |
| <span class="ml-2">Sector: 3</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Security Controls Panel --> | |
| <div class="space-y-6"> | |
| <!-- System Status --> | |
| <div class="bg-gray-800/80 backdrop-blur-md rounded-xl p-5 border border-gray-700/50 shadow-lg"> | |
| <h2 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i data-feather="monitor" class="w-5 h-5 mr-2 text-green-400"></i> | |
| System Status | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">Firewall Status</span> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| <span class="text-green-400 text-sm">Active</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">Intrusion Detection</span> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| <span class="text-green-400 text-sm">Monitoring</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">Data Encryption</span> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| <span class="text-green-400 text-sm">Enabled</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">Backup Systems</span> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| <span class="text-green-400 text-sm">Synced</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">Access Control</span> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-yellow-500"></div> | |
| <span class="text-yellow-400 text-sm">Reviewing</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="bg-gray-800/80 backdrop-blur-md rounded-xl p-5 border border-gray-700/50 shadow-lg"> | |
| <h2 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i data-feather="zap" class="w-5 h-5 mr-2 text-yellow-400"></i> | |
| Quick Actions | |
| </h2> | |
| <div class="space-y-3"> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 p-3 rounded-lg text-left transition-colors"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="scan" class="w-5 h-5"></i> | |
| <span>Run Security Scan</span> | |
| </div> | |
| </button> | |
| <button class="w-full bg-green-600 hover:bg-green-700 p-3 rounded-lg text-left transition-colors"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="refresh-cw" class="w-5 h-5"></i> | |
| <span>Update Security Patches</span> | |
| </div> | |
| </button> | |
| <button class="w-full bg-orange-600 hover:bg-orange-700 p-3 rounded-lg text-left transition-colors"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="users" class="w-5 h-5"></i> | |
| <span>Review Access Logs</span> | |
| </div> | |
| </button> | |
| <button class="w-full bg-purple-600 hover:bg-purple-700 p-3 rounded-lg text-left transition-colors"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="file-text" class="w-5 h-5"></i> | |
| <span>Generate Report</span> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Personnel Status --> | |
| <div class="bg-gray-800/80 backdrop-blur-md rounded-xl p-5 border border-gray-700/50 shadow-lg"> | |
| <h2 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i data-feather="users" class="w-5 h-5 mr-2 text-purple-400"></i> | |
| Security Personnel | |
| </h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| <div> | |
| <p class="text-sm font-medium">Ahmed Benjelloun</p> | |
| <p class="text-xs text-gray-400">Security Chief</p> | |
| </div> | |
| </div> | |
| <span class="text-xs bg-green-900/30 text-green-400 px-2 py-1 rounded">On Duty</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| <div> | |
| <p class="text-sm font-medium">Lisa Chen</p> | |
| <p class="text-xs text-gray-400">Security Analyst</p> | |
| </div> | |
| </div> | |
| <span class="text-xs bg-green-900/30 text-green-400 px-2 py-1 rounded">On Duty</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-2 h-2 rounded-full bg-gray-500"></div> | |
| <div> | |
| <p class="text-sm font-medium">Mike Rodriguez</p> | |
| <p class="text-xs text-gray-400">Security Guard</p> | |
| </div> | |
| </div> | |
| <span class="text-xs bg-gray-900/30 text-gray-400 px-2 py-1 rounded">Off Duty</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0xff0000, | |
| backgroundColor: 0x111827, | |
| points: 8.00, | |
| maxDistance: 20.00, | |
| spacing: 16.00 | |
| }); | |
| // Update current time | |
| function updateTime() { | |
| const now = new Date(); | |
| document.getElementById('current-time').textContent = now.toLocaleTimeString(); | |
| } | |
| setInterval(updateTime, 1000); | |
| updateTime(); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Security status simulation | |
| let criticalCount = 0; | |
| let highCount = 2; | |
| function updateSecurityCounts() { | |
| document.getElementById('critical-count').textContent = criticalCount; | |
| document.getElementById('high-count').textContent = highCount; | |
| // Update security status | |
| const statusElement = document.getElementById('security-status'); | |
| if (criticalCount > 0) { | |
| statusElement.textContent = 'CRITICAL THREATS ACTIVE'; | |
| statusElement.parentElement.className = 'status-pill flex items-center px-3 py-1 rounded-full text-sm bg-red-900/30 text-red-400'; | |
| } else if (highCount > 0) { | |
| statusElement.textContent = 'High Priority Alerts'; | |
| statusElement.parentElement.className = 'status-pill flex items-center px-3 py-1 rounded-full text-sm bg-orange-900/30 text-orange-400'; | |
| } else { | |
| statusElement.textContent = 'All Systems Secure'; | |
| statusElement.parentElement.className = 'status-pill flex items-center px-3 py-1 rounded-full text-sm bg-green-900/30 text-green-400'; | |
| } | |
| } | |
| // Emergency lockdown functionality | |
| document.getElementById('emergency-lockdown').addEventListener('click', function() { | |
| const confirmLockdown = confirm( | |
| '🚨 EMERGENCY LOCKDOWN PROTOCOL 🚨\n\nThis will immediately:\n- Disable all non-essential access\n- Lock down communication channels\n- Activate maximum security protocols\n- Alert all security personnel\n\nThis action CANNOT be undone remotely.\n\nProceed with emergency lockdown?' | |
| ); | |
| if (confirmLockdown) { | |
| // Simulate lockdown activation | |
| this.textContent = 'LOCKDOWN ACTIVE'; | |
| this.className = 'px-3 py-1 bg-red-800 rounded text-sm font-medium animate-pulse'; | |
| console.log('Emergency Lockdown Activated:', { | |
| timestamp: new Date().toISOString(), | |
| operator: 'Current User', | |
| location: 'Security Operations Center', | |
| securityLevel: 'MAXIMUM' | |
| }); | |
| alert('🔒 EMERGENCY LOCKDOWN ACTIVATED\n\nAll non-essential access has been disabled.\nSecurity protocols are now at maximum level.\nAll personnel have been notified.'); | |
| // In a real implementation, this would trigger actual security measures | |
| updateSecurityCounts(); | |
| } | |
| }); | |
| // Simulate security events | |
| function simulateSecurityEvents() { | |
| const eventTypes = ['critical', 'high', 'info']; | |
| const eventType = eventTypes[Math.floor(Math.random() * eventTypes.length)]; | |
| if (eventType === 'critical' && Math.random() > 0.7) { | |
| criticalCount++; | |
| console.log('Critical security event detected'); | |
| } else if (eventType === 'high' && Math.random() > 0.5) { | |
| highCount++; | |
| console.log('High priority security event detected'); | |
| } else if (eventType === 'info') { | |
| console.log('Security info event logged'); | |
| } | |
| updateSecurityCounts(); | |
| } | |
| // Run security event simulation every 15 seconds | |
| setInterval(simulateSecurityEvents, 15000); | |
| // Quick action handlers | |
| document.querySelectorAll('.bg-blue-600, .bg-green-600, .bg-orange-600, .bg-purple-600').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const action = this.querySelector('span').textContent; | |
| console.log(`Security action triggered: ${action}`); | |
| // Visual feedback | |
| const originalClass = this.className; | |
| this.className = this.className.replace('hover:bg-', 'bg-') + ' animate-pulse'; | |
| setTimeout(() => { | |
| this.className = originalClass; | |
| }, 1000); | |
| if (action === 'Run Security Scan') { | |
| alert('🛡️ Security scan initiated...\n\nScanning all systems for vulnerabilities.\nEstimated completion: 5 minutes.\nYou will be notified when complete.'); | |
| } else if (action === 'Update Security Patches') { | |
| alert('🔧 Security patch update initiated...\n\nDownloading latest security patches.\nEstimated completion: 10 minutes.\nSystem may require restart.'); | |
| } else if (action === 'Review Access Logs') { | |
| alert('📋 Access logs review initiated...\n\nGenerating comprehensive access report.\nProcessing user activity for past 30 days.'); | |
| } else if (action === 'Generate Report') { | |
| alert('📊 Security report generation started...\n\nCompiling security metrics and incident summaries.\nReport will be available in Security Reports section.'); | |
| } | |
| }); | |
| }); | |
| // Handle browser back/forward buttons | |
| window.addEventListener('popstate', function(event) { | |
| // Reload the page to ensure proper state restoration | |
| location.reload(); | |
| }); | |
| // Add history entry for proper back navigation | |
| history.pushState(null, null, location.href); | |
| </script> | |
| <script src="components/navbar.js"></script> | |
| </body> | |
| </html> | |
| ___METADATA_START___ | |
| {"repoId":"secutorpro/comsync-pro-team-connect-hub","isNew":false,"userName":"secutorpro"} | |
| ___METADATA_END___ |