| | <!DOCTYPE html> |
| | <html lang="pt-br"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Matrix Control Panel - Dashboard</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| | <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> |
| | <style> |
| | :root { |
| | --primary: #0ea5e9; |
| | --secondary: #7e22ce; |
| | --dark: #0f172a; |
| | --darker: #020617; |
| | --neon: #00f7ff; |
| | } |
| | |
| | body { |
| | font-family: 'Roboto', sans-serif; |
| | background-color: var(--darker); |
| | color: #e2e8f0; |
| | } |
| | |
| | .futuristic-font { |
| | font-family: 'Orbitron', sans-serif; |
| | } |
| | |
| | .glass-card { |
| | background: rgba(15, 23, 42, 0.7); |
| | backdrop-filter: blur(10px); |
| | border: 1px solid rgba(14, 165, 233, 0.2); |
| | box-shadow: 0 0 15px rgba(0, 247, 255, 0.1); |
| | } |
| | |
| | .neon-border { |
| | border: 1px solid var(--neon); |
| | box-shadow: 0 0 10px rgba(0, 247, 255, 0.5); |
| | } |
| | |
| | .neon-text { |
| | text-shadow: 0 0 5px var(--neon); |
| | } |
| | |
| | .pulse { |
| | animation: pulse 2s infinite; |
| | } |
| | |
| | @keyframes pulse { |
| | 0% { box-shadow: 0 0 0 0 rgba(0, 247, 255, 0.4); } |
| | 70% { box-shadow: 0 0 0 10px rgba(0, 247, 255, 0); } |
| | 100% { box-shadow: 0 0 0 0 rgba(0, 247, 255, 0); } |
| | } |
| | |
| | .terminal { |
| | background-color: rgba(0, 0, 0, 0.7); |
| | border: 1px solid var(--primary); |
| | font-family: 'Courier New', monospace; |
| | color: #00ff00; |
| | } |
| | |
| | .chart-container { |
| | position: relative; |
| | height: 300px; |
| | width: 100%; |
| | } |
| | |
| | .nav-link.active { |
| | background-color: rgba(14, 165, 233, 0.2); |
| | border: 1px solid var(--neon); |
| | } |
| | </style> |
| | </head> |
| | <body class="min-h-screen"> |
| | |
| | <nav class="glass-card fixed w-full z-50"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="flex items-center justify-between h-16"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0"> |
| | <span class="text-xl futuristic-font neon-text">Matrix CP</span> |
| | </div> |
| | <div class="hidden md:block"> |
| | <div class="ml-10 flex items-baseline space-x-4"> |
| | <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium hover:bg-sky-900/30 hover:neon-border transition-all active">Dashboard</a> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="hidden md:block"> |
| | <div class="ml-4 flex items-center md:ml-6"> |
| | <button class="p-1 rounded-full text-sky-400 hover:text-white focus:outline-none"> |
| | <span class="sr-only">Notificações</span> |
| | <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> |
| | </svg> |
| | </button> |
| | <div class="ml-3 relative"> |
| | <div> |
| | <button type="button" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none" id="user-menu"> |
| | <span class="sr-only">Abrir menu do usuário</span> |
| | <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="-mr-2 flex md:hidden"> |
| | <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-sky-400 hover:text-white hover:bg-sky-900/30 focus:outline-none" id="mobile-menu-button"> |
| | <span class="sr-only">Abrir menu principal</span> |
| | <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> |
| | </svg> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="md:hidden hidden" id="mobile-menu"> |
| | <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
| | <a href="#" class="nav-link-mobile block px-3 py-2 rounded-md text-base font-medium hover:bg-sky-900/30 hover:neon-border transition-all active">Dashboard</a> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <main class="pt-20 pb-12 px-4 sm:px-6 lg:px-8"> |
| | |
| | <div class="glass-card rounded-lg p-6 neon-border"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h1 class="text-3xl font-bold futuristic-font neon-text">Matrix Analytics Dashboard</h1> |
| | <div class="flex space-x-3"> |
| | <div class="relative"> |
| | <select class="appearance-none bg-slate-800 border border-sky-500 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent text-sm"> |
| | <option>Últimos 7 dias</option> |
| | <option>Últimos 30 dias</option> |
| | <option>Este mês</option> |
| | <option>Mês passado</option> |
| | <option>Personalizado</option> |
| | </select> |
| | <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-sky-400"> |
| | <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> |
| | </svg> |
| | </div> |
| | </div> |
| | <button class="bg-sky-600 hover:bg-sky-700 px-4 py-2 rounded-lg futuristic-font transition-colors flex items-center text-sm"> |
| | <svg class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> |
| | </svg> |
| | Novo Relatório |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
| | <div class="glass-card rounded-lg p-6 hover:neon-border transition-all"> |
| | <div class="flex justify-between"> |
| | <div> |
| | <p class="text-sm text-slate-400">Total de Tarefas</p> |
| | <h3 class="text-2xl font-bold futuristic-font mt-1">1,248</h3> |
| | <div class="flex items-center mt-2"> |
| | <svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round, stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" /> |
| | </svg> |
| | <span class="text-xs text-green-500 ml-1">12% vs período anterior</span> |
| | </div> |
| | </div> |
| | <div class="h-12 w-12 rounded-full bg-sky-900/30 flex items-center justify-center"> |
| | <svg class="h-6 w-6 text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> |
| | </svg> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="glass-card rounded-lg p-6 hover:neon-border transition-all"> |
| | <div class="flex justify-between"> |
| | <div> |
| | <p class="text-sm text-slate-400">Tarefas Concluídas</p> |
| | <h3 class="text-2xl font-bold futuristic-font mt-1">892</h3> |
| | <div class="flex items-center mt-2"> |
| | <svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" /> |
| | </svg> |
| | <span class="text-xs text-green-500 ml-1">8% vs período anterior</span> |
| | </div> |
| | </div> |
| | <div class="h-12 w-12 rounded-full bg-green-900/30 flex items-center justify-center"> |
| | <svg class="h-6 w-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| | </svg> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="glass-card rounded-lg p-6 hover:neon-border transition-all"> |
| | <div class="flex justify-between"> |
| | <div> |
| | <p class="text-sm text-slate-400">Taxa de Sucesso</p> |
| | <h3 class="text-2xl font-bold futuristic-font mt-1">71.5%</h3> |
| | <div class="flex items-center mt-2"> |
| | <svg class="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 14l7-7m0 0l7 7m-7-7v18" /> |
| | </svg> |
| | <span class="text-xs text-red-500 ml-1">2% vs período anterior</span> |
| | </div> |
| | </div> |
| | <div class="h-12 w-12 rounded-full bg-purple-900/30 flex items-center justify-center"> |
| | <svg class="h-6 w-6 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /> |
| | </svg> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="glass-card rounded-lg p-6 hover:neon-border transition-all"> |
| | <div class="flex justify-between"> |
| | <div> |
| | <p class="text-sm text-slate-400">Tempo Médio</p> |
| | <h3 class="text-2xl font-bold futuristic-font mt-1">3.2h</h3> |
| | <div class="flex items-center mt-2"> |
| | <svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" /> |
| | </svg> |
| | <span class="text-xs text-green-500 ml-1">15% vs período anterior</span> |
| | </div> |
| | </div> |
| | <div class="h-12 w-12 rounded-full bg-yellow-900/30 flex items-center justify-center"> |
| | <svg class="h-6 w-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| | </svg> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
| | <div class="glass-card rounded-lg p-6"> |
| | <div class="flex justify-between items-center mb-4"> |
| | <h3 class="text-lg font-semibold futuristic-font">Tarefas por Status</h3> |
| | <div class="flex space-x-2"> |
| | <button class="text-xs bg-sky-900/30 hover:bg-sky-900/50 px-3 py-1 rounded-lg transition-colors">Diário</button> |
| | <button class="text-xs bg-slate-800 hover:bg-slate-700 px-3 py-1 rounded-lg transition-colors">Semanal</button> |
| | <button class="text-xs bg-slate-800 hover:bg-slate-700 px-3 py-1 rounded-lg transition-colors">Mensal</button> |
| | </div> |
| | </div> |
| | <div class="chart-container"> |
| | <canvas id="statusChart"></canvas> |
| | </div> |
| | </div> |
| | |
| | <div class="glass-card rounded-lg p-6"> |
| | <div class="flex justify-between items-center mb-4"> |
| | <h3 class="text-lg font-semibold futuristic-font">Desempenho por Agente</h3> |
| | <div class="flex space-x-2"> |
| | <button class="text-xs bg-sky-900/30 hover:bg-sky-900/50 px-3 py-1 rounded-lg transition-colors">Tarefas</button> |
| | <button class="text-xs bg-slate-800 hover:bg-slate-700 px-3 py-1 rounded-lg transition-colors">Tempo</button> |
| | <button class="text-xs bg-slate-800 hover:bg-slate-700 px-3 py-1 rounded-lg transition-colors">Sucesso</button> |
| | </div> |
| | </div> |
| | <div class="chart-container"> |
| | <canvas id="performanceChart"></canvas> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> |
| | <div class="glass-card rounded-lg p-6"> |
| | <h3 class="text-lg font-semibold futuristic-font mb-4">Distribuição por Tipo</h3> |
| | <div class="chart-container"> |
| | <canvas id="typeChart"></canvas> |
| | </div> |
| | </div> |
| | |
| | <div class="glass-card rounded-lg p-6"> |
| | <h3 class="text-lg font-semibold futuristic-font mb-4">Tendência Temporal</h3> |
| | <div class="chart-container"> |
| | <canvas id="trendChart"></canvas> |
| | </div> |
| | </div> |
| | |
| | <div class="glass-card rounded-lg p-6"> |
| | <h3 class="text-lg font-semibold futuristic-font mb-4">Prioridades</h3> |
| | <div class="chart-container"> |
| | <canvas id="priorityChart"></canvas> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="glass-card rounded-lg p-6"> |
| | <div class="flex justify-between items-center mb-4"> |
| | <h3 class="text-lg font-semibold futuristic-font">Atividade Recente</h3> |
| | <button class="text-sm text-sky-400 hover:text-sky-300 flex items-center"> |
| | Ver tudo |
| | <svg class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> |
| | </svg> |
| | </button> |
| | </div> |
| | |
| | <div class="space-y-4"> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 h-10 w-10 rounded-full bg-sky-900/30 flex items-center justify-center"> |
| | <svg class="h-5 w-5 text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 01118 0z" /> |
| | </svg> |
| | </div> |
| | <div class="ml-4"> |
| | <p class="text-sm font-medium">Agente "Backend" completou a tarefa TASK-014</p> |
| | <p class="text-xs text-slate-400">2 minutos atrás</p> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-900/30 flex items-center justify-center"> |
| | <svg class="h-5 w-5 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> |
| | </svg> |
| | </div> |
| | <div class="ml-4"> |
| | <p class="text-sm font-medium">Nova tarefa criada: "Implementar cache Redis"</p> |
| | <p class="text-xs text-slate-400">15 minutos atrás</p> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-900/30 flex items-center justify-center"> |
| | <svg class="h-5 w-5 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| | </svg> |
| | </div> |
| | <div class="ml-4"> |
| | <p class="text-sm font-medium">Tarefa TASK-011 está atrasada</p> |
| | <p class="text-xs text-slate-400">1 hora atrás</p> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-900/30 flex items-center justify-center"> |
| | <svg class="h-5 w-5 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> |
| | </svg> |
| | </div> |
| | <div class="ml-4"> |
| | <p class="text-sm font-medium">Falha na tarefa TASK-008 - Erro de conexão com o banco</p> |
| | <p class="text-xs text-slate-400">3 horas atrás</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| |
|
| | <script> |
| | |
| | document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| | const menu = document.getElementById('mobile-menu'); |
| | menu.classList.toggle('hidden'); |
| | }); |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | |
| | const statusCtx = document.getElementById('statusChart').getContext('2d'); |
| | const statusChart = new Chart(statusCtx, { |
| | type: 'bar', |
| | data: { |
| | labels: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'], |
| | datasets: [ |
| | { |
| | label: 'Concluído', |
| | data: [12, 19, 15, 20, 14, 8, 4], |
| | backgroundColor: '#10b981', |
| | borderColor: '#10b981', |
| | borderWidth: 1 |
| | }, |
| | { |
| | label: 'Em Progresso', |
| | data: [8, 12, 10, 6, 9, 5, 3], |
| | backgroundColor: '#3b82f6', |
| | borderColor: '#3b82f6', |
| | borderWidth: 1 |
| | }, |
| | { |
| | label: 'Pendente', |
| | data: [5, 8, 6, 4, 7, 3, 2], |
| | backgroundColor: '#f59e0b', |
| | borderColor: '#f59e0b', |
| | borderWidth: 1 |
| | }, |
| | { |
| | label: 'Falha', |
| | data: [2, 3, 4, 1, 2, 1, 0], |
| | backgroundColor: '#ef4444', |
| | borderColor: '#ef4444', |
| | borderWidth: 1 |
| | } |
| | ] |
| | }, |
| | options: { |
| | responsive: true, |
| | maintainAspectRatio: false, |
| | scales: { |
| | x: { |
| | stacked: true, |
| | grid: { |
| | color: 'rgba(255, 255, 255, 0.1)' |
| | }, |
| | ticks: { |
| | color: '#e2e8f0' |
| | } |
| | }, |
| | y: { |
| | stacked: true, |
| | grid: { |
| | color: 'rgba(255, 255, 255, 0.1)' |
| | }, |
| | ticks: { |
| | color: '#e2e8f0' |
| | } |
| | } |
| | }, |
| | plugins: { |
| | legend: { |
| | position: 'top', |
| | labels: { |
| | color: '#e2e8f0' |
| | } |
| | } |
| | } |
| | } |
| | }); |
| | |
| | |
| | const performanceCtx = document.getElementById('performanceChart').getContext('2d'); |
| | const performanceChart = new Chart(performanceCtx, { |
| | type: 'bar', |
| | data: { |
| | labels: ['Gerente', 'DevOps', 'Frontend', 'Backend', 'Database', 'Segurança'], |
| | datasets: [ |
| | { |
| | label: 'Tarefas Concluídas', |
| | data: [45, 38, 42, 56, 32, 28], |
| | backgroundColor: '#8b5cf6', |
| | borderColor: '#8b5cf6', |
| | borderWidth: 1 |
| | } |
| | ] |
| | }, |
| | options: { |
| | indexAxis: 'y', |
| | responsive: true, |
| | maintainAspectRatio: false, |
| | scales: { |
| | x: { |
| | grid: { |
| | color: 'rgba(255, 255, 255, 0.1)' |
| | }, |
| | ticks: { |
| | color: '#e2e8f0' |
| | } |
| | }, |
| | y: { |
| | grid: { |
| | color: 'rgba(255, 255, 255, 0.1)' |
| | }, |
| | ticks: { |
| | color: '#e2e8f0' |
| | } |
| | } |
| | }, |
| | plugins: { |
| | legend: { |
| | position: 'top', |
| | labels: { |
| | color: '#e2e8f0' |
| | } |
| | } |
| | } |
| | } |
| | }); |
| | |
| | |
| | const typeCtx = document.getElementById('typeChart').getContext('2d'); |
| | const typeChart = new Chart(typeCtx, { |
| | type: 'doughnut', |
| | data: { |
| | labels: ['Desenvolvimento', 'Testes', 'Infraestrutura', 'Segurança', 'Documentação'], |
| | datasets: [{ |
| | data: [35, 20, 25, 15, 5], |
| | backgroundColor: [ |
| | '#3b82f6', |
| | '#10b981', |
| | '#f59e0b', |
| | '#ef4444', |
| | '#8b5cf6' |
| | ], |
| | borderColor: [ |
| | '#3b82f6', |
| | '#10b981', |
| | '#f59e0b', |
| | '#ef4444', |
| | '#8b5cf6' |
| | ], |
| | borderWidth: 1 |
| | }] |
| | }, |
| | options: { |
| | responsive: true, |
| | maintainAspectRatio: false, |
| | plugins: { |
| | legend: { |
| | position: 'right', |
| | labels: { |
| | color: '#e2e8f0' |
| | } |
| | } |
| | } |
| | } |
| | }); |
| | |
| | |
| | const trendCtx = document.getElementById('trendChart').getContext('2d'); |
| | const trendChart = new Chart(trendCtx, { |
| | type: 'line', |
| | data: { |
| | labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul'], |
| | datasets: [ |
| | { |
| | label: 'Tarefas Criadas', |
| | data: [120, 135, 150, 165, 180, 195, 210], |
| | borderColor: '#3b82f6', |
| | backgroundColor: 'rgba(59, 130, 246, 0.1)', |
| | borderWidth: 2, |
| | tension: 0.3, |
| | fill: true |
| | }, |
| | { |
| | label: 'Tarefas Concluídas', |
| | data: [80, 95, 110, 125, 140, 155, 170], |
| | borderColor: '#10b981', |
| | backgroundColor: 'rgba(16, 185, 129, 0.1)', |
| | borderWidth: 2, |
| | tension: 0.3, |
| | fill: true |
| | } |
| | ] |
| | }, |
| | options: { |
| | responsive: true, |
| | maintainAspectRatio: false, |
| | scales: { |
| | x: { |
| | grid: { |
| | color: 'rgba(255, 255, 255, 0.1)' |
| | }, |
| | ticks: { |
| | color: '#e2e8f0' |
| | } |
| | }, |
| | y: { |
| | grid: { |
| | color: 'rgba(255, 255, 255, 0.1)' |
| | }, |
| | ticks: { |
| | color: '#e2e8f0' |
| | } |
| | } |
| | }, |
| | plugins: { |
| | legend: { |
| | position: 'top', |
| | labels: { |
| | color: '#e2e8f0' |
| | } |
| | } |
| | } |
| | } |
| | }); |
| | |
| | |
| | const priorityCtx = document.getElementById('priorityChart').getContext('2d'); |
| | const priorityChart = new Chart(priorityCtx, { |
| | type: 'polarArea', |
| | data: { |
| | labels: ['Crítica', 'Alta', 'Média', 'Baixa'], |
| | datasets: [{ |
| | data: [15, 25, 40, 20], |
| | backgroundColor: [ |
| | 'rgba(239, 68, 68, 0.7)', |
| | 'rgba(245, 158, 11, 0.7)', |
| | 'rgba(59, 130, 246, 0.7)', |
| | 'rgba(16, 185, 129, 0.7)' |
| | ], |
| | borderColor: [ |
| | 'rgba(239, 68, 68, 1)', |
| | 'rgba(245, 158, 11, 1)', |
| | 'rgba(59, 130, 246, 1)', |
| | 'rgba(16, 185, 129, 1)' |
| | ], |
| | borderWidth: 1 |
| | }] |
| | }, |
| | options: { |
| | responsive: true, |
| | maintainAspectRatio: false, |
| | scales: { |
| | r: { |
| | grid: { |
| | color: 'rgba(255, 255, 255, 0.1)' |
| | }, |
| | ticks: { |
| | display: false |
| | } |
| | } |
| | }, |
| | plugins: { |
| | legend: { |
| | position: 'right', |
| | labels: { |
| | color: '#e2e8f0' |
| | } |
| | } |
| | } |
| | } |
| | }); |
| | }); |
| | </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=cloudmatrix2025/matrix-control-panel" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
