Hugging Face's logo

Spaces:
docto41
/
ai-website
Running

App Files Community
docto41 commited on
Commit
64baa6d
·
verified ·
1 Parent(s): e506dc9

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +529 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Website
3
- emoji: 🐠
4
- colorFrom: green
5
- colorTo: purple
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
3
+ emoji: 🐳
4
+ colorFrom: blue
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,529 @@
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 1541</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
11
+ <style>
12
+ @keyframes float {
13
+ 0% { transform: translateY(0px); }
14
+ 50% { transform: translateY(-20px); }
15
+ 100% { transform: translateY(0px); }
16
+ }
17
+ @keyframes pulse {
18
+ 0% { opacity: 0.6; }
19
+ 50% { opacity: 1; }
20
+ 100% { opacity: 0.6; }
21
+ }
22
+ @keyframes neon {
23
+ 0% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6; }
24
+ 50% { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0073e6, 0 0 40px #0073e6; }
25
+ 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6; }
26
+ }
27
+ .neon-text {
28
+ animation: neon 1.5s ease-in-out infinite alternate;
29
+ }
30
+ .floating {
31
+ animation: float 6s ease-in-out infinite;
32
+ }
33
+ .pulse {
34
+ animation: pulse 2s infinite;
35
+ }
36
+ .holographic-bg {
37
+ background: linear-gradient(135deg, rgba(0,30,60,0.9) 0%, rgba(0,80,120,0.8) 50%, rgba(0,30,60,0.9) 100%);
38
+ box-shadow: 0 0 30px rgba(0, 119, 255, 0.5);
39
+ border: 1px solid rgba(0, 195, 255, 0.3);
40
+ }
41
+ .glow-border {
42
+ box-shadow: 0 0 15px rgba(0, 162, 255, 0.7);
43
+ }
44
+ .terminal-text {
45
+ font-family: 'Courier New', monospace;
46
+ color: #00ff00;
47
+ text-shadow: 0 0 5px #00ff00;
48
+ }
49
+ .cyber-button {
50
+ transition: all 0.3s;
51
+ position: relative;
52
+ overflow: hidden;
53
+ }
54
+ .cyber-button:hover {
55
+ transform: translateY(-3px);
56
+ box-shadow: 0 10px 20px rgba(0, 162, 255, 0.3);
57
+ }
58
+ .cyber-button:active {
59
+ transform: translateY(1px);
60
+ }
61
+ .cyber-button::after {
62
+ content: "";
63
+ display: block;
64
+ position: absolute;
65
+ width: 100%;
66
+ height: 100%;
67
+ top: 0;
68
+ left: 0;
69
+ pointer-events: none;
70
+ background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
71
+ background-repeat: no-repeat;
72
+ background-position: 50%;
73
+ transform: scale(10,10);
74
+ opacity: 0;
75
+ transition: transform .5s, opacity 1s;
76
+ }
77
+ .cyber-button:active::after {
78
+ transform: scale(0,0);
79
+ opacity: 0.3;
80
+ transition: 0s;
81
+ }
82
+ .grid-pattern {
83
+ background-image:
84
+ linear-gradient(rgba(0, 162, 255, 0.1) 1px, transparent 1px),
85
+ linear-gradient(90deg, rgba(0, 162, 255, 0.1) 1px, transparent 1px);
86
+ background-size: 20px 20px;
87
+ }
88
+ .scrollbar-hide::-webkit-scrollbar {
89
+ display: none;
90
+ }
91
+ .scrollbar-hide {
92
+ -ms-overflow-style: none;
93
+ scrollbar-width: none;
94
+ }
95
+ </style>
96
+ </head>
97
+ <body class="bg-gray-900 text-white overflow-hidden">
98
+ <div class="fixed inset-0 grid-pattern z-0"></div>
99
+
100
+ <!-- Main Container -->
101
+ <div class="relative z-10 min-h-screen flex flex-col">
102
+ <!-- Header -->
103
+ <header class="holographic-bg py-6 px-4 lg:px-8 flex justify-between items-center border-b border-cyan-500/20">
104
+ <div class="flex items-center space-x-4">
105
+ <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center glow-border floating">
106
+ <i class="fas fa-robot text-2xl"></i>
107
+ </div>
108
+ <h1 class="text-3xl font-bold neon-text">AI Website Generator 1541</h1>
109
+ </div>
110
+ <div class="flex items-center space-x-4">
111
+ <div class="terminal-text px-4 py-2 bg-black/50 rounded">
112
+ <span class="blink">_</span> <span id="ai-status">1541 AI Agents Online</span>
113
+ </div>
114
+ <button class="cyber-button bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium">
115
+ <i class="fas fa-user-astronaut mr-2"></i> Dashboard
116
+ </button>
117
+ </div>
118
+ </header>
119
+
120
+ <!-- Main Content -->
121
+ <div class="flex flex-1 overflow-hidden">
122
+ <!-- Sidebar -->
123
+ <aside class="w-64 bg-gray-800/80 border-r border-gray-700/50 flex flex-col">
124
+ <div class="p-4 border-b border-gray-700/50">
125
+ <h2 class="text-xl font-semibold text-cyan-300 flex items-center">
126
+ <i class="fas fa-cogs mr-2"></i> Configuration
127
+ </h2>
128
+ </div>
129
+
130
+ <div class="flex-1 overflow-y-auto scrollbar-hide p-4 space-y-4">
131
+ <!-- Website Type -->
132
+ <div class="holographic-bg rounded-lg p-4 glow-border">
133
+ <h3 class="font-medium text-cyan-200 mb-2 flex items-center">
134
+ <i class="fas fa-globe mr-2"></i> Website Type
135
+ </h3>
136
+ <select id="website-type" class="w-full bg-gray-900/70 border border-cyan-500/30 rounded px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500">
137
+ <option value="ecommerce">E-commerce</option>
138
+ <option value="business">Business</option>
139
+ <option value="portfolio">Portfolio</option>
140
+ <option value="blog">Blog</option>
141
+ <option value="saas">SaaS</option>
142
+ <option value="agency">Agency</option>
143
+ <option value="education">Education</option>
144
+ <option value="health">Health</option>
145
+ <option value="restaurant">Restaurant</option>
146
+ <option value="realestate">Real Estate</option>
147
+ </select>
148
+ </div>
149
+
150
+ <!-- Color Scheme -->
151
+ <div class="holographic-bg rounded-lg p-4 glow-border">
152
+ <h3 class="font-medium text-cyan-200 mb-2 flex items-center">
153
+ <i class="fas fa-palette mr-2"></i> Color Scheme
154
+ </h3>
155
+ <div class="grid grid-cols-5 gap-2">
156
+ <div class="color-option h-8 w-8 rounded-full bg-blue-600 cursor-pointer border-2 border-transparent hover:border-white" data-color="blue"></div>
157
+ <div class="color-option h-8 w-8 rounded-full bg-purple-600 cursor-pointer border-2 border-transparent hover:border-white" data-color="purple"></div>
158
+ <div class="color-option h-8 w-8 rounded-full bg-green-600 cursor-pointer border-2 border-transparent hover:border-white" data-color="green"></div>
159
+ <div class="color-option h-8 w-8 rounded-full bg-red-600 cursor-pointer border-2 border-transparent hover:border-white" data-color="red"></div>
160
+ <div class="color-option h-8 w-8 rounded-full bg-yellow-500 cursor-pointer border-2 border-transparent hover:border-white" data-color="yellow"></div>
161
+ <div class="color-option h-8 w-8 rounded-full bg-pink-600 cursor-pointer border-2 border-transparent hover:border-white" data-color="pink"></div>
162
+ <div class="color-option h-8 w-8 rounded-full bg-indigo-600 cursor-pointer border-2 border-transparent hover:border-white" data-color="indigo"></div>
163
+ <div class="color-option h-8 w-8 rounded-full bg-teal-500 cursor-pointer border-2 border-transparent hover:border-white" data-color="teal"></div>
164
+ <div class="color-option h-8 w-8 rounded-full bg-orange-500 cursor-pointer border-2 border-transparent hover:border-white" data-color="orange"></div>
165
+ <div class="color-option h-8 w-8 rounded-full bg-gray-700 cursor-pointer border-2 border-transparent hover:border-white" data-color="gray"></div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Layout Style -->
170
+ <div class="holographic-bg rounded-lg p-4 glow-border">
171
+ <h3 class="font-medium text-cyan-200 mb-2 flex items-center">
172
+ <i class="fas fa-layer-group mr-2"></i> Layout Style
173
+ </h3>
174
+ <div class="space-y-2">
175
+ <label class="flex items-center space-x-2 cursor-pointer">
176
+ <input type="radio" name="layout" value="modern" checked class="text-blue-500">
177
+ <span>Modern</span>
178
+ </label>
179
+ <label class="flex items-center space-x-2 cursor-pointer">
180
+ <input type="radio" name="layout" value="minimal" class="text-blue-500">
181
+ <span>Minimal</span>
182
+ </label>
183
+ <label class="flex items-center space-x-2 cursor-pointer">
184
+ <input type="radio" name="layout" value="classic" class="text-blue-500">
185
+ <span>Classic</span>
186
+ </label>
187
+ <label class="flex items-center space-x-2 cursor-pointer">
188
+ <input type="radio" name="layout" value="futuristic" class="text-blue-500">
189
+ <span>Futuristic</span>
190
+ </label>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Pages to Generate -->
195
+ <div class="holographic-bg rounded-lg p-4 glow-border">
196
+ <h3 class="font-medium text-cyan-200 mb-2 flex items-center">
197
+ <i class="fas fa-file-alt mr-2"></i> Pages to Generate
198
+ </h3>
199
+ <div class="space-y-2 max-h-40 overflow-y-auto scrollbar-hide">
200
+ <label class="flex items-center space-x-2 cursor-pointer">
201
+ <input type="checkbox" checked class="text-blue-500">
202
+ <span>Home</span>
203
+ </label>
204
+ <label class="flex items-center space-x-2 cursor-pointer">
205
+ <input type="checkbox" checked class="text-blue-500">
206
+ <span>About</span>
207
+ </label>
208
+ <label class="flex items-center space-x-2 cursor-pointer">
209
+ <input type="checkbox" checked class="text-blue-500">
210
+ <span>Services</span>
211
+ </label>
212
+ <label class="flex items-center space-x-2 cursor-pointer">
213
+ <input type="checkbox" checked class="text-blue-500">
214
+ <span>Portfolio</span>
215
+ </label>
216
+ <label class="flex items-center space-x-2 cursor-pointer">
217
+ <input type="checkbox" checked class="text-blue-500">
218
+ <span>Blog</span>
219
+ </label>
220
+ <label class="flex items-center space-x-2 cursor-pointer">
221
+ <input type="checkbox" checked class="text-blue-500">
222
+ <span>Contact</span>
223
+ </label>
224
+ <label class="flex items-center space-x-2 cursor-pointer">
225
+ <input type="checkbox" class="text-blue-500">
226
+ <span>Pricing</span>
227
+ </label>
228
+ <label class="flex items-center space-x-2 cursor-pointer">
229
+ <input type="checkbox" class="text-blue-500">
230
+ <span>Testimonials</span>
231
+ </label>
232
+ <label class="flex items-center space-x-2 cursor-pointer">
233
+ <input type="checkbox" class="text-blue-500">
234
+ <span>FAQ</span>
235
+ </label>
236
+ <label class="flex items-center space-x-2 cursor-pointer">
237
+ <input type="checkbox" class="text-blue-500">
238
+ <span>Team</span>
239
+ </label>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- AI Settings -->
244
+ <div class="holographic-bg rounded-lg p-4 glow-border">
245
+ <h3 class="font-medium text-cyan-200 mb-2 flex items-center">
246
+ <i class="fas fa-brain mr-2"></i> AI Configuration
247
+ </h3>
248
+ <div class="space-y-3">
249
+ <div>
250
+ <label class="block text-sm text-gray-300 mb-1">Creativity Level</label>
251
+ <input type="range" min="1" max="10" value="7" class="w-full">
252
+ </div>
253
+ <div>
254
+ <label class="block text-sm text-gray-300 mb-1">Content Depth</label>
255
+ <input type="range" min="1" max="10" value="8" class="w-full">
256
+ </div>
257
+ <div>
258
+ <label class="flex items-center space-x-2 cursor-pointer">
259
+ <input type="checkbox" checked class="text-blue-500">
260
+ <span>Auto-optimize SEO</span>
261
+ </label>
262
+ </div>
263
+ <div>
264
+ <label class="flex items-center space-x-2 cursor-pointer">
265
+ <input type="checkbox" checked class="text-blue-500">
266
+ <span>Generate images</span>
267
+ </label>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <div class="p-4 border-t border-gray-700/50">
274
+ <button id="generate-btn" class="cyber-button w-full bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-700 hover:to-cyan-600 text-white px-4 py-3 rounded-lg font-bold text-lg flex items-center justify-center">
275
+ <i class="fas fa-bolt mr-2"></i> GENERATE WEBSITE
276
+ </button>
277
+ </div>
278
+ </aside>
279
+
280
+ <!-- Main Panel -->
281
+ <main class="flex-1 flex flex-col overflow-hidden">
282
+ <!-- Preview Controls -->
283
+ <div class="bg-gray-800/70 border-b border-gray-700/50 p-4 flex justify-between items-center">
284
+ <div class="flex items-center space-x-4">
285
+ <h2 class="text-xl font-semibold text-cyan-300 flex items-center">
286
+ <i class="fas fa-eye mr-2"></i> Real-time Preview
287
+ </h2>
288
+ <div class="terminal-text px-3 py-1 bg-black/50 rounded text-sm">
289
+ <span id="ai-agents-working">0</span>/1541 AI Agents Working
290
+ </div>
291
+ </div>
292
+ <div class="flex items-center space-x-3">
293
+ <div class="relative">
294
+ <select id="device-preview" class="bg-gray-900/70 border border-cyan-500/30 rounded px-3 py-1 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 appearance-none pr-8">
295
+ <option value="desktop">Desktop</option>
296
+ <option value="tablet">Tablet</option>
297
+ <option value="mobile">Mobile</option>
298
+ </select>
299
+ <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
300
+ <i class="fas fa-chevron-down text-xs"></i>
301
+ </div>
302
+ </div>
303
+ <button class="cyber-button bg-gray-700 hover:bg-gray-600 text-white px-4 py-1 rounded-lg">
304
+ <i class="fas fa-expand mr-1"></i> Fullscreen
305
+ </button>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Preview Container -->
310
+ <div class="flex-1 overflow-auto p-4 bg-gray-900/50">
311
+ <div id="preview-container" class="mx-auto bg-white rounded-lg shadow-2xl overflow-hidden transition-all duration-300" style="width: 100%; height: 100%;">
312
+ <div class="flex items-center justify-center h-full">
313
+ <div class="text-center p-8">
314
+ <div class="floating mx-auto w-24 h-24 bg-blue-500 rounded-full flex items-center justify-center mb-6">
315
+ <i class="fas fa-robot text-4xl text-white"></i>
316
+ </div>
317
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">AI Website Generator</h3>
318
+ <p class="text-gray-600 mb-6">Configure your website settings and click "Generate Website" to see the magic happen!</p>
319
+ <div class="pulse text-blue-500">
320
+ <i class="fas fa-arrow-left mr-1"></i>
321
+ <span>Use the panel on the left</span>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <!-- Export Panel -->
329
+ <div class="bg-gray-800/70 border-t border-gray-700/50 p-4">
330
+ <div class="flex justify-between items-center">
331
+ <h2 class="text-xl font-semibold text-cyan-300 flex items-center">
332
+ <i class="fas fa-file-export mr-2"></i> Export Options
333
+ </h2>
334
+ <div class="flex space-x-3">
335
+ <button id="export-html" class="cyber-button bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg">
336
+ <i class="fas fa-file-code mr-2"></i> Export HTML
337
+ </button>
338
+ <button id="export-zip" class="cyber-button bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg">
339
+ <i class="fas fa-file-archive mr-2"></i> Export ZIP
340
+ </button>
341
+ <button id="publish-btn" class="cyber-button bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
342
+ <i class="fas fa-cloud-upload-alt mr-2"></i> Publish
343
+ </button>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </main>
348
+
349
+ <!-- AI Process Panel -->
350
+ <aside class="w-80 bg-gray-800/80 border-l border-gray-700/50 flex flex-col">
351
+ <div class="p-4 border-b border-gray-700/50">
352
+ <h2 class="text-xl font-semibold text-cyan-300 flex items-center">
353
+ <i class="fas fa-microchip mr-2"></i> AI Process
354
+ </h2>
355
+ </div>
356
+
357
+ <div class="flex-1 overflow-y-auto scrollbar-hide p-4">
358
+ <div class="holographic-bg rounded-lg p-4 glow-border mb-4">
359
+ <h3 class="font-medium text-cyan-200 mb-3 flex items-center justify-between">
360
+ <span><i class="fas fa-tasks mr-2"></i> Generation Progress</span>
361
+ <span class="text-sm">0%</span>
362
+ </h3>
363
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
364
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
365
+ </div>
366
+ </div>
367
+
368
+ <div class="holographic-bg rounded-lg p-4 glow-border mb-4">
369
+ <h3 class="font-medium text-cyan-200 mb-3 flex items-center">
370
+ <i class="fas fa-network-wired mr-2"></i> AI Agent Allocation
371
+ </h3>
372
+ <div class="space-y-3">
373
+ <div class="flex justify-between text-sm">
374
+ <span>Design Team</span>
375
+ <span>0/342</span>
376
+ </div>
377
+ <div class="w-full bg-gray-700 rounded-full h-1.5">
378
+ <div class="bg-pink-500 h-1.5 rounded-full" style="width: 0%"></div>
379
+ </div>
380
+
381
+ <div class="flex justify-between text-sm">
382
+ <span>Content Team</span>
383
+ <span>0/512</span>
384
+ </div>
385
+ <div class="w-full bg-gray-700 rounded-full h-1.5">
386
+ <div class="bg-green-500 h-1.5 rounded-full" style="width: 0%"></div>
387
+ </div>
388
+
389
+ <div class="flex justify-between text-sm">
390
+ <span>Code Team</span>
391
+ <span>0/427</span>
392
+ </div>
393
+ <div class="w-full bg-gray-700 rounded-full h-1.5">
394
+ <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 0%"></div>
395
+ </div>
396
+
397
+ <div class="flex justify-between text-sm">
398
+ <span>QA Team</span>
399
+ <span>0/260</span>
400
+ </div>
401
+ <div class="w-full bg-gray-700 rounded-full h-1.5">
402
+ <div class="bg-purple-500 h-1.5 rounded-full" style="width: 0%"></div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+
407
+ <div class="holographic-bg rounded-lg p-4 glow-border">
408
+ <h3 class="font-medium text-cyan-200 mb-3 flex items-center">
409
+ <i class="fas fa-terminal mr-2"></i> AI Process Log
410
+ </h3>
411
+ <div class="bg-black/70 rounded p-3 h-64 overflow-y-auto scrollbar-hide terminal-text text-sm">
412
+ <div class="mb-1"><span class="text-gray-400">$</span> AI System Initialized</div>
413
+ <div class="mb-1"><span class="text-gray-400">$</span> Waiting for user input...</div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="p-4 border-t border-gray-700/50">
419
+ <div class="flex justify-between items-center">
420
+ <div class="text-sm text-gray-400">
421
+ <i class="fas fa-shield-alt mr-1"></i> AI Security: Active
422
+ </div>
423
+ <div class="text-sm text-gray-400">
424
+ <i class="fas fa-bolt mr-1"></i> Power: 98%
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </aside>
429
+ </div>
430
+ </div>
431
+
432
+ <!-- Notification System -->
433
+ <div id="notification-area" class="fixed bottom-4 right-4 space-y-2 z-50"></div>
434
+
435
+ <!-- Scripts -->
436
+ <script>
437
+ // Color scheme selection
438
+ document.querySelectorAll('.color-option').forEach(option => {
439
+ option.addEventListener('click', function() {
440
+ document.querySelectorAll('.color-option').forEach(opt => {
441
+ opt.classList.remove('border-white', 'ring-2', 'ring-offset-2', 'ring-offset-gray-900');
442
+ });
443
+ this.classList.add('border-white', 'ring-2', 'ring-offset-2', 'ring-offset-gray-900');
444
+
445
+ const color = this.getAttribute('data-color');
446
+ // Update UI colors based on selection
447
+ document.documentElement.style.setProperty('--primary-color', `var(--${color}-600)`);
448
+
449
+ // Update button colors
450
+ document.querySelectorAll('.cyber-button').forEach(btn => {
451
+ if (btn.id !== 'generate-btn') {
452
+ btn.classList.remove('bg-blue-600', 'hover:bg-blue-700', 'bg-green-600', 'hover:bg-green-700',
453
+ 'bg-purple-600', 'hover:bg-purple-700', 'bg-red-600', 'hover:bg-red-700',
454
+ 'bg-yellow-500', 'hover:bg-yellow-600', 'bg-pink-600', 'hover:bg-pink-700',
455
+ 'bg-indigo-600', 'hover:bg-indigo-700', 'bg-teal-500', 'hover:bg-teal-600',
456
+ 'bg-orange-500', 'hover:bg-orange-600', 'bg-gray-700', 'hover:bg-gray-600');
457
+
458
+ if (btn.classList.contains('bg-blue-600') || !btn.classList.contains('bg-')) {
459
+ btn.classList.add(`bg-${color}-600`, `hover:bg-${color}-700`);
460
+ }
461
+ }
462
+ });
463
+
464
+ // Update gradient for generate button
465
+ const generateBtn = document.getElementById('generate-btn');
466
+ generateBtn.classList.remove('from-blue-600', 'to-cyan-500', 'hover:from-blue-700', 'hover:to-cyan-600',
467
+ 'from-purple-600', 'to-pink-500', 'hover:from-purple-700', 'hover:to-pink-600',
468
+ 'from-green-600', 'to-emerald-500', 'hover:from-green-700', 'hover:to-emerald-600',
469
+ 'from-red-600', 'to-orange-500', 'hover:from-red-700', 'hover:to-orange-600',
470
+ 'from-yellow-500', 'to-amber-500', 'hover:from-yellow-600', 'hover:to-amber-600',
471
+ 'from-pink-600', 'to-rose-500', 'hover:from-pink-700', 'hover:to-rose-600',
472
+ 'from-indigo-600', 'to-violet-500', 'hover:from-indigo-700', 'hover:to-violet-600',
473
+ 'from-teal-500', 'to-cyan-400', 'hover:from-teal-600', 'hover:to-cyan-500',
474
+ 'from-orange-500', 'to-amber-400', 'hover:from-orange-600', 'hover:to-amber-500',
475
+ 'from-gray-700', 'to-gray-500', 'hover:from-gray-800', 'hover:to-gray-600');
476
+
477
+ let toColor = 'cyan';
478
+ if (color === 'purple') toColor = 'pink';
479
+ if (color === 'green') toColor = 'emerald';
480
+ if (color === 'red') toColor = 'orange';
481
+ if (color === 'yellow') toColor = 'amber';
482
+ if (color === 'pink') toColor = 'rose';
483
+ if (color === 'indigo') toColor = 'violet';
484
+ if (color === 'teal') toColor = 'cyan';
485
+ if (color === 'orange') toColor = 'amber';
486
+ if (color === 'gray') toColor = 'gray';
487
+
488
+ generateBtn.classList.add(`from-${color}-600`, `to-${toColor}-500`, `hover:from-${color}-700`, `hover:to-${toColor}-600`);
489
+ });
490
+ });
491
+
492
+ // Set default color
493
+ document.querySelector('.color-option[data-color="blue"]').click();
494
+
495
+ // Generate website button
496
+ document.getElementById('generate-btn').addEventListener('click', function() {
497
+ const websiteType = document.getElementById('website-type').value;
498
+ const layoutStyle = document.querySelector('input[name="layout"]:checked').value;
499
+
500
+ // Show notification
501
+ showNotification(`Starting generation of ${websiteType} website with ${layoutStyle} layout`, 'info');
502
+
503
+ // Update AI status
504
+ document.getElementById('ai-status').textContent = '1541 AI Agents Working';
505
+
506
+ // Start progress simulation
507
+ simulateGeneration();
508
+ });
509
+
510
+ // Export buttons
511
+ document.getElementById('export-html').addEventListener('click', function() {
512
+ showNotification('Preparing HTML export...', 'info');
513
+ setTimeout(() => {
514
+ // Create a sample HTML file for export
515
+ const htmlContent = `<!DOCTYPE html>
516
+ <html lang="en">
517
+ <head>
518
+ <meta charset="UTF-8">
519
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
520
+ <title>AI Generated Website</title>
521
+ <script src="https://cdn.tailwindcss.com"></script>
522
+ </head>
523
+ <body class="bg-gray-100">
524
+ <div class="container mx-auto px-4 py-8">
525
+ <h1 class="text-4xl font-bold text-center mb-8">Your AI Generated Website</h1>
526
+ <p class="text-lg text-center">This website was automatically generated by the AI Website Generator 1541.</p>
527
+ </div>
528
+ <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" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
529
+ </html>
prompts.txt ADDED
File without changes