Hugging Face's logo

Spaces:
docto41
/
wordpress
Running

App Files Community
docto41 commited on
Commit
b8cee48
·
verified ·
1 Parent(s): 1457e46

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +476 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Wordpress
3
- emoji: 👁
4
- colorFrom: indigo
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: wordpress
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: yellow
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,476 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Installation Complète WordPress - Tout-en-Un</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
+ <style>
10
+ @keyframes float {
11
+ 0%, 100% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-20px); }
13
+ }
14
+
15
+ @keyframes pulse {
16
+ 0%, 100% { transform: scale(1); opacity: 1; }
17
+ 50% { transform: scale(1.05); opacity: 0.9; }
18
+ }
19
+
20
+ @keyframes wave {
21
+ 0% { background-position: 0% 50%; }
22
+ 50% { background-position: 100% 50%; }
23
+ 100% { background-position: 0% 50%; }
24
+ }
25
+
26
+ @keyframes shine {
27
+ 0% { background-position: -200%; }
28
+ 100% { background-position: 200%; }
29
+ }
30
+
31
+ .floating {
32
+ animation: float 6s ease-in-out infinite;
33
+ }
34
+
35
+ .pulse {
36
+ animation: pulse 2s infinite;
37
+ }
38
+
39
+ .wave-bg {
40
+ background: linear-gradient(135deg, #6e8efb, #a777e3, #4facfe, #00f2fe);
41
+ background-size: 400% 400%;
42
+ animation: wave 15s ease infinite;
43
+ }
44
+
45
+ .shine-effect {
46
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
47
+ background-size: 200% auto;
48
+ animation: shine 3s linear infinite;
49
+ }
50
+
51
+ .card-hover {
52
+ transition: all 0.3s ease;
53
+ }
54
+
55
+ .card-hover:hover {
56
+ transform: translateY(-5px);
57
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
58
+ }
59
+
60
+ .progress-bar {
61
+ transition: width 0.6s ease;
62
+ }
63
+
64
+ .checkmark {
65
+ stroke-dasharray: 100;
66
+ stroke-dashoffset: 100;
67
+ animation: dash 1s ease-in-out forwards;
68
+ }
69
+
70
+ @keyframes dash {
71
+ to { stroke-dashoffset: 0; }
72
+ }
73
+
74
+ .glow {
75
+ filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
76
+ }
77
+
78
+ .bounce {
79
+ animation: bounce 2s infinite;
80
+ }
81
+
82
+ @keyframes bounce {
83
+ 0%, 100% { transform: translateY(0); }
84
+ 50% { transform: translateY(-10px); }
85
+ }
86
+
87
+ .rotate {
88
+ animation: rotate 15s linear infinite;
89
+ }
90
+
91
+ @keyframes rotate {
92
+ from { transform: rotate(0deg); }
93
+ to { transform: rotate(360deg); }
94
+ }
95
+ </style>
96
+ </head>
97
+ <body class="min-h-screen wave-bg text-white font-sans overflow-x-hidden">
98
+ <!-- Floating background elements -->
99
+ <div class="fixed inset-0 overflow-hidden pointer-events-none">
100
+ <div class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-white bg-opacity-10 glow floating"></div>
101
+ <div class="absolute top-1/3 right-1/5 w-40 h-40 rounded-full bg-white bg-opacity-5 glow floating" style="animation-delay: 2s;"></div>
102
+ <div class="absolute bottom-1/4 left-1/5 w-24 h-24 rounded-full bg-white bg-opacity-15 glow floating" style="animation-delay: 4s;"></div>
103
+ <div class="absolute bottom-1/3 right-1/4 w-36 h-36 rounded-full bg-white bg-opacity-8 glow floating" style="animation-delay: 1s;"></div>
104
+ </div>
105
+
106
+ <div class="container mx-auto px-4 py-12 relative z-10">
107
+ <!-- Header -->
108
+ <header class="text-center mb-12">
109
+ <div class="floating inline-block mb-6 relative">
110
+ <i class="fab fa-wordpress text-6xl text-white glow"></i>
111
+ <div class="absolute -inset-4 rounded-full border-2 border-white border-opacity-20 rotate"></div>
112
+ </div>
113
+ <h1 class="text-4xl md:text-5xl font-bold mb-4 glow">Solution WordPress Tout-en-Un</h1>
114
+ <p class="text-xl opacity-90 max-w-3xl mx-auto">Obtenez un site WordPress complet avec domaine gratuit, SSL, hébergement et outils intégrés en 1 clic !</p>
115
+ </header>
116
+
117
+ <!-- Main Card -->
118
+ <div class="max-w-5xl mx-auto bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl shadow-2xl overflow-hidden card-hover border border-white border-opacity-20 relative">
119
+ <div class="absolute inset-0 shine-effect opacity-30"></div>
120
+
121
+ <!-- Progress Steps -->
122
+ <div class="flex justify-between px-8 pt-8 relative z-10">
123
+ <div class="step flex flex-col items-center relative">
124
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center mb-2">
125
+ <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-indigo-600 font-bold">1</div>
126
+ </div>
127
+ <span class="text-sm font-medium">Configuration</span>
128
+ <div class="absolute top-5 left-12 right-0 h-1 bg-white bg-opacity-20 -z-10"></div>
129
+ </div>
130
+ <div class="step flex flex-col items-center relative">
131
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center mb-2">
132
+ <div class="w-8 h-8 rounded-full bg-white bg-opacity-30 flex items-center justify-center text-white font-bold">2</div>
133
+ </div>
134
+ <span class="text-sm font-medium">Domaine & SSL</span>
135
+ <div class="absolute top-5 left-0 right-12 h-1 bg-white bg-opacity-20 -z-10"></div>
136
+ </div>
137
+ <div class="step flex flex-col items-center relative">
138
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center mb-2">
139
+ <div class="w-8 h-8 rounded-full bg-white bg-opacity-10 flex items-center justify-center text-white font-bold">3</div>
140
+ </div>
141
+ <span class="text-sm font-medium">Terminé</span>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- Form Content -->
146
+ <div class="p-8 relative z-10">
147
+ <h2 class="text-2xl font-bold mb-6 glow">Configuration de votre solution complète</h2>
148
+
149
+ <div class="grid md:grid-cols-2 gap-6 mb-8">
150
+ <div>
151
+ <label class="block text-sm font-medium mb-2" for="site-name">Nom du site</label>
152
+ <input type="text" id="site-name" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70" placeholder="Mon Super Site">
153
+ </div>
154
+ <div>
155
+ <label class="block text-sm font-medium mb-2" for="domain-name">Nom de domaine gratuit</label>
156
+ <div class="flex">
157
+ <input type="text" id="domain-name" class="flex-1 px-4 py-3 rounded-l-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70" placeholder="monsite">
158
+ <div class="px-4 py-3 bg-white bg-opacity-30 border-t border-r border-b border-white border-opacity-30 rounded-r-lg">.webstarter.fr</div>
159
+ </div>
160
+ <p class="text-xs mt-1 opacity-70">SSL inclus automatiquement pour une sécurité maximale</p>
161
+ </div>
162
+ <div>
163
+ <label class="block text-sm font-medium mb-2" for="admin-email">Email administrateur</label>
164
+ <input type="email" id="admin-email" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70" placeholder="[email protected]">
165
+ </div>
166
+ <div>
167
+ <label class="block text-sm font-medium mb-2" for="admin-pass">Mot de passe</label>
168
+ <div class="relative">
169
+ <input type="password" id="admin-pass" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70" placeholder="••••••••">
170
+ <button class="absolute right-3 top-3 text-white opacity-70 hover:opacity-100">
171
+ <i class="far fa-eye"></i>
172
+ </button>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <div class="mb-8">
178
+ <h3 class="text-lg font-medium mb-4">Options avancées (automatisées)</h3>
179
+ <div class="grid md:grid-cols-2 gap-4">
180
+ <div class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10">
181
+ <label class="flex items-start space-x-3">
182
+ <input type="checkbox" checked class="form-checkbox h-5 w-5 text-indigo-600 rounded bg-white bg-opacity-20 border border-white border-opacity-30 mt-1">
183
+ <div>
184
+ <span class="font-medium">Configuration DNS automatique</span>
185
+ <p class="text-xs opacity-70">Serveurs DNS optimisés pré-configurés</p>
186
+ </div>
187
+ </label>
188
+ </div>
189
+ <div class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10">
190
+ <label class="flex items-start space-x-3">
191
+ <input type="checkbox" checked class="form-checkbox h-5 w-5 text-indigo-600 rounded bg-white bg-opacity-20 border border-white border-opacity-30 mt-1">
192
+ <div>
193
+ <span class="font-medium">Email professionnel</span>
194
+ <p class="text-xs opacity-70">Création automatique (contact@votredomaine)</p>
195
+ </div>
196
+ </label>
197
+ </div>
198
+ <div class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10">
199
+ <label class="flex items-start space-x-3">
200
+ <input type="checkbox" checked class="form-checkbox h-5 w-5 text-indigo-600 rounded bg-white bg-opacity-20 border border-white border-opacity-30 mt-1">
201
+ <div>
202
+ <span class="font-medium">Thème professionnel</span>
203
+ <p class="text-xs opacity-70">Design moderne et responsive inclus</p>
204
+ </div>
205
+ </label>
206
+ </div>
207
+ <div class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10">
208
+ <label class="flex items-start space-x-3">
209
+ <input type="checkbox" checked class="form-checkbox h-5 w-5 text-indigo-600 rounded bg-white bg-opacity-20 border border-white border-opacity-30 mt-1">
210
+ <div>
211
+ <span class="font-medium">Plugins essentiels</span>
212
+ <p class="text-xs opacity-70">SEO, sécurité, cache et performances</p>
213
+ </div>
214
+ </label>
215
+ </div>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="text-center">
220
+ <button id="install-btn" class="pulse px-8 py-4 bg-white text-indigo-600 rounded-full font-bold text-lg hover:bg-opacity-90 transform transition-all duration-300 hover:scale-105 shadow-lg glow">
221
+ <i class="fas fa-bolt mr-2"></i> Tout configurer automatiquement
222
+ </button>
223
+ <p class="text-sm opacity-80 mt-3">Hébergement, domaine, SSL, DNS, emails et WordPress pré-optimisé</p>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Features Section -->
229
+ <div class="max-w-6xl mx-auto mt-16">
230
+ <h2 class="text-2xl font-bold text-center mb-8 glow">Une solution complète sans effort</h2>
231
+ <div class="grid md:grid-cols-3 gap-8">
232
+ <div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-filter backdrop-blur-lg card-hover border border-white border-opacity-10 relative overflow-hidden">
233
+ <div class="absolute -right-8 -top-8 w-32 h-32 rounded-full bg-white bg-opacity-5"></div>
234
+ <div class="text-4xl mb-4 text-indigo-200 bounce">
235
+ <i class="fas fa-globe"></i>
236
+ </div>
237
+ <h3 class="text-xl font-bold mb-2">Domaine gratuit + SSL</h3>
238
+ <p class="opacity-90">Obtenez un nom de domaine .webstarter.fr gratuit avec certificat SSL inclus pour une sécurité maximale.</p>
239
+ </div>
240
+ <div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-filter backdrop-blur-lg card-hover border border-white border-opacity-10 relative overflow-hidden">
241
+ <div class="absolute -left-8 -bottom-8 w-32 h-32 rounded-full bg-white bg-opacity-5"></div>
242
+ <div class="text-4xl mb-4 text-indigo-200 bounce" style="animation-delay: 0.2s;">
243
+ <i class="fas fa-server"></i>
244
+ </div>
245
+ <h3 class="text-xl font-bold mb-2">Serveurs DNS optimisés</h3>
246
+ <p class="opacity-90">Configuration automatique des serveurs DNS pour des performances et une disponibilité optimales.</p>
247
+ </div>
248
+ <div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-filter backdrop-blur-lg card-hover border border-white border-opacity-10 relative overflow-hidden">
249
+ <div class="absolute -right-8 -bottom-8 w-32 h-32 rounded-full bg-white bg-opacity-5"></div>
250
+ <div class="text-4xl mb-4 text-indigo-200 bounce" style="animation-delay: 0.4s;">
251
+ <i class="fas fa-envelope"></i>
252
+ </div>
253
+ <h3 class="text-xl font-bold mb-2">Emails professionnels</h3>
254
+ <p class="opacity-90">Adresses email personnalisées incluses automatiquement (contact@votredomaine).</p>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- Installation Modal -->
261
+ <div id="install-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
262
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl p-8 max-w-md w-full mx-4 border border-white border-opacity-20 relative overflow-hidden">
263
+ <div class="absolute inset-0 shine-effect opacity-20"></div>
264
+ <div class="relative z-10 text-center">
265
+ <div class="w-20 h-20 mx-auto mb-6 relative">
266
+ <svg class="w-full h-full" viewBox="0 0 100 100">
267
+ <circle cx="50" cy="50" r="45" fill="none" stroke="#ffffff20" stroke-width="8"/>
268
+ <circle id="progress-circle" cx="50" cy="50" r="45" fill="none" stroke="#ffffff" stroke-width="8" stroke-dasharray="283" stroke-dashoffset="283" transform="rotate(-90 50 50)"/>
269
+ </svg>
270
+ <div class="absolute inset-0 flex items-center justify-center">
271
+ <i id="install-icon" class="fas fa-cog text-3xl text-white animate-spin"></i>
272
+ </div>
273
+ </div>
274
+
275
+ <h3 class="text-xl font-bold mb-2 glow">Configuration automatique en cours</h3>
276
+ <p id="install-status" class="mb-6">Initialisation du processus tout-en-un...</p>
277
+
278
+ <div class="bg-white bg-opacity-20 rounded-full h-2 mb-6">
279
+ <div id="progress-bar" class="progress-bar bg-white h-2 rounded-full" style="width: 0%"></div>
280
+ </div>
281
+
282
+ <div id="steps-container" class="text-left space-y-2 mb-6 max-h-64 overflow-y-auto pr-2">
283
+ <div class="step-item opacity-50">
284
+ <i class="far fa-circle mr-2"></i> <span>Enregistrement du domaine gratuit</span>
285
+ </div>
286
+ <div class="step-item opacity-50">
287
+ <i class="far fa-circle mr-2"></i> <span>Configuration des serveurs DNS</span>
288
+ </div>
289
+ <div class="step-item opacity-50">
290
+ <i class="far fa-circle mr-2"></i> <span>Installation du certificat SSL</span>
291
+ </div>
292
+ <div class="step-item opacity-50">
293
+ <i class="far fa-circle mr-2"></i> <span>Création des adresses email</span>
294
+ </div>
295
+ <div class="step-item opacity-50">
296
+ <i class="far fa-circle mr-2"></i> <span>Téléchargement de WordPress</span>
297
+ </div>
298
+ <div class="step-item opacity-50">
299
+ <i class="far fa-circle mr-2"></i> <span>Installation du thème professionnel</span>
300
+ </div>
301
+ <div class="step-item opacity-50">
302
+ <i class="far fa-circle mr-2"></i> <span>Configuration des plugins essentiels</span>
303
+ </div>
304
+ <div class="step-item opacity-50">
305
+ <i class="far fa-circle mr-2"></i> <span>Optimisation des performances</span>
306
+ </div>
307
+ <div class="step-item opacity-50">
308
+ <i class="far fa-circle mr-2"></i> <span>Finalisation de l'installation</span>
309
+ </div>
310
+ </div>
311
+
312
+ <button id="cancel-btn" class="px-6 py-2 bg-white bg-opacity-20 rounded-full font-medium hover:bg-opacity-30 transition-all">
313
+ Annuler
314
+ </button>
315
+ </div>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Success Modal -->
320
+ <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
321
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl p-8 max-w-md w-full mx-4 text-center border border-white border-opacity-20 relative overflow-hidden">
322
+ <div class="absolute inset-0 shine-effect opacity-20"></div>
323
+ <div class="relative z-10">
324
+ <div class="w-24 h-24 mx-auto mb-6 bg-green-500 bg-opacity-20 rounded-full flex items-center justify-center glow">
325
+ <svg class="checkmark w-16 h-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
326
+ <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" stroke="#ffffff" stroke-width="2"/>
327
+ <path class="checkmark__check" fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
328
+ </svg>
329
+ </div>
330
+
331
+ <h3 class="text-2xl font-bold mb-2 glow">Configuration réussie !</h3>
332
+ <p class="mb-6">Votre solution WordPress complète est prête.</p>
333
+
334
+ <div class="space-y-3 mb-8">
335
+ <a href="#" class="block px-6 py-3 bg-white text-indigo-600 rounded-full font-bold hover:bg-opacity-90 transition-all glow">
336
+ <i class="fas fa-external-link-alt mr-2"></i> Accéder à l'administration
337
+ </a>
338
+ <a href="#" class="block px-6 py-3 bg-white bg-opacity-10 rounded-full font-medium hover:bg-opacity-20 transition-all">
339
+ <i class="fas fa-globe mr-2"></i> Voir mon site
340
+ </a>
341
+ <a href="#" class="block px-6 py-3 bg-white bg-opacity-10 rounded-full font-medium hover:bg-opacity-20 transition-all">
342
+ <i class="fas fa-envelope mr-2"></i> Accéder aux emails
343
+ </a>
344
+ </div>
345
+
346
+ <div class="text-sm opacity-80 bg-white bg-opacity-5 p-4 rounded-lg">
347
+ <p class="font-medium">Votre domaine : <span id="success-domain" class="text-green-300">monsite.webstarter.fr</span></p>
348
+ <p class="mt-2">Identifiants et informations envoyés à votre adresse email.</p>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <script>
355
+ document.addEventListener('DOMContentLoaded', function() {
356
+ const installBtn = document.getElementById('install-btn');
357
+ const installModal = document.getElementById('install-modal');
358
+ const successModal = document.getElementById('success-modal');
359
+ const cancelBtn = document.getElementById('cancel-btn');
360
+ const progressBar = document.getElementById('progress-bar');
361
+ const progressCircle = document.getElementById('progress-circle');
362
+ const installIcon = document.getElementById('install-icon');
363
+ const installStatus = document.getElementById('install-status');
364
+ const stepItems = document.querySelectorAll('.step-item');
365
+ const successDomain = document.getElementById('success-domain');
366
+ const domainInput = document.getElementById('domain-name');
367
+ const siteNameInput = document.getElementById('site-name');
368
+
369
+ // Simulate installation process
370
+ installBtn.addEventListener('click', function() {
371
+ const domainName = domainInput.value || 'monsite';
372
+ successDomain.textContent = `${domainName}.webstarter.fr`;
373
+
374
+ installModal.classList.remove('hidden');
375
+
376
+ // Animate progress
377
+ let progress = 0;
378
+ const interval = setInterval(() => {
379
+ progress += Math.random() * 8;
380
+ if (progress > 100) progress = 100;
381
+
382
+ progressBar.style.width = `${progress}%`;
383
+ progressCircle.style.strokeDashoffset = 283 - (283 * progress / 100);
384
+
385
+ // Update status text and steps
386
+ if (progress < 10) {
387
+ installStatus.textContent = "Enregistrement du domaine...";
388
+ } else if (progress < 20) {
389
+ installStatus.textContent = "Configuration des serveurs DNS...";
390
+ stepItems[0].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Enregistrement du domaine gratuit';
391
+ stepItems[0].classList.remove('opacity-50');
392
+ } else if (progress < 30) {
393
+ installStatus.textContent = "Installation du certificat SSL...";
394
+ stepItems[1].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Configuration des serveurs DNS';
395
+ stepItems[1].classList.remove('opacity-50');
396
+ } else if (progress < 40) {
397
+ installStatus.textContent = "Création des adresses email...";
398
+ stepItems[2].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Installation du certificat SSL';
399
+ stepItems[2].classList.remove('opacity-50');
400
+ } else if (progress < 50) {
401
+ installStatus.textContent = "Téléchargement de WordPress...";
402
+ stepItems[3].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Création des adresses email';
403
+ stepItems[3].classList.remove('opacity-50');
404
+ } else if (progress < 60) {
405
+ installStatus.textContent = "Installation du thème...";
406
+ stepItems[4].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Téléchargement de WordPress';
407
+ stepItems[4].classList.remove('opacity-50');
408
+ } else if (progress < 70) {
409
+ installStatus.textContent = "Configuration des plugins...";
410
+ stepItems[5].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Installation du thème professionnel';
411
+ stepItems[5].classList.remove('opacity-50');
412
+ } else if (progress < 85) {
413
+ installStatus.textContent = "Optimisation des performances...";
414
+ stepItems[6].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Configuration des plugins essentiels';
415
+ stepItems[6].classList.remove('opacity-50');
416
+ } else if (progress < 95) {
417
+ installStatus.textContent = "Finalisation...";
418
+ stepItems[7].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Optimisation des performances';
419
+ stepItems[7].classList.remove('opacity-50');
420
+ }
421
+
422
+ // Complete installation
423
+ if (progress === 100) {
424
+ clearInterval(interval);
425
+ setTimeout(() => {
426
+ installModal.classList.add('hidden');
427
+ successModal.classList.remove('hidden');
428
+
429
+ stepItems[8].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Finalisation de l\'installation';
430
+ stepItems[8].classList.remove('opacity-50');
431
+ }, 800);
432
+ }
433
+ }, 500);
434
+
435
+ // Cancel button
436
+ cancelBtn.addEventListener('click', function() {
437
+ clearInterval(interval);
438
+ installModal.classList.add('hidden');
439
+
440
+ // Reset progress
441
+ progressBar.style.width = '0%';
442
+ progressCircle.style.strokeDashoffset = '283';
443
+ installStatus.textContent = "Initialisation du processus tout-en-un...";
444
+
445
+ // Reset steps
446
+ stepItems.forEach(item => {
447
+ item.innerHTML = item.innerHTML.replace('fa-check-circle', 'fa-circle').replace('text-green-400', '');
448
+ item.classList.add('opacity-50');
449
+ });
450
+ }, {once: true});
451
+ });
452
+
453
+ // Toggle password visibility
454
+ const passwordInput = document.getElementById('admin-pass');
455
+ const togglePassword = document.querySelector('#admin-pass + button');
456
+
457
+ togglePassword.addEventListener('click', function() {
458
+ const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
459
+ passwordInput.setAttribute('type', type);
460
+ this.innerHTML = type === 'password' ? '<i class="far fa-eye"></i>' : '<i class="far fa-eye-slash"></i>';
461
+ });
462
+
463
+ // Auto-fill domain based on site name
464
+ siteNameInput.addEventListener('input', function() {
465
+ if(domainInput.value === '') {
466
+ const domain = this.value.toLowerCase()
467
+ .replace(/[^a-z0-9]/g, '-')
468
+ .replace(/-+/g, '-')
469
+ .replace(/^-|-$/g, '');
470
+ domainInput.value = domain;
471
+ }
472
+ });
473
+ });
474
+ </script>
475
+ <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/wordpress" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
476
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ nstallation Automatique de WordPress en 1 clic Configurez un site WordPress professionnel en quelques minutes sans aucune compétence technique requise. Tout est automatisé pour vous : avec une tres belles interfaces tres animé
2
+ ajouter domaine gratuite plus ssl , plus derveur dsn , registrat , adresse mail enregisrement en automatique avec toutes les outils intéger automatique ,, avec une tres belle interface tres animé