jon / index.html
Dvd15's picture
failed to get business data - Follow Up Deployment
0fe39ad verified
Raw History Blame Contribute Delete
59.6 kB
<!DOCTYPE html>
<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>