Download index.html from Dvd15/jon: direct link, hf CLI and curl.
- Browser
- Download file 59.6 kB
-
https://huggingface.co/spaces/Dvd15/jon/resolve/main/index.html
- Command line
-
hf download hf://spaces/Dvd15/jon/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Dvd15/jon/resolve/main/index.html
59.6 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Venture Builder - Automate Your Success</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@anthropic-ai/sdk@0.5.0"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); | |
| } | |
| .dashboard-card { | |
| backdrop-filter: blur(10px); | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .glow-hover:hover { | |
| box-shadow: 0 0 20px rgba(167, 119, 227, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <!-- Vanta.js Background --> | |
| <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div> | |
| <!-- Navigation --> | |
| <nav class="relative z-10 bg-gray-900 bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500">AI Venture Builder</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-purple-600">Dashboard</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">How It Works</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Portfolio</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Contact</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button class="text-gray-300 hover:text-white focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative z-10 hero-gradient min-h-screen flex items-center"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="text-center" data-aos="fade-up"> | |
| <h1 class="text-5xl md:text-6xl font-extrabold mb-6">Build. Scale. Profit.</h1> | |
| <h2 class="text-2xl md:text-3xl font-light mb-8">The AI-Powered Business Machine</h2> | |
| <p class="text-xl max-w-3xl mx-auto mb-12">We use artificial intelligence to automatically identify, build, and optimize profitable online businesses - completely hands-off.</p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#dashboard" class="px-8 py-4 bg-white text-purple-600 rounded-full font-bold hover:bg-gray-100 transition duration-300">View Dashboard</a> | |
| <button onclick="initiateAIOnboarding()" class="px-8 py-4 border-2 border-white text-white rounded-full font-bold hover:bg-white hover:bg-opacity-10 transition duration-300">Get Started</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dashboard Preview --> | |
| <section id="dashboard" class="relative z-10 bg-gray-900 py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-4" data-aos="fade-up">Your AI Business Dashboard</h2> | |
| <p class="text-xl text-gray-400 text-center mb-16 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">Real-time monitoring of your automated business empire</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16"> | |
| <!-- Stats Cards --> | |
| <div class="dashboard-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-600 bg-opacity-20 mr-4"> | |
| <i data-feather="dollar-sign" class="text-purple-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Daily Revenue</p> | |
| <p class="text-2xl font-bold">$3,842.56</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-600 bg-opacity-20 mr-4"> | |
| <i data-feather="trending-up" class="text-blue-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Active Businesses</p> | |
| <p class="text-2xl font-bold">14</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-600 bg-opacity-20 mr-4"> | |
| <i data-feather="users" class="text-green-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Customers</p> | |
| <p class="text-2xl font-bold">8,742</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="500"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-600 bg-opacity-20 mr-4"> | |
| <i data-feather="zap" class="text-yellow-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">AI Tasks Today</p> | |
| <p class="text-2xl font-bold">1,284</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Dashboard --> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 mb-16" data-aos="fade-up"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h3 class="text-xl font-bold">Business Performance</h3> | |
| <div class="flex space-x-2"> | |
| <button onclick="fetchBusinessData('7d')" class="px-4 py-2 bg-gray-700 rounded-lg text-sm">7 Days</button> | |
| <button onclick="fetchBusinessData('30d')" class="px-4 py-2 bg-purple-600 rounded-lg text-sm">30 Days</button> | |
| <button onclick="fetchBusinessData('all')" class="px-4 py-2 bg-gray-700 rounded-lg text-sm">All Time</button> | |
| </div> | |
| </div> | |
| <!-- Chart Placeholder --> | |
| <div class="h-80 bg-gray-700 bg-opacity-30 rounded-lg flex items-center justify-center"> | |
| <p class="text-gray-400">Revenue & Traffic Analytics Chart</p> | |
| </div> | |
| </div> | |
| <!-- Business List --> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6" data-aos="fade-up"> | |
| <h3 class="text-xl font-bold mb-6">Your AI Businesses</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-700"> | |
| <thead> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Business</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Type</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Revenue</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-gray-800 bg-opacity-50 divide-y divide-gray-700"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center"> | |
| <i data-feather="shopping-bag" class="text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium">AI Fashion Store</div> | |
| <div class="text-sm text-gray-400">fashion.ai</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">E-commerce</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold">$1,284.32</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-200">Optimizing</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm"> | |
| <button onclick="analyzeBusiness('AI Fashion Store')" class="text-purple-400 hover:text-purple-300 mr-3"><i data-feather="bar-chart-2"></i></button> | |
| <button onclick="configureBusiness('AI Fashion Store')" class="text-blue-400 hover:text-blue-300"><i data-feather="settings"></i></button> | |
| </td> | |
| </tr> | |
| <!-- More business rows would go here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="relative z-10 bg-gray-800 py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-4" data-aos="fade-up">The AI Business Cycle</h2> | |
| <p class="text-xl text-gray-400 text-center mb-16 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">Our system continuously identifies, builds, and optimizes businesses</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-900 rounded-xl p-8 glow-hover transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="text-purple-400 mb-4"> | |
| <i data-feather="search" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">1. Market Discovery</h3> | |
| <p class="text-gray-400">Our AI scans thousands of data points to identify underserved markets and profitable opportunities.</p> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-8 glow-hover transition duration-300" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="text-blue-400 mb-4"> | |
| <i data-feather="code" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">2. Auto-Build</h3> | |
| <p class="text-gray-400">AI assembles the complete business infrastructure - websites, marketing, logistics - in hours.</p> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-8 glow-hover transition duration-300" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="text-green-400 mb-4"> | |
| <i data-feather="refresh-cw" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">3. Optimize & Scale</h3> | |
| <p class="text-gray-400">Continuous AI optimization maximizes profits while reinvesting in new opportunities.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="relative z-10 hero-gradient py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6" data-aos="fade-up">Ready to Launch Your AI Business Empire?</h2> | |
| <p class="text-xl mb-12 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">Join now and let artificial intelligence build your wealth while you focus on what matters.</p> | |
| <button onclick="initiateAIOnboarding()" class="inline-block px-12 py-4 bg-white text-purple-600 rounded-full font-bold text-lg hover:bg-gray-100 transition duration-300" data-aos="fade-up" data-aos-delay="200">Start Free Trial</button> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="relative z-10 bg-gray-900 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">AI Venture Builder</h3> | |
| <p class="text-gray-400">Building the future of automated entrepreneurship.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Dashboard</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">How It Works</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Portfolio</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">GDPR</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-white"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white"><i data-feather="linkedin"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white"><i data-feather="github"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white"><i data-feather="mail"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 text-center text-gray-400 text-sm"> | |
| <p>© 2023 AI Venture Builder. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js globe background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x6e8efb, | |
| backgroundColor: 0x111827, | |
| size: 0.8 | |
| }); | |
| // Enhanced AI Business Functions | |
| async function initiateAIOnboarding() { | |
| document.querySelector('body').classList.add('cursor-wait'); | |
| try { | |
| // Simulate API failure 30% of the time | |
| if (Math.random() < 0.3) { | |
| throw new Error('AI service unavailable'); | |
| } | |
| // Mock successful response | |
| const mockResponse = { | |
| data: { | |
| success: true, | |
| recommendation: 'Starting with AI-powered ecommerce dropshipping based on current market trends', | |
| nextSteps: [ | |
| 'Market analysis complete', | |
| 'Supplier connections established', | |
| 'Storefront being generated' | |
| ] | |
| } | |
| }; | |
| // Show onboarding progress modal | |
| const modal = document.createElement('div'); | |
| modal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50'; | |
| modal.innerHTML = ` | |
| <div class="bg-gray-800 rounded-xl p-6 max-w-md w-full"> | |
| <h3 class="text-xl font-bold mb-4">AI Onboarding Progress</h3> | |
| <div class="space-y-4 mb-6"> | |
| ${mockResponse.data.nextSteps.map((step, i) => ` | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center mr-3"> | |
| <i data-feather="check" class="text-white w-3 h-3"></i> | |
| </div> | |
| <span>${step}</span> | |
| </div> | |
| `).join('')} | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg mb-4"> | |
| <p class="text-sm text-gray-300 mb-2">AI Recommendation:</p> | |
| <p class="font-medium">${mockResponse.data.recommendation}</p> | |
| </div> | |
| <button onclick="this.parentElement.parentElement.remove(); fetchBusinessData('7d'); searchMarketOpportunities();" | |
| class="w-full py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium"> | |
| Continue to Dashboard | |
| </button> | |
| </div> | |
| `; | |
| document.body.appendChild(modal); | |
| feather.replace(); | |
| } catch (error) { | |
| // Show error recovery modal | |
| const errorModal = document.createElement('div'); | |
| errorModal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50'; | |
| errorModal.innerHTML = ` | |
| <div class="bg-gray-800 rounded-xl p-6 max-w-md w-full"> | |
| <div class="text-red-400 mb-4 flex items-center"> | |
| <i data-feather="alert-triangle" class="w-6 h-6 mr-2"></i> | |
| <h3 class="text-xl font-bold">Onboarding Error</h3> | |
| </div> | |
| <p class="mb-6">AI services are currently experiencing high demand. We've queued your request and will retry automatically.</p> | |
| <div class="flex space-x-3"> | |
| <button onclick="initiateAIOnboarding()" | |
| class="flex-1 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium"> | |
| Retry Now | |
| </button> | |
| <button onclick="this.parentElement.parentElement.remove()" | |
| class="flex-1 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg"> | |
| Dismiss | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| document.body.appendChild(errorModal); | |
| feather.replace(); | |
| } finally { | |
| document.querySelector('body').classList.remove('cursor-wait'); | |
| } | |
| } | |
| async function fetchBusinessData(timeframe) { | |
| document.querySelector('body').classList.add('cursor-wait'); | |
| try { | |
| // Update UI to show loading state | |
| document.querySelectorAll('.dashboard-card p.text-2xl').forEach(el => { | |
| el.textContent = '...'; | |
| }); | |
| const response = await axios.get(`/api/ai/business-data?timeframe=${timeframe}`); | |
| // Update dashboard UI with new data | |
| updateDashboard(response.data); | |
| // Update active button state | |
| document.querySelectorAll('#dashboard button').forEach(btn => { | |
| btn.classList.remove('bg-purple-600'); | |
| btn.classList.add('bg-gray-700'); | |
| }); | |
| event.target.classList.add('bg-purple-600'); | |
| event.target.classList.remove('bg-gray-700'); | |
| // Simulate chart update | |
| setTimeout(() => { | |
| document.querySelector('#dashboard .h-80 p').textContent = | |
| `Showing ${timeframe} data - Revenue: ${response.data.dailyRevenue * (timeframe === '7d' ? 7 : 30)}`; | |
| }, 500); | |
| } catch (error) { | |
| console.error('Failed to fetch business data:', error); | |
| // Show error in UI instead of alert | |
| const errorToast = document.createElement('div'); | |
| errorToast.className = 'fixed bottom-4 left-4 bg-red-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center z-50'; | |
| errorToast.innerHTML = ` | |
| <i data-feather="alert-circle" class="mr-2"></i> | |
| <span>Failed to load business data. Using cached data...</span> | |
| `; | |
| document.body.appendChild(errorToast); | |
| feather.replace(); | |
| // Load fallback data | |
| const fallbackData = { | |
| dailyRevenue: '3,842.56', | |
| activeBusinesses: '14', | |
| customers: '8,742', | |
| aiTasks: '1,284' | |
| }; | |
| updateDashboard(fallbackData); | |
| setTimeout(() => errorToast.remove(), 5000); | |
| } finally { | |
| document.querySelector('body').classList.remove('cursor-wait'); | |
| } | |
| } | |
| async function analyzeBusiness(businessName) { | |
| document.querySelector('body').classList.add('cursor-wait'); | |
| try { | |
| const response = await axios.post('/api/ai/analyze', { | |
| business: businessName, | |
| analysisType: 'performance', | |
| metrics: ['conversion', 'traffic', 'profit'] | |
| }); | |
| // Show analysis in a modal instead of alert | |
| const insights = response.data.insights.map(i => `• ${i}`).join('\n'); | |
| const modal = document.createElement('div'); | |
| modal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50'; | |
| modal.innerHTML = ` | |
| <div class="bg-gray-800 rounded-xl p-6 max-w-2xl"> | |
| <h3 class="text-xl font-bold mb-4">AI Analysis: ${businessName}</h3> | |
| <div class="bg-gray-700 p-4 rounded-lg mb-4 whitespace-pre-line">${insights}</div> | |
| <div class="text-sm text-gray-400 mb-4">AI Recommendations:</div> | |
| <ul class="list-disc pl-5 mb-4"> | |
| ${response.data.recommendations.map(r => `<li>${r}</li>`).join('')} | |
| </ul> | |
| <button onclick="this.parentElement.parentElement.remove()" | |
| class="mt-4 px-4 py-2 bg-purple-600 rounded-lg"> | |
| Close | |
| </button> | |
| </div> | |
| `; | |
| document.body.appendChild(modal); | |
| } catch (error) { | |
| console.error('Analysis failed:', error); | |
| alert(`Failed to analyze ${businessName}. Please try again.`); | |
| } finally { | |
| document.querySelector('body').classList.remove('cursor-wait'); | |
| } | |
| } | |
| async function configureBusiness(businessName) { | |
| document.querySelector('body').classList.add('cursor-wait'); | |
| try { | |
| const response = await axios.post('/api/ai/configure', { | |
| business: businessName, | |
| action: 'settings', | |
| parameters: { | |
| budget: 'auto', | |
| marketing: 'optimize', | |
| inventory: 'dynamic' | |
| } | |
| }); | |
| // Show configuration options in a modal | |
| const modal = document.createElement('div'); | |
| modal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50'; | |
| modal.innerHTML = ` | |
| <div class="bg-gray-800 rounded-xl p-6 max-w-2xl"> | |
| <h3 class="text-xl font-bold mb-4">Configure: ${businessName}</h3> | |
| <form id="configForm"> | |
| ${response.data.options.map(opt => ` | |
| <div class="mb-4"> | |
| <label class="block text-gray-300 mb-2">${opt.label}</label> | |
| <select name="${opt.name}" class="w-full bg-gray-700 border border-gray-600 rounded-lg p-2"> | |
| ${opt.choices.map(c => `<option value="${c.value}" ${c.default ? 'selected' : ''}>${c.label}</option>`).join('')} | |
| </select> | |
| </div> | |
| `).join('')} | |
| <div class="flex space-x-4 mt-6"> | |
| <button type="button" onclick="saveBusinessConfig('${businessName}')" | |
| class="px-4 py-2 bg-purple-600 rounded-lg"> | |
| Save Changes | |
| </button> | |
| <button type="button" onclick="this.parentElement.parentElement.parentElement.remove()" | |
| class="px-4 py-2 bg-gray-700 rounded-lg"> | |
| Cancel | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| `; | |
| document.body.appendChild(modal); | |
| } catch (error) { | |
| console.error('Configuration failed:', error); | |
| alert(`Failed to configure ${businessName}. Please try again.`); | |
| } finally { | |
| document.querySelector('body').classList.remove('cursor-wait'); | |
| } | |
| } | |
| async function saveBusinessConfig(businessName) { | |
| const form = document.getElementById('configForm'); | |
| const formData = new FormData(form); | |
| const config = {}; | |
| formData.forEach((value, key) => config[key] = value); | |
| try { | |
| await axios.post('/api/ai/configure/save', { | |
| business: businessName, | |
| config: config | |
| }); | |
| alert('Configuration saved successfully! AI will now optimize your business.'); | |
| document.querySelector('.fixed.inset-0').remove(); | |
| } catch (error) { | |
| console.error('Save failed:', error); | |
| alert('Failed to save configuration. Please try again.'); | |
| } | |
| } | |
| async function startFreeTrial() { | |
| document.querySelector('body').classList.add('cursor-wait'); | |
| try { | |
| const response = await axios.post('/api/ai/trial', { | |
| plan: 'free', | |
| features: ['market_analysis', 'business_builder'], | |
| duration: '14d' | |
| }); | |
| // Update UI to show trial status | |
| const trialBadge = document.createElement('div'); | |
| trialBadge.className = 'fixed top-4 right-4 bg-purple-600 text-white px-4 py-2 rounded-full text-sm font-bold z-50'; | |
| trialBadge.textContent = 'FREE TRIAL ACTIVE'; | |
| document.body.appendChild(trialBadge); | |
| // Start initial business creation | |
| setTimeout(() => { | |
| const event = new CustomEvent('ai-business-created', { | |
| detail: { | |
| name: 'AI Content Agency', | |
| type: 'service', | |
| status: 'optimizing' | |
| } | |
| }); | |
| document.dispatchEvent(event); | |
| }, 2000); | |
| alert('Free trial started! AI is now building your first business.'); | |
| } catch (error) { | |
| console.error('Trial activation failed:', error); | |
| alert('Failed to start free trial. Please try again.'); | |
| } finally { | |
| document.querySelector('body').classList.remove('cursor-wait'); | |
| } | |
| } | |
| async function fetchBusinessData(timeframe) { | |
| document.querySelector('body').classList.add('cursor-wait'); | |
| try { | |
| // Simulate API call with mock data | |
| const mockData = { | |
| dailyRevenue: (Math.random() * 5000).toFixed(2), | |
| activeBusinesses: Math.floor(Math.random() * 20) + 5, | |
| customers: Math.floor(Math.random() * 15000) + 5000, | |
| aiTasks: Math.floor(Math.random() * 2000) + 500 | |
| }; | |
| // Update dashboard UI | |
| updateDashboard(mockData); | |
| // Update active button state | |
| document.querySelectorAll('#dashboard button').forEach(btn => { | |
| btn.classList.remove('bg-purple-600'); | |
| btn.classList.add('bg-gray-700'); | |
| }); | |
| event.target.classList.add('bg-purple-600'); | |
| event.target.classList.remove('bg-gray-700'); | |
| // Update chart placeholder | |
| const chartText = `Showing ${timeframe} data - Revenue: ${(mockData.dailyRevenue * (timeframe === '7d' ? 7 : timeframe === '30d' ? 30 : 90)).toFixed(2)}`; | |
| document.querySelector('#dashboard .h-80 p').textContent = chartText; | |
| } catch (error) { | |
| console.error('Failed to fetch business data:', error); | |
| alert('Failed to load business data. Please check your connection.'); | |
| } finally { | |
| document.querySelector('body').classList.remove('cursor-wait'); | |
| } | |
| } | |
| async function analyzeBusiness(businessName) { | |
| document.querySelector('body').classList.add('cursor-wait'); | |
| try { | |
| // Simulate AI analysis with mock data | |
| const mockInsights = [ | |
| `Conversion rate: ${(Math.random() * 10).toFixed(2)}% (Industry avg: 3.2%)`, | |
| `Traffic sources: Organic (${Math.floor(Math.random() * 60) + 30}%), Paid (${Math.floor(Math.random() * 30) + 10}%), Social (${Math.floor(Math.random() * 20) + 5}%)`, | |
| `Profit margin: ${(Math.random() * 40 + 10).toFixed(2)}%`, | |
| `Customer acquisition cost: ${(Math.random() * 50 + 10).toFixed(2)}`, | |
| `Repeat customer rate: ${(Math.random() * 30 + 5).toFixed(2)}%` | |
| ]; | |
| const mockRecommendations = [ | |
| "Increase ad spend on top-performing channels", | |
| "Optimize checkout flow for mobile users", | |
| "Add upsell opportunities at checkout", | |
| "Test new product bundles" | |
| ]; | |
| // Show analysis in modal | |
| const modal = document.createElement('div'); | |
| modal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50'; | |
| modal.innerHTML = ` | |
| <div class="bg-gray-800 rounded-xl p-6 max-w-2xl"> | |
| <h3 class="text-xl font-bold mb-4">AI Analysis: ${businessName}</h3> | |
| <div class="bg-gray-700 p-4 rounded-lg mb-4"> | |
| ${mockInsights.map(i => `<p class="mb-2">• ${i}</p>`).join('')} | |
| </div> | |
| <div class="text-sm text-gray-400 mb-2">AI Recommendations:</div> | |
| <ul class="list-disc pl-5 mb-4"> | |
| ${mockRecommendations.map(r => `<li>${r}</li>`).join('')} | |
| </ul> | |
| <button onclick="this.parentElement.parentElement.remove()" | |
| class="mt-4 px-4 py-2 bg-purple-600 rounded-lg"> | |
| Close | |
| </button> | |
| </div> | |
| `; | |
| document.body.appendChild(modal); | |
| } catch (error) { | |
| console.error('Analysis failed:', error); | |
| alert(`Failed to analyze ${businessName}. Please try again.`); | |
| } finally { | |
| document.querySelector('body').classList.remove('cursor-wait'); | |
| } | |
| } | |
| async function configureBusiness(businessName) { | |
| document.querySelector('body').classList.add('cursor-wait'); | |
| try { | |
| // Simulate configuration options | |
| const mockOptions = [ | |
| { | |
| name: 'marketing_budget', | |
| label: 'Marketing Budget', | |
| choices: [ | |
| { value: 'auto', label: 'Auto-optimize (Recommended)', default: true }, | |
| { value: 'low', label: 'Conservative ($500/month)' }, | |
| { value: 'medium', label: 'Balanced ($1500/month)' }, | |
| { value: 'high', label: 'Aggressive ($3000/month)' } | |
| ] | |
| }, | |
| { | |
| name: 'inventory_mode', | |
| label: 'Inventory Management', | |
| choices: [ | |
| { value: 'dynamic', label: 'Dynamic (AI-controlled)', default: true }, | |
| { value: 'manual', label: 'Manual' }, | |
| { value: 'dropship', label: 'Dropshipping' } | |
| ] | |
| }, | |
| { | |
| name: 'pricing_strategy', | |
| label: 'Pricing Strategy', | |
| choices: [ | |
| { value: 'competitive', label: 'Competitive Pricing', default: true }, | |
| { value: 'premium', label: 'Premium Pricing' }, | |
| { value: 'penetration', label: 'Market Penetration' } | |
| ] | |
| } | |
| ]; | |
| // Show configuration modal | |
| const modal = document.createElement('div'); | |
| modal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50'; | |
| modal.innerHTML = ` | |
| <div class="bg-gray-800 rounded-xl p-6 max-w-2xl"> | |
| <h3 class="text-xl font-bold mb-4">Configure: ${businessName}</h3> | |
| <form id="configForm"> | |
| ${mockOptions.map(opt => ` | |
| <div class="mb-4"> | |
| <label class="block text-gray-300 mb-2">${opt.label}</label> | |
| <select name="${opt.name}" class="w-full bg-gray-700 border border-gray-600 rounded-lg p-2"> | |
| ${opt.choices.map(c => `<option value="${c.value}" ${c.default ? 'selected' : ''}>${c.label}</option>`).join('')} | |
| </select> | |
| </div> | |
| `).join('')} | |
| <div class="flex space-x-4 mt-6"> | |
| <button type="button" onclick="saveBusinessConfig('${businessName}')" | |
| class="px-4 py-2 bg-purple-600 rounded-lg"> | |
| Save Changes | |
| </button> | |
| <button type="button" onclick="this.parentElement.parentElement.parentElement.remove()" | |
| class="px-4 py-2 bg-gray-700 rounded-lg"> | |
| Cancel | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| `; | |
| document.body.appendChild(modal); | |
| } catch (error) { | |
| console.error('Configuration failed:', error); | |
| alert(`Failed to configure ${businessName}. Please try again.`); | |
| } finally { | |
| document.querySelector('body').classList.remove('cursor-wait'); | |
| } | |
| } | |
| async function startFreeTrial() { | |
| try { | |
| const response = await axios.post('/api/ai/trial', { | |
| plan: 'free', | |
| features: ['market_analysis', 'business_builder'] | |
| }); | |
| alert('Free trial started! AI is now building your first business.'); | |
| } catch (error) { | |
| console.error('Trial activation failed:', error); | |
| } | |
| } | |
| function updateDashboard(data) { | |
| // Update dashboard UI with new data | |
| const cards = document.querySelectorAll('.dashboard-card'); | |
| if (cards.length >= 4) { | |
| cards[0].querySelector('p.text-2xl').textContent = `${data.dailyRevenue}`; | |
| cards[1].querySelector('p.text-2xl').textContent = data.activeBusinesses; | |
| cards[2].querySelector('p.text-2xl').textContent = data.customers; | |
| cards[3].querySelector('p.text-2xl').textContent = data.aiTasks; | |
| } | |
| // Update chart placeholder with timestamp | |
| const chartPlaceholder = document.querySelector('#dashboard .h-80 p'); | |
| if (chartPlaceholder) { | |
| chartPlaceholder.innerHTML = `Last updated: ${new Date().toLocaleTimeString()}<br>${data.dailyRevenue ? `Daily Revenue: ${data.dailyRevenue}` : ''}`; | |
| } | |
| } | |
| // Initialize AOS and Feather Icons | |
| document.addEventListener('DOMContentLoaded', function() { | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Initialize with default data and error handling | |
| try { | |
| fetchBusinessData('30d'); | |
| } catch (error) { | |
| console.error('Initial data load failed:', error); | |
| const fallbackData = { | |
| dailyRevenue: '3,842.56', | |
| activeBusinesses: '14', | |
| customers: '8,742', | |
| aiTasks: '1,284' | |
| }; | |
| updateDashboard(fallbackData); | |
| } | |
| // Set up periodic refresh | |
| setInterval(() => { | |
| fetchBusinessData('30d'); | |
| }, 300000); // Refresh every 5 minutes | |
| }); | |
| </script> | |
| // Enhanced AI Search API Integration with Real Implementation | |
| async function searchMarketOpportunities() { | |
| document.querySelector('body').classList.add('cursor-wait'); | |
| try { | |
| // First check for market gaps using AI | |
| const gapAnalysis = await axios.post('/api/ai/market-gaps', { | |
| criteria: { | |
| min_profit_margin: 0.3, | |
| max_competition: 'medium', | |
| startup_cost: 'low', | |
| automation_potential: 'high' | |
| } | |
| }); | |
| // Then validate with real market data | |
| const validation = await axios.post('/api/ai/validate-opportunities', { | |
| opportunities: gapAnalysis.data.opportunities, | |
| validation_sources: ['google_trends', 'amazon_sales', 'social_mentions'] | |
| }); | |
| // Get AI recommendations | |
| const recommendations = await axios.post('/api/ai/generate-recommendations', { | |
| validated_opportunities: validation.data.validated, | |
| business_model: 'automated' | |
| }); | |
| // Display results in UI | |
| displayOpportunities(recommendations.data); | |
| } catch (error) { | |
| console.error('Market search error:', error); | |
| showErrorToast('Failed to search opportunities. Retrying...'); | |
| setTimeout(searchMarketOpportunities, 3000); | |
| } finally { | |
| document.querySelector('body').classList.remove('cursor-wait'); | |
| } | |
| } | |
| function displayOpportunities(data) { | |
| const opportunitiesContainer = document.createElement('div'); | |
| opportunitiesContainer.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4'; | |
| opportunitiesContainer.innerHTML = ` | |
| <div class="bg-gray-800 rounded-xl p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold">AI-Discovered Opportunities</h3> | |
| <button onclick="this.parentElement.parentElement.parentElement.remove()" | |
| class="p-2 rounded-full hover:bg-gray-700"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| ${data.opportunities.map(opp => ` | |
| <div class="bg-gray-700 p-4 rounded-lg hover:bg-gray-600 transition cursor-pointer" | |
| onclick="initiateBusinessCreation('${opp.id}')"> | |
| <h4 class="font-bold text-lg mb-2">${opp.name}</h4> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span>Profit Potential:</span> | |
| <span class="font-mono">${opp.profit_estimate}</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span>Startup Cost:</span> | |
| <span class="font-mono">${opp.startup_cost}</span> | |
| </div> | |
| <div class="text-sm text-gray-300 mt-3">${opp.description}</div> | |
| <div class="mt-3 flex flex-wrap gap-2"> | |
| ${opp.tags.map(tag => ` | |
| <span class="text-xs px-2 py-1 bg-gray-600 rounded-full">${tag}</span> | |
| `).join('')} | |
| </div> | |
| </div> | |
| `).join('')} | |
| </div> | |
| </div> | |
| `; | |
| document.body.appendChild(opportunitiesContainer); | |
| feather.replace(); | |
| } | |
| async function initiateBusinessCreation(opportunityId) { | |
| try { | |
| const response = await axios.post('/api/ai/create-business', { | |
| opportunity_id: opportunityId, | |
| automation_level: 'full', | |
| budget_allocation: 'auto' | |
| }); | |
| if (response.data.success) { | |
| showSuccessToast(`Business creation started: ${response.data.business_name}`); | |
| document.querySelector('.fixed.inset-0').remove(); | |
| // Refresh dashboard | |
| fetchBusinessData('7d'); | |
| // Add to business list | |
| const event = new CustomEvent('ai-business-created', { | |
| detail: response.data.business_details | |
| }); | |
| document.dispatchEvent(event); | |
| } | |
| } catch (error) { | |
| showErrorToast('Failed to create business. Please try again.'); | |
| } | |
| } | |
| function showSuccessToast(message) { | |
| const toast = document.createElement('div'); | |
| toast.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center'; | |
| toast.innerHTML = ` | |
| <i data-feather="check-circle" class="mr-2"></i> | |
| <span>${message}</span> | |
| `; | |
| document.body.appendChild(toast); | |
| feather.replace(); | |
| setTimeout(() => toast.remove(), 5000); | |
| } | |
| function showErrorToast(message) { | |
| const toast = document.createElement('div'); | |
| toast.className = 'fixed bottom-4 right-4 bg-red-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center'; | |
| toast.innerHTML = ` | |
| <i data-feather="alert-circle" class="mr-2"></i> | |
| <span>${message}</span> | |
| `; | |
| document.body.appendChild(toast); | |
| feather.replace(); | |
| setTimeout(() => toast.remove(), 5000); | |
| } | |
| // Enhanced DOMContentLoaded with real functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize animations | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Replace icons | |
| feather.replace(); | |
| // Load initial data | |
| fetchBusinessData('30d'); | |
| // Start market analysis | |
| setTimeout(() => { | |
| searchMarketOpportunities(); | |
| }, 1500); | |
| // Set up real-time updates | |
| const eventSource = new EventSource('/api/ai/updates'); | |
| eventSource.onmessage = (event) => { | |
| const data = JSON.parse(event.data); | |
| handleRealTimeUpdate(data); | |
| }; | |
| // Error handling | |
| eventSource.onerror = () => { | |
| console.log('SSE connection error. Reconnecting...'); | |
| setTimeout(() => document.location.reload(), 5000); | |
| }; | |
| }); | |
| function handleRealTimeUpdate(update) { | |
| switch(update.type) { | |
| case 'BUSINESS_CREATED': | |
| document.dispatchEvent(new CustomEvent('ai-business-created', { | |
| detail: update.data | |
| })); | |
| break; | |
| case 'BUSINESS_UPDATE': | |
| updateBusinessRow(update.data); | |
| break; | |
| case 'MARKET_ALERT': | |
| showMarketAlert(update.data); | |
| break; | |
| case 'AI_RECOMMENDATION': | |
| showAIRecommendation(update.data); | |
| break; | |
| } | |
| } | |
| function updateBusinessRow(data) { | |
| const row = document.querySelector(`tr[data-business-id="${data.id}"]`); | |
| if (row) { | |
| // Update status | |
| const statusSpan = row.querySelector('td:nth-child(4) span'); | |
| statusSpan.className = `px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusClass(data.status)}`; | |
| statusSpan.textContent = data.status; | |
| // Update revenue | |
| row.querySelector('td:nth-child(3)').textContent = `${data.revenue.toFixed(2)}`; | |
| } | |
| } | |
| function getStatusClass(status) { | |
| const map = { | |
| 'optimizing': 'bg-green-900 text-green-200', | |
| 'scaling': 'bg-blue-900 text-blue-200', | |
| 'analyzing': 'bg-yellow-900 text-yellow-200', | |
| 'paused': 'bg-gray-700 text-gray-300', | |
| 'error': 'bg-red-900 text-red-200' | |
| }; | |
| return map[status.toLowerCase()] || 'bg-gray-700 text-gray-300'; | |
| } | |
| function showMarketAlert(data) { | |
| const alert = document.createElement('div'); | |
| alert.className = 'fixed top-4 right-4 bg-yellow-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-start z-50 max-w-md'; | |
| alert.innerHTML = ` | |
| <i data-feather="alert-triangle" class="mr-2 mt-1 flex-shrink-0"></i> | |
| <div> | |
| <div class="font-bold mb-1">Market Alert</div> | |
| <div class="text-sm">${data.message}</div> | |
| ${data.action ? ` | |
| <button onclick="${data.action.function}" | |
| class="mt-2 px-3 py-1 bg-yellow-700 hover:bg-yellow-800 rounded text-sm"> | |
| ${data.action.label} | |
| </button> | |
| ` : ''} | |
| </div> | |
| `; | |
| document.body.appendChild(alert); | |
| feather.replace(); | |
| setTimeout(() => alert.remove(), 10000); | |
| } | |
| function showAIRecommendation(data) { | |
| const rec = document.createElement('div'); | |
| rec.className = 'fixed bottom-4 left-4 bg-purple-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-start z-50 max-w-md'; | |
| rec.innerHTML = ` | |
| <i data-feather="zap" class="mr-2 mt-1 flex-shrink-0"></i> | |
| <div> | |
| <div class="font-bold mb-1">AI Recommendation</div> | |
| <div class="text-sm mb-2">${data.message}</div> | |
| <div class="flex gap-2"> | |
| <button onclick="${data.accept_function}" | |
| class="px-3 py-1 bg-white text-purple-600 hover:bg-gray-100 rounded text-sm font-medium"> | |
| Accept | |
| </button> | |
| <button onclick="${data.decline_function}" | |
| class="px-3 py-1 bg-purple-700 hover:bg-purple-800 rounded text-sm"> | |
| Decline | |
| </button> | |
| </div> | |
| </div> | |
| <button onclick="this.parentElement.remove()" class="ml-4 text-purple-300 hover:text-white"> | |
| <i data-feather="x"></i> | |
| </button> | |
| `; | |
| document.body.appendChild(rec); | |
| feather.replace(); | |
| } | |
| // Enhanced business creation event handler | |
| document.addEventListener('ai-business-created', (e) => { | |
| const business = e.detail; | |
| const tableBody = document.querySelector('tbody'); | |
| // Create new row with more detailed data | |
| const newRow = document.createElement('tr'); | |
| newRow.dataset.businessId = business.id; | |
| newRow.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full ${getBusinessColor(business.type)} flex items-center justify-center"> | |
| <i data-feather="${getBusinessIcon(business.type)}" class="text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium">${business.name}</div> | |
| <div class="text-sm text-gray-400">${business.domain || business.name.toLowerCase().replace(/\s+/g, '')}.ai</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm"> | |
| <span class="inline-flex items-center"> | |
| ${business.type} | |
| ${business.verified ? '<i data-feather="check-circle" class="ml-1 text-green-400 w-4 h-4"></i>' : ''} | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-mono">${business.revenue.toFixed(2)}</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusClass(business.status)}"> | |
| ${business.status} | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm"> | |
| <div class="flex items-center space-x-3"> | |
| <button onclick="analyzeBusiness('${business.id}')" | |
| class="text-purple-400 hover:text-purple-300 tooltip" | |
| data-tip="Analyze"> | |
| <i data-feather="bar-chart-2"></i> | |
| </button> | |
| <button onclick="configureBusiness('${business.id}')" | |
| class="text-blue-400 hover:text-blue-300 tooltip" | |
| data-tip="Configure"> | |
| <i data-feather="settings"></i> | |
| </button> | |
| <button onclick="showBusinessDetails('${business.id}')" | |
| class="text-gray-400 hover:text-white tooltip" | |
| data-tip="Details"> | |
| <i data-feather="info"></i> | |
| </button> | |
| </div> | |
| </td> | |
| `; | |
| // Add to top of table | |
| tableBody.prepend(newRow); | |
| feather.replace(); | |
| // Update dashboard stats | |
| updateDashboardStats(business); | |
| // Show success notification | |
| showSuccessToast(`New business launched: ${business.name}`); | |
| // Trigger celebratory effect for new business | |
| if (business.revenue > 1000) { | |
| triggerCelebrationEffect(); | |
| } | |
| }); | |
| function getBusinessIcon(type) { | |
| const icons = { | |
| 'ecommerce': 'shopping-bag', | |
| 'saas': 'cloud', | |
| 'content': 'file-text', | |
| 'service': 'settings', | |
| 'affiliate': 'link', | |
| 'ads': 'dollar-sign' | |
| }; | |
| return icons[type.toLowerCase()] || 'zap'; | |
| } | |
| function getBusinessColor(type) { | |
| const colors = { | |
| 'ecommerce': 'bg-purple-500', | |
| 'saas': 'bg-blue-500', | |
| 'content': 'bg-green-500', | |
| 'service': 'bg-yellow-500', | |
| 'affiliate': 'bg-pink-500', | |
| 'ads': 'bg-red-500' | |
| }; | |
| return colors[type.toLowerCase()] || 'bg-gray-500'; | |
| } | |
| function updateDashboardStats(business) { | |
| // Update active businesses count | |
| const activeBizCard = document.querySelectorAll('.dashboard-card')[1]; | |
| const currentCount = parseInt(activeBizCard.querySelector('p.text-2xl').textContent); | |
| activeBizCard.querySelector('p.text-2xl').textContent = currentCount + 1; | |
| // Update revenue | |
| const revenueCard = document.querySelectorAll('.dashboard-card')[0]; | |
| const currentRevenue = parseFloat(revenueCard.querySelector('p.text-2xl').textContent.replace(' </script> | |
| </body> | |
| </html> | |
| , '')); | |
| revenueCard.querySelector('p.text-2xl').textContent = `${(currentRevenue + business.revenue).toFixed(2)}`; | |
| } | |
| function triggerCelebrationEffect() { | |
| const confetti = document.createElement('div'); | |
| confetti.className = 'fixed inset-0 pointer-events-none z-50'; | |
| confetti.innerHTML = ` | |
| <canvas id="confetti-canvas"></canvas> | |
| <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script> | |
| <script> | |
| confetti({ | |
| particleCount: 150, | |
| spread: 70, | |
| origin: { y: 0.6 } | |
| }); | |
| setTimeout(() => document.querySelector('.fixed.inset-0.z-50').remove(), 3000); | |
| </script> | |
| `; | |
| document.body.appendChild(confetti); | |
| } | |
| </script> | |
| </body> | |
| </html> | |