Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>OmniAd Portal - Unified Marketing Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| :root { | |
| --font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; | |
| --font-display-xl: clamp(2.75rem, 5vw, 3.5rem); | |
| --font-display-lg: clamp(2.5rem, 4vw, 3rem); | |
| --font-headline-xl: clamp(2rem, 3vw, 2.5rem); | |
| --font-headline-lg: clamp(1.5rem, 2.5vw, 2rem); | |
| --font-headline-md: clamp(1.25rem, 2vw, 1.5rem); | |
| --font-headline-sm: clamp(1rem, 1.5vw, 1.25rem); | |
| --font-body-lg: 1.125rem; | |
| --font-body-md: 1rem; | |
| --font-body-sm: 0.875rem; | |
| --font-caption: 0.812rem; | |
| --font-badge-xs: 0.75rem; | |
| --font-overline: 0.75rem; | |
| /* Spacing */ | |
| --space-xxs: 4px; | |
| --space-xs: 8px; | |
| --space-s: 12px; | |
| --space-m: 16px; | |
| --space-l: 24px; | |
| --space-xl: 32px; | |
| --space-xxl: 40px; | |
| --space-xxxl: 48px; | |
| --space-section-xl: 64px; | |
| --space-section-2xl: 80px; | |
| --space-section-3xl: 96px; | |
| } | |
| @media (max-width: 1279px) { | |
| :root { | |
| --space-l: 20px; | |
| --space-xl: 24px; | |
| --space-xxl: 32px; | |
| --space-xxxl: 40px; | |
| --space-section-xl: 56px; | |
| --space-section-2xl: 64px; | |
| --space-section-3xl: 80px; | |
| } | |
| } | |
| @media (max-width: 767px) { | |
| :root { | |
| --space-s: 8px; | |
| --space-m: 12px; | |
| --space-l: 16px; | |
| --space-xl: 20px; | |
| --space-xxl: 24px; | |
| --space-xxxl: 32px; | |
| --space-section-xl: 40px; | |
| --space-section-2xl: 48px; | |
| --space-section-3xl: 64px; | |
| } | |
| } | |
| body { | |
| font-family: var(--font-family); | |
| } | |
| .typography-h1 { | |
| font-size: var(--font-display-lg); | |
| line-height: 1.2; | |
| font-weight: 700; | |
| } | |
| .typography-h2 { | |
| font-size: var(--font-headline-xl); | |
| line-height: 1.2; | |
| font-weight: 700; | |
| } | |
| .typography-body { | |
| font-size: var(--font-body-md); | |
| line-height: 1.5; | |
| } | |
| .badge-text { | |
| font-size: var(--font-badge-xs); | |
| line-height: 1.33; | |
| font-weight: 500; | |
| letter-spacing: 0.02em; | |
| } | |
| </style> | |
| <!-- Load Facebook SDK for JavaScript --> | |
| <script> | |
| window.fbAsyncInit = function() { | |
| FB.init({ | |
| appId : '{your-app-id}', // Replace with your Facebook App ID | |
| cookie : true, | |
| xfbml : true, | |
| version : 'v16.0', | |
| status : true | |
| }); | |
| FB.AppEvents.logPageView(); | |
| }; | |
| (function(d, s, id){ | |
| var js, fjs = d.getElementsByTagName(s)[0]; | |
| if (d.getElementById(id)) {return;} | |
| js = d.createElement(s); js.id = id; | |
| js.src = "https://connect.facebook.net/en_US/sdk.js"; | |
| fjs.parentNode.insertBefore(js, fjs); | |
| }(document, 'script', 'facebook-jssdk')); | |
| </script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#10B981', | |
| dark: '#1F2937', | |
| light: '#F9FAFB', | |
| facebook: '#1877F2', | |
| google: '#4285F4', | |
| tiktok: '#000000', | |
| instagram: '#E1306C', | |
| twitter: '#1DA1F2', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| width: 100%; | |
| } | |
| .platform-icon { | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 10px; | |
| color: white; | |
| } | |
| .fb-login-button { | |
| transform: scale(0.85); | |
| transform-origin: left; | |
| } | |
| .nav-item:hover { | |
| background-color: rgba(79, 70, 229, 0.1); | |
| } | |
| .nav-item.active { | |
| color: #4F46E5; | |
| background-color: rgba(79, 70, 229, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex flex-col h-screen overflow-hidden"> | |
| <!-- Top Black Navigation Bar --> | |
| <nav class="bg-black text-white px-[var(--space-xxxl)] py-[var(--space-m)] flex items-center justify-between h-[56px]"> | |
| <div class="flex items-center"> | |
| <img src="https://ucarecdn.com/fb64ebde-72e1-4a59-a753-b42f76b399f7/ZivvyLogoWhite.png" alt="Zivvy Logo" class="h-8"> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <!-- Icons with spacing --> | |
| <div class="flex items-center"> | |
| <button class="relative mr-[56px]"> | |
| <span class="absolute -top-0.5 -right-0.5 bg-yellow-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center z-0">1</span> | |
| <i class="fas fa-info-circle text-xl relative z-10"></i> | |
| </button> | |
| <button class="relative mr-[56px]"> | |
| <span class="absolute -top-0.5 -right-0.5 bg-blue-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center z-0">2</span> | |
| <i class="fas fa-bolt text-xl relative z-10"></i> | |
| </button> | |
| <button class="relative mr-[56px]"> | |
| <span class="absolute -top-0.5 -right-0.5 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center z-0">3</span> | |
| <i class="fas fa-bell text-xl relative z-10"></i> | |
| </button> | |
| <button class="relative mr-[88px]"> | |
| <i class="fas fa-question-circle text-xl"></i> | |
| </button> | |
| <button class="relative mr-[64px]"> | |
| <i class="fas fa-cog text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- User Profile --> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full"> | |
| <div> | |
| <p class="text-sm font-medium">John Smith</p> | |
| <p class="text-xs text-gray-300">Premium Plan</p> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Navigation Bar --> | |
| <nav class="bg-white border-b border-gray-200 px-[var(--space-xxxl)] py-[var(--space-m)] flex items-center justify-between h-[48px]"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="hidden md:flex space-x-1"> | |
| <a href="#" class="nav-item active px-3 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-chart-line mr-2 text-primary"></i> | |
| Dashboard | |
| </a> | |
| <a href="#campaigns" class="nav-item px-3 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-ad mr-2 text-gray-500"></i> | |
| Campaigns | |
| </a> | |
| <a href="#" class="nav-item px-3 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-file-invoice-dollar mr-2 text-gray-500"></i> | |
| Reports | |
| </a> | |
| <a href="#settings" class="nav-item px-3 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-cog mr-2 text-gray-500"></i> | |
| Settings | |
| </a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="flex items-center space-x-2 text-gray-500 hover:text-gray-700"> | |
| <div class="platform-icon bg-gray-300"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| <span class="hidden md:inline">Connect Account</span> | |
| </button> | |
| <div class="absolute right-0 mt-2 w-56 bg-white rounded-md shadow-lg z-50 hidden"> | |
| <div class="py-1"> | |
| <div class="px-4 py-2"> | |
| <div | |
| class="fb-login-button" | |
| data-width="" | |
| data-size="large" | |
| data-button-type="continue_with" | |
| data-layout="default" | |
| data-auto-logout-link="false" | |
| data-use-continue-as="true" | |
| data-scope="ads_management,ads_read" | |
| onlogin="checkLoginState()"> | |
| </div> | |
| </div> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> | |
| <div class="platform-icon bg-google mr-2"> | |
| <i class="fab fa-google"></i> | |
| </div> | |
| Google Ads | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> | |
| <div class="platform-icon bg-tiktok mr-2"> | |
| <i class="fab fa-tiktok"></i> | |
| </div> | |
| TikTok Ads | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main content --> | |
| <div id="main-content" class="main-content flex-1 overflow-auto"> | |
| <div class="px-[var(--space-xxxl)] py-[var(--space-section-xl)]"> | |
| <!-- Header --> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6"> | |
| <div> | |
| <h1 class="typography-h1 text-gray-800">Marketing Dashboard</h1> | |
| <p class="typography-body text-gray-600">Overview of all your advertising performance</p> | |
| </div> | |
| <div class="mt-4 md:mt-0 flex space-x-3"> | |
| <div class="relative"> | |
| <select class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option>Last 7 days</option> | |
| <option>Last 30 days</option> | |
| <option>Last 90 days</option> | |
| <option>Custom range</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </div> | |
| </div> | |
| <button class="bg-primary text-white px-[var(--space-l)] py-[var(--space-s)] rounded-[8px] text-sm font-medium h-[44px]"> | |
| Export Report | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--space-l)] mb-[var(--space-l)]"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Spend</p> | |
| <p class="text-2xl font-bold mt-1">$24,589</p> | |
| <p class="text-sm text-green-600 mt-1 flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> 12.5% from last period | |
| </p> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-lg"> | |
| <i class="fas fa-dollar-sign text-blue-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Impressions</p> | |
| <p class="text-2xl font-bold mt-1">1.2M</p> | |
| <p class="text-sm text-green-600 mt-1 flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> 8.3% from last period | |
| </p> | |
| </div> | |
| <div class="bg-purple-100 p-3 rounded-lg"> | |
| <i class="fas fa-eye text-purple-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Clicks</p> | |
| <p class="text-2xl font-bold mt-1">24,589</p> | |
| <p class="text-sm text-red-600 mt-1 flex items-center"> | |
| <i class="fas fa-arrow-down mr-1"></i> 2.1% from last period | |
| </p> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-lg"> | |
| <i class="fas fa-mouse-pointer text-green-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Conversions</p> | |
| <p class="text-2xl font-bold mt-1">1,842</p> | |
| <p class="text-sm text-green-600 mt-1 flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> 5.7% from last period | |
| </p> | |
| </div> | |
| <div class="bg-yellow-100 p-3 rounded-lg"> | |
| <i class="fas fa-shopping-cart text-yellow-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Platform Breakdown --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 mb-6"> | |
| <div class="flex items-center justify-between mb-[var(--space-l)]"> | |
| <h2 class="typography-h2 text-gray-800">Platform Performance</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-[var(--space-l)] py-[var(--space-xs)] bg-primary text-white rounded-[8px] text-sm font-medium h-[44px] hover:bg-[var(--zivvy-primary-600)] transition-colors">All Platforms</button> | |
| <button class="px-[var(--space-l)] py-[var(--space-xs)] bg-[var(--zivvy-disabled-100)] text-[var(--zivvy-disabled-900)] rounded-[8px] text-sm font-medium h-[44px] hover:bg-[var(--zivvy-disabled-200)] transition-colors">Facebook</button> | |
| <button class="px-[var(--space-l)] py-[var(--space-xs)] bg-[var(--zivvy-disabled-100)] text-[var(--zivvy-disabled-900)] rounded-[8px] text-sm font-medium h-[44px] hover:bg-[var(--zivvy-disabled-200)] transition-colors">Google</button> | |
| <button class="px-[var(--space-l)] py-[var(--space-xs)] bg-[var(--zivvy-disabled-100)] text-[var(--zivvy-disabled-900)] rounded-[8px] text-sm font-medium h-[44px] hover:bg-[var(--zivvy-disabled-200)] transition-colors">TikTok</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">Platform</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">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">CPC</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Conversions</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="platform-icon bg-facebook mr-2"> | |
| <i class="fab fa-facebook-f"></i> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap">$12,450</td> | |
| <td class="px-6 py-4 whitespace-nowrap">650,000</td> | |
| <td class="px-6 py-4 whitespace-nowrap">12,450</td> | |
| <td class="px-6 py-4 whitespace-nowrap">1.92%</td> | |
| <td class="px-6 py-4 whitespace-nowrap">$1.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap">1,024</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="platform-icon bg-google mr-2"> | |
| <i class="fab fa-google"></i> | |
| </div> | |
| Google Ads | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap">$8,750</td> | |
| <td class="px-6 py-4 whitespace-nowrap">420,000</td> | |
| <td class="px-6 py-4 whitespace-nowrap">8,750</td> | |
| <td class="px-6 py-4 whitespace-nowrap">2.08%</td> | |
| <td class="px-6 py-4 whitespace-nowrap">$1.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap">612</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="platform-icon bg-tiktok mr-2"> | |
| <i class="fab fa-tiktok"></i> | |
| </div> | |
| TikTok | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap">$3,389</td> | |
| <td class="px-6 py-4 whitespace-nowrap">130,000</td> | |
| <td class="px-6 py-4 whitespace-nowrap">3,389</td> | |
| <td class="px-6 py-4 whitespace-nowrap">2.61%</td> | |
| <td class="px-6 py-4 whitespace-nowrap">$1.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap">206</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <!-- Performance Trend Chart --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Performance Trend</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-2 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs">Impressions</button> | |
| <button class="px-2 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs">Clicks</button> | |
| <button class="px-2 py-1 bg-primary text-white rounded-lg text-xs">Spend</button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <!-- This would be replaced with an actual chart library like Chart.js in production --> | |
| <div class="w-full h-full flex items-end justify-between pt-4"> | |
| <div class="flex flex-col items-center h-full"> | |
| <div class="bg-primary w-8 rounded-t-sm" style="height: 60%;"></div> | |
| <span class="text-xs mt-1">Mon</span> | |
| </div> | |
| <div class="flex flex-col items-center h-full"> | |
| <div class="bg-primary w-8 rounded-t-sm" style="height: 80%;"></div> | |
| <span class="text-xs mt-1">Tue</span> | |
| </div> | |
| <div class="flex flex-col items-center h-full"> | |
| <div class="bg-primary w-8 rounded-t-sm" style="height: 45%;"></div> | |
| <span class="text-xs mt-1">Wed</span> | |
| </div> | |
| <div class="flex flex-col items-center h-full"> | |
| <div class="bg-primary w-8 rounded-t-sm" style="height: 75%;"></div> | |
| <span class="text-xs mt-1">Thu</span> | |
| </div> | |
| <div class="flex flex-col items-center h-full"> | |
| <div class="bg-primary w-8 rounded-t-sm" style="height: 90%;"></div> | |
| <span class="text-xs mt-1">Fri</span> | |
| </div> | |
| <div class="flex flex-col items-center h-full"> | |
| <div class="bg-primary w-8 rounded-t-sm" style="height: 50%;"></div> | |
| <span class="text-xs mt-1">Sat</span> | |
| </div> | |
| <div class="flex flex-col items-center h-full"> | |
| <div class="bg-primary w-8 rounded-t-sm" style="height: 65%;"></div> | |
| <span class="text-xs mt-1">Sun</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Platform Distribution Chart --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Spend by Platform</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-2 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs">Daily</button> | |
| <button class="px-2 py-1 bg-primary text-white rounded-lg text-xs">Weekly</button> | |
| <button class="px-2 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs">Monthly</button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <!-- This would be replaced with an actual chart library like Chart.js in production --> | |
| <div class="w-full h-full flex items-center justify-center"> | |
| <div class="relative w-40 h-40"> | |
| <div class="absolute inset-0 rounded-full border-8 border-facebook" style="clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);"></div> | |
| <div class="absolute inset-0 rounded-full border-8 border-google" style="clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); transform: rotate(60deg);"></div> | |
| <div class="absolute inset-0 rounded-full border-8 border-tiktok" style="clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); transform: rotate(120deg);"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <p class="text-xl font-bold">$24,589</p> | |
| <p class="text-xs text-gray-500">Total Spend</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ml-8"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 bg-facebook rounded-full mr-2"></div> | |
| <span class="text-sm">Facebook (51%)</span> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 bg-google rounded-full mr-2"></div> | |
| <span class="text-sm">Google (36%)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-tiktok rounded-full mr-2"></div> | |
| <span class="text-sm">TikTok (13%)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Recent Activity</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-ad text-green-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium">New campaign created</p> | |
| <p class="text-sm text-gray-500">"Summer Sale 2023" was created on Facebook Ads</p> | |
| <p class="text-xs text-gray-400 mt-1">2 hours ago</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-sync-alt text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium">Budget increased</p> | |
| <p class="text-sm text-gray-500">Daily budget for "Product Launch" increased from $50 to $75</p> | |
| <p class="text-xs text-gray-400 mt-1">5 hours ago</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-chart-line text-purple-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium">Performance alert</p> | |
| <p class="text-sm text-gray-500">CTR for "Holiday Special" dropped below 1.5%</p> | |
| <p class="text-xs text-gray-400 mt-1">1 day ago</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Page Content --> | |
| <div id="settings" class="p-6 hidden"> | |
| <!-- Campaigns Page Content --> | |
| <div id="campaigns" class="p-6 hidden"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-800">Campaign Management</h1> | |
| <p class="text-gray-600">View and manage all your advertising campaigns</p> | |
| </div> | |
| <button class="bg-primary text-white px-4 py-2 rounded-lg text-sm font-medium mt-4 md:mt-0"> | |
| <i class="fas fa-plus mr-2"></i> Create Campaign | |
| </button> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 mb-6"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"> | |
| <div class="flex items-center space-x-2 mb-2 md:mb-0"> | |
| <input type="text" placeholder="Search campaigns..." class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-full md:w-64"> | |
| <button class="bg-gray-100 text-gray-700 px-3 py-2 rounded-lg"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs">All</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs">Active</button> | |
| <button class="px-3 py-1 bg-primary text-white rounded-lg text-xs">Paused</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs">Ended</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">Platform</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">Budget</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">Impressions</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">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="font-medium">Summer Sale 2023</div> | |
| <div class="text-xs text-gray-500">ID: 238947</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="platform-icon bg-facebook inline-flex mr-2"> | |
| <i class="fab fa-facebook-f"></i> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Active</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap">$50/day</td> | |
| <td class="px-6 py-4 whitespace-nowrap">$1,245</td> | |
| <td class="px-6 py-4 whitespace-nowrap">65,432</td> | |
| <td class="px-6 py-4 whitespace-nowrap">1.92%</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-gray-400 hover:text-gray-600 mr-2"> | |
| <i class="fas fa-pause"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="font-medium">Product Launch</div> | |
| <div class="text-xs text-gray-500">ID: 238948</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="platform-icon bg-google inline-flex mr-2"> | |
| <i class="fab fa-google"></i> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">Paused</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap">$75/day</td> | |
| <td class="px-6 py-4 whitespace-nowrap">$875</td> | |
| <td class="px-6 py-4 whitespace-nowrap">42,123</td> | |
| <td class="px-6 py-4 whitespace-nowrap">2.08%</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-gray-400 hover:text-gray-600 mr-2"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="font-medium">Holiday Special</div> | |
| <div class="text-xs text-gray-500">ID: 238949</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="platform-icon bg-tiktok inline-flex mr-2"> | |
| <i class="fab fa-tiktok"></i> | |
| </div> | |
| TikTok | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">Ended</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap">$30/day</td> | |
| <td class="px-6 py-4 whitespace-nowrap">$389</td> | |
| <td class="px-6 py-4 whitespace-nowrap">13,045</td> | |
| <td class="px-6 py-4 whitespace-nowrap">2.61%</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="flex items-center justify-between mt-4"> | |
| <div class="text-sm text-gray-500"> | |
| Showing 1 to 3 of 3 campaigns | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm disabled">Previous</button> | |
| <button class="px-3 py-1 bg-primary text-white rounded-lg text-sm">1</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm disabled">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-800">API Settings</h1> | |
| <p class="text-gray-600">Manage your platform API connections</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 mb-6"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Platform API Connections</h2> | |
| <div class="space-y-6"> | |
| <!-- Facebook API --> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="platform-icon bg-facebook"> | |
| <i class="fab fa-facebook-f"></i> | |
| </div> | |
| <h3 class="font-medium">Facebook API</h3> | |
| </div> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded">Connected</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label> | |
| <input type="password" value="fb_********" class="w-full border border-gray-300 rounded-lg px-3 py-2"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">API Secret</label> | |
| <input type="password" value="fb_********" class="w-full border border-gray-300 rounded-lg px-3 py-2"> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-end space-x-2"> | |
| <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm">Disconnect</button> | |
| <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm">Update</button> | |
| </div> | |
| </div> | |
| <!-- Google Ads API --> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="platform-icon bg-google"> | |
| <i class="fab fa-google"></i> | |
| </div> | |
| <h3 class="font-medium">Google Ads API</h3> | |
| </div> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded">Connected</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Client ID</label> | |
| <input type="text" value="1234567890" class="w-full border border-gray-300 rounded-lg px-3 py-2"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Client Secret</label> | |
| <input type="password" value="g_********" class="w-full border border-gray-300 rounded-lg px-3 py-2"> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-end space-x-2"> | |
| <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm">Disconnect</button> | |
| <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm">Update</button> | |
| </div> | |
| </div> | |
| <!-- TikTok API --> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="platform-icon bg-tiktok"> | |
| <i class="fab fa-tiktok"></i> | |
| </div> | |
| <h3 class="font-medium">TikTok API</h3> | |
| </div> | |
| <span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-800 rounded">Pending</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">App ID</label> | |
| <input type="text" placeholder="Enter App ID" class="w-full border border-gray-300 rounded-lg px-3 py-2"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Access Token</label> | |
| <input type="password" placeholder="Enter Access Token" class="w-full border border-gray-300 rounded-lg px-3 py-2"> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-end space-x-2"> | |
| <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm">Cancel</button> | |
| <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm">Connect</button> | |
| </div> | |
| </div> | |
| <!-- Instagram API --> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="platform-icon bg-instagram"> | |
| <i class="fab fa-instagram"></i> | |
| </div> | |
| <h3 class="font-medium">Instagram API</h3> | |
| </div> | |
| <span class="text-xs px-2 py-1 bg-red-100 text-red-800 rounded">Disconnected</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Client ID</label> | |
| <input type="text" placeholder="Enter Client ID" class="w-full border border-gray-300 rounded-lg px-3 py-2"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Client Secret</label> | |
| <input type="password" placeholder="Enter Client Secret" class="w-full border border-gray-300 rounded-lg px-3 py-2"> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-end space-x-2"> | |
| <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm">Cancel</button> | |
| <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm">Connect</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Connect Account dropdown toggle | |
| const connectButton = document.querySelector('.relative button'); | |
| const connectDropdown = document.querySelector('.relative .hidden'); | |
| connectButton.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| connectDropdown.classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', () => { | |
| connectDropdown.classList.add('hidden'); | |
| }); | |
| // Simulate chart data loading | |
| // Facebook login status handler | |
| function checkLoginState() { | |
| FB.getLoginStatus(function(response) { | |
| if (response.status === 'connected') { | |
| console.log('Logged in with Facebook Ad Manager'); | |
| // Here you would store the access token and update UI | |
| // Example: fetchAdAccounts(response.authResponse.accessToken); | |
| } else { | |
| console.log('Facebook login failed or cancelled'); | |
| } | |
| }); | |
| } | |
| // Example function to fetch ad accounts after login | |
| function fetchAdAccounts(accessToken) { | |
| FB.api( | |
| '/me/adaccounts', | |
| 'GET', | |
| {access_token: accessToken}, | |
| function(response) { | |
| console.log('Ad Accounts:', response); | |
| // Process the ad accounts data here | |
| } | |
| ); | |
| } | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Handle page navigation | |
| const navLinks = document.querySelectorAll('.nav-item'); | |
| const pages = { | |
| '#dashboard': document.getElementById('main-content').firstElementChild, | |
| '#campaigns': document.getElementById('campaigns'), | |
| '#settings': document.getElementById('settings') | |
| }; | |
| navLinks.forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const target = this.getAttribute('href'); | |
| // Hide all pages | |
| Object.values(pages).forEach(page => { | |
| page.classList.add('hidden'); | |
| }); | |
| // Show target page | |
| pages[target].classList.remove('hidden'); | |
| // Update active nav item | |
| navLinks.forEach(item => { | |
| item.classList.remove('active'); | |
| }); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // In a real implementation, you would use a charting library like Chart.js | |
| console.log('Dashboard loaded. Charts would be initialized here.'); | |
| // Example of how you might handle platform filter buttons | |
| const platformButtons = document.querySelectorAll('.platform-filter button'); | |
| platformButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| platformButtons.forEach(btn => btn.classList.remove('bg-primary', 'text-white')); | |
| platformButtons.forEach(btn => btn.classList.add('bg-gray-100', 'text-gray-700')); | |
| this.classList.remove('bg-gray-100', 'text-gray-700'); | |
| this.classList.add('bg-primary', 'text-white'); | |
| // Here you would filter the data based on the selected platform | |
| console.log('Filtering data for:', this.textContent.trim()); | |
| }); | |
| }); | |
| // Date range selector functionality | |
| const dateRangeSelect = document.querySelector('select'); | |
| dateRangeSelect.addEventListener('change', function() { | |
| console.log('Date range changed to:', this.value); | |
| // Here you would reload data for the selected date range | |
| }); | |
| }); | |
| </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=usezivvy/traffic-platform" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |