Hugging Face's logo

Spaces:
Wasim0606
/
trendmasterpro
Running

App Files Community
Wasim0606 commited on
Commit
f33fd53
·
verified ·
1 Parent(s): 0179d03

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +782 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Trendmasterpro
3
- emoji: 🏃
4
- colorFrom: pink
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: trendmasterpro
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,782 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TrendMaster Pro | E-Commerce Intelligence Platform</title>
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@300;400;500&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
+ body {
13
+ font-family: 'Open Sans', sans-serif;
14
+ background-color: #0a1922;
15
+ color: #e2e8f0;
16
+ }
17
+ h1, h2, h3, h4, h5, h6 {
18
+ font-family: 'Montserrat', sans-serif;
19
+ }
20
+ .gradient-bg {
21
+ background: linear-gradient(135deg, #1a5f7a 0%, #0a1922 100%);
22
+ }
23
+ .gold-accent {
24
+ color: #ffd700;
25
+ }
26
+ .gold-border {
27
+ border-color: #ffd700;
28
+ }
29
+ .card-hover:hover {
30
+ transform: translateY(-5px);
31
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
32
+ }
33
+ .nav-link:hover {
34
+ color: #ffd700;
35
+ }
36
+ .search-box {
37
+ background-color: rgba(26, 95, 122, 0.5);
38
+ backdrop-filter: blur(10px);
39
+ }
40
+ .heatmap-container {
41
+ min-height: 400px;
42
+ }
43
+ .fade-in {
44
+ animation: fadeIn 0.5s ease-in-out;
45
+ }
46
+ @keyframes fadeIn {
47
+ from { opacity: 0; }
48
+ to { opacity: 1; }
49
+ }
50
+ .tooltip-custom {
51
+ position: relative;
52
+ }
53
+ .tooltip-custom:hover:after {
54
+ content: attr(data-tooltip);
55
+ position: absolute;
56
+ bottom: 100%;
57
+ left: 50%;
58
+ transform: translateX(-50%);
59
+ background: #1a5f7a;
60
+ color: white;
61
+ padding: 5px 10px;
62
+ border-radius: 4px;
63
+ font-size: 12px;
64
+ white-space: nowrap;
65
+ z-index: 100;
66
+ }
67
+ </style>
68
+ </head>
69
+ <body class="min-h-screen">
70
+ <!-- Navigation -->
71
+ <nav class="bg-gray-900 bg-opacity-90 backdrop-filter backdrop-blur-lg sticky top-0 z-50 border-b border-gray-800">
72
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
73
+ <div class="flex items-center justify-between h-16">
74
+ <div class="flex items-center">
75
+ <div class="flex-shrink-0 flex items-center">
76
+ <span class="text-xl font-bold gold-accent">TrendMaster</span>
77
+ <span class="text-xl font-bold text-white">Pro</span>
78
+ </div>
79
+ <div class="hidden md:block">
80
+ <div class="ml-10 flex items-baseline space-x-4">
81
+ <a href="#" class="nav-link text-white hover:text-gray-300 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
82
+ <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Market Analysis</a>
83
+ <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Supplier Network</a>
84
+ <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Knowledge Hub</a>
85
+ <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Community</a>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ <div class="hidden md:block">
90
+ <div class="ml-4 flex items-center md:ml-6">
91
+ <button class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
92
+ <span class="sr-only">View notifications</span>
93
+ <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
94
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
95
+ </svg>
96
+ </button>
97
+ <div class="ml-3 relative">
98
+ <div>
99
+ <button type="button" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu" aria-expanded="false" aria-haspopup="true">
100
+ <span class="sr-only">Open user menu</span>
101
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ <div class="-mr-2 flex md:hidden">
108
+ <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
109
+ <span class="sr-only">Open main menu</span>
110
+ <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
111
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
112
+ </svg>
113
+ <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
114
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
115
+ </svg>
116
+ </button>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Mobile menu, show/hide based on menu state. -->
122
+ <div class="md:hidden" id="mobile-menu">
123
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
124
+ <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>
125
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Market Analysis</a>
126
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Supplier Network</a>
127
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Knowledge Hub</a>
128
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Community</a>
129
+ </div>
130
+ <div class="pt-4 pb-3 border-t border-gray-700">
131
+ <div class="flex items-center px-5">
132
+ <div class="flex-shrink-0">
133
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
134
+ </div>
135
+ <div class="ml-3">
136
+ <div class="text-base font-medium text-white">Tom Cook</div>
137
+ <div class="text-sm font-medium text-gray-400">tom@example.com</div>
138
+ </div>
139
+ <button class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
140
+ <span class="sr-only">View notifications</span>
141
+ <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
142
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
143
+ </svg>
144
+ </button>
145
+ </div>
146
+ <div class="mt-3 px-2 space-y-1">
147
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a>
148
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
149
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </nav>
155
+
156
+ <!-- Main Content -->
157
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
158
+ <!-- Welcome Section -->
159
+ <div class="mb-8">
160
+ <h1 class="text-3xl font-bold text-white">Welcome back, Tom</h1>
161
+ <p class="text-gray-400 mt-2">Here's what's happening in the e-commerce world today</p>
162
+ </div>
163
+
164
+ <!-- Search Bar -->
165
+ <div class="mb-8 search-box rounded-lg p-4 shadow-lg">
166
+ <div class="flex items-center">
167
+ <div class="relative flex-grow">
168
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
169
+ <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
170
+ <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
171
+ </svg>
172
+ </div>
173
+ <input id="search" name="search" class="block w-full pl-10 pr-3 py-3 border border-transparent bg-gray-800 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent sm:text-sm rounded-md" placeholder="Search for products, trends, or ask a question..." type="search">
174
+ </div>
175
+ <button class="ml-4 inline-flex items-center px-4 py-3 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
176
+ <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
177
+ <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
178
+ </svg>
179
+ Search
180
+ </button>
181
+ </div>
182
+ <div class="mt-2 text-xs text-gray-400">
183
+ Try: "Show me kitchen gadgets under $50 gaining popularity in European markets with 4+ star ratings"
184
+ </div>
185
+ </div>
186
+
187
+ <!-- Stats Cards -->
188
+ <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
189
+ <div class="bg-gray-800 overflow-hidden shadow rounded-lg card-hover transition duration-300 ease-in-out">
190
+ <div class="px-4 py-5 sm:p-6">
191
+ <div class="flex items-center">
192
+ <div class="flex-shrink-0 bg-blue-900 rounded-md p-3">
193
+ <svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
194
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
195
+ </svg>
196
+ </div>
197
+ <div class="ml-5 w-0 flex-1">
198
+ <dt class="text-sm font-medium text-gray-300 truncate">
199
+ Emerging Trends
200
+ </dt>
201
+ <dd class="flex items-baseline">
202
+ <div class="text-2xl font-semibold text-white">
203
+ 24
204
+ </div>
205
+ <div class="ml-2 flex items-baseline text-sm font-semibold text-green-400">
206
+ <svg class="self-center flex-shrink-0 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
207
+ <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0v-7.586l-2.293 2.293a1 1 0 01-1.414 0z" clip-rule="evenodd" />
208
+ </svg>
209
+ <span class="sr-only">
210
+ Increased by
211
+ </span>
212
+ 12%
213
+ </div>
214
+ </dd>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ <div class="bg-gray-800 overflow-hidden shadow rounded-lg card-hover transition duration-300 ease-in-out">
220
+ <div class="px-4 py-5 sm:p-6">
221
+ <div class="flex items-center">
222
+ <div class="flex-shrink-0 bg-blue-900 rounded-md p-3">
223
+ <svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
224
+ <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" />
225
+ </svg>
226
+ </div>
227
+ <div class="ml-5 w-0 flex-1">
228
+ <dt class="text-sm font-medium text-gray-300 truncate">
229
+ Market Opportunities
230
+ </dt>
231
+ <dd class="flex items-baseline">
232
+ <div class="text-2xl font-semibold text-white">
233
+ 18
234
+ </div>
235
+ <div class="ml-2 flex items-baseline text-sm font-semibold text-green-400">
236
+ <svg class="self-center flex-shrink-0 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
237
+ <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0v-7.586l-2.293 2.293a1 1 0 01-1.414 0z" clip-rule="evenodd" />
238
+ </svg>
239
+ <span class="sr-only">
240
+ Increased by
241
+ </span>
242
+ 8%
243
+ </div>
244
+ </dd>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ <div class="bg-gray-800 overflow-hidden shadow rounded-lg card-hover transition duration-300 ease-in-out">
250
+ <div class="px-4 py-5 sm:p-6">
251
+ <div class="flex items-center">
252
+ <div class="flex-shrink-0 bg-blue-900 rounded-md p-3">
253
+ <svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
254
+ <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" />
255
+ </svg>
256
+ </div>
257
+ <div class="ml-5 w-0 flex-1">
258
+ <dt class="text-sm font-medium text-gray-300 truncate">
259
+ Avg. Profit Margin
260
+ </dt>
261
+ <dd class="flex items-baseline">
262
+ <div class="text-2xl font-semibold text-white">
263
+ 42%
264
+ </div>
265
+ <div class="ml-2 flex items-baseline text-sm font-semibold text-red-400">
266
+ <svg class="self-center flex-shrink-0 h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
267
+ <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
268
+ </svg>
269
+ <span class="sr-only">
270
+ Decreased by
271
+ </span>
272
+ 3%
273
+ </div>
274
+ </dd>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ <div class="bg-gray-800 overflow-hidden shadow rounded-lg card-hover transition duration-300 ease-in-out">
280
+ <div class="px-4 py-5 sm:p-6">
281
+ <div class="flex items-center">
282
+ <div class="flex-shrink-0 bg-blue-900 rounded-md p-3">
283
+ <svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
284
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
285
+ </svg>
286
+ </div>
287
+ <div class="ml-5 w-0 flex-1">
288
+ <dt class="text-sm font-medium text-gray-300 truncate">
289
+ Products Tracked
290
+ </dt>
291
+ <dd class="flex items-baseline">
292
+ <div class="text-2xl font-semibold text-white">
293
+ 5,231
294
+ </div>
295
+ <div class="ml-2 flex items-baseline text-sm font-semibold text-green-400">
296
+ <svg class="self-center flex-shrink-0 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
297
+ <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0v-7.586l-2.293 2.293a1 1 0 01-1.414 0z" clip-rule="evenodd" />
298
+ </svg>
299
+ <span class="sr-only">
300
+ Increased by
301
+ </span>
302
+ 24%
303
+ </div>
304
+ </dd>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Main Dashboard Content -->
312
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
313
+ <!-- Left Column -->
314
+ <div class="lg:col-span-2 space-y-8">
315
+ <!-- Trend Analysis Chart -->
316
+ <div class="bg-gray-800 rounded-lg shadow-lg p-6 card-hover transition duration-300 ease-in-out">
317
+ <div class="flex items-center justify-between mb-6">
318
+ <h2 class="text-lg font-medium text-white">Product Trend Analysis</h2>
319
+ <div class="relative">
320
+ <select class="appearance-none bg-gray-700 border border-gray-600 text-white pl-3 pr-8 py-2 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
321
+ <option>Last 7 days</option>
322
+ <option>Last 30 days</option>
323
+ <option selected>Last 90 days</option>
324
+ <option>Last year</option>
325
+ </select>
326
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
327
+ <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ <div class="h-80">
332
+ <canvas id="trendChart"></canvas>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Market Heatmap -->
337
+ <div class="bg-gray-800 rounded-lg shadow-lg p-6 card-hover transition duration-300 ease-in-out">
338
+ <div class="flex items-center justify-between mb-6">
339
+ <h2 class="text-lg font-medium text-white">Geographic Demand Heatmap</h2>
340
+ <div class="flex space-x-2">
341
+ <button class="bg-blue-600 text-white px-3 py-1 rounded-md text-sm">USA</button>
342
+ <button class="bg-gray-700 text-gray-300 px-3 py-1 rounded-md text-sm">Europe</button>
343
+ <button class="bg-gray-700 text-gray-300 px-3 py-1 rounded-md text-sm">Asia</button>
344
+ </div>
345
+ </div>
346
+ <div class="heatmap-container h-80">
347
+ <div id="heatmap"></div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Right Column -->
353
+ <div class="space-y-8">
354
+ <!-- Emerging Trends -->
355
+ <div class="bg-gray-800 rounded-lg shadow-lg p-6 card-hover transition duration-300 ease-in-out">
356
+ <div class="flex items-center justify-between mb-6">
357
+ <h2 class="text-lg font-medium text-white">Emerging Trends</h2>
358
+ <button class="text-blue-400 hover:text-blue-300 text-sm">View All</button>
359
+ </div>
360
+ <div class="space-y-4">
361
+ <div class="flex items-start">
362
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900 flex items-center justify-center">
363
+ <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
364
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
365
+ </svg>
366
+ </div>
367
+ <div class="ml-4">
368
+ <h3 class="text-sm font-medium text-white">Smart Kitchen Gadgets</h3>
369
+ <p class="text-xs text-gray-400 mt-1">+45% growth in last 30 days</p>
370
+ <div class="mt-1 flex items-center">
371
+ <span class="text-xs text-gray-400">Amazon, Shopify</span>
372
+ <span class="mx-1 text-gray-500">•</span>
373
+ <span class="text-xs text-gray-400">$25-$75 range</span>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ <div class="flex items-start">
378
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900 flex items-center justify-center">
379
+ <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
380
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
381
+ </svg>
382
+ </div>
383
+ <div class="ml-4">
384
+ <h3 class="text-sm font-medium text-white">Eco-Friendly Pet Products</h3>
385
+ <p class="text-xs text-gray-400 mt-1">+32% growth in last 30 days</p>
386
+ <div class="mt-1 flex items-center">
387
+ <span class="text-xs text-gray-400">Amazon, Etsy</span>
388
+ <span class="mx-1 text-gray-500">•</span>
389
+ <span class="text-xs text-gray-400">$15-$50 range</span>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ <div class="flex items-start">
394
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900 flex items-center justify-center">
395
+ <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
396
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
397
+ </svg>
398
+ </div>
399
+ <div class="ml-4">
400
+ <h3 class="text-sm font-medium text-white">Home Workout Equipment</h3>
401
+ <p class="text-xs text-gray-400 mt-1">+28% growth in last 30 days</p>
402
+ <div class="mt-1 flex items-center">
403
+ <span class="text-xs text-gray-400">Amazon, Walmart</span>
404
+ <span class="mx-1 text-gray-500">•</span>
405
+ <span class="text-xs text-gray-400">$30-$100 range</span>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ <div class="flex items-start">
410
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900 flex items-center justify-center">
411
+ <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
412
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
413
+ </svg>
414
+ </div>
415
+ <div class="ml-4">
416
+ <h3 class="text-sm font-medium text-white">Sustainable Fashion</h3>
417
+ <p class="text-xs text-gray-400 mt-1">+21% growth in last 30 days</p>
418
+ <div class="mt-1 flex items-center">
419
+ <span class="text-xs text-gray-400">Shopify, Etsy</span>
420
+ <span class="mx-1 text-gray-500">•</span>
421
+ <span class="text-xs text-gray-400">$20-$80 range</span>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+
428
+ <!-- Supplier Recommendations -->
429
+ <div class="bg-gray-800 rounded-lg shadow-lg p-6 card-hover transition duration-300 ease-in-out">
430
+ <div class="flex items-center justify-between mb-6">
431
+ <h2 class="text-lg font-medium text-white">Supplier Recommendations</h2>
432
+ <button class="text-blue-400 hover:text-blue-300 text-sm">View All</button>
433
+ </div>
434
+ <div class="space-y-4">
435
+ <div class="flex items-start">
436
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900 flex items-center justify-center">
437
+ <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
438
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
439
+ </svg>
440
+ </div>
441
+ <div class="ml-4">
442
+ <h3 class="text-sm font-medium text-white">TechGadget Suppliers</h3>
443
+ <p class="text-xs text-gray-400 mt-1">Reliability: 94% • MOQ: 100 units</p>
444
+ <div class="mt-1 flex items-center">
445
+ <span class="text-xs text-gray-400">Shenzhen, China</span>
446
+ <span class="mx-1 text-gray-500">•</span>
447
+ <span class="text-xs text-gray-400">4.8★ (128 reviews)</span>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ <div class="flex items-start">
452
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900 flex items-center justify-center">
453
+ <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
454
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
455
+ </svg>
456
+ </div>
457
+ <div class="ml-4">
458
+ <h3 class="text-sm font-medium text-white">EcoHome Manufacturers</h3>
459
+ <p class="text-xs text-gray-400 mt-1">Reliability: 91% • MOQ: 50 units</p>
460
+ <div class="mt-1 flex items-center">
461
+ <span class="text-xs text-gray-400">Guangzhou, China</span>
462
+ <span class="mx-1 text-gray-500">•</span>
463
+ <span class="text-xs text-gray-400">4.7★ (95 reviews)</span>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ <div class="flex items-start">
468
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900 flex items-center justify-center">
469
+ <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
470
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
471
+ </svg>
472
+ </div>
473
+ <div class="ml-4">
474
+ <h3 class="text-sm font-medium text-white">FitnessGear Co.</h3>
475
+ <p class="text-xs text-gray-400 mt-1">Reliability: 89% • MOQ: 200 units</p>
476
+ <div class="mt-1 flex items-center">
477
+ <span class="text-xs text-gray-400">Dongguan, China</span>
478
+ <span class="mx-1 text-gray-500">•</span>
479
+ <span class="text-xs text-gray-400">4.6★ (142 reviews)</span>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+
488
+ <!-- Recent Alerts -->
489
+ <div class="mt-8 bg-gray-800 rounded-lg shadow-lg p-6 card-hover transition duration-300 ease-in-out">
490
+ <div class="flex items-center justify-between mb-6">
491
+ <h2 class="text-lg font-medium text-white">Recent Alerts</h2>
492
+ <button class="text-blue-400 hover:text-blue-300 text-sm">View All</button>
493
+ </div>
494
+ <div class="space-y-4">
495
+ <div class="flex items-start p-3 rounded-md bg-gray-700">
496
+ <div class="flex-shrink-0 pt-1">
497
+ <div class="h-2 w-2 rounded-full bg-red-400"></div>
498
+ </div>
499
+ <div class="ml-3">
500
+ <p class="text-sm font-medium text-white">Price drop detected: Smart Water Bottles category</p>
501
+ <p class="text-xs text-gray-400 mt-1">Average price decreased by 15% in last 7 days. Check competitor pricing strategies.</p>
502
+ </div>
503
+ </div>
504
+ <div class="flex items-start p-3 rounded-md bg-gray-700">
505
+ <div class="flex-shrink-0 pt-1">
506
+ <div class="h-2 w-2 rounded-full bg-yellow-400"></div>
507
+ </div>
508
+ <div class="ml-3">
509
+ <p class="text-sm font-medium text-white">New competitor entered: Wireless Earbuds market</p>
510
+ <p class="text-xs text-gray-400 mt-1">"SoundPeak" launched with aggressive pricing. Monitor their performance.</p>
511
+ </div>
512
+ </div>
513
+ <div class="flex items-start p-3 rounded-md bg-gray-700">
514
+ <div class="flex-shrink-0 pt-1">
515
+ <div class="h-2 w-2 rounded-full bg-blue-400"></div>
516
+ </div>
517
+ <div class="ml-3">
518
+ <p class="text-sm font-medium text-white">Seasonal trend alert: Outdoor gear demand rising</p>
519
+ <p class="text-xs text-gray-400 mt-1">Historical data shows 40% increase in sales for this category in Q2.</p>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </main>
525
+
526
+ <!-- Footer -->
527
+ <footer class="bg-gray-900 mt-12">
528
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
529
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
530
+ <div>
531
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3>
532
+ <ul class="mt-4 space-y-4">
533
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li>
534
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li>
535
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li>
536
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Integrations</a></li>
537
+ </ul>
538
+ </div>
539
+ <div>
540
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
541
+ <ul class="mt-4 space-y-4">
542
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
543
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li>
544
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
545
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Webinars</a></li>
546
+ </ul>
547
+ </div>
548
+ <div>
549
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
550
+ <ul class="mt-4 space-y-4">
551
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
552
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
553
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
554
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Partners</a></li>
555
+ </ul>
556
+ </div>
557
+ <div>
558
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
559
+ <ul class="mt-4 space-y-4">
560
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
561
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
562
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li>
563
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">GDPR</a></li>
564
+ </ul>
565
+ </div>
566
+ </div>
567
+ <div class="mt-8 border-t border-gray-800 pt-8 md:flex md:items-center md:justify-between">
568
+ <div class="flex space-x-6 md:order-2">
569
+ <a href="#" class="text-gray-400 hover:text-gray-300">
570
+ <span class="sr-only">Facebook</span>
571
+ <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
572
+ <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
573
+ </svg>
574
+ </a>
575
+ <a href="#" class="text-gray-400 hover:text-gray-300">
576
+ <span class="sr-only">Twitter</span>
577
+ <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
578
+ <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
579
+ </svg>
580
+ </a>
581
+ <a href="#" class="text-gray-400 hover:text-gray-300">
582
+ <span class="sr-only">LinkedIn</span>
583
+ <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
584
+ <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
585
+ </svg>
586
+ </a>
587
+ </div>
588
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
589
+ &copy; 2023 TrendMaster Pro. All rights reserved.
590
+ </p>
591
+ </div>
592
+ </div>
593
+ </footer>
594
+
595
+ <script>
596
+ // Initialize Trend Chart
597
+ const trendCtx = document.getElementById('trendChart').getContext('2d');
598
+ const trendChart = new Chart(trendCtx, {
599
+ type: 'line',
600
+ data: {
601
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
602
+ datasets: [
603
+ {
604
+ label: 'Smart Kitchen Gadgets',
605
+ data: [12, 19, 15, 27, 33, 42, 48, 51, 45, 60, 75, 92],
606
+ borderColor: '#ffd700',
607
+ backgroundColor: 'rgba(255, 215, 0, 0.1)',
608
+ tension: 0.3,
609
+ fill: true
610
+ },
611
+ {
612
+ label: 'Eco-Friendly Pet Products',
613
+ data: [8, 12, 18, 22, 28, 35, 40, 38, 45, 52, 60, 75],
614
+ borderColor: '#1a5f7a',
615
+ backgroundColor: 'rgba(26, 95, 122, 0.1)',
616
+ tension: 0.3,
617
+ fill: true
618
+ },
619
+ {
620
+ label: 'Home Workout Equipment',
621
+ data: [20, 25, 22, 30, 35, 40, 38, 42, 50, 55, 60, 68],
622
+ borderColor: '#4fd1c5',
623
+ backgroundColor: 'rgba(79, 209, 197, 0.1)',
624
+ tension: 0.3,
625
+ fill: true
626
+ }
627
+ ]
628
+ },
629
+ options: {
630
+ responsive: true,
631
+ maintainAspectRatio: false,
632
+ plugins: {
633
+ legend: {
634
+ position: 'top',
635
+ labels: {
636
+ color: '#e2e8f0',
637
+ font: {
638
+ family: 'Open Sans'
639
+ }
640
+ }
641
+ },
642
+ tooltip: {
643
+ mode: 'index',
644
+ intersect: false,
645
+ backgroundColor: 'rgba(26, 95, 122, 0.9)',
646
+ titleColor: '#ffffff',
647
+ bodyColor: '#e2e8f0',
648
+ borderColor: '#ffd700',
649
+ borderWidth: 1
650
+ }
651
+ },
652
+ scales: {
653
+ x: {
654
+ grid: {
655
+ color: 'rgba(226, 232, 240, 0.1)'
656
+ },
657
+ ticks: {
658
+ color: '#e2e8f0'
659
+ }
660
+ },
661
+ y: {
662
+ grid: {
663
+ color: 'rgba(226, 232, 240, 0.1)'
664
+ },
665
+ ticks: {
666
+ color: '#e2e8f0'
667
+ }
668
+ }
669
+ },
670
+ interaction: {
671
+ mode: 'nearest',
672
+ axis: 'x',
673
+ intersect: false
674
+ }
675
+ }
676
+ });
677
+
678
+ // Initialize Heatmap
679
+ document.addEventListener('DOMContentLoaded', function() {
680
+ const heatmapOptions = {
681
+ series: [{
682
+ name: 'Demand Intensity',
683
+ data: [
684
+ {x: 'California', y: 98},
685
+ {x: 'Texas', y: 75},
686
+ {x: 'New York', y: 89},
687
+ {x: 'Florida', y: 82},
688
+ {x: 'Illinois', y: 65},
689
+ {x: 'Pennsylvania', y: 58},
690
+ {x: 'Ohio', y: 45},
691
+ {x: 'Georgia', y: 72},
692
+ {x: 'North Carolina', y: 55},
693
+ {x: 'Michigan', y: 48}
694
+ ]
695
+ }],
696
+ chart: {
697
+ type: 'heatmap',
698
+ height: 350,
699
+ toolbar: {
700
+ show: false
701
+ },
702
+ foreColor: '#e2e8f0'
703
+ },
704
+ dataLabels: {
705
+ enabled: false
706
+ },
707
+ colors: ["#1a5f7a", "#ffd700"],
708
+ xaxis: {
709
+ type: 'category',
710
+ labels: {
711
+ style: {
712
+ colors: '#e2e8f0'
713
+ }
714
+ }
715
+ },
716
+ yaxis: {
717
+ labels: {
718
+ style: {
719
+ colors: '#e2e8f0'
720
+ }
721
+ }
722
+ },
723
+ plotOptions: {
724
+ heatmap: {
725
+ colorScale: {
726
+ ranges: [{
727
+ from: 0,
728
+ to: 50,
729
+ color: '#1a5f7a',
730
+ name: 'low',
731
+ },
732
+ {
733
+ from: 51,
734
+ to: 80,
735
+ color: '#1e88a1',
736
+ name: 'medium',
737
+ },
738
+ {
739
+ from: 81,
740
+ to: 100,
741
+ color: '#ffd700',
742
+ name: 'high',
743
+ }]
744
+ }
745
+ }
746
+ }
747
+ };
748
+
749
+ const heatmap = new ApexCharts(document.querySelector("#heatmap"), heatmapOptions);
750
+ heatmap.render();
751
+ });
752
+
753
+ // Mobile menu toggle
754
+ document.addEventListener('DOMContentLoaded', function() {
755
+ const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]');
756
+ const mobileMenu = document.getElementById('mobile-menu');
757
+
758
+ mobileMenuButton.addEventListener('click', function() {
759
+ const expanded = this.getAttribute('aria-expanded') === 'true';
760
+ this.setAttribute('aria-expanded', !expanded);
761
+ mobileMenu.classList.toggle('hidden');
762
+
763
+ // Toggle between menu and close icon
764
+ const menuIcon = this.querySelector('.block');
765
+ const closeIcon = this.querySelector('.hidden');
766
+ menuIcon.classList.toggle('hidden');
767
+ closeIcon.classList.toggle('hidden');
768
+ });
769
+ });
770
+
771
+ // Fade in animation for elements
772
+ document.addEventListener('DOMContentLoaded', function() {
773
+ const elements = document.querySelectorAll('.fade-in');
774
+ elements.forEach((el, index) => {
775
+ setTimeout(() => {
776
+ el.style.opacity = '1';
777
+ }, index * 200);
778
+ });
779
+ });
780
+ </script>
781
+ <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/trendmasterpro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
782
+ </html>