| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Website Builder | Create Sites Without Code</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-window { |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| border-radius: 12px; |
| overflow: hidden; |
| } |
| .floating-input { |
| transition: all 0.3s ease; |
| } |
| .floating-input:focus { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| .ai-thinking { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { opacity: 0.6; } |
| 50% { opacity: 1; } |
| 100% { opacity: 0.6; } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen bg-gray-50"> |
| |
| <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 Site Creator</span> |
| </div> |
| </div> |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> |
| <button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
| Try Premium |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="gradient-bg"> |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-24"> |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> |
| <div class="mb-8 lg:mb-0"> |
| <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl"> |
| Build Your Perfect Website |
| </h1> |
| <p class="mt-3 max-w-md mx-auto text-lg text-purple-100 sm:text-xl md:mt-5 md:max-w-3xl"> |
| Our AI creates beautiful, responsive websites in minutes - no coding required. |
| </p> |
| <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> |
| <p class="text-base font-medium text-white"> |
| Trusted by 50,000+ businesses worldwide |
| </p> |
| </div> |
| </div> |
| <div class="relative"> |
| <div class="preview-window bg-white p-4"> |
| <div class="flex justify-between items-center mb-4"> |
| <div class="flex space-x-2"> |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| </div> |
| <div class="text-sm text-gray-500">Your AI-Generated Site</div> |
| </div> |
| <div id="site-preview" class="h-64 bg-gray-100 rounded-lg flex items-center justify-center"> |
| <p class="text-gray-500">Your website preview will appear here</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
| <div class="lg:grid lg:grid-cols-3 lg:gap-8"> |
| <div class="lg:col-span-2"> |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
| Tell us about your website |
| </h2> |
| <p class="mt-3 text-xl text-gray-500"> |
| The more details you provide, the better our AI can create your perfect site. |
| </p> |
|
|
| <div class="mt-8 space-y-6"> |
| <div> |
| <label for="business-type" class="block text-sm font-medium text-gray-700">What type of website do you need?</label> |
| <select id="business-type" class="mt-1 block w-full pl-3 pr-10 py-3 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md floating-input"> |
| <option>Business Website</option> |
| <option>Portfolio</option> |
| <option>E-commerce Store</option> |
| <option>Blog</option> |
| <option>Personal Site</option> |
| <option>Landing Page</option> |
| </select> |
| </div> |
|
|
| <div> |
| <label for="business-name" class="block text-sm font-medium text-gray-700">Business/Project Name</label> |
| <input type="text" id="business-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:outline-none focus:ring-purple-500 focus:border-purple-500 floating-input" placeholder="e.g. Sarah's Bakery"> |
| </div> |
|
|
| <div> |
| <label for="business-desc" class="block text-sm font-medium text-gray-700">Describe your business/project</label> |
| <textarea id="business-desc" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:outline-none focus:ring-purple-500 focus:border-purple-500 floating-input" placeholder="e.g. We specialize in artisanal breads and pastries, using organic ingredients..."></textarea> |
| </div> |
|
|
| <div> |
| <label for="color-pref" class="block text-sm font-medium text-gray-700">Color Preferences</label> |
| <div class="mt-2 flex space-x-2"> |
| <button class="w-8 h-8 rounded-full bg-blue-600 border-2 border-transparent hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" data-color="blue"></button> |
| <button class="w-8 h-8 rounded-full bg-purple-600 border-2 border-transparent hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" data-color="purple"></button> |
| <button class="w-8 h-8 rounded-full bg-green-600 border-2 border-transparent hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" data-color="green"></button> |
| <button class="w-8 h-8 rounded-full bg-red-600 border-2 border-transparent hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" data-color="red"></button> |
| <button class="w-8 h-8 rounded-full bg-yellow-500 border-2 border-transparent hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500" data-color="yellow"></button> |
| </div> |
| </div> |
|
|
| <div> |
| <label class="block text-sm font-medium text-gray-700">Additional Features</label> |
| <div class="mt-2 space-y-2"> |
| <div class="flex items-center"> |
| <input id="contact-form" name="contact-form" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> |
| <label for="contact-form" class="ml-2 block text-sm text-gray-700">Contact Form</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="gallery" name="gallery" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> |
| <label for="gallery" class="ml-2 block text-sm text-gray-700">Photo Gallery</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="blog" name="blog" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> |
| <label for="blog" class="ml-2 block text-sm text-gray-700">Blog Section</label> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-8 lg:mt-0"> |
| <div class="bg-white shadow rounded-lg p-6 sticky top-6"> |
| <h3 class="text-lg font-medium text-gray-900">Your AI-Generated Website</h3> |
| <p class="mt-1 text-sm text-gray-500">Preview and customize your site before publishing</p> |
| |
| <div class="mt-6"> |
| <button id="generate-btn" class="w-full flex justify-center items-center px-6 py-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
| <i class="fas fa-robot mr-2"></i> Generate Website |
| </button> |
| </div> |
|
|
| <div id="ai-loading" class="mt-6 hidden"> |
| <div class="flex items-center space-x-2 text-purple-600 ai-thinking"> |
| <i class="fas fa-cog fa-spin"></i> |
| <span>AI is designing your perfect website...</span> |
| </div> |
| <div class="mt-4 w-full bg-gray-200 rounded-full h-2.5"> |
| <div id="progress-bar" class="bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
|
|
| <div id="result-section" class="mt-6 hidden"> |
| <div class="rounded-md bg-green-50 p-4"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-400"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-green-800">Website Generated Successfully!</h3> |
| <div class="mt-2 text-sm text-green-700"> |
| <p>Your AI-generated website is ready to preview and customize.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-4 space-y-4"> |
| <button class="w-full flex justify-center items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
| <i class="fas fa-eye mr-2"></i> Preview Website |
| </button> |
| <button class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
| <i class="fas fa-pencil-alt mr-2"></i> Customize Design |
| </button> |
| <button class="w-full flex justify-center items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-purple-700 bg-purple-100 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
| <i class="fas fa-cloud-upload-alt mr-2"></i> Publish Now |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-50 py-12"> |
| <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"> |
| Why choose our AI Website Builder |
| </p> |
| </div> |
|
|
| <div class="mt-10"> |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 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-bolt"></i> |
| </div> |
| <div class="ml-16"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Instant Creation</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Generate a complete, responsive website in under 2 minutes with our advanced AI technology. |
| </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-mobile-alt"></i> |
| </div> |
| <div class="ml-16"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Mobile Optimized</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Every site is automatically optimized for all devices, from desktop to mobile. |
| </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-palette"></i> |
| </div> |
| <div class="ml-16"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Custom Designs</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Our AI creates unique designs tailored to your brand, not cookie-cutter templates. |
| </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-search"></i> |
| </div> |
| <div class="ml-16"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">SEO Ready</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Built-in SEO optimization helps your site rank higher in search results. |
| </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-server"></i> |
| </div> |
| <div class="ml-16"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Hosting Included</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Free hosting with SSL certificate included with every website. |
| </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-sync-alt"></i> |
| </div> |
| <div class="ml-16"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Easy Updates</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Change content, colors, and layouts anytime with our simple editor. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-white"> |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
| <div class="xl:grid xl:grid-cols-3 xl:gap-8"> |
| <div class="space-y-8 xl:col-span-1"> |
| <div class="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 Site Creator</span> |
| </div> |
| <p class="text-gray-500 text-base"> |
| The future of website building is here. Let AI do the work for you. |
| </p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| </div> |
| <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2"> |
| <div class="md:grid md:grid-cols-2 md:gap-8"> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase"> |
| Product |
| </h3> |
| <div class="mt-4 space-y-4"> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900 block"> |
| Features |
| </a> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900 block"> |
| Pricing |
| </a> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900 block"> |
| Templates |
| </a> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900 block"> |
| Integrations |
| </a> |
| </div> |
| </div> |
| <div class="mt-12 md:mt-0"> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase"> |
| Company |
| </h3> |
| <div class="mt-4 space-y-4"> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900 block"> |
| About |
| </a> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900 block"> |
| Blog |
| </a> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900 block"> |
| Careers |
| </a> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900 block"> |
| Contact |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="md:grid md:grid-cols-2 md:gap-8"> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase"> |
| Resources |
| </h3> |
| <div class="mt-4 space-y-4"> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900 block"> |
| Help Center |
| </a> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900 block"> |
| Guides |
| </a> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900 block"> |
| Webinars |
| </a> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900 block"> |
| Community |
| </a> |
| </div> |
| </div> |
| <div class="mt-12 md:mt-0"> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase"> |
| Legal |
| </h3> |
| <div class="mt-4 space-y-4"> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900 block"> |
| Privacy |
| </a> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900 block"> |
| Terms |
| </a> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900 block"> |
| Cookie Policy |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-12 border-t border-gray-200 pt-8"> |
| <p class="text-base text-gray-400 text-center"> |
| © 2023 AI Site Creator. All rights reserved. |
| </p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const generateBtn = document.getElementById('generate-btn'); |
| const aiLoading = document.getElementById('ai-loading'); |
| const resultSection = document.getElementById('result-section'); |
| const progressBar = document.getElementById('progress-bar'); |
| const sitePreview = document.getElementById('site-preview'); |
| |
| |
| const colorButtons = document.querySelectorAll('[data-color]'); |
| colorButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| colorButtons.forEach(btn => btn.classList.remove('border-gray-800')); |
| this.classList.add('border-gray-800'); |
| }); |
| }); |
| |
| |
| generateBtn.addEventListener('click', function() { |
| |
| aiLoading.classList.remove('hidden'); |
| resultSection.classList.add('hidden'); |
| generateBtn.disabled = true; |
| |
| |
| let progress = 0; |
| const interval = setInterval(() => { |
| progress += Math.random() * 10; |
| if (progress > 100) progress = 100; |
| progressBar.style.width = `${progress}%`; |
| |
| if (progress === 100) { |
| clearInterval(interval); |
| |
| |
| setTimeout(() => { |
| aiLoading.classList.add('hidden'); |
| resultSection.classList.remove('hidden'); |
| generateBtn.disabled = false; |
| |
| |
| const businessName = document.getElementById('business-name').value || 'Your Business'; |
| const businessType = document.getElementById('business-type').value; |
| |
| sitePreview.innerHTML = ` |
| <div class="w-full h-full flex flex-col items-center justify-center p-4 bg-white"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">${businessName}</h3> |
| <p class="text-gray-600 mb-4 text-center">${businessType} Website</p> |
| <div class="w-24 h-1 bg-purple-500 mb-4"></div> |
| <p class="text-sm text-gray-500 text-center">Your beautiful AI-generated website is ready!</p> |
| </div> |
| `; |
| }, 500); |
| } |
| }, 300); |
| }); |
| |
| |
| const businessNameInput = document.getElementById('business-name'); |
| businessNameInput.addEventListener('input', function() { |
| if (this.value) { |
| sitePreview.innerHTML = ` |
| <div class="w-full h-full flex flex-col items-center justify-center p-4 bg-white"> |
| <h3 class="text-xl font-bold text-gray-800">${this.value}</h3> |
| <p class="text-gray-600 mt-2">Coming Soon</p> |
| </div> |
| `; |
| } else { |
| sitePreview.innerHTML = '<p class="text-gray-500">Your website preview will appear here</p>'; |
| } |
| }); |
| }); |
| </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=Orot1234/websites" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
