appel video avec plusieurs encrant de suivie par l'ia , connection appel 4g 5 g 3g , connection wifi Bluetooth , radio fréquence FM 85 mhz , tout geré par llama

components/navbar.js

@@ -71,7 +71,7 @@ class CustomNavbar extends HTMLElement {
             <span>ComSync Pro</span>
           </a>
           <div class="nav-links">
-            <a href="/" class="nav-link active">
+            <a href="/" class="nav-link">
               <i data-feather="map"></i>
               <span>Dashboard</span>
             </a>
@@ -79,6 +79,10 @@ class CustomNavbar extends HTMLElement {
               <i data-feather="message-circle"></i>
               <span>AI Assistant</span>
             </a>
+            <a href="/video-call.html" class="nav-link">
+              <i data-feather="video"></i>
+              <span>Video Call</span>
+            </a>
           </div>
 </div>
       </nav>

components/video-call.js

@@ -0,0 +1,218 @@
+class VideoCall extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+        .video-container {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+          gap: 1rem;
+          padding: 1rem;
+          background: rgba(31, 41, 55, 0.8);
+          border-radius: 0.75rem;
+          border: 1px solid rgba(75, 85, 99, 0.5);
+        }
+        .video-box {
+          position: relative;
+          aspect-ratio: 16/9;
+          background: #111827;
+          border-radius: 0.5rem;
+          overflow: hidden;
+        }
+        .video-feed {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+        .video-label {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background: rgba(0, 0, 0, 0.7);
+          padding: 0.5rem;
+          color: white;
+          font-size: 0.875rem;
+          display: flex;
+          justify-content: space-between;
+        }
+        .connection-status {
+          display: flex;
+          gap: 0.5rem;
+          align-items: center;
+        }
+        .status-indicator {
+          width: 0.5rem;
+          height: 0.5rem;
+          border-radius: 50%;
+        }
+        .online { background: #10B981; }
+        .offline { background: #EF4444; }
+        .weak { background: #F59E0B; }
+        .controls {
+          display: flex;
+          justify-content: center;
+          gap: 1rem;
+          padding: 1rem;
+          background: rgba(31, 41, 55, 0.8);
+          border-radius: 0.75rem;
+          margin-top: 1rem;
+          border: 1px solid rgba(75, 85, 99, 0.5);
+        }
+        .control-btn {
+          width: 3rem;
+          height: 3rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        .end-call {
+          background: #EF4444;
+        }
+        .mute {
+          background: #3B82F6;
+        }
+        .video-toggle {
+          background: #3B82F6;
+        }
+        .ai-analysis {
+          background: #8B5CF6;
+        }
+        .ai-tracking {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          padding: 0.5rem;
+          background: rgba(0, 0, 0, 0.5);
+          color: white;
+          font-size: 0.75rem;
+        }
+        .network-info {
+          position: absolute;
+          top: 0.5rem;
+          right: 0.5rem;
+          background: rgba(0, 0, 0, 0.7);
+          padding: 0.25rem 0.5rem;
+          border-radius: 0.25rem;
+          font-size: 0.75rem;
+          color: white;
+        }
+      </style>
+      <div class="video-container">
+        <!-- Main Video Feed -->
+        <div class="video-box">
+          <video class="video-feed" autoplay muted></video>
+          <div class="video-label">
+            <span>You</span>
+            <div class="connection-status">
+              <div class="status-indicator online"></div>
+              <span>4G</span>
+            </div>
+          </div>
+          <div class="ai-tracking">AI Tracking: Facial Recognition Active</div>
+          <div class="network-info">85 MHz FM</div>
+        </div>
+        
+        <!-- Remote Video Feeds -->
+        <div class="video-box">
+          <video class="video-feed" autoplay></video>
+          <div class="video-label">
+            <span>John Smith</span>
+            <div class="connection-status">
+              <div class="status-indicator online"></div>
+              <span>5G</span>
+            </div>
+          </div>
+          <div class="ai-tracking">AI Tracking: Location Tracking Active</div>
+          <div class="network-info">WiFi</div>
+        </div>
+        
+        <div class="video-box">
+          <video class="video-feed" autoplay></video>
+          <div class="video-label">
+            <span>Maria Garcia</span>
+            <div class="connection-status">
+              <div class="status-indicator weak"></div>
+              <span>3G</span>
+            </div>
+          </div>
+          <div class="ai-tracking">AI Tracking: Vital Signs Monitoring</div>
+          <div class="network-info">Bluetooth</div>
+        </div>
+        
+        <div class="video-box">
+          <video class="video-feed" autoplay></video>
+          <div class="video-label">
+            <span>Robert Johnson</span>
+            <div class="connection-status">
+              <div class="status-indicator offline"></div>
+              <span>Offline</span>
+            </div>
+          </div>
+          <div class="ai-tracking">AI Tracking: Last Known Position</div>
+          <div class="network-info">85 MHz FM</div>
+        </div>
+      </div>
+      
+      <div class="controls">
+        <div class="control-btn mute">
+          <i data-feather="mic-off"></i>
+        </div>
+        <div class="control-btn video-toggle">
+          <i data-feather="video"></i>
+        </div>
+        <div class="control-btn ai-analysis">
+          <i data-feather="activity"></i>
+        </div>
+        <div class="control-btn end-call">
+          <i data-feather="phone-off"></i>
+        </div>
+      </div>
+    `;
+    
+    // Initialize Feather Icons
+    const script = document.createElement('script');
+    script.src = "https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js";
+    script.onload = () => {
+      if (this.shadowRoot) {
+        window.feather.replace();
+      }
+    };
+    this.shadowRoot.appendChild(script);
+    
+    // Simulate connection changes
+    this.simulateConnectionChanges();
+  }
+  
+  simulateConnectionChanges() {
+    const connections = this.shadowRoot.querySelectorAll('.connection-status');
+    
+    setInterval(() => {
+      connections.forEach(conn => {
+        const status = conn.querySelector('.status-indicator');
+        const network = conn.querySelector('span:last-child');
+        
+        const random = Math.random();
+        if (random > 0.8) {
+          // Change status
+          const states = ['online', 'weak', 'offline'];
+          const networks = ['4G', '5G', '3G', 'WiFi', 'Bluetooth', '85 MHz FM'];
+          
+          status.className = 'status-indicator ' + states[Math.floor(Math.random() * states.length)];
+          network.textContent = networks[Math.floor(Math.random() * networks.length)];
+        }
+      });
+    }, 5000);
+  }
+}
+
+customElements.define('video-call', VideoCall);

index.html

@@ -790,5 +790,6 @@
         updateMemberDetails(currentSelectedMember);
 </script>
     <script src="components/navbar.js"></script>
+    <script src="components/video-call.js"></script>
 </body>
 </html>

video-call.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Video Call - 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;
+        }
+        .scrollbar-hide::-webkit-scrollbar {
+            display: none;
+        }
+    </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 class="bg-gray-800/80 backdrop-blur-md rounded-xl p-4 mb-6 border border-gray-700/50 shadow-lg">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <i data-feather="video" class="w-8 h-8 text-purple-400"></i>
+                    <h1 class="text-2xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">Team Video Call</h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="flex items-center space-x-1">
+                        <i data-feather="cpu" class="w-5 h-5 text-green-400"></i>
+                        <span class="text-sm">Llama AI</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>
+                </div>
+            </div>
+        </header>
+
+        <video-call></video-call>
+    </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: 0x8b5cf6,
+            backgroundColor: 0x111827,
+            points: 10.00,
+            maxDistance: 22.00,
+            spacing: 18.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();
+    </script>
+    <script src="components/navbar.js"></script>
+    <script src="components/video-call.js"></script>
+</body>
+</html>