Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Medallio en línea | Monitoreo urbano de Medellín</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Urbanist', sans-serif; | |
| background-color: #f0f2f5; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .map-container { | |
| height: 500px; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <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 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> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-blue-200 transition">Inicio</a> | |
| <a href="#" class="hover:text-blue-200 transition">Mapas</a> | |
| <a href="#" class="hover:text-blue-200 transition">Datos</a> | |
| <a href="#" class="hover:text-blue-200 transition">Alertas</a> | |
| <a href="#" class="hover:text-blue-200 transition">Acerca de</a> | |
| </nav> | |
| <button class="md:hidden text-white"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">Monitoreo urbano inteligente</h2> | |
| <p class="text-xl mb-8">Datos en tiempo real de satélites, radares y sensores de Medellín. SIATA, semáforos, cámaras y más.</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-blue-50 transition"> | |
| <i class="fas fa-map-marked-alt mr-2"></i> Ver mapa interactivo | |
| </button> | |
| <button class="border border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition"> | |
| <i class="fas fa-chart-line mr-2"></i> Explorar datos | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="map-container bg-gray-200 relative"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-map text-gray-400 text-6xl"></i> | |
| </div> | |
| <div class="absolute bottom-4 left-4 bg-white text-gray-800 px-3 py-2 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> | |
| <span class="text-sm font-medium">Datos en tiempo real</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 text-center"> | |
| <div class="text-blue-600 text-3xl mb-2"> | |
| <i class="fas fa-cloud-rain"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-1">SIATA</h3> | |
| <p class="text-gray-600">Calidad del aire y clima</p> | |
| <div class="mt-4 text-blue-600 font-semibold"> | |
| <span class="text-2xl">24°C</span> | |
| <span class="text-sm block">Actual</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 text-center"> | |
| <div class="text-green-600 text-3xl mb-2"> | |
| <i class="fas fa-traffic-light"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-1">Semáforos</h3> | |
| <p class="text-gray-600">Estado del tráfico</p> | |
| <div class="mt-4 text-green-600 font-semibold"> | |
| <span class="text-2xl">87%</span> | |
| <span class="text-sm block">Operativos</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 text-center"> | |
| <div class="text-purple-600 text-3xl mb-2"> | |
| <i class="fas fa-video"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-1">Cámaras</h3> | |
| <p class="text-gray-600">Vigilancia urbana</p> | |
| <div class="mt-4 text-purple-600 font-semibold"> | |
| <span class="text-2xl">1,240</span> | |
| <span class="text-sm block">Activas</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 text-center"> | |
| <div class="text-yellow-600 text-3xl mb-2"> | |
| <i class="fas fa-satellite-dish"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-1">Sensores</h3> | |
| <p class="text-gray-600">Monitoreo urbano</p> | |
| <div class="mt-4 text-yellow-600 font-semibold"> | |
| <span class="text-2xl">3,560</span> | |
| <span class="text-sm block">Conectados</span> | |
| </div> | |
| </div> | |
| </div> | |
| </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"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <!-- Left Column --> | |
| <div class="md:w-2/3"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Mapa interactivo de Medellín</h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-100 text-blue-600 px-3 py-1 rounded-lg text-sm font-medium"> | |
| <i class="fas fa-layer-group mr-1"></i> Capas | |
| </button> | |
| <button class="bg-gray-100 text-gray-600 px-3 py-1 rounded-lg text-sm font-medium"> | |
| <i class="fas fa-sliders-h mr-1"></i> Filtros | |
| </button> | |
| </div> | |
| </div> | |
| <div class="map-container bg-gray-900 relative"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <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-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-700 rounded text-blue-300"> | |
| <i class="fas fa-crosshairs"></i> | |
| </button> | |
| <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-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-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> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> | |
| <i class="fas fa-tint mr-1"></i> Nivel de ríos | |
| </span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> | |
| <i class="fas fa-car mr-1"></i> Tráfico | |
| </span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> | |
| <i class="fas fa-cloud mr-1"></i> Calidad del aire | |
| </span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"> | |
| <i class="fas fa-lightbulb mr-1"></i> Semáforos | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-exclamation-triangle text-blue-600"></i> | |
| </div> | |
| <h3 class="text-lg font-bold">Alertas recientes</h3> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-2 h-2 bg-red-500 rounded-full"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Alerta por lluvias intensas en El Poblado</p> | |
| <p class="text-xs text-gray-500">Hace 15 minutos</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-2 h-2 bg-yellow-500 rounded-full"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Congestión vehicular en la 80 con 30</p> | |
| <p class="text-xs text-gray-500">Hace 32 minutos</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-2 h-2 bg-green-500 rounded-full"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Normalización del servicio en semáforos de Laureles</p> | |
| <p class="text-xs text-gray-500">Hace 1 hora</p> | |
| </div> | |
| </li> | |
| </ul> | |
| <button class="mt-4 text-blue-600 text-sm font-medium flex items-center"> | |
| Ver todas las alertas <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-chart-bar text-purple-600"></i> | |
| </div> | |
| <h3 class="text-lg font-bold">Datos destacados</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Calidad del aire (Índice PM2.5)</span> | |
| <span class="font-medium">Moderado</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Nivel de tráfico</span> | |
| <span class="font-medium">Alto</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Nivel de ríos</span> | |
| <span class="font-medium">Normal</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 32%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-blue-600 text-sm font-medium flex items-center"> | |
| Ver más estadísticas <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="md:w-1/3"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6 card-hover transition"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-newspaper text-green-600"></i> | |
| </div> | |
| <h3 class="text-lg font-bold">Noticias urbanas</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="border-b pb-4"> | |
| <p class="text-sm font-medium mb-1">Nuevo sistema de semáforos inteligentes</p> | |
| <p class="text-xs text-gray-500 mb-2">La Alcaldía implementa tecnología IA para mejorar el flujo vehicular</p> | |
| <span class="inline-block bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Movilidad</span> | |
| </div> | |
| <div class="border-b pb-4"> | |
| <p class="text-sm font-medium mb-1">SIATA amplía cobertura de sensores</p> | |
| <p class="text-xs text-gray-500 mb-2">50 nuevos puntos de monitoreo de calidad del aire en la ciudad</p> | |
| <span class="inline-block bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Medio ambiente</span> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium mb-1">App oficial de Medellín con datos abiertos</p> | |
| <p class="text-xs text-gray-500 mb-2">Accede a información en tiempo real de servicios urbanos</p> | |
| <span class="inline-block bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Tecnología</span> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-blue-600 text-sm font-medium flex items-center"> | |
| Más noticias <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6 card-hover transition"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-bell text-red-600"></i> | |
| </div> | |
| <h3 class="text-lg font-bold">Alertas meteorológicas</h3> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-red-500 text-white p-2 rounded-lg mr-3"> | |
| <i class="fas fa-cloud-showers-heavy"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Alerta naranja por lluvias</p> | |
| <p class="text-xs text-gray-500">Válida hasta las 18:00 hoy</p> | |
| </div> | |
| </div> | |
| <p class="text-sm mb-4">Se prevén lluvias intensas en las comunas 8, 9 y 16. Posibles crecientes súbitas en quebradas.</p> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-3 mb-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-triangle text-yellow-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-yellow-700">Recomendación: Evitar zonas bajas y cercanas a quebradas.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-red-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-red-700 transition"> | |
| <i class="fas fa-bookmark mr-1"></i> Suscribirse a alertas | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-question-circle text-blue-600"></i> | |
| </div> | |
| <h3 class="text-lg font-bold">¿Cómo funciona?</h3> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-1 rounded-full mr-3 mt-1"> | |
| <i class="fas fa-satellite text-blue-600 text-xs"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Datos satelitales</p> | |
| <p class="text-xs text-gray-500">Información de imágenes satelitales actualizadas cada hora</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-1 rounded-full mr-3 mt-1"> | |
| <i class="fas fa-sensor text-green-600 text-xs"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Red de sensores</p> | |
| <p class="text-xs text-gray-500">Más de 3,500 sensores urbanos en tiempo real</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-1 rounded-full mr-3 mt-1"> | |
| <i class="fas fa-database text-purple-600 text-xs"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Datos abiertos</p> | |
| <p class="text-xs text-gray-500">Integración con SIATA y Alcaldía de Medellín</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-blue-600 text-sm font-medium flex items-center"> | |
| Conoce más <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4 flex items-center"> | |
| <div class="bg-white rounded-full p-2 mr-2"> | |
| <i class="fas fa-satellite text-blue-600"></i> | |
| </div> | |
| Medallio | |
| </h3> | |
| <p class="text-gray-400 text-sm">Plataforma de monitoreo urbano inteligente de Medellín. Datos en tiempo real para una ciudad más conectada.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Enlaces útiles</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">SIATA Medellín</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Datos abiertos Alcaldía</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Mapas oficiales</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Reportar incidencia</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Recursos</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">API para desarrolladores</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Documentación técnica</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Blog de tecnología urbana</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Centro de ayuda</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Suscríbete</h4> | |
| <p class="text-gray-400 text-sm mb-4">Recibe alertas y novedades directamente en tu correo.</p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Tu correo" class="bg-gray-800 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"> | |
| <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm">© 2025 Yeso®. Todos los derechos reservados.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm">Términos</a> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm">Privacidad</a> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // 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 10 segundos | |
| setTimeout(fetchData, 10000); | |
| } | |
| // Iniciar la aplicación | |
| document.addEventListener('DOMContentLoaded', function() { | |
| fetchData(); | |
| // 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('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> |