Hugging Face's logo

Spaces:
naklitechie
/
adengine-backend
Running

App Files Community
naklitechie commited on
Commit
880b211
·
verified ·
1 Parent(s): cc178fb

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +909 -338
index.html CHANGED
@@ -119,6 +119,32 @@
119
  background-color: #f9fafb;
120
  z-index: 10;
121
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
122
  </style>
123
  </head>
124
  <body class="bg-gray-50">
@@ -149,7 +175,7 @@
149
  <i class="fas fa-users mr-3"></i>
150
  Audiences
151
  </a>
152
- <a href="#" class="nav-link flex items-center p-3 rounded-lg bg-blue-50 text-blue-600 font-medium" data-page="reports">
153
  <i class="fas fa-chart-bar mr-3"></i>
154
  Reports
155
  </a>
@@ -178,11 +204,11 @@
178
  <button class="mr-4 text-gray-500 hover:text-gray-700">
179
  <i class="fas fa-bars"></i>
180
  </button>
181
- <h2 class="text-xl font-semibold text-gray-800">Reports</h2>
182
  </div>
183
  <div class="flex items-center space-x-4">
184
  <div class="relative">
185
- <input type="text" placeholder="Search reports..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
186
  <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
187
  </div>
188
  <button class="text-gray-500 hover:text-gray-700 relative">
@@ -192,70 +218,24 @@
192
  </div>
193
  </header>
194
 
195
- <!-- Reports Content -->
196
  <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
197
- <!-- Reports Page -->
198
- <div id="reports-page" class="page active">
199
- <!-- Date Range and Export Controls -->
200
- <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
201
- <div>
202
- <h3 class="text-lg font-semibold text-gray-800">Performance Reports</h3>
203
- <p class="text-sm text-gray-500">Detailed analytics and insights for your advertising campaigns</p>
204
- </div>
205
- <div class="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
206
- <div class="flex items-center bg-white border border-gray-300 rounded-lg px-3 py-2">
207
- <i class="fas fa-calendar-alt text-gray-400 mr-2"></i>
208
- <select class="text-sm focus:outline-none">
209
- <option>Last 7 days</option>
210
- <option selected>Last 30 days</option>
211
- <option>Last 90 days</option>
212
- <option>Custom range</option>
213
- </select>
214
- </div>
215
- <button class="flex items-center justify-center bg-white border border-gray-300 rounded-lg px-4 py-2 text-sm hover:bg-gray-50 transition">
216
- <i class="fas fa-download text-gray-500 mr-2"></i>
217
- Export
218
- </button>
219
- <button class="flex items-center justify-center bg-blue-600 text-white rounded-lg px-4 py-2 text-sm hover:bg-blue-700 transition">
220
- <i class="fas fa-plus mr-2"></i>
221
- New Report
222
- </button>
223
- </div>
224
- </div>
225
-
226
- <!-- Report Type Tabs -->
227
- <div class="bg-white rounded-lg shadow mb-6">
228
- <div class="flex overflow-x-auto">
229
- <div class="report-tab active px-6 py-4 text-sm font-medium cursor-pointer border-b-2 border-blue-600">
230
- <i class="fas fa-chart-line mr-2"></i> Overview
231
- </div>
232
- <div class="report-tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
233
- <i class="fas fa-bullseye mr-2"></i> Campaigns
234
- </div>
235
- <div class="report-tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
236
- <i class="fas fa-users mr-2"></i> Audiences
237
- </div>
238
- <div class="report-tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
239
- <i class="fas fa-globe mr-2"></i> Geographic
240
- </div>
241
- <div class="report-tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
242
- <i class="fas fa-mobile-alt mr-2"></i> Devices
243
- </div>
244
- <div class="report-tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
245
- <i class="fas fa-clock mr-2"></i> Time-based
246
- </div>
247
- </div>
248
  </div>
249
 
250
- <!-- Key Metrics Cards -->
251
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
252
- <div class="report-card bg-white p-6 rounded-lg shadow">
253
  <div class="flex justify-between items-start">
254
  <div>
255
  <p class="text-sm font-medium text-gray-500">Total Impressions</p>
256
  <h3 class="text-2xl font-bold mt-1">1,245,678</h3>
257
  <p class="text-sm mt-2">
258
- <span class="text-green-500 font-medium">+12.5%</span> vs last period
259
  </p>
260
  </div>
261
  <div class="bg-blue-100 p-3 rounded-lg">
@@ -263,13 +243,13 @@
263
  </div>
264
  </div>
265
  </div>
266
- <div class="report-card bg-white p-6 rounded-lg shadow">
267
  <div class="flex justify-between items-start">
268
  <div>
269
  <p class="text-sm font-medium text-gray-500">Total Clicks</p>
270
  <h3 class="text-2xl font-bold mt-1">62,345</h3>
271
  <p class="text-sm mt-2">
272
- <span class="text-green-500 font-medium">+8.3%</span> vs last period
273
  </p>
274
  </div>
275
  <div class="bg-green-100 p-3 rounded-lg">
@@ -277,13 +257,13 @@
277
  </div>
278
  </div>
279
  </div>
280
- <div class="report-card bg-white p-6 rounded-lg shadow">
281
  <div class="flex justify-between items-start">
282
  <div>
283
  <p class="text-sm font-medium text-gray-500">Average CTR</p>
284
  <h3 class="text-2xl font-bold mt-1">5.03%</h3>
285
  <p class="text-sm mt-2">
286
- <span class="text-red-500 font-medium">-0.7%</span> vs last period
287
  </p>
288
  </div>
289
  <div class="bg-purple-100 p-3 rounded-lg">
@@ -291,13 +271,13 @@
291
  </div>
292
  </div>
293
  </div>
294
- <div class="report-card bg-white p-6 rounded-lg shadow">
295
  <div class="flex justify-between items-start">
296
  <div>
297
  <p class="text-sm font-medium text-gray-500">Total Spend</p>
298
  <h3 class="text-2xl font-bold mt-1">$15,456</h3>
299
  <p class="text-sm mt-2">
300
- <span class="text-green-500 font-medium">+15.2%</span> vs last period
301
  </p>
302
  </div>
303
  <div class="bg-yellow-100 p-3 rounded-lg">
@@ -307,12 +287,12 @@
307
  </div>
308
  </div>
309
 
310
- <!-- Main Performance Chart -->
311
- <div class="report-card bg-white p-6 rounded-lg shadow mb-6">
312
  <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6">
313
  <div>
314
- <h4 class="font-medium text-gray-800">Performance Trends</h4>
315
- <p class="text-sm text-gray-500">Daily performance metrics over time</p>
316
  </div>
317
  <div class="flex space-x-2 mt-2 sm:mt-0">
318
  <button class="px-3 py-1 text-xs bg-blue-50 text-blue-600 rounded">Impressions</button>
@@ -322,51 +302,258 @@
322
  </div>
323
  </div>
324
  <div class="chart-container">
325
- <canvas id="performanceTrendsChart"></canvas>
326
  </div>
327
  </div>
328
 
329
- <!-- Secondary Charts Row -->
330
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
331
- <!-- Channel Distribution -->
332
- <div class="report-card bg-white p-6 rounded-lg shadow">
333
- <div class="flex justify-between items-center mb-4">
334
- <h4 class="font-medium text-gray-800">Channel Distribution</h4>
335
- <div class="flex space-x-2">
336
- <button class="px-3 py-1 text-xs bg-blue-50 text-blue-600 rounded">Impressions</button>
337
- <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">Clicks</button>
338
- <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">Spend</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
339
  </div>
 
 
 
 
340
  </div>
341
- <div class="chart-container">
342
- <canvas id="channelDistributionChart"></canvas>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
343
  </div>
344
  </div>
 
345
 
346
- <!-- Device Breakdown -->
347
- <div class="report-card bg-white p-6 rounded-lg shadow">
348
- <div class="flex justify-between items-center mb-4">
349
- <h4 class="font-medium text-gray-800">Device Breakdown</h4>
350
- <div class="flex space-x-2">
351
- <button class="px-3 py-1 text-xs bg-blue-50 text-blue-600 rounded">Impressions</button>
352
- <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">Clicks</button>
353
- <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">CTR</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
354
  </div>
355
  </div>
356
- <div class="chart-container">
357
- <canvas id="deviceBreakdownChart"></canvas>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
358
  </div>
359
  </div>
360
  </div>
361
 
362
- <!-- Campaign Performance Table -->
363
- <div class="report-card bg-white rounded-lg shadow overflow-hidden mb-6">
364
  <div class="p-6 border-b border-gray-200 flex justify-between items-center">
365
  <div>
366
- <h4 class="font-medium text-gray-800">Campaign Performance</h4>
367
- <p class="text-sm text-gray-500">Detailed metrics for all active campaigns</p>
368
  </div>
369
  <div class="flex items-center space-x-3">
 
 
 
370
  <button class="text-gray-500 hover:text-gray-700">
371
  <i class="fas fa-filter"></i>
372
  </button>
@@ -376,21 +563,21 @@
376
  </div>
377
  </div>
378
  <div class="overflow-x-auto">
379
- <table class="min-w-full divide-y divide-gray-200 report-table">
380
  <thead class="bg-gray-50">
381
  <tr>
382
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaign</th>
 
383
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
384
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Impressions</th>
385
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clicks</th>
386
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CTR</th>
387
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spend</th>
388
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CPC</th>
389
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ROAS</th>
390
  </tr>
391
  </thead>
392
  <tbody class="bg-white divide-y divide-gray-200">
393
- <tr>
394
  <td class="px-6 py-4 whitespace-nowrap">
395
  <div class="flex items-center">
396
  <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center">
@@ -398,10 +585,11 @@
398
  </div>
399
  <div class="ml-4">
400
  <div class="text-sm font-medium text-gray-900">Summer Sale 2023</div>
401
- <div class="text-sm text-gray-500">Retargeting</div>
402
  </div>
403
  </div>
404
  </td>
 
405
  <td class="px-6 py-4 whitespace-nowrap">
406
  <span class="status-badge status-active">Active</span>
407
  </td>
@@ -409,10 +597,16 @@
409
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12,345</td>
410
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5.03%</td>
411
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,245</td>
412
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$0.10</td>
413
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.2x</td>
 
 
 
 
 
 
414
  </tr>
415
- <tr>
416
  <td class="px-6 py-4 whitespace-nowrap">
417
  <div class="flex items-center">
418
  <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-lg flex items-center justify-center">
@@ -420,10 +614,11 @@
420
  </div>
421
  <div class="ml-4">
422
  <div class="text-sm font-medium text-gray-900">Mobile App Launch</div>
423
- <div class="text-sm text-gray-500">Prospecting</div>
424
  </div>
425
  </div>
426
  </td>
 
427
  <td class="px-6 py-4 whitespace-nowrap">
428
  <span class="status-badge status-active">Active</span>
429
  </td>
@@ -431,10 +626,16 @@
431
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8,765</td>
432
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.63%</td>
433
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$987</td>
434
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$0.11</td>
435
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3.8x</td>
 
 
 
 
 
 
436
  </tr>
437
- <tr>
438
  <td class="px-6 py-4 whitespace-nowrap">
439
  <div class="flex items-center">
440
  <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-lg flex items-center justify-center">
@@ -442,10 +643,11 @@
442
  </div>
443
  <div class="ml-4">
444
  <div class="text-sm font-medium text-gray-900">Content Marketing</div>
445
- <div class="text-sm text-gray-500">Awareness</div>
446
  </div>
447
  </div>
448
  </td>
 
449
  <td class="px-6 py-4 whitespace-nowrap">
450
  <span class="status-badge status-active">Active</span>
451
  </td>
@@ -453,10 +655,16 @@
453
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15,678</td>
454
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.88%</td>
455
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,532</td>
456
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$0.10</td>
457
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.9x</td>
 
 
 
 
 
 
458
  </tr>
459
- <tr>
460
  <td class="px-6 py-4 whitespace-nowrap">
461
  <div class="flex items-center">
462
  <div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-lg flex items-center justify-center">
@@ -464,10 +672,11 @@
464
  </div>
465
  <div class="ml-4">
466
  <div class="text-sm font-medium text-gray-900">Holiday Special</div>
467
- <div class="text-sm text-gray-500">Retargeting</div>
468
  </div>
469
  </div>
470
  </td>
 
471
  <td class="px-6 py-4 whitespace-nowrap">
472
  <span class="status-badge status-paused">Paused</span>
473
  </td>
@@ -475,10 +684,16 @@
475
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7,543</td>
476
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.81%</td>
477
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$876</td>
478
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$0.12</td>
479
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3.5x</td>
 
 
 
 
 
 
480
  </tr>
481
- <tr>
482
  <td class="px-6 py-4 whitespace-nowrap">
483
  <div class="flex items-center">
484
  <div class="flex-shrink-0 h-10 w-10 bg-red-100 rounded-lg flex items-center justify-center">
@@ -486,10 +701,11 @@
486
  </div>
487
  <div class="ml-4">
488
  <div class="text-sm font-medium text-gray-900">Flash Sale</div>
489
- <div class="text-sm text-gray-500">Conversion</div>
490
  </div>
491
  </div>
492
  </td>
 
493
  <td class="px-6 py-4 whitespace-nowrap">
494
  <span class="status-badge status-paused">Paused</span>
495
  </td>
@@ -497,8 +713,14 @@
497
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6,789</td>
498
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6.87%</td>
499
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,023</td>
500
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$0.15</td>
501
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5.2x</td>
 
 
 
 
 
 
502
  </tr>
503
  </tbody>
504
  </table>
@@ -523,254 +745,603 @@
523
  </div>
524
  </div>
525
  </div>
 
526
 
527
- <!-- Saved Reports Section -->
528
- <div class="report-card bg-white rounded-lg shadow overflow-hidden">
529
- <div class="p-6 border-b border-gray-200">
530
- <h4 class="font-medium text-gray-800">Saved Reports</h4>
531
- <p class="text-sm text-gray-500">Your frequently accessed reports for quick access</p>
 
532
  </div>
533
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
534
- <div class="border border-gray-200 rounded-lg p-4 hover:border-blue-200 hover:bg-blue-50 transition cursor-pointer">
535
- <div class="flex items-start justify-between">
536
- <div class="bg-blue-100 p-2 rounded-lg">
537
- <i class="fas fa-chart-pie text-blue-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
538
  </div>
539
- <button class="text-gray-400 hover:text-gray-600">
 
 
 
 
 
540
  <i class="fas fa-ellipsis-v"></i>
541
  </button>
542
  </div>
543
- <h5 class="font-medium mt-3">Weekly Performance</h5>
544
- <p class="text-sm text-gray-500 mt-1">Updated every Monday</p>
545
- <div class="flex items-center mt-4 text-sm text-gray-500">
546
- <i class="fas fa-clock mr-2"></i>
547
- <span>Last run: Today, 9:00 AM</span>
 
 
 
 
 
 
 
548
  </div>
549
  </div>
550
- <div class="border border-gray-200 rounded-lg p-4 hover:border-green-200 hover:bg-green-50 transition cursor-pointer">
551
- <div class="flex items-start justify-between">
552
- <div class="bg-green-100 p-2 rounded-lg">
553
- <i class="fas fa-users text-green-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
554
  </div>
555
- <button class="text-gray-400 hover:text-gray-600">
 
 
 
 
 
556
  <i class="fas fa-ellipsis-v"></i>
557
  </button>
558
  </div>
559
- <h5 class="font-medium mt-3">Audience Insights</h5>
560
- <p class="text-sm text-gray-500 mt-1">Demographic breakdown</p>
561
- <div class="flex items-center mt-4 text-sm text-gray-500">
562
- <i class="fas fa-clock mr-2"></i>
563
- <span>Last run: Yesterday, 3:45 PM</span>
 
 
564
  </div>
565
  </div>
566
- <div class="border border-gray-200 rounded-lg p-4 hover:border-purple-200 hover:bg-purple-50 transition cursor-pointer">
567
- <div class="flex items-start justify-between">
568
- <div class="bg-purple-100 p-2 rounded-lg">
569
- <i class="fas fa-globe-americas text-purple-600"></i>
 
570
  </div>
571
- <button class="text-gray-400 hover:text-gray-600">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
572
  <i class="fas fa-ellipsis-v"></i>
573
  </button>
574
  </div>
575
- <h5 class="font-medium mt-3">Geo Performance</h5>
576
- <p class="text-sm text-gray-500 mt-1">Regional metrics</p>
577
- <div class="flex items-center mt-4 text-sm text-gray-500">
578
- <i class="fas fa-clock mr-2"></i>
579
- <span>Last run: 2 days ago</span>
 
 
 
 
580
  </div>
581
  </div>
 
 
 
 
 
 
 
582
  </div>
583
  </div>
584
  </div>
585
 
586
- <!-- Other pages would go here -->
587
- <div id="dashboard-page" class="page">
588
- <!-- Dashboard content -->
589
- </div>
590
- <div id="campaigns-page" class="page">
591
- <!-- Campaigns content -->
592
- </div>
593
- <div id="creatives-page" class="page">
594
- <!-- Creatives content -->
595
- </div>
596
  <div id="audiences-page" class="page">
597
- <!-- Audiences content -->
598
- </div>
599
- <div id="settings-page" class="page">
600
- <!-- Settings content -->
601
- </div>
602
- </main>
603
- </div>
604
- </div>
 
 
605
 
606
- <script>
607
- // Initialize charts
608
- document.addEventListener('DOMContentLoaded', function() {
609
- // Performance Trends Chart
610
- const performanceTrendsCtx = document.getElementById('performanceTrendsChart').getContext('2d');
611
- const performanceTrendsChart = new Chart(performanceTrendsCtx, {
612
- type: 'line',
613
- data: {
614
- labels: ['Jan 1', 'Jan 2', 'Jan 3', 'Jan 4', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10', 'Jan 11', 'Jan 12', 'Jan 13', 'Jan 14', 'Jan 15', 'Jan 16', 'Jan 17', 'Jan 18', 'Jan 19', 'Jan 20', 'Jan 21', 'Jan 22', 'Jan 23', 'Jan 24', 'Jan 25', 'Jan 26', 'Jan 27', 'Jan 28', 'Jan 29', 'Jan 30'],
615
- datasets: [
616
- {
617
- label: 'Impressions',
618
- data: [8000, 9500, 10200, 11500, 12000, 12500, 13000, 14000, 14500, 15000, 15500, 16000, 16500, 17000, 17500, 18000, 18500, 19000, 19500, 20000, 20500, 21000, 21500, 22000, 22500, 23000, 23500, 24000, 24500, 25000],
619
- borderColor: '#3b82f6',
620
- backgroundColor: 'rgba(59, 130, 246, 0.05)',
621
- borderWidth: 2,
622
- fill: true,
623
- tension: 0.4
624
- },
625
- {
626
- label: 'Clicks',
627
- data: [400, 450, 500, 520, 550, 580, 600, 620, 650, 680, 700, 720, 750, 780, 800, 820, 850, 880, 900, 920, 950, 980, 1000, 1020, 1050, 1080, 1100, 1120, 1150, 1200],
628
- borderColor: '#10b981',
629
- backgroundColor: 'rgba(16, 185, 129, 0.05)',
630
- borderWidth: 2,
631
- fill: true,
632
- tension: 0.4
633
- }
634
- ]
635
- },
636
- options: {
637
- responsive: true,
638
- maintainAspectRatio: false,
639
- plugins: {
640
- legend: {
641
- position: 'top',
642
- },
643
- tooltip: {
644
- mode: 'index',
645
- intersect: false,
646
- }
647
- },
648
- scales: {
649
- y: {
650
- beginAtZero: true,
651
- grid: {
652
- drawBorder: false
653
- }
654
- },
655
- x: {
656
- grid: {
657
- display: false
658
- }
659
- }
660
- }
661
- }
662
- });
663
 
664
- // Channel Distribution Chart
665
- const channelDistributionCtx = document.getElementById('channelDistributionChart').getContext('2d');
666
- const channelDistributionChart = new Chart(channelDistributionCtx, {
667
- type: 'doughnut',
668
- data: {
669
- labels: ['Facebook', 'Instagram', 'Audience Network', 'Messenger', 'Google Ads'],
670
- datasets: [{
671
- data: [35, 30, 15, 10, 10],
672
- backgroundColor: [
673
- '#3b82f6',
674
- '#8b5cf6',
675
- '#ec4899',
676
- '#14b8a6',
677
- '#f59e0b'
678
- ],
679
- borderWidth: 0,
680
- }]
681
- },
682
- options: {
683
- responsive: true,
684
- maintainAspectRatio: false,
685
- plugins: {
686
- legend: {
687
- position: 'right',
688
- }
689
- },
690
- cutout: '70%'
691
- }
692
- });
 
 
 
 
 
 
 
 
 
 
 
693
 
694
- // Device Breakdown Chart
695
- const deviceBreakdownCtx = document.getElementById('deviceBreakdownChart').getContext('2d');
696
- const deviceBreakdownChart = new Chart(deviceBreakdownCtx, {
697
- type: 'bar',
698
- data: {
699
- labels: ['Mobile', 'Desktop', 'Tablet'],
700
- datasets: [
701
- {
702
- label: 'Impressions',
703
- data: [65, 25, 10],
704
- backgroundColor: '#3b82f6',
705
- borderRadius: 4
706
- },
707
- {
708
- label: 'Clicks',
709
- data: [70, 20, 10],
710
- backgroundColor: '#10b981',
711
- borderRadius: 4
712
- }
713
- ]
714
- },
715
- options: {
716
- responsive: true,
717
- maintainAspectRatio: false,
718
- plugins: {
719
- legend: {
720
- position: 'top',
721
- }
722
- },
723
- scales: {
724
- x: {
725
- stacked: false,
726
- grid: {
727
- display: false
728
- }
729
- },
730
- y: {
731
- stacked: false,
732
- grid: {
733
- drawBorder: false
734
- },
735
- beginAtZero: true
736
- }
737
- }
738
- }
739
- });
740
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
741
 
742
- // Page navigation
743
- document.querySelectorAll('.nav-link').forEach(link => {
744
- link.addEventListener('click', function() {
745
- // Remove active class from all nav links
746
- document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('bg-blue-50', 'text-blue-600', 'font-medium'));
747
-
748
- // Add active class to clicked link
749
- this.classList.add('bg-blue-50', 'text-blue-600', 'font-medium');
750
-
751
- // Hide all pages
752
- document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
753
-
754
- // Show the selected page
755
- const pageId = this.getAttribute('data-page') + '-page';
756
- document.getElementById(pageId).classList.add('active');
757
- });
758
- });
 
 
 
 
 
 
 
 
 
 
 
759
 
760
- // Report tab navigation
761
- document.querySelectorAll('.report-tab').forEach(tab => {
762
- tab.addEventListener('click', function() {
763
- // Remove active class from all tabs
764
- document.querySelectorAll('.report-tab').forEach(t => {
765
- t.classList.remove('active', 'border-blue-600', 'text-blue-600');
766
- t.classList.add('text-gray-500');
767
- });
768
-
769
- // Add active class to clicked tab
770
- this.classList.add('active', 'border-blue-600', 'text-blue-600');
771
- this.classList.remove('text-gray-500');
772
- });
773
- });
774
- </script>
775
- <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=naklitechie/adengine-backend" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
776
  </html>
 
119
  background-color: #f9fafb;
120
  z-index: 10;
121
  }
122
+ .campaign-card {
123
+ transition: all 0.3s ease;
124
+ }
125
+ .campaign-card:hover {
126
+ transform: translateY(-5px);
127
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
128
+ }
129
+ .creative-thumbnail {
130
+ transition: all 0.3s ease;
131
+ }
132
+ .creative-thumbnail:hover {
133
+ transform: scale(1.03);
134
+ }
135
+ .audience-segment {
136
+ transition: all 0.3s ease;
137
+ }
138
+ .audience-segment:hover {
139
+ transform: translateY(-3px);
140
+ box-shadow: 0 10px 15px rgba(0,0,0,0.1);
141
+ }
142
+ .setting-option {
143
+ transition: all 0.2s ease;
144
+ }
145
+ .setting-option:hover {
146
+ background-color: #f8fafc;
147
+ }
148
  </style>
149
  </head>
150
  <body class="bg-gray-50">
 
175
  <i class="fas fa-users mr-3"></i>
176
  Audiences
177
  </a>
178
+ <a href="#" class="nav-link flex items-center p-3 rounded-lg text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition" data-page="reports">
179
  <i class="fas fa-chart-bar mr-3"></i>
180
  Reports
181
  </a>
 
204
  <button class="mr-4 text-gray-500 hover:text-gray-700">
205
  <i class="fas fa-bars"></i>
206
  </button>
207
+ <h2 class="text-xl font-semibold text-gray-800" id="page-title">Dashboard</h2>
208
  </div>
209
  <div class="flex items-center space-x-4">
210
  <div class="relative">
211
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
212
  <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
213
  </div>
214
  <button class="text-gray-500 hover:text-gray-700 relative">
 
218
  </div>
219
  </header>
220
 
221
+ <!-- Main Content Area -->
222
  <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
223
+ <!-- Dashboard Page -->
224
+ <div id="dashboard-page" class="page active">
225
+ <div class="mb-6">
226
+ <h3 class="text-lg font-semibold text-gray-800">Welcome back, Sarah!</h3>
227
+ <p class="text-sm text-gray-500">Here's what's happening with your campaigns today</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
228
  </div>
229
 
230
+ <!-- Metrics Cards -->
231
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
232
+ <div class="metric-card bg-white p-6 rounded-lg shadow">
233
  <div class="flex justify-between items-start">
234
  <div>
235
  <p class="text-sm font-medium text-gray-500">Total Impressions</p>
236
  <h3 class="text-2xl font-bold mt-1">1,245,678</h3>
237
  <p class="text-sm mt-2">
238
+ <span class="text-green-500 font-medium">+12.5%</span> vs yesterday
239
  </p>
240
  </div>
241
  <div class="bg-blue-100 p-3 rounded-lg">
 
243
  </div>
244
  </div>
245
  </div>
246
+ <div class="metric-card bg-white p-6 rounded-lg shadow">
247
  <div class="flex justify-between items-start">
248
  <div>
249
  <p class="text-sm font-medium text-gray-500">Total Clicks</p>
250
  <h3 class="text-2xl font-bold mt-1">62,345</h3>
251
  <p class="text-sm mt-2">
252
+ <span class="text-green-500 font-medium">+8.3%</span> vs yesterday
253
  </p>
254
  </div>
255
  <div class="bg-green-100 p-3 rounded-lg">
 
257
  </div>
258
  </div>
259
  </div>
260
+ <div class="metric-card bg-white p-6 rounded-lg shadow">
261
  <div class="flex justify-between items-start">
262
  <div>
263
  <p class="text-sm font-medium text-gray-500">Average CTR</p>
264
  <h3 class="text-2xl font-bold mt-1">5.03%</h3>
265
  <p class="text-sm mt-2">
266
+ <span class="text-red-500 font-medium">-0.7%</span> vs yesterday
267
  </p>
268
  </div>
269
  <div class="bg-purple-100 p-3 rounded-lg">
 
271
  </div>
272
  </div>
273
  </div>
274
+ <div class="metric-card bg-white p-6 rounded-lg shadow">
275
  <div class="flex justify-between items-start">
276
  <div>
277
  <p class="text-sm font-medium text-gray-500">Total Spend</p>
278
  <h3 class="text-2xl font-bold mt-1">$15,456</h3>
279
  <p class="text-sm mt-2">
280
+ <span class="text-green-500 font-medium">+15.2%</span> vs yesterday
281
  </p>
282
  </div>
283
  <div class="bg-yellow-100 p-3 rounded-lg">
 
287
  </div>
288
  </div>
289
 
290
+ <!-- Main Chart -->
291
+ <div class="bg-white p-6 rounded-lg shadow mb-6">
292
  <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6">
293
  <div>
294
+ <h4 class="font-medium text-gray-800">Performance Overview</h4>
295
+ <p class="text-sm text-gray-500">Last 30 days performance metrics</p>
296
  </div>
297
  <div class="flex space-x-2 mt-2 sm:mt-0">
298
  <button class="px-3 py-1 text-xs bg-blue-50 text-blue-600 rounded">Impressions</button>
 
302
  </div>
303
  </div>
304
  <div class="chart-container">
305
+ <canvas id="performanceChart"></canvas>
306
  </div>
307
  </div>
308
 
309
+ <!-- Campaigns Overview -->
310
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
311
+ <div class="p-6 border-b border-gray-200 flex justify-between items-center">
312
+ <div>
313
+ <h4 class="font-medium text-gray-800">Active Campaigns</h4>
314
+ <p class="text-sm text-gray-500">Your currently running campaigns</p>
315
+ </div>
316
+ <button class="flex items-center text-blue-600 text-sm font-medium hover:text-blue-800">
317
+ View All <i class="fas fa-chevron-right ml-1"></i>
318
+ </button>
319
+ </div>
320
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
321
+ <div class="campaign-card bg-white border border-gray-200 rounded-lg p-5">
322
+ <div class="flex justify-between items-start mb-4">
323
+ <div>
324
+ <h5 class="font-medium">Summer Sale 2023</h5>
325
+ <p class="text-sm text-gray-500">Retargeting</p>
326
+ </div>
327
+ <span class="status-badge status-active">Active</span>
328
+ </div>
329
+ <div class="flex justify-between mb-3">
330
+ <div>
331
+ <p class="text-xs text-gray-500">Impressions</p>
332
+ <p class="text-sm font-medium">245,678</p>
333
+ </div>
334
+ <div>
335
+ <p class="text-xs text-gray-500">CTR</p>
336
+ <p class="text-sm font-medium">5.03%</p>
337
+ </div>
338
+ <div>
339
+ <p class="text-xs text-gray-500">Spend</p>
340
+ <p class="text-sm font-medium">$1,245</p>
341
+ </div>
342
+ </div>
343
+ <div class="w-full bg-gray-200 rounded-full h-2">
344
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div>
345
+ </div>
346
+ <p class="text-xs text-gray-500 mt-2">65% of budget spent</p>
347
+ </div>
348
+ <div class="campaign-card bg-white border border-gray-200 rounded-lg p-5">
349
+ <div class="flex justify-between items-start mb-4">
350
+ <div>
351
+ <h5 class="font-medium">Mobile App Launch</h5>
352
+ <p class="text-sm text-gray-500">Prospecting</p>
353
+ </div>
354
+ <span class="status-badge status-active">Active</span>
355
+ </div>
356
+ <div class="flex justify-between mb-3">
357
+ <div>
358
+ <p class="text-xs text-gray-500">Impressions</p>
359
+ <p class="text-sm font-medium">189,234</p>
360
+ </div>
361
+ <div>
362
+ <p class="text-xs text-gray-500">CTR</p>
363
+ <p class="text-sm font-medium">4.63%</p>
364
+ </div>
365
+ <div>
366
+ <p class="text-xs text-gray-500">Spend</p>
367
+ <p class="text-sm font-medium">$987</p>
368
+ </div>
369
  </div>
370
+ <div class="w-full bg-gray-200 rounded-full h-2">
371
+ <div class="bg-green-600 h-2 rounded-full" style="width: 45%"></div>
372
+ </div>
373
+ <p class="text-xs text-gray-500 mt-2">45% of budget spent</p>
374
  </div>
375
+ <div class="campaign-card bg-white border border-gray-200 rounded-lg p-5">
376
+ <div class="flex justify-between items-start mb-4">
377
+ <div>
378
+ <h5 class="font-medium">Content Marketing</h5>
379
+ <p class="text-sm text-gray-500">Awareness</p>
380
+ </div>
381
+ <span class="status-badge status-active">Active</span>
382
+ </div>
383
+ <div class="flex justify-between mb-3">
384
+ <div>
385
+ <p class="text-xs text-gray-500">Impressions</p>
386
+ <p class="text-sm font-medium">321,456</p>
387
+ </div>
388
+ <div>
389
+ <p class="text-xs text-gray-500">CTR</p>
390
+ <p class="text-sm font-medium">4.88%</p>
391
+ </div>
392
+ <div>
393
+ <p class="text-xs text-gray-500">Spend</p>
394
+ <p class="text-sm font-medium">$1,532</p>
395
+ </div>
396
+ </div>
397
+ <div class="w-full bg-gray-200 rounded-full h-2">
398
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 78%"></div>
399
+ </div>
400
+ <p class="text-xs text-gray-500 mt-2">78% of budget spent</p>
401
  </div>
402
  </div>
403
+ </div>
404
 
405
+ <!-- Recent Activity -->
406
+ <div class="bg-white rounded-lg shadow overflow-hidden">
407
+ <div class="p-6 border-b border-gray-200">
408
+ <h4 class="font-medium text-gray-800">Recent Activity</h4>
409
+ <p class="text-sm text-gray-500">Latest changes and updates in your account</p>
410
+ </div>
411
+ <div class="divide-y divide-gray-200">
412
+ <div class="p-4 hover:bg-gray-50 transition">
413
+ <div class="flex items-start">
414
+ <div class="bg-blue-100 p-2 rounded-lg mr-4">
415
+ <i class="fas fa-bullhorn text-blue-600"></i>
416
+ </div>
417
+ <div class="flex-1">
418
+ <div class="flex justify-between">
419
+ <p class="font-medium">New campaign created</p>
420
+ <p class="text-sm text-gray-500">2 hours ago</p>
421
+ </div>
422
+ <p class="text-sm text-gray-500 mt-1">"Summer Sale 2023" campaign was created by Sarah Johnson</p>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ <div class="p-4 hover:bg-gray-50 transition">
427
+ <div class="flex items-start">
428
+ <div class="bg-green-100 p-2 rounded-lg mr-4">
429
+ <i class="fas fa-ad text-green-600"></i>
430
+ </div>
431
+ <div class="flex-1">
432
+ <div class="flex justify-between">
433
+ <p class="font-medium">Creative approved</p>
434
+ <p class="text-sm text-gray-500">5 hours ago</p>
435
+ </div>
436
+ <p class="text-sm text-gray-500 mt-1">"Mobile App Banner" creative was approved by the system</p>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ <div class="p-4 hover:bg-gray-50 transition">
441
+ <div class="flex items-start">
442
+ <div class="bg-yellow-100 p-2 rounded-lg mr-4">
443
+ <i class="fas fa-chart-line text-yellow-600"></i>
444
+ </div>
445
+ <div class="flex-1">
446
+ <div class="flex justify-between">
447
+ <p class="font-medium">Performance alert</p>
448
+ <p class="text-sm text-gray-500">1 day ago</p>
449
+ </div>
450
+ <p class="text-sm text-gray-500 mt-1">"Content Marketing" campaign CTR dropped below threshold</p>
451
+ </div>
452
  </div>
453
  </div>
454
+ <div class="p-4 hover:bg-gray-50 transition">
455
+ <div class="flex items-start">
456
+ <div class="bg-purple-100 p-2 rounded-lg mr-4">
457
+ <i class="fas fa-users text-purple-600"></i>
458
+ </div>
459
+ <div class="flex-1">
460
+ <div class="flex justify-between">
461
+ <p class="font-medium">Audience updated</p>
462
+ <p class="text-sm text-gray-500">2 days ago</p>
463
+ </div>
464
+ <p class="text-sm text-gray-500 mt-1">"High Value Customers" audience segment was updated</p>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <!-- Campaigns Page -->
473
+ <div id="campaigns-page" class="page">
474
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
475
+ <div>
476
+ <h3 class="text-lg font-semibold text-gray-800">Campaign Management</h3>
477
+ <p class="text-sm text-gray-500">Create, manage, and optimize your advertising campaigns</p>
478
+ </div>
479
+ <button class="flex items-center justify-center bg-blue-600 text-white rounded-lg px-4 py-2 text-sm hover:bg-blue-700 transition">
480
+ <i class="fas fa-plus mr-2"></i>
481
+ New Campaign
482
+ </button>
483
+ </div>
484
+
485
+ <!-- Campaign Tabs -->
486
+ <div class="bg-white rounded-lg shadow mb-6">
487
+ <div class="flex overflow-x-auto">
488
+ <div class="tab active px-6 py-4 text-sm font-medium cursor-pointer border-b-2 border-blue-600">
489
+ All Campaigns
490
+ </div>
491
+ <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
492
+ Active
493
+ </div>
494
+ <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
495
+ Paused
496
+ </div>
497
+ <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
498
+ Drafts
499
+ </div>
500
+ <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
501
+ Archived
502
+ </div>
503
+ </div>
504
+ </div>
505
+
506
+ <!-- Campaign Filters -->
507
+ <div class="bg-white rounded-lg shadow p-4 mb-6">
508
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
509
+ <div>
510
+ <label class="block text-sm font-medium text-gray-700 mb-1">Campaign Type</label>
511
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
512
+ <option>All Types</option>
513
+ <option>Prospecting</option>
514
+ <option>Retargeting</option>
515
+ <option>Awareness</option>
516
+ <option>Conversion</option>
517
+ </select>
518
+ </div>
519
+ <div>
520
+ <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
521
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
522
+ <option>All Statuses</option>
523
+ <option>Active</option>
524
+ <option>Paused</option>
525
+ <option>Pending</option>
526
+ <option>Completed</option>
527
+ </select>
528
+ </div>
529
+ <div>
530
+ <label class="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
531
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
532
+ <option>Last 30 days</option>
533
+ <option>Last 7 days</option>
534
+ <option>Last 90 days</option>
535
+ <option>Custom range</option>
536
+ </select>
537
+ </div>
538
+ <div class="flex items-end">
539
+ <button class="w-full bg-blue-600 text-white rounded-lg px-4 py-2 text-sm hover:bg-blue-700 transition">
540
+ Apply Filters
541
+ </button>
542
  </div>
543
  </div>
544
  </div>
545
 
546
+ <!-- Campaign List -->
547
+ <div class="bg-white rounded-lg shadow overflow-hidden">
548
  <div class="p-6 border-b border-gray-200 flex justify-between items-center">
549
  <div>
550
+ <h4 class="font-medium text-gray-800">12 Campaigns</h4>
551
+ <p class="text-sm text-gray-500">Sorted by: Most recent</p>
552
  </div>
553
  <div class="flex items-center space-x-3">
554
+ <button class="text-gray-500 hover:text-gray-700">
555
+ <i class="fas fa-sort-amount-down"></i>
556
+ </button>
557
  <button class="text-gray-500 hover:text-gray-700">
558
  <i class="fas fa-filter"></i>
559
  </button>
 
563
  </div>
564
  </div>
565
  <div class="overflow-x-auto">
566
+ <table class="min-w-full divide-y divide-gray-200">
567
  <thead class="bg-gray-50">
568
  <tr>
569
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaign</th>
570
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
571
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
572
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Impressions</th>
573
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clicks</th>
574
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CTR</th>
575
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spend</th>
576
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
 
577
  </tr>
578
  </thead>
579
  <tbody class="bg-white divide-y divide-gray-200">
580
+ <tr class="hover:bg-gray-50 transition">
581
  <td class="px-6 py-4 whitespace-nowrap">
582
  <div class="flex items-center">
583
  <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center">
 
585
  </div>
586
  <div class="ml-4">
587
  <div class="text-sm font-medium text-gray-900">Summer Sale 2023</div>
588
+ <div class="text-sm text-gray-500">Started: Jun 1, 2023</div>
589
  </div>
590
  </div>
591
  </td>
592
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Retargeting</td>
593
  <td class="px-6 py-4 whitespace-nowrap">
594
  <span class="status-badge status-active">Active</span>
595
  </td>
 
597
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12,345</td>
598
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5.03%</td>
599
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,245</td>
600
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
601
+ <button class="text-blue-600 hover:text-blue-800 mr-3">
602
+ <i class="fas fa-edit"></i>
603
+ </button>
604
+ <button class="text-gray-500 hover:text-gray-700">
605
+ <i class="fas fa-ellipsis-v"></i>
606
+ </button>
607
+ </td>
608
  </tr>
609
+ <tr class="hover:bg-gray-50 transition">
610
  <td class="px-6 py-4 whitespace-nowrap">
611
  <div class="flex items-center">
612
  <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-lg flex items-center justify-center">
 
614
  </div>
615
  <div class="ml-4">
616
  <div class="text-sm font-medium text-gray-900">Mobile App Launch</div>
617
+ <div class="text-sm text-gray-500">Started: May 15, 2023</div>
618
  </div>
619
  </div>
620
  </td>
621
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Prospecting</td>
622
  <td class="px-6 py-4 whitespace-nowrap">
623
  <span class="status-badge status-active">Active</span>
624
  </td>
 
626
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8,765</td>
627
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.63%</td>
628
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$987</td>
629
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
630
+ <button class="text-blue-600 hover:text-blue-800 mr-3">
631
+ <i class="fas fa-edit"></i>
632
+ </button>
633
+ <button class="text-gray-500 hover:text-gray-700">
634
+ <i class="fas fa-ellipsis-v"></i>
635
+ </button>
636
+ </td>
637
  </tr>
638
+ <tr class="hover:bg-gray-50 transition">
639
  <td class="px-6 py-4 whitespace-nowrap">
640
  <div class="flex items-center">
641
  <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-lg flex items-center justify-center">
 
643
  </div>
644
  <div class="ml-4">
645
  <div class="text-sm font-medium text-gray-900">Content Marketing</div>
646
+ <div class="text-sm text-gray-500">Started: Apr 28, 2023</div>
647
  </div>
648
  </div>
649
  </td>
650
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Awareness</td>
651
  <td class="px-6 py-4 whitespace-nowrap">
652
  <span class="status-badge status-active">Active</span>
653
  </td>
 
655
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15,678</td>
656
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.88%</td>
657
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,532</td>
658
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
659
+ <button class="text-blue-600 hover:text-blue-800 mr-3">
660
+ <i class="fas fa-edit"></i>
661
+ </button>
662
+ <button class="text-gray-500 hover:text-gray-700">
663
+ <i class="fas fa-ellipsis-v"></i>
664
+ </button>
665
+ </td>
666
  </tr>
667
+ <tr class="hover:bg-gray-50 transition">
668
  <td class="px-6 py-4 whitespace-nowrap">
669
  <div class="flex items-center">
670
  <div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-lg flex items-center justify-center">
 
672
  </div>
673
  <div class="ml-4">
674
  <div class="text-sm font-medium text-gray-900">Holiday Special</div>
675
+ <div class="text-sm text-gray-500">Started: Dec 1, 2022</div>
676
  </div>
677
  </div>
678
  </td>
679
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Retargeting</td>
680
  <td class="px-6 py-4 whitespace-nowrap">
681
  <span class="status-badge status-paused">Paused</span>
682
  </td>
 
684
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7,543</td>
685
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.81%</td>
686
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$876</td>
687
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
688
+ <button class="text-blue-600 hover:text-blue-800 mr-3">
689
+ <i class="fas fa-edit"></i>
690
+ </button>
691
+ <button class="text-gray-500 hover:text-gray-700">
692
+ <i class="fas fa-ellipsis-v"></i>
693
+ </button>
694
+ </td>
695
  </tr>
696
+ <tr class="hover:bg-gray-50 transition">
697
  <td class="px-6 py-4 whitespace-nowrap">
698
  <div class="flex items-center">
699
  <div class="flex-shrink-0 h-10 w-10 bg-red-100 rounded-lg flex items-center justify-center">
 
701
  </div>
702
  <div class="ml-4">
703
  <div class="text-sm font-medium text-gray-900">Flash Sale</div>
704
+ <div class="text-sm text-gray-500">Started: Nov 15, 2022</div>
705
  </div>
706
  </div>
707
  </td>
708
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Conversion</td>
709
  <td class="px-6 py-4 whitespace-nowrap">
710
  <span class="status-badge status-paused">Paused</span>
711
  </td>
 
713
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6,789</td>
714
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6.87%</td>
715
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,023</td>
716
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
717
+ <button class="text-blue-600 hover:text-blue-800 mr-3">
718
+ <i class="fas fa-edit"></i>
719
+ </button>
720
+ <button class="text-gray-500 hover:text-gray-700">
721
+ <i class="fas fa-ellipsis-v"></i>
722
+ </button>
723
+ </td>
724
  </tr>
725
  </tbody>
726
  </table>
 
745
  </div>
746
  </div>
747
  </div>
748
+ </div>
749
 
750
+ <!-- Creatives Page -->
751
+ <div id="creatives-page" class="page">
752
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
753
+ <div>
754
+ <h3 class="text-lg font-semibold text-gray-800">Creative Assets</h3>
755
+ <p class="text-sm text-gray-500">Manage all your ad creatives in one place</p>
756
  </div>
757
+ <button class="flex items-center justify-center bg-blue-600 text-white rounded-lg px-4 py-2 text-sm hover:bg-blue-700 transition">
758
+ <i class="fas fa-plus mr-2"></i>
759
+ Upload Creative
760
+ </button>
761
+ </div>
762
+
763
+ <!-- Creative Tabs -->
764
+ <div class="bg-white rounded-lg shadow mb-6">
765
+ <div class="flex overflow-x-auto">
766
+ <div class="tab active px-6 py-4 text-sm font-medium cursor-pointer border-b-2 border-blue-600">
767
+ All Creatives
768
+ </div>
769
+ <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
770
+ Images
771
+ </div>
772
+ <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
773
+ Videos
774
+ </div>
775
+ <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
776
+ Carousels
777
+ </div>
778
+ <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
779
+ Stories
780
+ </div>
781
+ </div>
782
+ </div>
783
+
784
+ <!-- Creative Filters -->
785
+ <div class="bg-white rounded-lg shadow p-4 mb-6">
786
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
787
+ <div>
788
+ <label class="block text-sm font-medium text-gray-700 mb-1">Format</label>
789
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
790
+ <option>All Formats</option>
791
+ <option>Static Image</option>
792
+ <option>Video</option>
793
+ <option>Carousel</option>
794
+ <option>Story</option>
795
+ </select>
796
+ </div>
797
+ <div>
798
+ <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
799
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
800
+ <option>All Statuses</option>
801
+ <option>Approved</option>
802
+ <option>Pending</option>
803
+ <option>Rejected</option>
804
+ <option>Archived</option>
805
+ </select>
806
+ </div>
807
+ <div>
808
+ <label class="block text-sm font-medium text-gray-700 mb-1">Campaign</label>
809
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
810
+ <option>All Campaigns</option>
811
+ <option>Summer Sale 2023</option>
812
+ <option>Mobile App Launch</option>
813
+ <option>Content Marketing</option>
814
+ <option>Holiday Special</option>
815
+ </select>
816
+ </div>
817
+ <div class="flex items-end">
818
+ <button class="w-full bg-blue-600 text-white rounded-lg px-4 py-2 text-sm hover:bg-blue-700 transition">
819
+ Apply Filters
820
+ </button>
821
+ </div>
822
+ </div>
823
+ </div>
824
+
825
+ <!-- Creative Grid -->
826
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
827
+ <div class="creative-thumbnail bg-white rounded-lg shadow overflow-hidden">
828
+ <div class="relative pt-[56.25%] bg-gray-100">
829
+ <img src="https://images.unsplash.com/photo-1493612276216-1a634d57106f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Creative" class="absolute top-0 left-0 w-full h-full object-cover">
830
+ <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow">
831
+ <i class="fas fa-check-circle text-green-500"></i>
832
+ </div>
833
+ </div>
834
+ <div class="p-4">
835
+ <div class="flex justify-between items-start">
836
+ <div>
837
+ <h4 class="font-medium text-gray-800">Summer Sale Banner</h4>
838
+ <p class="text-sm text-gray-500">1200 × 628 px</p>
839
+ </div>
840
+ <span class="status-badge status-active">Approved</span>
841
+ </div>
842
+ <div class="mt-3 flex justify-between text-sm">
843
+ <div>
844
+ <p class="text-gray-500">Used in</p>
845
+ <p class="font-medium">3 campaigns</p>
846
+ </div>
847
+ <div>
848
+ <p class="text-gray-500">Last used</p>
849
+ <p class="font-medium">2 days ago</p>
850
+ </div>
851
+ </div>
852
+ <div class="mt-3 flex justify-between">
853
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
854
+ <i class="fas fa-pencil-alt mr-1"></i> Edit
855
+ </button>
856
+ <button class="text-gray-500 hover:text-gray-700">
857
+ <i class="fas fa-ellipsis-v"></i>
858
+ </button>
859
+ </div>
860
+ </div>
861
+ </div>
862
+ <div class="creative-thumbnail bg-white rounded-lg shadow overflow-hidden">
863
+ <div class="relative pt-[56.25%] bg-gray-100">
864
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Creative" class="absolute top-0 left-0 w-full h-full object-cover">
865
+ <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow">
866
+ <i class="fas fa-check-circle text-green-500"></i>
867
+ </div>
868
+ </div>
869
+ <div class="p-4">
870
+ <div class="flex justify-between items-start">
871
+ <div>
872
+ <h4 class="font-medium text-gray-800">Product Showcase</h4>
873
+ <p class="text-sm text-gray-500">1080 × 1080 px</p>
874
+ </div>
875
+ <span class="status-badge status-active">Approved</span>
876
+ </div>
877
+ <div class="mt-3 flex justify-between text-sm">
878
+ <div>
879
+ <p class="text-gray-500">Used in</p>
880
+ <p class="font-medium">2 campaigns</p>
881
+ </div>
882
+ <div>
883
+ <p class="text-gray-500">Last used</p>
884
+ <p class="font-medium">1 week ago</p>
885
+ </div>
886
+ </div>
887
+ <div class="mt-3 flex justify-between">
888
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
889
+ <i class="fas fa-pencil-alt mr-1"></i> Edit
890
+ </button>
891
+ <button class="text-gray-500 hover:text-gray-700">
892
+ <i class="fas fa-ellipsis-v"></i>
893
+ </button>
894
+ </div>
895
+ </div>
896
+ </div>
897
+ <div class="creative-thumbnail bg-white rounded-lg shadow overflow-hidden">
898
+ <div class="relative pt-[56.25%] bg-gray-100">
899
+ <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
900
+ <i class="fas fa-play-circle text-4xl text-gray-400"></i>
901
+ </div>
902
+ <img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Creative" class="absolute top-0 left-0 w-full h-full object-cover">
903
+ <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow">
904
+ <i class="fas fa-exclamation-circle text-yellow-500"></i>
905
+ </div>
906
+ </div>
907
+ <div class="p-4">
908
+ <div class="flex justify-between items-start">
909
+ <div>
910
+ <h4 class="font-medium text-gray-800">App Demo Video</h4>
911
+ <p class="text-sm text-gray-500">1920 × 1080 px</p>
912
+ </div>
913
+ <span class="status-badge status-pending">Pending</span>
914
+ </div>
915
+ <div class="mt-3 flex justify-between text-sm">
916
+ <div>
917
+ <p class="text-gray-500">Used in</p>
918
+ <p class="font-medium">1 campaign</p>
919
+ </div>
920
+ <div>
921
+ <p class="text-gray-500">Uploaded</p>
922
+ <p class="font-medium">3 days ago</p>
923
  </div>
924
+ </div>
925
+ <div class="mt-3 flex justify-between">
926
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
927
+ <i class="fas fa-pencil-alt mr-1"></i> Edit
928
+ </button>
929
+ <button class="text-gray-500 hover:text-gray-700">
930
  <i class="fas fa-ellipsis-v"></i>
931
  </button>
932
  </div>
933
+ </div>
934
+ </div>
935
+ <div class="creative-thumbnail bg-white rounded-lg shadow overflow-hidden">
936
+ <div class="relative pt-[56.25%] bg-gray-100">
937
+ <div class="absolute inset-0 flex items-center justify-center">
938
+ <div class="text-center p-4">
939
+ <i class="fas fa-images text-3xl text-gray-400 mb-2"></i>
940
+ <p class="text-sm text-gray-500">Carousel (4 images)</p>
941
+ </div>
942
+ </div>
943
+ <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow">
944
+ <i class="fas fa-check-circle text-green-500"></i>
945
  </div>
946
  </div>
947
+ <div class="p-4">
948
+ <div class="flex justify-between items-start">
949
+ <div>
950
+ <h4 class="font-medium text-gray-800">Product Gallery</h4>
951
+ <p class="text-sm text-gray-500">1080 × 1080 px</p>
952
+ </div>
953
+ <span class="status-badge status-active">Approved</span>
954
+ </div>
955
+ <div class="mt-3 flex justify-between text-sm">
956
+ <div>
957
+ <p class="text-gray-500">Used in</p>
958
+ <p class="font-medium">1 campaign</p>
959
+ </div>
960
+ <div>
961
+ <p class="text-gray-500">Last used</p>
962
+ <p class="font-medium">2 weeks ago</p>
963
  </div>
964
+ </div>
965
+ <div class="mt-3 flex justify-between">
966
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
967
+ <i class="fas fa-pencil-alt mr-1"></i> Edit
968
+ </button>
969
+ <button class="text-gray-500 hover:text-gray-700">
970
  <i class="fas fa-ellipsis-v"></i>
971
  </button>
972
  </div>
973
+ </div>
974
+ </div>
975
+ <div class="creative-thumbnail bg-white rounded-lg shadow overflow-hidden">
976
+ <div class="relative pt-[177.78%] bg-gray-100">
977
+ <img src="https://images.unsplash.com/photo-1611162616475-46b635cb6868?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Creative" class="absolute top-0 left-0 w-full h-full object-cover">
978
+ <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow">
979
+ <i class="fas fa-check-circle text-green-500"></i>
980
  </div>
981
  </div>
982
+ <div class="p-4">
983
+ <div class="flex justify-between items-start">
984
+ <div>
985
+ <h4 class="font-medium text-gray-800">Mobile Story</h4>
986
+ <p class="text-sm text-gray-500">1080 × 1920 px</p>
987
  </div>
988
+ <span class="status-badge status-active">Approved</span>
989
+ </div>
990
+ <div class="mt-3 flex justify-between text-sm">
991
+ <div>
992
+ <p class="text-gray-500">Used in</p>
993
+ <p class="font-medium">2 campaigns</p>
994
+ </div>
995
+ <div>
996
+ <p class="text-gray-500">Last used</p>
997
+ <p class="font-medium">5 days ago</p>
998
+ </div>
999
+ </div>
1000
+ <div class="mt-3 flex justify-between">
1001
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
1002
+ <i class="fas fa-pencil-alt mr-1"></i> Edit
1003
+ </button>
1004
+ <button class="text-gray-500 hover:text-gray-700">
1005
  <i class="fas fa-ellipsis-v"></i>
1006
  </button>
1007
  </div>
1008
+ </div>
1009
+ </div>
1010
+ <div class="creative-thumbnail bg-white rounded-lg shadow overflow-hidden">
1011
+ <div class="relative pt-[56.25%] bg-gray-100">
1012
+ <div class="absolute inset-0 flex items-center justify-center">
1013
+ <div class="text-center p-4">
1014
+ <i class="fas fa-plus-circle text-3xl text-gray-400 mb-2"></i>
1015
+ <p class="text-sm text-gray-500">Upload new creative</p>
1016
+ </div>
1017
  </div>
1018
  </div>
1019
+ <div class="p-4">
1020
+ <h4 class="font-medium text-gray-800 text-center">Add New Creative</h4>
1021
+ <button class="w-full mt-3 flex items-center justify-center bg-blue-600 text-white rounded-lg px-4 py-2 text-sm hover:bg-blue-700 transition">
1022
+ <i class="fas fa-upload mr-2"></i>
1023
+ Upload
1024
+ </button>
1025
+ </div>
1026
  </div>
1027
  </div>
1028
  </div>
1029
 
1030
+ <!-- Audiences Page -->
 
 
 
 
 
 
 
 
 
1031
  <div id="audiences-page" class="page">
1032
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
1033
+ <div>
1034
+ <h3 class="text-lg font-semibold text-gray-800">Audience Segments</h3>
1035
+ <p class="text-sm text-gray-500">Create and manage your target audience segments</p>
1036
+ </div>
1037
+ <button class="flex items-center justify-center bg-blue-600 text-white rounded-lg px-4 py-2 text-sm hover:bg-blue-700 transition">
1038
+ <i class="fas fa-plus mr-2"></i>
1039
+ New Audience
1040
+ </button>
1041
+ </div>
1042
 
1043
+ <!-- Audience Tabs -->
1044
+ <div class="bg-white rounded-lg shadow mb-6">
1045
+ <div class="flex overflow-x-auto">
1046
+ <div class="tab active px-6 py-4 text-sm font-medium cursor-pointer border-b-2 border-blue-600">
1047
+ All Audiences
1048
+ </div>
1049
+ <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
1050
+ Custom
1051
+ </div>
1052
+ <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
1053
+ Lookalike
1054
+ </div>
1055
+ <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
1056
+ Retargeting
1057
+ </div>
1058
+ <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
1059
+ Saved
1060
+ </div>
1061
+ </div>
1062
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1063
 
1064
+ <!-- Audience Filters -->
1065
+ <div class="bg-white rounded-lg shadow p-4 mb-6">
1066
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
1067
+ <div>
1068
+ <label class="block text-sm font-medium text-gray-700 mb-1">Source</label>
1069
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
1070
+ <option>All Sources</option>
1071
+ <option>Website Visitors</option>
1072
+ <option>Customer List</option>
1073
+ <option>Engagement</option>
1074
+ <option>App Activity</option>
1075
+ </select>
1076
+ </div>
1077
+ <div>
1078
+ <label class="block text-sm font-medium text-gray-700 mb-1">Size</label>
1079
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
1080
+ <option>Any Size</option>
1081
+ <option>Small (1K-50K)</option>
1082
+ <option>Medium (50K-500K)</option>
1083
+ <option>Large (500K-5M)</option>
1084
+ <option>Very Large (5M+)</option>
1085
+ </select>
1086
+ </div>
1087
+ <div>
1088
+ <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
1089
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
1090
+ <option>All Statuses</option>
1091
+ <option>Active</option>
1092
+ <option>Paused</option>
1093
+ <option>Pending</option>
1094
+ <option>Archived</option>
1095
+ </select>
1096
+ </div>
1097
+ <div class="flex items-end">
1098
+ <button class="w-full bg-blue-600 text-white rounded-lg px-4 py-2 text-sm hover:bg-blue-700 transition">
1099
+ Apply Filters
1100
+ </button>
1101
+ </div>
1102
+ </div>
1103
+ </div>
1104
 
1105
+ <!-- Audience Grid -->
1106
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
1107
+ <div class="audience-segment bg-white rounded-lg shadow overflow-hidden">
1108
+ <div class="p-5 border-b border-gray-200">
1109
+ <div class="flex justify-between items-start">
1110
+ <div>
1111
+ <h4 class="font-medium text-gray-800">Website Visitors</h4>
1112
+ <p class="text-sm text-gray-500">Last 30 days</p>
1113
+ </div>
1114
+ <span class="status-badge status-active">Active</span>
1115
+ </div>
1116
+ <div class="mt-4 flex items-center">
1117
+ <div class="w-full bg-gray-200 rounded-full h-2">
1118
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 85%"></div>
1119
+ </div>
1120
+ <span class="ml-3 text-sm font-medium">85% match</span>
1121
+ </div>
1122
+ </div>
1123
+ <div class="p-5">
1124
+ <div class="flex justify-between text-sm mb-3">
1125
+ <div>
1126
+ <p class="text-gray-500">Size</p>
1127
+ <p class="font-medium">245,678</p>
1128
+ </div>
1129
+ <div>
1130
+ <p class="text-gray-500">Used in</p>
1131
+ <p class="font-medium">3 campaigns</p>
1132
+ </div>
1133
+ </div>
1134
+ <div class="flex justify-between">
1135
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
1136
+ <i class="fas fa-chart-line mr-1"></i> Analyze
1137
+ </button>
1138
+ <button class="text-gray-500 hover:text-gray-700">
1139
+ <i class="fas fa-ellipsis-v"></i>
1140
+ </button>
1141
+ </div>
1142
+ </div>
1143
+ </div>
1144
+ <div class="audience-segment bg-white rounded-lg shadow overflow-hidden">
1145
+ <div class="p-5 border-b border-gray-200">
1146
+ <div class="flex justify-between items-start">
1147
+ <div>
1148
+ <h4 class="font-medium text-gray-800">High Value Customers</h4>
1149
+ <p class="text-sm text-gray-500">Purchased $500+</p>
1150
+ </div>
1151
+ <span class="status-badge status-active">Active</span>
1152
+ </div>
1153
+ <div class="mt-4 flex items-center">
1154
+ <div class="w-full bg-gray-200 rounded-full h-2">
1155
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 72%"></div>
1156
+ </div>
1157
+ <span class="ml-3 text-sm font-medium">72% match</span>
1158
+ </div>
1159
+ </div>
1160
+ <div class="p-5">
1161
+ <div class="flex justify-between text-sm mb-3">
1162
+ <div>
1163
+ <p class="text-gray-500">Size</p>
1164
+ <p class="font-medium">12,345</p>
1165
+ </div>
1166
+ <div>
1167
+ <p class="text-gray-500">Used in</p>
1168
+ <p class="font-medium">2 campaigns</p>
1169
+ </div>
1170
+ </div>
1171
+ <div class="flex justify-between">
1172
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
1173
+ <i class="fas fa-chart-line mr-1"></i> Analyze
1174
+ </button>
1175
+ <button class="text-gray-500 hover:text-gray-700">
1176
+ <i class="fas fa-ellipsis-v"></i>
1177
+ </button>
1178
+ </div>
1179
+ </div>
1180
+ </div>
1181
+ <div class="audience-segment bg-white rounded-lg shadow overflow-hidden">
1182
+ <div class="p-5 border-b border-gray-200">
1183
+ <div class="flex justify-between items-start">
1184
+ <div>
1185
+ <h4 class="font-medium text-gray-800">Mobile App Users</h4>
1186
+ <p class="text-sm text-gray-500">Active in last 7 days</p>
1187
+ </div>
1188
+ <span class="status-badge status-active">Active</span>
1189
+ </div>
1190
+ <div class="mt-4 flex items-center">
1191
+ <div class="w-full bg-gray-200 rounded-full h-2">
1192
+ <div class="bg-green-600 h-2 rounded-full" style="width: 91%"></div>
1193
+ </div>
1194
+ <span class="ml-3 text-sm font-medium">91% match</span>
1195
+ </div>
1196
+ </div>
1197
+ <div class="p-5">
1198
+ <div class="flex justify-between text-sm mb-3">
1199
+ <div>
1200
+ <p class="text-gray-500">Size</p>
1201
+ <p class="font-medium">56,789</p>
1202
+ </div>
1203
+ <div>
1204
+ <p class="text-gray-500">Used in</p>
1205
+ <p class="font-medium">1 campaign</p>
1206
+ </div>
1207
+ </div>
1208
+ <div class="flex justify-between">
1209
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
1210
+ <i class="fas fa-chart-line mr-1"></i> Analyze
1211
+ </button>
1212
+ <button class="text-gray-500 hover:text-gray-700">
1213
+ <i class="fas fa-ellipsis-v"></i>
1214
+ </button>
1215
+ </div>
1216
+ </div>
1217
+ </div>
1218
+ <div class="audience-segment bg-white rounded-lg shadow overflow-hidden">
1219
+ <div class="p-5 border-b border-gray-200">
1220
+ <div class="flex justify-between items-start">
1221
+ <div>
1222
+ <h4 class="font-medium text-gray-800">Cart Abandoners</h4>
1223
+ <p class="text-sm text-gray-500">Last 14 days</p>
1224
+ </div>
1225
+ <span class="status-badge status-paused">Paused</span>
1226
+ </div>
1227
+ <div class="mt-4 flex items-center">
1228
+ <div class="w-full bg-gray-200 rounded-full h-2">
1229
+ <div class="bg-yellow-600 h-2 rounded-full" style="width: 68%"></div>
1230
+ </div>
1231
+ <span class="ml-3 text-sm font-medium">68% match</span>
1232
+ </div>
1233
+ </div>
1234
+ <div class="p-5">
1235
+ <div class="flex justify-between text-sm mb-3">
1236
+ <div>
1237
+ <p class="text-gray-500">Size</p>
1238
+ <p class="font-medium">8,765</p>
1239
+ </div>
1240
+ <div>
1241
+ <p class="text-gray-500">Used in</p>
1242
+ <p class="font-medium">1 campaign</p>
1243
+ </div>
1244
+ </div>
1245
+ <div class="flex justify-between">
1246
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
1247
+ <i class="fas fa-chart-line mr-1"></i> Analyze
1248
+ </button>
1249
+ <button class="text-gray-500 hover:text-gray-700">
1250
+ <i class="fas fa-ellipsis-v"></i>
1251
+ </button>
1252
+ </div>
1253
+ </div>
1254
+ </div>
1255
+ <div class="audience-segment bg-white rounded-lg shadow overflow-hidden">
1256
+ <div class="p-5 border-b border-gray-200">
1257
+ <div class="flex justify-between items-start">
1258
+ <div>
1259
+ <h4 class="font-medium text-gray-800">Lookalike Audience</h4>
1260
+ <p class="text-sm text-gray-500">Top 5% customers</p>
1261
+ </div>
1262
+ <span class="status-badge status-pending">Pending</span>
1263
+ </div>
1264
+ <div class="mt-4 flex items-center">
1265
+ <div class="w-full bg-gray-200 rounded-full h-2">
1266
+ <div class="bg-gray-400 h-2 rounded-full" style="width: 45%"></div>
1267
+ </div>
1268
+ <span class="ml-3 text-sm font-medium">45% processed</span>
1269
+ </div>
1270
+ </div>
1271
+ <div class="p-5">
1272
+ <div class="flex justify-between text-sm mb-3">
1273
+ <div>
1274
+ <p class="text-gray-500">Estimated size</p>
1275
+ <p class="font-medium">~500,000</p>
1276
+ </div>
1277
+ <div>
1278
+ <p class="text-gray-500">Created</p>
1279
+ <p class="font-medium">2 days ago</p>
1280
+ </div>
1281
+ </div>
1282
+ <div class="flex justify-between">
1283
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
1284
+ <i class="fas fa-chart-line mr-1"></i> Analyze
1285
+ </button>
1286
+ <button class="text-gray-500 hover:text-gray-700">
1287
+ <i class="fas fa-ellipsis-v"></i>
1288
+ </button>
1289
+ </div>
1290
+ </div>
1291
+ </div>
1292
+ <div class="audience-segment bg-white rounded-lg shadow overflow-hidden border-2 border-dashed border-gray-300 flex items-center justify-center">
1293
+ <div class="p-6 text-center">
1294
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 mb-3">
1295
+ <i class="fas fa-plus text-blue-600"></i>
1296
+ </div>
1297
+ <h4 class="font-medium text-gray-800 mb-1">Create New Audience</h4>
1298
+ <p class="text-sm text-gray-500 mb-4">Build a custom audience segment</p>
1299
+ <button class="flex items-center justify-center bg-blue-600 text-white rounded-lg px-4 py-2 text-sm hover:bg-blue-700 transition mx-auto">
1300
+ <i class="fas fa-plus mr-2"></i>
1301
+ New Audience
1302
+ </button>
1303
+ </div>
1304
+ </div>
1305
+ </div>
1306
+ </div>
1307
 
1308
+ <!-- Reports Page -->
1309
+ <div id="reports-page" class="page">
1310
+ <!-- Date Range and Export Controls -->
1311
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
1312
+ <div>
1313
+ <h3 class="text-lg font-semibold text-gray-800">Performance Reports</h3>
1314
+ <p class="text-sm text-gray-500">Detailed analytics and insights for your advertising campaigns</p>
1315
+ </div>
1316
+ <div class="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
1317
+ <div class="flex items-center bg-white border border-gray-300 rounded-lg px-3 py-2">
1318
+ <i class="fas fa-calendar-alt text-gray-400 mr-2"></i>
1319
+ <select class="text-sm focus:outline-none">
1320
+ <option>Last 7 days</option>
1321
+ <option selected>Last 30 days</option>
1322
+ <option>Last 90 days</option>
1323
+ <option>Custom range</option>
1324
+ </select>
1325
+ </div>
1326
+ <button class="flex items-center justify-center bg-white border border-gray-300 rounded-lg px-4 py-2 text-sm hover:bg-gray-50 transition">
1327
+ <i class="fas fa-download text-gray-500 mr-2"></i>
1328
+ Export
1329
+ </button>
1330
+ <button class="flex items-center justify-center bg-blue-600 text-white rounded-lg px-4 py-2 text-sm hover:bg-blue-700 transition">
1331
+ <i class="fas fa-plus mr-2"></i>
1332
+ New Report
1333
+ </button>
1334
+ </div>
1335
+ </div>
1336
 
1337
+ <!-- Report Type Tabs -->
1338
+ <div class="bg-white rounded-lg shadow mb-6">
1339
+ <div class="flex overflow-x-auto">
1340
+ <div class="report-tab active px-6 py-4 text-sm font-medium cursor-pointer border-b-2 border-blue-600">
1341
+ <i class="fas fa-chart-line mr-2"></i> Overview
1342
+ </div>
1343
+ <div class="report-tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50">
1344
+ <i class="fas fa-bullseye mr-2"></i> Campaigns
1345
+ </div>
1346
+ <div class="
 
 
 
 
 
 
1347
  </html>