485 lines
36 KiB
HTML
485 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FB Ads CSV Generator</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/css/styles.css">
|
|
</head>
|
|
<body>
|
|
<!-- Particle canvas background -->
|
|
<canvas id="particleCanvas"></canvas>
|
|
|
|
<!-- Top bar -->
|
|
<header class="top-bar">
|
|
<div class="flex items-center gap-3">
|
|
<div class="logo-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="url(#grad)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<defs><linearGradient id="grad" x1="2" y1="2" x2="22" y2="22"><stop stop-color="#f59e0b"/><stop offset="1" stop-color="#3b82f6"/></linearGradient></defs>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-lg font-bold text-white tracking-tight">FB Ads CSV Generator</h1>
|
|
<p class="text-xs text-gray-500">AI-Powered Niche Finder + Bulk Campaign Builder</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="status-badge" id="statusBadge">Ready</span>
|
|
<button class="btn-primary" onclick="exportSelectedCampaigns()">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
|
|
Export CSV
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════════════ -->
|
|
<!-- NICHE QUIZ SECTION -->
|
|
<!-- ═══════════════════════════════════════════════════════════════════════ -->
|
|
<section class="quiz-section" id="quizSection">
|
|
<!-- Step Indicator -->
|
|
<div class="quiz-step-indicator">
|
|
<div class="step-line">
|
|
<div class="step-line-fill" id="stepLineFill"></div>
|
|
</div>
|
|
<div class="step-dot active" id="stepDot1" data-step="1">
|
|
<span class="step-num">1</span>
|
|
<span class="step-label">Industry</span>
|
|
</div>
|
|
<div class="step-dot" id="stepDot2" data-step="2">
|
|
<span class="step-num">2</span>
|
|
<span class="step-label">Sub-Niche</span>
|
|
</div>
|
|
<div class="step-dot" id="stepDot3" data-step="3">
|
|
<span class="step-num">3</span>
|
|
<span class="step-label">Micro-Niche</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 1: Industry -->
|
|
<div class="quiz-step" id="quizStep1">
|
|
<div class="quiz-header">
|
|
<h2 class="quiz-title">What industry are you in?</h2>
|
|
<p class="quiz-subtitle">Select your broad market to get started</p>
|
|
</div>
|
|
<div class="industry-grid" id="industryGrid">
|
|
<button class="industry-card" data-industry="Health & Wellness" onclick="selectIndustry(this)">
|
|
<span class="industry-emoji">🏥</span><span class="industry-name">Health & Wellness</span>
|
|
</button>
|
|
<button class="industry-card" data-industry="Technology" onclick="selectIndustry(this)">
|
|
<span class="industry-emoji">💻</span><span class="industry-name">Technology</span>
|
|
</button>
|
|
<button class="industry-card" data-industry="Finance" onclick="selectIndustry(this)">
|
|
<span class="industry-emoji">💰</span><span class="industry-name">Finance</span>
|
|
</button>
|
|
<button class="industry-card" data-industry="Education" onclick="selectIndustry(this)">
|
|
<span class="industry-emoji">📚</span><span class="industry-name">Education</span>
|
|
</button>
|
|
<button class="industry-card" data-industry="Food & Beverage" onclick="selectIndustry(this)">
|
|
<span class="industry-emoji">🍕</span><span class="industry-name">Food & Beverage</span>
|
|
</button>
|
|
<button class="industry-card" data-industry="Real Estate" onclick="selectIndustry(this)">
|
|
<span class="industry-emoji">🏠</span><span class="industry-name">Real Estate</span>
|
|
</button>
|
|
<button class="industry-card" data-industry="Fashion" onclick="selectIndustry(this)">
|
|
<span class="industry-emoji">👗</span><span class="industry-name">Fashion</span>
|
|
</button>
|
|
<button class="industry-card" data-industry="Fitness" onclick="selectIndustry(this)">
|
|
<span class="industry-emoji">💪</span><span class="industry-name">Fitness</span>
|
|
</button>
|
|
<button class="industry-card" data-industry="Beauty" onclick="selectIndustry(this)">
|
|
<span class="industry-emoji">💄</span><span class="industry-name">Beauty</span>
|
|
</button>
|
|
<button class="industry-card" data-industry="E-commerce" onclick="selectIndustry(this)">
|
|
<span class="industry-emoji">🛒</span><span class="industry-name">E-commerce</span>
|
|
</button>
|
|
<button class="industry-card" data-industry="SaaS" onclick="selectIndustry(this)">
|
|
<span class="industry-emoji">☁️</span><span class="industry-name">SaaS</span>
|
|
</button>
|
|
<button class="industry-card" data-industry="Coaching/Consulting" onclick="selectIndustry(this)">
|
|
<span class="industry-emoji">🎯</span><span class="industry-name">Coaching / Consulting</span>
|
|
</button>
|
|
<button class="industry-card" data-industry="Home Services" onclick="selectIndustry(this)">
|
|
<span class="industry-emoji">🔧</span><span class="industry-name">Home Services</span>
|
|
</button>
|
|
<button class="industry-card" data-industry="Travel" onclick="selectIndustry(this)">
|
|
<span class="industry-emoji">✈️</span><span class="industry-name">Travel</span>
|
|
</button>
|
|
<button class="industry-card" data-industry="Entertainment" onclick="selectIndustry(this)">
|
|
<span class="industry-emoji">🎬</span><span class="industry-name">Entertainment</span>
|
|
</button>
|
|
<button class="industry-card other-card" data-industry="Other" onclick="selectIndustryOther(this)">
|
|
<span class="industry-emoji">✨</span><span class="industry-name">Other</span>
|
|
</button>
|
|
</div>
|
|
<div class="custom-input-row hidden" id="customIndustryRow">
|
|
<input type="text" class="field-input custom-industry-input" id="customIndustryInput" placeholder="Enter your industry...">
|
|
<button class="btn-primary" onclick="confirmCustomIndustry()">Continue →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2: Sub-niche -->
|
|
<div class="quiz-step hidden" id="quizStep2">
|
|
<div class="quiz-header">
|
|
<button class="quiz-back" onclick="goToStep(1)">← Back</button>
|
|
<h2 class="quiz-title">What's your specific area?</h2>
|
|
<p class="quiz-subtitle">Select a sub-niche within <span class="text-amber-400 font-bold" id="selectedIndustryLabel"></span></p>
|
|
</div>
|
|
<div class="niche-loading hidden" id="nicheLoading2">
|
|
<div class="ai-spinner"></div>
|
|
<p>AI is analyzing your industry...</p>
|
|
</div>
|
|
<div class="niche-grid" id="subNicheGrid"></div>
|
|
<div class="custom-input-row mt-4" id="customSubNicheRow">
|
|
<input type="text" class="field-input" id="customSubNicheInput" placeholder="Or type your own sub-niche...">
|
|
<button class="btn-primary" onclick="confirmCustomSubNiche()">Continue →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3: Micro-niche -->
|
|
<div class="quiz-step hidden" id="quizStep3">
|
|
<div class="quiz-header">
|
|
<button class="quiz-back" onclick="goToStep(2)">← Back</button>
|
|
<h2 class="quiz-title">Choose your micro-niche</h2>
|
|
<p class="quiz-subtitle">The ultra-specific niche that will crush on Facebook ads</p>
|
|
<div class="niche-breadcrumb">
|
|
<span id="breadcrumb1"></span> → <span id="breadcrumb2"></span> → <span class="text-amber-400">?</span>
|
|
</div>
|
|
</div>
|
|
<div class="niche-loading hidden" id="nicheLoading3">
|
|
<div class="ai-spinner"></div>
|
|
<p>AI is finding killer micro-niches...</p>
|
|
</div>
|
|
<div class="niche-grid" id="microNicheGrid"></div>
|
|
<div class="custom-input-row mt-4" id="customMicroNicheRow">
|
|
<input type="text" class="field-input" id="customMicroNicheInput" placeholder="Or type your own micro-niche...">
|
|
<button class="btn-primary" onclick="confirmCustomMicroNiche()">Lock it in →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quiz Complete -->
|
|
<div class="quiz-step hidden" id="quizComplete">
|
|
<div class="quiz-complete-card">
|
|
<div class="complete-icon">🎯</div>
|
|
<h2 class="quiz-title">Niche Locked In!</h2>
|
|
<div class="niche-path">
|
|
<span class="niche-path-item" id="finalIndustry"></span>
|
|
<span class="niche-path-arrow">→</span>
|
|
<span class="niche-path-item" id="finalSubNiche"></span>
|
|
<span class="niche-path-arrow">→</span>
|
|
<span class="niche-path-item highlight" id="finalMicroNiche"></span>
|
|
</div>
|
|
<div class="quiz-actions">
|
|
<button class="btn-generate-campaigns" onclick="generateParallelCampaigns()">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
|
Generate 10 Parallel Campaigns
|
|
</button>
|
|
<button class="btn-secondary" onclick="skipToManual()">
|
|
Build Manually Instead
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════════════ -->
|
|
<!-- PARALLEL CAMPAIGNS SECTION -->
|
|
<!-- ═══════════════════════════════════════════════════════════════════════ -->
|
|
<section class="campaigns-section hidden" id="campaignsSection">
|
|
<div class="campaigns-header">
|
|
<div>
|
|
<h2 class="campaigns-title">🚀 10 Parallel Campaigns</h2>
|
|
<p class="campaigns-subtitle">AI-generated sibling niches for <span class="text-amber-400" id="campaignsNicheLabel"></span></p>
|
|
</div>
|
|
<div class="campaigns-actions">
|
|
<button class="btn-generate-all" onclick="generateAllImages()" id="generateAllBtn">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
|
Generate All Images
|
|
</button>
|
|
<button class="btn-primary" onclick="exportSelectedCampaigns()">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
|
|
Export Selected
|
|
</button>
|
|
<button class="btn-secondary" onclick="toggleGalleryView()">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg>
|
|
<span id="galleryToggleLabel">Gallery View</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Generation Loading -->
|
|
<div class="generation-loading hidden" id="generationLoading">
|
|
<div class="gen-loader">
|
|
<div class="gen-loader-ring"></div>
|
|
<div class="gen-loader-ring"></div>
|
|
<div class="gen-loader-ring"></div>
|
|
</div>
|
|
<h3>Generating 10 parallel campaigns...</h3>
|
|
<p class="text-gray-500">AI is crafting unique ad angles for your niche</p>
|
|
</div>
|
|
|
|
<!-- Image Generation Progress -->
|
|
<div class="image-progress hidden" id="imageProgress">
|
|
<div class="progress-bar-container">
|
|
<div class="progress-bar-fill" id="progressBarFill"></div>
|
|
</div>
|
|
<p class="progress-text" id="progressText">Generating images: 0/0</p>
|
|
</div>
|
|
|
|
<!-- Campaign Cards Grid -->
|
|
<div class="campaign-cards-grid" id="campaignCardsGrid"></div>
|
|
|
|
<!-- Gallery View (Facebook Ad Previews) -->
|
|
<div class="gallery-view hidden" id="galleryView"></div>
|
|
|
|
<!-- CSV Preview Modal -->
|
|
<div class="csv-preview-section hidden" id="csvPreviewSection">
|
|
<div class="csv-preview-header">
|
|
<h3>📊 CSV Export Preview</h3>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-sm text-gray-400" id="csvExportRowCount"></span>
|
|
<button class="btn-primary" id="csvExportDownloadBtn" onclick="downloadExportCSV()">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
|
|
Download CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="csv-export-table-wrap" id="csvExportTableWrap"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════════════ -->
|
|
<!-- MANUAL CAMPAIGN BUILDER (original form, shown when skipping quiz) -->
|
|
<!-- ═══════════════════════════════════════════════════════════════════════ -->
|
|
<div class="manual-builder hidden" id="manualBuilder">
|
|
<main class="main-layout">
|
|
<!-- Left: Form -->
|
|
<div class="form-column" id="formColumn">
|
|
<!-- Campaign Section -->
|
|
<section class="form-card" id="campaignSection">
|
|
<div class="card-header" onclick="toggleSection('campaign')">
|
|
<div class="flex items-center gap-2">
|
|
<div class="section-icon campaign-icon">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"/></svg>
|
|
</div>
|
|
<h2 class="card-title">Campaign</h2>
|
|
</div>
|
|
<svg class="chevron w-5 h-5 text-gray-400 transition-transform" id="chevron-campaign" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
</div>
|
|
<div class="card-body" id="body-campaign">
|
|
<div class="field-grid">
|
|
<div class="field-group col-span-2">
|
|
<label class="field-label">Campaign Name <span class="req">*</span></label>
|
|
<input type="text" class="field-input" data-field="campaign_name" placeholder="e.g. Summer Sale 2025" oninput="updatePreview()">
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label">Objective <span class="req">*</span></label>
|
|
<select class="field-input" data-field="campaign_objective" onchange="updatePreview()">
|
|
<option value="OUTCOME_TRAFFIC">Traffic</option>
|
|
<option value="OUTCOME_SALES">Sales</option>
|
|
<option value="OUTCOME_LEADS">Leads</option>
|
|
<option value="OUTCOME_ENGAGEMENT">Engagement</option>
|
|
<option value="OUTCOME_APP_PROMOTION">App Promotion</option>
|
|
<option value="OUTCOME_AWARENESS">Awareness</option>
|
|
</select>
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label">Status</label>
|
|
<select class="field-input" data-field="campaign_status" onchange="updatePreview()">
|
|
<option value="PAUSED">Paused</option>
|
|
<option value="ACTIVE">Active</option>
|
|
</select>
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label">Buying Type</label>
|
|
<select class="field-input" data-field="buying_type">
|
|
<option value="AUCTION">Auction</option>
|
|
<option value="RESERVATION">Reservation</option>
|
|
</select>
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label">Budget Optimization (CBO)</label>
|
|
<select class="field-input" data-field="campaign_budget_optimization" onchange="toggleCBO(this.value)">
|
|
<option value="FALSE">Off</option>
|
|
<option value="TRUE">On</option>
|
|
</select>
|
|
</div>
|
|
<div class="field-group" id="cboBudgetGroup" style="display:none;">
|
|
<label class="field-label">Campaign Budget</label>
|
|
<input type="number" class="field-input" data-field="campaign_budget" placeholder="e.g. 50.00" step="0.01">
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label">Bid Strategy</label>
|
|
<select class="field-input" data-field="campaign_bid_strategy">
|
|
<option value="">— None —</option>
|
|
<option value="LOWEST_COST_WITHOUT_CAP">Lowest Cost</option>
|
|
<option value="LOWEST_COST_WITH_BID_CAP">Bid Cap</option>
|
|
<option value="COST_CAP">Cost Cap</option>
|
|
<option value="LOWEST_COST_WITH_MIN_ROAS">Min ROAS</option>
|
|
</select>
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label">Spend Limit</label>
|
|
<input type="number" class="field-input" data-field="campaign_spend_limit" placeholder="e.g. 1000.00" step="0.01">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Ad Set Section -->
|
|
<section class="form-card" id="adsetSection">
|
|
<div class="card-header" onclick="toggleSection('adset')">
|
|
<div class="flex items-center gap-2">
|
|
<div class="section-icon adset-icon">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
|
</div>
|
|
<h2 class="card-title">Ad Set</h2>
|
|
</div>
|
|
<svg class="chevron w-5 h-5 text-gray-400 transition-transform" id="chevron-adset" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
</div>
|
|
<div class="card-body" id="body-adset">
|
|
<div class="field-grid">
|
|
<div class="field-group col-span-2">
|
|
<label class="field-label">Ad Set Name <span class="req">*</span></label>
|
|
<input type="text" class="field-input" data-field="adset_name" placeholder="e.g. US 25-45 Interest Targeting" oninput="updatePreview()">
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label">Status</label>
|
|
<select class="field-input" data-field="adset_status">
|
|
<option value="PAUSED">Paused</option>
|
|
<option value="ACTIVE">Active</option>
|
|
</select>
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label">Optimization Goal</label>
|
|
<select class="field-input" data-field="optimization_goal">
|
|
<option value="">— None —</option>
|
|
<option value="LINK_CLICKS">Link Clicks</option>
|
|
<option value="LANDING_PAGE_VIEWS">Landing Page Views</option>
|
|
<option value="IMPRESSIONS">Impressions</option>
|
|
<option value="REACH">Reach</option>
|
|
<option value="LEAD_GENERATION">Lead Generation</option>
|
|
<option value="OFFSITE_CONVERSIONS">Conversions</option>
|
|
<option value="VALUE">Value</option>
|
|
<option value="APP_INSTALLS">App Installs</option>
|
|
<option value="CONVERSATIONS">Conversations</option>
|
|
</select>
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label">Daily Budget</label>
|
|
<input type="number" class="field-input" data-field="daily_budget" placeholder="e.g. 20.00" step="0.01">
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label">Lifetime Budget</label>
|
|
<input type="number" class="field-input" data-field="lifetime_budget" placeholder="e.g. 500.00" step="0.01">
|
|
</div>
|
|
</div>
|
|
<div class="sub-section">
|
|
<div class="sub-header" onclick="toggleSubSection('targeting')">
|
|
<span class="text-sm font-semibold text-blue-400">🎯 Targeting</span>
|
|
<svg class="chevron-sm w-4 h-4 text-gray-500" id="chevron-targeting" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
</div>
|
|
<div class="sub-body" id="body-targeting">
|
|
<div class="field-grid">
|
|
<div class="field-group"><label class="field-label">Age Min</label><input type="number" class="field-input" data-field="targeting_age_min" placeholder="18" min="13" max="65" value="18"></div>
|
|
<div class="field-group"><label class="field-label">Age Max</label><input type="number" class="field-input" data-field="targeting_age_max" placeholder="65" min="13" max="65" value="65"></div>
|
|
<div class="field-group"><label class="field-label">Gender</label><select class="field-input" data-field="targeting_genders"><option value="All">All</option><option value="Male">Male</option><option value="Female">Female</option></select></div>
|
|
<div class="field-group"><label class="field-label">Locations</label><input type="text" class="field-input" data-field="targeting_geo_locations" placeholder="US, CA, GB"></div>
|
|
<div class="field-group col-span-2"><label class="field-label">Interests</label><input type="text" class="field-input" data-field="targeting_interests" placeholder="Technology, Marketing, Startups"></div>
|
|
<div class="field-group col-span-2"><label class="field-label">Behaviors</label><input type="text" class="field-input" data-field="targeting_behaviors" placeholder="Small business owners"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Ads Container -->
|
|
<div id="adsContainer">
|
|
<section class="form-card ad-card" data-ad-index="0">
|
|
<div class="card-header" onclick="toggleSection('ad-0')">
|
|
<div class="flex items-center gap-2">
|
|
<div class="section-icon ad-icon">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
|
</div>
|
|
<h2 class="card-title">Ad Creative <span class="ad-number">#1</span></h2>
|
|
</div>
|
|
<svg class="chevron w-5 h-5 text-gray-400 transition-transform" id="chevron-ad-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
</div>
|
|
<div class="card-body" id="body-ad-0">
|
|
<div class="field-grid">
|
|
<div class="field-group col-span-2"><label class="field-label">Ad Name <span class="req">*</span></label><input type="text" class="field-input" data-field="ad_name" placeholder="e.g. Summer Sale - Image 1" oninput="updatePreview()"></div>
|
|
<div class="field-group"><label class="field-label">Status</label><select class="field-input" data-field="ad_status"><option value="PAUSED">Paused</option><option value="ACTIVE">Active</option></select></div>
|
|
<div class="field-group"><label class="field-label">Call to Action</label><select class="field-input" data-field="call_to_action" onchange="updatePreview()"><option value="">— None —</option><option value="LEARN_MORE">Learn More</option><option value="SHOP_NOW">Shop Now</option><option value="SIGN_UP">Sign Up</option><option value="DOWNLOAD">Download</option><option value="GET_QUOTE">Get Quote</option><option value="CONTACT_US">Contact Us</option><option value="BOOK_NOW">Book Now</option><option value="APPLY_NOW">Apply Now</option><option value="NO_BUTTON">No Button</option></select></div>
|
|
<div class="field-group col-span-2"><label class="field-label">Body Text</label><textarea class="field-input field-textarea" data-field="body" placeholder="Primary text..." rows="3" maxlength="2200" oninput="updatePreview(); updateCharCount(this)"></textarea><span class="char-count">0 / 2,200</span></div>
|
|
<div class="field-group"><label class="field-label">Headline</label><input type="text" class="field-input" data-field="title" placeholder="e.g. 50% Off Everything" maxlength="255" oninput="updatePreview()"></div>
|
|
<div class="field-group"><label class="field-label">Description</label><input type="text" class="field-input" data-field="caption" placeholder="Appears below the headline" maxlength="255" oninput="updatePreview()"></div>
|
|
<div class="field-group col-span-2"><label class="field-label">Link URL</label><input type="url" class="field-input" data-field="link" placeholder="https://example.com/landing-page" oninput="updatePreview()"></div>
|
|
</div>
|
|
<div class="ai-gen-section">
|
|
<div class="ai-gen-header"><span class="text-sm font-semibold text-amber-400">✨ AI Image Generation</span></div>
|
|
<div class="ai-gen-body">
|
|
<div class="flex gap-2">
|
|
<input type="text" class="field-input flex-1 ai-prompt-input" data-ai-prompt placeholder="Describe the ad image you want to generate...">
|
|
<button class="btn-generate" onclick="generateImage(this)" title="Generate Image">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
|
Generate
|
|
</button>
|
|
</div>
|
|
<div class="generated-images" data-generated-images></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<button class="btn-add-ad" onclick="addAd()">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
|
|
Add Another Ad
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Right: Preview -->
|
|
<div class="preview-column" id="previewColumn">
|
|
<div class="preview-tabs">
|
|
<button class="preview-tab active" data-tab="preview" onclick="switchTab('preview')">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
|
|
Ad Preview
|
|
</button>
|
|
<button class="preview-tab" data-tab="csv" onclick="switchTab('csv')">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7"/></svg>
|
|
CSV Preview
|
|
</button>
|
|
</div>
|
|
<div class="preview-panel" id="previewPanel">
|
|
<div class="fb-preview">
|
|
<div class="fb-header"><div class="fb-avatar"></div><div><div class="fb-page-name" id="previewPageName">Your Brand</div><div class="fb-sponsored">Sponsored · 🌐</div></div><div class="fb-dots">···</div></div>
|
|
<div class="fb-body" id="previewBody">Your ad text will appear here. Fill in the form to see a live preview.</div>
|
|
<div class="fb-image" id="previewImage"><div class="fb-image-placeholder"><svg class="w-12 h-12 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg><span class="text-gray-600 text-sm mt-2">Generate or add an image</span></div></div>
|
|
<div class="fb-link-bar"><div><div class="fb-display-link" id="previewDisplayLink">example.com</div><div class="fb-headline" id="previewHeadline">Your Headline Here</div><div class="fb-description" id="previewDescription">Your description text</div></div><button class="fb-cta-btn" id="previewCTA">Learn More</button></div>
|
|
<div class="fb-engagement"><span>👍 ❤️ 42</span><span>12 Comments · 5 Shares</span></div>
|
|
<div class="fb-actions"><button>👍 Like</button><button>💬 Comment</button><button>↗️ Share</button></div>
|
|
</div>
|
|
</div>
|
|
<div class="csv-panel hidden" id="csvPanel">
|
|
<div class="csv-empty" id="csvEmpty">
|
|
<svg class="w-16 h-16 text-gray-700 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7"/></svg>
|
|
<p class="text-gray-500 text-sm">Click <strong class="text-amber-400">Export CSV</strong> to generate</p>
|
|
</div>
|
|
<div class="csv-content hidden" id="csvContent">
|
|
<div class="csv-toolbar"><span class="text-xs text-gray-500" id="csvRowCount"></span><button class="btn-download" id="csvDownloadBtn" onclick="downloadCSV()"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>Download CSV</button></div>
|
|
<div class="csv-table-wrap" id="csvTableWrap"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Toast container -->
|
|
<div id="toastContainer" class="toast-container"></div>
|
|
|
|
<script src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|