Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Builder Platform - Build Apps & Websites with Plain English</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <!-- Navigation --> | |
| <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"> | |
| <span class="text-2xl font-bold text-purple-600">AI Builder</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="text-gray-600 hover:text-purple-600">Features</a> | |
| <a href="#" class="text-gray-600 hover:text-purple-600">Pricing</a> | |
| <a href="#" class="text-gray-600 hover:text-purple-600">Examples</a> | |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="text-center"> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6">Build Apps & Websites with Plain English</h1> | |
| <p class="text-xl md:text-2xl mb-8 opacity-90">Describe what you want, and our AI will build it instantly. No coding required.</p> | |
| <div class="pulse-animation inline-block"> | |
| <button class="bg-white text-purple-600 px-8 py-4 rounded-full text-lg font-semibold hover:bg-gray-100 transition-colors"> | |
| Start Building Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Builder Interface --> | |
| <section class="py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <!-- Input Section --> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Describe Your Project</h2> | |
| <textarea | |
| class="w-full h-48 p-4 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" | |
| placeholder="Describe exactly what you want to build. For example: 'Create a landing page for my coffee shop with a hero section, menu display, contact form, and location map...'" | |
| ></textarea> | |
| <div class="mt-6 space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Project Type</label> | |
| <select class="w-full p-3 border border-gray-300 rounded-lg"> | |
| <option>Website</option> | |
| <option>Web App</option> | |
| <option>Mobile App</option> | |
| <option>Dashboard</option> | |
| <option>E-commerce</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Style Preferences</label> | |
| <select class="w-full p-3 border border-gray-300 rounded-lg"> | |
| <option>Modern & Clean</option> | |
| <option>Professional</option> | |
| <option>Creative</option> | |
| <option>Minimalist</option> | |
| <option>Bold & Colorful</option> | |
| </select> | |
| </div> | |
| <button class="w-full bg-purple-600 text-white py-3 rounded-lg font-semibold hover:bg-purple-700 transition-colors"> | |
| Generate Project | |
| </button> | |
| <div class="text-xs text-gray-500 text-center mt-4"> | |
| Powered by AI Builder API - Processes natural language to generate complete code | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Section --> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Live Preview</h2> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg h-96 flex items-center justify-center"> | |
| <div class="text-center text-gray-500"> | |
| <i data-feather="eye" class="w-12 h-12 mx-auto mb-4"></i> | |
| <p>Your project preview will appear here</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 space-x-4 flex"> | |
| <button onclick="editCode()" class="flex-1 bg-gray-200 text-gray-700 py-3 rounded-lg font-semibold hover:bg-gray-300 transition-colors" disabled> | |
| Edit Code | |
| </button> | |
| <button onclick="downloadProject()" class="flex-1 bg-green-600 text-white py-3 rounded-lg font-semibold hover:bg-green-700 transition-colors" disabled> | |
| Download Project | |
| </button> | |
| <button onclick="deployProject()" class="flex-1 bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"> | |
| Deploy | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">How It Works</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="edit-3" class="text-purple-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">1. Describe</h3> | |
| <p class="text-gray-600">Tell us what you want to build in plain English. Be as detailed as you like.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="cpu" class="text-purple-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">2. AI Builds</h3> | |
| <p class="text-gray-600">Our advanced AI analyzes your description and generates the complete project.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="download" class="text-purple-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">3. Download</h3> | |
| <p class="text-gray-600">Get clean, production-ready code that you can customize and deploy instantly.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white 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-semibold mb-4">AI Builder</h3> | |
| <p class="text-gray-400">Building the future of no-code development with AI-powered solutions.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Product</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white">Features</a></li> | |
| <li><a href="#" class="hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="hover:text-white">Examples</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Support</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Company</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white">About</a></li> | |
| <li><a href="#" class="hover:text-white">Blog</a></li> | |
| <li><a href="#" class="hover:text-white">Careers</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2024 AI Builder Platform. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // API Configuration | |
| const OPENAI_API_KEY = 'sk-1234qrstuvwxabcd1234qrstuvwxabcd1234qrst'; | |
| const API_BASE_URL = 'https://api.aibuilder.com'; | |
| // State management | |
| let currentProject = null; | |
| let generatedCode = null; | |
| let isAuthenticated = false; | |
| let userToken = localStorage.getItem('userToken'); | |
| // Check authentication status | |
| async function checkAuthStatus() { | |
| if (userToken) { | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/auth/verify`, { | |
| headers: { 'Authorization': `Bearer ${userToken}` } | |
| }); | |
| isAuthenticated = response.ok; | |
| updateAuthUI(); | |
| } catch (error) { | |
| console.error('Auth check failed:', error); | |
| } | |
| } | |
| } | |
| // Update UI based on auth status | |
| function updateAuthUI() { | |
| const navButtons = document.querySelector('.flex.items-center.space-x-4'); | |
| if (isAuthenticated) { | |
| navButtons.innerHTML = ` | |
| <a href="/projects.html" class="text-gray-600 hover:text-purple-600">My Projects</a> | |
| <a href="/profile.html" class="text-gray-600 hover:text-purple-600">Profile</a> | |
| <button onclick="logout()" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition-colors"> | |
| Logout | |
| </button> | |
| `; | |
| } | |
| } | |
| // Generate project function with actual OpenAI API | |
| async function generateProject() { | |
| const description = document.querySelector('textarea').value.trim(); | |
| const projectType = document.querySelectorAll('select')[0].value; | |
| const stylePreference = document.querySelectorAll('select')[1].value; | |
| if (!description) { | |
| alert('Please describe what you want to build'); | |
| return; | |
| } | |
| const previewArea = document.querySelector('.border-dashed'); | |
| previewArea.innerHTML = ` | |
| <div class="text-center"> | |
| <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mx-auto mb-4"></div> | |
| <p class="text-purple-600 font-semibold">AI is building your project...</p> | |
| </div> | |
| `; | |
| try { | |
| const response = await fetch('https://api.openai.com/v1/chat/completions', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': `Bearer ${OPENAI_API_KEY}` | |
| }, | |
| body: JSON.stringify({ | |
| model: "gpt-4", | |
| messages: [{ | |
| role: "system", | |
| content: "You are an expert web developer. Generate complete HTML/CSS/JS code based on the user's description. Include modern design, responsive layout, and best practices." | |
| }, { | |
| role: "user", | |
| content: `Create a ${projectType} with ${stylePreference} style. Requirements: ${description}` | |
| }], | |
| max_tokens: 4000 | |
| }) | |
| }); | |
| const data = await response.json(); | |
| generatedCode = data.choices[0].message.content; | |
| // Save project to backend if authenticated | |
| if (isAuthenticated) { | |
| await saveProjectToBackend({ | |
| name: `${projectType} Project`, | |
| description: description, | |
| code: generatedCode, | |
| type: projectType, | |
| style: stylePreference | |
| }); | |
| } | |
| // Update preview | |
| updateLivePreview(generatedCode); | |
| // Enable download and edit buttons | |
| document.querySelectorAll('button[disabled]').forEach(btn => { | |
| btn.disabled = false; | |
| }); | |
| } catch (error) { | |
| previewArea.innerHTML = ` | |
| <div class="text-center"> | |
| <i data-feather="x-circle" class="w-16 h-16 text-red-500 mx-auto mb-4"></i> | |
| <p class="text-red-600 font-semibold">Error generating project</p> | |
| <p class="text-sm text-gray-600 mt-2">Please try again</p> | |
| </div> | |
| `; | |
| feather.replace(); | |
| } | |
| } | |
| // Save project to backend | |
| async function saveProjectToBackend(projectData) { | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/projects`, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': `Bearer ${userToken}` | |
| }, | |
| body: JSON.stringify(projectData) | |
| }); | |
| currentProject = await response.json(); | |
| } catch (error) { | |
| console.error('Failed to save project:', error); | |
| } | |
| } | |
| // Update live preview with actual code | |
| function updateLivePreview(code) { | |
| const previewArea = document.querySelector('.border-dashed'); | |
| previewArea.innerHTML = ` | |
| <iframe class="w-full h-full border-0 rounded-lg" srcdoc="${encodeURIComponent(code)}"></iframe> | |
| `; | |
| } | |
| // Edit code function with live editor | |
| function editCode() { | |
| if (!generatedCode) return; | |
| const previewArea = document.querySelector('.border-dashed'); | |
| previewArea.innerHTML = ` | |
| <div class="h-full flex flex-col"> | |
| <div class="flex-1 grid grid-cols-2 gap-4"> | |
| <div class="bg-gray-900 rounded-lg p-4"> | |
| <textarea id="codeEditor" class="w-full h-full bg-gray-900 text-white font-mono text-sm resize-none border-0 focus:ring-0" | |
| oninput="updateCodePreview(this.value)">${escapeHtml(generatedCode)}</textarea> | |
| </div> | |
| <div class="bg-white rounded-lg"> | |
| <iframe id="previewFrame" class="w-full h-full border-0" srcdoc="${encodeURIComponent(generatedCode)}"></iframe> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-4"> | |
| <button onclick="saveEditedCode()" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700"> | |
| Save Changes | |
| </button> | |
| <button onclick="resetPreview()" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700"> | |
| Reset | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| // Update code preview in real-time | |
| function updateCodePreview(code) { | |
| const previewFrame = document.getElementById('previewFrame'); | |
| if (previewFrame) { | |
| previewFrame.srcdoc = encodeURIComponent(code); | |
| generatedCode = code; | |
| } | |
| } | |
| // Save edited code | |
| async function saveEditedCode() { | |
| if (!generatedCode || !isAuthenticated) return; | |
| try { | |
| await fetch(`${API_BASE_URL}/projects/${currentProject.id}`, { | |
| method: 'PUT', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': `Bearer ${userToken}` | |
| }, | |
| body: JSON.stringify({ code: generatedCode }) | |
| }); | |
| alert('Changes saved successfully!'); | |
| } catch (error) { | |
| alert('Failed to save changes'); | |
| } | |
| } | |
| // Reset preview to original | |
| function resetPreview() { | |
| updateLivePreview(generatedCode); | |
| } | |
| // Download project function with multiple format options | |
| function downloadProject() { | |
| if (!generatedCode) return; | |
| const projectName = currentProject?.name || 'ai-project'; | |
| // Create ZIP with multiple files | |
| const zip = new JSZip(); | |
| zip.file('index.html', generatedCode); | |
| zip.file('README.md', `# ${projectName}\n\nGenerated with AI Builder Platform\n\n## Project Details\n- Type: ${document.querySelectorAll('select')[0].value}\n- Style: ${document.querySelectorAll('select')[1].value}\n- Generated: ${new Date().toLocaleDateString()}`); | |
| zip.generateAsync({type: 'blob'}).then(function(content) { | |
| const url = URL.createObjectURL(content); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `${projectName}.zip`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| }); | |
| } | |
| // Deploy project to Netlify/Vercel | |
| async function deployProject() { | |
| if (!generatedCode) return; | |
| try { | |
| const deployResponse = await fetch(`${API_BASE_URL}/deploy`, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': `Bearer ${userToken}` | |
| }, | |
| body: JSON.stringify({ | |
| code: generatedCode, | |
| projectName: currentProject?.name || 'ai-project' | |
| }) | |
| }); | |
| const deployment = await deployResponse.json(); | |
| if (deployment.url) { | |
| alert(`Project deployed successfully!\nURL: ${deployment.url}`); | |
| window.open(deployment.url, '_blank'); | |
| } else { | |
| alert('Deployment in progress... Check your dashboard for status.'); | |
| } | |
| } catch (error) { | |
| alert('Deployment failed: ' + error.message); | |
| } | |
| } | |
| // Authentication functions | |
| async function login() { | |
| const email = prompt('Enter your email:'); | |
| const password = prompt('Enter your password:'); | |
| if (email && password) { | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/auth/login`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ email, password }) | |
| }); | |
| if (response.ok) { | |
| const data = await response.json(); | |
| userToken = data.token; | |
| localStorage.setItem('userToken', userToken); | |
| isAuthenticated = true; | |
| updateAuthUI(); | |
| alert('Login successful!'); | |
| } else { | |
| alert('Login failed'); | |
| } | |
| } catch (error) { | |
| alert('Login error: ' + error.message); | |
| } | |
| } | |
| } | |
| async function register() { | |
| const email = prompt('Enter your email:'); | |
| const password = prompt('Enter your password:'); | |
| const name = prompt('Enter your name:'); | |
| if (email && password && name) { | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/auth/register`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ email, password, name }) | |
| }); | |
| if (response.ok) { | |
| alert('Registration successful! Please login.'); | |
| } else { | |
| alert('Registration failed'); | |
| } | |
| } catch (error) { | |
| alert('Registration error: ' + error.message); | |
| } | |
| } | |
| } | |
| function logout() { | |
| localStorage.removeItem('userToken'); | |
| userToken = null; | |
| isAuthenticated = false; | |
| updateAuthUI(); | |
| alert('Logged out successfully'); | |
| } | |
| // Helper functions | |
| function escapeHtml(unsafe) { | |
| return unsafe | |
| .replace(/&/g, "&") | |
| .replace(/</g, "<") | |
| .replace(/>/g, ">") | |
| .replace(/"/g, """) | |
| .replace(/'/g, "'"); | |
| } | |
| // Event listeners and initialization | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Add JSZip for download functionality | |
| const script = document.createElement('script'); | |
| script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js'; | |
| document.head.appendChild(script); | |
| // Update generate button | |
| const generateBtn = document.querySelector('button'); | |
| if (generateBtn) generateBtn.setAttribute('onclick', 'generateProject()'); | |
| // Update other buttons | |
| const editBtn = document.querySelector('[onclick*="editCode"]'); | |
| if (editBtn) editBtn.setAttribute('onclick', 'editCode()'); | |
| const downloadBtn = document.querySelector('[onclick*="downloadProject"]'); | |
| if (downloadBtn) downloadBtn.setAttribute('onclick', 'downloadProject()'); | |
| const deployBtn = document.querySelector('[onclick*="deployProject"]'); | |
| if (deployBtn) deployBtn.setAttribute('onclick', 'deployProject()'); | |
| // Check auth status | |
| checkAuthStatus(); | |
| // Add auth buttons if not authenticated | |
| if (!isAuthenticated) { | |
| const navButtons = document.querySelector('.flex.items-center.space-x-4'); | |
| navButtons.innerHTML += ` | |
| <button onclick="login()" class="text-gray-600 hover:text-purple-600">Login</button> | |
| <button onclick="register()" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700"> | |
| Sign Up | |
| </button> | |
| `; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |