File size: 7,584 Bytes
7b49638 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marketing AI Dashboard | AI Forge</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<div class="min-h-screen pt-16">
<!-- Dashboard Header -->
<div class="bg-white shadow-sm border-b">
<div class="container mx-auto px-6 py-4">
<h1 class="text-3xl font-bold text-gray-900">Marketing AI Dashboard</h1>
<p class="text-gray-600">AI-powered ad banner generation with performance forecasting</p>
</div>
</div>
<!-- Main Dashboard -->
<div class="container mx-auto px-6 py-8">
<!-- Campaign Creation -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
<h2 class="text-xl font-bold mb-4">Create New Marketing Campaign</h2>
<form id="campaignForm" class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Campaign Name</label>
<input type="text" id="campaignName" class="w-full rounded-lg border-gray-300" placeholder="Summer Sale 2024" value="Summer Sale 2024">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Target Audience</label>
<select id="targetAudience" class="w-full rounded-lg border-gray-300">
<option value="millennials">Millennials (18-35)</option>
<option value="professionals">Professionals (35-55)</option>
<option value="families">Families</option>
<option value="students">Students</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Campaign Type</label>
<select id="campaignType" class="w-full rounded-lg border-gray-300">
<option value="social_media">Social Media</option>
<option value="search_engine">Search Engine</option>
<option value="email">Email Marketing</option>
<option value="display">Display Ads</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Creative Prompts</label>
<textarea id="creativePrompts" class="w-full rounded-lg border-gray-300" rows="4" placeholder="Enter marketing prompts for banner generation">Promotional banner for summer clothing collection
Marketing visual for seasonal discount campaign
Advertisement for limited-time offer</textarea>
</div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition-all">
<i data-feather="image" class="w-4 h-4 mr-2"></i>
Generate Campaign Banners
</button>
</form>
</div>
<!-- Performance Forecast -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
<h2 class="text-xl font-bold mb-4">Campaign Performance Forecast</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold mb-3">30-Day Engagement Prediction</h3>
<div class="bg-gray-50 rounded-lg p-4">
<canvas id="performanceChart" width="400" height="200"></canvas>
</div>
<div>
<h3 class="text-lg font-semibold mb-3">Performance Insights</h3>
<div id="performanceInsights" class="space-y-2">
<div class="flex justify-between">
<span class="text-gray-700">Predicted Engagement:</span>
<span id="predictedEngagement" class="px-3 py-1 rounded-full bg-blue-100 text-blue-800">Loading...</span>
</div>
</div>
</div>
</div>
<!-- Generated Banners -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
<h2 class="text-xl font-bold mb-4">AI-Generated Campaign Banners</h2>
<div id="generatedBanners" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
<i data-feather="image" class="w-12 h-12 text-gray-400 mx-auto mb-4"></i>
<p class="text-gray-500">Generated banners will appear here</p>
</div>
</div>
<!-- Analytics Charts -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h2 class="text-xl font-bold mb-4">Campaign Analytics</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div>
<canvas id="engagementChart" width="400" height="200"></canvas>
</div>
<div>
<canvas id="trendChart" width="400" height="200"></canvas>
</div>
</div>
</div>
<!-- Real-time Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-xl shadow-sm p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Banners Generated</p>
<p class="text-2xl font-bold text-indigo-600">847</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Avg Engagement</p>
<p class="text-2xl font-bold text-green-600">72.4%</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Demand Growth</p>
<p class="text-2xl font-bold text-orange-600">220%</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6">
<div class="flex items- |