Spaces:

LukasBe
/

adgenie

Running

App Files Files Community

LukasBe commited on May 4

Commit

ef3f715

verified ·

1 Parent(s): 60640c3

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +672 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Adgenie
-emoji: 👁
-colorFrom: gray
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: adgenie
+emoji: 🐳
+colorFrom: red
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,672 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AdGenie - Simple Google Ads Management</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>
+        .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;
+        }
+        .slide-up {
+            animation: slideUp 0.5s ease-out;
+        }
+        @keyframes slideUp {
+            from { transform: translateY(20px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 font-sans">
+    <!-- Main Container -->
+    <div class="max-w-md mx-auto bg-white min-h-screen shadow-lg relative overflow-hidden">
+        <!-- Header -->
+        <header class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white p-4 flex items-center justify-between">
+            <div class="flex items-center">
+                <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center mr-3">
+                    <i class="fas fa-magic text-purple-600 text-xl"></i>
+                </div>
+                <h1 class="text-xl font-bold">AdGenie</h1>
+            </div>
+            <div class="flex items-center space-x-2">
+                <button class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
+                    <i class="fas fa-bell text-white"></i>
+                </button>
+                <button class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
+                    <i class="fas fa-question text-white"></i>
+                </button>
+            </div>
+        </header>
+        <!-- Main Content Area - Changes based on state -->
+        <main id="mainContent" class="p-4 pb-20">
+            <!-- Welcome Screen (Step 1) -->
+            <div id="welcomeScreen" class="text-center pt-8">
+                <div class="w-24 h-24 mx-auto bg-gradient-to-r from-purple-100 to-indigo-100 rounded-full flex items-center justify-center mb-6">
+                    <i class="fas fa-magic text-purple-600 text-4xl"></i>
+                </div>
+                <h2 class="text-2xl font-bold text-gray-800 mb-2">Hi! I'm AdGenie</h2>
+                <p class="text-gray-600 mb-6">Your personal ad assistant 👋</p>
+                <p class="text-gray-700 mb-8">Let's grow your business with Google Ads - no experience needed!</p>
+                <button onclick="startOnboarding()" class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-8 rounded-full shadow-md transition duration-300 pulse">
+                    Let's get started
+                </button>
+            </div>
+            <!-- Onboarding Chat (Step 1) -->
+            <div id="onboardingChat" class="hidden">
+                <div class="flex items-center mb-4">
+                    <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+                        <i class="fas fa-magic text-purple-600"></i>
+                    </div>
+                    <h2 class="text-lg font-semibold text-gray-800">Let's set up your first campaign</h2>
+                </div>
+                <div id="chatContainer" class="mb-4 space-y-3 max-h-96 overflow-y-auto pb-4">
+                    <!-- Chat messages will be inserted here -->
+                </div>
+                <div id="inputContainer" class="hidden">
+                    <!-- Dynamic input will be inserted here -->
+                </div>
+            </div>
+            <!-- Campaign Summary (Step 2) -->
+            <div id="campaignSummary" class="hidden slide-up">
+                <div class="flex items-center mb-6">
+                    <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+                        <i class="fas fa-rocket text-purple-600"></i>
+                    </div>
+                    <h2 class="text-lg font-semibold text-gray-800">Your campaign is ready!</h2>
+                </div>
+                <div class="bg-gray-50 rounded-xl p-5 mb-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+                            <i class="fas fa-bullseye text-purple-600 text-sm"></i>
+                        </div>
+                        <h3 class="font-medium text-gray-800">Campaign Goal</h3>
+                    </div>
+                    <p class="text-gray-700 ml-11 mb-4">Get more website visits and sales</p>
+                    <div class="flex items-center mb-4">
+                        <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+                            <i class="fas fa-heading text-purple-600 text-sm"></i>
+                        </div>
+                        <h3 class="font-medium text-gray-800">Ad Headlines</h3>
+                    </div>
+                    <div class="space-y-2 ml-11 mb-4">
+                        <div class="flex items-center">
+                            <input type="text" value="Handmade Candles - Free Shipping" class="border border-gray-300 rounded-lg px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-purple-200">
+                        </div>
+                        <div class="flex items-center">
+                            <input type="text" value="Premium Soy Candles - 20% Off Today" class="border border-gray-300 rounded-lg px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-purple-200">
+                        </div>
+                        <div class="flex items-center">
+                            <input type="text" value="Eco-Friendly Candles - Buy 2 Get 1 Free" class="border border-gray-300 rounded-lg px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-purple-200">
+                        </div>
+                    </div>
+                    <div class="flex items-center mb-4">
+                        <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+                            <i class="fas fa-users text-purple-600 text-sm"></i>
+                        </div>
+                        <h3 class="font-medium text-gray-800">Target Audience</h3>
+                    </div>
+                    <p class="text-gray-700 ml-11 mb-4">Women aged 25–45, Czech Republic</p>
+                    <div class="flex items-center mb-4">
+                        <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+                            <i class="fas fa-wallet text-purple-600 text-sm"></i>
+                        </div>
+                        <h3 class="font-medium text-gray-800">Daily Budget</h3>
+                    </div>
+                    <div class="ml-11 mb-4">
+                        <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">
+                        <div class="flex justify-between mt-1">
+                            <span class="text-sm text-gray-500">100 CZK</span>
+                            <span class="text-sm font-medium text-purple-600">1000 CZK</span>
+                            <span class="text-sm text-gray-500">5000 CZK</span>
+                        </div>
+                    </div>
+                </div>
+                <button onclick="launchCampaign()" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-4 rounded-lg shadow-md transition duration-300 flex items-center justify-center">
+                    <i class="fas fa-paper-plane mr-2"></i> Launch Campaign
+                </button>
+            </div>
+            <!-- Campaign Tracker (Step 3) -->
+            <div id="campaignTracker" class="hidden slide-up">
+                <div class="flex items-center mb-6">
+                    <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+                        <i class="fas fa-chart-line text-purple-600"></i>
+                    </div>
+                    <h2 class="text-lg font-semibold text-gray-800">Your Campaign is Live!</h2>
+                </div>
+                <div class="bg-gray-50 rounded-xl p-5 mb-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center">
+                            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-calendar-alt text-green-600 text-sm"></i>
+                            </div>
+                            <h3 class="font-medium text-gray-800">Campaign Timeline</h3>
+                        </div>
+                        <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">Active</span>
+                    </div>
+                    <p class="text-gray-700 ml-11 mb-4">Running May 4 – May 18</p>
+                    <div class="flex items-center mb-4">
+                        <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
+                            <i class="fas fa-sync-alt text-blue-600 text-sm"></i>
+                        </div>
+                        <h3 class="font-medium text-gray-800">Current Status</h3>
+                    </div>
+                    <p class="text-gray-700 ml-11 mb-4">Campaign under review by Google (usually takes 1-2 hours)</p>
+                    <div class="flex items-center mb-4">
+                        <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
+                            <i class="fas fa-edit text-yellow-600 text-sm"></i>
+                        </div>
+                        <h3 class="font-medium text-gray-800">Quick Actions</h3>
+                    </div>
+                    <div class="ml-11">
+                        <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 class="bg-blue-50 border border-blue-100 rounded-xl p-4 mb-6">
+                    <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>
+            <!-- Performance Report (Step 4) -->
+            <div id="performanceReport" class="hidden slide-up">
+                <div class="flex items-center mb-6">
+                    <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+                        <i class="fas fa-chart-pie text-purple-600"></i>
+                    </div>
+                    <h2 class="text-lg font-semibold text-gray-800">Your AdGenie Update</h2>
+                </div>
+                <div class="bg-gray-50 rounded-xl p-5 mb-6">
+                    <div class="grid grid-cols-3 gap-4 text-center mb-6">
+                        <div class="bg-white p-3 rounded-lg shadow-sm">
+                            <div class="text-2xl font-bold text-purple-600">1,560</div>
+                            <div class="text-xs text-gray-500">Views</div>
+                        </div>
+                        <div class="bg-white p-3 rounded-lg shadow-sm">
+                            <div class="text-2xl font-bold text-green-600">78</div>
+                            <div class="text-xs text-gray-500">Clicks</div>
+                        </div>
+                        <div class="bg-white p-3 rounded-lg shadow-sm">
+                            <div class="text-2xl font-bold text-blue-600">5</div>
+                            <div class="text-xs text-gray-500">Sales</div>
+                        </div>
+                    </div>
+                    <div class="flex items-center mb-4">
+                        <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
+                            <i class="fas fa-check-circle text-green-600 text-sm"></i>
+                        </div>
+                        <h3 class="font-medium text-gray-800">Performance Summary</h3>
+                    </div>
+                    <p class="text-gray-700 ml-11 mb-4">Your campaign is performing well compared to similar businesses!</p>
+                    <div class="flex items-center mb-4">
+                        <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
+                            <i class="fas fa-lightbulb text-yellow-600 text-sm"></i>
+                        </div>
+                        <h3 class="font-medium text-gray-800">Smart Suggestion</h3>
+                    </div>
+                    <p class="text-gray-700 ml-11 mb-4">We suggest testing a stronger call-to-action to increase conversions.</p>
+                    <div class="ml-11">
+                        <div class="bg-white border border-gray-200 rounded-lg p-4 mb-4">
+                            <p class="font-medium text-gray-800 mb-2">New Ad Variant:</p>
+                            <p class="text-purple-600">🌿 Buy 2 candles, get 1 free. Limited time!</p>
+                        </div>
+                    </div>
+                </div>
+                <button onclick="acceptSuggestion()" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-4 rounded-lg shadow-md transition duration-300 flex items-center justify-center mb-3">
+                    <i class="fas fa-check-circle mr-2"></i> Improve Now
+                </button>
+                <button class="w-full bg-white hover:bg-gray-50 text-gray-800 font-medium py-3 px-4 rounded-lg border border-gray-300 shadow-sm transition duration-300 flex items-center justify-center">
+                    <i class="fas fa-clock mr-2"></i> Maybe Later
+                </button>
+            </div>
+            <!-- Dashboard (Step 5) -->
+            <div id="dashboardView" class="hidden slide-up">
+                <div class="flex items-center mb-6">
+                    <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+                        <i class="fas fa-tachometer-alt text-purple-600"></i>
+                    </div>
+                    <h2 class="text-lg font-semibold text-gray-800">Your Campaign Health</h2>
+                </div>
+                <div class="bg-gray-50 rounded-xl p-5 mb-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+                            <i class="fas fa-bullseye text-purple-600 text-sm"></i>
+                        </div>
+                        <h3 class="font-medium text-gray-800">Goal Progress</h3>
+                    </div>
+                    <div class="ml-11 mb-4">
+                        <p class="text-gray-700 mb-2">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 class="flex items-center mb-4">
+                        <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
+                            <i class="fas fa-lightbulb text-blue-600 text-sm"></i>
+                        </div>
+                        <h3 class="font-medium text-gray-800">Tip of the Week</h3>
+                    </div>
+                    <div class="ml-11 mb-4 bg-white p-3 rounded-lg 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 class="flex items-center mb-4">
+                        <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
+                            <i class="fas fa-calendar text-green-600 text-sm"></i>
+                        </div>
+                        <h3 class="font-medium text-gray-800">Schedule Adjustment</h3>
+                    </div>
+                    <div class="ml-11">
+                        <p class="text-gray-700 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-medium py-2 px-4 rounded-lg shadow-sm transition duration-300">
+                                Accept
+                            </button>
+                            <button class="flex-1 bg-white hover:bg-gray-50 text-gray-800 font-medium py-2 px-4 rounded-lg border border-gray-300 shadow-sm transition duration-300">
+                                Review
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Next Campaign (Step 6) -->
+            <div id="nextCampaign" class="hidden slide-up">
+                <div class="flex items-center mb-6">
+                    <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+                        <i class="fas fa-arrow-up text-purple-600"></i>
+                    </div>
+                    <h2 class="text-lg font-semibold text-gray-800">Ready to Grow More?</h2>
+                </div>
+                <div class="bg-gray-50 rounded-xl p-5 mb-6">
+                    <p class="text-gray-700 mb-6">Your first campaign is doing great! Let's set your next 2-week goal.</p>
+                    <div class="space-y-4 mb-6">
+                        <div class="bg-white border border-gray-200 rounded-lg p-4 hover:border-purple-300 transition duration-300 cursor-pointer" onclick="selectGoal('returning')">
+                            <div class="flex items-center">
+                                <div class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+                                    <i class="fas fa-redo text-purple-600 text-xs"></i>
+                                </div>
+                                <h3 class="font-medium text-gray-800">Drive more returning customers</h3>
+                            </div>
+                            <p class="text-gray-600 text-sm mt-2 ml-9">Target people who visited before but didn't buy</p>
+                        </div>
+                        <div class="bg-white border border-gray-200 rounded-lg p-4 hover:border-purple-300 transition duration-300 cursor-pointer" onclick="selectGoal('bestseller')">
+                            <div class="flex items-center">
+                                <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3">
+                                    <i class="fas fa-star text-blue-600 text-xs"></i>
+                                </div>
+                                <h3 class="font-medium text-gray-800">Promote your best-seller</h3>
+                            </div>
+                            <p class="text-gray-600 text-sm mt-2 ml-9">Boost sales of your most popular product</p>
+                        </div>
+                        <div class="bg-white border border-gray-200 rounded-lg p-4 hover:border-purple-300 transition duration-300 cursor-pointer" onclick="selectGoal('awareness')">
+                            <div class="flex items-center">
+                                <div class="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center mr-3">
+                                    <i class="fas fa-eye text-green-600 text-xs"></i>
+                                </div>
+                                <h3 class="font-medium text-gray-800">Increase brand awareness</h3>
+                            </div>
+                            <p class="text-gray-600 text-sm mt-2 ml-9">Get more people to recognize your brand</p>
+                        </div>
+                    </div>
+                    <div class="bg-yellow-50 border border-yellow-100 rounded-xl p-4 mb-6">
+                        <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>
+                <button id="continueButton" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-4 rounded-lg shadow-md transition duration-300 flex items-center justify-center">
+                    <i class="fas fa-arrow-right mr-2"></i> Continue with Returning Customers
+                </button>
+            </div>
+        </main>
+        <!-- Bottom Navigation -->
+        <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around max-w-md mx-auto">
+            <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-lg"></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-lg"></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-lg"></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-lg"></i>
+                <span class="text-xs mt-1">Settings</span>
+            </button>
+        </nav>
+    </div>
+    <script>
+        // Current state tracking
+        let currentStep = 1;
+        let onboardingAnswers = {};
+        let selectedGoal = 'returning';
+        // DOM elements
+        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');
+        // Start onboarding process
+        function startOnboarding() {
+            welcomeScreen.classList.add('hidden');
+            onboardingChat.classList.remove('hidden');
+            // Start the chat
+            addBotMessage("What is your business called?");
+            showTextInput();
+        }
+        // Add a bot message to the chat
+        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;
+        }
+        // Add a user message to the chat
+        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;
+        }
+        // Show text input field
+        function showTextInput() {
+            inputContainer.classList.remove('hidden');
+            inputContainer.innerHTML = `
+                <div class="flex items-center">
+                    <input type="text" id="userInput" class="flex-1 border border-gray-300 rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-200" placeholder="Type your answer...">
+                    <button onclick="submitAnswer()" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-r-lg">
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </div>
+            `;
+            document.getElementById('userInput').focus();
+        }
+        // Show multiple choice options
+        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-100 border border-gray-200 text-gray-800 font-medium py-3 px-4 rounded-lg text-left">
+                        ${option.emoji ? option.emoji + ' ' : ''}${option.text}
+                    </button>
+                `;
+            });
+            optionsHTML += '</div>';
+            inputContainer.innerHTML = optionsHTML;
+        }
+        // Submit text answer
+        function submitAnswer() {
+            const userInput = document.getElementById('userInput').value.trim();
+            if (userInput) {
+                addUserMessage(userInput);
+                // Store answer based on current question
+                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);
+                }
+            }
+        }
+        // Select an option from multiple choice
+        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) {
+                // For demo purposes, we'll just show the campaign summary after selecting an option
+                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);
+            }
+        }
+        // Complete onboarding and show campaign summary
+        function completeOnboarding() {
+            onboardingChat.classList.add('hidden');
+            campaignSummary.classList.remove('hidden');
+        }
+        // Launch campaign (move to tracker view)
+        function launchCampaign() {
+            campaignSummary.classList.add('hidden');
+            campaignTracker.classList.remove('hidden');
+            // Simulate campaign approval after 3 seconds
+            setTimeout(() => {
+                document.querySelector('#campaignTracker .bg-green-100').classList.remove('bg-green-100', 'text-green-800');
+                document.querySelector('#campaignTracker .bg-green-100').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);
+        }
+        // Accept performance suggestion
+        function acceptSuggestion() {
+            performanceReport.classList.add('hidden');
+            dashboardView.classList.remove('hidden');
+        }
+        // Accept schedule change
+        function acceptScheduleChange() {
+            const progressBar = document.querySelector('.progress-bar');
+            progressBar.style.width = '70%';
+            // Show success message
+            const dashboardContent = document.querySelector('#dashboardView > div');
+            const successDiv = document.createElement('div');
+            successDiv.className = 'bg-green-50 border border-green-200 rounded-lg 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);
+        }
+        // Select a goal for next campaign
+        function selectGoal(goal) {
+            selectedGoal = goal;
+            // Update all option cards
+            document.querySelectorAll('#nextCampaign .bg-white').forEach(card => {
+                card.classList.remove('border-purple-300', 'bg-purple-50');
+            });
+            // Highlight selected card
+            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-2"></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-2"></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-2"></i> Continue with Awareness';
+            }
+        }
+        // Navigation functions
+        function showDashboard() {
+            hideAllViews();
+            dashboardView.classList.remove('hidden');
+        }
+        function showCampaigns() {
+            hideAllViews();
+            campaignTracker.classList.remove('hidden');
+        }
+        function showReports() {
+            hideAllViews();
+            performanceReport.classList.remove('hidden');
+        }
+        function showSettings() {
+            // In a real app, this would show settings
+            alert('Settings would appear here in the full app.');
+        }
+        // Helper to hide all main views
+        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');
+        }
+        // For demo purposes - simulate moving through steps
+        setTimeout(() => {
+            // Uncomment to auto-advance through steps for demo
+            // startOnboarding();
+            // setTimeout(() => {
+            //     document.getElementById('userInput').value = "Maria's Candles";
+            //     submitAnswer();
+            // }, 1000);
+            // setTimeout(() => {
+            //     document.getElementById('userInput').value = "Handmade soy candles";
+            //     submitAnswer();
+            // }, 2500);
+            // setTimeout(() => {
+            //     selectOption('sales');
+            // }, 4000);
+            // setTimeout(() => {
+            //     selectOption('women');
+            // }, 5500);
+        }, 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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ AdGenie: Make it possible for someone like Maria to launch, monitor, and improve Google Ads campaigns without needing to understand CPC, targeting settings, or Analytics dashboards. 🧭 Step-by-Step Workflow (With UI/UX Notes) 🟢 Step 1: Onboarding & Business Context (Day 0) 🔹 UI: Welcome Screen + Friendly Chatbot Avatar “Hi! I’m AdGenie, your personal ad assistant 👋” CTA: “Let’s get started” 🔹 Chatbot Questions (UI: large bubbles, single-tap answers where possible) “What is your business called?” → Text input “What do you sell?” → Short description + emoji prompt “What’s your main goal?” → Choose: [💵 More sales] [👀 Brand awareness] [📥 Newsletter signups] “Who are your typical customers?” → Age, region, interests (multiselect) ✅ Design Principle: Use progressive disclosure. Only one question at a time to reduce overwhelm. Use visuals, emojis, and light tone. 🟠 Step 2: AI Generates Initial Campaign (Day 0) 🔹 Summary Page (UI: Card Layout) 🎯 Campaign goal: “Get more website visits and sales” 🎨 3 ad headline suggestions (editable) 📍 Target: Women aged 25–45, Czech Republic 💰 Budget: 1000 CZK/month (editable slider) CTA: “Looks good! Launch campaign ✅” ✅ Design Tip: Avoid showing AdWords settings. Let AI pre-fill, but allow minor edits (budget, copy). 🟡 Step 3: Confirmation + Campaign Tracker (Day 0) 🔹 UI: Tracker Screen 📅 Campaign Timeline: “Running May 4–May 18” ⏳ Real-time status: “Campaign under review by Google” 🔄 Button: “Edit Ad Content” (until it’s active) ✅ UX Tip: Maintain trust by showing what's happening, even if user can’t influence it. 🟣 Step 4: Periodic Review Prompt (Day 14) 🔔 User gets email + in-app notification Subject: “Your AdGenie update is ready! 🧙‍♂️ See how your ads performed.” 🔹 UI: Report Card View (Mobile-first) 👁️ 1,560 views | ✅ 78 clicks | 🛒 5 sales (linked via GA4/ecommerce) 🚦 "Your campaign is performing well compared to similar businesses!" 🧠 "We suggest testing a stronger call-to-action.” 🔘 CTA: “Improve Now” → Leads to AI-generated new ad variant with preview: “🌿 Buy 2 candles, get 1 free. Limited time!” ✅ UX Flow: 1️⃣ Understand performance 2️⃣ See reason 3️⃣ Take action in 1–2 taps. 🔵 Step 5: Smart Goal Tracker (Ongoing) 🔹 Dashboard Tab: “Your Campaign Health” 📈 Goal Progress Bar: “Reach 10 sales” → [█████-----] 5/10 💡 Tip of the week: “Customers mostly buy on Sundays—boost Sunday ads?” 🔄 Schedule tweak: AI offers to shift budget more to weekends → 1-tap accept ✅ Design Insight: Visual goal progress tied to real business language (not ad jargon). 🔴 Step 6: Next Campaign Setup (Day 28) 🔔 Notification: “Want to grow more? Let’s set your next 2-week goal.” New goal prompt: “Drive more returning customers?” or “Promote your best-seller?” AdGenie uses past data to pre-suggest new strategy, audience, copy. ✅ UX Strategy: Continuous small wins → repeat engagement cycle. 🧾 Extras & Retention Features 💌 Email Digest: Bi-weekly summary + 1 suggested action 🎓 “Learn As You Go” Mode: Optional short tips under each metric (“What’s a bounce rate?”) 🔁 Autopilot Option: Let AdGenie auto-run minor tweaks (user can review via log) 💬 AI Q&A: Ask things like “Why did conversions drop this week?” – get simple answers 🧰 Tech + UI Design Stack (suggested) Frontend: React + Tailwind (mobile-first, card-based UI) Backend: Node.js or Python Flask for API glue AI layer: GPT-4 API + Ads API + GA4 Data storage: Firebase or Supabase for small teams Tracking Integration: Google Ads API + GA4 conversions import 🎯 Final UX Principles Recap Principle Implementation Speak human, not marketer “Let’s grow your sales” instead of “Optimize ROAS” Conversational onboarding Chat-first setup with emojis and image-based questions Action-oriented reviews Always include 1 smart CTA after data Visual simplicity Cards, progress bars, no tables or dropdown hell Trust-building transparency Explain delays, AI choices, and results in human terms