|
|
<!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> |
