Hugging Face's logo

Spaces:
Wasim0606
/
trendmaster-pro
Running

App Files Community
Wasim0606 commited on
Commit
994f886
·
verified ·
1 Parent(s): b37a625

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +654 -593
index.html CHANGED
@@ -7,45 +7,56 @@
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
9
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
10
  <style>
 
 
 
 
 
11
  body {
12
  font-family: 'Open Sans', sans-serif;
13
- background-color: #0a1922;
14
  color: #e2e8f0;
15
  }
16
  h1, h2, h3, h4, h5, h6 {
17
  font-family: 'Montserrat', sans-serif;
18
  }
19
  .gradient-bg {
20
- background: linear-gradient(135deg, #1a5f7a 0%, #0a1922 100%);
21
  }
22
  .gold-accent {
23
- color: #ffd700;
24
  }
25
  .gold-border {
26
- border-color: #ffd700;
27
  }
28
  .gold-bg {
29
- background-color: #ffd700;
30
  }
31
  .dark-card {
32
  background-color: #162a38;
33
- border: 1px solid #1a5f7a;
 
 
 
 
 
34
  }
35
  .heatmap-cell {
36
  transition: all 0.3s ease;
37
  }
38
  .heatmap-cell:hover {
39
- transform: scale(1.1);
40
- box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
41
  }
42
  .search-box {
43
  background-color: rgba(26, 95, 122, 0.3);
44
- border: 1px solid #1a5f7a;
45
  }
46
  .search-box:focus {
47
  outline: none;
48
- border-color: #ffd700;
49
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
50
  }
51
  .nav-item {
@@ -58,7 +69,7 @@
58
  height: 2px;
59
  bottom: 0;
60
  left: 0;
61
- background-color: #ffd700;
62
  transition: width 0.3s ease;
63
  }
64
  .nav-item:hover::after {
@@ -69,7 +80,7 @@
69
  }
70
  .sidebar-item:hover {
71
  background-color: rgba(26, 95, 122, 0.5);
72
- border-left: 3px solid #ffd700;
73
  }
74
  .trend-up {
75
  color: #4ade80;
@@ -77,9 +88,23 @@
77
  .trend-down {
78
  color: #f87171;
79
  }
80
- .pricing-card:hover {
81
- transform: translateY(-10px);
82
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
  }
84
  @keyframes pulse {
85
  0%, 100% {
@@ -96,7 +121,7 @@
96
  </head>
97
  <body class="min-h-screen">
98
  <!-- Navigation -->
99
- <nav class="gradient-bg py-4 px-6 shadow-lg">
100
  <div class="max-w-7xl mx-auto flex justify-between items-center">
101
  <div class="flex items-center space-x-2">
102
  <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 gold-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -105,11 +130,11 @@
105
  <span class="text-xl font-bold gold-accent">TrendMaster Pro</span>
106
  </div>
107
  <div class="hidden md:flex space-x-8">
108
- <a href="#" class="nav-item text-white hover:text-gold-300 py-2">Dashboard</a>
109
- <a href="#" class="nav-item text-white hover:text-gold-300 py-2">Market Analysis</a>
110
- <a href="#" class="nav-item text-white hover:text-gold-300 py-2">Supplier Network</a>
111
- <a href="#" class="nav-item text-white hover:text-gold-300 py-2">Knowledge Hub</a>
112
- <a href="#" class="nav-item text-white hover:text-gold-300 py-2">Community</a>
113
  </div>
114
  <div class="flex items-center space-x-4">
115
  <button class="bg-transparent border gold-border text-white px-4 py-2 rounded hover:bg-opacity-10 hover:bg-gold-300 transition">
@@ -118,575 +143,603 @@
118
  <button class="gold-bg text-gray-900 px-4 py-2 rounded font-medium hover:bg-opacity-90 transition">
119
  Get Started
120
  </button>
121
- <button class="md:hidden text-white">
122
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
123
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
124
  </svg>
125
  </button>
126
  </div>
127
  </div>
 
 
 
 
 
 
 
 
 
 
128
  </nav>
129
 
130
- <!-- Main Content -->
131
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
132
- <!-- Search and Filters -->
133
- <div class="mb-8">
134
- <div class="flex flex-col md:flex-row gap-4">
135
- <div class="flex-1">
136
- <div class="relative">
137
- <input type="text" placeholder="Try: 'Show me kitchen gadgets under $50 gaining popularity in European markets with 4+ star ratings'"
138
- class="w-full search-box rounded-lg px-6 py-4 text-white placeholder-gray-400 focus:placeholder-gray-500">
139
- <button class="absolute right-3 top-3 gold-bg text-gray-900 p-2 rounded-md">
140
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
141
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
142
- </svg>
143
  </button>
144
  </div>
145
  </div>
146
- <div class="flex gap-2">
147
- <button class="dark-card px-4 py-2 rounded-lg flex items-center gap-2">
148
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
149
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
150
- </svg>
151
- Filters
152
- </button>
153
- <button class="dark-card px-4 py-2 rounded-lg flex items-center gap-2">
154
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
155
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
156
- </svg>
157
- Views
158
- </button>
 
159
  </div>
160
  </div>
161
  </div>
 
162
 
163
- <!-- Dashboard Overview -->
164
- <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
165
- <div class="dark-card rounded-lg p-6">
166
- <div class="flex justify-between items-start">
167
- <div>
168
- <p class="text-gray-400">Total Products Tracked</p>
169
- <p class="text-3xl font-bold mt-2">24,857</p>
170
- </div>
171
- <div class="bg-blue-900 bg-opacity-50 p-2 rounded-full">
172
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
173
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
174
- </svg>
175
- </div>
176
- </div>
177
- <div class="mt-4 flex items-center">
178
- <span class="trend-up flex items-center">
179
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
180
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
181
- </svg>
182
- 12.5%
183
- </span>
184
- <span class="text-gray-400 text-sm ml-2">vs last month</span>
185
  </div>
 
 
186
  </div>
187
- <div class="dark-card rounded-lg p-6">
188
- <div class="flex justify-between items-start">
189
- <div>
190
- <p class="text-gray-400">Emerging Trends</p>
191
- <p class="text-3xl font-bold mt-2">143</p>
192
- </div>
193
- <div class="bg-green-900 bg-opacity-50 p-2 rounded-full">
194
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
195
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
196
- </svg>
197
- </div>
198
- </div>
199
- <div class="mt-4 flex items-center">
200
- <span class="trend-up flex items-center">
201
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
202
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
203
- </svg>
204
- 8.2%
205
- </span>
206
- <span class="text-gray-400 text-sm ml-2">vs last week</span>
207
  </div>
 
 
208
  </div>
209
- <div class="dark-card rounded-lg p-6">
210
- <div class="flex justify-between items-start">
211
- <div>
212
- <p class="text-gray-400">Verified Suppliers</p>
213
- <p class="text-3xl font-bold mt-2">3,742</p>
214
- </div>
215
- <div class="bg-purple-900 bg-opacity-50 p-2 rounded-full">
216
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
217
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
218
- </svg>
219
- </div>
220
  </div>
221
- <div class="mt-4 flex items-center">
222
- <span class="trend-up flex items-center">
223
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
224
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
225
- </svg>
226
- 5.7%
227
- </span>
228
- <span class="text-gray-400 text-sm ml-2">new this month</span>
 
 
229
  </div>
 
 
230
  </div>
231
- <div class="dark-card rounded-lg p-6">
232
- <div class="flex justify-between items-start">
233
- <div>
234
- <p class="text-gray-400">AI Predictions</p>
235
- <p class="text-3xl font-bold mt-2">92%</p>
236
- </div>
237
- <div class="bg-yellow-900 bg-opacity-50 p-2 rounded-full">
238
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
239
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
240
- </svg>
241
- </div>
242
  </div>
243
- <div class="mt-4 flex items-center">
244
- <span class="trend-up flex items-center">
245
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
246
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
247
- </svg>
248
- 3.1%
249
- </span>
250
- <span class="text-gray-400 text-sm ml-2">accuracy gain</span>
 
 
251
  </div>
 
 
252
  </div>
253
  </div>
 
254
 
255
- <!-- Main Dashboard Content -->
256
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
257
- <!-- Left Column -->
258
- <div class="lg:col-span-2 space-y-6">
259
- <!-- Market Trends Chart -->
260
- <div class="dark-card rounded-lg p-6">
261
- <div class="flex justify-between items-center mb-6">
262
- <h3 class="text-xl font-bold">Market Trends Analysis</h3>
263
- <div class="flex space-x-2">
264
- <button class="px-3 py-1 text-sm rounded bg-blue-900 bg-opacity-30">1M</button>
265
- <button class="px-3 py-1 text-sm rounded bg-gray-700 bg-opacity-30">3M</button>
266
- <button class="px-3 py-1 text-sm rounded bg-gray-700 bg-opacity-30">6M</button>
267
- <button class="px-3 py-1 text-sm rounded bg-gray-700 bg-opacity-30">1Y</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
268
  </div>
269
  </div>
270
- <div class="h-80">
271
- <canvas id="marketTrendsChart"></canvas>
272
- </div>
273
- </div>
274
-
275
- <!-- Emerging Products -->
276
- <div class="dark-card rounded-lg p-6">
277
- <div class="flex justify-between items-center mb-6">
278
- <h3 class="text-xl font-bold">Emerging Products</h3>
279
- <button class="text-sm gold-accent flex items-center">
280
- View All
281
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
282
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
283
- </svg>
284
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
285
  </div>
286
- <div class="overflow-x-auto">
287
- <table class="min-w-full divide-y divide-gray-700">
288
- <thead>
289
- <tr>
290
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Product</th>
291
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Marketplace</th>
292
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Price</th>
293
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Trend</th>
294
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Rating</th>
295
- </tr>
296
- </thead>
297
- <tbody class="divide-y divide-gray-700">
298
- <tr class="hover:bg-gray-800 transition">
299
- <td class="px-4 py-4 whitespace-nowrap">
300
- <div class="flex items-center">
301
- <div class="flex-shrink-0 h-10 w-10 bg-gray-600 rounded-md"></div>
302
- <div class="ml-4">
303
- <div class="text-sm font-medium">Smart Posture Corrector</div>
304
- <div class="text-sm text-gray-400">Health & Wellness</div>
305
- </div>
306
- </div>
307
- </td>
308
- <td class="px-4 py-4 whitespace-nowrap text-sm">Amazon US</td>
309
- <td class="px-4 py-4 whitespace-nowrap text-sm">$39.99</td>
310
- <td class="px-4 py-4 whitespace-nowrap">
311
- <span class="trend-up flex items-center">
312
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
313
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
314
- </svg>
315
- 87%
316
- </span>
317
- </td>
318
- <td class="px-4 py-4 whitespace-nowrap">
319
- <div class="flex items-center">
320
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
321
- <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
322
- </svg>
323
- <span class="ml-1 text-sm">4.7</span>
324
- </div>
325
- </td>
326
- </tr>
327
- <tr class="hover:bg-gray-800 transition">
328
- <td class="px-4 py-4 whitespace-nowrap">
329
- <div class="flex items-center">
330
- <div class="flex-shrink-0 h-10 w-10 bg-gray-600 rounded-md"></div>
331
- <div class="ml-4">
332
- <div class="text-sm font-medium">Magnetic Phone Car Mount</div>
333
- <div class="text-sm text-gray-400">Automotive</div>
334
- </div>
335
- </div>
336
- </td>
337
- <td class="px-4 py-4 whitespace-nowrap text-sm">Shopify Stores</td>
338
- <td class="px-4 py-4 whitespace-nowrap text-sm">$24.95</td>
339
- <td class="px-4 py-4 whitespace-nowrap">
340
- <span class="trend-up flex items-center">
341
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
342
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
343
- </svg>
344
- 65%
345
- </span>
346
- </td>
347
- <td class="px-4 py-4 whitespace-nowrap">
348
- <div class="flex items-center">
349
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
350
- <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
351
- </svg>
352
- <span class="ml-1 text-sm">4.5</span>
353
- </div>
354
- </td>
355
- </tr>
356
- <tr class="hover:bg-gray-800 transition">
357
- <td class="px-4 py-4 whitespace-nowrap">
358
- <div class="flex items-center">
359
- <div class="flex-shrink-0 h-10 w-10 bg-gray-600 rounded-md"></div>
360
- <div class="ml-4">
361
- <div class="text-sm font-medium">Reusable Silicone Food Covers</div>
362
- <div class="text-sm text-gray-400">Kitchen</div>
363
- </div>
364
- </div>
365
- </td>
366
- <td class="px-4 py-4 whitespace-nowrap text-sm">Alibaba</td>
367
- <td class="px-4 py-4 whitespace-nowrap text-sm">$12.99</td>
368
- <td class="px-4 py-4 whitespace-nowrap">
369
- <span class="trend-up flex items-center">
370
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
371
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
372
- </svg>
373
- 72%
374
- </span>
375
- </td>
376
- <td class="px-4 py-4 whitespace-nowrap">
377
- <div class="flex items-center">
378
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
379
- <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
380
- </svg>
381
- <span class="ml-1 text-sm">4.8</span>
382
- </div>
383
- </td>
384
- </tr>
385
- <tr class="hover:bg-gray-800 transition">
386
- <td class="px-4 py-4 whitespace-nowrap">
387
- <div class="flex items-center">
388
- <div class="flex-shrink-0 h-10 w-10 bg-gray-600 rounded-md"></div>
389
- <div class="ml-4">
390
- <div class="text-sm font-medium">Adjustable Dumbbell Set</div>
391
- <div class="text-sm text-gray-400">Fitness</div>
392
- </div>
393
- </div>
394
- </td>
395
- <td class="px-4 py-4 whitespace-nowrap text-sm">Amazon UK</td>
396
- <td class="px-4 py-4 whitespace-nowrap text-sm">$89.99</td>
397
- <td class="px-4 py-4 whitespace-nowrap">
398
- <span class="trend-up flex items-center">
399
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
400
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
401
- </svg>
402
- 54%
403
- </span>
404
- </td>
405
- <td class="px-4 py-4 whitespace-nowrap">
406
- <div class="flex items-center">
407
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
408
- <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
409
- </svg>
410
- <span class="ml-1 text-sm">4.6</span>
411
- </div>
412
- </td>
413
- </tr>
414
- </tbody>
415
- </table>
416
  </div>
417
  </div>
418
  </div>
 
 
 
 
 
 
 
 
419
 
420
- <!-- Right Column -->
421
- <div class="space-y-6">
422
- <!-- Geographic Heatmap -->
423
- <div class="dark-card rounded-lg p-6">
424
- <div class="flex justify-between items-center mb-6">
425
- <h3 class="text-xl font-bold">Geographic Demand</h3>
426
- <button class="text-sm gold-accent flex items-center">
427
- View Map
428
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
429
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
 
 
 
 
 
430
  </svg>
431
- </button>
432
- </div>
433
- <div class="grid grid-cols-3 gap-2">
434
- <div class="heatmap-cell bg-blue-900 bg-opacity-30 p-3 rounded text-center">
435
- <p class="text-xs text-gray-400">North America</p>
436
- <p class="font-bold">42%</p>
437
  </div>
438
- <div class="heatmap-cell bg-blue-800 bg-opacity-30 p-3 rounded text-center">
439
- <p class="text-xs text-gray-400">Europe</p>
440
- <p class="font-bold">28%</p>
441
  </div>
442
- <div class="heatmap-cell bg-blue-700 bg-opacity-30 p-3 rounded text-center">
443
- <p class="text-xs text-gray-400">Asia</p>
444
- <p class="font-bold">18%</p>
 
 
 
445
  </div>
446
- <div class="heatmap-cell bg-blue-600 bg-opacity-30 p-3 rounded text-center">
447
- <p class="text-xs text-gray-400">Australia</p>
448
- <p class="font-bold">7%</p>
449
  </div>
450
- <div class="heatmap-cell bg-blue-500 bg-opacity-30 p-3 rounded text-center">
451
- <p class="text-xs text-gray-400">South America</p>
452
- <p class="font-bold">4%</p>
 
 
 
453
  </div>
454
- <div class="heatmap-cell bg-blue-400 bg-opacity-30 p-3 rounded text-center">
455
- <p class="text-xs text-gray-400">Africa</p>
456
- <p class="font-bold">1%</p>
457
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
458
  </div>
459
  </div>
460
-
461
- <!-- AI Predictions -->
462
- <div class="dark-card rounded-lg p-6">
463
- <div class="flex justify-between items-center mb-6">
464
- <h3 class="text-xl font-bold">AI Predictions</h3>
465
- <div class="flex items-center text-sm gold-accent">
466
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
467
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
468
- </svg>
469
- 92% Accuracy
470
- </div>
 
 
 
 
 
 
471
  </div>
472
- <div class="space-y-4">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
473
  <div>
474
- <div class="flex justify-between text-sm mb-1">
475
- <span>Smart Kitchen Gadgets</span>
476
- <span class="font-medium">High Potential</span>
477
  </div>
478
  <div class="w-full bg-gray-700 rounded-full h-2">
479
- <div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
480
  </div>
481
  </div>
 
482
  <div>
483
- <div class="flex justify-between text-sm mb-1">
484
- <span>Eco-Friendly Products</span>
485
- <span class="font-medium">Growing</span>
486
  </div>
487
  <div class="w-full bg-gray-700 rounded-full h-2">
488
- <div class="bg-yellow-500 h-2 rounded-full" style="width: 72%"></div>
489
  </div>
490
  </div>
 
491
  <div>
492
- <div class="flex justify-between text-sm mb-1">
493
- <span>Home Fitness Equipment</span>
494
- <span class="font-medium">Stable</span>
495
  </div>
496
  <div class="w-full bg-gray-700 rounded-full h-2">
497
- <div class="bg-blue-500 h-2 rounded-full" style="width: 65%"></div>
498
  </div>
499
  </div>
 
 
 
 
 
 
500
  <div>
501
- <div class="flex justify-between text-sm mb-1">
502
- <span>Pet Tech Accessories</span>
503
- <span class="font-medium">Emerging</span>
504
  </div>
505
  <div class="w-full bg-gray-700 rounded-full h-2">
506
- <div class="bg-purple-500 h-2 rounded-full" style="width: 58%"></div>
507
  </div>
508
  </div>
509
- </div>
510
- </div>
511
-
512
- <!-- Supplier Spotlight -->
513
- <div class="dark-card rounded-lg p-6">
514
- <div class="flex justify-between items-center mb-6">
515
- <h3 class="text-xl font-bold">Supplier Spotlight</h3>
516
- <button class="text-sm gold-accent flex items-center">
517
- View All
518
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
519
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
520
- </svg>
521
- </button>
522
- </div>
523
- <div class="space-y-4">
524
- <div class="flex items-start">
525
- <div class="flex-shrink-0 h-10 w-10 bg-gray-600 rounded-full"></div>
526
- <div class="ml-3">
527
- <p class="text-sm font-medium">Shenzhen TechGoods</p>
528
- <p class="text-xs text-gray-400">Electronics & Gadgets</p>
529
- <div class="mt-1 flex items-center">
530
- <div class="flex items-center">
531
- <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
532
- <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
533
- </svg>
534
- <span class="text-xs ml-1">4.8</span>
535
- </div>
536
- <span class="mx-2 text-gray-500">|</span>
537
- <span class="text-xs text-green-400">98% Fulfillment</span>
538
- </div>
539
  </div>
540
- </div>
541
- <div class="flex items-start">
542
- <div class="flex-shrink-0 h-10 w-10 bg-gray-600 rounded-full"></div>
543
- <div class="ml-3">
544
- <p class="text-sm font-medium">Guangdong HomeLiving</p>
545
- <p class="text-xs text-gray-400">Home & Kitchen</p>
546
- <div class="mt-1 flex items-center">
547
- <div class="flex items-center">
548
- <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
549
- <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
550
- </svg>
551
- <span class="text-xs ml-1">4.6</span>
552
- </div>
553
- <span class="mx-2 text-gray-500">|</span>
554
- <span class="text-xs text-green-400">95% Fulfillment</span>
555
- </div>
556
  </div>
557
  </div>
558
- <div class="flex items-start">
559
- <div class="flex-shrink-0 h-10 w-10 bg-gray-600 rounded-full"></div>
560
- <div class="ml-3">
561
- <p class="text-sm font-medium">Zhejiang FashionWear</p>
562
- <p class="text-xs text-gray-400">Apparel & Accessories</p>
563
- <div class="mt-1 flex items-center">
564
- <div class="flex items-center">
565
- <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
566
- <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
567
- </svg>
568
- <span class="text-xs ml-1">4.5</span>
569
- </div>
570
- <span class="mx-2 text-gray-500">|</span>
571
- <span class="text-xs text-green-400">93% Fulfillment</span>
572
- </div>
573
  </div>
574
  </div>
575
  </div>
576
  </div>
577
-
578
- <!-- Quick Actions -->
579
- <div class="dark-card rounded-lg p-6">
580
- <h3 class="text-xl font-bold mb-6">Quick Actions</h3>
581
- <div class="grid grid-cols-2 gap-3">
582
- <button class="flex flex-col items-center justify-center p-3 rounded-lg bg-gray-700 hover:bg-gray-600 transition">
583
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 gold-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
584
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
585
- </svg>
586
- <span class="mt-2 text-sm">Export Data</span>
587
- </button>
588
- <button class="flex flex-col items-center justify-center p-3 rounded-lg bg-gray-700 hover:bg-gray-600 transition">
589
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 gold-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
590
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
591
- </svg>
592
- <span class="mt-2 text-sm">New Alert</span>
593
- </button>
594
- <button class="flex flex-col items-center justify-center p-3 rounded-lg bg-gray-700 hover:bg-gray-600 transition">
595
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 gold-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
596
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
597
- </svg>
598
- <span class="mt-2 text-sm">Schedule</span>
599
- </button>
600
- <button class="flex flex-col items-center justify-center p-3 rounded-lg bg-gray-700 hover:bg-gray-600 transition">
601
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 gold-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
602
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
603
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
604
- </svg>
605
- <span class="mt-2 text-sm">Insights</span>
606
- </button>
607
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
608
  </div>
609
  </div>
610
  </div>
 
611
 
612
- <!-- Knowledge Hub Section -->
613
- <div class="mt-12">
614
- <div class="flex justify-between items-center mb-8">
615
- <h2 class="text-2xl font-bold">Knowledge Hub</h2>
616
- <button class="text-sm gold-accent flex items-center">
617
- Browse All Resources
618
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
619
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
 
 
 
 
620
  </svg>
621
- </button>
 
 
 
 
 
622
  </div>
623
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
624
- <div class="dark-card rounded-lg overflow-hidden hover:shadow-lg transition">
625
- <div class="h-40 bg-gradient-to-r from-blue-900 to-blue-700 flex items-center justify-center">
626
- <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
627
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
628
- </svg>
629
- </div>
630
- <div class="p-6">
631
- <h3 class="text-lg font-bold mb-2">Supplier Verification Guide</h3>
632
- <p class="text-gray-400 text-sm mb-4">Learn how to thoroughly vet suppliers and avoid common pitfalls in the sourcing process.</p>
633
- <div class="flex justify-between items-center">
634
- <span class="text-xs text-gray-500">45 min read</span>
635
- <button class="text-xs gold-accent flex items-center">
636
- Read Now
637
- <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
638
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
639
- </svg>
640
- </button>
641
- </div>
642
- </div>
643
  </div>
644
- <div class="dark-card rounded-lg overflow-hidden hover:shadow-lg transition">
645
- <div class="h-40 bg-gradient-to-r from-purple-900 to-purple-700 flex items-center justify-center">
646
- <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
647
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
648
- </svg>
649
- </div>
650
- <div class="p-6">
651
- <h3 class="text-lg font-bold mb-2">Identifying Early Trends</h3>
652
- <p class="text-gray-400 text-sm mb-4">Master our proprietary methodology for spotting winning products before they go mainstream.</p>
653
- <div class="flex justify-between items-center">
654
- <span class="text-xs text-gray-500">30 min read</span>
655
- <button class="text-xs gold-accent flex items-center">
656
- Read Now
657
- <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
658
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
659
- </svg>
660
- </button>
661
- </div>
662
- </div>
663
  </div>
664
- <div class="dark-card rounded-lg overflow-hidden hover:shadow-lg transition">
665
- <div class="h-40 bg-gradient-to-r from-yellow-900 to-yellow-700 flex items-center justify-center">
666
- <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
667
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
668
- </svg>
669
- </div>
670
- <div class="p-6">
671
- <h3 class="text-lg font-bold mb-2">Market Entry Strategies</h3>
672
- <p class="text-gray-400 text-sm mb-4">Comprehensive guide to launching products in new markets with calculated risk assessment.</p>
673
- <div class="flex justify-between items-center">
674
- <span class="text-xs text-gray-500">60 min read</span>
675
- <button class="text-xs gold-accent flex items-center">
676
- Read Now
677
- <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
678
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
679
- </svg>
680
- </button>
681
- </div>
682
- </div>
683
  </div>
684
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
685
  </div>
686
  </div>
687
 
688
  <!-- Footer -->
689
- <footer class="gradient-bg mt-16 py-12 px-6">
690
  <div class="max-w-7xl mx-auto">
691
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
692
  <div>
@@ -710,7 +763,7 @@
710
  <div>
711
  <h4 class="text-white font-bold mb-4">Resources</h4>
712
  <ul class="space-y-2">
713
- <li><a href="#" class="text-gray-400 hover:text-white text-sm">Knowledge Hub</a></li>
714
  <li><a href="#" class="text-gray-400 hover:text-white text-sm">Case Studies</a></li>
715
  <li><a href="#" class="text-gray-400 hover:text-white text-sm">Community</a></li>
716
  <li><a href="#" class="text-gray-400 hover:text-white text-sm">Webinars</a></li>
@@ -750,102 +803,110 @@
750
  </footer>
751
 
752
  <script>
753
- // Market Trends Chart
754
- const marketTrendsCtx = document.getElementById('marketTrendsChart').getContext('2d');
755
- const marketTrendsChart = new Chart(marketTrendsCtx, {
756
- type: 'line',
757
- data: {
758
- labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
759
- datasets: [
760
- {
761
- label: 'Amazon',
762
- data: [1200, 1900, 1700, 2100, 2300, 2500, 2700, 3000, 2800, 3100, 3300, 3500],
763
- borderColor: '#3b82f6',
764
- backgroundColor: 'rgba(59, 130, 246, 0.1)',
765
- tension: 0.3,
766
- fill: true
767
- },
768
- {
769
- label: 'Shopify',
770
- data: [800, 1200, 1400, 1600, 1800, 2000, 2200, 2400, 2600, 2800, 3000, 3200],
771
- borderColor: '#8b5cf6',
772
- backgroundColor: 'rgba(139, 92, 246, 0.1)',
773
- tension: 0.3,
774
- fill: true
775
- },
776
- {
777
- label: 'Alibaba',
778
- data: [600, 900, 1100, 1300, 1500, 1700, 1900, 2100, 2300, 2500, 2700, 2900],
779
- borderColor: '#10b981',
780
- backgroundColor: 'rgba(16, 185, 129, 0.1)',
781
- tension: 0.3,
782
- fill: true
783
- }
784
- ]
785
- },
786
- options: {
787
- responsive: true,
788
- maintainAspectRatio: false,
789
- plugins: {
790
- legend: {
791
- position: 'top',
792
- labels: {
793
- color: '#e2e8f0'
794
- }
795
- },
796
- tooltip: {
797
- mode: 'index',
798
- intersect: false,
799
- }
800
  },
801
- scales: {
802
- x: {
803
- grid: {
804
- color: 'rgba(255, 255, 255, 0.1)'
805
- },
806
- ticks: {
807
- color: '#e2e8f0'
808
- }
809
- },
810
- y: {
811
- grid: {
812
- color: 'rgba(255, 255, 255, 0.1)'
813
- },
814
- ticks: {
815
- color: '#e2e8f0'
816
- }
817
- }
818
  },
819
- interaction: {
820
- mode: 'nearest',
821
- axis: 'x',
822
- intersect: false
 
 
 
 
 
 
 
 
 
 
 
 
 
823
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
824
  }
825
- });
 
 
 
826
 
827
  // Mobile menu toggle
828
- document.querySelector('.md\\:hidden').addEventListener('click', function() {
829
- const mobileMenu = document.querySelector('.md\\:flex.space-x-8');
830
  mobileMenu.classList.toggle('hidden');
831
- mobileMenu.classList.toggle('flex');
832
- mobileMenu.classList.toggle('flex-col');
833
- mobileMenu.classList.toggle('absolute');
834
- mobileMenu.classList.toggle('top-16');
835
- mobileMenu.classList.toggle('left-0');
836
- mobileMenu.classList.toggle('right-0');
837
- mobileMenu.classList.toggle('bg-gray-900');
838
- mobileMenu.classList.toggle('p-4');
839
- mobileMenu.classList.toggle('space-y-4');
840
- mobileMenu.classList.toggle('space-x-0');
841
- mobileMenu.classList.toggle('z-50');
842
  });
843
 
844
- // Simulate loading
845
- document.addEventListener('DOMContentLoaded', function() {
846
- setTimeout(function() {
847
- document.body.classList.remove('opacity-0');
848
- }, 100);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
849
  });
850
  </script>
851
  <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=Wasim0606/trendmaster-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
9
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
11
  <style>
12
+ :root {
13
+ --primary-dark: #0a1922;
14
+ --primary-blue: #1a5f7a;
15
+ --accent-gold: #ffd700;
16
+ }
17
  body {
18
  font-family: 'Open Sans', sans-serif;
19
+ background-color: var(--primary-dark);
20
  color: #e2e8f0;
21
  }
22
  h1, h2, h3, h4, h5, h6 {
23
  font-family: 'Montserrat', sans-serif;
24
  }
25
  .gradient-bg {
26
+ background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
27
  }
28
  .gold-accent {
29
+ color: var(--accent-gold);
30
  }
31
  .gold-border {
32
+ border-color: var(--accent-gold);
33
  }
34
  .gold-bg {
35
+ background-color: var(--accent-gold);
36
  }
37
  .dark-card {
38
  background-color: #162a38;
39
+ border: 1px solid var(--primary-blue);
40
+ transition: all 0.3s ease;
41
+ }
42
+ .dark-card:hover {
43
+ transform: translateY(-2px);
44
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
45
  }
46
  .heatmap-cell {
47
  transition: all 0.3s ease;
48
  }
49
  .heatmap-cell:hover {
50
+ transform: scale(1.05);
51
+ box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
52
  }
53
  .search-box {
54
  background-color: rgba(26, 95, 122, 0.3);
55
+ border: 1px solid var(--primary-blue);
56
  }
57
  .search-box:focus {
58
  outline: none;
59
+ border-color: var(--accent-gold);
60
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
61
  }
62
  .nav-item {
 
69
  height: 2px;
70
  bottom: 0;
71
  left: 0;
72
+ background-color: var(--accent-gold);
73
  transition: width 0.3s ease;
74
  }
75
  .nav-item:hover::after {
 
80
  }
81
  .sidebar-item:hover {
82
  background-color: rgba(26, 95, 122, 0.5);
83
+ border-left: 3px solid var(--accent-gold);
84
  }
85
  .trend-up {
86
  color: #4ade80;
 
88
  .trend-down {
89
  color: #f87171;
90
  }
91
+ .feature-card:hover {
92
+ transform: translateY(-5px);
93
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
94
+ }
95
+ .api-endpoint {
96
+ background-color: rgba(26, 95, 122, 0.2);
97
+ border-left: 3px solid var(--accent-gold);
98
+ }
99
+ .toggle-checkbox:checked {
100
+ right: 0;
101
+ border-color: var(--accent-gold);
102
+ }
103
+ .toggle-checkbox:checked + .toggle-label {
104
+ background-color: var(--accent-gold);
105
+ }
106
+ .architecture-diagram {
107
+ background: linear-gradient(135deg, rgba(26, 95, 122, 0.1) 0%, rgba(10, 25, 34, 0.8) 100%);
108
  }
109
  @keyframes pulse {
110
  0%, 100% {
 
121
  </head>
122
  <body class="min-h-screen">
123
  <!-- Navigation -->
124
+ <nav class="gradient-bg py-4 px-6 shadow-lg sticky top-0 z-50">
125
  <div class="max-w-7xl mx-auto flex justify-between items-center">
126
  <div class="flex items-center space-x-2">
127
  <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 gold-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
130
  <span class="text-xl font-bold gold-accent">TrendMaster Pro</span>
131
  </div>
132
  <div class="hidden md:flex space-x-8">
133
+ <a href="#features" class="nav-item text-white hover:text-gold-300 py-2">Features</a>
134
+ <a href="#architecture" class="nav-item text-white hover:text-gold-300 py-2">Architecture</a>
135
+ <a href="#api" class="nav-item text-white hover:text-gold-300 py-2">API</a>
136
+ <a href="#admin" class="nav-item text-white hover:text-gold-300 py-2">Admin</a>
137
+ <a href="#integrations" class="nav-item text-white hover:text-gold-300 py-2">Integrations</a>
138
  </div>
139
  <div class="flex items-center space-x-4">
140
  <button class="bg-transparent border gold-border text-white px-4 py-2 rounded hover:bg-opacity-10 hover:bg-gold-300 transition">
 
143
  <button class="gold-bg text-gray-900 px-4 py-2 rounded font-medium hover:bg-opacity-90 transition">
144
  Get Started
145
  </button>
146
+ <button class="md:hidden text-white" id="mobile-menu-button">
147
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
148
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
149
  </svg>
150
  </button>
151
  </div>
152
  </div>
153
+ <!-- Mobile Menu -->
154
+ <div class="md:hidden hidden absolute left-0 right-0 bg-gray-900 z-50" id="mobile-menu">
155
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
156
+ <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-800">Features</a>
157
+ <a href="#architecture" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-800">Architecture</a>
158
+ <a href="#api" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-800">API</a>
159
+ <a href="#admin" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-800">Admin</a>
160
+ <a href="#integrations" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-800">Integrations</a>
161
+ </div>
162
+ </div>
163
  </nav>
164
 
165
+ <!-- Hero Section -->
166
+ <div class="gradient-bg">
167
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
168
+ <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
169
+ <div>
170
+ <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">E-Commerce Intelligence <span class="gold-accent">Powered by AI</span></h1>
171
+ <p class="text-xl text-gray-300 mb-8">Aggregate, analyze, and act on trending products across Amazon, Shopify, and Alibaba with our comprehensive intelligence platform.</p>
172
+ <div class="flex flex-col sm:flex-row gap-4">
173
+ <button class="gold-bg text-gray-900 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition text-lg">
174
+ Start Free Trial
175
+ </button>
176
+ <button class="bg-transparent border gold-border text-white px-6 py-3 rounded-lg hover:bg-opacity-10 hover:bg-gold-300 transition text-lg">
177
+ Watch Demo
178
  </button>
179
  </div>
180
  </div>
181
+ <div class="mt-10 lg:mt-0">
182
+ <div class="dark-card rounded-xl overflow-hidden">
183
+ <div class="p-4 bg-gray-800 flex items-center">
184
+ <div class="flex space-x-2">
185
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
186
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
187
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
188
+ </div>
189
+ <div class="flex-1 text-center text-sm text-gray-400">TrendMaster Pro Dashboard</div>
190
+ </div>
191
+ <div class="p-4">
192
+ <div id="heroChart" class="h-64"></div>
193
+ </div>
194
+ </div>
195
  </div>
196
  </div>
197
  </div>
198
+ </div>
199
 
200
+ <!-- Features Section -->
201
+ <div id="features" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
202
+ <div class="text-center mb-16">
203
+ <h2 class="text-3xl font-bold text-white mb-4">Core Platform Features</h2>
204
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">Comprehensive tools designed to give you the competitive edge in e-commerce</p>
205
+ </div>
206
+
207
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
208
+ <!-- Feature 1 -->
209
+ <div class="dark-card p-8 rounded-lg feature-card">
210
+ <div class="w-12 h-12 gold-bg rounded-lg flex items-center justify-center mb-6">
211
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
212
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
213
+ </svg>
 
 
 
 
 
 
 
 
214
  </div>
215
+ <h3 class="text-xl font-bold text-white mb-3">Real-time Trend Detection</h3>
216
+ <p class="text-gray-400">AI-powered algorithms identify emerging product trends before they go mainstream across all major marketplaces.</p>
217
  </div>
218
+
219
+ <!-- Feature 2 -->
220
+ <div class="dark-card p-8 rounded-lg feature-card">
221
+ <div class="w-12 h-12 gold-bg rounded-lg flex items-center justify-center mb-6">
222
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
223
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
224
+ </svg>
 
 
 
 
 
 
 
 
 
 
 
 
 
225
  </div>
226
+ <h3 class="text-xl font-bold text-white mb-3">Visual Product Search</h3>
227
+ <p class="text-gray-400">Upload product images to find similar items across marketplaces with price comparisons and availability metrics.</p>
228
  </div>
229
+
230
+ <!-- Feature 3 -->
231
+ <div class="dark-card p-8 rounded-lg feature-card">
232
+ <div class="w-12 h-12 gold-bg rounded-lg flex items-center justify-center mb-6">
233
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
234
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
235
+ </svg>
 
 
 
 
236
  </div>
237
+ <h3 class="text-xl font-bold text-white mb-3">Marketplace Analytics</h3>
238
+ <p class="text-gray-400">Comprehensive dashboards showing product performance metrics across Amazon, Shopify, and Alibaba in one unified view.</p>
239
+ </div>
240
+
241
+ <!-- Feature 4 -->
242
+ <div class="dark-card p-8 rounded-lg feature-card">
243
+ <div class="w-12 h-12 gold-bg rounded-lg flex items-center justify-center mb-6">
244
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
245
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
246
+ </svg>
247
  </div>
248
+ <h3 class="text-xl font-bold text-white mb-3">Mobile Responsive</h3>
249
+ <p class="text-gray-400">Fully responsive interface optimized for all devices with dedicated mobile apps for iOS and Android.</p>
250
  </div>
251
+
252
+ <!-- Feature 5 -->
253
+ <div class="dark-card p-8 rounded-lg feature-card">
254
+ <div class="w-12 h-12 gold-bg rounded-lg flex items-center justify-center mb-6">
255
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
256
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
257
+ </svg>
 
 
 
 
258
  </div>
259
+ <h3 class="text-xl font-bold text-white mb-3">Hybrid Database</h3>
260
+ <p class="text-gray-400">Optimized SQL/NoSQL hybrid database system designed specifically for high-performance e-commerce data processing.</p>
261
+ </div>
262
+
263
+ <!-- Feature 6 -->
264
+ <div class="dark-card p-8 rounded-lg feature-card">
265
+ <div class="w-12 h-12 gold-bg rounded-lg flex items-center justify-center mb-6">
266
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
267
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
268
+ </svg>
269
  </div>
270
+ <h3 class="text-xl font-bold text-white mb-3">Role-Based Access</h3>
271
+ <p class="text-gray-400">Customizable user permissions with granular control over data access and platform functionality.</p>
272
  </div>
273
  </div>
274
+ </div>
275
 
276
+ <!-- Architecture Section -->
277
+ <div id="architecture" class="bg-gray-900 py-20">
278
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
279
+ <div class="text-center mb-16">
280
+ <h2 class="text-3xl font-bold text-white mb-4">Scalable Cloud Architecture</h2>
281
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">Microservices design built for performance and reliability</p>
282
+ </div>
283
+
284
+ <div class="architecture-diagram rounded-xl p-8 mb-12">
285
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
286
+ <!-- Frontend -->
287
+ <div class="text-center">
288
+ <div class="dark-card p-6 rounded-lg h-full">
289
+ <div class="w-16 h-16 gold-bg rounded-full flex items-center justify-center mx-auto mb-4">
290
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
291
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
292
+ </svg>
293
+ </div>
294
+ <h3 class="text-xl font-bold text-white mb-3">Frontend</h3>
295
+ <ul class="text-gray-400 space-y-2 text-left">
296
+ <li class="flex items-start">
297
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
298
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
299
+ </svg>
300
+ <span>React-based responsive UI</span>
301
+ </li>
302
+ <li class="flex items-start">
303
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
304
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
305
+ </svg>
306
+ <span>Progressive Web App</span>
307
+ </li>
308
+ <li class="flex items-start">
309
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
310
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
311
+ </svg>
312
+ <span>Dark/light theme support</span>
313
+ </li>
314
+ </ul>
315
  </div>
316
  </div>
317
+
318
+ <!-- Backend -->
319
+ <div class="text-center">
320
+ <div class="dark-card p-6 rounded-lg h-full">
321
+ <div class="w-16 h-16 gold-bg rounded-full flex items-center justify-center mx-auto mb-4">
322
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
323
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
324
+ </svg>
325
+ </div>
326
+ <h3 class="text-xl font-bold text-white mb-3">Backend Services</h3>
327
+ <ul class="text-gray-400 space-y-2 text-left">
328
+ <li class="flex items-start">
329
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
330
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
331
+ </svg>
332
+ <span>Microservices architecture</span>
333
+ </li>
334
+ <li class="flex items-start">
335
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
336
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
337
+ </svg>
338
+ <span>Kubernetes orchestration</span>
339
+ </li>
340
+ <li class="flex items-start">
341
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
342
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
343
+ </svg>
344
+ <span>Auto-scaling capabilities</span>
345
+ </li>
346
+ </ul>
347
+ </div>
348
  </div>
349
+
350
+ <!-- Data -->
351
+ <div class="text-center">
352
+ <div class="dark-card p-6 rounded-lg h-full">
353
+ <div class="w-16 h-16 gold-bg rounded-full flex items-center justify-center mx-auto mb-4">
354
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
355
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
356
+ </svg>
357
+ </div>
358
+ <h3 class="text-xl font-bold text-white mb-3">Data Pipeline</h3>
359
+ <ul class="text-gray-400 space-y-2 text-left">
360
+ <li class="flex items-start">
361
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
362
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
363
+ </svg>
364
+ <span>Hybrid SQL/NoSQL database</span>
365
+ </li>
366
+ <li class="flex items-start">
367
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
368
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
369
+ </svg>
370
+ <span>Real-time processing</span>
371
+ </li>
372
+ <li class="flex items-start">
373
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
374
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
375
+ </svg>
376
+ <span>Intelligent caching</span>
377
+ </li>
378
+ </ul>
379
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
380
  </div>
381
  </div>
382
  </div>
383
+
384
+ <div class="text-center mt-12">
385
+ <button class="gold-bg text-gray-900 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition text-lg">
386
+ View Technical Documentation
387
+ </button>
388
+ </div>
389
+ </div>
390
+ </div>
391
 
392
+ <!-- API Section -->
393
+ <div id="api" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
394
+ <div class="text-center mb-16">
395
+ <h2 class="text-3xl font-bold text-white mb-4">Developer API</h2>
396
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">RESTful API with comprehensive documentation and SDKs</p>
397
+ </div>
398
+
399
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
400
+ <div>
401
+ <h3 class="text-2xl font-bold text-white mb-6">API Features</h3>
402
+ <ul class="space-y-6">
403
+ <li class="flex items-start">
404
+ <div class="gold-bg rounded-full p-2 mr-4 flex-shrink-0">
405
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
406
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
407
  </svg>
 
 
 
 
 
 
408
  </div>
409
+ <div>
410
+ <h4 class="text-lg font-bold text-white mb-2">Secure API Gateway</h4>
411
+ <p class="text-gray-400">OAuth 2.0 authentication with rate limiting and comprehensive access controls for all API endpoints.</p>
412
  </div>
413
+ </li>
414
+ <li class="flex items-start">
415
+ <div class="gold-bg rounded-full p-2 mr-4 flex-shrink-0">
416
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
417
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
418
+ </svg>
419
  </div>
420
+ <div>
421
+ <h4 class="text-lg font-bold text-white mb-2">Webhook System</h4>
422
+ <p class="text-gray-400">Real-time notifications for product changes, price updates, and inventory alerts delivered to your endpoints.</p>
423
  </div>
424
+ </li>
425
+ <li class="flex items-start">
426
+ <div class="gold-bg rounded-full p-2 mr-4 flex-shrink-0">
427
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
428
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
429
+ </svg>
430
  </div>
431
+ <div>
432
+ <h4 class="text-lg font-bold text-white mb-2">SDK Support</h4>
433
+ <p class="text-gray-400">Official SDKs available for JavaScript, Python, Java, and PHP with comprehensive documentation and examples.</p>
434
  </div>
435
+ </li>
436
+ </ul>
437
+ </div>
438
+
439
+ <div>
440
+ <div class="bg-gray-800 rounded-lg overflow-hidden">
441
+ <div class="bg-gray-900 px-4 py-3 flex items-center">
442
+ <div class="flex space-x-2 mr-4">
443
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
444
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
445
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
446
+ </div>
447
+ <div class="text-sm text-gray-400">GET /api/v1/products/trending</div>
448
+ </div>
449
+ <div class="p-4">
450
+ <pre class="text-gray-300 text-sm overflow-x-auto">
451
+ <code>
452
+ {
453
+ "data": [
454
+ {
455
+ "id": "prod_abc123",
456
+ "name": "Smart Posture Corrector",
457
+ "marketplace": "amazon",
458
+ "current_price": 39.99,
459
+ "original_price": 49.99,
460
+ "rating": 4.7,
461
+ "review_count": 1245,
462
+ "trend_score": 87,
463
+ "image_url": "https://example.com/image1.jpg",
464
+ "product_url": "https://amazon.com/dp/abc123"
465
+ },
466
+ {
467
+ "id": "prod_def456",
468
+ "name": "Magnetic Phone Car Mount",
469
+ "marketplace": "shopify",
470
+ "current_price": 24.95,
471
+ "original_price": 29.99,
472
+ "rating": 4.5,
473
+ "review_count": 892,
474
+ "trend_score": 65,
475
+ "image_url": "https://example.com/image2.jpg",
476
+ "product_url": "https://store.com/products/def456"
477
+ }
478
+ ],
479
+ "meta": {
480
+ "total_results": 143,
481
+ "page": 1,
482
+ "per_page": 20
483
+ }
484
+ }
485
+ </code>
486
+ </pre>
487
  </div>
488
  </div>
489
+
490
+ <div class="mt-6 grid grid-cols-2 gap-4">
491
+ <div class="api-endpoint p-4 rounded-lg">
492
+ <div class="text-xs text-gray-400 mb-1">POST</div>
493
+ <div class="text-white font-medium">/api/v1/webhooks</div>
494
+ </div>
495
+ <div class="api-endpoint p-4 rounded-lg">
496
+ <div class="text-xs text-gray-400 mb-1">GET</div>
497
+ <div class="text-white font-medium">/api/v1/suppliers</div>
498
+ </div>
499
+ <div class="api-endpoint p-4 rounded-lg">
500
+ <div class="text-xs text-gray-400 mb-1">GET</div>
501
+ <div class="text-white font-medium">/api/v1/marketplaces</div>
502
+ </div>
503
+ <div class="api-endpoint p-4 rounded-lg">
504
+ <div class="text-xs text-gray-400 mb-1">POST</div>
505
+ <div class="text-white font-medium">/api/v1/visual-search</div>
506
  </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+
512
+ <!-- Admin Section -->
513
+ <div id="admin" class="bg-gray-900 py-20">
514
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
515
+ <div class="text-center mb-16">
516
+ <h2 class="text-3xl font-bold text-white mb-4">Admin Portal</h2>
517
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">Complete system management and configuration</p>
518
+ </div>
519
+
520
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
521
+ <div class="dark-card p-8 rounded-lg">
522
+ <h3 class="text-2xl font-bold text-white mb-6">User Management</h3>
523
+ <div class="space-y-6">
524
  <div>
525
+ <div class="flex justify-between items-center mb-2">
526
+ <span class="text-gray-300">Role-Based Access Control</span>
527
+ <span class="text-green-400 text-sm font-medium">Enabled</span>
528
  </div>
529
  <div class="w-full bg-gray-700 rounded-full h-2">
530
+ <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
531
  </div>
532
  </div>
533
+
534
  <div>
535
+ <div class="flex justify-between items-center mb-2">
536
+ <span class="text-gray-300">Custom Permission Sets</span>
537
+ <span class="text-green-400 text-sm font-medium">Enabled</span>
538
  </div>
539
  <div class="w-full bg-gray-700 rounded-full h-2">
540
+ <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
541
  </div>
542
  </div>
543
+
544
  <div>
545
+ <div class="flex justify-between items-center mb-2">
546
+ <span class="text-gray-300">Multi-Factor Authentication</span>
547
+ <span class="text-green-400 text-sm font-medium">Enabled</span>
548
  </div>
549
  <div class="w-full bg-gray-700 rounded-full h-2">
550
+ <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
551
  </div>
552
  </div>
553
+ </div>
554
+ </div>
555
+
556
+ <div class="dark-card p-8 rounded-lg">
557
+ <h3 class="text-2xl font-bold text-white mb-6">System Configuration</h3>
558
+ <div class="space-y-6">
559
  <div>
560
+ <div class="flex justify-between items-center mb-2">
561
+ <span class="text-gray-300">Data Retention Policy</span>
562
+ <span class="text-blue-400 text-sm font-medium">90 days</span>
563
  </div>
564
  <div class="w-full bg-gray-700 rounded-full h-2">
565
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 90%"></div>
566
  </div>
567
  </div>
568
+
569
+ <div>
570
+ <div class="flex justify-between items-center mb-2">
571
+ <span class="text-gray-300">API Rate Limiting</span>
572
+ <span class="text-yellow-400 text-sm font-medium">1000 req/min</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
573
  </div>
574
+ <div class="w-full bg-gray-700 rounded-full h-2">
575
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 75%"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
576
  </div>
577
  </div>
578
+
579
+ <div>
580
+ <div class="flex justify-between items-center mb-2">
581
+ <span class="text-gray-300">Backup Frequency</span>
582
+ <span class="text-purple-400 text-sm font-medium">Daily</span>
583
+ </div>
584
+ <div class="w-full bg-gray-700 rounded-full h-2">
585
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 100%"></div>
 
 
 
 
 
 
 
586
  </div>
587
  </div>
588
  </div>
589
  </div>
590
+ </div>
591
+
592
+ <div class="dark-card p-8 rounded-lg">
593
+ <h3 class="text-2xl font-bold text-white mb-6">Audit Logs</h3>
594
+ <div class="overflow-x-auto">
595
+ <table class="min-w-full divide-y divide-gray-700">
596
+ <thead>
597
+ <tr>
598
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Timestamp</th>
599
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">User</th>
600
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Action</th>
601
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">IP Address</th>
602
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th>
603
+ </tr>
604
+ </thead>
605
+ <tbody class="divide-y divide-gray-700">
606
+ <tr class="hover:bg-gray-800">
607
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">2023-07-15 14:32:45</td>
608
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-white">admin@example.com</td>
609
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">User permissions updated</td>
610
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">192.168.1.1</td>
611
+ <td class="px-4 py-3 whitespace-nowrap">
612
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300">Success</span>
613
+ </td>
614
+ </tr>
615
+ <tr class="hover:bg-gray-800">
616
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">2023-07-15 13:45:12</td>
617
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-white">analyst@example.com</td>
618
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">Data export initiated</td>
619
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">203.0.113.42</td>
620
+ <td class="px-4 py-3 whitespace-nowrap">
621
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300">Success</span>
622
+ </td>
623
+ </tr>
624
+ <tr class="hover:bg-gray-800">
625
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">2023-07-15 11:23:56</td>
626
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-white">dev@example.com</td>
627
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">API key generated</td>
628
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">198.51.100.3</td>
629
+ <td class="px-4 py-3 whitespace-nowrap">
630
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300">Success</span>
631
+ </td>
632
+ </tr>
633
+ <tr class="hover:bg-gray-800">
634
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">2023-07-15 09:12:34</td>
635
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-white">guest@example.com</td>
636
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">Unauthorized access attempt</td>
637
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">172.16.0.12</td>
638
+ <td class="px-4 py-3 whitespace-nowrap">
639
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-300">Failed</span>
640
+ </td>
641
+ </tr>
642
+ </tbody>
643
+ </table>
644
+ </div>
645
+ <div class="mt-4 text-right">
646
+ <button class="text-sm gold-accent flex items-center ml-auto">
647
+ View All Logs
648
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
649
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
650
+ </svg>
651
+ </button>
652
  </div>
653
  </div>
654
  </div>
655
+ </div>
656
 
657
+ <!-- Integrations Section -->
658
+ <div id="integrations" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
659
+ <div class="text-center mb-16">
660
+ <h2 class="text-3xl font-bold text-white mb-4">Platform Integrations</h2>
661
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">Connect with your existing business tools and workflows</p>
662
+ </div>
663
+
664
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
665
+ <div class="dark-card p-6 rounded-lg flex flex-col items-center">
666
+ <div class="w-16 h-16 bg-gray-700 rounded-full flex items-center justify-center mb-4">
667
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
668
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
669
  </svg>
670
+ </div>
671
+ <h3 class="text-lg font-bold text-white mb-2">Google Analytics</h3>
672
+ <div class="relative inline-block w-12 mr-2 align-middle select-none">
673
+ <input type="checkbox" id="ga-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
674
+ <label for="ga-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
675
+ </div>
676
  </div>
677
+
678
+ <div class="dark-card p-6 rounded-lg flex flex-col items-center">
679
+ <div class="w-16 h-16 bg-gray-700 rounded-full flex items-center justify-center mb-4">
680
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
681
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
682
+ </svg>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
683
  </div>
684
+ <h3 class="text-lg font-bold text-white mb-2">Tableau</h3>
685
+ <div class="relative inline-block w-12 mr-2 align-middle select-none">
686
+ <input type="checkbox" id="tableau-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/>
687
+ <label for="tableau-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
688
  </div>
689
+ </div>
690
+
691
+ <div class="dark-card p-6 rounded-lg flex flex-col items-center">
692
+ <div class="w-16 h-16 bg-gray-700 rounded-full flex items-center justify-center mb-4">
693
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
694
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
695
+ </svg>
696
+ </div>
697
+ <h3 class="text-lg font-bold text-white mb-2">QuickBooks</h3>
698
+ <div class="relative inline-block w-12 mr-2 align-middle select-none">
699
+ <input type="checkbox" id="quickbooks-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
700
+ <label for="quickbooks-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
 
 
 
 
 
 
 
701
  </div>
702
  </div>
703
+
704
+ <div class="dark-card p-6 rounded-lg flex flex-col items-center">
705
+ <div class="w-16 h-16 bg-gray-700 rounded-full flex items-center justify-center mb-4">
706
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
707
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
708
+ </svg>
709
+ </div>
710
+ <h3 class="text-lg font-bold text-white mb-2">Slack</h3>
711
+ <div class="relative inline-block w-12 mr-2 align-middle select-none">
712
+ <input type="checkbox" id="slack-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/>
713
+ <label for="slack-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
714
+ </div>
715
+ </div>
716
+ </div>
717
+
718
+ <div class="text-center">
719
+ <button class="gold-bg text-gray-900 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition text-lg">
720
+ Explore All Integrations
721
+ </button>
722
+ </div>
723
+ </div>
724
+
725
+ <!-- CTA Section -->
726
+ <div class="gradient-bg py-20">
727
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
728
+ <h2 class="text-3xl font-bold text-white mb-6">Ready to Transform Your E-Commerce Strategy?</h2>
729
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8">Join thousands of businesses using TrendMaster Pro to stay ahead of the competition with data-driven insights.</p>
730
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
731
+ <button class="gold-bg text-gray-900 px-8 py-4 rounded-lg font-medium hover:bg-opacity-90 transition text-lg">
732
+ Start Your Free Trial
733
+ </button>
734
+ <button class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg hover:bg-white hover:bg-opacity-10 transition text-lg">
735
+ Schedule a Demo
736
+ </button>
737
+ </div>
738
  </div>
739
  </div>
740
 
741
  <!-- Footer -->
742
+ <footer class="bg-gray-900 py-12 px-6">
743
  <div class="max-w-7xl mx-auto">
744
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
745
  <div>
 
763
  <div>
764
  <h4 class="text-white font-bold mb-4">Resources</h4>
765
  <ul class="space-y-2">
766
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Documentation</a></li>
767
  <li><a href="#" class="text-gray-400 hover:text-white text-sm">Case Studies</a></li>
768
  <li><a href="#" class="text-gray-400 hover:text-white text-sm">Community</a></li>
769
  <li><a href="#" class="text-gray-400 hover:text-white text-sm">Webinars</a></li>
 
803
  </footer>
804
 
805
  <script>
806
+ // Hero Chart
807
+ var heroChartOptions = {
808
+ series: [{
809
+ name: 'Amazon',
810
+ data: [30, 40, 45, 50, 49, 60, 70, 91, 125, 150, 170, 200]
811
+ }, {
812
+ name: 'Shopify',
813
+ data: [20, 25, 30, 35, 40, 45, 50, 60, 80, 100, 120, 140]
814
+ }, {
815
+ name: 'Alibaba',
816
+ data: [10, 15, 20, 22, 25, 30, 35, 40, 45, 50, 60, 70]
817
+ }],
818
+ chart: {
819
+ height: '100%',
820
+ type: 'area',
821
+ toolbar: {
822
+ show: false
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
823
  },
824
+ zoom: {
825
+ enabled: false
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
826
  },
827
+ foreColor: '#e2e8f0'
828
+ },
829
+ colors: ['#3b82f6', '#8b5cf6', '#10b981'],
830
+ dataLabels: {
831
+ enabled: false
832
+ },
833
+ stroke: {
834
+ curve: 'smooth',
835
+ width: 2
836
+ },
837
+ fill: {
838
+ type: 'gradient',
839
+ gradient: {
840
+ shadeIntensity: 1,
841
+ opacityFrom: 0.7,
842
+ opacityTo: 0.3,
843
+ stops: [0, 90, 100]
844
  }
845
+ },
846
+ xaxis: {
847
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
848
+ },
849
+ tooltip: {
850
+ theme: 'dark'
851
+ },
852
+ legend: {
853
+ position: 'top',
854
+ horizontalAlign: 'right'
855
+ },
856
+ grid: {
857
+ borderColor: 'rgba(255, 255, 255, 0.1)'
858
  }
859
+ };
860
+
861
+ var heroChart = new ApexCharts(document.querySelector("#heroChart"), heroChartOptions);
862
+ heroChart.render();
863
 
864
  // Mobile menu toggle
865
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
866
+ const mobileMenu = document.getElementById('mobile-menu');
867
  mobileMenu.classList.toggle('hidden');
 
 
 
 
 
 
 
 
 
 
 
868
  });
869
 
870
+ // Close mobile menu when clicking outside
871
+ document.addEventListener('click', function(event) {
872
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
873
+ const mobileMenu = document.getElementById('mobile-menu');
874
+
875
+ if (!mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target)) {
876
+ mobileMenu.classList.add('hidden');
877
+ }
878
+ });
879
+
880
+ // Smooth scrolling for anchor links
881
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
882
+ anchor.addEventListener('click', function (e) {
883
+ e.preventDefault();
884
+
885
+ const targetId = this.getAttribute('href');
886
+ const targetElement = document.querySelector(targetId);
887
+
888
+ if (targetElement) {
889
+ window.scrollTo({
890
+ top: targetElement.offsetTop - 80,
891
+ behavior: 'smooth'
892
+ });
893
+
894
+ // Close mobile menu if open
895
+ document.getElementById('mobile-menu').classList.add('hidden');
896
+ }
897
+ });
898
+ });
899
+
900
+ // Toggle switches
901
+ document.querySelectorAll('.toggle-checkbox').forEach(checkbox => {
902
+ checkbox.addEventListener('change', function() {
903
+ const label = this.nextElementSibling;
904
+ if (this.checked) {
905
+ label.classList.add('bg-gold-300');
906
+ } else {
907
+ label.classList.remove('bg-gold-300');
908
+ }
909
+ });
910
  });
911
  </script>
912
  <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=Wasim0606/trendmaster-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>