|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI App Builder | Transform Ideas into Applications</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); |
|
|
} |
|
|
.code-block { |
|
|
font-family: 'Courier New', monospace; |
|
|
background-color: #2d3748; |
|
|
color: #f7fafc; |
|
|
border-radius: 0.5rem; |
|
|
padding: 1rem; |
|
|
overflow-x: auto; |
|
|
} |
|
|
.chat-bubble { |
|
|
border-radius: 1.5rem; |
|
|
max-width: 80%; |
|
|
} |
|
|
.user-bubble { |
|
|
background-color: #4299e1; |
|
|
color: white; |
|
|
border-bottom-right-radius: 0.25rem; |
|
|
} |
|
|
.ai-bubble { |
|
|
background-color: #edf2f7; |
|
|
color: #2d3748; |
|
|
border-bottom-left-radius: 0.25rem; |
|
|
} |
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { opacity: 0.6; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.6; } |
|
|
} |
|
|
.architecture-diagram { |
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 800 400"><rect x="50" y="50" width="150" height="80" rx="10" fill="%23a777e3" opacity="0.8"/><text x="125" y="90" font-family="Arial" font-size="14" fill="white" text-anchor="middle">Frontend</text><rect x="300" y="50" width="150" height="80" rx="10" fill="%236e8efb" opacity="0.8"/><text x="375" y="90" font-family="Arial" font-size="14" fill="white" text-anchor="middle">Orchestrator</text><rect x="550" y="50" width="150" height="80" rx="10" fill="%234299e1" opacity="0.8"/><text x="625" y="90" font-family="Arial" font-size="14" fill="white" text-anchor="middle">AI Service</text><rect x="175" y="200" width="150" height="80" rx="10" fill="%2348bb78" opacity="0.8"/><text x="250" y="240" font-family="Arial" font-size="14" fill="white" text-anchor="middle">CI/CD</text><rect x="425" y="200" width="150" height="80" rx="10" fill="%23ed8936" opacity="0.8"/><text x="500" y="240" font-family="Arial" font-size="14" fill="white" text-anchor="middle">Deployment</text><path d="M200 130 L200 170 L250 200" stroke="%234a5568" stroke-width="2" fill="none"/><path d="M450 130 L450 170 L425 200" stroke="%234a5568" stroke-width="2" fill="none"/><path d="M300 200 L375 200" stroke="%234a5568" stroke-width="2" fill="none"/><path d="M625 130 L625 170 L500 200" stroke="%234a5568" stroke-width="2" fill="none"/></svg>'); |
|
|
background-size: contain; |
|
|
background-repeat: no-repeat; |
|
|
background-position: center; |
|
|
min-height: 300px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<nav class="bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-robot text-purple-600 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">AI App Builder</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:ml-6 md:flex md:items-center space-x-8"> |
|
|
<a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-purple-500 text-sm font-medium">Home</a> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Features</a> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Pricing</a> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Docs</a> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium">Get Started</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> |
|
|
Build Apps with Just Words |
|
|
</h1> |
|
|
<p class="mt-6 max-w-2xl mx-auto text-xl"> |
|
|
Transform your ideas into fully functional applications using natural language. Our AI handles the coding, deployment, and scaling. |
|
|
</p> |
|
|
<div class="mt-10"> |
|
|
<div class="relative max-w-xl mx-auto"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-comment-dots text-purple-200"></i> |
|
|
</div> |
|
|
<input type="text" id="app-description" class="block w-full pl-10 pr-16 py-4 border border-transparent rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-white focus:border-white" placeholder="Describe the app you want to build..."> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center"> |
|
|
<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-purple-700 bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white"> |
|
|
Generate App |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-2 text-sm text-purple-100">Try: "Build a React e-commerce app with product catalog, user authentication, and Stripe payments"</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Features</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
From Idea to Production in Minutes |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> |
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-code"></i> |
|
|
</div> |
|
|
<div class="ml-16"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">AI-Powered Code Generation</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Our system uses advanced LLMs like GPT-4 to generate clean, production-ready code based on your natural language descriptions. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-project-diagram"></i> |
|
|
</div> |
|
|
<div class="ml-16"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Full Project Scaffolding</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Get complete project structures with frontend, backend, database schemas, and configuration files - all automatically generated. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-shield-alt"></i> |
|
|
</div> |
|
|
<div class="ml-16"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Built-in Security</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Each project runs in isolated containers with automatic security scanning and best practices enforcement. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
</div> |
|
|
<div class="ml-16"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Automated CI/CD</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Continuous integration and deployment pipelines automatically test, build, and deploy your application to the cloud. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Architecture</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Multi-Tier PaaS Design |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="architecture-diagram mb-12"></div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="text-purple-600 mb-4"> |
|
|
<i class="fas fa-laptop-code text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Frontend Interface</h3> |
|
|
<p class="text-gray-500"> |
|
|
Web-based UI built with React/Vue.js for capturing application requirements in natural language through forms or chat interfaces. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="text-blue-600 mb-4"> |
|
|
<i class="fas fa-cogs text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Backend Orchestrator</h3> |
|
|
<p class="text-gray-500"> |
|
|
Microservices (FastAPI/Node.js) handling input validation, session management, and coordinating AI calls for code generation. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="text-indigo-600 mb-4"> |
|
|
<i class="fas fa-brain text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">AI Service Layer</h3> |
|
|
<p class="text-gray-500"> |
|
|
Leverages LLMs (GPT-4/Mistral) via API with prompt templating to translate specs into code snippets and full project scaffolds. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="text-green-600 mb-4"> |
|
|
<i class="fas fa-truck-loading text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">CI/CD Pipeline</h3> |
|
|
<p class="text-gray-500"> |
|
|
Automated pipelines (GitHub Actions/Jenkins) for building, testing, containerizing (Docker), and deploying to cloud platforms. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">See it in action</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
From Prompt to Production |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-8"> |
|
|
<div class="w-full md:w-1/2 bg-gray-50 p-6 rounded-lg shadow"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">User Input</h3> |
|
|
<div class="mb-6"> |
|
|
<div class="chat-bubble user-bubble p-4 mb-2"> |
|
|
<p>Build a React e-commerce app with product catalog, user authentication, and Stripe payments</p> |
|
|
</div> |
|
|
<div class="chat-bubble ai-bubble p-4"> |
|
|
<p class="font-medium">Processing your request...</p> |
|
|
<div class="flex space-x-2 mt-2"> |
|
|
<div class="w-2 h-2 rounded-full bg-gray-400 pulse-animation"></div> |
|
|
<div class="w-2 h-2 rounded-full bg-gray-400 pulse-animation" style="animation-delay: 0.2s"></div> |
|
|
<div class="w-2 h-2 rounded-full bg-gray-400 pulse-animation" style="animation-delay: 0.4s"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Generated Code</h3> |
|
|
<div class="code-block mb-4"> |
|
|
<pre>// React component for product listing |
|
|
function ProductList({ products }) { |
|
|
return ( |
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
{products.map(product => ( |
|
|
<ProductCard key={product.id} product={product} /> |
|
|
))} |
|
|
</div> |
|
|
); |
|
|
}</pre> |
|
|
</div> |
|
|
|
|
|
<div class="code-block"> |
|
|
<pre>// Node.js API endpoint for Stripe |
|
|
app.post('/api/payment', authenticate, async (req, res) => { |
|
|
const { amount, token } = req.body; |
|
|
const charge = await stripe.charges.create({ |
|
|
amount, |
|
|
currency: 'usd', |
|
|
source: token |
|
|
}); |
|
|
res.json({ success: true, charge }); |
|
|
});</pre> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="w-full md:w-1/2 bg-gray-50 p-6 rounded-lg shadow"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Deployment Process</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> |
|
|
<i class="fas fa-check text-purple-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-sm font-medium text-gray-900">Code Generation Complete</h4> |
|
|
<p class="text-sm text-gray-500">Generated 42 files including React components, Node.js API routes, and MongoDB schemas.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> |
|
|
<i class="fas fa-check text-purple-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-sm font-medium text-gray-900">Static Analysis Passed</h4> |
|
|
<p class="text-sm text-gray-500">ESLint and security scans completed with 0 critical issues found.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> |
|
|
<i class="fas fa-cog text-blue-600 animate-spin"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-sm font-medium text-gray-900">Containerization</h4> |
|
|
<p class="text-sm text-gray-500">Building Docker containers for frontend and backend services.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center"> |
|
|
<i class="fas fa-clock text-gray-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-sm font-medium text-gray-900">Deployment</h4> |
|
|
<p class="text-sm text-gray-500">Waiting for container build to complete...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 border-t border-gray-200 pt-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Preview Environment</h3> |
|
|
<div class="bg-gray-200 rounded-lg p-4 flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-900">Your app will be available at:</p> |
|
|
<p class="text-sm text-purple-600">https://preview-abc123.ai-app-builder.com</p> |
|
|
</div> |
|
|
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium disabled:opacity-50" disabled> |
|
|
Launching... |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Technologies</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Powered by Cutting-Edge Stack |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div class="bg-white p-6 rounded-lg shadow flex flex-col items-center"> |
|
|
<div class="text-4xl mb-4 text-blue-500"> |
|
|
<i class="fab fa-react"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900">React/Vue.js</h3> |
|
|
<p class="text-gray-500 text-sm mt-2 text-center">Modern frontend frameworks for responsive UIs</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow flex flex-col items-center"> |
|
|
<div class="text-4xl mb-4 text-green-500"> |
|
|
<i class="fab fa-node-js"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900">Node.js/FastAPI</h3> |
|
|
<p class="text-gray-500 text-sm mt-2 text-center">Backend services for orchestration</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow flex flex-col items-center"> |
|
|
<div class="text-4xl mb-4 text-purple-500"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900">GPT-4/Mistral</h3> |
|
|
<p class="text-gray-500 text-sm mt-2 text-center">Advanced LLMs for code generation</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow flex flex-col items-center"> |
|
|
<div class="text-4xl mb-4 text-blue-400"> |
|
|
<i class="fab fa-docker"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900">Docker/K8s</h3> |
|
|
<p class="text-gray-500 text-sm mt-2 text-center">Containerization and orchestration</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="gradient-bg"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
<span class="block">Ready to build your app?</span> |
|
|
<span class="block text-purple-200">Start generating code today.</span> |
|
|
</h2> |
|
|
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> |
|
|
<div class="inline-flex rounded-md shadow"> |
|
|
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-purple-50"> |
|
|
Get started |
|
|
</a> |
|
|
</div> |
|
|
<div class="ml-3 inline-flex rounded-md shadow"> |
|
|
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-600 bg-opacity-60 hover:bg-opacity-70"> |
|
|
Live demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-white"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8"> |
|
|
<nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer"> |
|
|
<div class="px-5 py-2"> |
|
|
<a href="#" class="text-base text-gray-500 hover:text-gray-900">About</a> |
|
|
</div> |
|
|
<div class="px-5 py-2"> |
|
|
<a href="#" class="text-base text-gray-500 hover:text-gray-900">Blog</a> |
|
|
</div> |
|
|
<div class="px-5 py-2"> |
|
|
<a href="#" class="text-base text-gray-500 hover:text-gray-900">Jobs</a> |
|
|
</div> |
|
|
<div class="px-5 py-2"> |
|
|
<a href="#" class="text-base text-gray-500 hover:text-gray-900">Press</a> |
|
|
</div> |
|
|
<div class="px-5 py-2"> |
|
|
<a href="#" class="text-base text-gray-500 hover:text-gray-900">Accessibility</a> |
|
|
</div> |
|
|
<div class="px-5 py-2"> |
|
|
<a href="#" class="text-base text-gray-500 hover:text-gray-900">Partners</a> |
|
|
</div> |
|
|
</nav> |
|
|
<div class="mt-8 flex justify-center space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
|
<span class="sr-only">Facebook</span> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
|
<span class="sr-only">Twitter</span> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
|
<span class="sr-only">GitHub</span> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
|
<span class="sr-only">LinkedIn</span> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
</div> |
|
|
<p class="mt-8 text-center text-base text-gray-400"> |
|
|
© 2023 AI App Builder. All rights reserved. |
|
|
</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const generateBtn = document.querySelector('button:contains("Generate App")'); |
|
|
if (generateBtn) { |
|
|
generateBtn.addEventListener('click', function() { |
|
|
const input = document.getElementById('app-description'); |
|
|
if (input.value.trim() !== '') { |
|
|
|
|
|
alert('App generation started! Check the demo section to see the process.'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const chatBubbles = document.querySelectorAll('.chat-bubble'); |
|
|
chatBubbles.forEach(bubble => { |
|
|
bubble.addEventListener('click', function() { |
|
|
this.classList.toggle('opacity-75'); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sproducts/ai-apps" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
