Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI-Powered Meta Ads Intelligence & Optimization Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| /* Reset anchor text decoration */ | |
| a { text-decoration: none; } | |
| /* Custom Styles */ | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); | |
| } | |
| .glass-input { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| color: white; | |
| } | |
| .glass-input:focus { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: #a78bfa; | |
| outline: none; | |
| box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.2); | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .card-hover { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); | |
| } | |
| .metric-card { | |
| background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85)); | |
| } | |
| .ribbon { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 5px 15px; | |
| font-size: 0.8rem; | |
| font-weight: bold; | |
| border-bottom-left-radius: 10px; | |
| border-top-right-radius: 1.5rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 min-h-screen overflow-x-hidden text-white"> | |
| <nav class="fixed w-full z-50 glass-effect border-b border-white/10"> | |
| <div class="max-w-7xl mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3 cursor-pointer" onclick="openModule('home')"> | |
| <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center"> | |
| <span class="text-white font-bold text-xl">AI</span> | |
| </div> | |
| <span class="text-2xl font-bold gradient-text">MetaAds AI</span> | |
| </div> | |
| <div class="hidden xl:flex items-center space-x-6"> | |
| <a href="#gen-studio" class="text-white/70 hover:text-white transition-all text-sm font-medium" onclick="openModule('gen-studio')">Generation Studio</a> | |
| <a href="#modules" class="text-white/70 hover:text-white transition-all text-sm font-medium" onclick="openModule('modules')">Intelligence Modules</a> | |
| <a href="#ads-manager" class="text-white/70 hover:text-white transition-all text-sm font-medium" onclick="openModule('ads-manager')">Ads Manager</a> | |
| <a href="#content-studio" class="text-white/70 hover:text-white transition-all text-sm font-medium" onclick="openModule('content-studio')">Integrations</a> | |
| <a href="#pricing" class="text-white/70 hover:text-white transition-all text-sm font-medium" onclick="openModule('pricing')">Pricing</a> | |
| <a href="#account" class="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-all text-sm font-medium border border-white/20" onclick="openModule('account')"> | |
| My Account | |
| </a> | |
| </div> | |
| <button class="xl:hidden text-white" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <div id="mobile-menu" class="hidden xl:hidden mt-4 pb-4 space-y-3 bg-slate-900/90 p-4 rounded-xl border border-white/10"> | |
| <a href="#" class="block text-white/80 hover:text-white" onclick="openModule('gen-studio'); document.getElementById('mobile-menu').classList.add('hidden')">Generation Studio</a> | |
| <a href="#" class="block text-white/80 hover:text-white" onclick="openModule('modules'); document.getElementById('mobile-menu').classList.add('hidden')">Intelligence Modules</a> | |
| <a href="#" class="block text-white/80 hover:text-white" onclick="openModule('ads-manager'); document.getElementById('mobile-menu').classList.add('hidden')">Ads Manager</a> | |
| <a href="#" class="block text-white/80 hover:text-white" onclick="openModule('content-studio'); document.getElementById('mobile-menu').classList.add('hidden')">Integrations</a> | |
| <a href="#" class="block text-white/80 hover:text-white" onclick="openModule('pricing'); document.getElementById('mobile-menu').classList.add('hidden')">Pricing</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <section id="hero-section" class="pt-32 pb-24 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-pink-500/20 animate-pulse"></div> | |
| <div class="max-w-7xl mx-auto px-6 text-center relative z-10"> | |
| <h1 class="text-5xl md:text-7xl font-bold text-white mb-8 leading-tight"> | |
| AI-Powered Meta Ads | |
| <span class="block gradient-text text-6xl md:text-8xl">Intelligence Platform</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-white/80 max-w-3xl mx-auto mb-12 leading-relaxed"> | |
| Predict performance, spy on competitors, detect ad fatigue, and optimize copy with | |
| <span class="gradient-text font-semibold">enterprise-grade AI</span> | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center items-center max-w-2xl mx-auto"> | |
| <button onclick="openModule('pricing')" class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-12 py-4 rounded-2xl font-semibold text-lg card-hover shadow-2xl hover:shadow-purple-500/25 hover:scale-105 transition-all duration-300 border-0"> | |
| Get Started | |
| </button> | |
| <button onclick="openModule('modules')" class="border-2 border-white/30 text-white px-12 py-4 rounded-2xl font-semibold text-lg backdrop-blur-sm card-hover hover:border-white/50 transition-all duration-300"> | |
| Explore Modules | |
| </button> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-40 right-0 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl animate-float"></div> | |
| <div class="absolute -top-40 left-20 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl animate-pulse" style="animation-delay: -3s;"></div> | |
| </section> | |
| <section id="gen-studio" class="py-32 hidden relative"> | |
| <div class="max-w-5xl mx-auto px-6"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-5xl font-bold text-white mb-6 gradient-text">Content Generation Studio</h2> | |
| <p class="text-xl text-white/80">Create high-performing content for organic growth or paid scaling.</p> | |
| </div> | |
| <div class="glass-effect rounded-3xl border border-white/10 overflow-hidden"> | |
| <div class="flex border-b border-white/10"> | |
| <button onclick="switchGenTab('general')" id="tab-gen-general" class="flex-1 py-6 text-center text-lg font-bold text-white bg-white/10 border-b-2 border-blue-500 transition-all hover:bg-white/15"> | |
| 📝 General Post Creation | |
| </button> | |
| <button onclick="switchGenTab('paid')" id="tab-gen-paid" class="flex-1 py-6 text-center text-lg font-bold text-white/60 hover:text-white hover:bg-white/5 transition-all"> | |
| 🚀 Paid Post Creation | |
| </button> | |
| </div> | |
| <div class="p-10"> | |
| <div id="content-general" class="space-y-6"> | |
| <div class="bg-blue-500/10 border border-blue-500/20 p-4 rounded-xl mb-6"> | |
| <h4 class="text-blue-400 font-bold mb-1">Organic Growth Mode</h4> | |
| <p class="text-sm text-white/70">Optimized for engagement, shares, and community building.</p> | |
| </div> | |
| <div> | |
| <label class="block text-white/70 text-sm font-medium mb-2">Topic or Occasion</label> | |
| <input type="text" class="w-full glass-input rounded-xl px-4 py-3" placeholder="e.g. World Environment Day, New Team Member..."> | |
| </div> | |
| <div> | |
| <label class="block text-white/70 text-sm font-medium mb-2">Target Audience</label> | |
| <input type="text" class="w-full glass-input rounded-xl px-4 py-3" placeholder="e.g. Existing followers, Industry peers..."> | |
| </div> | |
| <button class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-bold py-4 rounded-xl shadow-lg hover:scale-[1.01] transition-all"> | |
| ✨ Generate General Caption | |
| </button> | |
| </div> | |
| <div id="content-paid" class="hidden space-y-6"> | |
| <div class="bg-purple-500/10 border border-purple-500/20 p-4 rounded-xl mb-6"> | |
| <h4 class="text-purple-400 font-bold mb-1">Paid Ad Scaling Mode</h4> | |
| <p class="text-sm text-white/70">Optimized for conversions, CTR, and ROAS.</p> | |
| </div> | |
| <div> | |
| <label class="block text-white/70 text-sm font-medium mb-2">Access Tocken</label> | |
| <input type="text" class="w-full glass-input rounded-xl px-4 py-3" placeholder="Enter Your Access Tocken here:"> | |
| </div> | |
| <br> | |
| <div> | |
| <label class="block text-white/70 text-sm font-medium mb-2">Seaech Related ADS</label> | |
| <input type="text" class="w-full glass-input rounded-xl px-4 py-3" placeholder="e.g: Laxmipati Saree"> | |
| </div> | |
| <br> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-white/70 text-sm font-medium mb-2">Product / Offer</label> | |
| <input type="text" class="w-full glass-input rounded-xl px-4 py-3" placeholder="e.g. 50% Off Summer Sale"> | |
| </div> | |
| <div> | |
| <label class="block text-white/70 text-sm font-medium mb-2">Campaign Objective</label> | |
| <select class="w-full glass-input rounded-xl px-4 py-3 bg-slate-800"> | |
| <option>Sales (Conversion)</option> | |
| <option>Leads</option> | |
| <option>Traffic</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-white/70 text-sm font-medium mb-2">Key Selling Points</label> | |
| <textarea class="w-full glass-input rounded-xl px-4 py-3 h-24 resize-none" placeholder="Free shipping, Limited time, Best seller..."></textarea> | |
| </div> | |
| <button class="w-full bg-gradient-to-r from-purple-500 to-pink-600 text-white font-bold py-4 rounded-xl shadow-lg hover:scale-[1.01] transition-all"> | |
| 💰 Generate Ad Caption | |
| </button> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-white/10"> | |
| <label class="block text-white/70 text-sm font-medium mb-2">Generated Output</label> | |
| <div class="bg-black/30 rounded-xl p-6 min-h-[150px] border border-white/5 text-white/60 italic flex items-center justify-center"> | |
| AI generated content will appear here... | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="modules" class="py-16 relative"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-6xl font-bold text-white mb-6">4 Powerful AI Modules</h2> | |
| <p class="text-xl text-white/80 max-w-2xl mx-auto">All integrated into one seamless platform</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="group card-hover glass-effect rounded-3xl p-10 h-64 flex flex-col justify-between cursor-pointer" onclick="openModule('predictor')"> | |
| <div class="w-20 h-20 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"> | |
| <span class="text-3xl">🎯</span> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Ad Predictor</h3> | |
| <p class="text-white/70 text-lg">Score ads before launch</p> | |
| </div> | |
| </div> | |
| <div class="group card-hover glass-effect rounded-3xl p-10 h-64 flex flex-col justify-between cursor-pointer" onclick="openModule('competitors')"> | |
| <div class="w-20 h-20 bg-gradient-to-r from-green-500 to-green-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"> | |
| <span class="text-3xl">🕵️</span> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Competitor Intel</h3> | |
| <p class="text-white/70 text-lg">Spy on winning strategies</p> | |
| </div> | |
| </div> | |
| <div class="group card-hover glass-effect rounded-3xl p-10 h-64 flex flex-col justify-between cursor-pointer" onclick="openModule('fatigue')"> | |
| <div class="w-20 h-20 bg-gradient-to-r from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"> | |
| <span class="text-3xl">📉</span> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Fatigue Detector</h3> | |
| <p class="text-white/70 text-lg">Prevent performance drops</p> | |
| </div> | |
| </div> | |
| <div class="group card-hover glass-effect rounded-3xl p-10 h-64 flex flex-col justify-between cursor-pointer" onclick="openModule('optimizer')"> | |
| <div class="w-20 h-20 bg-gradient-to-r from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"> | |
| <span class="text-3xl">✨</span> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Copy Optimizer</h3> | |
| <p class="text-white/70 text-lg">Generate converting copy</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="content-studio" class="py-32 hidden relative"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-5xl font-bold text-white mb-6 gradient-text">Platform Integrations</h2> | |
| <p class="text-xl text-white/80">How we layer intelligence on top of the Meta ecosystem</p> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-8"> | |
| <div class="glass-effect rounded-3xl p-8 border border-white/10 hover:border-blue-400/30 transition-all group"> | |
| <h3 class="text-2xl font-bold text-white mb-6 flex items-center"> | |
| <span class="bg-blue-600/20 p-2 rounded-lg mr-3">1️⃣</span> | |
| Meta Business Suite × Your Platform | |
| </h3> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div class="bg-red-500/10 p-4 rounded-xl border border-red-500/20"> | |
| <div class="text-red-400 font-bold text-sm mb-2 uppercase">🔍 Meta Limitation</div> | |
| <ul class="text-white/70 text-sm space-y-2"> | |
| <li>• Shows past performance</li> | |
| <li>• Manual insights</li> | |
| <li>• No predictive intelligence</li> | |
| </ul> | |
| </div> | |
| <div class="bg-green-500/10 p-4 rounded-xl border border-green-500/20"> | |
| <div class="text-green-400 font-bold text-sm mb-2 uppercase">✅ Platform Adds</div> | |
| <ul class="text-white/70 text-sm space-y-2"> | |
| <li>• Ad Performance Predictor</li> | |
| <li>• Content scoring</li> | |
| <li>• Audience–Creative fit insights</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-white/5 p-4 rounded-xl border-l-4 border-blue-500"> | |
| <p class="text-white/90 italic mb-2">“Before scheduling content, I already know which post will perform better.”</p> | |
| <div class="text-xs text-white/50"><strong class="text-white">Use Case:</strong> Brand uploads caption → AI scores it → only top-performing content is scheduled.</div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-3xl p-8 border border-purple-500/50 shadow-lg shadow-purple-500/10 relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-bl-xl">BIGGEST VALUE</div> | |
| <h3 class="text-2xl font-bold text-white mb-6 flex items-center"> | |
| <span class="bg-purple-600/20 p-2 rounded-lg mr-3">2️⃣</span> | |
| Meta Ads Manager × Your Platform | |
| </h3> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div class="bg-red-500/10 p-4 rounded-xl border border-red-500/20"> | |
| <div class="text-red-400 font-bold text-sm mb-2 uppercase">🔍 Meta Limitation</div> | |
| <ul class="text-white/70 text-sm space-y-2"> | |
| <li>• Optimization after spending</li> | |
| <li>• No fatigue prediction</li> | |
| <li>• No emotional scoring</li> | |
| </ul> | |
| </div> | |
| <div class="bg-green-500/10 p-4 rounded-xl border border-green-500/20"> | |
| <div class="text-green-400 font-bold text-sm mb-2 uppercase">✅ Platform Adds</div> | |
| <ul class="text-white/70 text-sm space-y-2"> | |
| <li>• Pre-launch ad score (0–100)</li> | |
| <li>• Risk Level Assessment</li> | |
| <li>• AI copy improvements</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-white/5 p-4 rounded-xl border-l-4 border-purple-500"> | |
| <p class="text-white/90 italic mb-2">“I stopped burning budget on bad ads.”</p> | |
| <div class="text-xs text-white/50"><strong class="text-white">Use Case:</strong> Marketer drafts ad → runs Predictor → improves copy → launches via Ads Manager.</div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-3xl p-8 border border-white/10 hover:border-blue-400/30 transition-all"> | |
| <h3 class="text-2xl font-bold text-white mb-6 flex items-center"> | |
| <span class="bg-blue-600/20 p-2 rounded-lg mr-3">3️⃣</span> | |
| Meta Pixel × Your Platform | |
| </h3> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div class="bg-red-500/10 p-4 rounded-xl border border-red-500/20"> | |
| <div class="text-red-400 font-bold text-sm mb-2 uppercase">🔍 Meta Limitation</div> | |
| <ul class="text-white/70 text-sm space-y-2"> | |
| <li>• Raw conversion data</li> | |
| <li>• No "Why" intelligence</li> | |
| </ul> | |
| </div> | |
| <div class="bg-green-500/10 p-4 rounded-xl border border-green-500/20"> | |
| <div class="text-green-400 font-bold text-sm mb-2 uppercase">✅ Platform Adds</div> | |
| <ul class="text-white/70 text-sm space-y-2"> | |
| <li>• Feature learning from data</li> | |
| <li>• Creative-conversion correlation</li> | |
| <li>• Emotion → Conversion map</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-white/5 p-4 rounded-xl border-l-4 border-blue-500"> | |
| <p class="text-white/90 italic mb-2">“Happy + Urgency emotions convert best in India for my niche.”</p> | |
| <div class="text-xs text-white/50"><strong class="text-white">Use Case:</strong> Pixel data feeds ML model → improves prediction accuracy.</div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-3xl p-8 border border-white/10 hover:border-blue-400/30 transition-all"> | |
| <h3 class="text-2xl font-bold text-white mb-6 flex items-center"> | |
| <span class="bg-blue-600/20 p-2 rounded-lg mr-3">4️⃣</span> | |
| Creative Shop × Your Platform | |
| </h3> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div class="bg-red-500/10 p-4 rounded-xl border border-red-500/20"> | |
| <div class="text-red-400 font-bold text-sm mb-2 uppercase">🔍 Meta Limitation</div> | |
| <ul class="text-white/70 text-sm space-y-2"> | |
| <li>• Inspiration-based</li> | |
| <li>• Generic best practices</li> | |
| </ul> | |
| </div> | |
| <div class="bg-green-500/10 p-4 rounded-xl border border-green-500/20"> | |
| <div class="text-green-400 font-bold text-sm mb-2 uppercase">✅ Platform Adds</div> | |
| <ul class="text-white/70 text-sm space-y-2"> | |
| <li>• Competitor Ad Intelligence</li> | |
| <li>• Trending keywords by niche</li> | |
| <li>• Theme fatigue alerts</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-white/5 p-4 rounded-xl border-l-4 border-blue-500"> | |
| <p class="text-white/90 italic mb-2">“I know what’s working in my niche right now — not last year.”</p> | |
| <div class="text-xs text-white/50"><strong class="text-white">Use Case:</strong> User enters industry → tool shows Top Creatives, CTAs, Trends.</div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-3xl p-8 border border-white/10 hover:border-blue-400/30 transition-all"> | |
| <h3 class="text-xl font-bold text-white mb-6 flex items-center"><span class="mr-2">5️⃣</span> Brand Collabs Manager × Your Platform</h3> | |
| <div class="text-sm text-white/70 mb-4"> | |
| <span class="text-green-400 font-bold">Adds:</span> Creator caption analysis, Influencer content emotion scoring, Campaign risk assessment. | |
| </div> | |
| <p class="text-white/90 italic text-sm">“I choose creators based on predicted ROI, not followers.”</p> | |
| </div> | |
| <div class="glass-effect rounded-3xl p-8 border border-white/10 hover:border-blue-400/30 transition-all"> | |
| <h3 class="text-xl font-bold text-white mb-6 flex items-center"><span class="mr-2">6️⃣</span> Commerce Manager × Your Platform</h3> | |
| <div class="text-sm text-white/70 mb-4"> | |
| <span class="text-green-400 font-bold">Adds:</span> Product-specific ad copy optimization, Price sensitivity insights. | |
| </div> | |
| <p class="text-white/90 italic text-sm">“This product needs urgency ads, not discount ads.”</p> | |
| </div> | |
| <div class="glass-effect rounded-3xl p-8 border border-white/10 hover:border-blue-400/30 transition-all"> | |
| <h3 class="text-xl font-bold text-white mb-6 flex items-center"><span class="mr-2">7️⃣</span> Audience Network × Your Platform</h3> | |
| <div class="text-sm text-white/70 mb-4"> | |
| <span class="text-green-400 font-bold">Adds:</span> Platform-specific copy adaptation, Tone adjustment per region. | |
| </div> | |
| <p class="text-white/90 italic text-sm">“Same ad, different tone — higher CTR everywhere.”</p> | |
| </div> | |
| <div class="glass-effect rounded-3xl p-8 border border-white/10 hover:border-blue-400/30 transition-all"> | |
| <h3 class="text-xl font-bold text-white mb-6 flex items-center"><span class="mr-2">8️⃣</span> Advanced Analytics × Your Platform</h3> | |
| <div class="text-sm text-white/70 mb-4"> | |
| <span class="text-green-400 font-bold">Adds:</span> AI-powered A/B prediction, Creative winner forecasting, Explainable AI. | |
| </div> | |
| <p class="text-white/90 italic text-sm">“I know the winner before spending money.”</p> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-white/5 rounded-3xl p-10 border border-white/10"> | |
| <h3 class="text-3xl font-bold text-white mb-8 text-center">🚀 Advanced Intelligence Features</h3> | |
| <div class="grid md:grid-cols-3 lg:grid-cols-5 gap-6 text-center"> | |
| <div class="p-4 bg-black/20 rounded-xl"> | |
| <div class="text-2xl mb-2">🎯</div> | |
| <div class="font-bold text-white text-sm">Creative-Audience Match Score</div> | |
| </div> | |
| <div class="p-4 bg-black/20 rounded-xl"> | |
| <div class="text-2xl mb-2">🕵️</div> | |
| <div class="font-bold text-white text-sm">Meta Ad Library Analyzer</div> | |
| </div> | |
| <div class="p-4 bg-black/20 rounded-xl"> | |
| <div class="text-2xl mb-2">💸</div> | |
| <div class="font-bold text-white text-sm">AI Spend Waste Detector</div> | |
| </div> | |
| <div class="p-4 bg-black/20 rounded-xl"> | |
| <div class="text-2xl mb-2">📢</div> | |
| <div class="font-bold text-white text-sm">Brand Voice Memory</div> | |
| </div> | |
| <div class="p-4 bg-black/20 rounded-xl"> | |
| <div class="text-2xl mb-2">📊</div> | |
| <div class="font-bold text-white text-sm">Explainable AI Dashboard</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="predictor" class="py-32 hidden relative"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center mb-16"> | |
| <div> | |
| <h2 class="text-5xl font-bold text-white mb-6 gradient-text">Ad Performance Predictor</h2> | |
| <p class="text-xl text-white/80 mb-8">Get instant AI-powered performance predictions before launching your ads</p> | |
| <div class="space-y-4 mb-12"> | |
| <div class="flex items-center space-x-4 text-white/70"> | |
| <div class="w-2 h-2 bg-green-400 rounded-full"></div> | |
| <span>Performance Score (0-100)</span> | |
| </div> | |
| <div class="flex items-center space-x-4 text-white/70"> | |
| <div class="w-2 h-2 bg-yellow-400 rounded-full"></div> | |
| <span>Risk Level Assessment</span> | |
| </div> | |
| <div class="flex items-center space-x-4 text-white/70"> | |
| <div class="w-2 h-2 bg-blue-400 rounded-full"></div> | |
| <span>Optimization Recommendations</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="metric-card rounded-3xl p-10 shadow-2xl"> | |
| <div id="prediction-results" class="space-y-6 hidden"> | |
| <div class="grid grid-cols-3 gap-6"> | |
| <div class="text-center p-6 rounded-2xl bg-gradient-to-br from-green-400/10 to-green-500/10 border border-green-400/30"> | |
| <div class="text-4xl font-bold text-green-400 mb-2" id="perf-score">92</div> | |
| <div class="text-sm font-semibold text-green-300 uppercase tracking-wide">Score</div> | |
| </div> | |
| <div class="text-center p-6 rounded-2xl bg-gradient-to-br from-blue-400/10 to-blue-500/10 border border-blue-400/30"> | |
| <div class="text-4xl font-bold text-blue-400 mb-2" id="risk-level">LOW</div> | |
| <div class="text-sm font-semibold text-blue-300 uppercase tracking-wide">Risk</div> | |
| </div> | |
| <div class="text-center p-6 rounded-2xl bg-gradient-to-br from-purple-400/10 to-purple-500/10 border border-purple-400/30"> | |
| <div class="text-3xl font-bold text-purple-400 mb-2" id="confidence">94%</div> | |
| <div class="text-sm font-semibold text-purple-300 uppercase tracking-wide">Confidence</div> | |
| </div> | |
| </div> | |
| <canvas id="perfChart" height="200"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="metric-card rounded-3xl p-12 max-w-2xl mx-auto"> | |
| <h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">Analyze Your Ad</h3> | |
| <form id="predictor-form" class="space-y-6"> | |
| <div> | |
| <label class="block text-lg font-semibold text-gray-900 mb-3">Ad Copy</label> | |
| <textarea id="ad-copy" rows="4" class="w-full p-6 rounded-2xl border-2 border-gray-200/50 focus:border-blue-400 focus:ring-4 focus:ring-blue-400/20 resize-vertical text-lg font-medium bg-white" placeholder="Enter your ad primary text...">Get 50% OFF your first order! Limited time offer. Fast shipping worldwide. Join 10K+ happy customers today!</textarea> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div> | |
| <label class="block text-lg font-semibold text-gray-900 mb-2">CTA</label> | |
| <select id="cta" class="w-full p-4 rounded-xl border-2 border-gray-200/50 focus:border-blue-400 focus:ring-4 focus:ring-blue-400/20 text-lg bg-white"> | |
| <option>Shop Now</option> | |
| <option>Learn More</option> | |
| <option>Get Offer</option> | |
| <option>Sign Up</option> | |
| </select> | |
| </div> | |
| <div class="col-span-3 flex items-end"> | |
| <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 px-6 rounded-2xl font-bold text-lg shadow-xl hover:shadow-purple-500/25 hover:scale-105 transition-all duration-300"> | |
| Predict Performance | |
| </button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="competitors" class="py-32 hidden bg-white/5 backdrop-blur-sm"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="text-center mb-24"> | |
| <h2 class="text-5xl font-bold text-white mb-6 gradient-text">Competitor Ad Intelligence</h2> | |
| <p class="text-xl text-white/80 max-w-3xl mx-auto">Real-time insights into competitor strategies across 100M+ ads</p> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-12"> | |
| <div class="space-y-8"> | |
| <div class="metric-card rounded-3xl p-8"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Top Keywords</h3> | |
| <div id="top-keywords" class="grid grid-cols-2 md:grid-cols-3 gap-4"></div> | |
| </div> | |
| <div class="metric-card rounded-3xl p-8"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">CTA Frequency</h3> | |
| <canvas id="ctaChart" height="300"></canvas> | |
| </div> | |
| </div> | |
| <div class="space-y-8"> | |
| <div class="metric-card rounded-3xl p-8"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Creative Formats Used</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-6"> | |
| <div class="text-center p-6 rounded-2xl hover:bg-blue-50/50 cursor-pointer transition-colors"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl mx-auto mb-4 flex items-center justify-center"> | |
| <svg class="w-8 h-8 text-white" 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"></path></svg> | |
| </div> | |
| <div class="font-bold text-xl text-gray-900 mb-1">Video</div> | |
| <div class="text-sm text-gray-600">67%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="fatigue" class="py-32 hidden"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="text-center mb-24"> | |
| <h2 class="text-5xl font-bold text-white mb-6 gradient-text">Ad Fatigue Detector</h2> | |
| <div class="grid lg:grid-cols-2 gap-12 mt-12"> | |
| <div class="metric-card rounded-3xl p-12"> | |
| <h3 class="text-3xl font-bold text-gray-900 mb-8">Fatigue Score</h3> | |
| <canvas id="fatigueChart" height="400"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="optimizer" class="py-32 hidden bg-white/5 backdrop-blur-sm"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="text-center mb-24"> | |
| <h2 class="text-5xl font-bold text-white mb-6 gradient-text">AI Ad Copy Optimizer</h2> | |
| <div class="metric-card rounded-3xl p-12 max-w-4xl mx-auto mt-12"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-start"> | |
| <div> | |
| <h3 class="text-3xl font-bold text-gray-900 mb-8">Original Copy</h3> | |
| <div class="bg-gray-50/50 p-8 rounded-2xl border-2 border-gray-200/50 min-h-[300px]"> | |
| <textarea id="original-copy" rows="12" class="w-full bg-transparent border-none outline-none text-lg font-medium text-gray-900 resize-none">Get 50% OFF your first order! Limited time offer. Fast shipping worldwide. Join 10K+ happy customers today! Don't miss out on this incredible deal.</textarea> | |
| </div> | |
| <button onclick="optimizeCopy()" class="mt-6 w-full bg-gradient-to-r from-purple-500 to-pink-600 text-white py-4 px-8 rounded-2xl font-bold text-lg shadow-xl hover:shadow-purple-500/25 hover:scale-105 transition-all duration-300"> | |
| ✨ Optimize with AI | |
| </button> | |
| </div> | |
| <div> | |
| <h3 class="text-3xl font-bold text-gray-900 mb-8">AI Optimized Copy</h3> | |
| <div id="optimized-copy" class="bg-gradient-to-br from-emerald-50 to-green-50/50 p-8 rounded-2xl border-2 border-emerald-200/50 min-h-[300px] hidden"> | |
| <div class="space-y-6"> | |
| <div> | |
| <div class="font-bold text-2xl text-emerald-800 mb-2 leading-tight">🎉 50% OFF Your First Order - Limited Spots!</div> | |
| <div class="text-sm text-emerald-700 bg-emerald-200/50 px-4 py-2 rounded-xl inline-block">Primary Text</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="ads-manager" class="py-32 hidden relative"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-5xl font-bold text-white mb-6 gradient-text">Meta Ads Campaign Manager</h2> | |
| <p class="text-xl text-white/80">Manage your active campaigns and view real-time performance</p> | |
| </div> | |
| <div class="glass-effect rounded-3xl p-8 border border-white/10"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h3 class="text-2xl font-bold text-white">Active Campaigns</h3> | |
| <button class="bg-blue-600 hover:bg-blue-500 text-white px-6 py-2 rounded-xl transition flex items-center"> | |
| <span class="mr-2">+</span> Create Campaign | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-left text-white/80"> | |
| <thead class="bg-white/5 text-white uppercase text-sm font-semibold"> | |
| <tr> | |
| <th class="p-4 rounded-tl-xl">Campaign Name</th> | |
| <th class="p-4">Status</th> | |
| <th class="p-4">Spend</th> | |
| <th class="p-4">Reach</th> | |
| <th class="p-4">Results</th> | |
| <th class="p-4 rounded-tr-xl">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-white/10"> | |
| <tr class="hover:bg-white/5 transition"> | |
| <td class="p-4 font-medium text-white">Summer Sale - Awareness</td> | |
| <td class="p-4"><span class="bg-green-500/20 text-green-400 px-3 py-1 rounded-full text-xs font-bold">Active</span></td> | |
| <td class="p-4">$1,240</td> | |
| <td class="p-4">45,000</td> | |
| <td class="p-4">120 Leads</td> | |
| <td class="p-4"><button class="text-blue-400 hover:text-blue-300">Edit</button></td> | |
| </tr> | |
| <tr class="hover:bg-white/5 transition"> | |
| <td class="p-4 font-medium text-white">Retargeting - Cart Abandon</td> | |
| <td class="p-4"><span class="bg-green-500/20 text-green-400 px-3 py-1 rounded-full text-xs font-bold">Active</span></td> | |
| <td class="p-4">$850</td> | |
| <td class="p-4">12,500</td> | |
| <td class="p-4">45 Sales</td> | |
| <td class="p-4"><button class="text-blue-400 hover:text-blue-300">Edit</button></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="pricing" class="py-32 hidden relative"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-5xl font-bold text-white mb-6 gradient-text">Simple, Transparent Pricing</h2> | |
| <p class="text-xl text-white/80">Choose the plan that fits your scaling needs</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="glass-effect rounded-3xl p-8 card-hover relative flex flex-col"> | |
| <h3 class="text-2xl font-bold text-white mb-2">Basic</h3> | |
| <div class="text-4xl font-bold text-white mb-6">$0<span class="text-lg text-white/60 font-normal">/mo</span></div> | |
| <ul class="text-white/80 space-y-4 mb-8 flex-grow"> | |
| <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> 5 Ad Predictions / mo</li> | |
| <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Basic Copy Optimizer</li> | |
| <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> 1 User Account</li> | |
| <li class="flex items-center text-white/40"><span class="mr-2">×</span> Competitor Intel</li> | |
| </ul> | |
| <button class="w-full py-3 rounded-xl border border-white/30 text-white font-semibold hover:bg-white/10 transition">Select Basic</button> | |
| </div> | |
| <div class="metric-card rounded-3xl p-8 card-hover relative transform scale-105 z-10 flex flex-col shadow-2xl shadow-purple-500/20"> | |
| <div class="ribbon">MOST POPULAR</div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-2">Standard</h3> | |
| <div class="text-4xl font-bold text-gray-900 mb-6 gradient-text">$49<span class="text-lg text-gray-500 font-normal">/mo</span></div> | |
| <ul class="text-gray-600 space-y-4 mb-8 flex-grow"> | |
| <li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Unlimited Ad Predictions</li> | |
| <li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Advanced Copy AI</li> | |
| <li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Competitor Intelligence</li> | |
| <li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Fatigue Alerts</li> | |
| </ul> | |
| <button class="w-full py-3 rounded-xl bg-gradient-to-r from-blue-500 to-purple-600 text-white font-bold shadow-lg hover:shadow-xl transition">Select Standard</button> | |
| </div> | |
| <div class="glass-effect rounded-3xl p-8 card-hover relative flex flex-col"> | |
| <h3 class="text-2xl font-bold text-white mb-2">Enterprise</h3> | |
| <div class="text-4xl font-bold text-white mb-6">Custom</div> | |
| <ul class="text-white/80 space-y-4 mb-8 flex-grow"> | |
| <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Everything in Standard</li> | |
| <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Dedicated Account Manager</li> | |
| <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Custom API Integration</li> | |
| </ul> | |
| <button class="w-full py-3 rounded-xl border border-white/30 text-white font-semibold hover:bg-white/10 transition">Contact Sales</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="account" class="py-32 hidden relative"> | |
| <div class="max-w-4xl mx-auto px-6"> | |
| <div class="glass-effect rounded-3xl p-10 md:p-14 border border-white/20 shadow-2xl"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center mr-4"> | |
| <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg> | |
| </div> | |
| <h2 class="text-3xl font-bold text-white">Account Settings</h2> | |
| </div> | |
| <a href="#login" class="text-white/70 hover:text-white text-sm font-medium transition flex items-center gap-2"> | |
| <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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg> | |
| Sign Out | |
| </a> | |
| </div> | |
| <form id="account-form" class="space-y-6"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-white/70 text-sm font-medium mb-2">First Name</label> | |
| <input type="text" id="first-name" class="w-full glass-input rounded-xl px-4 py-3 transition" placeholder="John"> | |
| </div> | |
| <div> | |
| <label class="block text-white/70 text-sm font-medium mb-2">Last Name</label> | |
| <input type="text" id="last-name" class="w-full glass-input rounded-xl px-4 py-3 transition" placeholder="Doe"> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-white/70 text-sm font-medium mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full glass-input rounded-xl px-4 py-3 transition" placeholder="john@company.com"> | |
| </div> | |
| <div> | |
| <label class="block text-white/70 text-sm font-medium mb-2">Mobile Number</label> | |
| <input type="tel" id="mobile" class="w-full glass-input rounded-xl px-4 py-3 transition" placeholder="+1 (555) 000-0000"> | |
| </div> | |
| </div> | |
| <div class="border-t border-white/10 pt-6 mt-6"> | |
| <h3 class="text-xl font-semibold text-white mb-4">Connected Accounts</h3> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <button type="button" class="flex items-center justify-center gap-3 w-full glass-input hover:bg-white/10 rounded-xl px-4 py-3 transition text-white"> | |
| <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z"/></svg> | |
| Connect Google | |
| </button> | |
| <button type="button" class="flex items-center justify-center gap-3 w-full glass-input hover:bg-white/10 rounded-xl px-4 py-3 transition text-white"> | |
| <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg> | |
| Connect GitHub | |
| </button> | |
| </div> | |
| </div> | |
| <div class="border-t border-white/10 pt-6 mt-6"> | |
| <h3 class="text-xl font-semibold text-white mb-4">Meta Integration</h3> | |
| <div> | |
| <label class="block text-white/70 text-sm font-medium mb-2">Meta Access Token</label> | |
| <div class="relative"> | |
| <input type="password" id="meta-token" class="w-full glass-input rounded-xl px-4 py-3 transition pr-10" placeholder="EAA..."> | |
| <button type="button" class="absolute right-3 top-3.5 text-white/40 hover:text-white"> | |
| <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><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"></path></svg> | |
| </button> | |
| </div> | |
| <p class="text-xs text-white/40 mt-2">Your access token is encrypted and stored securely.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between pt-6"> | |
| <div class="text-sm"> | |
| <span class="text-white/50">Not you?</span> | |
| <a href="#login" class="text-blue-400 hover:text-blue-300 font-medium ml-1">Log in as different user</a> | |
| </div> | |
| <button type="submit" class="px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-bold rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-200"> | |
| Save Changes | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- <script> | |
| document.getElementById("account-form").addEventListener("submit", function (e) { | |
| e.preventDefault(); | |
| const payload = { | |
| first_name: document.getElementById("first-name").value, | |
| last_name: document.getElementById("last-name").value, | |
| email: document.getElementById("email").value, | |
| mobile: document.getElementById("mobile").value, | |
| meta_token: document.getElementById("meta-token").value | |
| }; | |
| // Create a Blob from the JSON data | |
| const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(payload)); | |
| // Create a temporary hidden link element to trigger the download | |
| const downloadAnchorNode = document.createElement('a'); | |
| downloadAnchorNode.setAttribute("href", dataStr); | |
| downloadAnchorNode.setAttribute("download", "account_settings.json"); | |
| document.body.appendChild(downloadAnchorNode); // required for firefox | |
| downloadAnchorNode.click(); | |
| downloadAnchorNode.remove(); | |
| }); | |
| </script> | |
| <script> | |
| document.getElementById("account-form").addEventListener("submit", async function (e) { | |
| e.preventDefault(); | |
| const payload = { | |
| first_name: document.querySelector('input[placeholder="John"]').value, | |
| last_name: document.querySelector('input[placeholder="Doe"]').value, | |
| email: document.querySelector('input[type="email"]').value, | |
| mobile: document.querySelector('input[type="tel"]').value, | |
| meta_token: document.getElementById("meta-token").value | |
| }; | |
| const response = await fetch("http://127.0.0.1:8000/account/save", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify(payload) | |
| }); | |
| const result = await response.json(); | |
| if (response.ok) { | |
| alert("Profile saved successfully!"); | |
| } else { | |
| alert(result.detail || "Error saving profile"); | |
| } | |
| }); | |
| </script> --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| // Smooth scrolling and module navigation | |
| function openModule(moduleId) { | |
| // Define all modules (ID list) | |
| const modules = [ | |
| 'gen-studio', | |
| 'modules', | |
| 'ads-manager', | |
| 'content-studio', | |
| 'predictor', | |
| 'competitors', | |
| 'fatigue', | |
| 'optimizer', | |
| 'pricing', | |
| 'account' | |
| ]; | |
| if (moduleId === 'home') { | |
| document.getElementById('hero-section').classList.remove('hidden'); | |
| document.getElementById('modules').classList.remove('hidden'); | |
| // Hide all other modules | |
| modules.forEach(id => { | |
| const el = document.getElementById(id); | |
| if(el) el.classList.add('hidden'); | |
| }); | |
| window.scrollTo({top: 0, behavior: 'smooth'}); | |
| return; | |
| } | |
| // Hide hero | |
| document.getElementById('hero-section').classList.add('hidden'); | |
| // Hide all modules | |
| modules.forEach(id => { | |
| const el = document.getElementById(id); | |
| if(el) el.classList.add('hidden'); | |
| }); | |
| // Show selected section | |
| const target = document.getElementById(moduleId); | |
| if (target) { | |
| target.classList.remove('hidden'); | |
| target.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| } | |
| // Tab Switching Logic for Generation Studio | |
| function switchGenTab(tab) { | |
| const generalBtn = document.getElementById('tab-gen-general'); | |
| const paidBtn = document.getElementById('tab-gen-paid'); | |
| const contentGeneral = document.getElementById('content-general'); | |
| const contentPaid = document.getElementById('content-paid'); | |
| if (tab === 'general') { | |
| // Styling | |
| generalBtn.classList.add('border-b-2', 'border-blue-500', 'bg-white/10', 'text-white'); | |
| generalBtn.classList.remove('text-white/60'); | |
| paidBtn.classList.remove('border-b-2', 'border-blue-500', 'bg-white/10', 'text-white'); | |
| paidBtn.classList.add('text-white/60'); | |
| // Content visibility | |
| contentGeneral.classList.remove('hidden'); | |
| contentPaid.classList.add('hidden'); | |
| } else { | |
| // Styling | |
| paidBtn.classList.add('border-b-2', 'border-blue-500', 'bg-white/10', 'text-white'); | |
| paidBtn.classList.remove('text-white/60'); | |
| generalBtn.classList.remove('border-b-2', 'border-blue-500', 'bg-white/10', 'text-white'); | |
| generalBtn.classList.add('text-white/60'); | |
| // Content visibility | |
| contentPaid.classList.remove('hidden'); | |
| contentGeneral.classList.add('hidden'); | |
| } | |
| } | |
| // Predictor Form Handler | |
| document.getElementById('predictor-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const results = document.getElementById('prediction-results'); | |
| results.classList.remove('hidden'); | |
| // Simulating API call & Animation | |
| const scoreEl = document.getElementById('perf-score'); | |
| const riskEl = document.getElementById('risk-level'); | |
| scoreEl.textContent = '0'; | |
| riskEl.textContent = 'CALC...'; | |
| setTimeout(() => { | |
| let score = 0; | |
| const interval = setInterval(() => { | |
| score += Math.random() * 5; | |
| if (score > 92) { | |
| score = 92; | |
| clearInterval(interval); | |
| } | |
| scoreEl.textContent = Math.floor(score); | |
| }, 50); | |
| setTimeout(() => { | |
| riskEl.textContent = 'LOW'; | |
| }, 1500); | |
| }, 500); | |
| updatePerfChart(); | |
| }); | |
| function updatePerfChart() { | |
| const ctx = document.getElementById('perfChart').getContext('2d'); | |
| if(window.myPerfChart) window.myPerfChart.destroy(); | |
| window.myPerfChart = new Chart(ctx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['CTR', 'Conversion', 'Engagement'], | |
| datasets: [{ | |
| data: [92, 87, 95], | |
| backgroundColor: ['#10b981', '#3b82f6', '#8b5cf6'], | |
| borderWidth: 0, | |
| cutout: '70%' | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { legend: { display: false } } | |
| } | |
| }); | |
| } | |
| // Initialize Charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // CTA Chart | |
| if(document.getElementById('ctaChart')) { | |
| const ctaCtx = document.getElementById('ctaChart').getContext('2d'); | |
| new Chart(ctaCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Shop Now', 'Learn More', 'Get Offer', 'Sign Up', 'Buy Now'], | |
| datasets: [{ | |
| label: 'Usage %', | |
| data: [45, 28, 15, 8, 4], | |
| backgroundColor: 'rgba(34, 197, 94, 0.8)', | |
| borderRadius: 8 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| scales: { y: { beginAtZero: true, max: 50 } }, | |
| plugins: { legend: { display: false } } | |
| } | |
| }); | |
| } | |
| // Fatigue Chart | |
| if(document.getElementById('fatigueChart')) { | |
| const fatigueCtx = document.getElementById('fatigueChart').getContext('2d'); | |
| new Chart(fatigueCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Day 1', 'Day 3', 'Day 7', 'Day 10', 'Day 14', 'Day 18'], | |
| datasets: [{ | |
| label: 'Fatigue Score', | |
| data: [12, 25, 45, 62, 78, 82], | |
| borderColor: '#f59e0b', | |
| backgroundColor: 'rgba(245, 158, 11, 0.1)', | |
| tension: 0.4, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| scales: { y: { beginAtZero: true, max: 100 } }, | |
| plugins: { legend: { display: false } } | |
| } | |
| }); | |
| } | |
| // Top Keywords Population | |
| const keywords = ['discount', 'free shipping', 'limited time', '50% off', 'best seller', 'new arrival']; | |
| const keywordsContainer = document.getElementById('top-keywords'); | |
| if(keywordsContainer) { | |
| keywords.forEach((keyword) => { | |
| const div = document.createElement('div'); | |
| div.className = 'p-3 bg-gradient-to-r from-blue-500/10 to-blue-600/10 rounded-xl border border-blue-400/30'; | |
| div.innerHTML = ` | |
| <div class="font-bold text-gray-800 text-lg">#${keyword}</div> | |
| <div class="text-blue-600 text-sm">${Math.floor(Math.random() * 5000) + 1000} ads</div> | |
| `; | |
| keywordsContainer.appendChild(div); | |
| }); | |
| } | |
| }); | |
| // Copy Optimizer Logic | |
| function optimizeCopy() { | |
| const optimized = document.getElementById('optimized-copy'); | |
| optimized.classList.remove('hidden'); | |
| optimized.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Animation Observers | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }); | |
| document.querySelectorAll('.card-hover').forEach(el => { | |
| el.style.opacity = '0'; | |
| el.style.transform = 'translateY(20px)'; | |
| el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; | |
| observer.observe(el); | |
| }); | |
| </script> | |
| <footer class="py-16 mt-32 border-t border-white/10"> | |
| <div class="max-w-7xl mx-auto px-6 text-center"> | |
| <div class="flex items-center justify-center space-x-3 mb-8"> | |
| <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center"> | |
| <span class="text-white font-bold text-lg">AI</span> | |
| </div> | |
| <span class="text-2xl font-bold gradient-text">MetaAds AI</span> | |
| </div> | |
| <p class="text-white/60 text-lg mb-8 max-w-2xl mx-auto"> | |
| The most advanced AI-powered Meta Ads intelligence and optimization platform | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-6 text-white/70 text-sm"> | |
| <a href="#" class="hover:text-white transition-colors">Privacy</a> | |
| <a href="#" class="hover:text-white transition-colors">Terms</a> | |
| <a href="#" class="hover:text-white transition-colors">Security</a> | |
| <a href="#" class="hover:text-white transition-colors">Support</a> | |
| </div> | |
| <p class="text-white/40 text-xs mt-8">© 2024 MetaAds AI. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |