import React, { useState, useEffect, useRef } from 'react';

import { Wifi, Battery, Volume2, Mic, Users, MapPin, Clock, AlertTriangle, CheckCircle, Radio, Search, Video, Phone, Camera, Monitor, RefreshCw, Settings } from 'lucide-react';

const App = () => {
const [activeChannel, setActiveChannel] = useState('Channel 1');
const [isTransmitting, setIsTransmitting] = useState(false);
const [batteryLevel, setBatteryLevel] = useState(85);
const [signalStrength, setSignalStrength] = useState(4);
const [currentTime, setCurrentTime] = useState(new Date());
const [searchTerm, setSearchTerm] = useState('');
const [selectedUser, setSelectedUser] = useState(null);
const [videoCallActive, setVideoCallActive] = useState(false);
const [callDuration, setCallDuration] = useState(0);
const [mapLoaded, setMapLoaded] = useState(false);
const [crmData, setCrmData] = useState([]);
const [crmSyncStatus, setCrmSyncStatus] = useState('connected');
const [syncProgress, setSyncProgress] = useState(100);
const [apiEndpoint, setApiEndpoint] = useState('https://api.company-crm.com/v1');
const [apiKey, setApiKey] = useState('sk_live_xxxxxxxxxxxxxxxx');
const [showSettings, setShowSettings] = useState(false);
const syncIntervalRef = useRef(null);

// Mock data for channels
const channels = [
{ id: 'Channel 1', name: 'Operations', users: 12, active: true },
{ id: 'Channel 2', name: 'Logistics', users: 8, active: false },
{ id: 'Channel 3', name: 'Medical', users: 5, active: false },
{ id: 'Channel 4', name: 'Security', users: 15, active: true },
{ id: 'Channel 5', name: 'Command', users: 3, active: false },
];

// Mock data for recent communications
const recentCommunications = [
{ id: 1, user: 'Team Alpha', message: 'Moving to sector 7', time: '14:32', channel: 'Channel 1', lat: 40.7128, lng: -74.0060 },
{ id: 2, user: 'Medical Team', message: 'Patient status stable', time: '14:28', channel: 'Channel 3', lat: 40.7589, lng: -73.9851 },
{ id: 3, user: 'Logistics', message: 'Supplies delivered', time: '14:25', channel: 'Channel 2', lat: 40.7505, lng: -73.9934 },
{ id: 4, user: 'Security Lead', message: 'Perimeter secure', time: '14:20', channel: 'Channel 4', lat: 40.7282, lng: -74.0776 },
];

// Mock data for team members with locations
const teamMembers = [
{ id: 1, name: 'John Smith', status: 'online', location: 'Sector 7', battery: 92, lat: 40.7128, lng: -74.0060, lastSeen: '2 min ago', videoCapable: true, crmId: 'CRM001' },
{ id: 2, name: 'Maria Garcia', status: 'online', location: 'Base Camp', battery: 78, lat: 40.7589, lng: -73.9851, lastSeen: '5 min ago', videoCapable: true, crmId: 'CRM002' },
{ id: 3, name: 'Robert Johnson', status: 'offline', location: 'Sector 3', battery: 45, lat: 40.7505, lng: -73.9934, lastSeen: '15 min ago', videoCapable: false, crmId: 'CRM003' },
{ id: 4, name: 'Sarah Wilson', status: 'online', location: 'Medical Bay', battery: 88, lat: 40.7282, lng: -74.0776, lastSeen: '1 min ago', videoCapable: true, crmId: 'CRM004' },
{ id: 5, name: 'David Brown', status: 'online', location: 'Perimeter', battery: 67, lat: 40.7831, lng: -73.9712, lastSeen: '3 min ago', videoCapable: true, crmId: 'CRM005' },
];

// CRM API Simulation
const crmApi = {
// Simulate fetching data from CRM
fetchTeamData: async () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
success: true,
data: [
{ id: 'CRM001', name: 'John Smith', role: 'Field Operator', department: 'Operations', contact: '+1-555-0101', email: '[email protected]' },
{ id: 'CRM002', name: 'Maria Garcia', role: 'Logistics Coordinator', department: 'Logistics', contact: '+1-555-0102', email: '[email protected]' },
{ id: 'CRM003', name: 'Robert Johnson', role: 'Maintenance Technician', department: 'Support', contact: '+1-555-0103', email: '[email protected]' },
{ id: 'CRM004', name: 'Sarah Wilson', role: 'Medical Officer', department: 'Medical', contact: '+1-555-0104', email: '[email protected]' },
{ id: 'CRM005', name: 'David Brown', role: 'Security Lead', department: 'Security', contact: '+1-555-0105', email: '[email protected]' }
]
});
}, 1500);
});
},

// Simulate syncing data to CRM
syncCommunication: async (data) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
success: true,
messageId: `MSG${Date.now()}`,
timestamp: new Date().toISOString()
});
}, 1000);
});
},

// Simulate updating user status
updateUserStatus: async (userId, status) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
success: true,
updated: true
});
}, 800);
});
}
};

// Initialize CRM data
useEffect(() => {
const initializeCrmData = async () => {
try {
setCrmSyncStatus('syncing');
setSyncProgress(0);

// Simulate progress
const progressInterval = setInterval(() => {
setSyncProgress(prev => Math.min(prev + 10, 90));
}, 150);

const response = await crmApi.fetchTeamData();
clearInterval(progressInterval);
setSyncProgress(100);

if (response.success) {
setCrmData(response.data);
setCrmSyncStatus('connected');
} else {
setCrmSyncStatus('error');
}
} catch (error) {
setCrmSyncStatus('error');
}
};

initializeCrmData();
}, []);

// Auto-sync every 30 seconds
useEffect(() => {
syncIntervalRef.current = setInterval(async () => {
if (crmSyncStatus === 'connected') {
setCrmSyncStatus('syncing');
setSyncProgress(0);

const progressInterval = setInterval(() => {
setSyncProgress(prev => Math.min(prev + 5, 95));
}, 200);

try {
await crmApi.fetchTeamData();
clearInterval(progressInterval);
setSyncProgress(100);
setTimeout(() => setCrmSyncStatus('connected'), 500);
} catch (error) {
clearInterval(progressInterval);
setCrmSyncStatus('error');
}
}
}, 30000);

return () => clearInterval(syncIntervalRef.current);
}, [crmSyncStatus]);

// Update time every second
useEffect(() => {
const timer = setInterval(() => {
setCurrentTime(new Date());
}, 1000);
return () => clearInterval(timer);
}, []);

// Simulate battery drain
useEffect(() => {
const batteryDrain = setInterval(() => {
setBatteryLevel(prev => Math.max(0, prev - 0.1));
}, 30000);
return () => clearInterval(batteryDrain);
}, []);

// Call duration timer
useEffect(() => {
let callTimer;
if (videoCallActive) {
callTimer = setInterval(() => {
setCallDuration(prev => prev + 1);
}, 1000);
}
return () => {
if (callTimer) clearInterval(callTimer);
};
}, [videoCallActive]);

const handleTransmit = () => {
setIsTransmitting(true);
// Simulate sending communication to CRM
crmApi.syncCommunication({
message: 'Test transmission',
timestamp: new Date().toISOString(),
channelId: activeChannel,
userId: selectedUser?.crmId || 'SYSTEM'
});
setTimeout(() => setIsTransmitting(false), 2000);
};

const startVideoCall = (user) => {
setSelectedUser(user);
setVideoCallActive(true);
setCallDuration(0);
};

const endVideoCall = () => {
setVideoCallActive(false);
setCallDuration(0);
};

const manualSync = async () => {
setCrmSyncStatus('syncing');
setSyncProgress(0);

const progressInterval = setInterval(() => {
setSyncProgress(prev => Math.min(prev + 15, 90));
}, 100);

try {
const response = await crmApi.fetchTeamData();
clearInterval(progressInterval);
setSyncProgress(100);

if (response.success) {
setCrmData(response.data);
setCrmSyncStatus('connected');
setTimeout(() => setSyncProgress(100), 1000);
} else {
setCrmSyncStatus('error');
}
} catch (error) {
clearInterval(progressInterval);
setCrmSyncStatus('error');
}
};

const getSignalBars = (strength) => {
return Array.from({ length: 5 }, (_, i) => (
<div
key={i}
className={`w-1 h-${i + 1} mx-0.5 ${
i < strength ? 'bg-green-500' : 'bg-gray-300'
}`}
/>
));
};

const formatCallDuration = (seconds) => {
const mins = Math.floor(seconds / 60);
const secs = seconds % 60;
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

// Filter team members based on search term
const filteredTeamMembers = teamMembers.filter(member =>
member.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
member.location.toLowerCase().includes(searchTerm.toLowerCase())
);

// Get CRM data for a user
const getUserCrmData = (userId) => {
return crmData.find(user => user.id === userId);
};

// Google Maps component simulation
const GoogleMapComponent = () => {
const [mapCenter, setMapCenter] = useState({ lat: 40.7128, lng: -74.0060 });

useEffect(() => {
// Simulate map loading
const timer = setTimeout(() => {
setMapLoaded(true);
}, 1000);
return () => clearTimeout(timer);
}, []);

const handleMarkerClick = (member) => {
setSelectedUser(member);
setMapCenter({ lat: member.lat, lng: member.lng });
};

if (!mapLoaded) {
return (
<div className="w-full h-96 bg-gray-700 rounded-lg flex items-center justify-center">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
<p>Loading Google Maps...</p>
</div>
</div>
);
}

return (
<div className="relati

README.md

@@ -1,10 +1,13 @@
 ---
-title: Comsync Pro Team Connect Hub
-emoji: 🐠
-colorFrom: purple
+title: ComSync Pro - Team Connect Hub 📻
+colorFrom: yellow
 colorTo: yellow
+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://deepsite.hf.co).

index.html

@@ -1,19 +1,450 @@
-<!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>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ComSync Pro - Team Communication Dashboard</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;
+        }
+        .gradient-map {
+            background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
+        }
+        .signal-bar {
+            width: 4px;
+            margin: 0 1px;
+        }
+        .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; }
+        }
+        .scrollbar-hide::-webkit-scrollbar {
+            display: none;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100">
+    <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="radio" class="w-8 h-8 text-blue-400"></i>
+                    <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-green-400 bg-clip-text text-transparent">ComSync Pro</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>
+                        CRM: Connected
+                    </div>
+                    <div class="flex items-center space-x-1">
+                        <i data-feather="wifi" class="w-5 h-5 text-green-400"></i>
+                        <div class="flex h-4">
+                            <div class="signal-bar h-1 bg-green-500"></div>
+                            <div class="signal-bar h-2 bg-green-500"></div>
+                            <div class="signal-bar h-3 bg-green-500"></div>
+                            <div class="signal-bar h-4 bg-green-500"></div>
+                            <div class="signal-bar h-4 bg-gray-600"></div>
+                        </div>
+                    </div>
+                    <div class="flex items-center space-x-1">
+                        <i data-feather="battery" class="w-5 h-5 text-green-400"></i>
+                        <span class="text-sm">85%</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 class="p-2 bg-gray-700/50 hover:bg-gray-600/50 rounded-lg transition-all">
+                        <i data-feather="settings" class="w-5 h-5"></i>
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+            <!-- Left Sidebar - Channels & Team -->
+            <div class="lg:col-span-1 space-y-6">
+                <!-- Channels Panel -->
+                <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="volume-2" class="w-5 h-5 mr-2 text-blue-400"></i>
+                            Channels
+                        </h2>
+                        <span class="text-xs bg-blue-900/30 text-blue-400 px-2 py-1 rounded-full">12 Active</span>
+                    </div>
+                    <div class="space-y-2">
+                        <div class="channel-card bg-blue-600/20 border-l-4 border-blue-400 p-3 rounded-lg cursor-pointer transition-all hover:bg-blue-600/30">
+                            <div class="flex justify-between items-center">
+                                <div>
+                                    <h3 class="font-medium">Channel 1</h3>
+                                    <p class="text-sm text-blue-200">Operations</p>
+                                </div>
+                                <div class="flex items-center space-x-1">
+                                    <i data-feather="users" class="w-4 h-4"></i>
+                                    <span class="text-xs">12</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="channel-card bg-gray-700/50 hover:bg-gray-600/50 p-3 rounded-lg cursor-pointer transition-all">
+                            <div class="flex justify-between items-center">
+                                <div>
+                                    <h3 class="font-medium">Channel 2</h3>
+                                    <p class="text-sm text-gray-300">Logistics</p>
+                                </div>
+                                <div class="flex items-center space-x-1">
+                                    <i data-feather="users" class="w-4 h-4"></i>
+                                    <span class="text-xs">8</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="channel-card bg-gray-700/50 hover:bg-gray-600/50 p-3 rounded-lg cursor-pointer transition-all">
+                            <div class="flex justify-between items-center">
+                                <div>
+                                    <h3 class="font-medium">Channel 3</h3>
+                                    <p class="text-sm text-gray-300">Medical</p>
+                                </div>
+                                <div class="flex items-center space-x-1">
+                                    <i data-feather="users" class="w-4 h-4"></i>
+                                    <span class="text-xs">5</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="channel-card bg-gray-700/50 hover:bg-gray-600/50 p-3 rounded-lg cursor-pointer transition-all">
+                            <div class="flex justify-between items-center">
+                                <div>
+                                    <h3 class="font-medium">Channel 4</h3>
+                                    <p class="text-sm text-gray-300">Security</p>
+                                </div>
+                                <div class="flex items-center space-x-1">
+                                    <i data-feather="users" class="w-4 h-4"></i>
+                                    <span class="text-xs">15</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Team Status Panel -->
+                <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="users" class="w-5 h-5 mr-2 text-green-400"></i>
+                            Team Status
+                        </h2>
+                        <span class="text-xs bg-green-900/30 text-green-400 px-2 py-1 rounded-full">4 Online</span>
+                    </div>
+                    
+                    <!-- Search -->
+                    <div class="relative mb-4">
+                        <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"></i>
+                        <input type="text" placeholder="Search team..." class="w-full pl-10 pr-4 py-2 bg-gray-700/50 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
+                    </div>
+                    
+                    <!-- Team List -->
+                    <div class="space-y-3 max-h-[420px] overflow-y-auto scrollbar-hide">
+                        <div class="team-member bg-blue-900/20 p-3 rounded-lg flex items-center justify-between">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+                                <div>
+                                    <p class="font-medium text-sm">John Smith</p>
+                                    <div class="flex items-center text-xs text-gray-400">
+                                        <i data-feather="map-pin" class="w-3 h-3 mr-1"></i>
+                                        <span>Sector 7</span>
+                                    </div>
+                                    <div class="text-xs text-gray-500">Field Operator • Operations</div>
+                                </div>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <button class="p-1.5 bg-blue-600 rounded hover:bg-blue-700 transition-colors">
+                                    <i data-feather="video" class="w-3 h-3"></i>
+                                </button>
+                                <div class="flex items-center">
+                                    <i data-feather="battery" class="w-3 h-3 mr-1"></i>
+                                    <span class="text-xs">92%</span>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="team-member bg-gray-700/50 hover:bg-gray-600/50 p-3 rounded-lg flex items-center justify-between cursor-pointer transition-all">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-2 h-2 rounded-full bg-green-500"></div>
+                                <div>
+                                    <p class="font-medium text-sm">Maria Garcia</p>
+                                    <div class="flex items-center text-xs text-gray-400">
+                                        <i data-feather="map-pin" class="w-3 h-3 mr-1"></i>
+                                        <span>Base Camp</span>
+                                    </div>
+                                    <div class="text-xs text-gray-500">Logistics Coordinator • Logistics</div>
+                                </div>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <button class="p-1.5 bg-blue-600 rounded hover:bg-blue-700 transition-colors">
+                                    <i data-feather="video" class="w-3 h-3"></i>
+                                </button>
+                                <div class="flex items-center">
+                                    <i data-feather="battery" class="w-3 h-3 mr-1"></i>
+                                    <span class="text-xs">78%</span>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="team-member bg-gray-700/50 hover:bg-gray-600/50 p-3 rounded-lg flex items-center justify-between cursor-pointer transition-all">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-2 h-2 rounded-full bg-red-500"></div>
+                                <div>
+                                    <p class="font-medium text-sm">Robert Johnson</p>
+                                    <div class="flex items-center text-xs text-gray-400">
+                                        <i data-feather="map-pin" class="w-3 h-3 mr-1"></i>
+                                        <span>Sector 3</span>
+                                    </div>
+                                    <div class="text-xs text-gray-500">Maintenance Tech • Support</div>
+                                </div>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <div class="flex items-center">
+                                    <i data-feather="battery" class="w-3 h-3 mr-1"></i>
+                                    <span class="text-xs">45%</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Main Content Area -->
+            <div class="lg:col-span-3 space-y-6">
+                <!-- Map Section -->
+                <div class="bg-gray-800/80 backdrop-blur-md rounded-xl p-5 border border-gray-700/50 shadow-lg">
+                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-3">
+                        <h2 class="text-lg font-semibold flex items-center">
+                            <i data-feather="map-pin" class="w-5 h-5 mr-2 text-green-400"></i>
+                            Live Location Tracking
+                        </h2>
+                        <div class="flex items-center space-x-3">
+                            <div class="text-sm bg-blue-900/30 px-3 py-1 rounded-full flex items-center">
+                                <i data-feather="monitor" class="w-4 h-4 mr-1"></i>
+                                Selected: John Smith
+                            </div>
+                            <button class="p-2 bg-gray-700/50 hover:bg-gray-600/50 rounded-lg transition-all">
+                                <i data-feather="refresh-cw" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <!-- Map Container -->
+                    <div class="relative w-full h-96 bg-gradient-to-br from-blue-50 to-green-50 rounded-lg overflow-hidden border-2 border-gray-600/30">
+                        <!-- Map placeholder with interactive elements -->
+                        <div class="absolute inset-0 grid grid-cols-20 grid-rows-20 opacity-10">
+                            <!-- Grid lines -->
+                            <template x-for="i in 20">
+                                <div class="border-t border-gray-400 col-span-full" :style="`grid-row: ${i}`"></div>
+                                <div class="border-l border-gray-400 row-span-full" :style="`grid-column: ${i}`"></div>
+                            </template>
+                        </div>
+                        
+                        <!-- Roads -->
+                        <div class="absolute top-1/4 left-0 right-0 h-2 bg-gray-600/30"></div>
+                        <div class="absolute top-1/2 left-0 right-0 h-2 bg-gray-600/30"></div>
+                        <div class="absolute left-1/4 top-0 bottom-0 w-2 bg-gray-600/30"></div>
+                        <div class="absolute left-1/2 top-0 bottom-0 w-2 bg-gray-600/30"></div>
+                        
+                        <!-- Team Markers -->
+                        <div class="absolute w-6 h-6 rounded-full bg-green-500 ring-2 ring-green-300 cursor-pointer" style="top: 30%; left: 20%;" onclick="selectMember('John Smith')">
+                            <div class="absolute -top-7 left-1/2 transform -translate-x-1/2 bg-black/75 text-white text-xs px-2 py-1 rounded whitespace-nowrap opacity-0 hover:opacity-100 transition-opacity">
+                                John Smith
+                            </div>
+                        </div>
+                        <div class="absolute w-6 h-6 rounded-full bg-green-500 ring-2 ring-green-300 cursor-pointer" style="top: 45%; left: 35%;" onclick="selectMember('Maria Garcia')">
+                            <div class="absolute -top-7 left-1/2 transform -translate-x-1/2 bg-black/75 text-white text-xs px-2 py-1 rounded whitespace-nowrap opacity-0 hover:opacity-100 transition-opacity">
+                                Maria Garcia
+                            </div>
+                        </div>
+                        <div class="absolute w-6 h-6 rounded-full bg-red-500 ring-2 ring-red-300 cursor-pointer" style="top: 60%; left: 25%;" onclick="selectMember('Robert Johnson')">
+                            <div class="absolute -top-7 left-1/2 transform -translate-x-1/2 bg-black/75 text-white text-xs px-2 py-1 rounded whitespace-nowrap opacity-0 hover:opacity-100 transition-opacity">
+                                Robert Johnson
+                            </div>
+                        </div>
+                        
+                        <!-- Map Controls -->
+                        <div class="absolute top-4 right-4 bg-white/90 rounded-lg p-2 shadow-lg">
+                            <div class="flex flex-col space-y-2">
+                                <button class="w-8 h-8 bg-gray-200 rounded flex items-center justify-center hover:bg-gray-300">
+                                    <i data-feather="plus" class="w-4 h-4 text-gray-700"></i>
+                                </button>
+                                <button class="w-8 h-8 bg-gray-200 rounded flex items-center justify-center hover:bg-gray-300">
+                                    <i data-feather="minus" class="w-4 h-4 text-gray-700"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Selected Member Details -->
+                    <div class="mt-4 p-4 bg-gray-700/50 rounded-lg">
+                        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+                            <div>
+                                <h3 class="font-semibold text-lg">John Smith</h3>
+                                <div class="flex items-center text-sm text-gray-300 mt-1">
+                                    <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
+                                    <span>40.7128° N, 74.0060° W</span>
+                                </div>
+                                <div class="text-sm text-gray-400 mt-1">
+                                    Last seen: 2 minutes ago
+                                </div>
+                                <div class="text-sm text-gray-300 mt-1">
+                                    Role: Field Operator • Dept: Operations
+                                </div>
+                            </div>
+                            <div class="flex flex-col items-end gap-2">
+                                <div class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-900/30 text-green-400">
+                                    Online
+                                </div>
+                                <div class="flex space-x-3">
+                                    <button class="flex items-center px-3 py-1.5 rounded text-sm bg-blue-600 hover:bg-blue-700">
+                                        <i data-feather="video" class="w-4 h-4 mr-1"></i>
+                                        Video Call
+                                    </button>
+                                    <div class="text-sm flex items-center">
+                                        <i data-feather="battery" class="w-4 h-4 mr-1"></i>
+                                        92%
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 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">Channel 1 - Operations</h2>
+                            <div class="flex items-center space-x-2">
+                                <div class="w-2 h-2 rounded-full bg-green-500"></div>
+                                <span class="text-xs">READY</span>
+                            </div>
+                        </div>
+                        
+                        <!-- Transmit Button -->
+                        <div class="flex justify-center my-6">
+                            <button class="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>
+                            </button>
+                        </div>
+                        
+                        <p class="text-center text-gray-400 text-sm">Press and hold to transmit</p>
+                    </div>
+                    
+                    <!-- Recent Comms -->
+                    <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">Recent Communications</h2>
+                        <div class="space-y-3 max-h-72 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">
+                                        <span class="font-medium text-blue-400">Team Alpha</span>
+                                        <span class="text-xs bg-gray-600/50 px-2 py-1 rounded">Channel 1</span>
+                                    </div>
+                                    <span class="text-xs text-gray-400">14:32</span>
+                                </div>
+                                <p class="text-gray-200 mb-2">Moving to sector 7</p>
+                                <div class="flex items-center text-xs text-gray-400">
+                                    <i data-feather="map-pin" class="w-3 h-3 mr-1"></i>
+                                    <span>Location recorded</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">
+                                        <span class="font-medium text-blue-400">Medical Team</span>
+                                        <span class="text-xs bg-gray-600/50 px-2 py-1 rounded">Channel 3</span>
+                                    </div>
+                                    <span class="text-xs text-gray-400">14:28</span>
+                                </div>
+                                <p class="text-gray-200 mb-2">Patient status stable</p>
+                                <div class="flex items-center text-xs text-gray-400">
+                                    <i data-feather="map-pin" class="w-3 h-3 mr-1"></i>
+                                    <span>Location recorded</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Status Grid -->
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                    <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">Network</p>
+                        <p class="text-lg font-semibold text-green-400">Online</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">GPS</p>
+                        <p class="text-lg font-semibold text-green-400">Active</p>
+                    </div>
+                    <div class="bg-yellow-900/30 p-4 rounded-lg text-center border border-yellow-900/30">
+                        <i data-feather="alert-triangle" class="w-6 h-6 text-yellow-400 mx-auto mb-2"></i>
+                        <p class="text-sm">Signal</p>
+                        <p class="text-lg font-semibold text-yellow-400">Good</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">Battery</p>
+                        <p class="text-lg font-semibold text-green-400">85%</p>
+                    </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: 0x3a82ff,
+            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();
+
+        // Simple function to simulate member selection
+        function selectMember(name) {
+            alert(`Selected team member: ${name}`);
+        }
+    </script>
+</body>
 </html>