|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>User Analytics Dashboard</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; |
|
|
border-radius: 10px; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 10px; |
|
|
} |
|
|
.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-50"> |
|
|
<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-700 text-white"> |
|
|
<div class="flex items-center justify-center h-16 px-4 border-b border-indigo-600"> |
|
|
<h1 class="text-xl font-bold">AnalyticsPro</h1> |
|
|
</div> |
|
|
<div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> |
|
|
<nav class="flex-1 space-y-2"> |
|
|
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-md bg-indigo-800 text-white"> |
|
|
<i class="fas fa-chart-pie mr-3"></i> |
|
|
Dashboard |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-600 hover:text-white"> |
|
|
<i class="fas fa-users mr-3"></i> |
|
|
Users |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-600 hover:text-white"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
Settings |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-600 hover:text-white"> |
|
|
<i class="fas fa-bell mr-3"></i> |
|
|
Notifications |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-600 hover:text-white"> |
|
|
<i class="fas fa-file-alt mr-3"></i> |
|
|
Reports |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
<div class="p-4 border-t border-indigo-600"> |
|
|
<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 text-white">Sarah Johnson</p> |
|
|
<p class="text-xs font-medium text-indigo-200">Admin</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col flex-1 overflow-hidden"> |
|
|
|
|
|
<div class="flex items-center justify-between h-16 px-6 bg-white border-b border-gray-200"> |
|
|
<div class="flex items-center"> |
|
|
<button class="md:hidden text-gray-500 focus:outline-none"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<h2 class="ml-4 text-lg font-semibold text-gray-800">User Analytics Dashboard</h2> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="p-1 text-gray-500 rounded-full hover:bg-gray-100 focus:outline-none"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
<button class="p-1 text-gray-500 rounded-full hover:bg-gray-100 focus:outline-none"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<button class="flex items-center text-gray-500 focus:outline-none" id="user-menu"> |
|
|
<span class="sr-only">Open user menu</span> |
|
|
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile"> |
|
|
</button> |
|
|
<div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10" id="user-dropdown"> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-auto p-6 custom-scrollbar"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-4 mb-6"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between"> |
|
|
<h3 class="text-lg font-medium text-gray-800 mb-4 md:mb-0">User Analytics</h3> |
|
|
<div class="flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-3"> |
|
|
<div class="relative"> |
|
|
<select class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-2 px-4 pr-8 rounded-md leading-tight focus:outline-none focus:bg-white focus:border-indigo-500"> |
|
|
<option>All Users</option> |
|
|
<option>Active Users</option> |
|
|
<option>Inactive Users</option> |
|
|
<option>New Users</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 class="relative"> |
|
|
<input type="text" placeholder="Search users..." class="block w-full bg-gray-100 border border-gray-200 text-gray-700 py-2 px-4 pr-8 rounded-md leading-tight focus:outline-none focus:bg-white focus:border-indigo-500"> |
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> |
|
|
<i class="fas fa-search"></i> |
|
|
</div> |
|
|
</div> |
|
|
</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-lg shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-600">Total Users</p> |
|
|
<p class="text-2xl font-bold text-gray-800">1,248</p> |
|
|
<p class="text-xs font-medium text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i>12.5% from last month</p> |
|
|
</div> |
|
|
<div class="bg-indigo-100 p-3 rounded-full"> |
|
|
<i class="fas fa-users text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-600">Active Users</p> |
|
|
<p class="text-2xl font-bold text-gray-800">856</p> |
|
|
<p class="text-xs font-medium text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i>8.3% from last month</p> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-full"> |
|
|
<i class="fas fa-check-circle text-green-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-600">Avg. Session</p> |
|
|
<p class="text-2xl font-bold text-gray-800">4.2 min</p> |
|
|
<p class="text-xs font-medium text-red-500 mt-1"><i class="fas fa-arrow-down mr-1"></i>1.2% from last month</p> |
|
|
</div> |
|
|
<div class="bg-blue-100 p-3 rounded-full"> |
|
|
<i class="fas fa-clock text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-600">Bounce Rate</p> |
|
|
<p class="text-2xl font-bold text-gray-800">32.7%</p> |
|
|
<p class="text-xs font-medium text-green-500 mt-1"><i class="fas fa-arrow-down mr-1"></i>5.1% from last month</p> |
|
|
</div> |
|
|
<div class="bg-purple-100 p-3 rounded-full"> |
|
|
<i class="fas fa-chart-line text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6 lg:col-span-2"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h4 class="text-md font-medium text-gray-800">User Growth</h4> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<button class="text-xs px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full">Monthly</button> |
|
|
<button class="text-xs px-3 py-1 bg-gray-100 text-gray-700 rounded-full">Weekly</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-64"> |
|
|
<canvas id="userGrowthChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6"> |
|
|
<h4 class="text-md font-medium text-gray-800 mb-4">Activity Distribution</h4> |
|
|
<div class="h-64"> |
|
|
<canvas id="activityDistributionChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6"> |
|
|
<h4 class="text-md font-medium text-gray-800 mb-4">User Locations</h4> |
|
|
<div class="h-64"> |
|
|
<canvas id="userLocationsChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6"> |
|
|
<h4 class="text-md font-medium text-gray-800 mb-4">Device Usage</h4> |
|
|
<div class="h-64"> |
|
|
<canvas id="deviceUsageChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6"> |
|
|
<h4 class="text-md font-medium text-gray-800 mb-4">Top Active Users</h4> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center"> |
|
|
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User"> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-gray-800">Michael Johnson</p> |
|
|
<div class="flex items-center mt-1"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5"> |
|
|
<div class="bg-indigo-600 h-1.5 rounded-full" style="width: 90%"></div> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500 ml-2">90%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User"> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-gray-800">Sarah Williams</p> |
|
|
<div class="flex items-center mt-1"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5"> |
|
|
<div class="bg-indigo-600 h-1.5 rounded-full" style="width: 85%"></div> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500 ml-2">85%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User"> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-gray-800">David Miller</p> |
|
|
<div class="flex items-center mt-1"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5"> |
|
|
<div class="bg-indigo-600 h-1.5 rounded-full" style="width: 78%"></div> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500 ml-2">78%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User"> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-gray-800">Emily Davis</p> |
|
|
<div class="flex items-center mt-1"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5"> |
|
|
<div class="bg-indigo-600 h-1.5 rounded-full" style="width: 72%"></div> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500 ml-2">72%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/91.jpg" alt="User"> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-gray-800">Robert Wilson</p> |
|
|
<div class="flex items-center mt-1"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5"> |
|
|
<div class="bg-indigo-600 h-1.5 rounded-full" style="width: 65%"></div> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500 ml-2">65%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-200"> |
|
|
<h4 class="text-md font-medium text-gray-800">Recent User Activity</h4> |
|
|
</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">User</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Activity</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</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">Michael Johnson</div> |
|
|
<div class="text-sm text-gray-500">Joined 3 months ago</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">michael.johnson@example.com</div> |
|
|
</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">Active</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 hours ago</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a> |
|
|
</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">Sarah Williams</div> |
|
|
<div class="text-sm text-gray-500">Joined 5 months ago</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">sarah.williams@example.com</div> |
|
|
</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">Active</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 hours ago</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a> |
|
|
</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">David Miller</div> |
|
|
<div class="text-sm text-gray-500">Joined 1 month ago</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">david.miller@example.com</div> |
|
|
</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">Active</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 day ago</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a> |
|
|
</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">Emily Davis</div> |
|
|
<div class="text-sm text-gray-500">Joined 2 weeks ago</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">emily.davis@example.com</div> |
|
|
</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">Pending</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 days ago</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a> |
|
|
</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/91.jpg" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Robert Wilson</div> |
|
|
<div class="text-sm text-gray-500">Joined 8 months ago</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">robert.wilson@example.com</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 week ago</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200"> |
|
|
<div class="flex-1 flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-700">Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">24</span> users</span> |
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Previous</span> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</a> |
|
|
<a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Next</span> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('user-menu').addEventListener('click', function() { |
|
|
document.getElementById('user-dropdown').classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('click', function(e) { |
|
|
if (!e.target.matches('#user-menu') && !e.target.closest('#user-menu')) { |
|
|
document.getElementById('user-dropdown').classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const userGrowthCtx = document.getElementById('userGrowthChart').getContext('2d'); |
|
|
const userGrowthChart = new Chart(userGrowthCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], |
|
|
datasets: [{ |
|
|
label: 'New Users', |
|
|
data: [120, 190, 170, 220, 260, 300, 340], |
|
|
backgroundColor: 'rgba(99, 102, 241, 0.2)', |
|
|
borderColor: 'rgba(99, 102, 241, 1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.4, |
|
|
fill: true |
|
|
}, { |
|
|
label: 'Active Users', |
|
|
data: [200, 230, 250, 280, 300, 350, 380], |
|
|
backgroundColor: 'rgba(79, 70, 229, 0.2)', |
|
|
borderColor: 'rgba(79, 70, 229, 1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.4, |
|
|
fill: true |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const activityDistributionCtx = document.getElementById('activityDistributionChart').getContext('2d'); |
|
|
const activityDistributionChart = new Chart(activityDistributionCtx, { |
|
|
type: 'doughnut', |
|
|
data: { |
|
|
labels: ['Logins', 'Page Views', 'Purchases', 'Downloads', 'Signups'], |
|
|
datasets: [{ |
|
|
data: [35, 25, 20, 15, 5], |
|
|
backgroundColor: [ |
|
|
'rgba(99, 102, 241, 0.8)', |
|
|
'rgba(79, 70, 229, 0.8)', |
|
|
'rgba(67, 56, 202, 0.8)', |
|
|
'rgba(55, 48, 163, 0.8)', |
|
|
'rgba(49, 46, 129, 0.8)' |
|
|
], |
|
|
borderColor: [ |
|
|
'rgba(255, 255, 255, 1)', |
|
|
'rgba(255, 255, 255, 1)', |
|
|
'rgba(255, 255, 255, 1)', |
|
|
'rgba(255, 255, 255, 1)', |
|
|
'rgba(255, 255, 255, 1)' |
|
|
], |
|
|
borderWidth: 1 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'right', |
|
|
} |
|
|
}, |
|
|
cutout: '70%' |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const userLocationsCtx = document.getElementById('userLocationsChart').getContext('2d'); |
|
|
const userLocationsChart = new Chart(userLocationsCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['USA', 'UK', 'Canada', 'Australia', 'Germany', 'France'], |
|
|
datasets: [{ |
|
|
label: 'Users by Country', |
|
|
data: [420, 380, 250, 180, 120, 90], |
|
|
backgroundColor: 'rgba(99, 102, 241, 0.7)', |
|
|
borderColor: 'rgba(99, 102, 241, 1)', |
|
|
borderWidth: 1 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const deviceUsageCtx = document.getElementById('deviceUsageChart').getContext('2d'); |
|
|
const deviceUsageChart = new Chart(deviceUsageCtx, { |
|
|
type: 'polarArea', |
|
|
data: { |
|
|
labels: ['Desktop', 'Mobile', 'Tablet', 'Other'], |
|
|
datasets: [{ |
|
|
data: [65, 25, 8, 2], |
|
|
backgroundColor: [ |
|
|
'rgba(99, 102, 241, 0.7)', |
|
|
'rgba(79, 70, 229, 0.7)', |
|
|
'rgba(67, 56, 202, 0.7)', |
|
|
'rgba(55, 48, 163, 0.7)' |
|
|
], |
|
|
borderColor: [ |
|
|
'rgba(255, 255, 255, 1)', |
|
|
'rgba(255, 255, 255, 1)', |
|
|
'rgba(255, 255, 255, 1)', |
|
|
'rgba(255, 255, 255, 1)' |
|
|
], |
|
|
borderWidth: 1 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'right', |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</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=nmtalhp/humm" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
|
</html> |
