| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>BetMonitor - Dashboard Casa de Apostas</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"> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| :root { |
| --primary: #1a365d; |
| --secondary: #2c5282; |
| --accent: #e53e3e; |
| --success: #38a169; |
| --warning: #dd6b20; |
| --dark: #1a202c; |
| --light: #f7fafc; |
| } |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #edf2f7; |
| } |
| |
| .sidebar { |
| transition: all 0.3s ease; |
| } |
| |
| .card { |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| } |
| |
| .card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
| } |
| |
| .dashboard-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: 1.5rem; |
| } |
| |
| .notification-badge { |
| position: absolute; |
| top: -5px; |
| right: -5px; |
| } |
| |
| .bet-table tr:nth-child(even) { |
| background-color: #f8fafc; |
| } |
| |
| .bet-table tr:hover { |
| background-color: #edf2f7; |
| } |
| |
| .status-badge { |
| padding: 0.25rem 0.75rem; |
| border-radius: 9999px; |
| font-size: 0.75rem; |
| font-weight: 600; |
| } |
| |
| .status-win { |
| background-color: rgba(56, 161, 105, 0.1); |
| color: #38a169; |
| } |
| |
| .status-lose { |
| background-color: rgba(229, 62, 62, 0.1); |
| color: #e53e3e; |
| } |
| |
| .status-pending { |
| background-color: rgba(221, 107, 32, 0.1); |
| color: #dd6b20; |
| } |
| |
| .role-admin { |
| background-color: rgba(229, 62, 62, 0.1); |
| color: #e53e3e; |
| } |
| |
| .role-banquista { |
| background-color: rgba(66, 153, 225, 0.1); |
| color: #4299e1; |
| } |
| |
| .role-operador { |
| background-color: rgba(101, 163, 13, 0.1); |
| color: #65a30d; |
| } |
| |
| .role-financeiro { |
| background-color: rgba(159, 122, 234, 0.1); |
| color: #9f7aea; |
| } |
| </style> |
| </head> |
| <body class="flex h-screen bg-gray-100"> |
| |
| <div class="sidebar bg-white w-64 min-h-screen shadow-lg"> |
| <div class="p-5 border-b"> |
| <div class="flex items-center"> |
| <div class="bg-red-600 text-white w-10 h-10 rounded-full flex items-center justify-center font-bold text-xl">BM</div> |
| <div class="ml-3"> |
| <h1 class="text-xl font-bold text-gray-800">BetMonitor</h1> |
| <p class="text-xs text-gray-500">Dashboard Casa de Apostas</p> |
| </div> |
| </div> |
| </div> |
| |
| <nav class="mt-5"> |
| <a href="#" class="flex items-center px-5 py-3 text-white bg-red-600"> |
| <i class="fas fa-chart-line mr-3"></i> |
| Dashboard |
| </a> |
| <a href="#" class="flex items-center px-5 py-3 text-gray-600 hover:bg-gray-100"> |
| <i class="fas fa-users mr-3"></i> |
| Clientes |
| </a> |
| <a href="#" class="flex items-center px-5 py-3 text-gray-600 hover:bg-gray-100"> |
| <i class="fas fa-ticket-alt mr-3"></i> |
| Apostas |
| </a> |
| <a href="#" class="flex items-center px-5 py-3 text-gray-600 hover:bg-gray-100"> |
| <i class="fas fa-money-bill-wave mr-3"></i> |
| Transações |
| </a> |
| <a href="#" class="flex items-center px-5 py-3 text-gray-600 hover:bg-gray-100"> |
| <i class="fas fa-chart-bar mr-3"></i> |
| Relatórios |
| </a> |
| <a href="#" class="flex items-center px-5 py-3 text-gray-600 hover:bg-gray-100"> |
| <i class="fas fa-cog mr-3"></i> |
| Configurações |
| </a> |
| </nav> |
| |
| <div class="absolute bottom-0 w-64 p-5 border-t"> |
| <div class="flex items-center"> |
| <img src="https://ui-avatars.com/api/?name=Admin+User&background=ef4444&color=fff" class="w-10 h-10 rounded-full"> |
| <div class="ml-3"> |
| <p class="text-sm font-medium text-gray-800">Admin User</p> |
| <p class="text-xs text-gray-500">Administrador</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 overflow-auto"> |
| |
| <header class="bg-white shadow"> |
| <div class="flex justify-between items-center p-4"> |
| <div class="flex items-center"> |
| <button class="text-gray-500 mr-4"> |
| <i class="fas fa-bars"></i> |
| </button> |
| <div class="relative"> |
| <input type="text" placeholder="Pesquisar..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <div class="relative"> |
| <button class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-bell"></i> |
| </button> |
| <span class="notification-badge bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span> |
| </div> |
| |
| <div class="relative"> |
| <button class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-comment"></i> |
| </button> |
| <span class="notification-badge bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">5</span> |
| </div> |
| |
| <div class="flex items-center"> |
| <img src="https://ui-avatars.com/api/?name=Admin+User&background=ef4444&color=fff" class="w-8 h-8 rounded-full"> |
| <span class="ml-2 text-sm font-medium">Admin User</span> |
| </div> |
| </div> |
| </div> |
| </header> |
| |
| |
| <main class="p-6"> |
| |
| <div class="mb-6"> |
| <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1> |
| <p class="text-gray-600">Visão geral das operações da casa de apostas</p> |
| </div> |
| |
| |
| <div class="dashboard-grid mb-6"> |
| <div class="card bg-white rounded-xl shadow"> |
| <div class="p-5"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-gray-500">Apostas Hoje</p> |
| <h3 class="text-2xl font-bold mt-1">1,245</h3> |
| </div> |
| <div class="bg-red-100 p-3 rounded-full"> |
| <i class="fas fa-ticket-alt text-red-600 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-3"> |
| <p class="text-green-500 text-sm"><i class="fas fa-arrow-up"></i> 12.3% desde ontem</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="card bg-white rounded-xl shadow"> |
| <div class="p-5"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-gray-500">Lucro Total</p> |
| <h3 class="text-2xl font-bold mt-1">R$ 84,250</h3> |
| </div> |
| <div class="bg-green-100 p-3 rounded-full"> |
| <i class="fas fa-money-bill-wave text-green-600 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-3"> |
| <p class="text-green-500 text-sm"><i class="fas fa-arrow-up"></i> 8.5% desde ontem</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="card bg-white rounded-xl shadow"> |
| <div class="p-5"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-gray-500">Novos Clientes</p> |
| <h3 class="text-2xl font-bold mt-1">42</h3> |
| </div> |
| <div class="bg-blue-100 p-3 rounded-full"> |
| <i class="fas fa-user-plus text-blue-600 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-3"> |
| <p class="text-red-500 text-sm"><i class="fas fa-arrow-down"></i> 3.2% desde ontem</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="card bg-white rounded-xl shadow"> |
| <div class="p-5"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-gray-500">Taxa de Retenção</p> |
| <h3 class="text-2xl font-bold mt-1">78.3%</h3> |
| </div> |
| <div class="bg-purple-100 p-3 rounded-full"> |
| <i class="fas fa-chart-pie text-purple-600 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-3"> |
| <p class="text-green-500 text-sm"><i class="fas fa-arrow-up"></i> 2.1% desde ontem</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
| <div class="card bg-white rounded-xl shadow"> |
| <div class="p-5"> |
| <h3 class="font-bold text-lg mb-4">Lucro por Esporte</h3> |
| <div class="h-80"> |
| <canvas id="sportChart"></canvas> |
| </div> |
| </div> |
| </div> |
| |
| <div class="card bg-white rounded-xl shadow"> |
| <div class="p-5"> |
| <h3 class="font-bold text-lg mb-4">Apostas por Hora</h3> |
| <div class="h-80"> |
| <canvas id="hourlyChart"></canvas> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
| |
| <div class="card bg-white rounded-xl shadow lg:col-span-2"> |
| <div class="p-5"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-bold text-lg">Apostas Recentes</h3> |
| <a href="#" class="text-red-600 text-sm">Ver todas</a> |
| </div> |
| |
| <div class="overflow-x-auto"> |
| <table class="w-full bet-table"> |
| <thead> |
| <tr class="text-left text-gray-500 text-sm border-b"> |
| <th class="pb-2">Cliente</th> |
| <th class="pb-2">Evento</th> |
| <th class="pb-2">Valor</th> |
| <th class="pb-2">Retorno</th> |
| <th class="pb-2">Status</th> |
| </tr> |
| </thead> |
| <tbody class="text-sm"> |
| <tr class="border-b"> |
| <td class="py-3">João Silva</td> |
| <td class="py-3">Flamengo x Palmeiras</td> |
| <td class="py-3">R$ 150,00</td> |
| <td class="py-3">R$ 320,00</td> |
| <td class="py-3"><span class="status-win status-badge">Vitória</span></td> |
| </tr> |
| <tr class="border-b"> |
| <td class="py-3">Maria Oliveira</td> |
| <td class="py-3">Brasil x Argentina</td> |
| <td class="py-3">R$ 250,00</td> |
| <td class="py-3">R$ 0,00</td> |
| <td class="py-3"><span class="status-lose status-badge">Derrota</span></td> |
| </tr> |
| <tr class="border-b"> |
| <td class="py-3">Carlos Souza</td> |
| <td class="py-3">Corinthians x São Paulo</td> |
| <td class="py-3">R$ 80,00</td> |
| <td class="py-3">R$ 180,00</td> |
| <td class="py-3"><span class="status-win status-badge">Vitória</span></td> |
| </tr> |
| <tr class="border-b"> |
| <td class="py-3">Ana Costa</td> |
| <td class="py-3">UFC - Silva vs Jones</td> |
| <td class="py-3">R$ 200,00</td> |
| <td class="py-3">R$ 450,00</td> |
| <td class="py-3"><span class="status-win status-badge">Vitória</span></td> |
| </tr> |
| <tr> |
| <td class="py-3">Pedro Alves</td> |
| <td class="py-3">NBA Finals</td> |
| <td class="py-3">R$ 300,00</td> |
| <td class="py-3">-</td> |
| <td class="py-3"><span class="status-pending status-badge">Pendente</span></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="card bg-white rounded-xl shadow"> |
| <div class="p-5"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-bold text-lg">Atividade da Equipe</h3> |
| <a href="#" class="text-red-600 text-sm">Ver todas</a> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="relative"> |
| <img src="https://ui-avatars.com/api/?name=Banquista+1&background=4299e1&color=fff" class="w-10 h-10 rounded-full"> |
| <span class="absolute bottom-0 right-0 bg-green-500 border-2 border-white rounded-full w-3 h-3"></span> |
| </div> |
| <div class="ml-3"> |
| <p class="font-medium">Banquista 1</p> |
| <p class="text-sm text-gray-600">Registrou 12 novas apostas</p> |
| <p class="text-xs text-gray-400">Há 15 minutos</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="relative"> |
| <img src="https://ui-avatars.com/api/?name=Financeiro&background=9f7aea&color=fff" class="w-10 h-10 rounded-full"> |
| <span class="absolute bottom-0 right-0 bg-green-500 border-2 border-white rounded-full w-3 h-3"></span> |
| </div> |
| <div class="ml-3"> |
| <p class="font-medium">Financeiro</p> |
| <p class="text-sm text-gray-600">Processou 5 saques</p> |
| <p class="text-xs text-gray-400">Há 30 minutos</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="relative"> |
| <img src="https://ui-avatars.com/api/?name=Operador&background=65a30d&color=fff" class="w-10 h-10 rounded-full"> |
| <span class="absolute bottom-0 right-0 bg-green-500 border-2 border-white rounded-full w-3 h-3"></span> |
| </div> |
| <div class="ml-3"> |
| <p class="font-medium">Operador</p> |
| <p class="text-sm text-gray-600">Atualizou odds de 3 eventos</p> |
| <p class="text-xs text-gray-400">Há 1 hora</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="relative"> |
| <img src="https://ui-avatars.com/api/?name=Banquista+2&background=4299e1&color=fff" class="w-10 h-10 rounded-full"> |
| <span class="absolute bottom-0 right-0 bg-green-500 border-2 border-white rounded-full w-3 h-3"></span> |
| </div> |
| <div class="ml-3"> |
| <p class="font-medium">Banquista 2</p> |
| <p class="text-sm text-gray-600">Registrou novo cliente</p> |
| <p class="text-xs text-gray-400">Há 2 horas</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6"> |
| <h4 class="font-bold mb-3">Equipe Online</h4> |
| <div class="flex flex-wrap gap-2"> |
| <span class="role-admin status-badge">Administrador</span> |
| <span class="role-banquista status-badge">Banquista 1</span> |
| <span class="role-banquista status-badge">Banquista 2</span> |
| <span class="role-operador status-badge">Operador</span> |
| <span class="role-financeiro status-badge">Financeiro</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const sportCtx = document.getElementById('sportChart').getContext('2d'); |
| const sportChart = new Chart(sportCtx, { |
| type: 'doughnut', |
| data: { |
| labels: ['Futebol', 'Basquete', 'Tênis', 'Vôlei', 'eSports', 'Outros'], |
| datasets: [{ |
| data: [35, 20, 15, 10, 12, 8], |
| backgroundColor: [ |
| '#e53e3e', |
| '#3182ce', |
| '#38a169', |
| '#d69e2e', |
| '#9f7aea', |
| '#a0aec0' |
| ], |
| borderWidth: 0 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'right', |
| } |
| } |
| } |
| }); |
| |
| |
| const hourlyCtx = document.getElementById('hourlyChart').getContext('2d'); |
| const hourlyChart = new Chart(hourlyCtx, { |
| type: 'line', |
| data: { |
| labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'], |
| datasets: [{ |
| label: 'Número de Apostas', |
| data: [120, 80, 150, 220, 300, 450], |
| backgroundColor: 'rgba(66, 153, 225, 0.1)', |
| borderColor: '#4299e1', |
| borderWidth: 2, |
| tension: 0.3, |
| fill: true |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| drawBorder: false |
| } |
| }, |
| 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=Yurikks/teste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
