Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ad Engine Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .page { | |
| display: none; | |
| } | |
| .page.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .ad-preview-container { | |
| background-color: #f0f0f0; | |
| border-radius: 8px; | |
| padding: 20px; | |
| min-height: 300px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .ad-preview { | |
| background: white; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .ad-preview:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0,0,0,0.1); | |
| } | |
| .status-badge { | |
| padding: 4px 8px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .status-active { | |
| background-color: #d1fae5; | |
| color: #065f46; | |
| } | |
| .status-paused { | |
| background-color: #fee2e2; | |
| color: #991b1b; | |
| } | |
| .status-pending { | |
| background-color: #fef3c7; | |
| color: #92400e; | |
| } | |
| .tab { | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .tab.active { | |
| border-bottom: 3px solid #3b82f6; | |
| color: #3b82f6; | |
| font-weight: 600; | |
| } | |
| .form-step { | |
| display: none; | |
| } | |
| .form-step.active { | |
| display: block; | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| background-color: #e5e7eb; | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background-color: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| .metric-card { | |
| transition: all 0.3s ease; | |
| } | |
| .metric-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px rgba(0,0,0,0.1); | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| } | |
| .report-card { | |
| transition: all 0.3s ease; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| .report-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .report-tab { | |
| transition: all 0.2s ease; | |
| } | |
| .report-tab.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .report-table th { | |
| position: sticky; | |
| top: 0; | |
| background-color: #f9fafb; | |
| z-index: 10; | |
| } | |
| .campaign-card { | |
| transition: all 0.3s ease; | |
| } | |
| .campaign-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .creative-thumbnail { | |
| transition: all 0.3s ease; | |
| } | |
| .creative-thumbnail:hover { | |
| transform: scale(1.03); | |
| } | |
| .audience-segment { | |
| transition: all 0.3s ease; | |
| } | |
| .audience-segment:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px rgba(0,0,0,0.1); | |
| } | |
| .setting-option { | |
| transition: all 0.2s ease; | |
| } | |
| .setting-option:hover { | |
| background-color: #f8fafc; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h1 class="text-xl font-bold text-blue-600 flex items-center"> | |
| <i class="fas fa-ad mr-2"></i> | |
| AdEngine Pro | |
| </h1> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto p-4"> | |
| <div class="space-y-2"> | |
| <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"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| Dashboard | |
| </a> | |
| <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="campaigns"> | |
| <i class="fas fa-bullhorn mr-3"></i> | |
| Campaigns | |
| </a> | |
| <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="creatives"> | |
| <i class="fas fa-paint-brush mr-3"></i> | |
| Creatives | |
| </a> | |
| <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="audiences"> | |
| <i class="fas fa-users mr-3"></i> | |
| Audiences | |
| </a> | |
| <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"> | |
| <i class="fas fa-chart-bar mr-3"></i> | |
| Reports | |
| </a> | |
| <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="settings"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Settings | |
| </a> | |
| </div> | |
| </nav> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium">Sarah Johnson</p> | |
| <p class="text-sm text-gray-500">Admin</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white border-b border-gray-200 py-4 px-6 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <button class="mr-4 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h2 class="text-xl font-semibold text-gray-800" id="page-title">Dashboard</h2> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <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"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="text-gray-500 hover:text-gray-700 relative"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Dashboard Page --> | |
| <div id="dashboard-page" class="page active"> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800">Welcome back, Sarah!</h3> | |
| <p class="text-sm text-gray-500">Here's what's happening with your campaigns today</p> | |
| </div> | |
| <!-- Metrics Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="metric-card bg-white p-6 rounded-lg shadow"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Impressions</p> | |
| <h3 class="text-2xl font-bold mt-1">1,245,678</h3> | |
| <p class="text-sm mt-2"> | |
| <span class="text-green-500 font-medium">+12.5%</span> vs yesterday | |
| </p> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-lg"> | |
| <i class="fas fa-eye text-blue-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="metric-card bg-white p-6 rounded-lg shadow"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Clicks</p> | |
| <h3 class="text-2xl font-bold mt-1">62,345</h3> | |
| <p class="text-sm mt-2"> | |
| <span class="text-green-500 font-medium">+8.3%</span> vs yesterday | |
| </p> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-lg"> | |
| <i class="fas fa-mouse-pointer text-green-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="metric-card bg-white p-6 rounded-lg shadow"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Average CTR</p> | |
| <h3 class="text-2xl font-bold mt-1">5.03%</h3> | |
| <p class="text-sm mt-2"> | |
| <span class="text-red-500 font-medium">-0.7%</span> vs yesterday | |
| </p> | |
| </div> | |
| <div class="bg-purple-100 p-3 rounded-lg"> | |
| <i class="fas fa-percentage text-purple-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="metric-card bg-white p-6 rounded-lg shadow"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Spend</p> | |
| <h3 class="text-2xl font-bold mt-1">$15,456</h3> | |
| <p class="text-sm mt-2"> | |
| <span class="text-green-500 font-medium">+15.2%</span> vs yesterday | |
| </p> | |
| </div> | |
| <div class="bg-yellow-100 p-3 rounded-lg"> | |
| <i class="fas fa-dollar-sign text-yellow-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Chart --> | |
| <div class="bg-white p-6 rounded-lg shadow mb-6"> | |
| <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Performance Overview</h4> | |
| <p class="text-sm text-gray-500">Last 30 days performance metrics</p> | |
| </div> | |
| <div class="flex space-x-2 mt-2 sm:mt-0"> | |
| <button class="px-3 py-1 text-xs bg-blue-50 text-blue-600 rounded">Impressions</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">Clicks</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">CTR</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">Spend</button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="performanceChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Campaigns Overview --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> | |
| <div class="p-6 border-b border-gray-200 flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Active Campaigns</h4> | |
| <p class="text-sm text-gray-500">Your currently running campaigns</p> | |
| </div> | |
| <button class="flex items-center text-blue-600 text-sm font-medium hover:text-blue-800"> | |
| View All <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6"> | |
| <div class="campaign-card bg-white border border-gray-200 rounded-lg p-5"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h5 class="font-medium">Summer Sale 2023</h5> | |
| <p class="text-sm text-gray-500">Retargeting</p> | |
| </div> | |
| <span class="status-badge status-active">Active</span> | |
| </div> | |
| <div class="flex justify-between mb-3"> | |
| <div> | |
| <p class="text-xs text-gray-500">Impressions</p> | |
| <p class="text-sm font-medium">245,678</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">CTR</p> | |
| <p class="text-sm font-medium">5.03%</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Spend</p> | |
| <p class="text-sm font-medium">$1,245</p> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2">65% of budget spent</p> | |
| </div> | |
| <div class="campaign-card bg-white border border-gray-200 rounded-lg p-5"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h5 class="font-medium">Mobile App Launch</h5> | |
| <p class="text-sm text-gray-500">Prospecting</p> | |
| </div> | |
| <span class="status-badge status-active">Active</span> | |
| </div> | |
| <div class="flex justify-between mb-3"> | |
| <div> | |
| <p class="text-xs text-gray-500">Impressions</p> | |
| <p class="text-sm font-medium">189,234</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">CTR</p> | |
| <p class="text-sm font-medium">4.63%</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Spend</p> | |
| <p class="text-sm font-medium">$987</p> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2">45% of budget spent</p> | |
| </div> | |
| <div class="campaign-card bg-white border border-gray-200 rounded-lg p-5"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h5 class="font-medium">Content Marketing</h5> | |
| <p class="text-sm text-gray-500">Awareness</p> | |
| </div> | |
| <span class="status-badge status-active">Active</span> | |
| </div> | |
| <div class="flex justify-between mb-3"> | |
| <div> | |
| <p class="text-xs text-gray-500">Impressions</p> | |
| <p class="text-sm font-medium">321,456</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">CTR</p> | |
| <p class="text-sm font-medium">4.88%</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Spend</p> | |
| <p class="text-sm font-medium">$1,532</p> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2">78% of budget spent</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h4 class="font-medium text-gray-800">Recent Activity</h4> | |
| <p class="text-sm text-gray-500">Latest changes and updates in your account</p> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="p-4 hover:bg-gray-50 transition"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-bullhorn text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <p class="font-medium">New campaign created</p> | |
| <p class="text-sm text-gray-500">2 hours ago</p> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">"Summer Sale 2023" campaign was created by Sarah Johnson</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 transition"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-ad text-green-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <p class="font-medium">Creative approved</p> | |
| <p class="text-sm text-gray-500">5 hours ago</p> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">"Mobile App Banner" creative was approved by the system</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 transition"> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-100 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-chart-line text-yellow-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <p class="font-medium">Performance alert</p> | |
| <p class="text-sm text-gray-500">1 day ago</p> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">"Content Marketing" campaign CTR dropped below threshold</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 transition"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-users text-purple-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <p class="font-medium">Audience updated</p> | |
| <p class="text-sm text-gray-500">2 days ago</p> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">"High Value Customers" audience segment was updated</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaigns Page --> | |
| <div id="campaigns-page" class="page"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">Campaign Management</h3> | |
| <p class="text-sm text-gray-500">Create, manage, and optimize your advertising campaigns</p> | |
| </div> | |
| <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"> | |
| <i class="fas fa-plus mr-2"></i> | |
| New Campaign | |
| </button> | |
| </div> | |
| <!-- Campaign Tabs --> | |
| <div class="bg-white rounded-lg shadow mb-6"> | |
| <div class="flex overflow-x-auto"> | |
| <div class="tab active px-6 py-4 text-sm font-medium cursor-pointer border-b-2 border-blue-600"> | |
| All Campaigns | |
| </div> | |
| <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50"> | |
| Active | |
| </div> | |
| <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50"> | |
| Paused | |
| </div> | |
| <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50"> | |
| Drafts | |
| </div> | |
| <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50"> | |
| Archived | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaign Filters --> | |
| <div class="bg-white rounded-lg shadow p-4 mb-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Campaign Type</label> | |
| <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"> | |
| <option>All Types</option> | |
| <option>Prospecting</option> | |
| <option>Retargeting</option> | |
| <option>Awareness</option> | |
| <option>Conversion</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Status</label> | |
| <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"> | |
| <option>All Statuses</option> | |
| <option>Active</option> | |
| <option>Paused</option> | |
| <option>Pending</option> | |
| <option>Completed</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Date Range</label> | |
| <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"> | |
| <option>Last 30 days</option> | |
| <option>Last 7 days</option> | |
| <option>Last 90 days</option> | |
| <option>Custom range</option> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button class="w-full bg-blue-600 text-white rounded-lg px-4 py-2 text-sm hover:bg-blue-700 transition"> | |
| Apply Filters | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaign List --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200 flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">12 Campaigns</h4> | |
| <p class="text-sm text-gray-500">Sorted by: Most recent</p> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-sort-amount-down"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| <button class="text-blue-600 text-sm font-medium hover:text-blue-800"> | |
| Export <i class="fas fa-download ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaign</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Impressions</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clicks</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CTR</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spend</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-ad text-blue-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Summer Sale 2023</div> | |
| <div class="text-sm text-gray-500">Started: Jun 1, 2023</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Retargeting</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge status-active">Active</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">245,678</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12,345</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5.03%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,245</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-3"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-mobile-alt text-purple-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Mobile App Launch</div> | |
| <div class="text-sm text-gray-500">Started: May 15, 2023</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Prospecting</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge status-active">Active</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">189,234</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8,765</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.63%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$987</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-3"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-newspaper text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Content Marketing</div> | |
| <div class="text-sm text-gray-500">Started: Apr 28, 2023</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Awareness</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge status-active">Active</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">321,456</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15,678</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.88%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,532</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-3"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-gift text-yellow-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Holiday Special</div> | |
| <div class="text-sm text-gray-500">Started: Dec 1, 2022</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Retargeting</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge status-paused">Paused</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">156,789</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7,543</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.81%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$876</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-3"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-red-100 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-tag text-red-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Flash Sale</div> | |
| <div class="text-sm text-gray-500">Started: Nov 15, 2022</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Conversion</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge status-paused">Paused</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">98,765</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6,789</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6.87%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-3"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex items-center justify-between"> | |
| <div class="text-sm text-gray-500"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">12</span> campaigns | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50"> | |
| Previous | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-blue-600 text-white hover:bg-blue-700"> | |
| 1 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50"> | |
| 2 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Creatives Page --> | |
| <div id="creatives-page" class="page"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">Creative Assets</h3> | |
| <p class="text-sm text-gray-500">Manage all your ad creatives in one place</p> | |
| </div> | |
| <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"> | |
| <i class="fas fa-plus mr-2"></i> | |
| Upload Creative | |
| </button> | |
| </div> | |
| <!-- Creative Tabs --> | |
| <div class="bg-white rounded-lg shadow mb-6"> | |
| <div class="flex overflow-x-auto"> | |
| <div class="tab active px-6 py-4 text-sm font-medium cursor-pointer border-b-2 border-blue-600"> | |
| All Creatives | |
| </div> | |
| <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50"> | |
| Images | |
| </div> | |
| <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50"> | |
| Videos | |
| </div> | |
| <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50"> | |
| Carousels | |
| </div> | |
| <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50"> | |
| Stories | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Creative Filters --> | |
| <div class="bg-white rounded-lg shadow p-4 mb-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Format</label> | |
| <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"> | |
| <option>All Formats</option> | |
| <option>Static Image</option> | |
| <option>Video</option> | |
| <option>Carousel</option> | |
| <option>Story</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Status</label> | |
| <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"> | |
| <option>All Statuses</option> | |
| <option>Approved</option> | |
| <option>Pending</option> | |
| <option>Rejected</option> | |
| <option>Archived</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Campaign</label> | |
| <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"> | |
| <option>All Campaigns</option> | |
| <option>Summer Sale 2023</option> | |
| <option>Mobile App Launch</option> | |
| <option>Content Marketing</option> | |
| <option>Holiday Special</option> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button class="w-full bg-blue-600 text-white rounded-lg px-4 py-2 text-sm hover:bg-blue-700 transition"> | |
| Apply Filters | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Creative Grid --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> | |
| <div class="creative-thumbnail bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="relative pt-[56.25%] bg-gray-100"> | |
| <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"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Summer Sale Banner</h4> | |
| <p class="text-sm text-gray-500">1200 × 628 px</p> | |
| </div> | |
| <span class="status-badge status-active">Approved</span> | |
| </div> | |
| <div class="mt-3 flex justify-between text-sm"> | |
| <div> | |
| <p class="text-gray-500">Used in</p> | |
| <p class="font-medium">3 campaigns</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Last used</p> | |
| <p class="font-medium">2 days ago</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-pencil-alt mr-1"></i> Edit | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="creative-thumbnail bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="relative pt-[56.25%] bg-gray-100"> | |
| <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"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Product Showcase</h4> | |
| <p class="text-sm text-gray-500">1080 × 1080 px</p> | |
| </div> | |
| <span class="status-badge status-active">Approved</span> | |
| </div> | |
| <div class="mt-3 flex justify-between text-sm"> | |
| <div> | |
| <p class="text-gray-500">Used in</p> | |
| <p class="font-medium">2 campaigns</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Last used</p> | |
| <p class="font-medium">1 week ago</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-pencil-alt mr-1"></i> Edit | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="creative-thumbnail bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="relative pt-[56.25%] bg-gray-100"> | |
| <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-4xl text-gray-400"></i> | |
| </div> | |
| <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"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow"> | |
| <i class="fas fa-exclamation-circle text-yellow-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">App Demo Video</h4> | |
| <p class="text-sm text-gray-500">1920 × 1080 px</p> | |
| </div> | |
| <span class="status-badge status-pending">Pending</span> | |
| </div> | |
| <div class="mt-3 flex justify-between text-sm"> | |
| <div> | |
| <p class="text-gray-500">Used in</p> | |
| <p class="font-medium">1 campaign</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Uploaded</p> | |
| <p class="font-medium">3 days ago</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-pencil-alt mr-1"></i> Edit | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="creative-thumbnail bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="relative pt-[56.25%] bg-gray-100"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-center p-4"> | |
| <i class="fas fa-images text-3xl text-gray-400 mb-2"></i> | |
| <p class="text-sm text-gray-500">Carousel (4 images)</p> | |
| </div> | |
| </div> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Product Gallery</h4> | |
| <p class="text-sm text-gray-500">1080 × 1080 px</p> | |
| </div> | |
| <span class="status-badge status-active">Approved</span> | |
| </div> | |
| <div class="mt-3 flex justify-between text-sm"> | |
| <div> | |
| <p class="text-gray-500">Used in</p> | |
| <p class="font-medium">1 campaign</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Last used</p> | |
| <p class="font-medium">2 weeks ago</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-pencil-alt mr-1"></i> Edit | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="creative-thumbnail bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="relative pt-[177.78%] bg-gray-100"> | |
| <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"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Mobile Story</h4> | |
| <p class="text-sm text-gray-500">1080 × 1920 px</p> | |
| </div> | |
| <span class="status-badge status-active">Approved</span> | |
| </div> | |
| <div class="mt-3 flex justify-between text-sm"> | |
| <div> | |
| <p class="text-gray-500">Used in</p> | |
| <p class="font-medium">2 campaigns</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Last used</p> | |
| <p class="font-medium">5 days ago</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-pencil-alt mr-1"></i> Edit | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="creative-thumbnail bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="relative pt-[56.25%] bg-gray-100"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-center p-4"> | |
| <i class="fas fa-plus-circle text-3xl text-gray-400 mb-2"></i> | |
| <p class="text-sm text-gray-500">Upload new creative</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h4 class="font-medium text-gray-800 text-center">Add New Creative</h4> | |
| <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"> | |
| <i class="fas fa-upload mr-2"></i> | |
| Upload | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Audiences Page --> | |
| <div id="audiences-page" class="page"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">Audience Segments</h3> | |
| <p class="text-sm text-gray-500">Create and manage your target audience segments</p> | |
| </div> | |
| <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"> | |
| <i class="fas fa-plus mr-2"></i> | |
| New Audience | |
| </button> | |
| </div> | |
| <!-- Audience Tabs --> | |
| <div class="bg-white rounded-lg shadow mb-6"> | |
| <div class="flex overflow-x-auto"> | |
| <div class="tab active px-6 py-4 text-sm font-medium cursor-pointer border-b-2 border-blue-600"> | |
| All Audiences | |
| </div> | |
| <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50"> | |
| Custom | |
| </div> | |
| <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50"> | |
| Lookalike | |
| </div> | |
| <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50"> | |
| Retargeting | |
| </div> | |
| <div class="tab px-6 py-4 text-sm font-medium cursor-pointer text-gray-500 hover:text-gray-700 hover:bg-gray-50"> | |
| Saved | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Audience Filters --> | |
| <div class="bg-white rounded-lg shadow p-4 mb-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Source</label> | |
| <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"> | |
| <option>All Sources</option> | |
| <option>Website Visitors</option> | |
| <option>Customer List</option> | |
| <option>Engagement</option> | |
| <option>App Activity</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Size</label> | |
| <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"> | |
| <option>Any Size</option> | |
| <option>Small (1K-50K)</option> | |
| <option>Medium (50K-500K)</option> | |
| <option>Large (500K-5M)</option> | |
| <option>Very Large (5M+)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Status</label> | |
| <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"> | |
| <option>All Statuses</option> | |
| <option>Active</option> | |
| <option>Paused</option> | |
| <option>Pending</option> | |
| <option>Archived</option> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button class="w-full bg-blue-600 text-white rounded-lg px-4 py-2 text-sm hover:bg-blue-700 transition"> | |
| Apply Filters | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Audience Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="audience-segment bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-5 border-b border-gray-200"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Website Visitors</h4> | |
| <p class="text-sm text-gray-500">Last 30 days</p> | |
| </div> | |
| <span class="status-badge status-active">Active</span> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| <span class="ml-3 text-sm font-medium">85% match</span> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex justify-between text-sm mb-3"> | |
| <div> | |
| <p class="text-gray-500">Size</p> | |
| <p class="font-medium">245,678</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Used in</p> | |
| <p class="font-medium">3 campaigns</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-chart-line mr-1"></i> Analyze | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="audience-segment bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-5 border-b border-gray-200"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">High Value Customers</h4> | |
| <p class="text-sm text-gray-500">Purchased $500+</p> | |
| </div> | |
| <span class="status-badge status-active">Active</span> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 72%"></div> | |
| </div> | |
| <span class="ml-3 text-sm font-medium">72% match</span> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex justify-between text-sm mb-3"> | |
| <div> | |
| <p class="text-gray-500">Size</p> | |
| <p class="font-medium">12,345</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Used in</p> | |
| <p class="font-medium">2 campaigns</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-chart-line mr-1"></i> Analyze | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="audience-segment bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-5 border-b border-gray-200"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Mobile App Users</h4> | |
| <p class="text-sm text-gray-500">Active in last 7 days</p> | |
| </div> | |
| <span class="status-badge status-active">Active</span> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 91%"></div> | |
| </div> | |
| <span class="ml-3 text-sm font-medium">91% match</span> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex justify-between text-sm mb-3"> | |
| <div> | |
| <p class="text-gray-500">Size</p> | |
| <p class="font-medium">56,789</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Used in</p> | |
| <p class="font-medium">1 campaign</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-chart-line mr-1"></i> Analyze | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="audience-segment bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-5 border-b border-gray-200"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Cart Abandoners</h4> | |
| <p class="text-sm text-gray-500">Last 14 days</p> | |
| </div> | |
| <span class="status-badge status-paused">Paused</span> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-600 h-2 rounded-full" style="width: 68%"></div> | |
| </div> | |
| <span class="ml-3 text-sm font-medium">68% match</span> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex justify-between text-sm mb-3"> | |
| <div> | |
| <p class="text-gray-500">Size</p> | |
| <p class="font-medium">8,765</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Used in</p> | |
| <p class="font-medium">1 campaign</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-chart-line mr-1"></i> Analyze | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="audience-segment bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-5 border-b border-gray-200"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Lookalike Audience</h4> | |
| <p class="text-sm text-gray-500">Top 5% customers</p> | |
| </div> | |
| <span class="status-badge status-pending">Pending</span> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-gray-400 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <span class="ml-3 text-sm font-medium">45% processed</span> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex justify-between text-sm mb-3"> | |
| <div> | |
| <p class="text-gray-500">Estimated size</p> | |
| <p class="font-medium">~500,000</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Created</p> | |
| <p class="font-medium">2 days ago</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-chart-line mr-1"></i> Analyze | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="audience-segment bg-white rounded-lg shadow overflow-hidden border-2 border-dashed border-gray-300 flex items-center justify-center"> | |
| <div class="p-6 text-center"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 mb-3"> | |
| <i class="fas fa-plus text-blue-600"></i> | |
| </div> | |
| <h4 class="font-medium text-gray-800 mb-1">Create New Audience</h4> | |
| <p class="text-sm text-gray-500 mb-4">Build a custom audience segment</p> | |
| <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"> | |
| <i class="fas fa-plus mr-2"></i> | |
| New Audience | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Reports Page --> | |
| <div id="reports-page" class="page"> | |
| <!-- Date Range and Export Controls --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">Performance Reports</h3> | |
| <p class="text-sm text-gray-500">Detailed analytics and insights for your advertising campaigns</p> | |
| </div> | |
| <div class="flex flex-col sm:flex-row gap-3 w-full md:w-auto"> | |
| <div class="flex items-center bg-white border border-gray-300 rounded-lg px-3 py-2"> | |
| <i class="fas fa-calendar-alt text-gray-400 mr-2"></i> | |
| <select class="text-sm focus:outline-none"> | |
| <option>Last 7 days</option> | |
| <option selected>Last 30 days</option> | |
| <option>Last 90 days</option> | |
| <option>Custom range</option> | |
| </select> | |
| </div> | |
| <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"> | |
| <i class="fas fa-download text-gray-500 mr-2"></i> | |
| Export | |
| </button> | |
| <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"> | |
| <i class="fas fa-plus mr-2"></i> | |
| New Report | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Report Type Tabs --> | |
| <div class="bg-white rounded-lg shadow mb-6"> | |
| <div class="flex overflow-x-auto"> | |
| <div class="report-tab active px-6 py-4 text-sm font-medium cursor-pointer border-b-2 border-blue-600"> | |
| <i class="fas fa-chart-line mr-2"></i> Overview | |
| </div> | |
| <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"> | |
| <i class="fas fa-bullseye mr-2"></i> Campaigns | |
| </div> | |
| <div class=" | |
| </html> |