Hugging Face's logo

Spaces:
docto41
/
ai-website-generator-pro
Running

App Files Community
docto41 commited on
Commit
909a889
·
verified ·
1 Parent(s): 22d02d9

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +880 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Website Generator Pro
3
- emoji: 🏢
4
- colorFrom: green
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ai-website-generator-pro
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,880 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Website Generator Pro</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ @keyframes float {
12
+ 0% { transform: translateY(0px); }
13
+ 50% { transform: translateY(-20px); }
14
+ 100% { transform: translateY(0px); }
15
+ }
16
+ .floating {
17
+ animation: float 6s ease-in-out infinite;
18
+ }
19
+ .gradient-bg {
20
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
21
+ }
22
+ .code-window {
23
+ background: #1e293b;
24
+ border-radius: 10px;
25
+ box-shadow: 0 20px 50px rgba(0,0,0,0.3);
26
+ }
27
+ .progress-step {
28
+ transition: all 0.3s ease;
29
+ }
30
+ .progress-step.active {
31
+ transform: scale(1.1);
32
+ box-shadow: 0 0 20px rgba(167, 139, 250, 0.7);
33
+ }
34
+ .glow {
35
+ box-shadow: 0 0 15px rgba(167, 139, 250, 0.7);
36
+ }
37
+ .terminal-cursor {
38
+ animation: blink 1s step-end infinite;
39
+ }
40
+ @keyframes blink {
41
+ from, to { opacity: 1; }
42
+ 50% { opacity: 0; }
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="min-h-screen gradient-bg text-white font-sans overflow-x-hidden">
47
+ <div class="container mx-auto px-4 py-12">
48
+ <!-- Header -->
49
+ <header class="flex justify-between items-center mb-16">
50
+ <div class="flex items-center">
51
+ <div class="w-12 h-12 rounded-full bg-white flex items-center justify-center mr-4 glow">
52
+ <i class="fas fa-robot text-2xl text-purple-600"></i>
53
+ </div>
54
+ <h1 class="text-3xl font-bold">AI Website Generator <span class="text-yellow-300">PRO</span></h1>
55
+ </div>
56
+ <div class="flex space-x-4">
57
+ <button class="px-6 py-2 bg-white bg-opacity-20 rounded-full hover:bg-opacity-30 transition">
58
+ <i class="fas fa-user mr-2"></i> Login
59
+ </button>
60
+ <button class="px-6 py-2 bg-yellow-400 text-gray-900 rounded-full hover:bg-yellow-300 transition">
61
+ <i class="fas fa-crown mr-2"></i> Upgrade
62
+ </button>
63
+ </div>
64
+ </header>
65
+
66
+ <!-- Main Content -->
67
+ <main>
68
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-20">
69
+ <div class="animate__animated animate__fadeInLeft">
70
+ <h2 class="text-5xl font-bold mb-6 leading-tight">
71
+ Generate Complete Websites <br>
72
+ <span class="text-yellow-300">With AI Power</span>
73
+ </h2>
74
+ <p class="text-xl opacity-90 mb-8">
75
+ Our advanced AI can create complex websites with 2000+ lines of code,
76
+ including domain registration, SSL, hosting setup, and WordPress installation -
77
+ all automatically from your description.
78
+ </p>
79
+ <div class="flex space-x-4">
80
+ <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">
81
+ <i class="fas fa-bolt mr-2"></i> Start Generating
82
+ </button>
83
+ <button class="px-8 py-4 bg-white bg-opacity-20 rounded-full hover:bg-opacity-30 transition font-bold text-lg">
84
+ <i class="fas fa-play-circle mr-2"></i> Watch Demo
85
+ </button>
86
+ </div>
87
+ </div>
88
+ <div class="relative animate__animated animate__fadeInRight">
89
+ <div class="code-window p-6 floating">
90
+ <div class="flex mb-4">
91
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
92
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
93
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
94
+ </div>
95
+ <div class="font-mono text-sm">
96
+ <div class="text-green-400">// AI is generating your website...</div>
97
+ <div class="text-gray-400 my-2">> Analyzing requirements...</div>
98
+ <div class="text-gray-400 my-2">> Creating database structure...</div>
99
+ <div class="text-gray-400 my-2">> Generating responsive layout...</div>
100
+ <div class="text-gray-400 my-2">> Implementing security features...</div>
101
+ <div class="text-gray-400 my-2">> Registering domain: <span class="text-blue-300">yourwebsite.ai</span></div>
102
+ <div class="text-gray-400 my-2">> Configuring SSL certificate...</div>
103
+ <div class="text-gray-400 my-2">> Setting up hosting environment...</div>
104
+ <div class="text-green-400 my-2">> Website generation complete!</div>
105
+ <div class="text-yellow-300 mt-4">$ <span class="terminal-cursor">|</span></div>
106
+ </div>
107
+ </div>
108
+ <div class="absolute -bottom-10 -left-10 w-32 h-32 rounded-full bg-purple-400 opacity-20"></div>
109
+ <div class="absolute -top-10 -right-10 w-24 h-24 rounded-full bg-pink-400 opacity-20"></div>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Generator Section (Initially Hidden) -->
114
+ <div id="generatorSection" class="hidden animate__animated animate__fadeInUp">
115
+ <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-3xl p-8 mb-12">
116
+ <div class="flex justify-between items-center mb-8">
117
+ <h3 class="text-2xl font-bold">Website Generation Process</h3>
118
+ <div class="flex space-x-2">
119
+ <button class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30">
120
+ <i class="fas fa-cog"></i>
121
+ </button>
122
+ <button class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30">
123
+ <i class="fas fa-question"></i>
124
+ </button>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Progress Steps -->
129
+ <div class="flex justify-between mb-12 relative">
130
+ <div class="absolute top-1/2 left-0 right-0 h-1 bg-white bg-opacity-20 -z-10"></div>
131
+ <div class="progress-step w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center text-xl font-bold glow active">
132
+ 1
133
+ </div>
134
+ <div class="progress-step w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center text-xl font-bold">
135
+ 2
136
+ </div>
137
+ <div class="progress-step w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center text-xl font-bold">
138
+ 3
139
+ </div>
140
+ <div class="progress-step w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center text-xl font-bold">
141
+ 4
142
+ </div>
143
+ <div class="progress-step w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center text-xl font-bold">
144
+ 5
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Step 1 Content -->
149
+ <div id="step1" class="step-content">
150
+ <h4 class="text-xl font-semibold mb-6">Describe Your Website</h4>
151
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
152
+ <div>
153
+ <label class="block mb-2">Website Type</label>
154
+ <select class="w-full bg-white bg-opacity-20 rounded-lg px-4 py-3 mb-4">
155
+ <option>E-commerce</option>
156
+ <option>Business</option>
157
+ <option>Portfolio</option>
158
+ <option>Blog</option>
159
+ <option>Social Network</option>
160
+ <option>Custom</option>
161
+ </select>
162
+
163
+ <label class="block mb-2">Main Color</label>
164
+ <div class="flex space-x-2 mb-6">
165
+ <div class="w-8 h-8 rounded-full bg-blue-500 cursor-pointer glow"></div>
166
+ <div class="w-8 h-8 rounded-full bg-purple-500 cursor-pointer"></div>
167
+ <div class="w-8 h-8 rounded-full bg-red-500 cursor-pointer"></div>
168
+ <div class="w-8 h-8 rounded-full bg-green-500 cursor-pointer"></div>
169
+ <div class="w-8 h-8 rounded-full bg-yellow-500 cursor-pointer"></div>
170
+ <div class="w-8 h-8 rounded-full bg-pink-500 cursor-pointer"></div>
171
+ </div>
172
+
173
+ <label class="block mb-2">Additional Features</label>
174
+ <div class="space-y-2">
175
+ <label class="flex items-center">
176
+ <input type="checkbox" class="mr-2 bg-white bg-opacity-20">
177
+ User Authentication
178
+ </label>
179
+ <label class="flex items-center">
180
+ <input type="checkbox" class="mr-2 bg-white bg-opacity-20">
181
+ Payment Gateway
182
+ </label>
183
+ <label class="flex items-center">
184
+ <input type="checkbox" class="mr-2 bg-white bg-opacity-20">
185
+ Multi-language
186
+ </label>
187
+ <label class="flex items-center">
188
+ <input type="checkbox" class="mr-2 bg-white bg-opacity-20">
189
+ Admin Dashboard
190
+ </label>
191
+ </div>
192
+ </div>
193
+ <div>
194
+ <label class="block mb-2">Detailed Description</label>
195
+ <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>
196
+ <button class="flex items-center text-sm text-blue-300">
197
+ <i class="fas fa-microphone mr-2"></i> Voice Input
198
+ </button>
199
+ </div>
200
+ </div>
201
+ <div class="flex justify-end">
202
+ <button class="px-6 py-3 bg-purple-600 rounded-lg hover:bg-purple-700 transition next-step">
203
+ Next Step <i class="fas fa-arrow-right ml-2"></i>
204
+ </button>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Step 2 Content (Hidden) -->
209
+ <div id="step2" class="step-content hidden">
210
+ <h4 class="text-xl font-semibold mb-6">Visual Customization</h4>
211
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
212
+ <div class="col-span-2">
213
+ <div class="bg-black bg-opacity-30 rounded-lg p-4 mb-6">
214
+ <div class="flex justify-between items-center mb-4">
215
+ <div class="text-sm">Live Preview</div>
216
+ <div class="flex space-x-2">
217
+ <button class="text-xs px-2 py-1 bg-white bg-opacity-20 rounded">Desktop</button>
218
+ <button class="text-xs px-2 py-1 bg-white bg-opacity-10 rounded">Tablet</button>
219
+ <button class="text-xs px-2 py-1 bg-white bg-opacity-10 rounded">Mobile</button>
220
+ </div>
221
+ </div>
222
+ <div class="bg-white bg-opacity-10 rounded-lg h-64 flex items-center justify-center">
223
+ <div class="text-center">
224
+ <div class="w-16 h-16 bg-purple-500 rounded-full mx-auto mb-4"></div>
225
+ <div class="text-xl font-bold mb-2">Your Website</div>
226
+ <div class="text-sm opacity-70">Live preview will appear here</div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ <div class="grid grid-cols-3 gap-4">
231
+ <div class="bg-white bg-opacity-10 rounded-lg p-4 text-center cursor-pointer hover:bg-opacity-20 transition">
232
+ <div class="w-full h-20 bg-gray-700 rounded mb-2"></div>
233
+ <div class="text-sm">Layout 1</div>
234
+ </div>
235
+ <div class="bg-white bg-opacity-10 rounded-lg p-4 text-center cursor-pointer hover:bg-opacity-20 transition">
236
+ <div class="w-full h-20 bg-gray-700 rounded mb-2"></div>
237
+ <div class="text-sm">Layout 2</div>
238
+ </div>
239
+ <div class="bg-white bg-opacity-10 rounded-lg p-4 text-center cursor-pointer hover:bg-opacity-20 transition">
240
+ <div class="w-full h-20 bg-gray-700 rounded mb-2"></div>
241
+ <div class="text-sm">Layout 3</div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ <div>
246
+ <label class="block mb-2">Font Family</label>
247
+ <select class="w-full bg-white bg-opacity-20 rounded-lg px-4 py-3 mb-6">
248
+ <option>Inter (Modern)</option>
249
+ <option>Roboto (Clean)</option>
250
+ <option>Playfair (Elegant)</option>
251
+ <option>Montserrat (Bold)</option>
252
+ <option>Poppins (Friendly)</option>
253
+ </select>
254
+
255
+ <label class="block mb-2">Animation Style</label>
256
+ <select class="w-full bg-white bg-opacity-20 rounded-lg px-4 py-3 mb-6">
257
+ <option>Subtle</option>
258
+ <option>Dynamic</option>
259
+ <option>Minimal</option>
260
+ <option>None</option>
261
+ </select>
262
+
263
+ <label class="block mb-2">Dark Mode</label>
264
+ <div class="flex items-center mb-6">
265
+ <label class="inline-flex items-center cursor-pointer">
266
+ <input type="checkbox" class="sr-only peer">
267
+ <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>
268
+ <span class="ms-3 text-sm font-medium">Enable</span>
269
+ </label>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ <div class="flex justify-between">
274
+ <button class="px-6 py-3 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition prev-step">
275
+ <i class="fas fa-arrow-left mr-2"></i> Previous
276
+ </button>
277
+ <button class="px-6 py-3 bg-purple-600 rounded-lg hover:bg-purple-700 transition next-step">
278
+ Next Step <i class="fas fa-arrow-right ml-2"></i>
279
+ </button>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- Step 3 Content (Hidden) -->
284
+ <div id="step3" class="step-content hidden">
285
+ <h4 class="text-xl font-semibold mb-6">Domain & Hosting</h4>
286
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
287
+ <div>
288
+ <label class="block mb-2">Domain Name</label>
289
+ <div class="flex">
290
+ <input type="text" class="w-full bg-white bg-opacity-20 rounded-l-lg px-4 py-3" placeholder="yourwebsite">
291
+ <select class="bg-white bg-opacity-30 rounded-r-lg px-4 py-3">
292
+ <option>.com</option>
293
+ <option>.net</option>
294
+ <option>.org</option>
295
+ <option>.ai</option>
296
+ <option>.io</option>
297
+ </select>
298
+ </div>
299
+ <div class="mt-2 text-sm text-green-400">Domain is available!</div>
300
+
301
+ <div class="mt-6">
302
+ <label class="block mb-2">Hosting Plan</label>
303
+ <div class="space-y-3">
304
+ <label class="flex items-center p-4 bg-white bg-opacity-10 rounded-lg cursor-pointer hover:bg-opacity-20 transition">
305
+ <input type="radio" name="hosting" class="mr-3" checked>
306
+ <div>
307
+ <div class="font-medium">Starter</div>
308
+ <div class="text-sm opacity-80">10GB storage, 100GB bandwidth</div>
309
+ </div>
310
+ <div class="ml-auto">$9.99/mo</div>
311
+ </label>
312
+ <label class="flex items-center p-4 bg-white bg-opacity-10 rounded-lg cursor-pointer hover:bg-opacity-20 transition">
313
+ <input type="radio" name="hosting" class="mr-3">
314
+ <div>
315
+ <div class="font-medium">Business</div>
316
+ <div class="text-sm opacity-80">50GB storage, 500GB bandwidth</div>
317
+ </div>
318
+ <div class="ml-auto">$19.99/mo</div>
319
+ </label>
320
+ <label class="flex items-center p-4 bg-white bg-opacity-10 rounded-lg cursor-pointer hover:bg-opacity-20 transition">
321
+ <input type="radio" name="hosting" class="mr-3">
322
+ <div>
323
+ <div class="font-medium">Enterprise</div>
324
+ <div class="text-sm opacity-80">Unlimited storage & bandwidth</div>
325
+ </div>
326
+ <div class="ml-auto">$49.99/mo</div>
327
+ </label>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ <div>
332
+ <label class="block mb-2">SSL Certificate</label>
333
+ <div class="bg-white bg-opacity-10 rounded-lg p-4 mb-4">
334
+ <label class="flex items-center mb-4">
335
+ <input type="radio" name="ssl" class="mr-3" checked>
336
+ <div>
337
+ <div class="font-medium">Free SSL (Let's Encrypt)</div>
338
+ <div class="text-sm opacity-80">Basic encryption</div>
339
+ </div>
340
+ </label>
341
+ <label class="flex items-center">
342
+ <input type="radio" name="ssl" class="mr-3">
343
+ <div>
344
+ <div class="font-medium">Premium SSL</div>
345
+ <div class="text-sm opacity-80">Extended validation, $89/year</div>
346
+ </div>
347
+ </label>
348
+ </div>
349
+
350
+ <label class="block mb-2 mt-6">WordPress Options</label>
351
+ <div class="space-y-2">
352
+ <label class="flex items-center">
353
+ <input type="checkbox" class="mr-2 bg-white bg-opacity-20" checked>
354
+ Install WordPress
355
+ </label>
356
+ <label class="flex items-center">
357
+ <input type="checkbox" class="mr-2 bg-white bg-opacity-20" checked>
358
+ Install WooCommerce (if e-commerce)
359
+ </label>
360
+ <label class="flex items-center">
361
+ <input type="checkbox" class="mr-2 bg-white bg-opacity-20">
362
+ Install SEO Plugin
363
+ </label>
364
+ <label class="flex items-center">
365
+ <input type="checkbox" class="mr-2 bg-white bg-opacity-20">
366
+ Install Security Plugin
367
+ </label>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ <div class="flex justify-between">
372
+ <button class="px-6 py-3 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition prev-step">
373
+ <i class="fas fa-arrow-left mr-2"></i> Previous
374
+ </button>
375
+ <button class="px-6 py-3 bg-purple-600 rounded-lg hover:bg-purple-700 transition next-step">
376
+ Next Step <i class="fas fa-arrow-right ml-2"></i>
377
+ </button>
378
+ </div>
379
+ </div>
380
+
381
+ <!-- Step 4 Content (Hidden) -->
382
+ <div id="step4" class="step-content hidden">
383
+ <h4 class="text-xl font-semibold mb-6">Content Generation</h4>
384
+ <div class="mb-8">
385
+ <div class="bg-white bg-opacity-10 rounded-lg p-6 mb-6">
386
+ <div class="flex justify-between items-center mb-4">
387
+ <div class="font-medium">AI Content Settings</div>
388
+ <button class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded">Advanced</button>
389
+ </div>
390
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
391
+ <div>
392
+ <label class="block mb-2 text-sm">Tone</label>
393
+ <select class="w-full bg-white bg-opacity-20 rounded-lg px-4 py-2 text-sm">
394
+ <option>Professional</option>
395
+ <option>Friendly</option>
396
+ <option>Casual</option>
397
+ <option>Authoritative</option>
398
+ </select>
399
+ </div>
400
+ <div>
401
+ <label class="block mb-2 text-sm">Language</label>
402
+ <select class="w-full bg-white bg-opacity-20 rounded-lg px-4 py-2 text-sm">
403
+ <option>English</option>
404
+ <option>French</option>
405
+ <option>Spanish</option>
406
+ <option>German</option>
407
+ </select>
408
+ </div>
409
+ <div>
410
+ <label class="block mb-2 text-sm">SEO Focus</label>
411
+ <select class="w-full bg-white bg-opacity-20 rounded-lg px-4 py-2 text-sm">
412
+ <option>Standard</option>
413
+ <option>High</option>
414
+ <option>Maximum</option>
415
+ </select>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="bg-white bg-opacity-10 rounded-lg p-6">
421
+ <div class="flex justify-between items-center mb-4">
422
+ <div class="font-medium">Page Content</div>
423
+ <button class="text-sm bg-purple-600 px-3 py-1 rounded hover:bg-purple-700">Generate All</button>
424
+ </div>
425
+ <div class="space-y-4">
426
+ <div class="flex items-center justify-between p-3 bg-white bg-opacity-5 rounded-lg">
427
+ <div>
428
+ <div class="font-medium">Homepage</div>
429
+ <div class="text-sm opacity-70">Main landing page content</div>
430
+ </div>
431
+ <button class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded hover:bg-opacity-30">Generate</button>
432
+ </div>
433
+ <div class="flex items-center justify-between p-3 bg-white bg-opacity-5 rounded-lg">
434
+ <div>
435
+ <div class="font-medium">About Us</div>
436
+ <div class="text-sm opacity-70">Company history and mission</div>
437
+ </div>
438
+ <button class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded hover:bg-opacity-30">Generate</button>
439
+ </div>
440
+ <div class="flex items-center justify-between p-3 bg-white bg-opacity-5 rounded-lg">
441
+ <div>
442
+ <div class="font-medium">Services/Products</div>
443
+ <div class="text-sm opacity-70">Detailed descriptions</div>
444
+ </div>
445
+ <button class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded hover:bg-opacity-30">Generate</button>
446
+ </div>
447
+ <div class="flex items-center justify-between p-3 bg-white bg-opacity-5 rounded-lg">
448
+ <div>
449
+ <div class="font-medium">Blog Posts</div>
450
+ <div class="text-sm opacity-70">Industry-relevant articles</div>
451
+ </div>
452
+ <button class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded hover:bg-opacity-30">Generate</button>
453
+ </div>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ <div class="flex justify-between">
458
+ <button class="px-6 py-3 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition prev-step">
459
+ <i class="fas fa-arrow-left mr-2"></i> Previous
460
+ </button>
461
+ <button class="px-6 py-3 bg-purple-600 rounded-lg hover:bg-purple-700 transition next-step">
462
+ Next Step <i class="fas fa-arrow-right ml-2"></i>
463
+ </button>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Step 5 Content (Hidden) -->
468
+ <div id="step5" class="step-content hidden">
469
+ <h4 class="text-xl font-semibold mb-6">Review & Generate</h4>
470
+ <div class="bg-white bg-opacity-10 rounded-lg p-6 mb-8">
471
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
472
+ <div>
473
+ <h5 class="font-medium mb-4">Website Details</h5>
474
+ <div class="space-y-3">
475
+ <div class="flex justify-between border-b border-white border-opacity-10 pb-2">
476
+ <span class="opacity-70">Type:</span>
477
+ <span>E-commerce</span>
478
+ </div>
479
+ <div class="flex justify-between border-b border-white border-opacity-10 pb-2">
480
+ <span class="opacity-70">Main Color:</span>
481
+ <span class="flex items-center">
482
+ <span class="w-3 h-3 rounded-full bg-blue-500 mr-2"></span>
483
+ Blue
484
+ </span>
485
+ </div>
486
+ <div class="flex justify-between border-b border-white border-opacity-10 pb-2">
487
+ <span class="opacity-70">Features:</span>
488
+ <span>Auth, Payments, Admin</span>
489
+ </div>
490
+ <div class="flex justify-between border-b border-white border-opacity-10 pb-2">
491
+ <span class="opacity-70">Layout:</span>
492
+ <span>Modern Card</span>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ <div>
497
+ <h5 class="font-medium mb-4">Hosting & Domain</h5>
498
+ <div class="space-y-3">
499
+ <div class="flex justify-between border-b border-white border-opacity-10 pb-2">
500
+ <span class="opacity-70">Domain:</span>
501
+ <span>yourwebsite.com</span>
502
+ </div>
503
+ <div class="flex justify-between border-b border-white border-opacity-10 pb-2">
504
+ <span class="opacity-70">Hosting:</span>
505
+ <span>Business Plan</span>
506
+ </div>
507
+ <div class="flex justify-between border-b border-white border-opacity-10 pb-2">
508
+ <span class="opacity-70">SSL:</span>
509
+ <span>Free SSL</span>
510
+ </div>
511
+ <div class="flex justify-between border-b border-white border-opacity-10 pb-2">
512
+ <span class="opacity-70">WordPress:</span>
513
+ <span>Yes + WooCommerce</span>
514
+ </div>
515
+ </div>
516
+ </div>
517
+ </div>
518
+ </div>
519
+
520
+ <div class="bg-yellow-400 bg-opacity-20 rounded-lg p-6 mb-8">
521
+ <h5 class="font-medium mb-2 text-yellow-300">Estimated Generation Time</h5>
522
+ <div class="flex items-center">
523
+ <i class="fas fa-clock text-xl mr-4 text-yellow-300"></i>
524
+ <div>
525
+ <div class="font-bold text-lg">8-12 minutes</div>
526
+ <div class="text-sm opacity-80">For 2000+ lines of code and full setup</div>
527
+ </div>
528
+ </div>
529
+ </div>
530
+
531
+ <div class="flex justify-between">
532
+ <button class="px-6 py-3 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition prev-step">
533
+ <i class="fas fa-arrow-left mr-2"></i> Previous
534
+ </button>
535
+ <button id="generateBtn" class="px-8 py-3 bg-green-500 rounded-lg hover:bg-green-600 transition font-bold flex items-center">
536
+ <i class="fas fa-bolt mr-2"></i> Generate Website Now
537
+ </button>
538
+ </div>
539
+ </div>
540
+ </div>
541
+
542
+ <!-- Generation Progress (Hidden) -->
543
+ <div id="generationProgress" class="hidden bg-white bg-opacity-10 backdrop-blur-lg rounded-3xl p-8 animate__animated animate__fadeIn">
544
+ <div class="text-center mb-8">
545
+ <div class="w-20 h-20 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 glow">
546
+ <i class="fas fa-cog fa-spin text-3xl"></i>
547
+ </div>
548
+ <h3 class="text-2xl font-bold mb-2">Generating Your Website</h3>
549
+ <p class="opacity-80">Our AI is creating your complete website with 2000+ lines of code and full setup</p>
550
+ </div>
551
+
552
+ <div class="mb-8">
553
+ <div class="flex justify-between mb-2">
554
+ <span>Progress</span>
555
+ <span id="progressPercent">0%</span>
556
+ </div>
557
+ <div class="w-full bg-white bg-opacity-20 rounded-full h-2.5">
558
+ <div id="progressBar" class="bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div>
559
+ </div>
560
+ </div>
561
+
562
+ <div class="code-window p-6 mb-8">
563
+ <div class="flex mb-4">
564
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
565
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
566
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
567
+ </div>
568
+ <div id="progressLog" class="font-mono text-sm h-64 overflow-y-auto">
569
+ <div class="text-green-400">> Starting website generation process...</div>
570
+ <div class="text-gray-400">> Initializing AI models...</div>
571
+ <div class="text-gray-400">> Analyzing requirements...</div>
572
+ </div>
573
+ </div>
574
+
575
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
576
+ <div class="bg-white bg-opacity-5 rounded-lg p-4">
577
+ <div class="flex items-center mb-2">
578
+ <div class="w-8 h-8 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mr-3">
579
+ <i class="fas fa-code text-blue-400"></i>
580
+ </div>
581
+ <div class="font-medium">Code Generation</div>
582
+ </div>
583
+ <div class="text-sm opacity-80" id="codeStatus">Pending</div>
584
+ </div>
585
+ <div class="bg-white bg-opacity-5 rounded-lg p-4">
586
+ <div class="flex items-center mb-2">
587
+ <div class="w-8 h-8 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mr-3">
588
+ <i class="fas fa-globe text-green-400"></i>
589
+ </div>
590
+ <div class="font-medium">Domain & Hosting</div>
591
+ </div>
592
+ <div class="text-sm opacity-80" id="hostingStatus">Pending</div>
593
+ </div>
594
+ <div class="bg-white bg-opacity-5 rounded-lg p-4">
595
+ <div class="flex items-center mb-2">
596
+ <div class="w-8 h-8 rounded-full bg-yellow-500 bg-opacity-20 flex items-center justify-center mr-3">
597
+ <i class="fas fa-wordpress text-yellow-400"></i>
598
+ </div>
599
+ <div class="font-medium">WordPress Setup</div>
600
+ </div>
601
+ <div class="text-sm opacity-80" id="wpStatus">Pending</div>
602
+ </div>
603
+ </div>
604
+ </div>
605
+
606
+ <!-- Completion Screen (Hidden) -->
607
+ <div id="completionScreen" class="hidden bg-white bg-opacity-10 backdrop-blur-lg rounded-3xl p-12 text-center animate__animated animate__fadeIn">
608
+ <div class="w-24 h-24 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6 glow">
609
+ <i class="fas fa-check text-3xl"></i>
610
+ </div>
611
+ <h3 class="text-3xl font-bold mb-4">Website Generated Successfully!</h3>
612
+ <p class="text-xl opacity-90 mb-8">Your complete website with 2000+ lines of code is ready.</p>
613
+
614
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
615
+ <div class="bg-white bg-opacity-5 rounded-xl p-6">
616
+ <div class="w-12 h-12 bg-blue-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
617
+ <i class="fas fa-link text-blue-400"></i>
618
+ </div>
619
+ <div class="font-medium mb-2">Website URL</div>
620
+ <div class="text-blue-300">https://yourwebsite.com</div>
621
+ </div>
622
+ <div class="bg-white bg-opacity-5 rounded-xl p-6">
623
+ <div class="w-12 h-12 bg-purple-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
624
+ <i class="fas fa-user-cog text-purple-400"></i>
625
+ </div>
626
+ <div class="font-medium mb-2">Admin Dashboard</div>
627
+ <div class="text-blue-300">https://yourwebsite.com/wp-admin</div>
628
+ </div>
629
+ <div class="bg-white bg-opacity-5 rounded-xl p-6">
630
+ <div class="w-12 h-12 bg-green-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
631
+ <i class="fas fa-envelope text-green-400"></i>
632
+ </div>
633
+ <div class="font-medium mb-2">Login Details</div>
634
+ <div class="text-sm">Sent to your email</div>
635
+ </div>
636
+ </div>
637
+
638
+ <div class="flex justify-center space-x-4">
639
+ <button class="px-6 py-3 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition">
640
+ <i class="fas fa-eye mr-2"></i> Preview Website
641
+ </button>
642
+ <button class="px-6 py-3 bg-purple-600 rounded-lg hover:bg-purple-700 transition">
643
+ <i class="fas fa-cog mr-2"></i> Customize Further
644
+ </button>
645
+ <button class="px-6 py-3 bg-green-500 rounded-lg hover:bg-green-600 transition">
646
+ <i class="fas fa-download mr-2"></i> Download Code
647
+ </button>
648
+ </div>
649
+ </div>
650
+ </div>
651
+ </main>
652
+
653
+ <!-- Features Section -->
654
+ <section class="my-24 animate__animated animate__fadeInUp">
655
+ <h2 class="text-4xl font-bold text-center mb-4">Advanced AI Capabilities</h2>
656
+ <p class="text-xl opacity-90 text-center mb-12 max-w-3xl mx-auto">
657
+ Our AI system can generate complete, production-ready websites with thousands of lines of code automatically.
658
+ </p>
659
+
660
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
661
+ <div class="bg-white bg-opacity-10 rounded-2xl p-8 hover:bg-opacity-20 transition">
662
+ <div class="w-14 h-14 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mb-6">
663
+ <i class="fas fa-code text-2xl text-blue-400"></i>
664
+ </div>
665
+ <h3 class="text-xl font-bold mb-3">2000+ Lines of Code</h3>
666
+ <p class="opacity-80">
667
+ AI generates complex, well-structured code including HTML, CSS, JavaScript, and backend logic automatically.
668
+ </p>
669
+ </div>
670
+ <div class="bg-white bg-opacity-10 rounded-2xl p-8 hover:bg-opacity-20 transition">
671
+ <div class="w-14 h-14 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mb-6">
672
+ <i class="fas fa-server text-2xl text-purple-400"></i>
673
+ </div>
674
+ <h3 class="text-xl font-bold mb-3">Full Infrastructure</h3>
675
+ <p class="opacity-80">
676
+ Automatic domain registration, SSL setup, hosting configuration, and WordPress installation.
677
+ </p>
678
+ </div>
679
+ <div class="bg-white bg-opacity-10 rounded-2xl p-8 hover:bg-opacity-20 transition">
680
+ <div class="w-14 h-14 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mb-6">
681
+ <i class="fas fa-brain text-2xl text-green-400"></i>
682
+ </div>
683
+ <h3 class="text-xl font-bold mb-3">AI Content Creation</h3>
684
+ <p class="opacity-80">
685
+ Generates SEO-optimized content, images, and even product descriptions for e-commerce sites.
686
+ </p>
687
+ </div>
688
+ </div>
689
+ </section>
690
+
691
+ <!-- Footer -->
692
+ <footer class="border-t border-white border-opacity-10 pt-12 pb-8 mt-12">
693
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
694
+ <div>
695
+ <h4 class="text-lg font-bold mb-4">AI Website Generator</h4>
696
+ <p class="opacity-80">
697
+ The most advanced AI website creation platform that handles everything from code to deployment.
698
+ </p>
699
+ </div>
700
+ <div>
701
+ <h4 class="text-lg font-bold mb-4">Features</h4>
702
+ <ul class="space-y-2">
703
+ <li><a href="#" class="opacity-80 hover:opacity-100">Code Generation</a></li>
704
+ <li><a href="#" class="opacity-80 hover:opacity-100">Hosting Setup</a></li>
705
+ <li><a href="#" class="opacity-80 hover:opacity-100">Content Creation</a></li>
706
+ <li><a href="#" class="opacity-80 hover:opacity-100">E-commerce</a></li>
707
+ </ul>
708
+ </div>
709
+ <div>
710
+ <h4 class="text-lg font-bold mb-4">Resources</h4>
711
+ <ul class="space-y-2">
712
+ <li><a href="#" class="opacity-80 hover:opacity-100">Documentation</a></li>
713
+ <li><a href="#" class="opacity-80 hover:opacity-100">API</a></li>
714
+ <li><a href="#" class="opacity-80 hover:opacity-100">Tutorials</a></li>
715
+ <li><a href="#" class="opacity-80 hover:opacity-100">Blog</a></li>
716
+ </ul>
717
+ </div>
718
+ <div>
719
+ <h4 class="text-lg font-bold mb-4">Contact</h4>
720
+ <ul class="space-y-2">
721
+ <li class="flex items-center"><i class="fas fa-envelope mr-2 opacity-80"></i> <a href="#" class="opacity-80 hover:opacity-100">[email protected]</a></li>
722
+ <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>
723
+ <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>
724
+ </ul>
725
+ </div>
726
+ </div>
727
+ <div class="pt-8 border-t border-white border-opacity-10 flex flex-col md:flex-row justify-between items-center">
728
+ <div class="mb-4 md:mb-0">
729
+ © 2023 AI Website Generator Pro. All rights reserved.
730
+ </div>
731
+ <div class="flex space-x-6">
732
+ <a href="#"><i class="fab fa-twitter text-xl opacity-80 hover:opacity-100"></i></a>
733
+ <a href="#"><i class="fab fa-facebook text-xl opacity-80 hover:opacity-100"></i></a>
734
+ <a href="#"><i class="fab fa-instagram text-xl opacity-80 hover:opacity-100"></i></a>
735
+ <a href="#"><i class="fab fa-github text-xl opacity-80 hover:opacity-100"></i></a>
736
+ </div>
737
+ </div>
738
+ </footer>
739
+ </div>
740
+
741
+ <script>
742
+ // Step navigation
743
+ document.querySelectorAll('.next-step').forEach(button => {
744
+ button.addEventListener('click', () => {
745
+ const currentStep = document.querySelector('.step-content:not(.hidden)');
746
+ const nextStep = currentStep.nextElementSibling;
747
+
748
+ if (nextStep && nextStep.classList.contains('step-content')) {
749
+ currentStep.classList.add('hidden');
750
+ nextStep.classList.remove('hidden');
751
+
752
+ // Update progress steps
753
+ const currentProgress = document.querySelector('.progress-step.active');
754
+ const nextProgress = currentProgress.nextElementSibling;
755
+
756
+ currentProgress.classList.remove('active');
757
+ nextProgress.classList.add('active');
758
+ }
759
+ });
760
+ });
761
+
762
+ document.querySelectorAll('.prev-step').forEach(button => {
763
+ button.addEventListener('click', () => {
764
+ const currentStep = document.querySelector('.step-content:not(.hidden)');
765
+ const prevStep = currentStep.previousElementSibling;
766
+
767
+ if (prevStep && prevStep.classList.contains('step-content')) {
768
+ currentStep.classList.add('hidden');
769
+ prevStep.classList.remove('hidden');
770
+
771
+ // Update progress steps
772
+ const currentProgress = document.querySelector('.progress-step.active');
773
+ const prevProgress = currentProgress.previousElementSibling;
774
+
775
+ currentProgress.classList.remove('active');
776
+ prevProgress.classList.add('active');
777
+ }
778
+ });
779
+ });
780
+
781
+ // Start button
782
+ document.getElementById('startBtn').addEventListener('click', () => {
783
+ document.getElementById('generatorSection').classList.remove('hidden');
784
+ window.scrollTo({
785
+ top: document.getElementById('generatorSection').offsetTop - 100,
786
+ behavior: 'smooth'
787
+ });
788
+ });
789
+
790
+ // Generate button
791
+ document.getElementById('generateBtn').addEventListener('click', () => {
792
+ document.getElementById('generatorSection').classList.add('hidden');
793
+ document.getElementById('generationProgress').classList.remove('hidden');
794
+
795
+ // Simulate generation progress
796
+ let progress = 0;
797
+ const progressBar = document.getElementById('progressBar');
798
+ const progressPercent = document.getElementById('progressPercent');
799
+ const progressLog = document.getElementById('progressLog');
800
+ const codeStatus = document.getElementById('codeStatus');
801
+ const hostingStatus = document.getElementById('hostingStatus');
802
+ const wpStatus = document.getElementById('wpStatus');
803
+
804
+ const interval = setInterval(() => {
805
+ progress += Math.random() * 5;
806
+ if (progress > 100) progress = 100;
807
+
808
+ progressBar.style.width = `${progress}%`;
809
+ progressPercent.textContent = `${Math.floor(progress)}%`;
810
+
811
+ // Add log entries at certain intervals
812
+ if (progress > 10 && progress < 15) {
813
+ progressLog.innerHTML += '<div class="text-gray-400">> Creating database structure...</div>';
814
+ }
815
+ if (progress > 20 && progress < 25) {
816
+ progressLog.innerHTML += '<div class="text-gray-400">> Generating frontend components...</div>';
817
+ }
818
+ if (progress > 30 && progress < 35) {
819
+ progressLog.innerHTML += '<div class="text-gray-400">> Implementing backend logic...</div>';
820
+ codeStatus.textContent = 'In Progress';
821
+ }
822
+ if (progress > 40 && progress < 45) {
823
+ progressLog.innerHTML += '<div class="text-gray-400">> Registering domain name...</div>';
824
+ }
825
+ if (progress > 50 && progress < 55) {
826
+ progressLog.innerHTML += '<div class="text-gray-400">> Configuring hosting server...</div>';
827
+ hostingStatus.textContent = 'In Progress';
828
+ }
829
+ if (progress > 60 && progress < 65) {
830
+ progressLog.innerHTML += '<div class="text-gray-400">> Installing WordPress...</div>';
831
+ }
832
+ if (progress > 70 && progress < 75) {
833
+ progressLog.innerHTML += '<div class="text-gray-400">> Configuring plugins...</div>';
834
+ wpStatus.textContent = 'In Progress';
835
+ }
836
+ if (progress > 80 && progress < 85) {
837
+ progressLog.innerHTML += '<div class="text-gray-400">> Generating SEO content...</div>';
838
+ }
839
+ if (progress > 90 && progress < 95) {
840
+ progressLog.innerHTML += '<div class="text-gray-400">> Finalizing deployment...</div>';
841
+ }
842
+ if (progress === 100) {
843
+ progressLog.innerHTML += '<div class="text-green-400">> Website generation complete!</div>';
844
+ codeStatus.textContent = 'Complete';
845
+ hostingStatus.textContent = 'Complete';
846
+ wpStatus.textContent = 'Complete';
847
+
848
+ clearInterval(interval);
849
+
850
+ // Show completion screen after a delay
851
+ setTimeout(() => {
852
+ document.getElementById('generationProgress').classList.add('hidden');
853
+ document.getElementById('completionScreen').classList.remove('hidden');
854
+ window.scrollTo({
855
+ top: document.getElementById('completionScreen').offsetTop - 100,
856
+ behavior: 'smooth'
857
+ });
858
+ }, 1500);
859
+ }
860
+
861
+ // Auto-scroll log
862
+ progressLog.scrollTop = progressLog.scrollHeight;
863
+ }, 300);
864
+ });
865
+
866
+ // Color selection
867
+ document.querySelectorAll('[class*="bg-"].cursor-pointer').forEach(el => {
868
+ el.addEventListener('click', () => {
869
+ // Remove glow from all colors
870
+ document.querySelectorAll('[class*="bg-"].cursor-pointer').forEach(color => {
871
+ color.classList.remove('glow');
872
+ });
873
+
874
+ // Add glow to selected color
875
+ el.classList.add('glow');
876
+ });
877
+ });
878
+ </script>
879
+ <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>
880
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ je veux un génerateur tres sofitiqué d'nteligence artificiel de 1298700 assitant ia génerateur de code et scrypt de site web que par description et visalisation etape par etape en automatique pour creer des site imense avec plus de 2000ligne en automatique avec domaine,ssl, serveur , wordpress enregistrement toute complet en automatique , avec une tres belle interface tres animé