| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Website Generator Pro</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| 100% { transform: translateY(0px); } |
| } |
| .floating { |
| animation: float 6s ease-in-out infinite; |
| } |
| .gradient-bg { |
| background: linear-gradient(135deg, #6e8efb, #a777e3); |
| } |
| .code-window { |
| background: #1e293b; |
| border-radius: 10px; |
| box-shadow: 0 20px 50px rgba(0,0,0,0.3); |
| } |
| .progress-step { |
| transition: all 0.3s ease; |
| } |
| .progress-step.active { |
| transform: scale(1.1); |
| box-shadow: 0 0 20px rgba(167, 139, 250, 0.7); |
| } |
| .glow { |
| box-shadow: 0 0 15px rgba(167, 139, 250, 0.7); |
| } |
| .terminal-cursor { |
| animation: blink 1s step-end infinite; |
| } |
| @keyframes blink { |
| from, to { opacity: 1; } |
| 50% { opacity: 0; } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen gradient-bg text-white font-sans overflow-x-hidden"> |
| <div class="container mx-auto px-4 py-12"> |
| |
| <header class="flex justify-between items-center mb-16"> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 rounded-full bg-white flex items-center justify-center mr-4 glow"> |
| <i class="fas fa-robot text-2xl text-purple-600"></i> |
| </div> |
| <h1 class="text-3xl font-bold">AI Website Generator <span class="text-yellow-300">PRO</span></h1> |
| </div> |
| <div class="flex space-x-4"> |
| <button class="px-6 py-2 bg-white bg-opacity-20 rounded-full hover:bg-opacity-30 transition"> |
| <i class="fas fa-user mr-2"></i> Login |
| </button> |
| <button class="px-6 py-2 bg-yellow-400 text-gray-900 rounded-full hover:bg-yellow-300 transition"> |
| <i class="fas fa-crown mr-2"></i> Upgrade |
| </button> |
| </div> |
| </header> |
|
|
| |
| <main> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-20"> |
| <div class="animate__animated animate__fadeInLeft"> |
| <h2 class="text-5xl font-bold mb-6 leading-tight"> |
| Generate Complete Websites <br> |
| <span class="text-yellow-300">With AI Power</span> |
| </h2> |
| <p class="text-xl opacity-90 mb-8"> |
| Our advanced AI can create complex websites with 2000+ lines of code, |
| including domain registration, SSL, hosting setup, and WordPress installation - |
| all automatically from your description. |
| </p> |
| <div class="flex space-x-4"> |
| <button id="startBtn" class="px-8 py-4 bg-yellow-400 text-gray-900 rounded-full hover:bg-yellow-300 transition font-bold text-lg glow"> |
| <i class="fas fa-bolt mr-2"></i> Start Generating |
| </button> |
| <button class="px-8 py-4 bg-white bg-opacity-20 rounded-full hover:bg-opacity-30 transition font-bold text-lg"> |
| <i class="fas fa-play-circle mr-2"></i> Watch Demo |
| </button> |
| </div> |
| </div> |
| <div class="relative animate__animated animate__fadeInRight"> |
| <div class="code-window p-6 floating"> |
| <div class="flex mb-4"> |
| <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="font-mono text-sm"> |
| <div class="text-green-400">// AI is generating your website...</div> |
| <div class="text-gray-400 my-2">> Analyzing requirements...</div> |
| <div class="text-gray-400 my-2">> Creating database structure...</div> |
| <div class="text-gray-400 my-2">> Generating responsive layout...</div> |
| <div class="text-gray-400 my-2">> Implementing security features...</div> |
| <div class="text-gray-400 my-2">> Registering domain: <span class="text-blue-300">yourwebsite.ai</span></div> |
| <div class="text-gray-400 my-2">> Configuring SSL certificate...</div> |
| <div class="text-gray-400 my-2">> Setting up hosting environment...</div> |
| <div class="text-green-400 my-2">> Website generation complete!</div> |
| <div class="text-yellow-300 mt-4">$ <span class="terminal-cursor">|</span></div> |
| </div> |
| </div> |
| <div class="absolute -bottom-10 -left-10 w-32 h-32 rounded-full bg-purple-400 opacity-20"></div> |
| <div class="absolute -top-10 -right-10 w-24 h-24 rounded-full bg-pink-400 opacity-20"></div> |
| </div> |
| </div> |
|
|
| |
| <div id="generatorSection" class="hidden animate__animated animate__fadeInUp"> |
| <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-3xl p-8 mb-12"> |
| <div class="flex justify-between items-center mb-8"> |
| <h3 class="text-2xl font-bold">Website Generation Process</h3> |
| <div class="flex space-x-2"> |
| <button class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30"> |
| <i class="fas fa-cog"></i> |
| </button> |
| <button class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30"> |
| <i class="fas fa-question"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="flex justify-between mb-12 relative"> |
| <div class="absolute top-1/2 left-0 right-0 h-1 bg-white bg-opacity-20 -z-10"></div> |
| <div class="progress-step w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center text-xl font-bold glow active"> |
| 1 |
| </div> |
| <div class="progress-step w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center text-xl font-bold"> |
| 2 |
| </div> |
| <div class="progress-step w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center text-xl font-bold"> |
| 3 |
| </div> |
| <div class="progress-step w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center text-xl font-bold"> |
| 4 |
| </div> |
| <div class="progress-step w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center text-xl font-bold"> |
| 5 |
| </div> |
| </div> |
|
|
| |
| <div id="step1" class="step-content"> |
| <h4 class="text-xl font-semibold mb-6">Describe Your Website</h4> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8"> |
| <div> |
| <label class="block mb-2">Website Type</label> |
| <select class="w-full bg-white bg-opacity-20 rounded-lg px-4 py-3 mb-4"> |
| <option>E-commerce</option> |
| <option>Business</option> |
| <option>Portfolio</option> |
| <option>Blog</option> |
| <option>Social Network</option> |
| <option>Custom</option> |
| </select> |
| |
| <label class="block mb-2">Main Color</label> |
| <div class="flex space-x-2 mb-6"> |
| <div class="w-8 h-8 rounded-full bg-blue-500 cursor-pointer glow"></div> |
| <div class="w-8 h-8 rounded-full bg-purple-500 cursor-pointer"></div> |
| <div class="w-8 h-8 rounded-full bg-red-500 cursor-pointer"></div> |
| <div class="w-8 h-8 rounded-full bg-green-500 cursor-pointer"></div> |
| <div class="w-8 h-8 rounded-full bg-yellow-500 cursor-pointer"></div> |
| <div class="w-8 h-8 rounded-full bg-pink-500 cursor-pointer"></div> |
| </div> |
| |
| <label class="block mb-2">Additional Features</label> |
| <div class="space-y-2"> |
| <label class="flex items-center"> |
| <input type="checkbox" class="mr-2 bg-white bg-opacity-20"> |
| User Authentication |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" class="mr-2 bg-white bg-opacity-20"> |
| Payment Gateway |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" class="mr-2 bg-white bg-opacity-20"> |
| Multi-language |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" class="mr-2 bg-white bg-opacity-20"> |
| Admin Dashboard |
| </label> |
| </div> |
| </div> |
| <div> |
| <label class="block mb-2">Detailed Description</label> |
| <textarea class="w-full bg-white bg-opacity-20 rounded-lg px-4 py-3 h-48 mb-4" placeholder="Describe your website in detail..."></textarea> |
| <button class="flex items-center text-sm text-blue-300"> |
| <i class="fas fa-microphone mr-2"></i> Voice Input |
| </button> |
| </div> |
| </div> |
| <div class="flex justify-end"> |
| <button class="px-6 py-3 bg-purple-600 rounded-lg hover:bg-purple-700 transition next-step"> |
| Next Step <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step2" class="step-content hidden"> |
| <h4 class="text-xl font-semibold mb-6">Visual Customization</h4> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8"> |
| <div class="col-span-2"> |
| <div class="bg-black bg-opacity-30 rounded-lg p-4 mb-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <div class="text-sm">Live Preview</div> |
| <div class="flex space-x-2"> |
| <button class="text-xs px-2 py-1 bg-white bg-opacity-20 rounded">Desktop</button> |
| <button class="text-xs px-2 py-1 bg-white bg-opacity-10 rounded">Tablet</button> |
| <button class="text-xs px-2 py-1 bg-white bg-opacity-10 rounded">Mobile</button> |
| </div> |
| </div> |
| <div class="bg-white bg-opacity-10 rounded-lg h-64 flex items-center justify-center"> |
| <div class="text-center"> |
| <div class="w-16 h-16 bg-purple-500 rounded-full mx-auto mb-4"></div> |
| <div class="text-xl font-bold mb-2">Your Website</div> |
| <div class="text-sm opacity-70">Live preview will appear here</div> |
| </div> |
| </div> |
| </div> |
| <div class="grid grid-cols-3 gap-4"> |
| <div class="bg-white bg-opacity-10 rounded-lg p-4 text-center cursor-pointer hover:bg-opacity-20 transition"> |
| <div class="w-full h-20 bg-gray-700 rounded mb-2"></div> |
| <div class="text-sm">Layout 1</div> |
| </div> |
| <div class="bg-white bg-opacity-10 rounded-lg p-4 text-center cursor-pointer hover:bg-opacity-20 transition"> |
| <div class="w-full h-20 bg-gray-700 rounded mb-2"></div> |
| <div class="text-sm">Layout 2</div> |
| </div> |
| <div class="bg-white bg-opacity-10 rounded-lg p-4 text-center cursor-pointer hover:bg-opacity-20 transition"> |
| <div class="w-full h-20 bg-gray-700 rounded mb-2"></div> |
| <div class="text-sm">Layout 3</div> |
| </div> |
| </div> |
| </div> |
| <div> |
| <label class="block mb-2">Font Family</label> |
| <select class="w-full bg-white bg-opacity-20 rounded-lg px-4 py-3 mb-6"> |
| <option>Inter (Modern)</option> |
| <option>Roboto (Clean)</option> |
| <option>Playfair (Elegant)</option> |
| <option>Montserrat (Bold)</option> |
| <option>Poppins (Friendly)</option> |
| </select> |
| |
| <label class="block mb-2">Animation Style</label> |
| <select class="w-full bg-white bg-opacity-20 rounded-lg px-4 py-3 mb-6"> |
| <option>Subtle</option> |
| <option>Dynamic</option> |
| <option>Minimal</option> |
| <option>None</option> |
| </select> |
| |
| <label class="block mb-2">Dark Mode</label> |
| <div class="flex items-center mb-6"> |
| <label class="inline-flex items-center cursor-pointer"> |
| <input type="checkbox" class="sr-only peer"> |
| <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div> |
| <span class="ms-3 text-sm font-medium">Enable</span> |
| </label> |
| </div> |
| </div> |
| </div> |
| <div class="flex justify-between"> |
| <button class="px-6 py-3 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition prev-step"> |
| <i class="fas fa-arrow-left mr-2"></i> Previous |
| </button> |
| <button class="px-6 py-3 bg-purple-600 rounded-lg hover:bg-purple-700 transition next-step"> |
| Next Step <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step3" class="step-content hidden"> |
| <h4 class="text-xl font-semibold mb-6">Domain & Hosting</h4> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8"> |
| <div> |
| <label class="block mb-2">Domain Name</label> |
| <div class="flex"> |
| <input type="text" class="w-full bg-white bg-opacity-20 rounded-l-lg px-4 py-3" placeholder="yourwebsite"> |
| <select class="bg-white bg-opacity-30 rounded-r-lg px-4 py-3"> |
| <option>.com</option> |
| <option>.net</option> |
| <option>.org</option> |
| <option>.ai</option> |
| <option>.io</option> |
| </select> |
| </div> |
| <div class="mt-2 text-sm text-green-400">Domain is available!</div> |
| |
| <div class="mt-6"> |
| <label class="block mb-2">Hosting Plan</label> |
| <div class="space-y-3"> |
| <label class="flex items-center p-4 bg-white bg-opacity-10 rounded-lg cursor-pointer hover:bg-opacity-20 transition"> |
| <input type="radio" name="hosting" class="mr-3" checked> |
| <div> |
| <div class="font-medium">Starter</div> |
| <div class="text-sm opacity-80">10GB storage, 100GB bandwidth</div> |
| </div> |
| <div class="ml-auto">$9.99/mo</div> |
| </label> |
| <label class="flex items-center p-4 bg-white bg-opacity-10 rounded-lg cursor-pointer hover:bg-opacity-20 transition"> |
| <input type="radio" name="hosting" class="mr-3"> |
| <div> |
| <div class="font-medium">Business</div> |
| <div class="text-sm opacity-80">50GB storage, 500GB bandwidth</div> |
| </div> |
| <div class="ml-auto">$19.99/mo</div> |
| </label> |
| <label class="flex items-center p-4 bg-white bg-opacity-10 rounded-lg cursor-pointer hover:bg-opacity-20 transition"> |
| <input type="radio" name="hosting" class="mr-3"> |
| <div> |
| <div class="font-medium">Enterprise</div> |
| <div class="text-sm opacity-80">Unlimited storage & bandwidth</div> |
| </div> |
| <div class="ml-auto">$49.99/mo</div> |
| </label> |
| </div> |
| </div> |
| </div> |
| <div> |
| <label class="block mb-2">SSL Certificate</label> |
| <div class="bg-white bg-opacity-10 rounded-lg p-4 mb-4"> |
| <label class="flex items-center mb-4"> |
| <input type="radio" name="ssl" class="mr-3" checked> |
| <div> |
| <div class="font-medium">Free SSL (Let's Encrypt)</div> |
| <div class="text-sm opacity-80">Basic encryption</div> |
| </div> |
| </label> |
| <label class="flex items-center"> |
| <input type="radio" name="ssl" class="mr-3"> |
| <div> |
| <div class="font-medium">Premium SSL</div> |
| <div class="text-sm opacity-80">Extended validation, $89/year</div> |
| </div> |
| </label> |
| </div> |
| |
| <label class="block mb-2 mt-6">WordPress Options</label> |
| <div class="space-y-2"> |
| <label class="flex items-center"> |
| <input type="checkbox" class="mr-2 bg-white bg-opacity-20" checked> |
| Install WordPress |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" class="mr-2 bg-white bg-opacity-20" checked> |
| Install WooCommerce (if e-commerce) |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" class="mr-2 bg-white bg-opacity-20"> |
| Install SEO Plugin |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" class="mr-2 bg-white bg-opacity-20"> |
| Install Security Plugin |
| </label> |
| </div> |
| </div> |
| </div> |
| <div class="flex justify-between"> |
| <button class="px-6 py-3 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition prev-step"> |
| <i class="fas fa-arrow-left mr-2"></i> Previous |
| </button> |
| <button class="px-6 py-3 bg-purple-600 rounded-lg hover:bg-purple-700 transition next-step"> |
| Next Step <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step4" class="step-content hidden"> |
| <h4 class="text-xl font-semibold mb-6">Content Generation</h4> |
| <div class="mb-8"> |
| <div class="bg-white bg-opacity-10 rounded-lg p-6 mb-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <div class="font-medium">AI Content Settings</div> |
| <button class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded">Advanced</button> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div> |
| <label class="block mb-2 text-sm">Tone</label> |
| <select class="w-full bg-white bg-opacity-20 rounded-lg px-4 py-2 text-sm"> |
| <option>Professional</option> |
| <option>Friendly</option> |
| <option>Casual</option> |
| <option>Authoritative</option> |
| </select> |
| </div> |
| <div> |
| <label class="block mb-2 text-sm">Language</label> |
| <select class="w-full bg-white bg-opacity-20 rounded-lg px-4 py-2 text-sm"> |
| <option>English</option> |
| <option>French</option> |
| <option>Spanish</option> |
| <option>German</option> |
| </select> |
| </div> |
| <div> |
| <label class="block mb-2 text-sm">SEO Focus</label> |
| <select class="w-full bg-white bg-opacity-20 rounded-lg px-4 py-2 text-sm"> |
| <option>Standard</option> |
| <option>High</option> |
| <option>Maximum</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white bg-opacity-10 rounded-lg p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <div class="font-medium">Page Content</div> |
| <button class="text-sm bg-purple-600 px-3 py-1 rounded hover:bg-purple-700">Generate All</button> |
| </div> |
| <div class="space-y-4"> |
| <div class="flex items-center justify-between p-3 bg-white bg-opacity-5 rounded-lg"> |
| <div> |
| <div class="font-medium">Homepage</div> |
| <div class="text-sm opacity-70">Main landing page content</div> |
| </div> |
| <button class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded hover:bg-opacity-30">Generate</button> |
| </div> |
| <div class="flex items-center justify-between p-3 bg-white bg-opacity-5 rounded-lg"> |
| <div> |
| <div class="font-medium">About Us</div> |
| <div class="text-sm opacity-70">Company history and mission</div> |
| </div> |
| <button class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded hover:bg-opacity-30">Generate</button> |
| </div> |
| <div class="flex items-center justify-between p-3 bg-white bg-opacity-5 rounded-lg"> |
| <div> |
| <div class="font-medium">Services/Products</div> |
| <div class="text-sm opacity-70">Detailed descriptions</div> |
| </div> |
| <button class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded hover:bg-opacity-30">Generate</button> |
| </div> |
| <div class="flex items-center justify-between p-3 bg-white bg-opacity-5 rounded-lg"> |
| <div> |
| <div class="font-medium">Blog Posts</div> |
| <div class="text-sm opacity-70">Industry-relevant articles</div> |
| </div> |
| <button class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded hover:bg-opacity-30">Generate</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="flex justify-between"> |
| <button class="px-6 py-3 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition prev-step"> |
| <i class="fas fa-arrow-left mr-2"></i> Previous |
| </button> |
| <button class="px-6 py-3 bg-purple-600 rounded-lg hover:bg-purple-700 transition next-step"> |
| Next Step <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step5" class="step-content hidden"> |
| <h4 class="text-xl font-semibold mb-6">Review & Generate</h4> |
| <div class="bg-white bg-opacity-10 rounded-lg p-6 mb-8"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div> |
| <h5 class="font-medium mb-4">Website Details</h5> |
| <div class="space-y-3"> |
| <div class="flex justify-between border-b border-white border-opacity-10 pb-2"> |
| <span class="opacity-70">Type:</span> |
| <span>E-commerce</span> |
| </div> |
| <div class="flex justify-between border-b border-white border-opacity-10 pb-2"> |
| <span class="opacity-70">Main Color:</span> |
| <span class="flex items-center"> |
| <span class="w-3 h-3 rounded-full bg-blue-500 mr-2"></span> |
| Blue |
| </span> |
| </div> |
| <div class="flex justify-between border-b border-white border-opacity-10 pb-2"> |
| <span class="opacity-70">Features:</span> |
| <span>Auth, Payments, Admin</span> |
| </div> |
| <div class="flex justify-between border-b border-white border-opacity-10 pb-2"> |
| <span class="opacity-70">Layout:</span> |
| <span>Modern Card</span> |
| </div> |
| </div> |
| </div> |
| <div> |
| <h5 class="font-medium mb-4">Hosting & Domain</h5> |
| <div class="space-y-3"> |
| <div class="flex justify-between border-b border-white border-opacity-10 pb-2"> |
| <span class="opacity-70">Domain:</span> |
| <span>yourwebsite.com</span> |
| </div> |
| <div class="flex justify-between border-b border-white border-opacity-10 pb-2"> |
| <span class="opacity-70">Hosting:</span> |
| <span>Business Plan</span> |
| </div> |
| <div class="flex justify-between border-b border-white border-opacity-10 pb-2"> |
| <span class="opacity-70">SSL:</span> |
| <span>Free SSL</span> |
| </div> |
| <div class="flex justify-between border-b border-white border-opacity-10 pb-2"> |
| <span class="opacity-70">WordPress:</span> |
| <span>Yes + WooCommerce</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-yellow-400 bg-opacity-20 rounded-lg p-6 mb-8"> |
| <h5 class="font-medium mb-2 text-yellow-300">Estimated Generation Time</h5> |
| <div class="flex items-center"> |
| <i class="fas fa-clock text-xl mr-4 text-yellow-300"></i> |
| <div> |
| <div class="font-bold text-lg">8-12 minutes</div> |
| <div class="text-sm opacity-80">For 2000+ lines of code and full setup</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex justify-between"> |
| <button class="px-6 py-3 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition prev-step"> |
| <i class="fas fa-arrow-left mr-2"></i> Previous |
| </button> |
| <button id="generateBtn" class="px-8 py-3 bg-green-500 rounded-lg hover:bg-green-600 transition font-bold flex items-center"> |
| <i class="fas fa-bolt mr-2"></i> Generate Website Now |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="generationProgress" class="hidden bg-white bg-opacity-10 backdrop-blur-lg rounded-3xl p-8 animate__animated animate__fadeIn"> |
| <div class="text-center mb-8"> |
| <div class="w-20 h-20 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 glow"> |
| <i class="fas fa-cog fa-spin text-3xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-2">Generating Your Website</h3> |
| <p class="opacity-80">Our AI is creating your complete website with 2000+ lines of code and full setup</p> |
| </div> |
| |
| <div class="mb-8"> |
| <div class="flex justify-between mb-2"> |
| <span>Progress</span> |
| <span id="progressPercent">0%</span> |
| </div> |
| <div class="w-full bg-white bg-opacity-20 rounded-full h-2.5"> |
| <div id="progressBar" class="bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| |
| <div class="code-window p-6 mb-8"> |
| <div class="flex mb-4"> |
| <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 id="progressLog" class="font-mono text-sm h-64 overflow-y-auto"> |
| <div class="text-green-400">> Starting website generation process...</div> |
| <div class="text-gray-400">> Initializing AI models...</div> |
| <div class="text-gray-400">> Analyzing requirements...</div> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="bg-white bg-opacity-5 rounded-lg p-4"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mr-3"> |
| <i class="fas fa-code text-blue-400"></i> |
| </div> |
| <div class="font-medium">Code Generation</div> |
| </div> |
| <div class="text-sm opacity-80" id="codeStatus">Pending</div> |
| </div> |
| <div class="bg-white bg-opacity-5 rounded-lg p-4"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mr-3"> |
| <i class="fas fa-globe text-green-400"></i> |
| </div> |
| <div class="font-medium">Domain & Hosting</div> |
| </div> |
| <div class="text-sm opacity-80" id="hostingStatus">Pending</div> |
| </div> |
| <div class="bg-white bg-opacity-5 rounded-lg p-4"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-yellow-500 bg-opacity-20 flex items-center justify-center mr-3"> |
| <i class="fas fa-wordpress text-yellow-400"></i> |
| </div> |
| <div class="font-medium">WordPress Setup</div> |
| </div> |
| <div class="text-sm opacity-80" id="wpStatus">Pending</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="completionScreen" class="hidden bg-white bg-opacity-10 backdrop-blur-lg rounded-3xl p-12 text-center animate__animated animate__fadeIn"> |
| <div class="w-24 h-24 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6 glow"> |
| <i class="fas fa-check text-3xl"></i> |
| </div> |
| <h3 class="text-3xl font-bold mb-4">Website Generated Successfully!</h3> |
| <p class="text-xl opacity-90 mb-8">Your complete website with 2000+ lines of code is ready.</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10"> |
| <div class="bg-white bg-opacity-5 rounded-xl p-6"> |
| <div class="w-12 h-12 bg-blue-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-link text-blue-400"></i> |
| </div> |
| <div class="font-medium mb-2">Website URL</div> |
| <div class="text-blue-300">https://yourwebsite.com</div> |
| </div> |
| <div class="bg-white bg-opacity-5 rounded-xl p-6"> |
| <div class="w-12 h-12 bg-purple-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-user-cog text-purple-400"></i> |
| </div> |
| <div class="font-medium mb-2">Admin Dashboard</div> |
| <div class="text-blue-300">https://yourwebsite.com/wp-admin</div> |
| </div> |
| <div class="bg-white bg-opacity-5 rounded-xl p-6"> |
| <div class="w-12 h-12 bg-green-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-envelope text-green-400"></i> |
| </div> |
| <div class="font-medium mb-2">Login Details</div> |
| <div class="text-sm">Sent to your email</div> |
| </div> |
| </div> |
| |
| <div class="flex justify-center space-x-4"> |
| <button class="px-6 py-3 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition"> |
| <i class="fas fa-eye mr-2"></i> Preview Website |
| </button> |
| <button class="px-6 py-3 bg-purple-600 rounded-lg hover:bg-purple-700 transition"> |
| <i class="fas fa-cog mr-2"></i> Customize Further |
| </button> |
| <button class="px-6 py-3 bg-green-500 rounded-lg hover:bg-green-600 transition"> |
| <i class="fas fa-download mr-2"></i> Download Code |
| </button> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <section class="my-24 animate__animated animate__fadeInUp"> |
| <h2 class="text-4xl font-bold text-center mb-4">Advanced AI Capabilities</h2> |
| <p class="text-xl opacity-90 text-center mb-12 max-w-3xl mx-auto"> |
| Our AI system can generate complete, production-ready websites with thousands of lines of code automatically. |
| </p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white bg-opacity-10 rounded-2xl p-8 hover:bg-opacity-20 transition"> |
| <div class="w-14 h-14 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mb-6"> |
| <i class="fas fa-code text-2xl text-blue-400"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">2000+ Lines of Code</h3> |
| <p class="opacity-80"> |
| AI generates complex, well-structured code including HTML, CSS, JavaScript, and backend logic automatically. |
| </p> |
| </div> |
| <div class="bg-white bg-opacity-10 rounded-2xl p-8 hover:bg-opacity-20 transition"> |
| <div class="w-14 h-14 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mb-6"> |
| <i class="fas fa-server text-2xl text-purple-400"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Full Infrastructure</h3> |
| <p class="opacity-80"> |
| Automatic domain registration, SSL setup, hosting configuration, and WordPress installation. |
| </p> |
| </div> |
| <div class="bg-white bg-opacity-10 rounded-2xl p-8 hover:bg-opacity-20 transition"> |
| <div class="w-14 h-14 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mb-6"> |
| <i class="fas fa-brain text-2xl text-green-400"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">AI Content Creation</h3> |
| <p class="opacity-80"> |
| Generates SEO-optimized content, images, and even product descriptions for e-commerce sites. |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="border-t border-white border-opacity-10 pt-12 pb-8 mt-12"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
| <div> |
| <h4 class="text-lg font-bold mb-4">AI Website Generator</h4> |
| <p class="opacity-80"> |
| The most advanced AI website creation platform that handles everything from code to deployment. |
| </p> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold mb-4">Features</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="opacity-80 hover:opacity-100">Code Generation</a></li> |
| <li><a href="#" class="opacity-80 hover:opacity-100">Hosting Setup</a></li> |
| <li><a href="#" class="opacity-80 hover:opacity-100">Content Creation</a></li> |
| <li><a href="#" class="opacity-80 hover:opacity-100">E-commerce</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold mb-4">Resources</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="opacity-80 hover:opacity-100">Documentation</a></li> |
| <li><a href="#" class="opacity-80 hover:opacity-100">API</a></li> |
| <li><a href="#" class="opacity-80 hover:opacity-100">Tutorials</a></li> |
| <li><a href="#" class="opacity-80 hover:opacity-100">Blog</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold mb-4">Contact</h4> |
| <ul class="space-y-2"> |
| <li class="flex items-center"><i class="fas fa-envelope mr-2 opacity-80"></i> <a href="#" class="opacity-80 hover:opacity-100">support@aigen.com</a></li> |
| <li class="flex items-center"><i class="fas fa-phone mr-2 opacity-80"></i> <a href="#" class="opacity-80 hover:opacity-100">+1 (555) 123-4567</a></li> |
| <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 opacity-80"></i> <a href="#" class="opacity-80 hover:opacity-100">San Francisco, CA</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="pt-8 border-t border-white border-opacity-10 flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| © 2023 AI Website Generator Pro. All rights reserved. |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#"><i class="fab fa-twitter text-xl opacity-80 hover:opacity-100"></i></a> |
| <a href="#"><i class="fab fa-facebook text-xl opacity-80 hover:opacity-100"></i></a> |
| <a href="#"><i class="fab fa-instagram text-xl opacity-80 hover:opacity-100"></i></a> |
| <a href="#"><i class="fab fa-github text-xl opacity-80 hover:opacity-100"></i></a> |
| </div> |
| </div> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| document.querySelectorAll('.next-step').forEach(button => { |
| button.addEventListener('click', () => { |
| const currentStep = document.querySelector('.step-content:not(.hidden)'); |
| const nextStep = currentStep.nextElementSibling; |
| |
| if (nextStep && nextStep.classList.contains('step-content')) { |
| currentStep.classList.add('hidden'); |
| nextStep.classList.remove('hidden'); |
| |
| |
| const currentProgress = document.querySelector('.progress-step.active'); |
| const nextProgress = currentProgress.nextElementSibling; |
| |
| currentProgress.classList.remove('active'); |
| nextProgress.classList.add('active'); |
| } |
| }); |
| }); |
| |
| document.querySelectorAll('.prev-step').forEach(button => { |
| button.addEventListener('click', () => { |
| const currentStep = document.querySelector('.step-content:not(.hidden)'); |
| const prevStep = currentStep.previousElementSibling; |
| |
| if (prevStep && prevStep.classList.contains('step-content')) { |
| currentStep.classList.add('hidden'); |
| prevStep.classList.remove('hidden'); |
| |
| |
| const currentProgress = document.querySelector('.progress-step.active'); |
| const prevProgress = currentProgress.previousElementSibling; |
| |
| currentProgress.classList.remove('active'); |
| prevProgress.classList.add('active'); |
| } |
| }); |
| }); |
| |
| |
| document.getElementById('startBtn').addEventListener('click', () => { |
| document.getElementById('generatorSection').classList.remove('hidden'); |
| window.scrollTo({ |
| top: document.getElementById('generatorSection').offsetTop - 100, |
| behavior: 'smooth' |
| }); |
| }); |
| |
| |
| document.getElementById('generateBtn').addEventListener('click', () => { |
| document.getElementById('generatorSection').classList.add('hidden'); |
| document.getElementById('generationProgress').classList.remove('hidden'); |
| |
| |
| let progress = 0; |
| const progressBar = document.getElementById('progressBar'); |
| const progressPercent = document.getElementById('progressPercent'); |
| const progressLog = document.getElementById('progressLog'); |
| const codeStatus = document.getElementById('codeStatus'); |
| const hostingStatus = document.getElementById('hostingStatus'); |
| const wpStatus = document.getElementById('wpStatus'); |
| |
| const interval = setInterval(() => { |
| progress += Math.random() * 5; |
| if (progress > 100) progress = 100; |
| |
| progressBar.style.width = `${progress}%`; |
| progressPercent.textContent = `${Math.floor(progress)}%`; |
| |
| |
| if (progress > 10 && progress < 15) { |
| progressLog.innerHTML += '<div class="text-gray-400">> Creating database structure...</div>'; |
| } |
| if (progress > 20 && progress < 25) { |
| progressLog.innerHTML += '<div class="text-gray-400">> Generating frontend components...</div>'; |
| } |
| if (progress > 30 && progress < 35) { |
| progressLog.innerHTML += '<div class="text-gray-400">> Implementing backend logic...</div>'; |
| codeStatus.textContent = 'In Progress'; |
| } |
| if (progress > 40 && progress < 45) { |
| progressLog.innerHTML += '<div class="text-gray-400">> Registering domain name...</div>'; |
| } |
| if (progress > 50 && progress < 55) { |
| progressLog.innerHTML += '<div class="text-gray-400">> Configuring hosting server...</div>'; |
| hostingStatus.textContent = 'In Progress'; |
| } |
| if (progress > 60 && progress < 65) { |
| progressLog.innerHTML += '<div class="text-gray-400">> Installing WordPress...</div>'; |
| } |
| if (progress > 70 && progress < 75) { |
| progressLog.innerHTML += '<div class="text-gray-400">> Configuring plugins...</div>'; |
| wpStatus.textContent = 'In Progress'; |
| } |
| if (progress > 80 && progress < 85) { |
| progressLog.innerHTML += '<div class="text-gray-400">> Generating SEO content...</div>'; |
| } |
| if (progress > 90 && progress < 95) { |
| progressLog.innerHTML += '<div class="text-gray-400">> Finalizing deployment...</div>'; |
| } |
| if (progress === 100) { |
| progressLog.innerHTML += '<div class="text-green-400">> Website generation complete!</div>'; |
| codeStatus.textContent = 'Complete'; |
| hostingStatus.textContent = 'Complete'; |
| wpStatus.textContent = 'Complete'; |
| |
| clearInterval(interval); |
| |
| |
| setTimeout(() => { |
| document.getElementById('generationProgress').classList.add('hidden'); |
| document.getElementById('completionScreen').classList.remove('hidden'); |
| window.scrollTo({ |
| top: document.getElementById('completionScreen').offsetTop - 100, |
| behavior: 'smooth' |
| }); |
| }, 1500); |
| } |
| |
| |
| progressLog.scrollTop = progressLog.scrollHeight; |
| }, 300); |
| }); |
| |
| |
| document.querySelectorAll('[class*="bg-"].cursor-pointer').forEach(el => { |
| el.addEventListener('click', () => { |
| |
| document.querySelectorAll('[class*="bg-"].cursor-pointer').forEach(color => { |
| color.classList.remove('glow'); |
| }); |
| |
| |
| el.classList.add('glow'); |
| }); |
| }); |
| </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=docto41/ai-website-generator-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
