active les fonctionalité

chat.html

@@ -51,9 +51,9 @@
                 <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>Connected</span>
+                        <span id="connection-status">Connected</span>
                     </div>
-                    <div class="flex items-center space-x-1">
+<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>
@@ -199,41 +199,92 @@
             feather.replace();
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
+        // Connection status simulation
+        let isConnected = true;
+        
+        function updateConnectionStatus() {
+            const statusElement = document.getElementById('connection-status');
+            if (isConnected) {
+                statusElement.textContent = 'Connected';
+                statusElement.parentElement.className = 'status-pill flex items-center px-3 py-1 rounded-full text-sm bg-green-900/30 text-green-400';
+            } else {
+                statusElement.textContent = 'Disconnected';
+                statusElement.parentElement.className = 'status-pill flex items-center px-3 py-1 rounded-full text-sm bg-red-900/30 text-red-400';
+            }
+        }
+        
+        // Simulate connection issues randomly
+        setInterval(() => {
+            if (Math.random() > 0.8) {
+                isConnected = !isConnected;
+                updateConnectionStatus();
+                
+                if (!isConnected) {
+                    addMessage('ai', 'Warning: Connection to Mission Control has been lost. Attempting to reestablish...');
+                } else {
+                    addMessage('ai', 'Connection restored. Mission Control is now online.');
+                }
+            }
+        }, 15000);
 
         // Simulate AI response streaming
         async function simulateAIResponse(userMessage) {
+            // Check connection first
+            if (!isConnected) {
+                addMessage('ai', 'Unable to process request: No connection to Mission Control. Please check your communication systems.');
+                return;
+            }
+            
             // Show typing indicator
             typingIndicator.classList.remove('hidden');
             chatMessages.scrollTop = chatMessages.scrollHeight;
             
-            // Simulate API delay
-            await new Promise(resolve => setTimeout(resolve, 1000));
+            // Simulate variable API delay
+            const delay = 500 + Math.random() * 1500;
+            await new Promise(resolve => setTimeout(resolve, delay));
             
             // Hide typing indicator
             typingIndicator.classList.add('hidden');
             
-            // Simulated responses based on user input
+            // Simulated responses based on user input with more variety
             let response = "";
             const lowerMsg = userMessage.toLowerCase();
             
-            if (lowerMsg.includes("hello") || lowerMsg.includes("hi")) {
-                response = "Hello! How can I assist with your mission today?";
-            } else if (lowerMsg.includes("emergency") || lowerMsg.includes("help")) {
-                response = "For emergencies, please contact Mission Control immediately on Channel 1. What is the nature of your emergency?";
-            } else if (lowerMsg.includes("procedure") || lowerMsg.includes("protocol")) {
-                response = "Standard operating procedures are available in the digital manual. For immediate guidance, specify the procedure you need.";
-            } else if (lowerMsg.includes("location") || lowerMsg.includes("position")) {
-                response = "I can access real-time positioning data through integrated systems. Please specify whose location you're requesting.";
-            } else if (lowerMsg.includes("weather")) {
-                response = "Current weather conditions show clear skies with visibility at maximum range. Winds are negligible.";
+            if (lowerMsg.includes("hello") || lowerMsg.includes("hi") || lowerMsg.includes("hey")) {
+                const greetings = [
+                    "Greetings, operative. How can I assist with your mission today?",
+                    "Hello! Ready to support your operational needs. What can I do for you?",
+                    "Hi there! I'm monitoring all channels. What's your request?"
+                ];
+                response = greetings[Math.floor(Math.random() * greetings.length)];
+            } else if (lowerMsg.includes("emergency") || lowerMsg.includes("help") || lowerMsg.includes("mayday")) {
+                response = "CRITICAL ALERT: Emergency protocols activated. Contacting Mission Control immediately on Channel 1. Please state your emergency clearly.";
+            } else if (lowerMsg.includes("procedure") || lowerMsg.includes("protocol") || lowerMsg.includes("sop")) {
+                response = "Accessing Standard Operating Procedures database... Please specify which protocol you require:\n- Emergency Evacuation\n- Medical Response\n- Security Breach\n- Equipment Failure";
+            } else if (lowerMsg.includes("location") || lowerMsg.includes("position") || lowerMsg.includes("where")) {
+                response = "Integrating GPS tracking systems...\nLatest known positions:\n- John Smith: Sector 7 (40.74844°N, -73.98566°W)\n- Maria Garcia: Base Camp (40.74890°N, -73.98750°W)\n- Robert Johnson: Sector 3 (40.74780°N, -73.98620°W)";
+            } else if (lowerMsg.includes("weather") || lowerMsg.includes("climate") || lowerMsg.includes("conditions")) {
+                response = "Accessing meteorological data...\nCurrent Conditions:\n- Visibility: Excellent (10km+)\n- Temperature: 22°C (72°F)\n- Wind: 5 km/h NE\n- Atmospheric Pressure: Stable\n- Precipitation: None forecasted";
+            } else if (lowerMsg.includes("status") || lowerMsg.includes("update") || lowerMsg.includes("report")) {
+                response = "System Status Report:\n- Network: Online\n- GPS: Active\n- Signal Strength: Good\n- Battery: 85%\n- Team Members: 3 Online\nAll systems functioning within normal parameters.";
+            } else if (lowerMsg.includes("channel") || lowerMsg.includes("frequency") || lowerMsg.includes("communication")) {
+                response = "Communication Channels Status:\n- Channel 1 (Operations): Active\n- Channel 2 (Logistics): Active\n- Channel 3 (Medical): Active\n- Channel 4 (Security): Active\nAll channels monitored and operational.";
             } else {
-                response = "I've analyzed your query and can confirm that operational parameters remain within acceptable limits. If you have specific concerns, please detail them for targeted assistance.";
+                const responses = [
+                    "Acknowledged. Processing your request...",
+                    "Understood. I've logged this information in the system.",
+                    "Confirmed. All team members notified.",
+                    "Analyzing your query... Operational parameters remain stable.",
+                    "Request received. Cross-referencing with mission protocols...",
+                    "Data processed. No anomalies detected in current operations.",
+                    "Command understood. Executing requested action sequence."
+                ];
+                response = responses[Math.floor(Math.random() * responses.length)];
             }
             
             addMessage('ai', response);
         }
-
-        // Handle form submission
+// Handle form submission
         chatForm.addEventListener('submit', async (e) => {
             e.preventDefault();
             
@@ -247,7 +298,6 @@
             // Get AI response
             await simulateAIResponse(message);
         });
-
         // Allow sending with Enter key
         userInput.addEventListener('keypress', (e) => {
             if (e.key === 'Enter' && !e.shiftKey) {
@@ -255,6 +305,26 @@
                 chatForm.dispatchEvent(new Event('submit'));
             }
         });
-    </script>
+        
+        // Add click handler for settings button
+        document.querySelector('.settings-btn').addEventListener('click', function() {
+            alert('AI Assistant settings would open here in a full implementation.');
+        });
+        
+        // Simulate periodic status updates
+        setInterval(() => {
+            if (isConnected && Math.random() > 0.7) {
+                const statuses = [
+                    "Mission Control reports all systems nominal.",
+                    "Weather conditions remain stable across all sectors.",
+                    "All team members accounted for and reporting normal status.",
+                    "Communications network integrity at 98.7% efficiency.",
+                    "Power levels maintaining optimal charge across all units."
+                ];
+                const randomStatus = statuses[Math.floor(Math.random() * statuses.length)];
+                addMessage('ai', `[SYSTEM UPDATE] ${randomStatus}`);
+            }
+        }, 30000);
+</script>
 </body>
 </html>

components/navbar.js

@@ -50,7 +50,10 @@ class CustomNavbar extends HTMLElement {
         .nav-link.active {
           color: #60a5fa;
         }
-        @media (max-width: 768px) {
+        .nav-link.active i {
+          color: #60a5fa;
+        }
+@media (max-width: 768px) {
           .nav-container {
             flex-direction: column;
             gap: 1rem;
@@ -68,7 +71,7 @@ class CustomNavbar extends HTMLElement {
             <span>ComSync Pro</span>
           </a>
           <div class="nav-links">
-            <a href="/" class="nav-link">
+            <a href="/" class="nav-link active">
               <i data-feather="map"></i>
               <span>Dashboard</span>
             </a>
@@ -77,7 +80,7 @@ class CustomNavbar extends HTMLElement {
               <span>AI Assistant</span>
             </a>
           </div>
-        </div>
+</div>
       </nav>
     `;
     

index.html

@@ -278,7 +278,7 @@
                                 <i data-feather="minus" class="w-4 h-4 text-gray-700"></i>
                             </button>
                         </div>
-</div>
+                        </div>
                     </div>
                     
                     <!-- Selected Member Details -->
@@ -315,19 +315,18 @@
                         </div>
                     </div>
                 </div>
-                
-                <!-- Communication Panel -->
+<!-- Communication Panel -->
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                     <!-- Transmit Panel -->
                     <div class="bg-gray-800/80 backdrop-blur-md rounded-xl p-5 border border-gray-700/50 shadow-lg">
                         <div class="flex justify-between items-center mb-4">
                             <h2 class="text-lg font-semibold"><span id="current-channel">Channel 1</span> - Operations</h2>
 <div class="flex items-center space-x-2">
-                                <div class="w-2 h-2 rounded-full bg-green-500"></div>
+                                <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                                 <span class="text-xs">READY</span>
                             </div>
                         </div>
-                        <!-- Transmit Button -->
+<!-- Transmit Button -->
                         <div class="flex justify-center my-6">
                             <button id="transmit-btn" class="transmit-btn w-24 h-24 rounded-full bg-blue-600 hover:bg-blue-500 hover:scale-105 transition-all flex items-center justify-center shadow-lg">
                                 <i data-feather="mic" class="w-10 h-10 text-white"></i>
@@ -690,7 +689,6 @@
         document.getElementById('video-call-btn').addEventListener('click', () => {
             alert(`Initiating video call with ${currentSelectedMember}...`);
         });
-
         // Simulate real-time data updates
         function simulateRealTimeUpdates() {
             // Update battery levels
@@ -702,10 +700,11 @@
             });
             
             // Update main battery indicator
-            const mainBattery = document.querySelector('.status-pill:nth-child(2) span');
-            if (mainBattery) {
-                const newBattery = Math.max(0, parseInt(mainBattery.textContent) - Math.floor(Math.random() * 2));
-                mainBattery.textContent = `${newBattery}%`;
+            const batteryElement = document.querySelector('.flex.items-center.space-x-1:nth-child(3) span');
+            if (batteryElement) {
+                const currentBattery = parseInt(batteryElement.textContent);
+                const newBattery = Math.max(0, currentBattery - Math.floor(Math.random() * 2));
+                batteryElement.textContent = `${newBattery}%`;
             }
             
             // Update selected member if needed
@@ -725,12 +724,54 @@
                     bar.classList.add('bg-gray-600');
                 }
             });
+            
+            // Update last seen time
+            const lastSeenElement = document.getElementById('last-seen');
+            if (lastSeenElement) {
+                const minutes = Math.floor(Math.random() * 10) + 1;
+                lastSeenElement.textContent = `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
+            }
         }
 
         // Run updates every 5 seconds
         setInterval(simulateRealTimeUpdates, 5000);
 
-        // Keyboard shortcut for push-to-talk (Spacebar)
+        // Add click handler for map controls
+        document.getElementById('map-zoom-in').addEventListener('click', function() {
+            this.classList.add('bg-gray-300');
+            setTimeout(() => this.classList.remove('bg-gray-300'), 200);
+        });
+
+        document.getElementById('map-zoom-out').addEventListener('click', function() {
+            this.classList.add('bg-gray-300');
+            setTimeout(() => this.classList.remove('bg-gray-300'), 200);
+        });
+
+        // Add click handlers for recent communications
+        document.querySelectorAll('.bg-gray-700\\/50.p-3.rounded-lg').forEach(item => {
+            item.addEventListener('click', function() {
+                const channel = this.querySelector('.bg-gray-600\\/50').textContent;
+                const sender = this.querySelector('.font-medium').textContent;
+                
+                // Highlight the clicked communication
+                document.querySelectorAll('.bg-gray-700\\/50.p-3.rounded-lg').forEach(el => {
+                    el.classList.remove('bg-blue-900/20', 'border', 'border-blue-500');
+                });
+                this.classList.add('bg-blue-900/20', 'border', 'border-blue-500');
+                
+                // Update channel if needed
+                if (channel === 'Channel 1') {
+                    document.querySelectorAll('.channel-content').forEach(el => {
+                        el.classList.remove('bg-blue-600/20', 'border-l-4', 'border-blue-400');
+                        el.classList.add('bg-gray-700/50', 'hover:bg-gray-600/50');
+                    });
+                    document.querySelector('[data-channel="Channel 1"] .channel-content').classList.remove('bg-gray-700/50', 'hover:bg-gray-600/50');
+                    document.querySelector('[data-channel="Channel 1"] .channel-content').classList.add('bg-blue-600/20', 'border-l-4', 'border-blue-400');
+                    document.getElementById('current-channel').textContent = 'Channel 1';
+                }
+            });
+        });
+// Keyboard shortcut for push-to-talk (Spacebar)
         document.addEventListener('keydown', (e) => {
             if (e.code === 'Space' && !transmitActive && !e.target.matches('input')) {
                 e.preventDefault();