Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ultimate Website Generator</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, #a777e3); | |
| } | |
| .preview-frame { | |
| border: 2px solid #e2e8f0; | |
| border-radius: 0.5rem; | |
| height: 500px; | |
| background: white; | |
| } | |
| .typing-cursor { | |
| display: inline-block; | |
| width: 10px; | |
| height: 20px; | |
| background: #4f46e5; | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(167, 119, 227, 0.7); | |
| } | |
| .code-editor { | |
| font-family: 'Courier New', Courier, monospace; | |
| background: #1e293b; | |
| color: #f8fafc; | |
| } | |
| .ai-thinking { | |
| background: linear-gradient(90deg, #6e8efb, #a777e3, #6e8efb); | |
| background-size: 200% auto; | |
| animation: shimmer 2s linear infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: 0% center; } | |
| 100% { background-position: 200% center; } | |
| } | |
| .style-btn.active { | |
| background-color: #6e8efb; | |
| color: white; | |
| border-color: #6e8efb; | |
| } | |
| .tab-btn.active { | |
| background-color: #4f46e5; | |
| color: white; | |
| } | |
| #preview-frame { | |
| transition: width 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="gradient-bg text-white py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center"> | |
| <h1 class="text-4xl font-bold">ULTIMATE <span class="text-yellow-300">AI</span> WEBSITE GENERATOR</h1> | |
| <div class="flex space-x-4"> | |
| <button id="save-btn" class="bg-white text-purple-700 px-4 py-2 rounded-lg font-semibold hover:bg-purple-100 transition"> | |
| <i class="fas fa-save mr-2"></i>Save Project | |
| </button> | |
| <button id="turbo-btn" class="bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-yellow-300 transition"> | |
| <i class="fas fa-bolt mr-2"></i>Turbo Mode | |
| </button> | |
| </div> | |
| </div> | |
| <p class="mt-2 text-lg opacity-90">Combine all AI powers in one place to create stunning websites instantly</p> | |
| </div> | |
| </div> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Panel - Description Input --> | |
| <div class="lg:col-span-1 bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-magic mr-2 text-purple-600"></i> Describe Your Website | |
| </h2> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Website Type</label> | |
| <select id="website-type" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> | |
| <option value="business">Business Website</option> | |
| <option value="ecommerce">E-commerce Store</option> | |
| <option value="portfolio">Portfolio</option> | |
| <option value="blog">Blog</option> | |
| <option value="landing">Landing Page</option> | |
| <option value="webapp">Web Application</option> | |
| <option value="custom">Custom</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Style Preferences</label> | |
| <div class="grid grid-cols-3 gap-2" id="style-buttons"> | |
| <button data-style="modern" class="style-btn p-2 border rounded-lg hover:bg-gray-100">Modern</button> | |
| <button data-style="minimal" class="style-btn p-2 border rounded-lg hover:bg-gray-100">Minimal</button> | |
| <button data-style="vibrant" class="style-btn p-2 border rounded-lg hover:bg-gray-100">Vibrant</button> | |
| <button data-style="elegant" class="style-btn p-2 border rounded-lg hover:bg-gray-100">Elegant</button> | |
| <button data-style="dark" class="style-btn p-2 border rounded-lg hover:bg-gray-100">Dark</button> | |
| <button data-style="custom" class="style-btn p-2 border rounded-lg hover:bg-gray-100">Custom</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Step-by-Step Description</label> | |
| <div class="space-y-4" id="description-steps"> | |
| <div class="flex items-start"> | |
| <span class="bg-purple-600 text-white rounded-full w-6 h-6 flex items-center justify-center mt-1 mr-2 text-sm">1</span> | |
| <textarea class="step-input w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="First, I want a hero section with..." rows="2"></textarea> | |
| </div> | |
| <div class="flex items-start"> | |
| <span class="bg-purple-600 text-white rounded-full w-6 h-6 flex items-center justify-center mt-1 mr-2 text-sm">2</span> | |
| <textarea class="step-input w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Then add a features section that..." rows="2"></textarea> | |
| </div> | |
| </div> | |
| <button id="add-step" class="mt-2 text-purple-600 hover:text-purple-800 font-medium flex items-center"> | |
| <i class="fas fa-plus-circle mr-2"></i> Add Another Step | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Advanced Options</label> | |
| <div class="space-y-3"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" id="animations-checkbox" class="form-checkbox h-5 w-5 text-purple-600"> | |
| <span class="ml-2">Include Animations</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" id="responsive-checkbox" checked class="form-checkbox h-5 w-5 text-purple-600"> | |
| <span class="ml-2">Make Responsive</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" id="seo-checkbox" checked class="form-checkbox h-5 w-5 text-purple-600"> | |
| <span class="ml-2">SEO Optimized</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" id="darkmode-checkbox" class="form-checkbox h-5 w-5 text-purple-600"> | |
| <span class="ml-2">Dark Mode Toggle</span> | |
| </label> | |
| </div> | |
| </div> | |
| <button id="generate-btn" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 px-4 rounded-lg font-bold text-lg transition-all duration-300 transform hover:scale-105 glow"> | |
| <i class="fas fa-bolt mr-2"></i> GENERATE WEBSITE | |
| </button> | |
| </div> | |
| <!-- Middle Panel - Real-Time Preview --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="flex justify-between items-center bg-gray-800 text-white px-4 py-3"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-sm">Live Preview</div> | |
| <div class="flex space-x-2"> | |
| <button id="desktop-view" class="tab-btn active px-3 py-1 rounded text-gray-300 hover:text-white"> | |
| <i class="fas fa-desktop"></i> | |
| </button> | |
| <button id="tablet-view" class="tab-btn px-3 py-1 rounded text-gray-300 hover:text-white"> | |
| <i class="fas fa-tablet-alt"></i> | |
| </button> | |
| <button id="mobile-view" class="tab-btn px-3 py-1 rounded text-gray-300 hover:text-white"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="preview-frame" id="preview-frame"> | |
| <iframe src="about:blank" class="w-full h-full" id="live-preview"></iframe> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="flex justify-between items-center bg-gray-800 text-white px-4 py-3"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-code mr-2"></i> | |
| <span>Generated Code</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button id="copy-code" class="text-gray-300 hover:text-white px-3 py-1 rounded"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| <button id="download-code" class="text-gray-300 hover:text-white px-3 py-1 rounded"> | |
| <i class="fas fa-download mr-1"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| <div class="code-editor p-4 overflow-auto" style="height: 300px;"> | |
| <pre id="generated-code"><code class="language-html">// Your generated website code will appear here</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Processing Section --> | |
| <div id="ai-processing" class="hidden mt-8 bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="ai-thinking text-white px-6 py-4 flex items-center"> | |
| <i class="fas fa-brain text-2xl mr-4"></i> | |
| <div class="flex-1"> | |
| <div class="font-bold text-lg">AI is processing your request</div> | |
| <div class="text-sm opacity-90">Combining multiple AI models for the best results...</div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-white opacity-75 animate-bounce" style="animation-delay: 0s;"></div> | |
| <div class="w-2 h-2 rounded-full bg-white opacity-75 animate-bounce" style="animation-delay: 0.2s;"></div> | |
| <div class="w-2 h-2 rounded-full bg-white opacity-75 animate-bounce" style="animation-delay: 0.4s;"></div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div> | |
| <span class="font-medium">GPT-5</span> | |
| </div> | |
| <div class="text-sm text-gray-600" id="gpt-status">Analyzing content structure...</div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="font-medium">DALL-E 3</span> | |
| </div> | |
| <div class="text-sm text-gray-600" id="dalle-status">Generating visual assets...</div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div> | |
| <span class="font-medium">Claude 3</span> | |
| </div> | |
| <div class="text-sm text-gray-600" id="claude-status">Optimizing UX flow...</div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <span class="font-medium">Gemini 2</span> | |
| </div> | |
| <div class="text-sm text-gray-600" id="gemini-status">Enhancing interactivity...</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Current state | |
| let currentState = { | |
| websiteType: 'business', | |
| style: 'modern', | |
| steps: [], | |
| options: { | |
| animations: false, | |
| responsive: true, | |
| seo: true, | |
| darkMode: false | |
| }, | |
| turboMode: false, | |
| deviceView: 'desktop' | |
| }; | |
| // DOM Elements | |
| const saveBtn = document.getElementById('save-btn'); | |
| const turboBtn = document.getElementById('turbo-btn'); | |
| const websiteTypeSelect = document.getElementById('website-type'); | |
| const styleButtons = document.querySelectorAll('.style-btn'); | |
| const addStepBtn = document.getElementById('add-step'); | |
| const stepsContainer = document.getElementById('description-steps'); | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const aiProcessing = document.getElementById('ai-processing'); | |
| const previewFrame = document.getElementById('live-preview'); | |
| const generatedCode = document.getElementById('generated-code'); | |
| const copyCodeBtn = document.getElementById('copy-code'); | |
| const downloadCodeBtn = document.getElementById('download-code'); | |
| const desktopViewBtn = document.getElementById('desktop-view'); | |
| const tabletViewBtn = document.getElementById('tablet-view'); | |
| const mobileViewBtn = document.getElementById('mobile-view'); | |
| const animationsCheckbox = document.getElementById('animations-checkbox'); | |
| const responsiveCheckbox = document.getElementById('responsive-checkbox'); | |
| const seoCheckbox = document.getElementById('seo-checkbox'); | |
| const darkmodeCheckbox = document.getElementById('darkmode-checkbox'); | |
| // Initialize style buttons | |
| document.querySelector('.style-btn[data-style="modern"]').classList.add('active'); | |
| // Event Listeners | |
| saveBtn.addEventListener('click', saveProject); | |
| turboBtn.addEventListener('click', toggleTurboMode); | |
| websiteTypeSelect.addEventListener('change', updateWebsiteType); | |
| styleButtons.forEach(btn => btn.addEventListener('click', selectStyle)); | |
| addStepBtn.addEventListener('click', addNewStep); | |
| generateBtn.addEventListener('click', generateWebsite); | |
| copyCodeBtn.addEventListener('click', copyGeneratedCode); | |
| downloadCodeBtn.addEventListener('click', downloadGeneratedCode); | |
| desktopViewBtn.addEventListener('click', () => changeDeviceView('desktop')); | |
| tabletViewBtn.addEventListener('click', () => changeDeviceView('tablet')); | |
| mobileViewBtn.addEventListener('click', () => changeDeviceView('mobile')); | |
| animationsCheckbox.addEventListener('change', updateOptions); | |
| responsiveCheckbox.addEventListener('change', updateOptions); | |
| seoCheckbox.addEventListener('change', updateOptions); | |
| darkmodeCheckbox.addEventListener('change', updateOptions); | |
| // Initialize step inputs | |
| document.querySelectorAll('.step-input').forEach(input => { | |
| input.addEventListener('input', updateSteps); | |
| }); | |
| // Functions | |
| function saveProject() { | |
| alert('Project saved successfully!'); | |
| // In a real app, this would save to localStorage or a database | |
| } | |
| function toggleTurboMode() { | |
| currentState.turboMode = !currentState.turboMode; | |
| turboBtn.classList.toggle('bg-yellow-400'); | |
| turboBtn.classList.toggle('bg-yellow-500'); | |
| turboBtn.innerHTML = currentState.turboMode | |
| ? '<i class="fas fa-bolt mr-2"></i> Turbo Mode ON' | |
| : '<i class="fas fa-bolt mr-2"></i> Turbo Mode'; | |
| alert(`Turbo Mode ${currentState.turboMode ? 'activated' : 'deactivated'}`); | |
| } | |
| function updateWebsiteType() { | |
| currentState.websiteType = websiteTypeSelect.value; | |
| } | |
| function selectStyle(e) { | |
| const selectedStyle = e.target.dataset.style; | |
| currentState.style = selectedStyle; | |
| // Update UI | |
| styleButtons.forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| e.target.classList.add('active'); | |
| } | |
| function addNewStep() { | |
| const stepCount = stepsContainer.children.length + 1; | |
| const newStep = document.createElement('div'); | |
| newStep.className = 'flex items-start'; | |
| newStep.innerHTML = ` | |
| <span class="bg-purple-600 text-white rounded-full w-6 h-6 flex items-center justify-center mt-1 mr-2 text-sm">${stepCount}</span> | |
| <textarea class="step-input w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Then I want..." rows="2"></textarea> | |
| `; | |
| stepsContainer.appendChild(newStep); | |
| // Add event listener to the new input | |
| newStep.querySelector('.step-input').addEventListener('input', updateSteps); | |
| } | |
| function updateSteps() { | |
| currentState.steps = Array.from(document.querySelectorAll('.step-input')).map(input => input.value); | |
| } | |
| function updateOptions() { | |
| currentState.options = { | |
| animations: animationsCheckbox.checked, | |
| responsive: responsiveCheckbox.checked, | |
| seo: seoCheckbox.checked, | |
| darkMode: darkmodeCheckbox.checked | |
| }; | |
| } | |
| function changeDeviceView(device) { | |
| currentState.deviceView = device; | |
| // Update UI | |
| [desktopViewBtn, tabletViewBtn, mobileViewBtn].forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| if (device === 'desktop') { | |
| desktopViewBtn.classList.add('active'); | |
| document.getElementById('preview-frame').style.width = '100%'; | |
| } else if (device === 'tablet') { | |
| tabletViewBtn.classList.add('active'); | |
| document.getElementById('preview-frame').style.width = '768px'; | |
| } else { | |
| mobileViewBtn.classList.add('active'); | |
| document.getElementById('preview-frame').style.width = '375px'; | |
| } | |
| } | |
| function generateWebsite() { | |
| updateSteps(); | |
| updateOptions(); | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const aiProcessing = document.getElementById('ai-processing'); | |
| // Show AI processing | |
| aiProcessing.classList.remove('hidden'); | |
| generateBtn.disabled = true; | |
| generateBtn.innerHTML = '<i class="fas fa-cog fa-spin mr-2"></i> GENERATING...'; | |
| // Simulate AI processing | |
| const statuses = [ | |
| "Analyzing your requirements...", | |
| "Designing layout structure...", | |
| "Generating color scheme...", | |
| "Creating responsive components...", | |
| "Optimizing for performance...", | |
| "Finalizing design elements..." | |
| ]; | |
| let currentStatus = 0; | |
| const statusInterval = setInterval(() => { | |
| document.getElementById('gpt-status').textContent = statuses[currentStatus % statuses.length]; | |
| document.getElementById('dalle-status').textContent = statuses[(currentStatus + 1) % statuses.length]; | |
| document.getElementById('claude-status').textContent = statuses[(currentStatus + 2) % statuses.length]; | |
| document.getElementById('gemini-status').textContent = statuses[(currentStatus + 3) % statuses.length]; | |
| currentStatus++; | |
| }, 1500); | |
| // After delay, show the result | |
| setTimeout(() => { | |
| clearInterval(statusInterval); | |
| // Generate sample website based on inputs | |
| const sampleHTML = generateSampleHTML(); | |
| // Update preview and code | |
| const previewDoc = previewFrame.contentDocument || previewFrame.contentWindow.document; | |
| previewDoc.open(); | |
| previewDoc.write(sampleHTML); | |
| previewDoc.close(); | |
| generatedCode.textContent = sampleHTML; | |
| // Hide processing and enable button | |
| aiProcessing.classList.add('hidden'); | |
| generateBtn.disabled = false; | |
| generateBtn.innerHTML = '<i class="fas fa-bolt mr-2"></i> GENERATE WEBSITE'; | |
| }, 5000); | |
| } | |
| function generateSampleHTML() { | |
| // Get user inputs | |
| const steps = currentState.steps.filter(step => step.trim() !== ''); | |
| const hasHero = steps.some(step => step.toLowerCase().includes('hero')); | |
| const hasFeatures = steps.some(step => step.toLowerCase().includes('feature')); | |
| // Generate title based on website type | |
| const titles = { | |
| business: "Professional Business Website", | |
| ecommerce: "Online Store", | |
| portfolio: "Creative Portfolio", | |
| blog: "Personal Blog", | |
| landing: "High-Converting Landing Page", | |
| webapp: "Web Application", | |
| custom: "Custom Website" | |
| }; | |
| const title = titles[currentState.websiteType] || "My Website"; | |
| // Generate style based on preference | |
| const styles = { | |
| modern: ` | |
| .hero { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| } | |
| .feature-card { | |
| transition: transform 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| `, | |
| minimal: ` | |
| body { | |
| font-family: 'Helvetica Neue', sans-serif; | |
| } | |
| .hero { | |
| background: white; | |
| color: #333; | |
| } | |
| .feature-card { | |
| border: 1px solid #e2e8f0; | |
| } | |
| `, | |
| vibrant: ` | |
| .hero { | |
| background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%); | |
| color: white; | |
| } | |
| .feature-card { | |
| background: white; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| `, | |
| elegant: ` | |
| body { | |
| font-family: 'Georgia', serif; | |
| } | |
| .hero { | |
| background: linear-gradient(to right, #434343 0%, black 100%); | |
| color: white; | |
| } | |
| .feature-card { | |
| background: #f8f9fa; | |
| border-left: 4px solid #6c757d; | |
| } | |
| `, | |
| dark: ` | |
| body { | |
| background-color: #1a202c; | |
| color: #e2e8f0; | |
| } | |
| .hero { | |
| background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); | |
| color: white; | |
| } | |
| .feature-card { | |
| background: #2d3748; | |
| color: #e2e8f0; | |
| } | |
| `, | |
| custom: ` | |
| .hero { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| color: white; | |
| } | |
| .feature-card { | |
| background: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| ` | |
| }; | |
| const style = styles[currentState.style] || styles.modern; | |
| // Generate animations if enabled | |
| const animations = currentState.options.animations ? ` | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 1s ease-in; | |
| } | |
| ` : ''; | |
| // Generate dark mode if enabled | |
| const darkModeToggle = currentState.options.darkMode ? ` | |
| <button id="dark-mode-toggle" class="fixed bottom-4 right-4 bg-gray-800 text-white p-3 rounded-full shadow-lg"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| ` : ''; | |
| const darkModeScript = currentState.options.darkMode ? ` | |
| <script> | |
| const darkModeToggle = document.getElementById('dark-mode-toggle'); | |
| darkModeToggle.addEventListener('click', () => { | |
| document.body.classList.toggle('dark-mode'); | |
| const icon = darkModeToggle.querySelector('i'); | |
| if (document.body.classList.contains('dark-mode')) { | |
| icon.classList.remove('fa-moon'); | |
| icon.classList.add('fa-sun'); | |
| } else { | |
| icon.classList.remove('fa-sun'); | |
| icon.classList.add('fa-moon'); | |
| } | |
| }); | |
| <\/script> | |
| ` : ''; | |
| // Generate HTML structure | |
| let html = `<!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>${title}</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> | |
| ${style} | |
| ${animations} | |
| .dark-mode { | |
| background-color: #1a202c; | |
| color: #e2e8f0; | |
| } | |
| .dark-mode .hero { | |
| background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); | |
| } | |
| .dark-mode .feature-card { | |
| background: #2d3748; | |
| color: #e2e8f0; | |
| } | |
| </style> | |
| </head> | |
| <body class="${currentState.style === 'dark' ? 'bg-gray-900 text-white' : 'bg-white text-gray-800'}"> | |
| ${hasHero ? ` | |
| <!-- Hero Section --> | |
| <section class="hero py-20 px-4 text-center ${currentState.options.animations ? 'animate-fade-in' : ''}"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Welcome to ${title}</h1> | |
| <p class="text-xl mb-8">${steps[0] || 'A beautifully designed website created with AI'}</p> | |
| <button class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-3 rounded-full text-lg font-semibold transition-all duration-300 transform hover:scale-105"> | |
| Get Started | |
| </button> | |
| </div> | |
| </section> | |
| ` : ''} | |
| ${hasFeatures ? ` | |
| <!-- Features Section --> | |
| <section class="py-16 px-4 ${currentState.options.animations ? 'animate-fade-in' : ''}"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Key Features</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="feature-card p-8 rounded-lg"> | |
| <div class="text-purple-600 text-4xl mb-4"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">${steps[1] ? steps[1].split(' ').slice(0, 3).join(' ') : 'Fast Performance'}</h3> | |
| <p>${steps[1] || 'Our website is optimized for blazing fast loading speeds.'}</p> | |
| </div> | |
| <div class="feature-card p-8 rounded-lg"> | |
| <div class="text-purple-600 text-4xl mb-4"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">${currentState.options.responsive ? 'Responsive Design' : 'Mobile Friendly'}</h3> | |
| <p>${steps[1] ? steps[1].split(' ').slice(0, 10).join(' ') : 'Looks great on all devices from desktop to mobile.'}</p> | |
| </div> | |
| <div class="feature-card p-8 rounded-lg"> | |
| <div class="text-purple-600 text-4xl mb-4"> | |
| <i class="fas fa-cog"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">${currentState.options.seo ? 'SEO Optimized' : 'Customizable'}</h3> | |
| <p>${steps[1] ? steps[1].split(' ').slice(0, 8).join(' ') : 'Easily customize to fit your brand and needs.'}</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| ` : ''} | |
| <!-- CTA Section --> | |
| <section class="py-16 px-4 bg-gray-100 ${currentState.style === 'dark' ? 'bg-gray-800' : ''} ${currentState.options.animations ? 'animate-fade-in' : ''}"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to get started?</h2> | |
| <p class="text-xl mb-8">Join thousands of satisfied customers today.</p> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3 rounded-full text-lg font-semibold transition-all duration-300 transform hover:scale-105"> | |
| Contact Us | |
| </button> | |
| </div> | |
| </section> | |
| ${darkModeToggle} | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"><\/script> | |
| ${darkModeScript} | |
| <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=docto41/ultimate-ai-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |