|
|
<!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> |
