<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Influencer Analytics Hub</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
.sidebar {
transition: all 0.3s ease;
}
.sidebar.collapsed {
width: 70px;
}
.sidebar.collapsed .sidebar-text {
display: none;
}
.sidebar.collapsed .sidebar-icon {
margin-right: 0;
}
.main-content {
transition: all 0.3s ease;
}
.dark {
background-color: #1a1a2e;
color: #e2e8f0;
}
.dark .card {
background-color: #16213e;
border-color: #1e293b;
}
.dark .sidebar {
background-color: #0f172a;
}
.dark .header {
background-color: #0f172a;
border-color: #1e293b;
}
.dark .table {
background-color: #16213e;
}
.dark .table th, .dark .table td {
border-color: #1e293b;
}
.dark .input, .dark .select {
background-color: #1e293b;
border-color: #334155;
color: #e2e8f0;
}
.avatar-gradient {
background: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%);
}
.chart-container {
height: 300px;
}
@media (max-width: 768px) {
.sidebar {
position: fixed;
left: -250px;
z-index: 50;
}
.sidebar.open {
left: 0;
}
.main-content {
margin-left: 0;
}
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-900">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-white dark:bg-gray-800 w-64 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 flex flex-col">
<div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full avatar-gradient flex items-center justify-center text-white font-bold">
IA
</div>
<span class="sidebar-text ml-3 text-xl font-semibold dark:text-white">Influencer Analytics</span>
</div>
<button id="sidebarToggle" class="text-gray-500 dark:text-gray-400">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="flex-1 overflow-y-auto p-4">
<nav>
<div class="space-y-1">
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300">
<i class="fas fa-tachometer-alt sidebar-icon mr-3"></i>
<span class="sidebar-text">Dashboard</span>
</a>
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
<i class="fas fa-user-astronaut sidebar-icon mr-3"></i>
<span class="sidebar-text">Avatars</span>
</a>
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
<i class="fas fa-box-open sidebar-icon mr-3"></i>
<span class="sidebar-text">Products</span>
</a>
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
<i class="fas fa-file-code sidebar-icon mr-3"></i>
<span class="sidebar-text">Digital Products</span>
</a>
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
<i class="fas fa-video sidebar-icon mr-3"></i>
<span class="sidebar-text">Content</span>
</a>
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
<i class="fas fa-users sidebar-icon mr-3"></i>
<span class="sidebar-text">Competitors</span>
</a>
<div class="pt-4">
<p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider sidebar-text">AI Labs</p>
<div class="mt-1 space-y-1">
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
<i class="fas fa-robot sidebar-icon mr-3"></i>
<span class="sidebar-text">AI Assistant</span>
</a>
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
<i class="fas fa-lightbulb sidebar-icon mr-3"></i>
<span class="sidebar-text">Ideas</span>
</a>
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
<i class="fas fa-scroll sidebar-icon mr-3"></i>
<span class="sidebar-text">Scripts</span>
</a>
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
<i class="fas fa-key sidebar-icon mr-3"></i>
<span class="sidebar-text">Prompts</span>
</a>
</div>
</div>
</div>
</nav>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile">
<div class="sidebar-text ml-3">
<p class="text-sm font-medium text-gray-900 dark:text-white">Sarah Johnson</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Premium Plan</p>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class="main-content flex-1 overflow-auto">
<!-- Header -->
<header class="header bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
<div class="px-4 py-3 flex items-center justify-between">
<div class="flex items-center">
<button id="mobileSidebarToggle" class="md:hidden text-gray-500 dark:text-gray-400 mr-2">
<i class="fas fa-bars"></i>
</button>
<h1 class="text-xl font-semibold text-gray-900 dark:text-white">Dashboard</h1>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<select class="input appearance-none bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md py-2 pl-3 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
<option>All Avatars</option>
<option>Tech Guru</option>
<option>Fashion Icon</option>
<option>Fitness Coach</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="fas fa-chevron-down text-gray-400"></i>
</div>
</div>
<div class="relative">
<select class="input appearance-none bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md py-2 pl-3 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
<option>All Products</option>
<option>Smart Watch</option>
<option>Fitness Band</option>
<option>Wireless Earbuds</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="fas fa-chevron-down text-gray-400"></i>
</div>
</div>
<div class="relative">
<input type="text" placeholder="Search..." class="input bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md py-2 pl-10 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<i class="fas fa-search text-gray-400"></i>
</div>
</div>
<button id="themeToggle" class="text-gray-500 dark:text-gray-400">
<i class="fas fa-moon dark:hidden"></i>
<i class="fas fa-sun hidden dark:block"></i>
</button>
<div class="relative">
<button class="text-gray-500 dark:text-gray-400 relative">
<i class="fas fa-bell"></i>
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
</button>
</div>
</div>
</div>
</header>
<!-- Dashboard content -->
<main class="p-6">
<!-- Date range selector -->
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Analytics Overview</h2>
<div class="flex items-center space-x-2">
<button class="px-3 py-1 text-sm bg-purple-600 hover:bg-purple-700 text-white rounded-md">
Today
</button>
<button class="px-3 py-1 text-sm bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white rounded-md">
Week
</button>
<button class="px-3 py-1 text-sm bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white rounded-md">
Month
</button>
<button class="px-3 py-1 text-sm bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white rounded-md">
Year
</button>
<div class="relative">
<input type="text" class="input bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md py-1 pl-3 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Custom range">
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="fas fa-calendar text-gray-400"></i>
</div>
</div>
</div>
</div>
<!-- KPI Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Revenue</p>
<p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">$24,780</p>
<p class="text-sm text-green-500 mt-2 flex items-center">
<i class="fas fa-arrow-up mr-1"></i> 12.5% from last week
</p>
</div>
<div class="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-300">
<i class="fas fa-dollar-sign text-xl"></i>
</div>
</div>
</div>
<div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Profit</p>
<p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">$14,220</p>
<p class="text-sm text-green-500 mt-2 flex items-center">
<i class="fas fa-arrow-up mr-1"></i> 8.3% from last week
</p>
</div>
<div class="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center text-green-600 dark:text-green-300">
<i class="fas fa-chart-line text-xl"></i>
</div>
</div>
</div>
<div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Units Sold</p>
<p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">1,248</p>
<p class="text-sm text-red-500 mt-2 flex items-center">
<i class="fas fa-arrow-down mr-1"></i> 2.1% from last week
</p>
</div>
<div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-300">
<i class="fas fa-shopping-bag text-xl"></i>
</div>
</div>
</div>
<div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Profit Margin</p>
<p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">57.3%</p>
<p class="text-sm text-green-500 mt-2 flex items-center">
<i class="fas fa-arrow-up mr-1"></i> 3.7% from last week
</p>
</div>
<div class="w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center text-yellow-600 dark:text-yellow-300">
<i class="fas fa-percent text-xl"></i>
</div>
</div>
</div>
</div>
<!-- Charts and Cards -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<!-- Sales Performance Chart -->
<div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700 lg:col-span-2">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Sales Performance</h3>
<div class="flex items-center space-x-2">
<button class="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white rounded">
Revenue
</button>
<button class="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white rounded">
Units
</button>
<button class="px-2 py-1 text-xs bg-purple-600 hover:bg-purple-700 text-white rounded">
Profit
</button>
</div>
</div>
<div class="chart-container">
<canvas id="salesChart"></canvas>
</div>
</div>
<!-- Todo List Card -->
<div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Tasks</h3>
<button class="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="space-y-3">
<div class="flex items-start">
<input type="checkbox" class="mt-1 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500">
<div class="ml-3">
<p class="text-sm font-medium text-gray-900 dark:text-white">Review competitor videos</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Due tomorrow</p>
</div>
</div>
<div class="flex items-start">
<input type="checkbox" class="mt-1 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500">
<div class="ml-3">
<p class="text-sm font-medium text-gray-900 dark:text-white">Upload new product video</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Due in 2 days</p>
</div>
</div>
<div class="flex items-start">
<input type="checkbox" class="mt-1 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500" checked>
<div class="ml-3">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 line-through">Analyze last week's metrics</p>
<p class="text-xs text-gray-400 dark:text-gray-500">Completed</p>
</div>
</div>
<div class="flex items-start">
<input type="checkbox" class="mt-1 h-4 w-4 text-purple-600 rounded border-gray-300 focus:ring-purple-500">
<div class="ml-3">
<p class="text-sm font-medium text-gray-900 dark:text-white">Create script for new video</p>
<p class="text-xs text-gray-500 dark:text-gray-400">No due date</p>
</div>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<button class="w-full flex items-center justify-center px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md text-sm font-medium">
<i class="fas fa-robot mr-2"></i> Generate AI Tasks
</button>
</div>
</div>
</div>
<!-- Additional Cards -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<!-- Ideas Lab Card -->
<div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Ideas Lab</h3>
<div class="flex items-center space-x-2">
<button class="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300">
<i class="fas fa-plus"></i>
</button>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
</div>
<div class="space-y-4">
<div class="p-3 bg-purple-50 dark:bg-purple-900/20 rounded-md">
<p class="text-sm font-medium text-gray-900 dark:text-white">"Unboxing" style video for new product</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Added 2 days ago</p>
</div>
<div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-md">
<p class="text-sm font-medium text-gray-900 dark:text-white">Collaboration with @TechReviewer</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Added 1 week ago</p>
</div>
<div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-md">
<p class="text-sm font-medium text-gray-900 dark:text-white">"Day in the life" content series</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Added 2 weeks ago</p>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<button class="w-full flex items-center justify-center px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md text-sm font-medium">
<i class="fas fa-lightbulb mr-2"></i> Generate AI Ideas
</button>
</div>
</div>
<!-- AI Insights Card -->
<div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">AI Insights</h3>
<button class="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300">
<i class="fas fa-sync-alt"></i>
</button>
</div>
<div class="bg-gray-50 dark:bg-gray-700 rounded-md p-4">
<p class="text-sm text-gray-800 dark:text-gray-200">
"Based on recent performance data, your 'Tech Guru' avatar is generating 23% higher conversion rates when posting at 3 PM compared to other times. Consider scheduling more content during this window."
</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-xs text-gray-500 dark:text-gray-400">Generated 5 minutes ago</span>
<button class="text-xs text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300">
<i class="fas fa-thumbs-up mr-1"></i> Helpful
</button>
</div>
</div>
<div class="mt-4">
<textarea class="input w-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-3 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Ask AI for specific insights..."></textarea>
<button class="mt-2 w-full flex items-center justify-center px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md text-sm font-medium">
<i class="fas fa-paper-plane mr-2"></i> Get Insights
</button>
</div>
</div>
</div>
<!-- Video Performance Table -->
<div class="card bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Video Performance</h3>
<div class="flex items-center space-x-2">
<button class="px-3 py-1 text-sm bg-purple-600 hover:bg-purple-700 text-white rounded-md">
<i class="fas fa-plus mr-1"></i> Add Video
</button>
<button class="px-3 py-1 text-sm bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white rounded-md">
<i class="fas fa-filter mr-1"></i> Filter
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Video Title</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Avatar</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Views</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Engagement</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Sales</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Revenue</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 bg-purple-100 dark:bg-purple-900/20 rounded-md flex items-center justify-center text-purple-600 dark:text-purple-300">
<i class="fas fa-video"></i>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Smart Watch Review</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Posted 3 days ago</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-cover bg-center" style="background-image: url('https://randomuser.me/api/portraits/men/32.jpg')"></div>
<div class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Tech Guru</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">24.5K</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">8.7%</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">187</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">$5,610</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-purple-600 dark:text-purple-400 hover:text-purple-900 dark:hover:text-purple-300 mr-3">
<i class="fas fa-chart-bar"></i>
</button>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300">
<i class="fas fa-ellipsis-h"></i>
</button>
</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 bg-blue-100 dark:bg-blue-900/20 rounded-md flex items-center justify-center text-blue-600 dark:text-blue-300">
<i class="fas fa-video"></i>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Fitness Band Unboxing</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Posted 1 week ago</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-cover bg-center" style="background-image: url('https://randomuser.me/api/portraits/women/44.jpg')"></div>
<div class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Fitness Coach</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">18.2K</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">7.2%</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">132</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">$3,960</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-purple-600 dark:text-purple-400 hover:text-purple-900 dark:hover:text-purple-300 mr-3">
<i class="fas fa-chart-bar"></i>
</button>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300">
<i class="fas fa-ellipsis-h"></i>
</button>
</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 bg-green-100 dark:bg-green-900/20 rounded-md flex items-center justify-center text-green-600 dark:text-green-300">
<i class="fas fa-video"></i>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Wireless Earbuds Demo</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Posted 2 weeks ago</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-cover bg-center" style="background-image: url('https://randomuser.me/api/portraits/men/32.jpg')"></div>
<div class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Tech Guru</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">32.1K</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">9.3%</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">214</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">$6,420</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-purple-600 dark:text-purple-400 hover:text-purple-900 dark:hover:text-purple-300 mr-3">
<i class="fas fa-chart-bar"></i>
</button>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300">
<i class="fas fa-ellipsis-h"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
<div class="text-sm text-gray-500 dark:text-gray-400">
Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">12</span> results
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 text-sm bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white rounded-md">
Previous
</button>
<button class="px-3 py-1 text-sm bg-purple-600 hover:bg-purple-700 text-white rounded-md">
1
</button>
<button class="px-3 py-1 text-sm bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white rounded-md">
2
</button>
<button class="px-3 py-1 text-sm bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white rounded-md">
Next
</button>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Mobile sidebar overlay -->
<div id="mobileSidebarOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Toggle sidebar
const sidebarToggle = document.getElementById('sidebarToggle');
const mobileSidebarToggle = document.getElementById('mobileSidebarToggle');
const mobileSidebarOverlay = document.getElementById('mobileSidebarOverlay');
const sidebar = document.querySelector('.sidebar');
sidebarToggle.addEventListener('click', () => {
sidebar.classList.toggle('collapsed');
document.querySelector('.main-content').classList.toggle('md:ml-64');
document.querySelector('.main-content').classList.toggle('md:ml-20');
});
mobileSidebarToggle.addEventListener('click', () => {
sidebar.classList.toggle('open');
mobileSidebarOverlay.classList.toggle('hidden');
});
mobileSidebarOverlay.addEventListener('click', () => {
sidebar.classList.remove('open');
mobileSidebarOverlay.classList.add('hidden');
});
// Toggle dark mode
const themeToggle = document.getElementById('themeToggle');
themeToggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
});
// Check for saved theme preference
if (localStorage.getItem('darkMode') === 'true') {
document.documentElement.classList.add('dark');
}
// Initialize chart
const ctx = document.getElementById('salesChart').getContext('2d');
const salesChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [
{
label: 'Revenue',
data: [3500, 4200, 3800, 5100, 4900, 6200, 7300],
borderColor: '#8b5cf6',
backgroundColor: 'rgba(139, 92, 246, 0.1)',
tension: 0.3,
fill: true
},
{
label: 'Profit',
data: [2100, 2500, 2300, 3100, 2900, 3700, 4400],
borderColor: '#10b981',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
tension: 0.3,
fill: true
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: '#6b7280'
}
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(209, 213, 219, 0.2)'
},
ticks: {
color: '#6b7280'
}
},
x: {
grid: {
color: 'rgba(209, 213, 219, 0.2)'
},
ticks: {
color: '#6b7280'
}
}
}
}
});
// Simulate localStorage data persistence
const dashboardData = {
avatars: [
{ id: 1, name: 'Tech Guru', image: 'https://randomuser.me/api/portraits/men/32.jpg' },
{ id: 2, name: 'Fitness Coach', image: 'https://randomuser.me/api/portraits/women/44.jpg' }
],
products: [
{ id: 1, name: 'Smart Watch', price: 199, profit: 120 },
{ id: 2, name: 'Fitness Band', price: 99, profit: 60 },
{ id: 3, name: 'Wireless Earbuds', price: 149, profit: 90 }
],
videos: [
{ id: 1, title: 'Smart Watch Review', avatar: 1, views: 24500, engagement: 8.7, sales: 187, revenue: 5610 },
{ id: 2, title: 'Fitness Band Unboxing', avatar: 2, views: 18200, engagement: 7.2, sales: 132, revenue: 3960 },
{ id: 3, title: 'Wireless Earbuds Demo', avatar: 1, views: 32100, engagement: 9.3, sales: 214, revenue: 6420 }
]
};
// Save to localStorage
localStorage.setItem('dashboardData', JSON.stringify(dashboardData));
</script>
</body>
</html>