Spaces:
Running
Running
Download index.html from doctopanda/flowdata: direct link, hf CLI and curl.
- Browser
- Download file 46.8 kB
-
https://huggingface.co/spaces/doctopanda/flowdata/resolve/main/index.html
- Command line
-
hf download hf://spaces/doctopanda/flowdata/index.html
-
curl -L -o index.html https://huggingface.co/spaces/doctopanda/flowdata/resolve/main/index.html
46.8 kB
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dashboard Epidemiológico - México</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| colors: { | |
| salud: { | |
| dark: '#0f172a', | |
| panel: '#1e293b', | |
| border: '#334155', | |
| primary: '#3b82f6', | |
| danger: '#ef4444', | |
| warning: '#f59e0b', | |
| success: '#10b981', | |
| info: '#06b6d4' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| background-color: #0f172a; | |
| color: #e2e8f0; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .data-card { | |
| background-color: #1e293b; | |
| border-radius: 0.5rem; | |
| border-left: 4px solid; | |
| transition: all 0.3s ease; | |
| } | |
| .data-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .map-container { | |
| position: relative; | |
| height: 400px; | |
| background-color: #1e293b; | |
| border-radius: 0.5rem; | |
| overflow: hidden; | |
| } | |
| .map-tooltip { | |
| position: absolute; | |
| background: rgba(30, 41, 59, 0.9); | |
| border: 1px solid #334155; | |
| border-radius: 4px; | |
| padding: 8px; | |
| pointer-events: none; | |
| z-index: 10; | |
| display: none; | |
| } | |
| .disease-tag { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| .table-row:hover { | |
| background-color: #334155; | |
| } | |
| .search-input { | |
| background-color: #1e293b; | |
| border: 1px solid #334155; | |
| color: #e2e8f0; | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| border-color: #3b82f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-salud-dark"> | |
| <header class="border-b border-salud-border bg-salud-dark sticky top-0 z-10"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-salud-primary p-2 rounded-lg"> | |
| <i class="fas fa-shield-virus text-white text-xl"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-xl font-bold">SALUD<span class="text-salud-primary">MÉXICO</span></h1> | |
| <p class="text-xs text-gray-400">Sistema de Vigilancia Epidemiológica</p> | |
| </div> | |
| </div> | |
| <div class="text-xs text-gray-400 flex items-center space-x-4"> | |
| <div class="hidden md:block"> | |
| <span>Última actualización: <span class="text-gray-100">16/11/2023 09:00</span></span> | |
| </div> | |
| <div class="bg-salud-panel px-3 py-1 rounded-full flex items-center"> | |
| <i class="fas fa-circle text-salud-success mr-1 text-xs"></i> | |
| <span>Sistema operativo</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Alertas y Resumen --> | |
| <section class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold flex items-center"> | |
| <i class="fas fa-exclamation-triangle text-salud-warning mr-2"></i> | |
| Panorama Epidemiológico Nacional | |
| </h2> | |
| <div class="text-xs bg-salud-panel px-3 py-1 rounded-full"> | |
| Semana epidemiológica 45 | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> | |
| <!-- Casos activos --> | |
| <div class="data-card border-salud-primary p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-400 mb-1">Casos activos</p> | |
| <h3 class="text-2xl font-bold">24,518</h3> | |
| </div> | |
| <div class="bg-salud-primary bg-opacity-20 p-2 rounded-lg"> | |
| <i class="fas fa-procedures text-salud-primary"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex items-center text-sm"> | |
| <span class="text-salud-danger mr-1"><i class="fas fa-arrow-up"></i> 12%</span> | |
| <span class="text-gray-400">vs semana anterior</span> | |
| </div> | |
| </div> | |
| <!-- Defunciones --> | |
| <div class="data-card border-salud-danger p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-400 mb-1">Defunciones</p> | |
| <h3 class="text-2xl font-bold">1,203</h3> | |
| </div> | |
| <div class="bg-salud-danger bg-opacity-20 p-2 rounded-lg"> | |
| <i class="fas fa-cross text-salud-danger"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex items-center text-sm"> | |
| <span class="text-salud-success mr-1"><i class="fas fa-arrow-down"></i> 5%</span> | |
| <span class="text-gray-400">vs semana anterior</span> | |
| </div> | |
| </div> | |
| <!-- Tasa de positividad --> | |
| <div class="data-card border-salud-warning p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-400 mb-1">Tasa de positividad</p> | |
| <h3 class="text-2xl font-bold">18.7%</h3> | |
| </div> | |
| <div class="bg-salud-warning bg-opacity-20 p-2 rounded-lg"> | |
| <i class="fas fa-vial text-salud-warning"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex items-center text-sm"> | |
| <span class="text-salud-danger mr-1"><i class="fas fa-arrow-up"></i> 2.3%</span> | |
| <span class="text-gray-400">vs semana anterior</span> | |
| </div> | |
| </div> | |
| <!-- Vacunación --> | |
| <div class="data-card border-salud-success p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-400 mb-1">Vacunación completa</p> | |
| <h3 class="text-2xl font-bold">84.2M</h3> | |
| </div> | |
| <div class="bg-salud-success bg-opacity-20 p-2 rounded-lg"> | |
| <i class="fas fa-syringe text-salud-success"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex items-center text-sm"> | |
| <span class="text-salud-success mr-1"><i class="fas fa-arrow-up"></i> 0.8%</span> | |
| <span class="text-gray-400">última semana</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Alertas por enfermedad --> | |
| <div class="bg-salud-panel rounded-lg p-4 mb-6"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold flex items-center"> | |
| <i class="fas fa-bell text-salud-warning mr-2"></i> | |
| Alertas epidemiológicas activas | |
| </h3> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded-full">5 enfermedades</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-5 gap-3"> | |
| <div class="p-3 rounded-lg bg-red-900 bg-opacity-30 border border-red-700"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Dengue</span> | |
| <span class="text-xs bg-red-700 px-2 py-1 rounded-full">Alerta</span> | |
| </div> | |
| <div class="text-sm mt-1">12 estados afectados</div> | |
| </div> | |
| <div class="p-3 rounded-lg bg-yellow-900 bg-opacity-30 border border-yellow-700"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Influenza</span> | |
| <span class="text-xs bg-yellow-700 px-2 py-1 rounded-full">Vigilancia</span> | |
| </div> | |
| <div class="text-sm mt-1">Aumento estacional</div> | |
| </div> | |
| <div class="p-3 rounded-lg bg-orange-900 bg-opacity-30 border border-orange-700"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">COVID-19</span> | |
| <span class="text-xs bg-orange-700 px-2 py-1 rounded-full">Vigilancia</span> | |
| </div> | |
| <div class="text-sm mt-1">Variante XBB predominante</div> | |
| </div> | |
| <div class="p-3 rounded-lg bg-purple-900 bg-opacity-30 border border-purple-700"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Viruela símica</span> | |
| <span class="text-xs bg-purple-700 px-2 py-1 rounded-full">Controlada</span> | |
| </div> | |
| <div class="text-sm mt-1">Casos esporádicos</div> | |
| </div> | |
| <div class="p-3 rounded-lg bg-green-900 bg-opacity-30 border border-green-700"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Cólera</span> | |
| <span class="text-xs bg-green-700 px-2 py-1 rounded-full">Sin transmisión</span> | |
| </div> | |
| <div class="text-sm mt-1">Sin casos en 2023</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mapa y Distribución --> | |
| <section class="mb-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Mapa de calor --> | |
| <div class="lg:col-span-2"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold">Distribución geográfica de casos</h3> | |
| <div class="flex space-x-2"> | |
| <select class="bg-salud-panel border border-salud-border text-sm rounded px-3 py-1"> | |
| <option>Dengue</option> | |
| <option>COVID-19</option> | |
| <option>Influenza</option> | |
| <option selected>Todas las enfermedades</option> | |
| </select> | |
| <select class="bg-salud-panel border border-salud-border text-sm rounded px-3 py-1"> | |
| <option>Casos totales</option> | |
| <option>Tasa por 100k hab.</option> | |
| <option selected>Incidencia acumulada</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="map-container"> | |
| <div id="map" style="height: 100%; width: 100%;"></div> | |
| <div class="map-tooltip" id="map-tooltip"></div> | |
| </div> | |
| </div> | |
| <!-- Top estados --> | |
| <div> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold">Estados con mayor incidencia</h3> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded-full">por 100k habitantes</span> | |
| </div> | |
| <div class="bg-salud-panel rounded-lg p-4 h-full"> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Veracruz</span> | |
| <span class="font-bold">124.5</span> | |
| </div> | |
| <div class="w-full bg-salud-panel rounded-full h-2"> | |
| <div class="bg-salud-danger h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Tabasco</span> | |
| <span class="font-bold">98.7</span> | |
| </div> | |
| <div class="w-full bg-salud-panel rounded-full h-2"> | |
| <div class="bg-salud-danger h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Chiapas</span> | |
| <span class="font-bold">87.3</span> | |
| </div> | |
| <div class="w-full bg-salud-panel rounded-full h-2"> | |
| <div class="bg-salud-warning h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Oaxaca</span> | |
| <span class="font-bold">76.5</span> | |
| </div> | |
| <div class="w-full bg-salud-panel rounded-full h-2"> | |
| <div class="bg-salud-warning h-2 rounded-full" style="width: 55%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Yucatán</span> | |
| <span class="font-bold">68.2</span> | |
| </div> | |
| <div class="w-full bg-salud-panel rounded-full h-2"> | |
| <div class="bg-salud-warning h-2 rounded-full" style="width: 50%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-salud-border"> | |
| <h4 class="text-sm font-medium mb-2">Tendencia por grupo de edad</h4> | |
| <div class="chart-container" style="height: 150px;"> | |
| <canvas id="ageTrendChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Enfermedades y Datos --> | |
| <section class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold"> | |
| <i class="fas fa-virus mr-2 text-salud-danger"></i> | |
| Enfermedades bajo vigilancia | |
| </h2> | |
| <div class="relative"> | |
| <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i> | |
| <input type="text" placeholder="Buscar enfermedad..." class="search-input pl-10 pr-4 py-2 rounded-full text-sm w-64"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <!-- Tendencia de enfermedades --> | |
| <div class="bg-salud-panel rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold">Tendencia semanal de casos</h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs bg-salud-primary px-3 py-1 rounded-full">4 semanas</button> | |
| <button class="text-xs bg-salud-panel px-3 py-1 rounded-full">12 semanas</button> | |
| </div> | |
| </div> | |
| <div class="chart-container" style="height: 250px;"> | |
| <canvas id="diseaseTrendChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Distribución por sexo --> | |
| <div class="bg-salud-panel rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold">Distribución por sexo y edad</h3> | |
| <select class="bg-salud-panel border border-salud-border text-sm rounded px-3 py-1"> | |
| <option>Todas las enfermedades</option> | |
| <option>Dengue</option> | |
| <option>COVID-19</option> | |
| <option>Influenza</option> | |
| </select> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 h-[250px]"> | |
| <div> | |
| <h4 class="text-sm font-medium mb-2 text-center">Distribución por sexo</h4> | |
| <div class="chart-container" style="height: 200px;"> | |
| <canvas id="genderDistributionChart"></canvas> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium mb-2 text-center">Distribución por edad</h4> | |
| <div class="chart-container" style="height: 200px;"> | |
| <canvas id="ageDistributionChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tabla de enfermedades --> | |
| <div class="bg-salud-panel rounded-lg overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b border-salud-border text-left text-sm"> | |
| <th class="py-3 px-4">Enfermedad</th> | |
| <th class="py-3 px-4 text-right">Casos</th> | |
| <th class="py-3 px-4 text-right">Defunciones</th> | |
| <th class="py-3 px-4 text-right">Letalidad</th> | |
| <th class="py-3 px-4 text-right">Tendencia</th> | |
| <th class="py-3 px-4">Estados afectados</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-salud-border"> | |
| <tr class="table-row"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center"> | |
| <span class="disease-tag bg-red-900 text-red-300 mr-2">Alerta</span> | |
| Dengue | |
| </div> | |
| </td> | |
| <td class="py-3 px-4 text-right font-mono">12,487</td> | |
| <td class="py-3 px-4 text-right font-mono">38</td> | |
| <td class="py-3 px-4 text-right font-mono">0.30%</td> | |
| <td class="py-3 px-4 text-right"> | |
| <span class="text-salud-danger"><i class="fas fa-arrow-up"></i> 18%</span> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">VER</span> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">TAB</span> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">CHP</span> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">OAX</span> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">+8</span> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center"> | |
| <span class="disease-tag bg-orange-900 text-orange-300 mr-2">Vigilancia</span> | |
| COVID-19 | |
| </div> | |
| </td> | |
| <td class="py-3 px-4 text-right font-mono">8,432</td> | |
| <td class="py-3 px-4 text-right font-mono">127</td> | |
| <td class="py-3 px-4 text-right font-mono">1.51%</td> | |
| <td class="py-3 px-4 text-right"> | |
| <span class="text-salud-danger"><i class="fas fa-arrow-up"></i> 7%</span> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">CDMX</span> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">MEX</span> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">NL</span> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">JAL</span> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">+28</span> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center"> | |
| <span class="disease-tag bg-yellow-900 text-yellow-300 mr-2">Vigilancia</span> | |
| Influenza | |
| </div> | |
| </td> | |
| <td class="py-3 px-4 text-right font-mono">3,215</td> | |
| <td class="py-3 px-4 text-right font-mono">42</td> | |
| <td class="py-3 px-4 text-right font-mono">1.31%</td> | |
| <td class="py-3 px-4 text-right"> | |
| <span class="text-salud-danger"><i class="fas fa-arrow-up"></i> 32%</span> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">SON</span> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">BC</span> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">CHH</span> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">+12</span> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center"> | |
| <span class="disease-tag bg-purple-900 text-purple-300 mr-2">Controlada</span> | |
| Viruela símica | |
| </div> | |
| </td> | |
| <td class="py-3 px-4 text-right font-mono">287</td> | |
| <td class="py-3 px-4 text-right font-mono">0</td> | |
| <td class="py-3 px-4 text-right font-mono">0.00%</td> | |
| <td class="py-3 px-4 text-right"> | |
| <span class="text-salud-success"><i class="fas fa-arrow-down"></i> 62%</span> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">CDMX</span> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">JAL</span> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">BCN</span> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center"> | |
| <span class="disease-tag bg-blue-900 text-blue-300 mr-2">Rutina</span> | |
| Sarampión | |
| </div> | |
| </td> | |
| <td class="py-3 px-4 text-right font-mono">12</td> | |
| <td class="py-3 px-4 text-right font-mono">0</td> | |
| <td class="py-3 px-4 text-right font-mono">0.00%</td> | |
| <td class="py-3 px-4 text-right"> | |
| <span class="text-gray-400"><i class="fas fa-minus"></i> 0%</span> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">MOR</span> | |
| <span class="text-xs bg-salud-panel px-2 py-1 rounded">GRO</span> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Boletines y Recursos --> | |
| <section> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-salud-panel rounded-lg p-4"> | |
| <h3 class="font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-file-alt text-salud-primary mr-2"></i> | |
| Últimos boletines | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="border-b border-salud-border pb-3"> | |
| <div class="text-sm font-medium mb-1">Boletín Epidemiológico Semana 45</div> | |
| <div class="text-xs text-gray-400 mb-1">Publicado: 13/11/2023</div> | |
| <button class="text-xs bg-salud-primary px-3 py-1 rounded-full">Descargar PDF</button> | |
| </div> | |
| <div class="border-b border-salud-border pb-3"> | |
| <div class="text-sm font-medium mb-1">Alerta por aumento de dengue</div> | |
| <div class="text-xs text-gray-400 mb-1">Publicado: 08/11/2023</div> | |
| <button class="text-xs bg-salud-primary px-3 py-1 rounded-full">Descargar PDF</button> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium mb-1">Situación de influenza estacional</div> | |
| <div class="text-xs text-gray-400 mb-1">Publicado: 01/11/2023</div> | |
| <button class="text-xs bg-salud-primary px-3 py-1 rounded-full">Descargar PDF</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-salud-panel rounded-lg p-4"> | |
| <h3 class="font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-chart-line text-salud-info mr-2"></i> | |
| Indicadores clave | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="text-sm mb-1">Tasa de incidencia nacional</div> | |
| <div class="text-xl font-bold">87.3</div> | |
| <div class="text-xs text-gray-400">casos por 100k habitantes</div> | |
| </div> | |
| <div> | |
| <div class="text-sm mb-1">Tasa de mortalidad</div> | |
| <div class="text-xl font-bold">0.92</div> | |
| <div class="text-xs text-gray-400">defunciones por 100k habitantes</div> | |
| </div> | |
| <div> | |
| <div class="text-sm mb-1">Días promedio de atención</div> | |
| <div class="text-xl font-bold">3.8</div> | |
| <div class="text-xs text-gray-400">desde síntomas hasta diagnóstico</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-salud-panel rounded-lg p-4"> | |
| <h3 class="font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-link text-salud-success mr-2"></i> | |
| Recursos y enlaces | |
| </h3> | |
| <div class="space-y-2"> | |
| <a href="#" class="flex items-center text-sm text-salud-primary hover:underline"> | |
| <i class="fas fa-external-link-alt mr-2"></i> | |
| Lineamientos técnicos | |
| </a> | |
| <a href="#" class="flex items-center text-sm text-salud-primary hover:underline"> | |
| <i class="fas fa-external-link-alt mr-2"></i> | |
| Protocolos de vigilancia | |
| </a> | |
| <a href="#" class="flex items-center text-sm text-salud-primary hover:underline"> | |
| <i class="fas fa-external-link-alt mr-2"></i> | |
| Guías para personal médico | |
| </a> | |
| <a href="#" class="flex items-center text-sm text-salud-primary hover:underline"> | |
| <i class="fas fa-external-link-alt mr-2"></i> | |
| Materiales para prevención | |
| </a> | |
| <a href="#" class="flex items-center text-sm text-salud-primary hover:underline"> | |
| <i class="fas fa-external-link-alt mr-2"></i> | |
| Datos abiertos epidemiológicos | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="border-t border-salud-border py-4 mt-8 bg-salud-panel"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center text-xs text-gray-400"> | |
| <div class="mb-2 md:mb-0"> | |
| <span class="mr-4">Secretaría de Salud - Dirección General de Epidemiología</span> | |
| <span>Datos actualizados al 16/11/2023</span> | |
| </div> | |
| <div> | |
| <span class="mr-4">Sistema Nacional de Vigilancia Epidemiológica</span> | |
| <span>Versión 4.2.1</span> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xxs text-gray-500 text-center"> | |
| Los datos presentados son preliminares y sujetos a validación. Para uso oficial consulte los boletines epidemiológicos. | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mapa de México (simulado) | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mapContainer = document.getElementById('map'); | |
| const tooltip = document.getElementById('map-tooltip'); | |
| // Simulación de datos por estado | |
| const stateData = { | |
| 'AGS': { cases: 1245, incidence: 87.3, name: 'Aguascalientes' }, | |
| 'BC': { cases: 2876, incidence: 102.4, name: 'Baja California' }, | |
| 'BCS': { cases: 543, incidence: 65.2, name: 'Baja California Sur' }, | |
| 'CAMP': { cases: 876, incidence: 78.9, name: 'Campeche' }, | |
| 'CHIS': { cases: 4321, incidence: 143.2, name: 'Chiapas' }, | |
| 'CHIH': { cases: 1987, incidence: 92.1, name: 'Chihuahua' }, | |
| 'CDMX': { cases: 8765, incidence: 98.7, name: 'Ciudad de México' }, | |
| 'COAH': { cases: 1234, incidence: 76.5, name: 'Coahuila' }, | |
| 'COL': { cases: 987, incidence: 65.4, name: 'Colima' }, | |
| 'DGO': { cases: 765, incidence: 54.3, name: 'Durango' }, | |
| 'GTO': { cases: 2345, incidence: 87.6, name: 'Guanajuato' }, | |
| 'GRO': { cases: 3210, incidence: 109.8, name: 'Guerrero' }, | |
| 'HGO': { cases: 1234, incidence: 76.5, name: 'Hidalgo' }, | |
| 'JAL': { cases: 5432, incidence: 121.3, name: 'Jalisco' }, | |
| 'MEX': { cases: 6789, incidence: 132.4, name: 'Estado de México' }, | |
| 'MICH': { cases: 2345, incidence: 87.6, name: 'Michoacán' }, | |
| 'MOR': { cases: 987, incidence: 65.4, name: 'Morelos' }, | |
| 'NAY': { cases: 765, incidence: 54.3, name: 'Nayarit' }, | |
| 'NL': { cases: 3456, incidence: 98.7, name: 'Nuevo León' }, | |
| 'OAX': { cases: 3210, incidence: 109.8, name: 'Oaxaca' }, | |
| 'PUE': { cases: 2345, incidence: 87.6, name: 'Puebla' }, | |
| 'QRO': { cases: 1234, incidence: 76.5, name: 'Querétaro' }, | |
| 'QROO': { cases: 987, incidence: 65.4, name: 'Quintana Roo' }, | |
| 'SLP': { cases: 765, incidence: 54.3, name: 'San Luis Potosí' }, | |
| 'SIN': { cases: 2345, incidence: 87.6, name: 'Sinaloa' }, | |
| 'SON': { cases: 3210, incidence: 109.8, name: 'Sonora' }, | |
| 'TAB': { cases: 4321, incidence: 143.2, name: 'Tabasco' }, | |
| 'TAMPS': { cases: 1987, incidence: 92.1, name: 'Tamaulipas' }, | |
| 'TLAX': { cases: 876, incidence: 78.9, name: 'Tlaxcala' }, | |
| 'VER': { cases: 5432, incidence: 156.7, name: 'Veracruz' }, | |
| 'YUC': { cases: 2345, incidence: 87.6, name: 'Yucatán' }, | |
| 'ZAC': { cases: 987, incidence: 65.4, name: 'Zacatecas' } | |
| }; | |
| // Simulación de mapa (en realidad sería un SVG o imagen con áreas clickeables) | |
| mapContainer.innerHTML = ` | |
| <div style="position: relative; width: 100%; height: 100%; background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Mexico_blank_map.svg/1200px-Mexico_blank_map.svg.png'); background-size: contain; background-repeat: no-repeat; background-position: center;"> | |
| ${Object.keys(stateData).map(code => ` | |
| <div class="state-area" | |
| data-code="${code}" | |
| data-cases="${stateData[code].cases}" | |
| data-incidence="${stateData[code].incidence}" | |
| data-name="${stateData[code].name}" | |
| style="position: absolute; | |
| width: ${Math.random() * 5 + 2}%; | |
| height: ${Math.random() * 5 + 2}%; | |
| top: ${Math.random() * 80 + 10}%; | |
| left: ${Math.random() * 80 + 10}%; | |
| background-color: rgba(59, 130, 246, ${stateData[code].incidence / 200}); | |
| border: 1px solid #3b82f6; | |
| border-radius: 50%; | |
| cursor: pointer;"> | |
| </div> | |
| `).join('')} | |
| </div> | |
| `; | |
| // Manejar eventos del mapa | |
| document.querySelectorAll('.state-area').forEach(area => { | |
| area.addEventListener('mouseenter', function() { | |
| const code = this.getAttribute('data-code'); | |
| const name = this.getAttribute('data-name'); | |
| const cases = this.getAttribute('data-cases'); | |
| const incidence = this.getAttribute('data-incidence'); | |
| tooltip.innerHTML = ` | |
| <div class="font-bold">${name} (${code})</div> | |
| <div>Casos: ${cases}</div> | |
| <div>Incidencia: ${incidence} por 100k</div> | |
| `; | |
| tooltip.style.display = 'block'; | |
| tooltip.style.left = (this.getBoundingClientRect().left + window.scrollX) + 'px'; | |
| tooltip.style.top = (this.getBoundingClientRect().top + window.scrollY - 50) + 'px'; | |
| }); | |
| area.addEventListener('mouseleave', function() { | |
| tooltip.style.display = 'none'; | |
| }); | |
| }); | |
| }); | |
| // Gráfico de tendencia por edad | |
| const ageTrendCtx = document.getElementById('ageTrendChart').getContext('2d'); | |
| const ageTrendChart = new Chart(ageTrendCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['0-4', '5-9', '10-14', '15-19', '20-24', '25-29', '30-39', '40-49', '50-59', '60+'], | |
| datasets: [ | |
| { | |
| label: '2023', | |
| data: [12, 18, 24, 32, 45, 38, 42, 36, 28, 22], | |
| borderColor: '#3b82f6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| tension: 0.3, | |
| borderWidth: 2 | |
| }, | |
| { | |
| label: '2022', | |
| data: [8, 14, 20, 28, 38, 32, 36, 32, 24, 18], | |
| borderColor: '#64748b', | |
| backgroundColor: 'rgba(100, 116, 139, 0.1)', | |
| tension: 0.3, | |
| borderWidth: 2, | |
| borderDash: [5, 5] | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(51, 65, 85, 0.5)' | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Gráfico de tendencia de enfermedades | |
| const diseaseTrendCtx = document.getElementById('diseaseTrendChart').getContext('2d'); | |
| const diseaseTrendChart = new Chart(diseaseTrendCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Sem 41', 'Sem 42', 'Sem 43', 'Sem 44', 'Sem 45'], | |
| datasets: [ | |
| { | |
| label: 'Dengue', | |
| data: [2100, 2350, 2670, 2980, 3240], | |
| backgroundColor: '#ef4444' | |
| }, | |
| { | |
| label: 'COVID-19', | |
| data: [1850, 1720, 1650, 1820, 1930], | |
| backgroundColor: '#f97316' | |
| }, | |
| { | |
| label: 'Influenza', | |
| data: [450, 620, 780, 950, 1210], | |
| backgroundColor: '#f59e0b' | |
| }, | |
| { | |
| label: 'Otras', | |
| data: [870, 920, 950, 980, 1020], | |
| backgroundColor: '#64748b' | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| labels: { | |
| color: '#e2e8f0' | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(51, 65, 85, 0.5)' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Gráfico de distribución por sexo | |
| const genderDistributionCtx = document.getElementById('genderDistributionChart').getContext('2d'); | |
| const genderDistributionChart = new Chart(genderDistributionCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Hombre', 'Mujer', 'Otro/No especificado'], | |
| datasets: [{ | |
| data: [48, 49, 3], | |
| backgroundColor: [ | |
| '#3b82f6', | |
| '#ec4899', | |
| '#64748b' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| cutout: '70%', | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| labels: { | |
| color: '#e2e8f0' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Gráfico de distribución por edad | |
| const ageDistributionCtx = document.getElementById('ageDistributionChart').getContext('2d'); | |
| const ageDistributionChart = new Chart(ageDistributionCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['0-9', '10-19', '20-29', '30-39', '40-49', '50-59', '60+'], | |
| datasets: [{ | |
| label: 'Casos', | |
| data: [8, 22, 35, 28, 18, 12, 8], | |
| backgroundColor: '#10b981' | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(51, 65, 85, 0.5)' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| </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=doctopanda/flowdata" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |