|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AdGenie | AI-Powered Google Ads Made Simple</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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #7c3aed; |
|
|
--primary-light: #8b5cf6; |
|
|
--primary-dark: #6d28d9; |
|
|
--secondary: #10b981; |
|
|
--dark: #1e293b; |
|
|
--light: #f8fafc; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #f1f5f9; |
|
|
color: var(--dark); |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, var(--primary), var(--primary-light)); |
|
|
} |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.slide-up { |
|
|
animation: slideUp 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideUp { |
|
|
from { transform: translateY(20px); opacity: 0; } |
|
|
to { transform: translateY(0); opacity: 1; } |
|
|
} |
|
|
|
|
|
.chat-bubble { |
|
|
border-radius: 20px; |
|
|
max-width: 80%; |
|
|
animation: fadeIn 0.3s ease-in-out; |
|
|
} |
|
|
|
|
|
.user-bubble { |
|
|
border-bottom-right-radius: 0; |
|
|
margin-left: auto; |
|
|
} |
|
|
|
|
|
.bot-bubble { |
|
|
border-bottom-left-radius: 0; |
|
|
margin-right: auto; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 8px; |
|
|
transition: width 0.5s ease-in-out; |
|
|
} |
|
|
|
|
|
.glow { |
|
|
box-shadow: 0 0 15px rgba(124, 58, 237, 0.5); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="antialiased"> |
|
|
|
|
|
<div class="max-w-md mx-auto bg-white min-h-screen shadow-xl relative overflow-hidden"> |
|
|
|
|
|
<div class="absolute top-0 left-0 w-full h-64 gradient-bg rounded-b-3xl z-0"></div> |
|
|
<div class="absolute top-20 -left-20 w-40 h-40 rounded-full bg-white bg-opacity-10"></div> |
|
|
<div class="absolute top-40 -right-20 w-60 h-60 rounded-full bg-white bg-opacity-5"></div> |
|
|
|
|
|
|
|
|
<header class="relative z-10 p-5 flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center mr-3 shadow-lg"> |
|
|
<i class="fas fa-magic text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<h1 class="text-xl font-bold text-white">AdGenie</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<button class="w-10 h-10 rounded-xl bg-white bg-opacity-20 flex items-center justify-center text-white"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-xl bg-white bg-opacity-20 flex items-center justify-center text-white"> |
|
|
<i class="fas fa-question"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main id="mainContent" class="relative z-10 p-5 pb-24"> |
|
|
|
|
|
<div id="welcomeScreen" class="text-center pt-8"> |
|
|
<div class="w-32 h-32 mx-auto bg-white rounded-2xl flex items-center justify-center mb-6 shadow-xl floating"> |
|
|
<i class="fas fa-magic text-purple-600 text-5xl"></i> |
|
|
</div> |
|
|
<h2 class="text-3xl font-bold text-white mb-3">Hi! I'm AdGenie</h2> |
|
|
<p class="text-white text-opacity-90 mb-8">Your AI-powered ads assistant 👋</p> |
|
|
<p class="text-white text-opacity-80 mb-8 px-4">I'll help you launch, monitor, and improve Google Ads campaigns without any technical knowledge.</p> |
|
|
<button onclick="startOnboarding()" class="bg-white text-purple-600 hover:bg-gray-100 font-semibold py-4 px-10 rounded-xl shadow-lg transition duration-300 pulse"> |
|
|
Let's Get Started |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="onboardingChat" class="hidden bg-white rounded-2xl shadow-lg overflow-hidden"> |
|
|
<div class="p-5 bg-gradient-to-r from-purple-600 to-indigo-600 text-white"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-white bg-opacity-20 rounded-xl flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-magic"></i> |
|
|
</div> |
|
|
<h2 class="text-lg font-semibold">Let's set up your first campaign</h2> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="chatContainer" class="p-5 space-y-3 max-h-96 overflow-y-auto pb-4"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div id="inputContainer" class="hidden p-5 border-t border-gray-100"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="campaignSummary" class="hidden slide-up bg-white rounded-2xl shadow-lg overflow-hidden"> |
|
|
<div class="p-5 bg-gradient-to-r from-purple-600 to-indigo-600 text-white"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-white bg-opacity-20 rounded-xl flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
</div> |
|
|
<h2 class="text-lg font-semibold">Your campaign is ready!</h2> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-5 space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-bullseye text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-gray-800 mb-1">Campaign Goal</h3> |
|
|
<p class="text-gray-600">Get more website visits and sales</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-heading text-purple-600"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Ad Headlines</h3> |
|
|
<div class="space-y-3"> |
|
|
<input type="text" value="Handmade Candles - Free Shipping" class="w-full border border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-200 focus:border-transparent"> |
|
|
<input type="text" value="Premium Soy Candles - 20% Off Today" class="w-full border border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-200 focus:border-transparent"> |
|
|
<input type="text" value="Eco-Friendly Candles - Buy 2 Get 1 Free" class="w-full border border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-200 focus:border-transparent"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-users text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-gray-800 mb-1">Target Audience</h3> |
|
|
<p class="text-gray-600">Women aged 25–45, Czech Republic</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-wallet text-purple-600"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Daily Budget</h3> |
|
|
<input type="range" min="100" max="5000" step="100" value="1000" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-purple-600"> |
|
|
<div class="flex justify-between mt-1"> |
|
|
<span class="text-sm text-gray-500">100 CZK</span> |
|
|
<span class="text-sm font-semibold text-purple-600">1000 CZK</span> |
|
|
<span class="text-sm text-gray-500">5000 CZK</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-5 border-t border-gray-100"> |
|
|
<button onclick="launchCampaign()" class="w-full gradient-bg hover:opacity-90 text-white font-semibold py-4 px-4 rounded-xl shadow-md transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-paper-plane mr-3"></i> Launch Campaign |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="campaignTracker" class="hidden slide-up bg-white rounded-2xl shadow-lg overflow-hidden"> |
|
|
<div class="p-5 bg-gradient-to-r from-purple-600 to-indigo-600 text-white"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-white bg-opacity-20 rounded-xl flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h2 class="text-lg font-semibold">Your Campaign is Live!</h2> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-5 space-y-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-calendar-alt text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-gray-800">Campaign Timeline</h3> |
|
|
<p class="text-gray-600">Running May 4 – May 18</p> |
|
|
</div> |
|
|
</div> |
|
|
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Active</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-sync-alt text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-gray-800 mb-1">Current Status</h3> |
|
|
<p class="text-gray-600">Campaign under review by Google (usually takes 1-2 hours)</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-yellow-100 rounded-xl flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-edit text-yellow-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Quick Actions</h3> |
|
|
<button class="text-purple-600 hover:text-purple-800 font-medium flex items-center"> |
|
|
<i class="fas fa-pencil-alt mr-2"></i> Edit Ad Content |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-5 border-t border-gray-100"> |
|
|
<div class="bg-blue-50 border border-blue-100 rounded-xl p-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-info-circle text-blue-600 text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-blue-800 mb-1">What's happening now?</h3> |
|
|
<p class="text-blue-700 text-sm">We're setting up your campaign with Google. You'll get a notification when it's live. In the meantime, you can edit your ad text if needed.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="performanceReport" class="hidden slide-up bg-white rounded-2xl shadow-lg overflow-hidden"> |
|
|
<div class="p-5 bg-gradient-to-r from-purple-600 to-indigo-600 text-white"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-white bg-opacity-20 rounded-xl flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-chart-pie"></i> |
|
|
</div> |
|
|
<h2 class="text-lg font-semibold">Your AdGenie Update</h2> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-5 space-y-6"> |
|
|
<div class="grid grid-cols-3 gap-3"> |
|
|
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100"> |
|
|
<div class="text-2xl font-bold text-purple-600">1,560</div> |
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider">Views</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100"> |
|
|
<div class="text-2xl font-bold text-green-600">78</div> |
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider">Clicks</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100"> |
|
|
<div class="text-2xl font-bold text-blue-600">5</div> |
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider">Sales</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-check-circle text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-gray-800 mb-1">Performance Summary</h3> |
|
|
<p class="text-gray-600">Your campaign is performing well compared to similar businesses!</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-yellow-100 rounded-xl flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-lightbulb text-yellow-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-gray-800 mb-1">Smart Suggestion</h3> |
|
|
<p class="text-gray-600 mb-3">We suggest testing a stronger call-to-action to increase conversions.</p> |
|
|
<div class="bg-white border border-gray-200 rounded-xl p-4"> |
|
|
<p class="font-medium text-gray-800 mb-1">New Ad Variant:</p> |
|
|
<p class="text-purple-600 font-medium">🌿 Buy 2 candles, get 1 free. Limited time!</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-5 border-t border-gray-100 space-y-3"> |
|
|
<button onclick="acceptSuggestion()" class="w-full gradient-bg hover:opacity-90 text-white font-semibold py-4 px-4 rounded-xl shadow-md transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-check-circle mr-3"></i> Improve Now |
|
|
</button> |
|
|
<button class="w-full bg-white hover:bg-gray-50 text-gray-800 font-medium py-3 px-4 rounded-xl border border-gray-200 shadow-sm transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-clock mr-3"></i> Maybe Later |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="dashboardView" class="hidden slide-up bg-white rounded-2xl shadow-lg overflow-hidden"> |
|
|
<div class="p-5 bg-gradient-to-r from-purple-600 to-indigo-600 text-white"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-white bg-opacity-20 rounded-xl flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-tachometer-alt"></i> |
|
|
</div> |
|
|
<h2 class="text-lg font-semibold">Your Campaign Health</h2> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-5 space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-bullseye text-purple-600"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Goal Progress</h3> |
|
|
<p class="text-gray-600 mb-1">Reach 10 sales</p> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-purple-600 h-2.5 rounded-full progress-bar" style="width: 50%"></div> |
|
|
</div> |
|
|
<p class="text-right text-sm text-gray-500 mt-1">5/10</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-lightbulb text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-gray-800 mb-1">Tip of the Week</h3> |
|
|
<div class="bg-white p-4 rounded-xl border border-blue-100"> |
|
|
<p class="text-gray-700">Customers mostly buy on Sundays — would you like to boost your Sunday ads?</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-calendar text-green-600"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Schedule Adjustment</h3> |
|
|
<p class="text-gray-600 mb-3">We can shift more of your budget to weekends when customers are most active.</p> |
|
|
<div class="flex space-x-3"> |
|
|
<button onclick="acceptScheduleChange()" class="flex-1 bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-4 rounded-xl shadow-sm transition duration-300"> |
|
|
Accept |
|
|
</button> |
|
|
<button class="flex-1 bg-white hover:bg-gray-50 text-gray-800 font-medium py-3 px-4 rounded-xl border border-gray-200 shadow-sm transition duration-300"> |
|
|
Review |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="nextCampaign" class="hidden slide-up bg-white rounded-2xl shadow-lg overflow-hidden"> |
|
|
<div class="p-5 bg-gradient-to-r from-purple-600 to-indigo-600 text-white"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-white bg-opacity-20 rounded-xl flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</div> |
|
|
<h2 class="text-lg font-semibold">Ready to Grow More?</h2> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-5 space-y-6"> |
|
|
<p class="text-gray-700">Your first campaign is doing great! Let's set your next 2-week goal.</p> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="bg-white border border-gray-200 rounded-xl p-4 hover:border-purple-300 transition duration-300 cursor-pointer card-hover" onclick="selectGoal('returning')"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-redo text-purple-600 text-sm"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-gray-800">Drive more returning customers</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mt-2 ml-11">Target people who visited before but didn't buy</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white border border-gray-200 rounded-xl p-4 hover:border-purple-300 transition duration-300 cursor-pointer card-hover" onclick="selectGoal('bestseller')"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-star text-blue-600 text-sm"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-gray-800">Promote your best-seller</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mt-2 ml-11">Boost sales of your most popular product</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white border border-gray-200 rounded-xl p-4 hover:border-purple-300 transition duration-300 cursor-pointer card-hover" onclick="selectGoal('awareness')"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-eye text-green-600 text-sm"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-gray-800">Increase brand awareness</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mt-2 ml-11">Get more people to recognize your brand</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-yellow-50 border border-yellow-100 rounded-xl p-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-6 h-6 bg-yellow-100 rounded-full flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-lightbulb text-yellow-600 text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-yellow-800 mb-1">Based on your data</h3> |
|
|
<p class="text-yellow-700 text-sm">We recommend focusing on returning customers - they convert 3x better than new visitors!</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-5 border-t border-gray-100"> |
|
|
<button id="continueButton" class="w-full gradient-bg hover:opacity-90 text-white font-semibold py-4 px-4 rounded-xl shadow-md transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-arrow-right mr-3"></i> Continue with Returning Customers |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around max-w-md mx-auto z-20 shadow-lg"> |
|
|
<button onclick="showDashboard()" class="p-4 text-gray-500 hover:text-purple-600 transition duration-300 flex flex-col items-center"> |
|
|
<i class="fas fa-home text-xl"></i> |
|
|
<span class="text-xs mt-1">Home</span> |
|
|
</button> |
|
|
<button onclick="showCampaigns()" class="p-4 text-gray-500 hover:text-purple-600 transition duration-300 flex flex-col items-center"> |
|
|
<i class="fas fa-rocket text-xl"></i> |
|
|
<span class="text-xs mt-1">Campaigns</span> |
|
|
</button> |
|
|
<button onclick="showReports()" class="p-4 text-gray-500 hover:text-purple-600 transition duration-300 flex flex-col items-center"> |
|
|
<i class="fas fa-chart-bar text-xl"></i> |
|
|
<span class="text-xs mt-1">Reports</span> |
|
|
</button> |
|
|
<button onclick="showSettings()" class="p-4 text-gray-500 hover:text-purple-600 transition duration-300 flex flex-col items-center"> |
|
|
<i class="fas fa-cog text-xl"></i> |
|
|
<span class="text-xs mt-1">Settings</span> |
|
|
</button> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let currentStep = 1; |
|
|
let onboardingAnswers = {}; |
|
|
let selectedGoal = 'returning'; |
|
|
|
|
|
|
|
|
const welcomeScreen = document.getElementById('welcomeScreen'); |
|
|
const onboardingChat = document.getElementById('onboardingChat'); |
|
|
const chatContainer = document.getElementById('chatContainer'); |
|
|
const inputContainer = document.getElementById('inputContainer'); |
|
|
const campaignSummary = document.getElementById('campaignSummary'); |
|
|
const campaignTracker = document.getElementById('campaignTracker'); |
|
|
const performanceReport = document.getElementById('performanceReport'); |
|
|
const dashboardView = document.getElementById('dashboardView'); |
|
|
const nextCampaign = document.getElementById('nextCampaign'); |
|
|
const continueButton = document.getElementById('continueButton'); |
|
|
|
|
|
|
|
|
function startOnboarding() { |
|
|
welcomeScreen.classList.add('hidden'); |
|
|
onboardingChat.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
addBotMessage("What is your business called?"); |
|
|
showTextInput(); |
|
|
} |
|
|
|
|
|
|
|
|
function addBotMessage(text) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = 'chat-bubble bot-bubble bg-gray-100 text-gray-800 p-4'; |
|
|
messageDiv.innerHTML = text; |
|
|
chatContainer.appendChild(messageDiv); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
function addUserMessage(text) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = 'chat-bubble user-bubble bg-purple-600 text-white p-4'; |
|
|
messageDiv.innerHTML = text; |
|
|
chatContainer.appendChild(messageDiv); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
function showTextInput() { |
|
|
inputContainer.classList.remove('hidden'); |
|
|
inputContainer.innerHTML = ` |
|
|
<div class="flex items-center"> |
|
|
<input type="text" id="userInput" class="flex-1 border border-gray-200 rounded-l-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-200 focus:border-transparent" placeholder="Type your answer..."> |
|
|
<button onclick="submitAnswer()" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-r-xl"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
document.getElementById('userInput').focus(); |
|
|
} |
|
|
|
|
|
|
|
|
function showOptions(options) { |
|
|
inputContainer.classList.remove('hidden'); |
|
|
let optionsHTML = '<div class="grid grid-cols-1 gap-2">'; |
|
|
|
|
|
options.forEach(option => { |
|
|
optionsHTML += ` |
|
|
<button onclick="selectOption('${option.value}')" class="w-full bg-white hover:bg-gray-50 border border-gray-200 text-gray-800 font-medium py-3 px-4 rounded-xl text-left transition duration-300"> |
|
|
${option.emoji ? option.emoji + ' ' : ''}${option.text} |
|
|
</button> |
|
|
`; |
|
|
}); |
|
|
|
|
|
optionsHTML += '</div>'; |
|
|
inputContainer.innerHTML = optionsHTML; |
|
|
} |
|
|
|
|
|
|
|
|
function submitAnswer() { |
|
|
const userInput = document.getElementById('userInput').value.trim(); |
|
|
if (userInput) { |
|
|
addUserMessage(userInput); |
|
|
|
|
|
|
|
|
if (currentStep === 1) { |
|
|
onboardingAnswers.businessName = userInput; |
|
|
currentStep++; |
|
|
setTimeout(() => { |
|
|
addBotMessage("What do you sell? (e.g., handmade candles, digital marketing services)"); |
|
|
showTextInput(); |
|
|
}, 800); |
|
|
} else if (currentStep === 2) { |
|
|
onboardingAnswers.product = userInput; |
|
|
currentStep++; |
|
|
setTimeout(() => { |
|
|
addBotMessage("What's your main goal for this campaign?"); |
|
|
showOptions([ |
|
|
{ emoji: "💵", text: "More sales", value: "sales" }, |
|
|
{ emoji: "👀", text: "Brand awareness", value: "awareness" }, |
|
|
{ emoji: "📥", text: "Newsletter signups", value: "leads" } |
|
|
]); |
|
|
}, 800); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function selectOption(value) { |
|
|
let displayText = ''; |
|
|
|
|
|
if (currentStep === 3) { |
|
|
if (value === 'sales') displayText = "💵 More sales"; |
|
|
else if (value === 'awareness') displayText = "👀 Brand awareness"; |
|
|
else displayText = "📥 Newsletter signups"; |
|
|
|
|
|
onboardingAnswers.goal = value; |
|
|
currentStep++; |
|
|
} else if (currentStep === 4) { |
|
|
|
|
|
completeOnboarding(); |
|
|
return; |
|
|
} |
|
|
|
|
|
addUserMessage(displayText); |
|
|
|
|
|
if (currentStep === 3) { |
|
|
setTimeout(() => { |
|
|
addBotMessage("Who are your typical customers? (Select all that apply)"); |
|
|
showOptions([ |
|
|
{ emoji: "👩", text: "Women", value: "women" }, |
|
|
{ emoji: "👨", text: "Men", value: "men" }, |
|
|
{ emoji: "👵", text: "Seniors", value: "seniors" }, |
|
|
{ emoji: "👩💼", text: "Professionals", value: "professionals" } |
|
|
]); |
|
|
}, 800); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function completeOnboarding() { |
|
|
onboardingChat.classList.add('hidden'); |
|
|
campaignSummary.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function launchCampaign() { |
|
|
campaignSummary.classList.add('hidden'); |
|
|
campaignTracker.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
document.querySelector('#campaignTracker span').classList.remove('bg-green-100', 'text-green-800'); |
|
|
document.querySelector('#campaignTracker span').classList.add('bg-blue-100', 'text-blue-800'); |
|
|
document.querySelector('#campaignTracker span').textContent = 'Live'; |
|
|
document.querySelector('#campaignTracker p:nth-of-type(2)').textContent = 'Campaign is now active and showing your ads!'; |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
|
|
|
function acceptSuggestion() { |
|
|
performanceReport.classList.add('hidden'); |
|
|
dashboardView.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function acceptScheduleChange() { |
|
|
const progressBar = document.querySelector('.progress-bar'); |
|
|
progressBar.style.width = '70%'; |
|
|
|
|
|
|
|
|
const dashboardContent = document.querySelector('#dashboardView > div'); |
|
|
const successDiv = document.createElement('div'); |
|
|
successDiv.className = 'bg-green-50 border border-green-200 rounded-xl p-3 mb-4 flex items-center'; |
|
|
successDiv.innerHTML = ` |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span class="text-green-800 text-sm">Schedule updated! More budget will go to weekends.</span> |
|
|
`; |
|
|
dashboardContent.insertBefore(successDiv, dashboardContent.firstChild); |
|
|
} |
|
|
|
|
|
|
|
|
function selectGoal(goal) { |
|
|
selectedGoal = goal; |
|
|
|
|
|
|
|
|
document.querySelectorAll('#nextCampaign .bg-white').forEach(card => { |
|
|
card.classList.remove('border-purple-300', 'bg-purple-50'); |
|
|
}); |
|
|
|
|
|
|
|
|
if (goal === 'returning') { |
|
|
document.querySelector('#nextCampaign .bg-white:nth-child(1)').classList.add('border-purple-300', 'bg-purple-50'); |
|
|
continueButton.innerHTML = '<i class="fas fa-arrow-right mr-3"></i> Continue with Returning Customers'; |
|
|
} else if (goal === 'bestseller') { |
|
|
document.querySelector('#nextCampaign .bg-white:nth-child(2)').classList.add('border-purple-300', 'bg-purple-50'); |
|
|
continueButton.innerHTML = '<i class="fas fa-arrow-right mr-3"></i> Continue with Best-Seller'; |
|
|
} else { |
|
|
document.querySelector('#nextCampaign .bg-white:nth-child(3)').classList.add('border-purple-300', 'bg-purple-50'); |
|
|
continueButton.innerHTML = '<i class="fas fa-arrow-right mr-3"></i> Continue with Awareness'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function showDashboard() { |
|
|
hideAllViews(); |
|
|
dashboardView.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function showCampaigns() { |
|
|
hideAllViews(); |
|
|
campaignTracker.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function showReports() { |
|
|
hideAllViews(); |
|
|
performanceReport.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function showSettings() { |
|
|
|
|
|
alert('Settings would appear here in the full app.'); |
|
|
} |
|
|
|
|
|
|
|
|
function hideAllViews() { |
|
|
welcomeScreen.classList.add('hidden'); |
|
|
onboardingChat.classList.add('hidden'); |
|
|
campaignSummary.classList.add('hidden'); |
|
|
campaignTracker.classList.add('hidden'); |
|
|
performanceReport.classList.add('hidden'); |
|
|
dashboardView.classList.add('hidden'); |
|
|
nextCampaign.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, 500); |
|
|
</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=LukasBe/adgenie" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
