Volodya2000 commited on
Commit
46d71fe
·
verified ·
1 Parent(s): 49f5344

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +709 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mas
3
- emoji: 🐢
4
- colorFrom: pink
5
  colorTo: red
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: mas
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
  colorTo: red
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,709 @@
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>Mobile User Acquisition Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
10
+ <style>
11
+ .dropzone {
12
+ border: 2px dashed #3b82f6;
13
+ border-radius: 0.5rem;
14
+ transition: all 0.3s ease;
15
+ }
16
+ .dropzone.active {
17
+ border-color: #10b981;
18
+ background-color: #f0fdf4;
19
+ }
20
+ .custom-scrollbar::-webkit-scrollbar {
21
+ width: 8px;
22
+ height: 8px;
23
+ }
24
+ .custom-scrollbar::-webkit-scrollbar-track {
25
+ background: #f1f1f1;
26
+ border-radius: 10px;
27
+ }
28
+ .custom-scrollbar::-webkit-scrollbar-thumb {
29
+ background: #cbd5e1;
30
+ border-radius: 10px;
31
+ }
32
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
33
+ background: #94a3b8;
34
+ }
35
+ .sparkline {
36
+ height: 40px;
37
+ width: 100px;
38
+ }
39
+ .tooltip {
40
+ position: relative;
41
+ display: inline-block;
42
+ }
43
+ .tooltip .tooltiptext {
44
+ visibility: hidden;
45
+ width: 200px;
46
+ background-color: #333;
47
+ color: #fff;
48
+ text-align: center;
49
+ border-radius: 6px;
50
+ padding: 5px;
51
+ position: absolute;
52
+ z-index: 1;
53
+ bottom: 125%;
54
+ left: 50%;
55
+ margin-left: -100px;
56
+ opacity: 0;
57
+ transition: opacity 0.3s;
58
+ }
59
+ .tooltip:hover .tooltiptext {
60
+ visibility: visible;
61
+ opacity: 1;
62
+ }
63
+ </style>
64
+ </head>
65
+ <body class="bg-gray-50">
66
+ <div class="min-h-screen">
67
+ <!-- Header -->
68
+ <header class="bg-white shadow-sm">
69
+ <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
70
+ <div class="flex items-center">
71
+ <div class="flex-shrink-0">
72
+ <i class="fas fa-mobile-alt text-blue-500 text-2xl"></i>
73
+ </div>
74
+ <div class="ml-4">
75
+ <h1 class="text-xl font-bold text-gray-900">Mobile User Acquisition Dashboard</h1>
76
+ <p class="text-sm text-gray-500">Analyze Facebook Ads performance by day and country</p>
77
+ </div>
78
+ </div>
79
+ <div class="flex items-center space-x-4">
80
+ <div class="relative">
81
+ <i class="fas fa-bell text-gray-500 hover:text-blue-500 cursor-pointer"></i>
82
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
83
+ </div>
84
+ <div class="flex items-center">
85
+ <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="">
86
+ <span class="ml-2 text-sm font-medium text-gray-700">John Doe</span>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </header>
91
+
92
+ <!-- Main Content -->
93
+ <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
94
+ <!-- Upload Section -->
95
+ <div class="bg-white shadow rounded-lg p-6 mb-6">
96
+ <div class="flex justify-between items-center mb-4">
97
+ <h2 class="text-lg font-medium text-gray-900">Upload Facebook Ads Data</h2>
98
+ <button id="sampleDataBtn" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
99
+ <i class="fas fa-download mr-2"></i>Download Sample Data
100
+ </button>
101
+ </div>
102
+ <div id="dropzone" class="dropzone p-10 text-center cursor-pointer">
103
+ <div class="space-y-4">
104
+ <i class="fas fa-cloud-upload-alt text-blue-500 text-4xl"></i>
105
+ <p class="text-lg font-medium text-gray-700">Drag & drop your CSV file here</p>
106
+ <p class="text-sm text-gray-500">or click to browse files</p>
107
+ <input type="file" id="fileInput" class="hidden" accept=".csv">
108
+ <button id="browseBtn" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
109
+ <i class="fas fa-folder-open mr-2"></i>Browse Files
110
+ </button>
111
+ </div>
112
+ </div>
113
+ <div id="fileInfo" class="mt-4 hidden">
114
+ <div class="flex items-center justify-between bg-gray-50 p-3 rounded-md">
115
+ <div class="flex items-center">
116
+ <i class="fas fa-file-csv text-blue-500 text-xl mr-3"></i>
117
+ <div>
118
+ <p class="text-sm font-medium text-gray-700" id="fileName">filename.csv</p>
119
+ <p class="text-xs text-gray-500" id="fileSize">1.2 MB</p>
120
+ </div>
121
+ </div>
122
+ <button id="analyzeBtn" class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600">
123
+ <i class="fas fa-chart-line mr-2"></i>Analyze Data
124
+ </button>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Dashboard Content (Initially Hidden) -->
130
+ <div id="dashboardContent" class="hidden">
131
+ <!-- Summary Cards -->
132
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
133
+ <div class="bg-white shadow rounded-lg p-6">
134
+ <div class="flex items-center justify-between">
135
+ <div>
136
+ <p class="text-sm font-medium text-gray-500">Total Spend</p>
137
+ <p class="text-2xl font-bold text-gray-900">$12,345</p>
138
+ </div>
139
+ <div class="p-3 rounded-full bg-blue-100 text-blue-500">
140
+ <i class="fas fa-dollar-sign"></i>
141
+ </div>
142
+ </div>
143
+ <div class="mt-4">
144
+ <div class="flex items-center justify-between text-sm">
145
+ <span class="text-green-500 font-medium">+12%</span>
146
+ <span class="text-gray-500">vs last period</span>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ <div class="bg-white shadow rounded-lg p-6">
151
+ <div class="flex items-center justify-between">
152
+ <div>
153
+ <p class="text-sm font-medium text-gray-500">Installs</p>
154
+ <p class="text-2xl font-bold text-gray-900">8,642</p>
155
+ </div>
156
+ <div class="p-3 rounded-full bg-green-100 text-green-500">
157
+ <i class="fas fa-download"></i>
158
+ </div>
159
+ </div>
160
+ <div class="mt-4">
161
+ <div class="flex items-center justify-between text-sm">
162
+ <span class="text-green-500 font-medium">+8%</span>
163
+ <span class="text-gray-500">vs last period</span>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ <div class="bg-white shadow rounded-lg p-6">
168
+ <div class="flex items-center justify-between">
169
+ <div>
170
+ <p class="text-sm font-medium text-gray-500">CPI</p>
171
+ <p class="text-2xl font-bold text-gray-900">$1.42</p>
172
+ </div>
173
+ <div class="p-3 rounded-full bg-purple-100 text-purple-500">
174
+ <i class="fas fa-percentage"></i>
175
+ </div>
176
+ </div>
177
+ <div class="mt-4">
178
+ <div class="flex items-center justify-between text-sm">
179
+ <span class="text-red-500 font-medium">-5%</span>
180
+ <span class="text-gray-500">vs last period</span>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ <div class="bg-white shadow rounded-lg p-6">
185
+ <div class="flex items-center justify-between">
186
+ <div>
187
+ <p class="text-sm font-medium text-gray-500">ROAS</p>
188
+ <p class="text-2xl font-bold text-gray-900">2.8</p>
189
+ </div>
190
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-500">
191
+ <i class="fas fa-chart-pie"></i>
192
+ </div>
193
+ </div>
194
+ <div class="mt-4">
195
+ <div class="flex items-center justify-between text-sm">
196
+ <span class="text-green-500 font-medium">+15%</span>
197
+ <span class="text-gray-500">vs last period</span>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Main Charts -->
204
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
205
+ <!-- Performance Over Time -->
206
+ <div class="bg-white shadow rounded-lg p-6">
207
+ <div class="flex justify-between items-center mb-4">
208
+ <h3 class="text-lg font-medium text-gray-900">Performance Over Time</h3>
209
+ <div class="flex space-x-2">
210
+ <button class="px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600">7D</button>
211
+ <button class="px-3 py-1 text-xs bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50">30D</button>
212
+ <button class="px-3 py-1 text-xs bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50">90D</button>
213
+ </div>
214
+ </div>
215
+ <div class="h-80">
216
+ <canvas id="performanceChart"></canvas>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Country Breakdown -->
221
+ <div class="bg-white shadow rounded-lg p-6">
222
+ <div class="flex justify-between items-center mb-4">
223
+ <h3 class="text-lg font-medium text-gray-900">Country Performance</h3>
224
+ <div class="relative">
225
+ <select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
226
+ <option>By Spend</option>
227
+ <option>By Installs</option>
228
+ <option>By CPI</option>
229
+ <option>By ROAS</option>
230
+ </select>
231
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
232
+ <i class="fas fa-chevron-down text-xs"></i>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ <div class="h-80">
237
+ <canvas id="countryChart"></canvas>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Insights Section -->
243
+ <div class="bg-white shadow rounded-lg p-6 mb-6">
244
+ <div class="flex justify-between items-center mb-4">
245
+ <h3 class="text-lg font-medium text-gray-900">Key Insights</h3>
246
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
247
+ <i class="fas fa-sync-alt mr-2"></i>Refresh Insights
248
+ </button>
249
+ </div>
250
+ <div class="space-y-4">
251
+ <!-- Insight 1 -->
252
+ <div class="p-4 border border-blue-100 rounded-lg bg-blue-50">
253
+ <div class="flex items-start">
254
+ <div class="flex-shrink-0 mt-1">
255
+ <i class="fas fa-bolt text-yellow-500"></i>
256
+ </div>
257
+ <div class="ml-3">
258
+ <h4 class="text-sm font-medium text-gray-900">Spike Detected</h4>
259
+ <p class="text-sm text-gray-600 mt-1">A significant spike in installs was detected on <span class="font-medium">June 15th</span> in <span class="font-medium">Germany</span>. This correlates with a campaign optimization change made that day.</p>
260
+ <div class="mt-2 flex space-x-4">
261
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
262
+ <i class="fas fa-arrow-up mr-1"></i> 48% increase
263
+ </span>
264
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
265
+ <i class="fas fa-link mr-1"></i> Correlation: 0.87
266
+ </span>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Insight 2 -->
273
+ <div class="p-4 border border-red-100 rounded-lg bg-red-50">
274
+ <div class="flex items-start">
275
+ <div class="flex-shrink-0 mt-1">
276
+ <i class="fas fa-exclamation-triangle text-red-500"></i>
277
+ </div>
278
+ <div class="ml-3">
279
+ <h4 class="text-sm font-medium text-gray-900">High CPI Market</h4>
280
+ <p class="text-sm text-gray-600 mt-1"><span class="font-medium">Japan</span> has a CPI of <span class="font-medium">$3.25</span>, which is 128% higher than the average. Consider adjusting bids or creative strategy.</p>
281
+ <div class="mt-2">
282
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
283
+ <i class="fas fa-arrow-up mr-1"></i> 128% above avg
284
+ </span>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Insight 3 -->
291
+ <div class="p-4 border border-green-100 rounded-lg bg-green-50">
292
+ <div class="flex items-start">
293
+ <div class="flex-shrink-0 mt-1">
294
+ <i class="fas fa-chart-line text-green-500"></i>
295
+ </div>
296
+ <div class="ml-3">
297
+ <h4 class="text-sm font-medium text-gray-900">Strong ROAS Correlation</h4>
298
+ <p class="text-sm text-gray-600 mt-1">Video creatives in <span class="font-medium">Brazil</span> show a strong positive correlation (0.92) with ROAS. Consider scaling video ad production for this market.</p>
299
+ <div class="mt-2">
300
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
301
+ <i class="fas fa-link mr-1"></i> Correlation: 0.92
302
+ </span>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Data Table -->
311
+ <div class="bg-white shadow rounded-lg overflow-hidden mb-6">
312
+ <div class="px-6 py-4 border-b border-gray-200">
313
+ <div class="flex justify-between items-center">
314
+ <h3 class="text-lg font-medium text-gray-900">Detailed Performance Data</h3>
315
+ <div class="flex space-x-3">
316
+ <div class="relative">
317
+ <select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
318
+ <option>All Countries</option>
319
+ <option>United States</option>
320
+ <option>Germany</option>
321
+ <option>Japan</option>
322
+ <option>Brazil</option>
323
+ </select>
324
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
325
+ <i class="fas fa-chevron-down text-xs"></i>
326
+ </div>
327
+ </div>
328
+ <button class="px-4 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
329
+ <i class="fas fa-download mr-2"></i>Export
330
+ </button>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ <div class="overflow-x-auto custom-scrollbar">
335
+ <table class="min-w-full divide-y divide-gray-200">
336
+ <thead class="bg-gray-50">
337
+ <tr>
338
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
339
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Country</th>
340
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaign</th>
341
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spend</th>
342
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Installs</th>
343
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CPI</th>
344
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trend</th>
345
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
346
+ </tr>
347
+ </thead>
348
+ <tbody class="bg-white divide-y divide-gray-200">
349
+ <tr>
350
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2023-06-15</td>
351
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Germany</td>
352
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Summer Sale</td>
353
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,245</td>
354
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">876</td>
355
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1.42</td>
356
+ <td class="px-6 py-4 whitespace-nowrap">
357
+ <div class="sparkline">
358
+ <canvas id="sparkline1"></canvas>
359
+ </div>
360
+ </td>
361
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
362
+ <button class="text-blue-500 hover:text-blue-700 mr-3">
363
+ <i class="fas fa-chart-bar"></i>
364
+ </button>
365
+ <button class="text-green-500 hover:text-green-700">
366
+ <i class="fas fa-edit"></i>
367
+ </button>
368
+ </td>
369
+ </tr>
370
+ <tr>
371
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2023-06-15</td>
372
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Japan</td>
373
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Premium Offer</td>
374
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$2,345</td>
375
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">721</td>
376
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$3.25</td>
377
+ <td class="px-6 py-4 whitespace-nowrap">
378
+ <div class="sparkline">
379
+ <canvas id="sparkline2"></canvas>
380
+ </div>
381
+ </td>
382
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
383
+ <button class="text-blue-500 hover:text-blue-700 mr-3">
384
+ <i class="fas fa-chart-bar"></i>
385
+ </button>
386
+ <button class="text-green-500 hover:text-green-700">
387
+ <i class="fas fa-edit"></i>
388
+ </button>
389
+ </td>
390
+ </tr>
391
+ <tr>
392
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2023-06-14</td>
393
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">United States</td>
394
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">New Feature</td>
395
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$3,456</td>
396
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2,145</td>
397
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1.61</td>
398
+ <td class="px-6 py-4 whitespace-nowrap">
399
+ <div class="sparkline">
400
+ <canvas id="sparkline3"></canvas>
401
+ </div>
402
+ </td>
403
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
404
+ <button class="text-blue-500 hover:text-blue-700 mr-3">
405
+ <i class="fas fa-chart-bar"></i>
406
+ </button>
407
+ <button class="text-green-500 hover:text-green-700">
408
+ <i class="fas fa-edit"></i>
409
+ </button>
410
+ </td>
411
+ </tr>
412
+ <tr>
413
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2023-06-14</td>
414
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Brazil</td>
415
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Video Campaign</td>
416
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$987</td>
417
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,023</td>
418
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$0.96</td>
419
+ <td class="px-6 py-4 whitespace-nowrap">
420
+ <div class="sparkline">
421
+ <canvas id="sparkline4"></canvas>
422
+ </div>
423
+ </td>
424
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
425
+ <button class="text-blue-500 hover:text-blue-700 mr-3">
426
+ <i class="fas fa-chart-bar"></i>
427
+ </button>
428
+ <button class="text-green-500 hover:text-green-700">
429
+ <i class="fas fa-edit"></i>
430
+ </button>
431
+ </td>
432
+ </tr>
433
+ </tbody>
434
+ </table>
435
+ </div>
436
+ <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
437
+ <div class="flex-1 flex justify-between sm:hidden">
438
+ <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
439
+ Previous
440
+ </button>
441
+ <button class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
442
+ Next
443
+ </button>
444
+ </div>
445
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
446
+ <div>
447
+ <p class="text-sm text-gray-700">
448
+ Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">24</span> results
449
+ </p>
450
+ </div>
451
+ <div>
452
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
453
+ <button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
454
+ <span class="sr-only">Previous</span>
455
+ <i class="fas fa-chevron-left"></i>
456
+ </button>
457
+ <button aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
458
+ 1
459
+ </button>
460
+ <button class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
461
+ 2
462
+ </button>
463
+ <button class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
464
+ 3
465
+ </button>
466
+ <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
467
+ ...
468
+ </span>
469
+ <button class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
470
+ 8
471
+ </button>
472
+ <button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
473
+ <span class="sr-only">Next</span>
474
+ <i class="fas fa-chevron-right"></i>
475
+ </button>
476
+ </nav>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </main>
483
+ </div>
484
+
485
+ <script>
486
+ // File Upload Handling
487
+ const dropzone = document.getElementById('dropzone');
488
+ const fileInput = document.getElementById('fileInput');
489
+ const browseBtn = document.getElementById('browseBtn');
490
+ const fileInfo = document.getElementById('fileInfo');
491
+ const fileName = document.getElementById('fileName');
492
+ const fileSize = document.getElementById('fileSize');
493
+ const analyzeBtn = document.getElementById('analyzeBtn');
494
+ const dashboardContent = document.getElementById('dashboardContent');
495
+ const sampleDataBtn = document.getElementById('sampleDataBtn');
496
+
497
+ // Handle drag and drop events
498
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
499
+ dropzone.addEventListener(eventName, preventDefaults, false);
500
+ });
501
+
502
+ function preventDefaults(e) {
503
+ e.preventDefault();
504
+ e.stopPropagation();
505
+ }
506
+
507
+ ['dragenter', 'dragover'].forEach(eventName => {
508
+ dropzone.addEventListener(eventName, highlight, false);
509
+ });
510
+
511
+ ['dragleave', 'drop'].forEach(eventName => {
512
+ dropzone.addEventListener(eventName, unhighlight, false);
513
+ });
514
+
515
+ function highlight() {
516
+ dropzone.classList.add('active');
517
+ }
518
+
519
+ function unhighlight() {
520
+ dropzone.classList.remove('active');
521
+ }
522
+
523
+ // Handle file drop
524
+ dropzone.addEventListener('drop', handleDrop, false);
525
+
526
+ function handleDrop(e) {
527
+ const dt = e.dataTransfer;
528
+ const files = dt.files;
529
+ handleFiles(files);
530
+ }
531
+
532
+ // Handle file selection via button
533
+ browseBtn.addEventListener('click', () => {
534
+ fileInput.click();
535
+ });
536
+
537
+ fileInput.addEventListener('change', () => {
538
+ handleFiles(fileInput.files);
539
+ });
540
+
541
+ // Process uploaded files
542
+ function handleFiles(files) {
543
+ if (files.length) {
544
+ const file = files[0];
545
+ if (file.type === 'text/csv' || file.name.endsWith('.csv')) {
546
+ fileName.textContent = file.name;
547
+ fileSize.textContent = formatFileSize(file.size);
548
+ fileInfo.classList.remove('hidden');
549
+
550
+ // In a real app, you would process the CSV file here
551
+ // For this demo, we'll just show the dashboard when Analyze is clicked
552
+ analyzeBtn.addEventListener('click', () => {
553
+ dashboardContent.classList.remove('hidden');
554
+ initializeCharts();
555
+ });
556
+ } else {
557
+ alert('Please upload a CSV file.');
558
+ }
559
+ }
560
+ }
561
+
562
+ // Format file size
563
+ function formatFileSize(bytes) {
564
+ if (bytes === 0) return '0 Bytes';
565
+ const k = 1024;
566
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
567
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
568
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
569
+ }
570
+
571
+ // Sample data download
572
+ sampleDataBtn.addEventListener('click', () => {
573
+ // In a real app, this would download a sample CSV
574
+ alert('Sample data CSV would download here in a real application.');
575
+ });
576
+
577
+ // Initialize charts
578
+ function initializeCharts() {
579
+ // Performance Over Time Chart
580
+ const performanceCtx = document.getElementById('performanceChart').getContext('2d');
581
+ const performanceChart = new Chart(performanceCtx, {
582
+ type: 'line',
583
+ data: {
584
+ labels: ['Jun 1', 'Jun 2', 'Jun 3', 'Jun 4', 'Jun 5', 'Jun 6', 'Jun 7', 'Jun 8', 'Jun 9', 'Jun 10', 'Jun 11', 'Jun 12', 'Jun 13', 'Jun 14', 'Jun 15'],
585
+ datasets: [
586
+ {
587
+ label: 'Spend',
588
+ data: [1200, 1900, 1500, 2000, 1800, 2100, 2400, 2200, 2500, 2800, 3000, 3200, 3100, 3456, 3590],
589
+ borderColor: '#3b82f6',
590
+ backgroundColor: 'rgba(59, 130, 246, 0.05)',
591
+ borderWidth: 2,
592
+ fill: true,
593
+ tension: 0.4
594
+ },
595
+ {
596
+ label: 'Installs',
597
+ data: [800, 1200, 900, 1100, 1000, 1300, 1500, 1400, 1600, 1800, 1900, 2000, 1950, 2145, 2418],
598
+ borderColor: '#10b981',
599
+ backgroundColor: 'rgba(16, 185, 129, 0.05)',
600
+ borderWidth: 2,
601
+ fill: true,
602
+ tension: 0.4
603
+ }
604
+ ]
605
+ },
606
+ options: {
607
+ responsive: true,
608
+ maintainAspectRatio: false,
609
+ plugins: {
610
+ legend: {
611
+ position: 'top',
612
+ },
613
+ tooltip: {
614
+ mode: 'index',
615
+ intersect: false,
616
+ }
617
+ },
618
+ scales: {
619
+ y: {
620
+ beginAtZero: true
621
+ }
622
+ }
623
+ }
624
+ });
625
+
626
+ // Country Breakdown Chart
627
+ const countryCtx = document.getElementById('countryChart').getContext('2d');
628
+ const countryChart = new Chart(countryCtx, {
629
+ type: 'bar',
630
+ data: {
631
+ labels: ['United States', 'Germany', 'Japan', 'Brazil', 'France', 'UK', 'Canada'],
632
+ datasets: [
633
+ {
634
+ label: 'Spend',
635
+ data: [3456, 1245, 2345, 987, 876, 765, 654],
636
+ backgroundColor: '#3b82f6',
637
+ },
638
+ {
639
+ label: 'Installs',
640
+ data: [2145, 876, 721, 1023, 543, 432, 321],
641
+ backgroundColor: '#10b981',
642
+ }
643
+ ]
644
+ },
645
+ options: {
646
+ responsive: true,
647
+ maintainAspectRatio: false,
648
+ plugins: {
649
+ legend: {
650
+ position: 'top',
651
+ },
652
+ tooltip: {
653
+ mode: 'index',
654
+ intersect: false,
655
+ }
656
+ },
657
+ scales: {
658
+ x: {
659
+ stacked: false,
660
+ },
661
+ y: {
662
+ stacked: false,
663
+ beginAtZero: true
664
+ }
665
+ }
666
+ }
667
+ });
668
+
669
+ // Sparkline Charts
670
+ const sparklineData = [
671
+ [5, 10, 5, 8, 12, 15, 20, 15, 18, 22, 25, 20, 18, 22, 25],
672
+ [15, 12, 18, 14, 16, 12, 10, 14, 12, 10, 8, 10, 12, 15, 18],
673
+ [8, 10, 12, 15, 18, 20, 18, 15, 12, 10, 12, 15, 18, 20, 22],
674
+ [12, 15, 18, 20, 22, 25, 22, 20, 18, 15, 12, 10, 12, 15, 18]
675
+ ];
676
+
677
+ for (let i = 1; i <= 4; i++) {
678
+ const ctx = document.getElementById(`sparkline${i}`).getContext('2d');
679
+ new Chart(ctx, {
680
+ type: 'line',
681
+ data: {
682
+ labels: Array(15).fill(''),
683
+ datasets: [{
684
+ data: sparklineData[i-1],
685
+ borderColor: i === 1 ? '#10b981' : i === 2 ? '#ef4444' : i === 3 ? '#3b82f6' : '#f59e0b',
686
+ borderWidth: 2,
687
+ pointRadius: 0,
688
+ tension: 0.4
689
+ }]
690
+ },
691
+ options: {
692
+ responsive: true,
693
+ maintainAspectRatio: false,
694
+ plugins: {
695
+ legend: {
696
+ display: false
697
+ }
698
+ },
699
+ scales: {
700
+ x: { display: false },
701
+ y: { display: false }
702
+ }
703
+ }
704
+ });
705
+ }
706
+ }
707
+ </script>
708
+ <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=Volodya2000/mas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
709
+ </html>
prompts.txt ADDED
File without changes