Hugging Face's logo

Spaces:
naklitechie
/
adengine-backend
Running

App Files Community
naklitechie commited on
Commit
2d2106e
·
verified ·
1 Parent(s): da7667d

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +292 -185
index.html CHANGED
@@ -97,6 +97,28 @@
97
  position: relative;
98
  height: 300px;
99
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
100
  </style>
101
  </head>
102
  <body class="bg-gray-50">
@@ -111,7 +133,7 @@
111
  </div>
112
  <nav class="flex-1 overflow-y-auto p-4">
113
  <div class="space-y-2">
114
- <a href="#" class="nav-link flex items-center p-3 rounded-lg bg-blue-50 text-blue-600 font-medium" data-page="dashboard">
115
  <i class="fas fa-tachometer-alt mr-3"></i>
116
  Dashboard
117
  </a>
@@ -127,7 +149,7 @@
127
  <i class="fas fa-users mr-3"></i>
128
  Audiences
129
  </a>
130
- <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">
131
  <i class="fas fa-chart-bar mr-3"></i>
132
  Reports
133
  </a>
@@ -156,11 +178,11 @@
156
  <button class="mr-4 text-gray-500 hover:text-gray-700">
157
  <i class="fas fa-bars"></i>
158
  </button>
159
- <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
160
  </div>
161
  <div class="flex items-center space-x-4">
162
  <div class="relative">
163
- <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">
164
  <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
165
  </div>
166
  <button class="text-gray-500 hover:text-gray-700 relative">
@@ -170,33 +192,68 @@
170
  </div>
171
  </header>
172
 
173
- <!-- Dashboard Content -->
174
  <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
175
- <!-- Dashboard Page -->
176
- <div id="dashboard-page" class="page active">
177
- <!-- Date Range Selector -->
178
- <div class="flex justify-between items-center mb-6">
179
  <div>
180
- <h3 class="text-lg font-semibold text-gray-800">Performance Overview</h3>
181
- <p class="text-sm text-gray-500">Key metrics and analytics for your campaigns</p>
182
  </div>
183
- <div class="flex items-center space-x-2">
184
- <button class="px-3 py-1 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">Today</button>
185
- <button class="px-3 py-1 border border-gray-300 rounded-lg text-sm bg-blue-50 text-blue-600 border-blue-200">Last 7 days</button>
186
- <button class="px-3 py-1 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">Last 30 days</button>
187
- <button class="px-3 py-1 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">
188
- <i class="fas fa-calendar mr-1"></i> Custom
 
 
 
 
 
 
 
 
 
 
 
189
  </button>
190
  </div>
191
  </div>
192
 
193
- <!-- Metrics Cards -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
194
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
195
- <div class="metric-card bg-white p-6 rounded-lg shadow">
196
  <div class="flex justify-between items-start">
197
  <div>
198
- <p class="text-sm font-medium text-gray-500">Impressions</p>
199
- <h3 class="text-2xl font-bold mt-1">245,678</h3>
200
  <p class="text-sm mt-2">
201
  <span class="text-green-500 font-medium">+12.5%</span> vs last period
202
  </p>
@@ -206,11 +263,11 @@
206
  </div>
207
  </div>
208
  </div>
209
- <div class="metric-card bg-white p-6 rounded-lg shadow">
210
  <div class="flex justify-between items-start">
211
  <div>
212
- <p class="text-sm font-medium text-gray-500">Clicks</p>
213
- <h3 class="text-2xl font-bold mt-1">12,345</h3>
214
  <p class="text-sm mt-2">
215
  <span class="text-green-500 font-medium">+8.3%</span> vs last period
216
  </p>
@@ -220,10 +277,10 @@
220
  </div>
221
  </div>
222
  </div>
223
- <div class="metric-card bg-white p-6 rounded-lg shadow">
224
  <div class="flex justify-between items-start">
225
  <div>
226
- <p class="text-sm font-medium text-gray-500">CTR</p>
227
  <h3 class="text-2xl font-bold mt-1">5.03%</h3>
228
  <p class="text-sm mt-2">
229
  <span class="text-red-500 font-medium">-0.7%</span> vs last period
@@ -234,11 +291,11 @@
234
  </div>
235
  </div>
236
  </div>
237
- <div class="metric-card bg-white p-6 rounded-lg shadow">
238
  <div class="flex justify-between items-start">
239
  <div>
240
- <p class="text-sm font-medium text-gray-500">Spend</p>
241
- <h3 class="text-2xl font-bold mt-1">$3,456</h3>
242
  <p class="text-sm mt-2">
243
  <span class="text-green-500 font-medium">+15.2%</span> vs last period
244
  </p>
@@ -250,49 +307,76 @@
250
  </div>
251
  </div>
252
 
253
- <!-- Charts Row -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
254
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
255
- <!-- Performance Chart -->
256
- <div class="bg-white p-6 rounded-lg shadow">
257
  <div class="flex justify-between items-center mb-4">
258
- <h4 class="font-medium text-gray-800">Performance Trends</h4>
259
  <div class="flex space-x-2">
260
  <button class="px-3 py-1 text-xs bg-blue-50 text-blue-600 rounded">Impressions</button>
261
  <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">Clicks</button>
262
- <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">CTR</button>
263
  </div>
264
  </div>
265
  <div class="chart-container">
266
- <canvas id="performanceChart"></canvas>
267
  </div>
268
  </div>
269
 
270
- <!-- Channel Distribution -->
271
- <div class="bg-white p-6 rounded-lg shadow">
272
  <div class="flex justify-between items-center mb-4">
273
- <h4 class="font-medium text-gray-800">Channel Distribution</h4>
274
  <div class="flex space-x-2">
275
  <button class="px-3 py-1 text-xs bg-blue-50 text-blue-600 rounded">Impressions</button>
276
  <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">Clicks</button>
277
- <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">Spend</button>
278
  </div>
279
  </div>
280
  <div class="chart-container">
281
- <canvas id="channelChart"></canvas>
282
  </div>
283
  </div>
284
  </div>
285
 
286
  <!-- Campaign Performance Table -->
287
- <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
288
  <div class="p-6 border-b border-gray-200 flex justify-between items-center">
289
- <h4 class="font-medium text-gray-800">Top Performing Campaigns</h4>
290
- <button class="text-blue-600 text-sm font-medium hover:text-blue-800">
291
- View All Campaigns <i class="fas fa-chevron-right ml-1"></i>
292
- </button>
 
 
 
 
 
 
 
 
293
  </div>
294
  <div class="overflow-x-auto">
295
- <table class="min-w-full divide-y divide-gray-200">
296
  <thead class="bg-gray-50">
297
  <tr>
298
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaign</th>
@@ -301,6 +385,7 @@
301
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clicks</th>
302
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CTR</th>
303
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spend</th>
 
304
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ROAS</th>
305
  </tr>
306
  </thead>
@@ -324,6 +409,7 @@
324
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12,345</td>
325
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5.03%</td>
326
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,245</td>
 
327
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.2x</td>
328
  </tr>
329
  <tr>
@@ -345,6 +431,7 @@
345
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8,765</td>
346
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.63%</td>
347
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$987</td>
 
348
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3.8x</td>
349
  </tr>
350
  <tr>
@@ -366,6 +453,7 @@
366
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15,678</td>
367
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.88%</td>
368
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,532</td>
 
369
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.9x</td>
370
  </tr>
371
  <tr>
@@ -387,113 +475,127 @@
387
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7,543</td>
388
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.81%</td>
389
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$876</td>
 
390
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3.5x</td>
391
  </tr>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
392
  </tbody>
393
  </table>
394
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
395
  </div>
396
 
397
- <!-- Recent Activity -->
398
- <div class="bg-white rounded-lg shadow overflow-hidden">
399
  <div class="p-6 border-b border-gray-200">
400
- <h4 class="font-medium text-gray-800">Recent Activity</h4>
 
401
  </div>
402
- <div class="divide-y divide-gray-200">
403
- <div class="p-4 flex items-start">
404
- <div class="bg-blue-100 p-3 rounded-full mr-4">
405
- <i class="fas fa-bullhorn text-blue-600"></i>
406
- </div>
407
- <div class="flex-1">
408
- <p class="text-sm font-medium text-gray-800">New campaign "Summer Sale 2023" was launched</p>
409
- <p class="text-xs text-gray-500 mt-1">2 hours ago</p>
 
410
  </div>
411
- <button class="text-gray-400 hover:text-gray-600">
412
- <i class="fas fa-ellipsis-v"></i>
413
- </button>
414
- </div>
415
- <div class="p-4 flex items-start">
416
- <div class="bg-green-100 p-3 rounded-full mr-4">
417
- <i class="fas fa-chart-line text-green-600"></i>
418
  </div>
419
- <div class="flex-1">
420
- <p class="text-sm font-medium text-gray-800">"Mobile App Launch" campaign exceeded CTR target by 15%</p>
421
- <p class="text-xs text-gray-500 mt-1">5 hours ago</p>
422
- </div>
423
- <button class="text-gray-400 hover:text-gray-600">
424
- <i class="fas fa-ellipsis-v"></i>
425
- </button>
426
  </div>
427
- <div class="p-4 flex items-start">
428
- <div class="bg-purple-100 p-3 rounded-full mr-4">
429
- <i class="fas fa-users text-purple-600"></i>
 
 
 
 
 
430
  </div>
431
- <div class="flex-1">
432
- <p class="text-sm font-medium text-gray-800">New audience segment "High Value Customers" was created</p>
433
- <p class="text-xs text-gray-500 mt-1">Yesterday</p>
 
 
434
  </div>
435
- <button class="text-gray-400 hover:text-gray-600">
436
- <i class="fas fa-ellipsis-v"></i>
437
- </button>
438
  </div>
439
- <div class="p-4 flex items-start">
440
- <div class="bg-yellow-100 p-3 rounded-full mr-4">
441
- <i class="fas fa-ad text-yellow-600"></i>
 
 
 
 
 
442
  </div>
443
- <div class="flex-1">
444
- <p class="text-sm font-medium text-gray-800">New creative set was approved for "Holiday Special" campaign</p>
445
- <p class="text-xs text-gray-500 mt-1">2 days ago</p>
 
 
446
  </div>
447
- <button class="text-gray-400 hover:text-gray-600">
448
- <i class="fas fa-ellipsis-v"></i>
449
- </button>
450
  </div>
451
  </div>
452
- <div class="p-4 border-t border-gray-200 text-center">
453
- <button class="text-blue-600 text-sm font-medium hover:text-blue-800">
454
- View All Activity <i class="fas fa-chevron-right ml-1"></i>
455
- </button>
456
- </div>
457
  </div>
458
  </div>
459
 
460
- <!-- Campaigns Page -->
 
 
 
461
  <div id="campaigns-page" class="page">
462
- <!-- Campaign Sub Navigation -->
463
- <div class="bg-white border-b border-gray-200 px-6 mb-6">
464
- <div class="flex space-x-6">
465
- <a href="#" class="tab py-4 active" data-subpage="listing">All Campaigns</a>
466
- <a href="#" class="tab py-4" data-subpage="preview">Creative Preview</a>
467
- <a href="#" class="tab py-4" data-subpage="setup">New Campaign</a>
468
- </div>
469
- </div>
470
-
471
- <!-- Listing Page -->
472
- <div id="listing-page" class="page active">
473
- <!-- ... (existing campaigns listing content) ... -->
474
- </div>
475
-
476
- <!-- Preview Page -->
477
- <div id="preview-page" class="page">
478
- <!-- ... (existing creative preview content) ... -->
479
- </div>
480
-
481
- <!-- Campaign Setup Page -->
482
- <div id="setup-page" class="page">
483
- <!-- ... (existing campaign setup content) ... -->
484
- </div>
485
  </div>
486
-
487
- <!-- Other pages would go here -->
488
  <div id="creatives-page" class="page">
489
  <!-- Creatives content -->
490
  </div>
491
  <div id="audiences-page" class="page">
492
  <!-- Audiences content -->
493
  </div>
494
- <div id="reports-page" class="page">
495
- <!-- Reports content -->
496
- </div>
497
  <div id="settings-page" class="page">
498
  <!-- Settings content -->
499
  </div>
@@ -504,16 +606,16 @@
504
  <script>
505
  // Initialize charts
506
  document.addEventListener('DOMContentLoaded', function() {
507
- // Performance Chart
508
- const performanceCtx = document.getElementById('performanceChart').getContext('2d');
509
- const performanceChart = new Chart(performanceCtx, {
510
  type: 'line',
511
  data: {
512
- labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
513
  datasets: [
514
  {
515
  label: 'Impressions',
516
- data: [12000, 19000, 15000, 22000, 25000, 28000, 32000],
517
  borderColor: '#3b82f6',
518
  backgroundColor: 'rgba(59, 130, 246, 0.05)',
519
  borderWidth: 2,
@@ -522,7 +624,7 @@
522
  },
523
  {
524
  label: 'Clicks',
525
- data: [800, 1200, 1000, 1500, 1800, 2000, 2400],
526
  borderColor: '#10b981',
527
  backgroundColor: 'rgba(16, 185, 129, 0.05)',
528
  borderWidth: 2,
@@ -560,18 +662,19 @@
560
  });
561
 
562
  // Channel Distribution Chart
563
- const channelCtx = document.getElementById('channelChart').getContext('2d');
564
- const channelChart = new Chart(channelCtx, {
565
  type: 'doughnut',
566
  data: {
567
- labels: ['Facebook', 'Instagram', 'Audience Network', 'Messenger'],
568
  datasets: [{
569
- data: [35, 30, 20, 15],
570
  backgroundColor: [
571
  '#3b82f6',
572
  '#8b5cf6',
573
  '#ec4899',
574
- '#14b8a6'
 
575
  ],
576
  borderWidth: 0,
577
  }]
@@ -587,6 +690,53 @@
587
  cutout: '70%'
588
  }
589
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
590
  });
591
 
592
  // Page navigation
@@ -607,63 +757,20 @@
607
  });
608
  });
609
 
610
- // Sub-page navigation
611
- document.querySelectorAll('.tab').forEach(tab => {
612
  tab.addEventListener('click', function() {
613
  // Remove active class from all tabs
614
- document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
 
 
 
615
 
616
  // Add active class to clicked tab
617
- this.classList.add('active');
618
-
619
- // Hide all sub-pages
620
- const parentPage = this.closest('.page');
621
- parentPage.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
622
-
623
- // Show the selected sub-page
624
- const subPageId = this.getAttribute('data-subpage') + '-page';
625
- parentPage.querySelector('#' + subPageId).classList.add('active');
626
  });
627
  });
628
-
629
- // Campaign setup form steps
630
- const steps = ['step-1', 'step-2', 'step-3', 'step-4'];
631
- let currentStep = 0;
632
-
633
- document.getElementById('next-btn')?.addEventListener('click', function() {
634
- if (currentStep < steps.length - 1) {
635
- document.getElementById(steps[currentStep]).classList.remove('active');
636
- currentStep++;
637
- document.getElementById(steps[currentStep]).classList.add('active');
638
- document.getElementById('current-step').textContent = currentStep + 1;
639
- document.querySelector('.progress-fill').style.width = `${(currentStep + 1) * 25}%`;
640
-
641
- // Update button states
642
- document.getElementById('prev-btn').disabled = false;
643
- if (currentStep === steps.length - 1) {
644
- this.textContent = 'Submit';
645
- }
646
- } else {
647
- // Form submission would go here
648
- alert('Campaign created successfully!');
649
- }
650
- });
651
-
652
- document.getElementById('prev-btn')?.addEventListener('click', function() {
653
- if (currentStep > 0) {
654
- document.getElementById(steps[currentStep]).classList.remove('active');
655
- currentStep--;
656
- document.getElementById(steps[currentStep]).classList.add('active');
657
- document.getElementById('current-step').textContent = currentStep + 1;
658
- document.querySelector('.progress-fill').style.width = `${(currentStep + 1) * 25}%`;
659
-
660
- // Update button states
661
- document.getElementById('next-btn').textContent = 'Next';
662
- if (currentStep === 0) {
663
- this.disabled = true;
664
- }
665
- }
666
- });
667
  </script>
668
  <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>
669
  </html>
 
97
  position: relative;
98
  height: 300px;
99
  }
100
+ .report-card {
101
+ transition: all 0.3s ease;
102
+ border-radius: 10px;
103
+ overflow: hidden;
104
+ }
105
+ .report-card:hover {
106
+ transform: translateY(-5px);
107
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
108
+ }
109
+ .report-tab {
110
+ transition: all 0.2s ease;
111
+ }
112
+ .report-tab.active {
113
+ background-color: #3b82f6;
114
+ color: white;
115
+ }
116
+ .report-table th {
117
+ position: sticky;
118
+ top: 0;
119
+ background-color: #f9fafb;
120
+ z-index: 10;
121
+ }
122
  </style>
123
  </head>
124
  <body class="bg-gray-50">
 
133
  </div>
134
  <nav class="flex-1 overflow-y-auto p-4">
135
  <div class="space-y-2">
136
+ <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="dashboard">
137
  <i class="fas fa-tachometer-alt mr-3"></i>
138
  Dashboard
139
  </a>
 
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
  <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
  </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>
 
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>
 
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
 
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>
 
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>
319
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">Clicks</button>
320
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">CTR</button>
321
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">Spend</button>
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>
373
+ <button class="text-blue-600 text-sm font-medium hover:text-blue-800">
374
+ Export <i class="fas fa-download ml-1"></i>
375
+ </button>
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>
 
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>
 
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>
 
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>
 
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>
 
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">
485
+ <i class="fas fa-tag text-red-600"></i>
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>
496
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">98,765</td>
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>
505
  </div>
506
+ <div class="p-4 border-t border-gray-200 flex items-center justify-between">
507
+ <div class="text-sm text-gray-500">
508
+ Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">12</span> campaigns
509
+ </div>
510
+ <div class="flex space-x-2">
511
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50">
512
+ Previous
513
+ </button>
514
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-blue-600 text-white hover:bg-blue-700">
515
+ 1
516
+ </button>
517
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50">
518
+ 2
519
+ </button>
520
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50">
521
+ Next
522
+ </button>
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>
 
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,
 
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,
 
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
  }]
 
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
 
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>