Hugging Face's logo

Spaces:
docto41
/
hypersite
Running

App Files Community
docto41 commited on
Commit
be85ae4
·
verified ·
1 Parent(s): 2c74091

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +89 -37
  2. prompts.txt +2 -1
index.html CHANGED
@@ -49,6 +49,21 @@
49
  .line-numbers {
50
  user-select: none;
51
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  </style>
53
  </head>
54
  <body class="bg-gray-50 font-sans">
@@ -66,18 +81,30 @@
66
  <a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">AI Generator</a>
67
  <a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Domains</a>
68
  <a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Export</a>
69
- <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
70
  <i class="fas fa-rocket mr-1"></i> Publish
71
  </button>
72
  </div>
73
  <div class="-mr-2 flex items-center md:hidden">
74
- <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500" aria-expanded="false">
75
  <span class="sr-only">Open main menu</span>
76
  <i class="fas fa-bars"></i>
77
  </button>
78
  </div>
79
  </div>
80
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
81
  </nav>
82
 
83
  <!-- Main Content -->
@@ -87,14 +114,14 @@
87
  <div class="p-4">
88
  <div class="flex justify-between items-center mb-4">
89
  <h2 class="text-lg font-semibold text-gray-800">AI Generator</h2>
90
- <button class="text-purple-600 hover:text-purple-800">
91
  <i class="fas fa-sync-alt"></i>
92
  </button>
93
  </div>
94
 
95
  <div class="mb-6">
96
  <label class="block text-sm font-medium text-gray-700 mb-2">Website Type</label>
97
- <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm">
98
  <option>E-commerce</option>
99
  <option>Portfolio</option>
100
  <option>Business</option>
@@ -106,7 +133,7 @@
106
 
107
  <div class="mb-6">
108
  <label class="block text-sm font-medium text-gray-700 mb-2">Industry</label>
109
- <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm">
110
  <option>Technology</option>
111
  <option>Fashion</option>
112
  <option>Food & Beverage</option>
@@ -119,19 +146,19 @@
119
  <div class="mb-6">
120
  <label class="block text-sm font-medium text-gray-700 mb-2">Color Scheme</label>
121
  <div class="flex space-x-2">
122
- <div class="w-8 h-8 rounded-full bg-purple-500 cursor-pointer border-2 border-white shadow-md tooltip">
123
  <div class="tooltip-text absolute z-10 invisible opacity-0 bg-black text-white text-xs rounded py-1 px-2 -mt-8 -ml-3">Purple</div>
124
  </div>
125
- <div class="w-8 h-8 rounded-full bg-blue-500 cursor-pointer border-2 border-white shadow-md tooltip">
126
  <div class="tooltip-text absolute z-10 invisible opacity-0 bg-black text-white text-xs rounded py-1 px-2 -mt-8 -ml-3">Blue</div>
127
  </div>
128
- <div class="w-8 h-8 rounded-full bg-green-500 cursor-pointer border-2 border-white shadow-md tooltip">
129
  <div class="tooltip-text absolute z-10 invisible opacity-0 bg-black text-white text-xs rounded py-1 px-2 -mt-8 -ml-3">Green</div>
130
  </div>
131
- <div class="w-8 h-8 rounded-full bg-red-500 cursor-pointer border-2 border-white shadow-md tooltip">
132
  <div class="tooltip-text absolute z-10 invisible opacity-0 bg-black text-white text-xs rounded py-1 px-2 -mt-8 -ml-3">Red</div>
133
  </div>
134
- <div class="w-8 h-8 rounded-full bg-gray-300 cursor-pointer border-2 border-white shadow-md flex items-center justify-center tooltip">
135
  <i class="fas fa-sliders-h text-gray-600 text-xs"></i>
136
  <div class="tooltip-text absolute z-10 invisible opacity-0 bg-black text-white text-xs rounded py-1 px-2 -mt-8 -ml-3">Custom</div>
137
  </div>
@@ -150,7 +177,7 @@
150
  <label class="block text-sm font-medium text-gray-700 mb-2">Additional Features</label>
151
  <div class="space-y-2">
152
  <div class="flex items-center">
153
- <input type="checkbox" id="responsive" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
154
  <label for="responsive" class="ml-2 block text-sm text-gray-700">Responsive Design</label>
155
  </div>
156
  <div class="flex items-center">
@@ -164,7 +191,7 @@
164
  </div>
165
  </div>
166
 
167
- <button id="generate-site" class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-md font-medium transition duration-300 flex items-center justify-center">
168
  <i class="fas fa-magic mr-2"></i> Generate Website
169
  </button>
170
 
@@ -186,7 +213,7 @@
186
  <div class="p-4 border-b border-gray-200 flex justify-between items-center">
187
  <div class="flex space-x-4">
188
  <div class="relative">
189
- <button class="px-4 py-1.5 bg-purple-600 text-white rounded-md text-sm font-medium flex items-center">
190
  <i class="fas fa-globe mr-2"></i> Domain
191
  </button>
192
  <div class="absolute left-0 mt-2 w-80 bg-white rounded-md shadow-lg z-10 hidden" id="domain-dropdown">
@@ -202,7 +229,7 @@
202
  <option>.shop</option>
203
  </select>
204
  </div>
205
- <button class="w-full mt-3 bg-white text-purple-600 hover:bg-gray-100 px-3 py-2 rounded-md text-sm font-medium">
206
  Check Availability
207
  </button>
208
  </div>
@@ -221,27 +248,27 @@
221
  </div>
222
  <span class="text-sm font-medium">Free</span>
223
  </div>
224
- <button class="w-full mt-3 bg-purple-600 hover:bg-purple-700 text-white px-3 py-2 rounded-md text-sm font-medium">
225
  Buy & Connect
226
  </button>
227
  </div>
228
  </div>
229
  </div>
230
- <button class="px-4 py-1.5 bg-gray-100 rounded-md text-sm font-medium flex items-center">
231
  <i class="fas fa-code mr-2"></i> Code Editor
232
  </button>
233
  </div>
234
  <div class="flex space-x-2">
235
- <button class="px-3 py-1 bg-gray-100 rounded-md text-sm font-medium">
236
  <i class="fas fa-desktop mr-1"></i>
237
  </button>
238
- <button class="px-3 py-1 bg-gray-100 rounded-md text-sm font-medium">
239
  <i class="fas fa-tablet-alt mr-1"></i>
240
  </button>
241
- <button class="px-3 py-1 bg-gray-100 rounded-md text-sm font-medium">
242
  <i class="fas fa-mobile-alt mr-1"></i>
243
  </button>
244
- <button class="px-3 py-1 bg-purple-100 text-purple-600 rounded-md text-sm font-medium">
245
  <i class="fas fa-eye mr-1"></i> Preview
246
  </button>
247
  </div>
@@ -260,7 +287,7 @@
260
  </div>
261
  <div class="ml-auto pl-3">
262
  <div class="-mx-1.5 -my-1.5">
263
- <button type="button" class="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-blue-50">
264
  <span class="sr-only">Dismiss</span>
265
  <i class="fas fa-times h-5 w-5"></i>
266
  </button>
@@ -272,14 +299,14 @@
272
  <!-- Code Editor (Hidden by default) -->
273
  <div id="code-editor-container" class="hidden">
274
  <div class="flex border-b border-gray-200">
275
- <button class="px-4 py-2 text-sm font-medium border-b-2 border-purple-500 text-purple-600">index.html</button>
276
- <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">styles.css</button>
277
- <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">script.js</button>
278
  <div class="ml-auto flex">
279
- <button class="px-3 py-1 text-sm text-gray-500 hover:text-gray-700">
280
  <i class="fas fa-copy"></i>
281
  </button>
282
- <button class="px-3 py-1 text-sm text-gray-500 hover:text-gray-700">
283
  <i class="fas fa-download"></i>
284
  </button>
285
  </div>
@@ -330,21 +357,21 @@
330
  <div class="mb-6">
331
  <h3 class="font-medium text-gray-700 mb-3">Download Options</h3>
332
  <div class="space-y-3">
333
- <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
334
  <div class="flex items-center">
335
  <i class="fas fa-file-code text-blue-500 mr-3 text-xl"></i>
336
  <span>HTML Files</span>
337
  </div>
338
  <i class="fas fa-download text-gray-400"></i>
339
  </button>
340
- <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
341
  <div class="flex items-center">
342
  <i class="fas fa-file-archive text-purple-500 mr-3 text-xl"></i>
343
  <span>ZIP Archive</span>
344
  </div>
345
  <i class="fas fa-download text-gray-400"></i>
346
  </button>
347
- <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
348
  <div class="flex items-center">
349
  <i class="fab fa-github text-gray-800 mr-3 text-xl"></i>
350
  <span>GitHub Repository</span>
@@ -357,21 +384,21 @@
357
  <div class="mb-6">
358
  <h3 class="font-medium text-gray-700 mb-3">Publish Options</h3>
359
  <div class="space-y-3">
360
- <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
361
  <div class="flex items-center">
362
  <i class="fas fa-cloud text-blue-400 mr-3 text-xl"></i>
363
  <span>HyperSite Hosting</span>
364
  </div>
365
  <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Recommended</span>
366
  </button>
367
- <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
368
  <div class="flex items-center">
369
  <i class="fab fa-aws text-orange-500 mr-3 text-xl"></i>
370
  <span>AWS S3</span>
371
  </div>
372
  <i class="fas fa-external-link-alt text-gray-400"></i>
373
  </button>
374
- <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
375
  <div class="flex items-center">
376
  <i class="fab fa-google-drive text-blue-500 mr-3 text-xl"></i>
377
  <span>Google Drive</span>
@@ -390,7 +417,7 @@
390
  </div>
391
  </div>
392
 
393
- <button class="w-full mt-6 bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-md font-medium transition duration-300">
394
  <i class="fas fa-rocket mr-2"></i> Publish Now
395
  </button>
396
  </div>
@@ -427,10 +454,10 @@
427
  </div>
428
  </div>
429
  <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
430
- <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
431
  <i class="fas fa-cloud-upload-alt mr-2"></i> Publish Now
432
  </button>
433
- <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
434
  <i class="fas fa-download mr-2"></i> Download ZIP
435
  </button>
436
  </div>
@@ -438,8 +465,33 @@
438
  </div>
439
  </div>
440
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
441
  <script>
442
  document.addEventListener('DOMContentLoaded', function() {
 
 
 
 
 
 
 
 
443
  // Update content length display
444
  const contentLength = document.getElementById('content-length');
445
  const contentLengthValue = document.getElementById('content-length-value');
@@ -449,7 +501,7 @@
449
  });
450
 
451
  // Domain dropdown toggle
452
- const domainButton = document.querySelector('button:has(.fa-globe)');
453
  const domainDropdown = document.getElementById('domain-dropdown');
454
 
455
  domainButton.addEventListener('click', function(e) {
@@ -462,7 +514,7 @@
462
  });
463
 
464
  // Code editor toggle
465
- const codeEditorButton = document.querySelector('button:has(.fa-code)');
466
  const codeEditorContainer = document.getElementById('code-editor-container');
467
  const visualEditor = document.getElementById('visual-editor');
468
 
 
49
  .line-numbers {
50
  user-select: none;
51
  }
52
+ .pulse-animation {
53
+ animation: pulse 2s infinite;
54
+ }
55
+ @keyframes pulse {
56
+ 0% { transform: scale(1); }
57
+ 50% { transform: scale(1.05); }
58
+ 100% { transform: scale(1); }
59
+ }
60
+ .fade-in {
61
+ animation: fadeIn 0.5s ease-in;
62
+ }
63
+ @keyframes fadeIn {
64
+ from { opacity: 0; }
65
+ to { opacity: 1; }
66
+ }
67
  </style>
68
  </head>
69
  <body class="bg-gray-50 font-sans">
 
81
  <a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">AI Generator</a>
82
  <a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Domains</a>
83
  <a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Export</a>
84
+ <button id="publish-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
85
  <i class="fas fa-rocket mr-1"></i> Publish
86
  </button>
87
  </div>
88
  <div class="-mr-2 flex items-center md:hidden">
89
+ <button id="mobile-menu-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500" aria-expanded="false">
90
  <span class="sr-only">Open main menu</span>
91
  <i class="fas fa-bars"></i>
92
  </button>
93
  </div>
94
  </div>
95
  </div>
96
+
97
+ <!-- Mobile menu -->
98
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200">
99
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
100
+ <a href="#" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-600">AI Generator</a>
101
+ <a href="#" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-600">Domains</a>
102
+ <a href="#" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-600">Export</a>
103
+ <button class="w-full text-left block px-3 py-2 text-base font-medium text-purple-600">
104
+ <i class="fas fa-rocket mr-1"></i> Publish
105
+ </button>
106
+ </div>
107
+ </div>
108
  </nav>
109
 
110
  <!-- Main Content -->
 
114
  <div class="p-4">
115
  <div class="flex justify-between items-center mb-4">
116
  <h2 class="text-lg font-semibold text-gray-800">AI Generator</h2>
117
+ <button id="refresh-ai" class="text-purple-600 hover:text-purple-800">
118
  <i class="fas fa-sync-alt"></i>
119
  </button>
120
  </div>
121
 
122
  <div class="mb-6">
123
  <label class="block text-sm font-medium text-gray-700 mb-2">Website Type</label>
124
+ <select id="website-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm">
125
  <option>E-commerce</option>
126
  <option>Portfolio</option>
127
  <option>Business</option>
 
133
 
134
  <div class="mb-6">
135
  <label class="block text-sm font-medium text-gray-700 mb-2">Industry</label>
136
+ <select id="industry-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm">
137
  <option>Technology</option>
138
  <option>Fashion</option>
139
  <option>Food & Beverage</option>
 
146
  <div class="mb-6">
147
  <label class="block text-sm font-medium text-gray-700 mb-2">Color Scheme</label>
148
  <div class="flex space-x-2">
149
+ <div id="color-purple" class="w-8 h-8 rounded-full bg-purple-500 cursor-pointer border-2 border-white shadow-md tooltip">
150
  <div class="tooltip-text absolute z-10 invisible opacity-0 bg-black text-white text-xs rounded py-1 px-2 -mt-8 -ml-3">Purple</div>
151
  </div>
152
+ <div id="color-blue" class="w-8 h-8 rounded-full bg-blue-500 cursor-pointer border-2 border-white shadow-md tooltip">
153
  <div class="tooltip-text absolute z-10 invisible opacity-0 bg-black text-white text-xs rounded py-1 px-2 -mt-8 -ml-3">Blue</div>
154
  </div>
155
+ <div id="color-green" class="w-8 h-8 rounded-full bg-green-500 cursor-pointer border-2 border-white shadow-md tooltip">
156
  <div class="tooltip-text absolute z-10 invisible opacity-0 bg-black text-white text-xs rounded py-1 px-2 -mt-8 -ml-3">Green</div>
157
  </div>
158
+ <div id="color-red" class="w-8 h-8 rounded-full bg-red-500 cursor-pointer border-2 border-white shadow-md tooltip">
159
  <div class="tooltip-text absolute z-10 invisible opacity-0 bg-black text-white text-xs rounded py-1 px-2 -mt-8 -ml-3">Red</div>
160
  </div>
161
+ <div id="color-custom" class="w-8 h-8 rounded-full bg-gray-300 cursor-pointer border-2 border-white shadow-md flex items-center justify-center tooltip">
162
  <i class="fas fa-sliders-h text-gray-600 text-xs"></i>
163
  <div class="tooltip-text absolute z-10 invisible opacity-0 bg-black text-white text-xs rounded py-1 px-2 -mt-8 -ml-3">Custom</div>
164
  </div>
 
177
  <label class="block text-sm font-medium text-gray-700 mb-2">Additional Features</label>
178
  <div class="space-y-2">
179
  <div class="flex items-center">
180
+ <input type="checkbox" id="responsive" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked>
181
  <label for="responsive" class="ml-2 block text-sm text-gray-700">Responsive Design</label>
182
  </div>
183
  <div class="flex items-center">
 
191
  </div>
192
  </div>
193
 
194
+ <button id="generate-site" class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-md font-medium transition duration-300 flex items-center justify-center pulse-animation">
195
  <i class="fas fa-magic mr-2"></i> Generate Website
196
  </button>
197
 
 
213
  <div class="p-4 border-b border-gray-200 flex justify-between items-center">
214
  <div class="flex space-x-4">
215
  <div class="relative">
216
+ <button id="domain-btn" class="px-4 py-1.5 bg-purple-600 text-white rounded-md text-sm font-medium flex items-center">
217
  <i class="fas fa-globe mr-2"></i> Domain
218
  </button>
219
  <div class="absolute left-0 mt-2 w-80 bg-white rounded-md shadow-lg z-10 hidden" id="domain-dropdown">
 
229
  <option>.shop</option>
230
  </select>
231
  </div>
232
+ <button id="check-domain" class="w-full mt-3 bg-white text-purple-600 hover:bg-gray-100 px-3 py-2 rounded-md text-sm font-medium">
233
  Check Availability
234
  </button>
235
  </div>
 
248
  </div>
249
  <span class="text-sm font-medium">Free</span>
250
  </div>
251
+ <button id="buy-domain" class="w-full mt-3 bg-purple-600 hover:bg-purple-700 text-white px-3 py-2 rounded-md text-sm font-medium">
252
  Buy & Connect
253
  </button>
254
  </div>
255
  </div>
256
  </div>
257
+ <button id="code-editor-btn" class="px-4 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium flex items-center">
258
  <i class="fas fa-code mr-2"></i> Code Editor
259
  </button>
260
  </div>
261
  <div class="flex space-x-2">
262
+ <button id="desktop-view" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium">
263
  <i class="fas fa-desktop mr-1"></i>
264
  </button>
265
+ <button id="tablet-view" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium">
266
  <i class="fas fa-tablet-alt mr-1"></i>
267
  </button>
268
+ <button id="mobile-view" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium">
269
  <i class="fas fa-mobile-alt mr-1"></i>
270
  </button>
271
+ <button id="preview-btn" class="px-3 py-1 bg-purple-100 text-purple-600 hover:bg-purple-200 rounded-md text-sm font-medium">
272
  <i class="fas fa-eye mr-1"></i> Preview
273
  </button>
274
  </div>
 
287
  </div>
288
  <div class="ml-auto pl-3">
289
  <div class="-mx-1.5 -my-1.5">
290
+ <button id="dismiss-ai-status" type="button" class="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-blue-50">
291
  <span class="sr-only">Dismiss</span>
292
  <i class="fas fa-times h-5 w-5"></i>
293
  </button>
 
299
  <!-- Code Editor (Hidden by default) -->
300
  <div id="code-editor-container" class="hidden">
301
  <div class="flex border-b border-gray-200">
302
+ <button id="html-tab" class="px-4 py-2 text-sm font-medium border-b-2 border-purple-500 text-purple-600">index.html</button>
303
+ <button id="css-tab" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">styles.css</button>
304
+ <button id="js-tab" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">script.js</button>
305
  <div class="ml-auto flex">
306
+ <button id="copy-code" class="px-3 py-1 text-sm text-gray-500 hover:text-gray-700">
307
  <i class="fas fa-copy"></i>
308
  </button>
309
+ <button id="download-code" class="px-3 py-1 text-sm text-gray-500 hover:text-gray-700">
310
  <i class="fas fa-download"></i>
311
  </button>
312
  </div>
 
357
  <div class="mb-6">
358
  <h3 class="font-medium text-gray-700 mb-3">Download Options</h3>
359
  <div class="space-y-3">
360
+ <button id="download-html" class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
361
  <div class="flex items-center">
362
  <i class="fas fa-file-code text-blue-500 mr-3 text-xl"></i>
363
  <span>HTML Files</span>
364
  </div>
365
  <i class="fas fa-download text-gray-400"></i>
366
  </button>
367
+ <button id="download-zip" class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
368
  <div class="flex items-center">
369
  <i class="fas fa-file-archive text-purple-500 mr-3 text-xl"></i>
370
  <span>ZIP Archive</span>
371
  </div>
372
  <i class="fas fa-download text-gray-400"></i>
373
  </button>
374
+ <button id="github-export" class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
375
  <div class="flex items-center">
376
  <i class="fab fa-github text-gray-800 mr-3 text-xl"></i>
377
  <span>GitHub Repository</span>
 
384
  <div class="mb-6">
385
  <h3 class="font-medium text-gray-700 mb-3">Publish Options</h3>
386
  <div class="space-y-3">
387
+ <button id="hyper-hosting" class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
388
  <div class="flex items-center">
389
  <i class="fas fa-cloud text-blue-400 mr-3 text-xl"></i>
390
  <span>HyperSite Hosting</span>
391
  </div>
392
  <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Recommended</span>
393
  </button>
394
+ <button id="aws-publish" class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
395
  <div class="flex items-center">
396
  <i class="fab fa-aws text-orange-500 mr-3 text-xl"></i>
397
  <span>AWS S3</span>
398
  </div>
399
  <i class="fas fa-external-link-alt text-gray-400"></i>
400
  </button>
401
+ <button id="drive-publish" class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-md border border-gray-200">
402
  <div class="flex items-center">
403
  <i class="fab fa-google-drive text-blue-500 mr-3 text-xl"></i>
404
  <span>Google Drive</span>
 
417
  </div>
418
  </div>
419
 
420
+ <button id="publish-now" class="w-full mt-6 bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-md font-medium transition duration-300">
421
  <i class="fas fa-rocket mr-2"></i> Publish Now
422
  </button>
423
  </div>
 
454
  </div>
455
  </div>
456
  <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
457
+ <button id="publish-from-preview" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
458
  <i class="fas fa-cloud-upload-alt mr-2"></i> Publish Now
459
  </button>
460
+ <button id="download-from-preview" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
461
  <i class="fas fa-download mr-2"></i> Download ZIP
462
  </button>
463
  </div>
 
465
  </div>
466
  </div>
467
 
468
+ <!-- Success Notification -->
469
+ <div id="success-notification" class="fixed bottom-4 right-4 hidden">
470
+ <div class="bg-green-500 text-white px-4 py-3 rounded-md shadow-lg flex items-start">
471
+ <div class="flex-shrink-0">
472
+ <i class="fas fa-check-circle"></i>
473
+ </div>
474
+ <div class="ml-3">
475
+ <p class="text-sm font-medium" id="success-message">Operation completed successfully!</p>
476
+ </div>
477
+ <div class="ml-auto pl-3">
478
+ <button id="dismiss-notification" class="text-white hover:text-gray-200">
479
+ <i class="fas fa-times"></i>
480
+ </button>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
  <script>
486
  document.addEventListener('DOMContentLoaded', function() {
487
+ // Mobile menu toggle
488
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
489
+ const mobileMenu = document.getElementById('mobile-menu');
490
+
491
+ mobileMenuBtn.addEventListener('click', function() {
492
+ mobileMenu.classList.toggle('hidden');
493
+ });
494
+
495
  // Update content length display
496
  const contentLength = document.getElementById('content-length');
497
  const contentLengthValue = document.getElementById('content-length-value');
 
501
  });
502
 
503
  // Domain dropdown toggle
504
+ const domainButton = document.getElementById('domain-btn');
505
  const domainDropdown = document.getElementById('domain-dropdown');
506
 
507
  domainButton.addEventListener('click', function(e) {
 
514
  });
515
 
516
  // Code editor toggle
517
+ const codeEditorButton = document.getElementById('code-editor-btn');
518
  const codeEditorContainer = document.getElementById('code-editor-container');
519
  const visualEditor = document.getElementById('visual-editor');
520
 
prompts.txt CHANGED
@@ -1,2 +1,3 @@
1
  https://huggingface.co/spaces/doctorblog3/hypersite-builer
2
- je veux que par description avec visuel en direct de la creation du site avec domaine et ssl integrer en automatique , avec tléchargement du site en html et fichier zip je veux des puissant IA qui génére des gros site jusqua 1000 ligne
 
 
1
  https://huggingface.co/spaces/doctorblog3/hypersite-builer
2
+ je veux que par description avec visuel en direct de la creation du site avec domaine et ssl integrer en automatique , avec tléchargement du site en html et fichier zip je veux des puissant IA qui génére des gros site jusqua 1000 ligne
3
+ corriger toute les bouton non cliquable et faire une mise a jours complet