| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Dashboard de Campañas</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .custom-scrollbar::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
| .custom-scrollbar::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| .custom-scrollbar::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 3px; |
| } |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| .animate-pulse { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="hidden md:flex md:flex-shrink-0"> |
| <div class="flex flex-col w-64 bg-indigo-800 text-white"> |
| <div class="flex items-center justify-center h-16 px-4 border-b border-indigo-700"> |
| <div class="flex items-center"> |
| <i class="fas fa-chart-line text-2xl mr-2"></i> |
| <span class="text-xl font-semibold">AnalyticsPro</span> |
| </div> |
| </div> |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto custom-scrollbar"> |
| <nav class="flex-1 space-y-2"> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg bg-indigo-900 text-white"> |
| <i class="fas fa-home mr-3"></i> |
| Dashboard |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-700 hover:text-white"> |
| <i class="fas fa-bullhorn mr-3"></i> |
| Campañas |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-700 hover:text-white"> |
| <i class="fas fa-users mr-3"></i> |
| Participantes |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-700 hover:text-white"> |
| <i class="fas fa-chart-pie mr-3"></i> |
| Reportes |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-700 hover:text-white"> |
| <i class="fas fa-cog mr-3"></i> |
| Configuración |
| </a> |
| </nav> |
| </div> |
| <div class="p-4 border-t border-indigo-700"> |
| <div class="flex items-center"> |
| <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile"> |
| <div class="ml-3"> |
| <p class="text-sm font-medium">María González</p> |
| <p class="text-xs text-indigo-200">Admin</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex flex-col flex-1 overflow-hidden"> |
| |
| <header class="bg-white shadow-sm"> |
| <div class="flex items-center justify-between px-6 py-4"> |
| <div class="flex items-center"> |
| <button class="md:hidden text-gray-500 focus:outline-none"> |
| <i class="fas fa-bars"></i> |
| </button> |
| <h1 class="ml-4 text-xl font-semibold text-gray-800">Detalle de Campaña</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="text-gray-500 focus:outline-none"> |
| <i class="fas fa-bell"></i> |
| </button> |
| <button class="text-gray-500 focus:outline-none"> |
| <i class="fas fa-question-circle"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-1 overflow-y-auto p-6 custom-scrollbar"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-6"> |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> |
| <div> |
| <h2 class="text-2xl font-bold text-gray-800">Campaña de Verano 2023</h2> |
| <div class="flex items-center mt-2"> |
| <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Activa</span> |
| <span class="ml-3 text-sm text-gray-500"><i class="fas fa-calendar-alt mr-1"></i> 15 Jun - 30 Jun 2023</span> |
| </div> |
| </div> |
| <div class="mt-4 md:mt-0"> |
| <button class="px-4 py-2 text-sm font-medium rounded-md bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
| <i class="fas fa-download mr-2"></i> Exportar Reporte |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Participantes totales</p> |
| <p class="mt-1 text-3xl font-semibold text-gray-900">8,542</p> |
| </div> |
| <div class="p-3 rounded-full bg-indigo-100 text-indigo-600"> |
| <i class="fas fa-users text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center text-sm text-green-600"> |
| <i class="fas fa-arrow-up mr-1"></i> |
| <span>12.5% vs campaña anterior</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Interacciones</p> |
| <p class="mt-1 text-3xl font-semibold text-gray-900">24,876</p> |
| </div> |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
| <i class="fas fa-hand-pointer text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center text-sm text-green-600"> |
| <i class="fas fa-arrow-up mr-1"></i> |
| <span>8.3% vs campaña anterior</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Tasa de conversión</p> |
| <p class="mt-1 text-3xl font-semibold text-gray-900">32.4%</p> |
| </div> |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
| <i class="fas fa-percentage text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center text-sm text-red-600"> |
| <i class="fas fa-arrow-down mr-1"></i> |
| <span>2.1% vs campaña anterior</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Participación promedio</p> |
| <p class="mt-1 text-3xl font-semibold text-gray-900">2.9</p> |
| </div> |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> |
| <i class="fas fa-chart-bar text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center text-sm text-green-600"> |
| <i class="fas fa-arrow-up mr-1"></i> |
| <span>5.7% vs campaña anterior</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between mb-4"> |
| <h3 class="text-lg font-medium text-gray-900">Participación por hora</h3> |
| <div class="relative"> |
| <select class="appearance-none bg-gray-100 border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded-md leading-tight focus:outline-none focus:bg-white focus:border-indigo-500 text-sm"> |
| <option>Últimos 7 días</option> |
| <option>Últimos 30 días</option> |
| <option selected>Duración completa</option> |
| </select> |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> |
| <i class="fas fa-chevron-down"></i> |
| </div> |
| </div> |
| </div> |
| <div class="h-80"> |
| <canvas id="hourlyChart"></canvas> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between mb-4"> |
| <h3 class="text-lg font-medium text-gray-900">Segmentación por edad</h3> |
| <button class="text-sm text-indigo-600 hover:text-indigo-800 focus:outline-none"> |
| <i class="fas fa-download mr-1"></i> Exportar |
| </button> |
| </div> |
| <div class="h-80"> |
| <canvas id="ageChart"></canvas> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 gap-6 mb-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between mb-4"> |
| <h3 class="text-lg font-medium text-gray-900">Tendencia diaria de participación</h3> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-sm rounded-md bg-indigo-100 text-indigo-800">Día</button> |
| <button class="px-3 py-1 text-sm rounded-md bg-gray-100 text-gray-800">Semana</button> |
| <button class="px-3 py-1 text-sm rounded-md bg-gray-100 text-gray-800">Mes</button> |
| </div> |
| </div> |
| <div class="h-80"> |
| <canvas id="dailyTrendChart"></canvas> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <div class="flex items-center justify-between"> |
| <h3 class="text-lg font-medium text-gray-900">Participantes destacados</h3> |
| <button class="text-sm text-indigo-600 hover:text-indigo-800 focus:outline-none"> |
| Ver todos |
| </button> |
| </div> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Participante</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Edad</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ubicación</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Interacciones</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Última participación</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Juan Pérez</div> |
| <div class="text-sm text-gray-500">juan.perez@example.com</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Madrid, ES</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">47</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Hoy, 14:32</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Activo</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">María López</div> |
| <div class="text-sm text-gray-500">maria.lopez@example.com</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">35</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Barcelona, ES</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">32</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Ayer, 18:15</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Activo</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Carlos García</div> |
| <div class="text-sm text-gray-500">carlos.garcia@example.com</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">42</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Valencia, ES</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25 Jun, 10:45</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Inactivo</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Ana Martínez</div> |
| <div class="text-sm text-gray-500">ana.martinez@example.com</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">31</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sevilla, ES</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">19</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">24 Jun, 16:30</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Activo</span> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const hourlyCtx = document.getElementById('hourlyChart').getContext('2d'); |
| const hourlyChart = new Chart(hourlyCtx, { |
| type: 'line', |
| data: { |
| labels: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'], |
| datasets: [{ |
| label: 'Participaciones', |
| data: [120, 95, 80, 150, 420, 780, 950, 1020, 890, 750, 620, 380], |
| backgroundColor: 'rgba(79, 70, 229, 0.1)', |
| borderColor: 'rgba(79, 70, 229, 1)', |
| borderWidth: 2, |
| tension: 0.3, |
| fill: true |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| display: false |
| }, |
| tooltip: { |
| mode: 'index', |
| intersect: false |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| drawBorder: false |
| } |
| }, |
| x: { |
| grid: { |
| display: false |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const ageCtx = document.getElementById('ageChart').getContext('2d'); |
| const ageChart = new Chart(ageCtx, { |
| type: 'bar', |
| data: { |
| labels: ['18-24', '25-34', '35-44', '45-54', '55-64', '65+'], |
| datasets: [{ |
| label: 'Participantes', |
| data: [1200, 2800, 2100, 1500, 800, 242], |
| backgroundColor: [ |
| 'rgba(79, 70, 229, 0.7)', |
| 'rgba(99, 102, 241, 0.7)', |
| 'rgba(129, 140, 248, 0.7)', |
| 'rgba(165, 180, 252, 0.7)', |
| 'rgba(199, 210, 254, 0.7)', |
| 'rgba(224, 231, 255, 0.7)' |
| ], |
| borderColor: [ |
| 'rgba(79, 70, 229, 1)', |
| 'rgba(99, 102, 241, 1)', |
| 'rgba(129, 140, 248, 1)', |
| 'rgba(165, 180, 252, 1)', |
| 'rgba(199, 210, 254, 1)', |
| 'rgba(224, 231, 255, 1)' |
| ], |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| display: false |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| drawBorder: false |
| } |
| }, |
| x: { |
| grid: { |
| display: false |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const dailyTrendCtx = document.getElementById('dailyTrendChart').getContext('2d'); |
| const dailyTrendChart = new Chart(dailyTrendCtx, { |
| type: 'line', |
| data: { |
| labels: ['15 Jun', '16 Jun', '17 Jun', '18 Jun', '19 Jun', '20 Jun', '21 Jun', '22 Jun', '23 Jun', '24 Jun', '25 Jun', '26 Jun', '27 Jun', '28 Jun', '29 Jun', '30 Jun'], |
| datasets: [ |
| { |
| label: 'Participaciones', |
| data: [420, 580, 720, 890, 950, 1020, 1150, 980, 1100, 1250, 1320, 1400, 1280, 1150, 1050, 920], |
| borderColor: 'rgba(79, 70, 229, 1)', |
| backgroundColor: 'rgba(79, 70, 229, 0.1)', |
| borderWidth: 2, |
| tension: 0.3, |
| fill: true |
| }, |
| { |
| label: 'Nuevos participantes', |
| data: [150, 180, 210, 240, 220, 250, 280, 260, 270, 290, 310, 300, 280, 260, 240, 220], |
| borderColor: 'rgba(236, 72, 153, 1)', |
| backgroundColor: 'rgba(236, 72, 153, 0.1)', |
| borderWidth: 2, |
| tension: 0.3, |
| fill: true, |
| hidden: true |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'top', |
| }, |
| tooltip: { |
| mode: 'index', |
| intersect: false |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| drawBorder: false |
| } |
| }, |
| x: { |
| grid: { |
| display: false |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| document.querySelector('.md\\:hidden').addEventListener('click', function() { |
| document.querySelector('.md\\:flex').classList.toggle('hidden'); |
| }); |
| </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=Treas/prueba" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
