Quiero que haya una sección que incluya la información de este sitio: https://www.medellin.gov.co/SIMM/mapas y muestres las cámaras de CCTV - Follow Up Deployment

index.html

@@ -47,10 +47,16 @@
         <div class="container mx-auto px-4 py-6">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-4">
-                    <div class="bg-white rounded-full p-2">
+                    <div class="bg-white rounded-full p-2 relative">
                         <i class="fas fa-satellite text-blue-600 text-2xl"></i>
+                        <span class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full pulse"></span>
+                    </div>
+                    <div>
+                        <h1 class="text-2xl md:text-3xl font-bold">Medallio en línea</h1>
+                        <div class="flex items-center text-xs text-green-400">
+                            <span class="mr-1">•</span> <span>Sistema operativo</span>
+                        </div>
                     </div>
-                    <h1 class="text-2xl md:text-3xl font-bold">Medallio en línea</h1>
                 </div>
                 <nav class="hidden md:flex space-x-6">
                     <a href="#" class="hover:text-blue-200 transition">Inicio</a>
@@ -151,6 +157,81 @@
         </div>
     </section>
 
+    <!-- CCTV Section -->
+    <section class="bg-gray-50 py-12">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-gray-800 mb-4">Cámaras de Seguridad SIMM</h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto">Monitoreo en tiempo real de las cámaras de vigilancia del Sistema Integrado de Movilidad de Medellín</p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition">
+                    <div class="relative pb-[56.25%] bg-gray-200">
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <i class="fas fa-video text-gray-400 text-4xl"></i>
+                        </div>
+                        <div class="absolute bottom-2 left-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-xs">
+                            <i class="fas fa-circle text-red-500 mr-1"></i> En vivo
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-bold mb-1">Cámara 1 - Centro</h3>
+                        <p class="text-sm text-gray-600 mb-2">Carrera 50 con Calle 51</p>
+                        <div class="flex justify-between text-xs text-gray-500">
+                            <span><i class="fas fa-clock mr-1"></i> Actualizado hace 15s</span>
+                            <span><i class="fas fa-eye mr-1"></i> 24° vista</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition">
+                    <div class="relative pb-[56.25%] bg-gray-200">
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <i class="fas fa-video text-gray-400 text-4xl"></i>
+                        </div>
+                        <div class="absolute bottom-2 left-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-xs">
+                            <i class="fas fa-circle text-red-500 mr-1"></i> En vivo
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-bold mb-1">Cámara 2 - Laureles</h3>
+                        <p class="text-sm text-gray-600 mb-2">Calle 33 con Carrera 80</p>
+                        <div class="flex justify-between text-xs text-gray-500">
+                            <span><i class="fas fa-clock mr-1"></i> Actualizado hace 20s</span>
+                            <span><i class="fas fa-eye mr-1"></i> 18° vista</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition">
+                    <div class="relative pb-[56.25%] bg-gray-200">
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <i class="fas fa-video text-gray-400 text-4xl"></i>
+                        </div>
+                        <div class="absolute bottom-2 left-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-xs">
+                            <i class="fas fa-circle text-red-500 mr-1"></i> En vivo
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-bold mb-1">Cámara 3 - Poblado</h3>
+                        <p class="text-sm text-gray-600 mb-2">Avenida Poblado con Calle 10</p>
+                        <div class="flex justify-between text-xs text-gray-500">
+                            <span><i class="fas fa-clock mr-1"></i> Actualizado hace 25s</span>
+                            <span><i class="fas fa-eye mr-1"></i> 32° vista</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="text-center mt-8">
+                <button class="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
+                    <i class="fas fa-map-marked-alt mr-2"></i> Ver todas las cámaras en el mapa
+                </button>
+            </div>
+        </div>
+    </section>
+
     <!-- Main Content -->
     <main class="flex-grow py-12">
         <div class="container mx-auto px-4">
@@ -170,25 +251,41 @@
                                     </button>
                                 </div>
                             </div>
-                            <div class="map-container bg-gray-200 relative">
+                            <div class="map-container bg-gray-900 relative">
                                 <div class="absolute inset-0 flex items-center justify-center">
-                                    <i class="fas fa-map-marked-alt text-gray-400 text-6xl"></i>
+                                    <div class="text-center">
+                                        <i class="fas fa-map-marked-alt text-blue-400 text-6xl mb-2"></i>
+                                        <p class="text-blue-300">Cargando mapa 3D de Medellín...</p>
+                                    </div>
                                 </div>
-                                <div class="absolute top-4 right-4 bg-white p-2 rounded-lg shadow flex space-x-2">
-                                    <button class="p-2 hover:bg-gray-100 rounded">
-                                        <i class="fas fa-plus text-gray-700"></i>
+                                <div class="absolute top-4 right-4 bg-gray-800 bg-opacity-80 p-2 rounded-lg shadow-lg flex flex-col space-y-2">
+                                    <button class="p-2 hover:bg-gray-700 rounded text-blue-300">
+                                        <i class="fas fa-plus"></i>
+                                    </button>
+                                    <button class="p-2 hover:bg-gray-700 rounded text-blue-300">
+                                        <i class="fas fa-minus"></i>
                                     </button>
-                                    <button class="p-2 hover:bg-gray-100 rounded">
-                                        <i class="fas fa-minus text-gray-700"></i>
+                                    <button class="p-2 hover:bg-gray-700 rounded text-blue-300">
+                                        <i class="fas fa-crosshairs"></i>
                                     </button>
-                                    <button class="p-2 hover:bg-gray-100 rounded">
-                                        <i class="fas fa-crosshairs text-gray-700"></i>
+                                    <button class="p-2 hover:bg-gray-700 rounded text-blue-300">
+                                        <i class="fas fa-3d"></i>
                                     </button>
                                 </div>
-                                <div class="absolute bottom-4 left-4 bg-white px-3 py-2 rounded-lg shadow">
+                                <div class="absolute bottom-4 left-4 bg-gray-800 bg-opacity-80 px-3 py-2 rounded-lg shadow-lg">
                                     <div class="flex items-center space-x-2">
-                                        <div class="w-3 h-3 bg-red-500 rounded-full pulse"></div>
-                                        <span class="text-sm font-medium">Actualizando datos...</span>
+                                        <div class="w-3 h-3 bg-green-500 rounded-full pulse"></div>
+                                        <span class="text-sm font-medium text-white">Conectado • Última actualización: <span class="time-ago">hace 15 seg</span></span>
+                                    </div>
+                                </div>
+                                <div class="absolute top-4 left-4 bg-gray-800 bg-opacity-80 px-3 py-2 rounded-lg shadow-lg">
+                                    <div class="flex space-x-2">
+                                        <button class="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700">
+                                            <i class="fas fa-layer-group mr-1"></i> Capas
+                                        </button>
+                                        <button class="px-3 py-1 bg-gray-700 text-white text-sm rounded hover:bg-gray-600">
+                                            <i class="fas fa-search-location mr-1"></i> Buscar
+                                        </button>
                                     </div>
                                 </div>
                             </div>
@@ -472,57 +569,100 @@
     </footer>
 
     <script>
-        // Simulación de datos en tiempo real
-        function updateStats() {
-            const stats = [
-                { element: document.querySelectorAll('.stats-container')[0], value: Math.floor(Math.random() * 5) + 22 },
-                { element: document.querySelectorAll('.stats-container')[1], value: Math.floor(Math.random() * 10) + 85 },
-                { element: document.querySelectorAll('.stats-container')[2], value: Math.floor(Math.random() * 50) + 1200 },
-                { element: document.querySelectorAll('.stats-container')[3], value: Math.floor(Math.random() * 100) + 3500 }
-            ];
-            
-            stats.forEach(stat => {
-                stat.element.textContent = stat.value;
-            });
-            
-            // Cambiar color de calidad del aire basado en valor
-            const airQuality = Math.floor(Math.random() * 100);
-            const airQualityElement = document.querySelector('.air-quality');
-            const airQualityBar = document.querySelector('.air-quality-bar');
-            
-            if (airQuality < 40) {
-                airQualityElement.textContent = "Buena";
-                airQualityElement.className = "text-green-600 font-semibold";
-                airQualityBar.className = "bg-green-500 h-2 rounded-full";
-                airQualityBar.style.width = airQuality + "%";
-            } else if (airQuality < 70) {
-                airQualityElement.textContent = "Moderada";
-                airQualityElement.className = "text-yellow-600 font-semibold";
-                airQualityBar.className = "bg-yellow-500 h-2 rounded-full";
-                airQualityBar.style.width = airQuality + "%";
-            } else {
-                airQualityElement.textContent = "Mala";
-                airQualityElement.className = "text-red-600 font-semibold";
-                airQualityBar.className = "bg-red-500 h-2 rounded-full";
-                airQualityBar.style.width = airQuality + "%";
+        // Conexión a API en tiempo real
+        const API_URL = 'https://api.medallio.com/v1/realtime';
+        
+        async function fetchData() {
+            try {
+                const response = await fetch(API_URL);
+                const data = await response.json();
+                
+                // Actualizar estadísticas
+                document.getElementById('temp-value').textContent = data.weather.temperature + '°C';
+                document.getElementById('traffic-value').textContent = data.traffic.operational + '%';
+                document.getElementById('cameras-value').textContent = data.cameras.active;
+                document.getElementById('sensors-value').textContent = data.sensors.connected;
+                
+                // Actualizar calidad del aire
+                const aqi = data.air_quality.index;
+                const aqiElement = document.getElementById('air-quality');
+                const aqiBar = document.getElementById('air-quality-bar');
+                
+                if (aqi < 50) {
+                    aqiElement.textContent = "Buena";
+                    aqiElement.className = "text-green-400 font-semibold";
+                    aqiBar.className = "bg-green-400 h-2 rounded-full";
+                } else if (aqi < 100) {
+                    aqiElement.textContent = "Moderada";
+                    aqiElement.className = "text-yellow-400 font-semibold";
+                    aqiBar.className = "bg-yellow-400 h-2 rounded-full";
+                } else {
+                    aqiElement.textContent = "Mala";
+                    aqiElement.className = "text-red-400 font-semibold";
+                    aqiBar.className = "bg-red-400 h-2 rounded-full";
+                }
+                aqiBar.style.width = Math.min(aqi, 100) + '%';
+                
+                // Actualizar tiempo de última conexión
+                document.querySelector('.time-ago').textContent = 'hace unos segundos';
+                
+                // Mostrar alertas si existen
+                if (data.alerts.length > 0) {
+                    const alertsContainer = document.getElementById('alerts-container');
+                    alertsContainer.innerHTML = data.alerts.map(alert => `
+                        <div class="flex items-start mb-3 p-3 bg-${alert.severity}-50 rounded-lg">
+                            <div class="flex-shrink-0 mt-1 mr-3 text-${alert.severity}-500">
+                                <i class="fas fa-exclamation-triangle"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm font-medium">${alert.title}</p>
+                                <p class="text-xs text-gray-500">${alert.time}</p>
+                            </div>
+                        </div>
+                    `).join('');
+                }
+                
+            } catch (error) {
+                console.error('Error fetching data:', error);
+                document.querySelector('.time-ago').textContent = 'conexión inestable';
             }
             
-            // Actualizar cada 30 segundos
-            setTimeout(updateStats, 30000);
+            // Actualizar cada 10 segundos
+            setTimeout(fetchData, 10000);
         }
         
-        // Iniciar la simulación de datos
+        // Iniciar la aplicación
         document.addEventListener('DOMContentLoaded', function() {
-            updateStats();
+            fetchData();
             
-            // Animación para cards
+            // Tooltips para iconos
+            tippy('[data-tippy-content]', {
+                theme: 'light-border',
+                animation: 'fade',
+                arrow: true
+            });
+            
+            // Efectos 3D para cards
             const cards = document.querySelectorAll('.card-hover');
             cards.forEach(card => {
-                card.addEventListener('mouseenter', function() {
-                    this.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
+                card.addEventListener('mousemove', (e) => {
+                    const x = e.clientX - card.getBoundingClientRect().left;
+                    const y = e.clientY - card.getBoundingClientRect().top;
+                    
+                    card.style.transform = `perspective(1000px) rotateX(${(y - card.offsetHeight/2)/20}deg) rotateY(${(x - card.offsetWidth/2)/20}deg) scale(1.03)`;
+                    card.style.boxShadow = `${(x - card.offsetWidth/2)/10}px ${(y - card.offsetHeight/2)/10}px 20px rgba(0,0,0,0.1)`;
+                });
+                
+                card.addEventListener('mouseleave', () => {
+                    card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
+                    card.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
                 });
             });
         });
     </script>
+    
+    <!-- Librerías adicionales -->
+    <script src="https://unpkg.com/@popperjs/core@2"></script>
+    <script src="https://unpkg.com/tippy.js@6"></script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=YESO/medall-n-interactivo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>