Hugging Face's logo

Spaces:
kamesh14151
/
loginease-pro
Running

App Files Community
kamesh14151 commited on
Commit
bfb9f2d
·
verified ·
1 Parent(s): e3f3658

ok upgrade this with more adavanced

Browse files
Files changed (3) hide show
  1. index.html +494 -101
  2. script.js +87 -10
  3. style.css +299 -20
index.html CHANGED
@@ -4,216 +4,535 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Dashboard | Analytics Hub</title>
8
  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
  <script src="https://unpkg.com/feather-icons"></script>
12
  <link rel="stylesheet" href="style.css">
13
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
 
14
  </head>
15
- <body class="bg-gray-50 dark:bg-gray-900">
16
  <!-- Sidebar -->
17
- <aside class="fixed left-0 top-0 h-full w-64 bg-white dark:bg-gray-800 shadow-lg z-30 transform transition-transform duration-300" id="sidebar">
18
  <div class="p-6">
19
- <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-8">Dashboard</h2>
20
- <nav class="space-y-2">
21
- <a href="#" class="flex items-center space-x-3 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-gray-700 px-4 py-3 rounded-lg">
22
- <i data-feather="home"></i>
23
- <span>Overview</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  </a>
25
- <a href="#" class="flex items-center space-x-3 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-3 rounded-lg">
26
- <i data-feather="bar-chart-2"></i>
27
  <span>Analytics</span>
28
  </a>
29
- <a href="#" class="flex items-center space-x-3 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-3 rounded-lg">
30
- <i data-feather="users"></i>
31
  <span>Customers</span>
32
  </a>
33
- <a href="#" class="flex items-center space-x-3 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-3 rounded-lg">
34
- <i data-feather="shopping-cart"></i>
35
  <span>Products</span>
36
  </a>
37
- <a href="#" class="flex items-center space-x-3 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-3 rounded-lg">
38
- <i data-feather="settings"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
39
  <span>Settings</span>
40
  </a>
41
  </nav>
 
 
 
 
 
 
 
 
 
 
42
  </div>
43
  </aside>
44
-
45
  <!-- Main Content -->
46
  <main class="ml-64 min-h-screen">
47
  <!-- Header -->
48
- <header class="bg-white dark:bg-gray-800 shadow-sm px-8 py-4">
49
  <div class="flex justify-between items-center">
50
  <div class="flex items-center space-x-4">
51
- <button id="menuToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 lg:hidden">
52
- <i data-feather="menu"></i>
53
  </button>
54
- <h1 class="text-2xl font-semibold text-gray-800 dark:text-white">Analytics Overview</h1>
 
 
 
55
  </div>
56
  <div class="flex items-center space-x-4">
57
- <button id="themeToggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200">
58
- <i data-feather="moon" class="hidden dark:block"></i>
59
- <i data-feather="sun" class="dark:hidden"></i>
60
  </button>
61
- <div class="flex items-center space-x-3">
62
- <img src="https://static.photos/people/40x40/1" alt="User" class="w-10 h-10 rounded-full">
63
- <div>
64
- <p class="text-sm font-medium text-gray-800 dark:text-white">John Doe</p>
65
- <p class="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  </div>
67
  </div>
68
  </div>
69
  </div>
70
  </header>
71
-
72
  <!-- Dashboard Content -->
73
  <div class="p-8">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  <!-- Stats Cards -->
75
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
76
- <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
77
- <div class="flex items-center justify-between">
78
- <div>
79
- <p class="text-sm text-gray-600 dark:text-gray-400">Total Revenue</p>
80
- <p class="text-2xl font-bold text-gray-800 dark:text-white">$45,231</p>
81
- <p class="text-xs text-green-600 dark:text-green-400 mt-2">+12.5% from last month</p>
 
 
82
  </div>
83
- <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-lg">
84
- <i data-feather="dollar-sign" class="text-blue-600 dark:text-blue-400"></i>
 
 
 
85
  </div>
86
  </div>
87
  </div>
88
 
89
- <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
90
- <div class="flex items-center justify-between">
91
- <div>
92
- <p class="text-sm text-gray-600 dark:text-gray-400">Total Users</p>
93
- <p class="text-2xl font-bold text-gray-800 dark:text-white">8,549</p>
94
- <p class="text-xs text-green-600 dark:text-green-400 mt-2">+8.2% from last month</p>
 
 
95
  </div>
96
- <div class="bg-green-100 dark:bg-green-900 p-3 rounded-lg">
97
- <i data-feather="users" class="text-green-600 dark:text-green-400"></i>
 
 
 
98
  </div>
99
  </div>
100
  </div>
101
 
102
- <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
103
- <div class="flex items-center justify-between">
104
- <div>
105
- <p class="text-sm text-gray-600 dark:text-gray-400">Orders</p>
106
- <p class="text-2xl font-bold text-gray-800 dark:text-white">1,423</p>
107
- <p class="text-xs text-red-600 dark:text-red-400 mt-2">-3.1% from last month</p>
 
 
108
  </div>
109
- <div class="bg-purple-100 dark:bg-purple-900 p-3 rounded-lg">
110
- <i data-feather="shopping-cart" class="text-purple-600 dark:text-purple-400"></i>
 
 
 
111
  </div>
112
  </div>
113
  </div>
114
 
115
- <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
116
- <div class="flex items-center justify-between">
117
- <div>
118
- <p class="text-sm text-gray-600 dark:text-gray-400">Conversion Rate</p>
119
- <p class="text-2xl font-bold text-gray-800 dark:text-white">3.24%</p>
120
- <p class="text-xs text-green-600 dark:text-green-400 mt-2">+0.5% from last month</p>
 
 
121
  </div>
122
- <div class="bg-orange-100 dark:bg-orange-900 p-3 rounded-lg">
123
- <i data-feather="trending-up" class="text-orange-600 dark:text-orange-400"></i>
 
 
 
124
  </div>
125
  </div>
126
  </div>
127
  </div>
128
-
129
  <!-- Charts Section -->
130
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
131
- <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
132
- <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Revenue Chart</h3>
 
 
 
 
 
 
 
 
 
133
  <canvas id="revenueChart"></canvas>
134
  </div>
135
 
136
- <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
137
- <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">User Growth</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
  <canvas id="userChart"></canvas>
139
  </div>
 
 
 
 
 
140
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
141
 
142
- <!-- Recent Activity -->
143
- <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
144
- <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Recent Activity</h3>
145
- <div class="space-y-4">
146
- <div class="flex items-center space-x-4 pb-4 border-b dark:border-gray-700">
147
- <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-lg">
148
- <i data-feather="user-plus" class="text-blue-600 dark:text-blue-400"></i>
 
 
 
 
149
  </div>
150
- <div class="flex-1">
151
- <p class="text-sm font-medium text-gray-800 dark:text-white">New user registered</p>
152
- <p class="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
153
  </div>
154
  </div>
 
155
 
156
- <div class="flex items-center space-x-4 pb-4 border-b dark:border-gray-700">
157
- <div class="bg-green-100 dark:bg-green-900 p-2 rounded-lg">
158
- <i data-feather="shopping-bag" class="text-green-600 dark:text-green-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
159
  </div>
160
- <div class="flex-1">
161
- <p class="text-sm font-medium text-gray-800 dark:text-white">New order received</p>
162
- <p class="text-xs text-gray-500 dark:text-gray-400">5 minutes ago</p>
 
 
 
 
 
 
 
 
163
  </div>
164
- </div>
165
 
166
- <div class="flex items-center space-x-4">
167
- <div class="bg-purple-100 dark:bg-purple-900 p-2 rounded-lg">
168
- <i data-feather="message-circle" class="text-purple-600 dark:text-purple-400"></i>
 
 
 
 
 
 
 
169
  </div>
170
- <div class="flex-1">
171
- <p class="text-sm font-medium text-gray-800 dark:text-white">New comment on product</p>
172
- <p class="text-xs text-gray-500 dark:text-gray-400">10 minutes ago</p>
 
 
 
 
 
 
 
 
173
  </div>
174
  </div>
175
  </div>
176
  </div>
177
- </div>
178
  </main>
179
-
180
  <script src="script.js"></script>
181
- <script>feather.replace();</script>
182
  <script>
 
 
 
183
  // Revenue Chart
184
  const revenueCtx = document.getElementById('revenueChart').getContext('2d');
185
  new Chart(revenueCtx, {
186
  type: 'line',
187
  data: {
188
- labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
189
  datasets: [{
190
  label: 'Revenue',
191
- data: [30000, 35000, 32000, 40000, 38000, 45231],
192
  borderColor: 'rgb(59, 130, 246)',
193
  backgroundColor: 'rgba(59, 130, 246, 0.1)',
194
- tension: 0.4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
195
  }]
196
  },
197
  options: {
198
  responsive: true,
 
 
 
 
 
199
  plugins: {
200
  legend: {
201
- display: false
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
202
  }
203
  },
204
  scales: {
205
  y: {
206
  beginAtZero: true,
 
 
 
207
  ticks: {
208
  callback: function(value) {
209
  return ' + value.toLocaleString();
210
  }
211
  }
 
 
 
 
 
212
  }
213
  }
214
  }
215
  });
216
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
217
  // User Growth Chart
218
  const userCtx = document.getElementById('userChart').getContext('2d');
219
  new Chart(userCtx, {
@@ -223,19 +542,93 @@
223
  datasets: [{
224
  label: 'New Users',
225
  data: [1200, 1350, 1100, 1450, 1300, 1500],
226
- backgroundColor: 'rgba(34, 197, 94, 0.8)'
 
 
 
 
 
 
227
  }]
228
  },
229
  options: {
230
  responsive: true,
 
231
  plugins: {
232
  legend: {
233
- display: false
 
 
 
 
 
234
  }
235
  },
236
  scales: {
237
  y: {
238
- beginAtZero: true
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
239
  }
240
  }
241
  }
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Dashboard | Analytics Hub Pro</title>
8
  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
  <script src="https://unpkg.com/feather-icons"></script>
12
  <link rel="stylesheet" href="style.css">
13
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
14
+ <script src="https://unpkg.com/lucide@latest"></script>
15
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
16
  </head>
17
+ <body class="bg-gray-50 dark:bg-gray-900 font-inter">
18
  <!-- Sidebar -->
19
+ <aside class="fixed left-0 top-0 h-full w-64 bg-white/95 dark:bg-gray-800/95 backdrop-blur-lg shadow-xl z-30 transform transition-all duration-300 ease-in-out border-r border-gray-200/50 dark:border-gray-700/50" id="sidebar">
20
  <div class="p-6">
21
+ <div class="flex items-center space-x-3 mb-8">
22
+ <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
23
+ <i data-lucide="bar-chart-3" class="w-6 h-6 text-white"></i>
24
+ </div>
25
+ <h2 class="text-2xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 dark:from-white dark:to-gray-300 bg-clip-text text-transparent">Analytics Pro</h2>
26
+ </div>
27
+
28
+ <div class="mb-6">
29
+ <div class="relative">
30
+ <input type="text" placeholder="Search..." class="w-full px-4 py-2 pl-10 text-sm bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all">
31
+ <i data-lucide="search" class="absolute left-3 top-2.5 w-4 h-4 text-gray-400"></i>
32
+ </div>
33
+ </div>
34
+
35
+ <nav class="space-y-1">
36
+ <a href="#" class="flex items-center space-x-3 text-blue-600 dark:text-blue-400 bg-gradient-to-r from-blue-50 to-blue-100 dark:from-gray-700 dark:to-gray-700 px-4 py-3 rounded-lg group relative overflow-hidden">
37
+ <div class="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
38
+ <i data-lucide="layout-dashboard" class="w-5 h-5 relative z-10"></i>
39
+ <span class="font-medium relative z-10">Overview</span>
40
+ <span class="ml-auto bg-blue-500 text-white text-xs px-2 py-1 rounded-full relative z-10">New</span>
41
  </a>
42
+ <a href="#" class="flex items-center space-x-3 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-3 rounded-lg transition-all group">
43
+ <i data-lucide="trending-up" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
44
  <span>Analytics</span>
45
  </a>
46
+ <a href="#" class="flex items-center space-x-3 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-3 rounded-lg transition-all group">
47
+ <i data-lucide="users-2" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
48
  <span>Customers</span>
49
  </a>
50
+ <a href="#" class="flex items-center space-x-3 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-3 rounded-lg transition-all group">
51
+ <i data-lucide="shopping-bag" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
52
  <span>Products</span>
53
  </a>
54
+ <a href="#" class="flex items-center space-x-3 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-3 rounded-lg transition-all group">
55
+ <i data-lucide="message-square" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
56
+ <span>Messages</span>
57
+ <span class="ml-auto w-2 h-2 bg-red-500 rounded-full"></span>
58
+ </a>
59
+ <a href="#" class="flex items-center space-x-3 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-3 rounded-lg transition-all group">
60
+ <i data-lucide="calendar" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
61
+ <span>Calendar</span>
62
+ </a>
63
+ <a href="#" class="flex items-center space-x-3 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-3 rounded-lg transition-all group">
64
+ <i data-lucide="file-text" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
65
+ <span>Documents</span>
66
+ </a>
67
+ <a href="#" class="flex items-center space-x-3 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-3 rounded-lg transition-all group">
68
+ <i data-lucide="settings" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
69
  <span>Settings</span>
70
  </a>
71
  </nav>
72
+
73
+ <div class="absolute bottom-6 left-6 right-6">
74
+ <div class="bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg p-4 text-white">
75
+ <h4 class="font-semibold mb-1">Upgrade to Pro</h4>
76
+ <p class="text-xs opacity-90 mb-3">Unlock advanced features and analytics</p>
77
+ <button class="bg-white text-purple-600 text-sm font-medium px-3 py-1.5 rounded-md hover:bg-gray-100 transition-colors">
78
+ Upgrade Now
79
+ </button>
80
+ </div>
81
+ </div>
82
  </div>
83
  </aside>
 
84
  <!-- Main Content -->
85
  <main class="ml-64 min-h-screen">
86
  <!-- Header -->
87
+ <header class="bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg shadow-sm border-b border-gray-200/50 dark:border-gray-700/50 px-8 py-4 sticky top-0 z-20">
88
  <div class="flex justify-between items-center">
89
  <div class="flex items-center space-x-4">
90
+ <button id="menuToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 lg:hidden transition-colors">
91
+ <i data-lucide="menu" class="w-5 h-5"></i>
92
  </button>
93
+ <div>
94
+ <h1 class="text-2xl font-semibold text-gray-800 dark:text-white">Analytics Overview</h1>
95
+ <p class="text-sm text-gray-500 dark:text-gray-400">Welcome back, John! Here's what's happening with your business today.</p>
96
+ </div>
97
  </div>
98
  <div class="flex items-center space-x-4">
99
+ <button class="relative p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
100
+ <i data-lucide="bell" class="w-5 h-5 text-gray-600 dark:text-gray-300"></i>
101
+ <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
102
  </button>
103
+ <button id="themeToggle" class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
104
+ <i data-lucide="moon" class="hidden dark:block w-5 h-5"></i>
105
+ <i data-lucide="sun" class="dark:hidden w-5 h-5"></i>
106
+ </button>
107
+ <div class="relative group">
108
+ <button class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
109
+ <img src="https://static.photos/people/40x40/1" alt="User" class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-600">
110
+ <div class="text-left">
111
+ <p class="text-sm font-medium text-gray-800 dark:text-white">John Doe</p>
112
+ <p class="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
113
+ </div>
114
+ <i data-lucide="chevron-down" class="w-4 h-4 text-gray-400"></i>
115
+ </button>
116
+ <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform group-hover:translate-y-0 translate-y-2">
117
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Profile</a>
118
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
119
+ <hr class="my-1 border-gray-200 dark:border-gray-700">
120
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Sign out</a>
121
  </div>
122
  </div>
123
  </div>
124
  </div>
125
  </header>
 
126
  <!-- Dashboard Content -->
127
  <div class="p-8">
128
+ <!-- Date Range Selector -->
129
+ <div class="mb-6 flex justify-between items-center">
130
+ <div class="flex items-center space-x-2">
131
+ <button class="px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Today</button>
132
+ <button class="px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">7 Days</button>
133
+ <button class="px-3 py-1 text-sm bg-blue-500 text-white rounded-lg">30 Days</button>
134
+ <button class="px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">90 Days</button>
135
+ <button class="px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Custom</button>
136
+ </div>
137
+ <div class="flex items-center space-x-2">
138
+ <button class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
139
+ <i data-lucide="download" class="w-4 h-4 text-gray-600 dark:text-gray-300"></i>
140
+ </button>
141
+ <button class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
142
+ <i data-lucide="filter" class="w-4 h-4 text-gray-600 dark:text-gray-300"></i>
143
+ </button>
144
+ </div>
145
+ </div>
146
+
147
  <!-- Stats Cards -->
148
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
149
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 relative overflow-hidden group">
150
+ <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-100 to-blue-50 dark:from-blue-900/20 dark:to-blue-800/10 rounded-full -mr-16 -mt-16"></div>
151
+ <div class="relative z-10">
152
+ <div class="flex items-center justify-between mb-4">
153
+ <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-3 rounded-lg shadow-lg">
154
+ <i data-lucide="dollar-sign" class="w-6 h-6 text-white"></i>
155
+ </div>
156
+ <span class="text-xs font-medium text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-900/30 px-2 py-1 rounded-full">+12.5%</span>
157
  </div>
158
+ <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Revenue</p>
159
+ <p class="text-3xl font-bold text-gray-800 dark:text-white mb-2">$45,231</p>
160
+ <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
161
+ <i data-lucide="trending-up" class="w-3 h-3 mr-1 text-green-500"></i>
162
+ <span>From last month</span>
163
  </div>
164
  </div>
165
  </div>
166
 
167
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 relative overflow-hidden group">
168
+ <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-green-100 to-green-50 dark:from-green-900/20 dark:to-green-800/10 rounded-full -mr-16 -mt-16"></div>
169
+ <div class="relative z-10">
170
+ <div class="flex items-center justify-between mb-4">
171
+ <div class="bg-gradient-to-r from-green-500 to-green-600 p-3 rounded-lg shadow-lg">
172
+ <i data-lucide="users-2" class="w-6 h-6 text-white"></i>
173
+ </div>
174
+ <span class="text-xs font-medium text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-900/30 px-2 py-1 rounded-full">+8.2%</span>
175
  </div>
176
+ <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Users</p>
177
+ <p class="text-3xl font-bold text-gray-800 dark:text-white mb-2">8,549</p>
178
+ <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
179
+ <i data-lucide="trending-up" class="w-3 h-3 mr-1 text-green-500"></i>
180
+ <span>From last month</span>
181
  </div>
182
  </div>
183
  </div>
184
 
185
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 relative overflow-hidden group">
186
+ <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-purple-100 to-purple-50 dark:from-purple-900/20 dark:to-purple-800/10 rounded-full -mr-16 -mt-16"></div>
187
+ <div class="relative z-10">
188
+ <div class="flex items-center justify-between mb-4">
189
+ <div class="bg-gradient-to-r from-purple-500 to-purple-600 p-3 rounded-lg shadow-lg">
190
+ <i data-lucide="shopping-bag" class="w-6 h-6 text-white"></i>
191
+ </div>
192
+ <span class="text-xs font-medium text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-2 py-1 rounded-full">-3.1%</span>
193
  </div>
194
+ <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Orders</p>
195
+ <p class="text-3xl font-bold text-gray-800 dark:text-white mb-2">1,423</p>
196
+ <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
197
+ <i data-lucide="trending-down" class="w-3 h-3 mr-1 text-red-500"></i>
198
+ <span>From last month</span>
199
  </div>
200
  </div>
201
  </div>
202
 
203
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 relative overflow-hidden group">
204
+ <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-orange-100 to-orange-50 dark:from-orange-900/20 dark:to-orange-800/10 rounded-full -mr-16 -mt-16"></div>
205
+ <div class="relative z-10">
206
+ <div class="flex items-center justify-between mb-4">
207
+ <div class="bg-gradient-to-r from-orange-500 to-orange-600 p-3 rounded-lg shadow-lg">
208
+ <i data-lucide="target" class="w-6 h-6 text-white"></i>
209
+ </div>
210
+ <span class="text-xs font-medium text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-900/30 px-2 py-1 rounded-full">+0.5%</span>
211
  </div>
212
+ <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Conversion Rate</p>
213
+ <p class="text-3xl font-bold text-gray-800 dark:text-white mb-2">3.24%</p>
214
+ <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
215
+ <i data-lucide="trending-up" class="w-3 h-3 mr-1 text-green-500"></i>
216
+ <span>From last month</span>
217
  </div>
218
  </div>
219
  </div>
220
  </div>
 
221
  <!-- Charts Section -->
222
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
223
+ <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
224
+ <div class="flex justify-between items-center mb-6">
225
+ <div>
226
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Revenue Analytics</h3>
227
+ <p class="text-sm text-gray-500 dark:text-gray-400">Monthly revenue trends</p>
228
+ </div>
229
+ <div class="flex items-center space-x-2">
230
+ <button class="px-3 py-1 text-xs bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">Export</button>
231
+ <button class="px-3 py-1 text-xs bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">Full Screen</button>
232
+ </div>
233
+ </div>
234
  <canvas id="revenueChart"></canvas>
235
  </div>
236
 
237
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
238
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Traffic Sources</h3>
239
+ <canvas id="trafficChart"></canvas>
240
+ <div class="mt-4 space-y-2">
241
+ <div class="flex justify-between items-center text-sm">
242
+ <div class="flex items-center space-x-2">
243
+ <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
244
+ <span class="text-gray-600 dark:text-gray-400">Direct</span>
245
+ </div>
246
+ <span class="font-medium text-gray-800 dark:text-white">42%</span>
247
+ </div>
248
+ <div class="flex justify-between items-center text-sm">
249
+ <div class="flex items-center space-x-2">
250
+ <div class="w-3 h-3 bg-green-500 rounded-full"></div>
251
+ <span class="text-gray-600 dark:text-gray-400">Organic</span>
252
+ </div>
253
+ <span class="font-medium text-gray-800 dark:text-white">31%</span>
254
+ </div>
255
+ <div class="flex justify-between items-center text-sm">
256
+ <div class="flex items-center space-x-2">
257
+ <div class="w-3 h-3 bg-purple-500 rounded-full"></div>
258
+ <span class="text-gray-600 dark:text-gray-400">Social</span>
259
+ </div>
260
+ <span class="font-medium text-gray-800 dark:text-white">18%</span>
261
+ </div>
262
+ <div class="flex justify-between items-center text-sm">
263
+ <div class="flex items-center space-x-2">
264
+ <div class="w-3 h-3 bg-orange-500 rounded-full"></div>
265
+ <span class="text-gray-600 dark:text-gray-400">Referral</span>
266
+ </div>
267
+ <span class="font-medium text-gray-800 dark:text-white">9%</span>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
274
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
275
+ <div class="flex justify-between items-center mb-4">
276
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white">User Growth</h3>
277
+ <select class="text-sm bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg px-3 py-1">
278
+ <option>Last 6 months</option>
279
+ <option>Last year</option>
280
+ </select>
281
+ </div>
282
  <canvas id="userChart"></canvas>
283
  </div>
284
+
285
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
286
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Product Performance</h3>
287
+ <canvas id="productChart"></canvas>
288
+ </div>
289
  </div>
290
+ <!-- Recent Activity & Top Products -->
291
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
292
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
293
+ <div class="flex justify-between items-center mb-6">
294
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Recent Activity</h3>
295
+ <button class="text-sm text-blue-600 dark:text-blue-400 hover:underline">View all</button>
296
+ </div>
297
+ <div class="space-y-4">
298
+ <div class="flex items-start space-x-3 pb-4 border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 -mx-2 px-2 py-2 rounded-lg transition-colors cursor-pointer">
299
+ <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-2 rounded-lg shadow-md">
300
+ <i data-lucide="user-plus" class="w-4 h-4 text-white"></i>
301
+ </div>
302
+ <div class="flex-1 min-w-0">
303
+ <p class="text-sm font-medium text-gray-800 dark:text-white truncate">New user Sarah Johnson registered</p>
304
+ <p class="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</p>
305
+ </div>
306
+ <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
307
+ <i data-lucide="more-horizontal" class="w-4 h-4"></i>
308
+ </button>
309
+ </div>
310
 
311
+ <div class="flex items-start space-x-3 pb-4 border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 -mx-2 px-2 py-2 rounded-lg transition-colors cursor-pointer">
312
+ <div class="bg-gradient-to-r from-green-500 to-green-600 p-2 rounded-lg shadow-md">
313
+ <i data-lucide="shopping-bag" class="w-4 h-4 text-white"></i>
314
+ </div>
315
+ <div class="flex-1 min-w-0">
316
+ <p class="text-sm font-medium text-gray-800 dark:text-white truncate">Order #12345 received - $342.50</p>
317
+ <p class="text-xs text-gray-500 dark:text-gray-400">5 minutes ago</p>
318
+ </div>
319
+ <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
320
+ <i data-lucide="more-horizontal" class="w-4 h-4"></i>
321
+ </button>
322
  </div>
323
+
324
+ <div class="flex items-start space-x-3 pb-4 border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 -mx-2 px-2 py-2 rounded-lg transition-colors cursor-pointer">
325
+ <div class="bg-gradient-to-r from-purple-500 to-purple-600 p-2 rounded-lg shadow-md">
326
+ <i data-lucide="message-circle" class="w-4 h-4 text-white"></i>
327
+ </div>
328
+ <div class="flex-1 min-w-0">
329
+ <p class="text-sm font-medium text-gray-800 dark:text-white truncate">New review on Premium Plan</p>
330
+ <p class="text-xs text-gray-500 dark:text-gray-400">10 minutes ago</p>
331
+ </div>
332
+ <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
333
+ <i data-lucide="more-horizontal" class="w-4 h-4"></i>
334
+ </button>
335
+ </div>
336
+
337
+ <div class="flex items-start space-x-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 -mx-2 px-2 py-2 rounded-lg transition-colors cursor-pointer">
338
+ <div class="bg-gradient-to-r from-orange-500 to-orange-600 p-2 rounded-lg shadow-md">
339
+ <i data-lucide="alert-triangle" class="w-4 h-4 text-white"></i>
340
+ </div>
341
+ <div class="flex-1 min-w-0">
342
+ <p class="text-sm font-medium text-gray-800 dark:text-white truncate">Server uptime dropped to 99.2%</p>
343
+ <p class="text-xs text-gray-500 dark:text-gray-400">15 minutes ago</p>
344
+ </div>
345
+ <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
346
+ <i data-lucide="more-horizontal" class="w-4 h-4"></i>
347
+ </button>
348
  </div>
349
  </div>
350
+ </div>
351
 
352
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
353
+ <div class="flex justify-between items-center mb-6">
354
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Top Products</h3>
355
+ <button class="text-sm text-blue-600 dark:text-blue-400 hover:underline">View all</button>
356
+ </div>
357
+ <div class="space-y-4">
358
+ <div class="flex items-center space-x-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 -mx-2 px-2 py-2 rounded-lg transition-colors">
359
+ <img src="https://static.photos/technology/50x50/1" alt="Product" class="w-12 h-12 rounded-lg object-cover">
360
+ <div class="flex-1 min-w-0">
361
+ <p class="text-sm font-medium text-gray-800 dark:text-white truncate">Premium Analytics Dashboard</p>
362
+ <p class="text-xs text-gray-500 dark:text-gray-400">2,341 sales</p>
363
+ </div>
364
+ <div class="text-right">
365
+ <p class="text-sm font-semibold text-gray-800 dark:text-white">$299</p>
366
+ <p class="text-xs text-green-600 dark:text-green-400">+15%</p>
367
+ </div>
368
  </div>
369
+
370
+ <div class="flex items-center space-x-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 -mx-2 px-2 py-2 rounded-lg transition-colors">
371
+ <img src="https://static.photos/technology/50x50/2" alt="Product" class="w-12 h-12 rounded-lg object-cover">
372
+ <div class="flex-1 min-w-0">
373
+ <p class="text-sm font-medium text-gray-800 dark:text-white truncate">Marketing Automation Suite</p>
374
+ <p class="text-xs text-gray-500 dark:text-gray-400">1,892 sales</p>
375
+ </div>
376
+ <div class="text-right">
377
+ <p class="text-sm font-semibold text-gray-800 dark:text-white">$199</p>
378
+ <p class="text-xs text-green-600 dark:text-green-400">+8%</p>
379
+ </div>
380
  </div>
 
381
 
382
+ <div class="flex items-center space-x-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 -mx-2 px-2 py-2 rounded-lg transition-colors">
383
+ <img src="https://static.photos/technology/50x50/3" alt="Product" class="w-12 h-12 rounded-lg object-cover">
384
+ <div class="flex-1 min-w-0">
385
+ <p class="text-sm font-medium text-gray-800 dark:text-white truncate">Customer Support Portal</p>
386
+ <p class="text-xs text-gray-500 dark:text-gray-400">1,456 sales</p>
387
+ </div>
388
+ <div class="text-right">
389
+ <p class="text-sm font-semibold text-gray-800 dark:text-white">$149</p>
390
+ <p class="text-xs text-red-600 dark:text-red-400">-3%</p>
391
+ </div>
392
  </div>
393
+
394
+ <div class="flex items-center space-x-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 -mx-2 px-2 py-2 rounded-lg transition-colors">
395
+ <img src="https://static.photos/technology/50x50/4" alt="Product" class="w-12 h-12 rounded-lg object-cover">
396
+ <div class="flex-1 min-w-0">
397
+ <p class="text-sm font-medium text-gray-800 dark:text-white truncate">Project Management Tool</p>
398
+ <p class="text-xs text-gray-500 dark:text-gray-400">987 sales</p>
399
+ </div>
400
+ <div class="text-right">
401
+ <p class="text-sm font-semibold text-gray-800 dark:text-white">$99</p>
402
+ <p class="text-xs text-green-600 dark:text-green-400">+22%</p>
403
+ </div>
404
  </div>
405
  </div>
406
  </div>
407
  </div>
408
+ </div>
409
  </main>
 
410
  <script src="script.js"></script>
411
+ <script src="https://unpkg.com/lucide@latest"></script>
412
  <script>
413
+ // Initialize Lucide icons
414
+ lucide.createIcons();
415
+
416
  // Revenue Chart
417
  const revenueCtx = document.getElementById('revenueChart').getContext('2d');
418
  new Chart(revenueCtx, {
419
  type: 'line',
420
  data: {
421
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
422
  datasets: [{
423
  label: 'Revenue',
424
+ data: [30000, 35000, 32000, 40000, 38000, 45231, 48000, 52000, 49000, 51000, 53000, 56000],
425
  borderColor: 'rgb(59, 130, 246)',
426
  backgroundColor: 'rgba(59, 130, 246, 0.1)',
427
+ tension: 0.4,
428
+ fill: true,
429
+ pointRadius: 5,
430
+ pointHoverRadius: 8,
431
+ pointBackgroundColor: 'rgb(59, 130, 246)',
432
+ pointBorderColor: '#fff',
433
+ pointBorderWidth: 2
434
+ }, {
435
+ label: 'Profit',
436
+ data: [20000, 22000, 21000, 28000, 26000, 32000, 34000, 37000, 35000, 36000, 38000, 41000],
437
+ borderColor: 'rgb(34, 197, 94)',
438
+ backgroundColor: 'rgba(34, 197, 94, 0.1)',
439
+ tension: 0.4,
440
+ fill: true,
441
+ pointRadius: 5,
442
+ pointHoverRadius: 8,
443
+ pointBackgroundColor: 'rgb(34, 197, 94)',
444
+ pointBorderColor: '#fff',
445
+ pointBorderWidth: 2
446
  }]
447
  },
448
  options: {
449
  responsive: true,
450
+ maintainAspectRatio: false,
451
+ interaction: {
452
+ mode: 'index',
453
+ intersect: false,
454
+ },
455
  plugins: {
456
  legend: {
457
+ display: true,
458
+ position: 'top',
459
+ labels: {
460
+ usePointStyle: true,
461
+ padding: 15
462
+ }
463
+ },
464
+ tooltip: {
465
+ backgroundColor: 'rgba(0, 0, 0, 0.8)',
466
+ padding: 12,
467
+ titleColor: '#fff',
468
+ bodyColor: '#fff',
469
+ borderColor: 'rgba(255, 255, 255, 0.1)',
470
+ borderWidth: 1,
471
+ displayColors: true,
472
+ callbacks: {
473
+ label: function(context) {
474
+ return context.dataset.label + ': ' + context.parsed.y.toLocaleString();
475
+ }
476
+ }
477
  }
478
  },
479
  scales: {
480
  y: {
481
  beginAtZero: true,
482
+ grid: {
483
+ color: 'rgba(0, 0, 0, 0.05)'
484
+ },
485
  ticks: {
486
  callback: function(value) {
487
  return ' + value.toLocaleString();
488
  }
489
  }
490
+ },
491
+ x: {
492
+ grid: {
493
+ display: false
494
+ }
495
  }
496
  }
497
  }
498
  });
499
 
500
+ // Traffic Sources Chart
501
+ const trafficCtx = document.getElementById('trafficChart').getContext('2d');
502
+ new Chart(trafficCtx, {
503
+ type: 'doughnut',
504
+ data: {
505
+ labels: ['Direct', 'Organic', 'Social', 'Referral'],
506
+ datasets: [{
507
+ data: [42, 31, 18, 9],
508
+ backgroundColor: [
509
+ 'rgb(59, 130, 246)',
510
+ 'rgb(34, 197, 94)',
511
+ 'rgb(168, 85, 247)',
512
+ 'rgb(251, 146, 60)'
513
+ ],
514
+ borderWidth: 0
515
+ }]
516
+ },
517
+ options: {
518
+ responsive: true,
519
+ maintainAspectRatio: false,
520
+ plugins: {
521
+ legend: {
522
+ display: false
523
+ },
524
+ tooltip: {
525
+ callbacks: {
526
+ label: function(context) {
527
+ return context.label + ': ' + context.parsed + '%';
528
+ }
529
+ }
530
+ }
531
+ },
532
+ cutout: '70%'
533
+ }
534
+ });
535
+
536
  // User Growth Chart
537
  const userCtx = document.getElementById('userChart').getContext('2d');
538
  new Chart(userCtx, {
 
542
  datasets: [{
543
  label: 'New Users',
544
  data: [1200, 1350, 1100, 1450, 1300, 1500],
545
+ backgroundColor: 'rgba(59, 130, 246, 0.8)',
546
+ borderRadius: 8
547
+ }, {
548
+ label: 'Active Users',
549
+ data: [3400, 3600, 3200, 3800, 3500, 4100],
550
+ backgroundColor: 'rgba(34, 197, 94, 0.8)',
551
+ borderRadius: 8
552
  }]
553
  },
554
  options: {
555
  responsive: true,
556
+ maintainAspectRatio: false,
557
  plugins: {
558
  legend: {
559
+ display: true,
560
+ position: 'top',
561
+ labels: {
562
+ usePointStyle: true,
563
+ padding: 15
564
+ }
565
  }
566
  },
567
  scales: {
568
  y: {
569
+ beginAtZero: true,
570
+ grid: {
571
+ color: 'rgba(0, 0, 0, 0.05)'
572
+ }
573
+ },
574
+ x: {
575
+ grid: {
576
+ display: false
577
+ }
578
+ }
579
+ }
580
+ }
581
+ });
582
+
583
+ // Product Performance Chart
584
+ const productCtx = document.getElementById('productChart').getContext('2d');
585
+ new Chart(productCtx, {
586
+ type: 'radar',
587
+ data: {
588
+ labels: ['Quality', 'Price', 'Support', 'Features', 'Usability', 'Performance'],
589
+ datasets: [{
590
+ label: 'Premium Plan',
591
+ data: [95, 85, 90, 92, 88, 94],
592
+ borderColor: 'rgb(59, 130, 246)',
593
+ backgroundColor: 'rgba(59, 130, 246, 0.2)',
594
+ pointBackgroundColor: 'rgb(59, 130, 246)',
595
+ pointBorderColor: '#fff',
596
+ pointHoverBackgroundColor: '#fff',
597
+ pointHoverBorderColor: 'rgb(59, 130, 246)'
598
+ }, {
599
+ label: 'Basic Plan',
600
+ data: [75, 95, 70, 65, 80, 72],
601
+ borderColor: 'rgb(34, 197, 94)',
602
+ backgroundColor: 'rgba(34, 197, 94, 0.2)',
603
+ pointBackgroundColor: 'rgb(34, 197, 94)',
604
+ pointBorderColor: '#fff',
605
+ pointHoverBackgroundColor: '#fff',
606
+ pointHoverBorderColor: 'rgb(34, 197, 94)'
607
+ }]
608
+ },
609
+ options: {
610
+ responsive: true,
611
+ maintainAspectRatio: false,
612
+ plugins: {
613
+ legend: {
614
+ display: true,
615
+ position: 'top',
616
+ labels: {
617
+ usePointStyle: true,
618
+ padding: 15
619
+ }
620
+ }
621
+ },
622
+ scales: {
623
+ r: {
624
+ beginAtZero: true,
625
+ max: 100,
626
+ ticks: {
627
+ stepSize: 20
628
+ },
629
+ grid: {
630
+ color: 'rgba(0, 0, 0, 0.05)'
631
+ }
632
  }
633
  }
634
  }
script.js CHANGED
@@ -13,7 +13,7 @@ document.addEventListener('DOMContentLoaded', function() {
13
  html.classList.toggle('dark');
14
  const theme = html.classList.contains('dark') ? 'dark' : 'light';
15
  localStorage.setItem('theme', theme);
16
- feather.replace();
17
  });
18
 
19
  // Mobile menu toggle
@@ -36,16 +36,93 @@ document.addEventListener('DOMContentLoaded', function() {
36
  window.addEventListener('resize', handleResize);
37
  handleResize();
38
 
39
- // Update stats periodically (simulation)
40
  function updateStats() {
41
- const revenueEl = document.querySelector('.text-2xl.font-bold');
42
- if (revenueEl && revenueEl.textContent.includes(')) {
43
- const currentRevenue = parseInt(revenueEl.textContent.replace(/[$,]/g, ''));
44
- const change = Math.floor(Math.random() * 1000) - 500;
45
- revenueEl.textContent = ' + (currentRevenue + change).toLocaleString();
46
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  }
48
 
49
- // Update stats every 5 seconds
50
- setInterval(updateStats, 5000);
 
 
 
 
 
 
 
 
 
 
51
  });
 
13
  html.classList.toggle('dark');
14
  const theme = html.classList.contains('dark') ? 'dark' : 'light';
15
  localStorage.setItem('theme', theme);
16
+ lucide.createIcons();
17
  });
18
 
19
  // Mobile menu toggle
 
36
  window.addEventListener('resize', handleResize);
37
  handleResize();
38
 
39
+ // Update stats periodically with realistic data
40
  function updateStats() {
41
+ const statsElements = document.querySelectorAll('.text-3xl.font-bold');
42
+ statsElements.forEach((el, index) => {
43
+ const currentValue = el.textContent.replace(/[$,%]/g, '').replace(/,/g, '');
44
+ const isPercentage = el.textContent.includes('%');
45
+ const isDollar = el.textContent.includes(');
46
+
47
+ let change = 0;
48
+ if (isPercentage) {
49
+ change = (Math.random() * 0.5 - 0.25).toFixed(2);
50
+ el.textContent = (parseFloat(currentValue) + parseFloat(change)).toFixed(2) + '%';
51
+ } else if (isDollar) {
52
+ change = Math.floor(Math.random() * 1000) - 500;
53
+ el.textContent = ' + (parseInt(currentValue) + change).toLocaleString();
54
+ } else {
55
+ change = Math.floor(Math.random() * 100) - 50;
56
+ el.textContent = (parseInt(currentValue) + change).toLocaleString();
57
+ }
58
+
59
+ // Add pulse animation
60
+ el.classList.add('animate-pulse');
61
+ setTimeout(() => el.classList.remove('animate-pulse'), 1000);
62
+ });
63
+ }
64
+
65
+ // Update stats every 3 seconds
66
+ setInterval(updateStats, 3000);
67
+
68
+ // Add smooth scroll behavior
69
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
70
+ anchor.addEventListener('click', function (e) {
71
+ e.preventDefault();
72
+ const target = document.querySelector(this.getAttribute('href'));
73
+ if (target) {
74
+ target.scrollIntoView({ behavior: 'smooth', block: 'start' });
75
+ }
76
+ });
77
+ });
78
+
79
+ // Initialize tooltips
80
+ const tooltipElements = document.querySelectorAll('[data-tooltip]');
81
+ tooltipElements.forEach(element => {
82
+ element.addEventListener('mouseenter', function() {
83
+ const tooltip = document.createElement('div');
84
+ tooltip.className = 'absolute z-50 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg';
85
+ tooltip.textContent = this.getAttribute('data-tooltip');
86
+ document.body.appendChild(tooltip);
87
+
88
+ const rect = this.getBoundingClientRect();
89
+ tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px';
90
+ tooltip.style.top = rect.top - tooltip.offsetHeight - 5 + 'px';
91
+
92
+ this._tooltip = tooltip;
93
+ });
94
+
95
+ element.addEventListener('mouseleave', function() {
96
+ if (this._tooltip) {
97
+ this._tooltip.remove();
98
+ delete this._tooltip;
99
+ }
100
+ });
101
+ });
102
+
103
+ // Simulate real-time notifications
104
+ function addNotification() {
105
+ const notifications = [
106
+ { type: 'user', message: 'New user registration', icon: 'user-plus' },
107
+ { type: 'order', message: 'New order received', icon: 'shopping-bag' },
108
+ { type: 'comment', message: 'New comment posted', icon: 'message-circle' },
109
+ { type: 'alert', message: 'Server alert triggered', icon: 'alert-triangle' }
110
+ ];
111
+
112
+ const randomNotification = notifications[Math.floor(Math.random() * notifications.length)];
113
+ console.log('Notification:', randomNotification.message);
114
  }
115
 
116
+ // Add random notifications every 30 seconds
117
+ setInterval(addNotification, 30000);
118
+
119
+ // Re-initialize Lucide icons when DOM changes
120
+ const observer = new MutationObserver(() => {
121
+ lucide.createIcons();
122
+ });
123
+
124
+ observer.observe(document.body, {
125
+ childList: true,
126
+ subtree: true
127
+ });
128
  });
style.css CHANGED
@@ -3,27 +3,58 @@
3
  @tailwind components;
4
  @tailwind utilities;
5
 
 
 
 
 
 
6
  /* Smooth theme transition */
7
- html {
8
- transition: background-color 0.3s ease;
 
 
 
 
 
 
 
 
9
  }
10
 
11
- /* Custom scrollbar for dark mode */
12
- .dark ::-webkit-scrollbar {
 
 
 
 
 
13
  width: 8px;
 
 
 
 
 
14
  }
15
 
16
  .dark ::-webkit-scrollbar-track {
17
- background: #1a202c;
18
  }
19
 
20
- .dark ::-webkit-scrollbar-thumb {
21
- background: #4a5568;
22
  border-radius: 4px;
23
  }
24
 
 
 
 
 
 
 
 
 
25
  .dark ::-webkit-scrollbar-thumb:hover {
26
- background: #718096;
27
  }
28
 
29
  /* Responsive sidebar */
@@ -37,33 +68,281 @@ html {
37
  }
38
  }
39
 
40
- /* Chart container styles */
41
  canvas {
42
- max-height: 300px;
43
  }
44
 
45
- /* Animated stat cards */
46
- .bg-white, .dark .bg-gray-800 {
47
- transition: all 0.3s ease;
 
 
 
48
  }
49
 
50
- .bg-white:hover, .dark .bg-gray-800:hover {
51
- transform: translateY(-2px);
52
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  }
54
 
55
- /* Activity feed animations */
56
- .flex.items-center.space-x-4 {
57
- animation: fadeInUp 0.5s ease;
58
  }
59
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  @keyframes fadeInUp {
61
  from {
62
  opacity: 0;
63
- transform: translateY(20px);
64
  }
65
  to {
66
  opacity: 1;
67
  transform: translateY(0);
68
  }
69
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  @tailwind components;
4
  @tailwind utilities;
5
 
6
+ /* Inter Font */
7
+ .font-inter {
8
+ font-family: 'Inter', sans-serif;
9
+ }
10
+
11
  /* Smooth theme transition */
12
+ * {
13
+ transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
14
+ }
15
+
16
+ /* Glass morphism effects */
17
+ .glass {
18
+ background: rgba(255, 255, 255, 0.7);
19
+ backdrop-filter: blur(10px);
20
+ -webkit-backdrop-filter: blur(10px);
21
+ border: 1px solid rgba(255, 255, 255, 0.2);
22
  }
23
 
24
+ .dark .glass {
25
+ background: rgba(31, 41, 55, 0.7);
26
+ border: 1px solid rgba(75, 85, 99, 0.2);
27
+ }
28
+
29
+ /* Custom scrollbar */
30
+ ::-webkit-scrollbar {
31
  width: 8px;
32
+ height: 8px;
33
+ }
34
+
35
+ ::-webkit-scrollbar-track {
36
+ background: #f3f4f6;
37
  }
38
 
39
  .dark ::-webkit-scrollbar-track {
40
+ background: #1f2937;
41
  }
42
 
43
+ ::-webkit-scrollbar-thumb {
44
+ background: #9ca3af;
45
  border-radius: 4px;
46
  }
47
 
48
+ .dark ::-webkit-scrollbar-thumb {
49
+ background: #4b5563;
50
+ }
51
+
52
+ ::-webkit-scrollbar-thumb:hover {
53
+ background: #6b7280;
54
+ }
55
+
56
  .dark ::-webkit-scrollbar-thumb:hover {
57
+ background: #6b7280;
58
  }
59
 
60
  /* Responsive sidebar */
 
68
  }
69
  }
70
 
71
+ /* Enhanced chart container styles */
72
  canvas {
73
+ max-height: 400px;
74
  }
75
 
76
+ /* Advanced stat cards with gradient borders */
77
+ .stat-card {
78
+ position: relative;
79
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
80
+ padding: 2px;
81
+ border-radius: 12px;
82
  }
83
 
84
+ .stat-card-inner {
85
+ background: white;
86
+ border-radius: 10px;
87
+ padding: 1.5rem;
88
+ }
89
+
90
+ .dark .stat-card-inner {
91
+ background: #1f2937;
92
+ }
93
+
94
+ /* Enhanced hover effects */
95
+ .hover-lift {
96
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
97
+ }
98
+
99
+ .hover-lift:hover {
100
+ transform: translateY(-4px) scale(1.02);
101
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
102
  }
103
 
104
+ /* Gradient backgrounds */
105
+ .gradient-bg {
106
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
107
  }
108
 
109
+ .gradient-text {
110
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
111
+ -webkit-background-clip: text;
112
+ -webkit-text-fill-color: transparent;
113
+ background-clip: text;
114
+ }
115
+
116
+ /* Loading animations */
117
+ .loading-dots {
118
+ display: inline-flex;
119
+ gap: 4px;
120
+ }
121
+
122
+ .loading-dots span {
123
+ width: 8px;
124
+ height: 8px;
125
+ border-radius: 50%;
126
+ background: #3b82f6;
127
+ animation: loading-dots 1.4s infinite ease-in-out both;
128
+ }
129
+
130
+ .loading-dots span:nth-child(1) {
131
+ animation-delay: -0.32s;
132
+ }
133
+
134
+ .loading-dots span:nth-child(2) {
135
+ animation-delay: -0.16s;
136
+ }
137
+
138
+ @keyframes loading-dots {
139
+ 0%, 80%, 100% {
140
+ transform: scale(0.8);
141
+ opacity: 0.5;
142
+ }
143
+ 40% {
144
+ transform: scale(1);
145
+ opacity: 1;
146
+ }
147
+ }
148
+
149
+ /* Enhanced animations */
150
  @keyframes fadeInUp {
151
  from {
152
  opacity: 0;
153
+ transform: translateY(30px);
154
  }
155
  to {
156
  opacity: 1;
157
  transform: translateY(0);
158
  }
159
  }
160
+
161
+ @keyframes slideInLeft {
162
+ from {
163
+ opacity: 0;
164
+ transform: translateX(-30px);
165
+ }
166
+ to {
167
+ opacity: 1;
168
+ transform: translateX(0);
169
+ }
170
+ }
171
+
172
+ @keyframes pulse-glow {
173
+ 0%, 100% {
174
+ box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
175
+ }
176
+ 50% {
177
+ box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
178
+ }
179
+ }
180
+
181
+ .animate-fadeInUp {
182
+ animation: fadeInUp 0.6s ease-out;
183
+ }
184
+
185
+ .animate-slideInLeft {
186
+ animation: slideInLeft 0.6s ease-out;
187
+ }
188
+
189
+ .animate-pulse-glow {
190
+ animation: pulse-glow 2s infinite;
191
+ }
192
+
193
+ /* Enhanced button styles */
194
+ .btn-gradient {
195
+ background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
196
+ color: white;
197
+ transition: all 0.3s ease;
198
+ }
199
+
200
+ .btn-gradient:hover {
201
+ background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
202
+ transform: translateY(-2px);
203
+ box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
204
+ }
205
+
206
+ /* Floating animation */
207
+ @keyframes float {
208
+ 0%, 100% {
209
+ transform: translateY(0px);
210
+ }
211
+ 50% {
212
+ transform: translateY(-10px);
213
+ }
214
+ }
215
+
216
+ .animate-float {
217
+ animation: float 3s ease-in-out infinite;
218
+ }
219
+
220
+ /* Enhanced table styles */
221
+ .table-hover tbody tr {
222
+ transition: all 0.2s ease;
223
+ }
224
+
225
+ .table-hover tbody tr:hover {
226
+ background-color: rgba(59, 130, 246, 0.05);
227
+ transform: scale(1.01);
228
+ }
229
+
230
+ /* Custom notification badge */
231
+ .notification-badge {
232
+ position: relative;
233
+ }
234
+
235
+ .notification-badge::after {
236
+ content: '';
237
+ position: absolute;
238
+ top: -2px;
239
+ right: -2px;
240
+ width: 8px;
241
+ height: 8px;
242
+ background: #ef4444;
243
+ border-radius: 50%;
244
+ animation: pulse 2s infinite;
245
+ }
246
+
247
+ @keyframes pulse {
248
+ 0% {
249
+ box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
250
+ }
251
+ 70% {
252
+ box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
253
+ }
254
+ 100% {
255
+ box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
256
+ }
257
+ }
258
+
259
+ /* Progress bar with gradient */
260
+ .progress-gradient {
261
+ background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
262
+ background-size: 200% 100%;
263
+ animation: gradient-shift 3s ease infinite;
264
+ }
265
+
266
+ @keyframes gradient-shift {
267
+ 0% {
268
+ background-position: 0% 50%;
269
+ }
270
+ 50% {
271
+ background-position: 100% 50%;
272
+ }
273
+ 100% {
274
+ background-position: 0% 50%;
275
+ }
276
+ }
277
+
278
+ /* Custom select dropdown */
279
+ .custom-select {
280
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
281
+ background-position: right 0.5rem center;
282
+ background-repeat: no-repeat;
283
+ background-size: 1.5em 1.5em;
284
+ padding-right: 2.5rem;
285
+ }
286
+
287
+ /* Enhanced modal backdrop */
288
+ .modal-backdrop {
289
+ background: rgba(0, 0, 0, 0.5);
290
+ backdrop-filter: blur(5px);
291
+ -webkit-backdrop-filter: blur(5px);
292
+ }
293
+
294
+ /* Skeleton loading */
295
+ .skeleton {
296
+ background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
297
+ background-size: 200% 100%;
298
+ animation: loading 1.5s infinite;
299
+ }
300
+
301
+ @keyframes loading {
302
+ 0% {
303
+ background-position: 200% 0;
304
+ }
305
+ 100% {
306
+ background-position: -200% 0;
307
+ }
308
+ }
309
+
310
+ /* Enhanced focus styles */
311
+ .focus-ring {
312
+ transition: all 0.2s ease;
313
+ }
314
+
315
+ .focus-ring:focus {
316
+ outline: none;
317
+ ring: 2px;
318
+ ring-color: #3b82f6;
319
+ ring-offset: 2px;
320
+ }
321
+
322
+ /* Dark mode specific adjustments */
323
+ .dark .btn-gradient {
324
+ background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
325
+ }
326
+
327
+ .dark .btn-gradient:hover {
328
+ background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
329
+ }
330
+
331
+ /* Responsive text sizes */
332
+ @media (max-width: 640px) {
333
+ .text-responsive {
334
+ font-size: 0.875rem;
335
+ }
336
+ }
337
+
338
+ @media (min-width: 641px) and (max-width: 1024px) {
339
+ .text-responsive {
340
+ font-size: 1rem;
341
+ }
342
+ }
343
+
344
+ @media (min-width: 1025px) {
345
+ .text-responsive {
346
+ font-size: 1.125rem;
347
+ }
348
+ }