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"> | |
| <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; | |
| } | |
| </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 bg-blue-50 text-blue-600 font-medium" 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">Campaigns</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"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Campaign Sub Navigation --> | |
| <div class="bg-white border-b border-gray-200 px-6"> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="tab py-4 active" data-subpage="listing">All Campaigns</a> | |
| <a href="#" class="tab py-4" data-subpage="preview">Creative Preview</a> | |
| <a href="#" class="tab py-4" data-subpage="setup">New Campaign</a> | |
| </div> | |
| </div> | |
| <!-- Page Content --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Listing Page --> | |
| <div id="listing-page" class="page active"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800">Active Campaigns</h3> | |
| <div class="flex space-x-3"> | |
| <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>All Status</option> | |
| <option>Active</option> | |
| <option>Paused</option> | |
| <option>Pending</option> | |
| </select> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> New Campaign | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <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">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">Budget</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> | |
| <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">Retargeting</div> | |
| </div> | |
| </div> | |
| </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">$5,000</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button class="text-red-600 hover:text-red-900">Pause</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <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">Prospecting</div> | |
| </div> | |
| </div> | |
| </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">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">$3,500</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button class="text-green-600 hover:text-green-900">Resume</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <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">Retargeting</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge status-pending">Pending</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$7,500</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button class="text-gray-600 hover:text-gray-900">Cancel</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <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">Awareness</div> | |
| </div> | |
| </div> | |
| </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">$6,000</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button class="text-red-600 hover:text-red-900">Pause</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"> | |
| <div class="flex-1 flex justify-between sm:hidden"> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Previous </a> | |
| <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Next </a> | |
| </div> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">12</span> results | |
| </p> | |
| </div> | |
| <div> | |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Previous</span> | |
| <i class="fas fa-chevron-left"></i> | |
| </a> | |
| <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Next</span> | |
| <i class="fas fa-chevron-right"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Page --> | |
| <div id="preview-page" class="page"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800">Creative Preview</h3> | |
| <div class="flex space-x-3"> | |
| <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>All Formats</option> | |
| <option>Banner</option> | |
| <option>Video</option> | |
| <option>Native</option> | |
| </select> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center"> | |
| <i class="fas fa-filter mr-2"></i> Filter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Ad Preview 1 --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium text-gray-800">Standard Banner (300x250)</h4> | |
| <span class="status-badge status-active">Active</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Summer Sale Campaign</p> | |
| </div> | |
| <div class="p-4"> | |
| <div class="ad-preview-container"> | |
| <div class="ad-preview w-full max-w-xs"> | |
| <img src="https://via.placeholder.com/300x250" alt="Ad Preview" class="w-full"> | |
| <div class="p-3"> | |
| <h5 class="font-bold text-lg">Summer Sale!</h5> | |
| <p class="text-sm text-gray-600">Up to 50% off on selected items</p> | |
| <button class="mt-2 bg-blue-600 text-white px-3 py-1 rounded text-sm">Shop Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 py-3 bg-gray-50 flex justify-between items-center"> | |
| <div class="text-sm text-gray-500"> | |
| <span class="font-medium">CTR:</span> 4.8% | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-chart-line"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-800"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ad Preview 2 --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium text-gray-800">Video Ad (16:9)</h4> | |
| <span class="status-badge status-paused">Paused</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Mobile App Campaign</p> | |
| </div> | |
| <div class="p-4"> | |
| <div class="ad-preview-container"> | |
| <div class="ad-preview w-full max-w-xs"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/320x180" alt="Video Thumbnail" class="w-full"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <button class="bg-black bg-opacity-50 text-white rounded-full p-3"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h5 class="font-bold text-lg">Try Our New App</h5> | |
| <p class="text-sm text-gray-600">Download now and get 30 days free trial</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 py-3 bg-gray-50 flex justify-between items-center"> | |
| <div class="text-sm text-gray-500"> | |
| <span class="font-medium">CTR:</span> 3.2% | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-chart-line"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-800"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ad Preview 3 --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium text-gray-800">Native Ad</h4> | |
| <span class="status-badge status-active">Active</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Content Marketing</p> | |
| </div> | |
| <div class="p-4"> | |
| <div class="ad-preview-container"> | |
| <div class="ad-preview w-full max-w-xs"> | |
| <div class="p-4"> | |
| <div class="flex items-start"> | |
| <img src="https://via.placeholder.com/60" alt="Logo" class="w-12 h-12 rounded mr-3"> | |
| <div> | |
| <p class="text-xs text-gray-500">Sponsored</p> | |
| <h5 class="font-bold text-sm">The Ultimate Guide to Marketing</h5> | |
| </div> | |
| </div> | |
| <img src="https://via.placeholder.com/280x150" alt="Content Image" class="w-full mt-3"> | |
| <p class="text-sm text-gray-600 mt-2">Learn how to boost your marketing strategy with our comprehensive guide...</p> | |
| <button class="mt-2 text-blue-600 text-sm font-medium">Read More</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 py-3 bg-gray-50 flex justify-between items-center"> | |
| <div class="text-sm text-gray-500"> | |
| <span class="font-medium">CTR:</span> 6.1% | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-chart-line"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-800"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaign Setup Page --> | |
| <div id="setup-page" class="page"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-lg font-semibold text-gray-800">New Campaign Setup</h3> | |
| <p class="text-sm text-gray-500 mt-1">Fill in the details below to create a new advertising campaign</p> | |
| </div> | |
| <!-- Progress Bar --> | |
| <div class="px-6 pt-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Step <span id="current-step">1</span> of 4</span> | |
| <span class="text-sm text-gray-500">30% complete</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <!-- Form Steps --> | |
| <div class="p-6"> | |
| <!-- Step 1: Campaign Details --> | |
| <div id="step-1" class="form-step active"> | |
| <h4 class="font-medium text-gray-800 mb-4">Campaign Details</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="campaign-name" class="block text-sm font-medium text-gray-700 mb-1">Campaign Name</label> | |
| <input type="text" id="campaign-name" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. Summer Sale 2023"> | |
| </div> | |
| <div> | |
| <label for="campaign-type" class="block text-sm font-medium text-gray-700 mb-1">Campaign Type</label> | |
| <select id="campaign-type" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Select campaign type</option> | |
| <option>Brand Awareness</option> | |
| <option>Lead Generation</option> | |
| <option>Product Sales</option> | |
| <option>Traffic</option> | |
| <option>App Installs</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="start-date" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label> | |
| <input type="date" id="start-date" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="end-date" class="block text-sm font-medium text-gray-700 mb-1">End Date (optional)</label> | |
| <input type="date" id="end-date" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label for="campaign-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea id="campaign-description" rows="3" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Brief description of your campaign"></textarea> | |
| </div> | |
| </div> | |
| <!-- Step 2: Budget & Bidding --> | |
| <div id="step-2" class="form-step"> | |
| <h4 class="font-medium text-gray-800 mb-4">Budget & Bidding</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="budget-type" class="block text-sm font-medium text-gray-700 mb-1">Budget Type</label> | |
| <select id="budget-type" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Daily Budget</option> | |
| <option>Lifetime Budget</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="budget-amount" class="block text-sm font-medium text-gray-700 mb-1">Budget Amount ($)</label> | |
| <input type="number" id="budget-amount" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. 1000"> | |
| </div> | |
| <div> | |
| <label for="bid-strategy" class="block text-sm font-medium text-gray-700 mb-1">Bid Strategy</label> | |
| <select id="bid-strategy" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Lowest Cost</option> | |
| <option>Target Cost</option> | |
| <option>Bid Cap</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="bid-amount" class="block text-sm font-medium text-gray-700 mb-1">Bid Amount ($)</label> | |
| <input type="number" id="bid-amount" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. 0.50"> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Optimization Goal</label> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> | |
| <div class="flex items-center"> | |
| <input id="goal-impressions" name="optimization-goal" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"> | |
| <label for="goal-impressions" class="ml-2 block text-sm text-gray-700">Impressions</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="goal-clicks" name="optimization-goal" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked> | |
| <label for="goal-clicks" class="ml-2 block text-sm text-gray-700">Link Clicks</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="goal-conversions" name="optimization-goal" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"> | |
| <label for="goal-conversions" class="ml-2 block text-sm text-gray-700">Conversions</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="goal-reach" name="optimization-goal" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"> | |
| <label for="goal-reach" class="ml-2 block text-sm text-gray-700">Reach</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3: Targeting --> | |
| <div id="step-3" class="form-step"> | |
| <h4 class="font-medium text-gray-800 mb-4">Audience Targeting</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Location</label> | |
| <select id="location" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>United States</option> | |
| <option>Canada</option> | |
| <option>United Kingdom</option> | |
| <option>Australia</option> | |
| <option>Germany</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="age-range" class="block text-sm font-medium text-gray-700 mb-1">Age Range</label> | |
| <select id="age-range" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>18-65+</option> | |
| <option>18-24</option> | |
| <option>25-34</option> | |
| <option>35-44</option> | |
| <option>45-54</option> | |
| <option>55-65+</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="gender" class="block text-sm font-medium text-gray-700 mb-1">Gender</label> | |
| <select id="gender" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>All</option> | |
| <option>Male</option> | |
| <option>Female</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="language" class="block text-sm font-medium text-gray-700 mb-1">Language</label> | |
| <select id="language" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>English</option> | |
| <option>Spanish</option> | |
| <option>French</option> | |
| <option>German</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label for="interests" class="block text-sm font-medium text-gray-700 mb-1">Interests (optional)</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">Technology</span> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">Fashion</span> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">Sports</span> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">Travel</span> | |
| <button class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 hover:bg-gray-200"> | |
| <i class="fas fa-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Placements</label> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> | |
| <div class="flex items-center"> | |
| <input id="placement-facebook" name="placement" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked> | |
| <label for="placement-facebook" class="ml-2 block text-sm text-gray-700">Facebook</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="placement-instagram" name="placement" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked> | |
| <label for="placement-instagram" class="ml-2 block text-sm text-gray-700">Instagram</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="placement-audience-network" name="placement" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="placement-audience-network" class="ml-2 block text-sm text-gray-700">Audience Network</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="placement-messenger" name="placement" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="placement-messenger" class="ml-2 block text-sm text-gray-700">Messenger</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 4: Creatives --> | |
| <div id="step-4" class="form-step"> | |
| <h4 class="font-medium text-gray-800 mb-4">Ad Creatives</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="ad-format" class="block text-sm font-medium text-gray-700 mb-1">Ad Format</label> | |
| <select id="ad-format" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Single Image</option> | |
| <option>Carousel</option> | |
| <option>Video</option> | |
| <option>Slideshow</option> | |
| <option>Collection</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="ad-name" class="block text-sm font-medium text-gray-700 mb-1">Ad Name</label> | |
| <input type="text" id="ad-name" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. Summer Sale Banner"> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Upload Creative</label> | |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg"> | |
| <div class="space-y-1 text-center"> | |
| <div class="flex text-sm text-gray-600"> | |
| <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none"> | |
| <span>Upload a file</span> | |
| <input id="file-upload" name="file-upload" type="file" class="sr-only"> | |
| </label> | |
| <p class="pl-1">or drag and drop</p> | |
| </div> | |
| <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label for="primary-text" class="block text-sm font-medium text-gray-700 mb-1">Primary Text</label> | |
| <textarea id="primary-text" rows="2" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Main text that appears in your ad"></textarea> | |
| </div> | |
| <div class="mt-4"> | |
| <label for="headline" class="block text-sm font-medium text-gray-700 mb-1">Headline</label> | |
| <input type="text" id="headline" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="A short headline for your ad"> | |
| </div> | |
| <div class="mt-4"> | |
| <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea id="description" rows="2" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Additional text that appears below the headline"></textarea> | |
| </div> | |
| <div class="mt-4"> | |
| <label for="call-to-action" class="block text-sm font-medium text-gray-700 mb-1">Call to Action</label> | |
| <select id="call-to-action" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Shop Now</option> | |
| <option>Learn More</option> | |
| <option>Sign Up</option> | |
| <option>Download</option> | |
| <option>Book Now</option> | |
| <option>Contact Us</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Form Navigation --> | |
| <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-between"> | |
| <button id="prev-btn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" disabled> | |
| Previous | |
| </button> | |
| <button id="next-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Page navigation | |
| document.querySelectorAll('.tab').forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| // Remove active class from all tabs | |
| document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); | |
| // Add active class to clicked tab | |
| this.classList.add('active'); | |
| // Hide all pages | |
| document.querySelectorAll('.page').forEach(page => page.classList.remove('active')); | |
| // Show the selected page | |
| const pageId = this.getAttribute('data-subpage') + '-page'; | |
| document.getElementById(pageId).classList.add('active'); | |
| }); | |
| }); | |
| // Campaign setup form steps | |
| const steps = ['step-1', 'step-2', 'step-3', 'step-4']; | |
| let currentStep = 0; | |
| document.getElementById('next-btn').addEventListener('click', function() { | |
| if (currentStep < steps.length - 1) { | |
| document.getElementById(steps[currentStep]).classList.remove('active'); | |
| currentStep++; | |
| document.getElementById(steps[currentStep]).classList.add('active'); | |
| document.getElementById('current-step').textContent = currentStep + 1; | |
| document.querySelector('.progress-fill').style.width = `${(currentStep + 1) * 25}%`; | |
| // Update button states | |
| document.getElementById('prev-btn').disabled = false; | |
| if (currentStep === steps.length - 1) { | |
| this.textContent = 'Submit'; | |
| } | |
| } else { | |
| // Form submission would go here | |
| alert('Campaign created successfully!'); | |
| } | |
| }); | |
| document.getElementById('prev-btn').addEventListener('click', function() { | |
| if (currentStep > 0) { | |
| document.getElementById(steps[currentStep]).classList.remove('active'); | |
| currentStep--; | |
| document.getElementById(steps[currentStep]).classList.add('active'); | |
| document.getElementById('current-step').textContent = currentStep + 1; | |
| document.querySelector('.progress-fill').style.width = `${(currentStep + 1) * 25}%`; | |
| // Update button states | |
| document.getElementById('next-btn').textContent = 'Next'; | |
| if (currentStep === 0) { | |
| this.disabled = true; | |
| } | |
| } | |
| }); | |
| </script> | |
| <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> | |
| </html> |