Temperature Monitoring Dashboard - Copy this Html, Tailwind Component to your project
guiate de este código: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sistema de Trazabilidad de Almacenamiento</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet"> </head> <body class="bg-gray-50"> <div class="min-h-screen"> <nav class="bg-white shadow-sm"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center h-16"> <div class="flex items-center"> <img src="images.unsplash.com/photo-1586769852044-692d6e3703f0" alt="logo" class="h-8 w-8 rounded"> <span class="ml-2 font-semibold text-gray-900">Storage Tracker</span> </div> <div class="flex items-center space-x-4"> <button class="bg-gray-100 p-2 rounded-full"> <i class="ri-notification-3-line text-gray-600"></i> </button> <button class="bg-gray-100 p-2 rounded-full"> <i class="ri-settings-3-line text-gray-600"></i> </button> <div class="flex items-center"> <img src="images.unsplash.com/photo-1535713875002-d1d0cf377fde" class="h-8 w-8 rounded-full"> </div> </div> </div> </div> </nav> <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> <div class="bg-white p-6 rounded-lg shadow-sm"> <div class="flex items-center"> <div class="p-2 bg-green-100 rounded-lg"> <i class="ri-temp-hot-line text-green-600"></i> </div> <div class="ml-4"> <p class="text-sm text-gray-600">Temperatura</p> <p class="text-2xl font-semibold text-gray-900">23°C</p> </div> </div> </div> <div class="bg-white p-6 rounded-lg shadow-sm"> <div class="flex items-center"> <div class="p-2 bg-blue-100 rounded-lg"> <i class="ri-box-3-line text-blue-600"></i> </div> <div class="ml-4"> <p class="text-sm text-gray-600">Productos Totales</p> <p class="text-2xl font-semibold text-gray-900">1,234</p> </div> </div> </div> <div class="bg-white p-6 rounded-lg shadow-sm"> <div class="flex items-center"> <div class="p-2 bg-yellow-100 rounded-lg"> <i class="ri-timer-line text-yellow-600"></i> </div> <div class="ml-4"> <p class="text-sm text-gray-600">Expirando Pronto</p> <p class="text-2xl font-semibold text-gray-900">28</p> </div> </div> </div> <div class="bg-white p-6 rounded-lg shadow-sm"> <div class="flex items-center"> <div class="p-2 bg-purple-100 rounded-lg"> <i class="ri-user-line text-purple-600"></i> </div> <div class="ml-4"> <p class="text-sm text-gray-600">Usuarios Activos</p> <p class="text-2xl font-semibold text-gray-900">45</p> </div> </div> </div> </div> <div class="bg-white rounded-lg shadow-sm p-6 mb-8"> <div class="flex justify-between items-center mb-6"> <h2 class="text-lg font-semibold text-gray-900">Fechas de Vencimiento de Productos</h2> <a href="#" class="text-blue-600 hover:text-blue-700 flex items-center"> <i class="ri-download-line mr-1"></i> Exportar </a> </div> <div class="overflow-x-auto"> <table class="min-w-full"> <thead> <tr class="border-b"> <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">ID Producto</th> <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Nombre Producto</th> <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Fecha Vencimiento</th> <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Estado</th> </tr> </thead> <tbody> <tr class="border-b hover:bg-gray-50"> <td class="py-3 px-4 text-sm text-gray-900">PRD001</td> <td class="py-3 px-4 text-sm text-gray-900">Producto A</td> <td class="py-3 px-4 text-sm text-gray-900">2024-02-15</td> <td class="py-3 px-4"><span class="px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800">Expirando Pronto</span></td> </tr> <tr class="border-b hover:bg-gray-50"> <td class="py-3 px-4 text-sm text-gray-900">PRD002</td> <td class="py-3 px-4 text-sm text-gray-900">Producto B</td> <td class="py-3 px-4 text-sm text-gray-900">2024-06-30</td> <td class="py-3 px-4"><span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Válido</span></td> </tr> </tbody> </table> </div> </div> <div class="bg-white rounded-lg shadow-sm p-6 mb-8"> <div class="flex justify-between items-center mb-6"> <h2 class="text-lg font-semibold text-gray-900">Registro de Actividad del Sistema</h2> <a href="#" class="text-blue-600 hover:text-blue-700 flex items-center"> <i class="ri-download-line mr-1"></i> Exportar </a> </div> <div class="overflow-x-auto"> <table class="min-w-full"> <thead> <tr class="border-b"> <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Timestamp</th> <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Usuario ID</th> <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Acción</th> <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Detalles</th> </tr> </thead> <tbody> <tr class="border-b hover:bg-gray-50"> <td class="py-3 px-4 text-sm text-gray-900">2024-01-07 15:30</td> <td class="py-3 px-4 text-sm text-gray-900">USER123</td> <td class="py-3 px-4"><span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">Agregado</span></td> <td class="py-3 px-4 text-sm text-gray-900">Agregado nuevo producto PRD001</td> </tr> <tr class="border-b hover:bg-gray-50"> <td class="py-3 px-4 text-sm text-gray-900">2024-01-07 14:45</td> <td class="py-3 px-4 text-sm text-gray-900">USER456</td> <td class="py-3 px-4"><span class="px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800">Retirado</span></td> <td class="py-3 px-4 text-sm text-gray-900">Retirado producto expirado PRD002</td> </tr> <tr class="border-b hover:bg-gray-50"> <td class="py-3 px-4 text-sm text-gray-900">2024-01-07 13:15</td> <td class="py-3 px-4 text-sm text-gray-900">USER789</td> <td class="py-3 px-4"><span class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">Inspección</span></td> <td class="py-3 px-4 text-sm text-gray-900">Conducto chequeo de temperatura en Zona A</td> </tr> </tbody> </table> </div> </div> <div class="bg-white rounded-lg shadow-sm p-6 mb-8"> <div class="flex justify-between items-center mb-6"> <h2 class="text-lg font-semibold text-gray-900">Monitoreo de Temperatura</h2> <div class="flex space-x-4"> <select class="text-sm border rounded-md px-2 py-1" id="timeRange"> <option value="3h" selected>Cada 3 Horas</option> <option value="24h">Últimas 24 Horas</option> <option value="1w">1 Semana</option> <option value="1m">1 Mes</option> <option value="6m">6 Meses</option> </select> </div> </div> <div class="w-full h-[400px] relative overflow-hidden"> <canvas id="temperatureChart" class="w-full h-full"></canvas> </div> </div> <div class="bg-white rounded-lg shadow-sm p-6 mb-8"> <div class="flex justify-between items-center mb-6"> <h2 class="text-lg font-semibold text-gray-900">Registro de Temperatura</h2> <a href="#" class="text-blue-600 hover:text-blue-700 flex items-center"> <i class="ri-download-line mr-1"></i> Exportar </a> </div> <div class="overflow-x-auto"> <table class="min-w-full"> <thead> <tr class="border-b"> <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Timestamp</th> <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Temperatura</th> <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Ubicación</th> <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Estado</th> </tr> </thead> <tbody> <tr class="border-b hover:bg-gray-50"> <td class="py-3 px-4 text-sm text-gray-900">2024-01-07 14:30</td> <td class="py-3 px-4 text-sm text-gray-900">23°C</td> <td class="py-3 px-4 text-sm text-gray-900">Zona A</td> <td class="py-3 px-4"><span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Normal</span></td> </tr> <tr class="border-b hover:bg-gray-50"> <td class="py-3 px-4 text-sm text-gray-900">2024-01-07 14:15</td> <td class="py-3 px-4 text-sm text-gray-900">25°C</td> <td class="py-3 px-4 text-sm text-gray-900">Zona B</td> <td class="py-3 px-4"><span class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">Advertencia</span></td> </tr> <tr class="border-b hover:bg-gray-50"> <td class="py-3 px-4 text-sm text-gray-900">2024-01-07 14:00</td> <td class="py-3 px-4 text-sm text-gray-900">28°C</td> <td class="py-3 px-4 text-sm text-gray-900">Zona C</td> <td class="py-3 px-4"><span class="px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800">Criticidad</span></td> </tr> </tbody> </table> </div> </div> </main> </div> <script> document.addEventListener('DOMContentLoaded', function() { const ctx = document.getElementById('temperatureChart').getContext('2d'); const timeRangeSelect = document.getElementById('timeRange'); const generateExponentialData = (range) => { const data = []; const labels = []; let points; switch(range) { case '3h': points = 6; break; case '24h': points = 24; break; case '1w': points = 168; break; case '1m': points = 720; break; case '6m': points = 4320; break; default: points = 24; } for(let i = 0; i < points; i++) { data.push(20 + (Math.exp(i/points * 2) - 1) * 5); labels.push(`${i}:00`); } return { data, labels }; }; let chart; const updateChart = (range) => { const { data, labels } = generateExponentialData(range); if (chart) { chart.destroy(); } chart = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: 'Temperatura (°C)', data: data, borderColor: 'rgb(59, 130, 246)', tension: 0.1, fill: true, backgroundColor: 'rgba(59, 130, 246, 0.1)' }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { mode: 'index', intersect: false } }, scales: { y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' } }, x: { grid: { display: false }, ticks: { maxTicksLimit: 12 } } } } }); }; timeRangeSelect.addEventListener('change', (e) => { updateChart(e.target.value); }); updateChart('3h'); }); </script> </body> </html>