|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Performance Dashboard | BEATDAGAME</title> |
|
|
<meta name="description" content="Real-time performance dashboard for BEATDAGAME showing key metrics, user growth, revenue sources, and deal performance analytics."> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<div class="flex flex-wrap gap-4 mb-8"> |
|
|
<a href="/index.html" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-all shadow hover:shadow-md active:shadow-sm border border-gray-300"> |
|
|
← Back to Home |
|
|
</a> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
|
|
<h1 class="text-3xl font-bold text-gray-800 mb-2">Performance Dashboard</h1> |
|
|
<p class="text-gray-600">Key metrics and analytics for BeatDaGame</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
|
|
<div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl shadow-md p-6 text-white"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-sm font-medium">Total Users</p> |
|
|
<h2 class="text-3xl font-bold">1,248</h2> |
|
|
</div> |
|
|
<i data-feather="users" class="w-8 h-8"></i> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-sm font-medium">↑ 12% from last month</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-r from-purple-500 to-purple-600 rounded-xl shadow-md p-6 text-white"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-sm font-medium">Active Deals</p> |
|
|
<h2 class="text-3xl font-bold">24</h2> |
|
|
</div> |
|
|
<i data-feather="shopping-bag" class="w-8 h-8"></i> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-sm font-medium">↑ 3 new deals this month</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-r from-green-500 to-green-600 rounded-xl shadow-md p-6 text-white"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-sm font-medium">Monthly Revenue</p> |
|
|
<h2 class="text-3xl font-bold">€8,742</h2> |
|
|
</div> |
|
|
<i data-feather="dollar-sign" class="w-8 h-8"></i> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-sm font-medium">↑ 8% from last month</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">User Growth</h3> |
|
|
<canvas id="userGrowthChart" height="250"></canvas> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Revenue Sources</h3> |
|
|
<canvas id="revenueChart" height="250"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Deal Performance</h3> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Deal</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Signups</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Conversion</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Revenue</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">PokerStars Rakeback</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">342</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12.4%</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€2,843</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">GGPoker Welcome</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">278</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9.7%</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€1,956</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">PartyPoker Bonus</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">193</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8.2%</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€1,432</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">888poker Freeroll</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">167</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7.5%</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€987</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 gap-6 mb-8"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Traffic Sources</h3> |
|
|
<canvas id="trafficChart" height="300"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const userCtx = document.getElementById('userGrowthChart').getContext('2d'); |
|
|
const userGrowthChart = new Chart(userCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], |
|
|
datasets: [{ |
|
|
label: 'Total Users', |
|
|
data: [650, 720, 820, 890, 950, 1080, 1248], |
|
|
borderColor: '#3b82f6', |
|
|
backgroundColor: 'rgba(59, 130, 246, 0.05)', |
|
|
borderWidth: 2, |
|
|
fill: true, |
|
|
tension: 0.3 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: false, |
|
|
min: 500 |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const revenueCtx = document.getElementById('revenueChart').getContext('2d'); |
|
|
const revenueChart = new Chart(revenueCtx, { |
|
|
type: 'doughnut', |
|
|
data: { |
|
|
labels: ['PokerStars', 'GGPoker', 'PartyPoker', '888poker', 'Others'], |
|
|
datasets: [{ |
|
|
data: [2843, 1956, 1432, 987, 1524], |
|
|
backgroundColor: [ |
|
|
'#3b82f6', |
|
|
'#6366f1', |
|
|
'#8b5cf6', |
|
|
'#ec4899', |
|
|
'#f59e0b' |
|
|
], |
|
|
borderWidth: 0 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'right' |
|
|
} |
|
|
}, |
|
|
cutout: '70%' |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const trafficCtx = document.getElementById('trafficChart').getContext('2d'); |
|
|
const trafficChart = new Chart(trafficCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Direct', 'Email', 'Social', 'Referral', 'SEO'], |
|
|
datasets: [{ |
|
|
label: 'Traffic Sources', |
|
|
data: [1240, 980, 750, 420, 680], |
|
|
backgroundColor: [ |
|
|
'#3b82f6', |
|
|
'#6366f1', |
|
|
'#8b5cf6', |
|
|
'#ec4899', |
|
|
'#f59e0b' |
|
|
], |
|
|
borderWidth: 0, |
|
|
borderRadius: 4 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
