Hugging Face's logo

Spaces:
docto41
/
host-pro
Running

App Files Community
docto41 commited on
Commit
17db3d1
·
verified ·
1 Parent(s): e727f14

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +898 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Host Pro
3
- emoji: 🌖
4
- colorFrom: indigo
5
  colorTo: red
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: host-pro
3
+ emoji: 🐳
4
+ colorFrom: red
5
  colorTo: red
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,898 @@
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>Hébergement Web Haute Performance</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://js.stripe.com/v3/"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ background-color: #f8fafc;
16
+ }
17
+
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
20
+ }
21
+
22
+ .hosting-card:hover {
23
+ transform: translateY(-5px);
24
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
25
+ }
26
+
27
+ .availability-badge {
28
+ animation: pulse 2s infinite;
29
+ }
30
+
31
+ @keyframes pulse {
32
+ 0% { opacity: 0.8; }
33
+ 50% { opacity: 1; }
34
+ 100% { opacity: 0.8; }
35
+ }
36
+
37
+ .sidebar {
38
+ transition: all 0.3s ease;
39
+ }
40
+
41
+ .cart-item {
42
+ transition: all 0.2s ease;
43
+ }
44
+
45
+ .cart-item:hover {
46
+ background-color: #f3f4f6;
47
+ }
48
+
49
+ @media (max-width: 768px) {
50
+ .sidebar {
51
+ transform: translateX(-100%);
52
+ }
53
+ .sidebar.open {
54
+ transform: translateX(0);
55
+ }
56
+ }
57
+ </style>
58
+ </head>
59
+ <body class="min-h-screen">
60
+ <!-- Login/Signup Modal -->
61
+ <div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
62
+ <div class="bg-white rounded-xl p-6 w-full max-w-md">
63
+ <div class="flex justify-between items-center mb-4">
64
+ <h3 class="text-lg font-medium">Connexion / Inscription</h3>
65
+ <button id="closeAuthModal" class="text-gray-500 hover:text-gray-700">
66
+ <i class="fas fa-times"></i>
67
+ </button>
68
+ </div>
69
+
70
+ <div class="mb-4">
71
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
72
+ <input type="email" id="authEmail" class="w-full px-3 py-2 border border-gray-300 rounded-md">
73
+ </div>
74
+
75
+ <div class="mb-4">
76
+ <label class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
77
+ <input type="password" id="authPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md">
78
+ </div>
79
+
80
+ <div class="flex justify-between items-center mb-6">
81
+ <button id="loginBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
82
+ Connexion
83
+ </button>
84
+ <button id="signupBtn" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">
85
+ Inscription
86
+ </button>
87
+ </div>
88
+
89
+ <p class="text-sm text-gray-500">Vous devez être connecté pour utiliser nos services.</p>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Mobile Menu Button -->
94
+ <div class="md:hidden fixed top-4 left-4 z-50">
95
+ <button id="menuToggle" class="p-2 rounded-lg bg-white shadow-md text-indigo-600">
96
+ <i class="fas fa-bars text-xl"></i>
97
+ </button>
98
+ </div>
99
+
100
+ <!-- Sidebar -->
101
+ <div id="sidebar" class="sidebar fixed top-0 left-0 h-full w-64 bg-white shadow-lg z-40">
102
+ <div class="p-4 gradient-bg text-white h-24 flex items-center">
103
+ <div class="flex items-center space-x-2">
104
+ <i class="fas fa-server text-2xl"></i>
105
+ <h1 class="text-xl font-bold">HostPro</h1>
106
+ </div>
107
+ </div>
108
+
109
+ <nav class="p-4">
110
+ <ul class="space-y-2">
111
+ <li>
112
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-indigo-50 text-indigo-700">
113
+ <i class="fas fa-home"></i>
114
+ <span>Accueil</span>
115
+ </a>
116
+ </li>
117
+ <li>
118
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
119
+ <i class="fas fa-server"></i>
120
+ <span>Nos Offres</span>
121
+ </a>
122
+ </li>
123
+ <li>
124
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
125
+ <i class="fas fa-shopping-cart"></i>
126
+ <span>Mon Panier</span>
127
+ </a>
128
+ </li>
129
+ <li>
130
+ <a href="#" id="dashboardLink" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
131
+ <i class="fas fa-tachometer-alt"></i>
132
+ <span>Tableau de Bord</span>
133
+ </a>
134
+ </li>
135
+ <li>
136
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
137
+ <i class="fas fa-question-circle"></i>
138
+ <span>Aide & Support</span>
139
+ </a>
140
+ </li>
141
+ </ul>
142
+ </nav>
143
+
144
+ <div class="absolute bottom-0 w-full p-4 border-t border-gray-200">
145
+ <div id="userProfile" class="hidden">
146
+ <div class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 cursor-pointer">
147
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
148
+ <i class="fas fa-user"></i>
149
+ </div>
150
+ <div>
151
+ <p id="userName" class="font-medium">Utilisateur</p>
152
+ <p id="userEmail" class="text-xs text-gray-500">[email protected]</p>
153
+ </div>
154
+ </div>
155
+ <button id="logoutBtn" class="w-full mt-2 px-3 py-1 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 text-sm">
156
+ Déconnexion
157
+ </button>
158
+ </div>
159
+ <div id="loginPrompt" class="text-center">
160
+ <button id="showAuthModal" class="text-indigo-600 hover:text-indigo-800 text-sm">
161
+ <i class="fas fa-sign-in-alt mr-1"></i> Se connecter
162
+ </button>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Main Content -->
168
+ <div class="md:ml-64 min-h-screen">
169
+ <!-- Header -->
170
+ <header class="bg-white shadow-sm">
171
+ <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
172
+ <h1 class="text-2xl font-bold text-gray-800">Hébergement Web Haute Performance</h1>
173
+ <div class="flex items-center space-x-4">
174
+ <div class="relative">
175
+ <div id="cartIcon" class="relative cursor-pointer">
176
+ <i class="fas fa-shopping-cart text-xl text-gray-600"></i>
177
+ <span id="cartCount" class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
178
+ </div>
179
+ <div id="cartDropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-50 py-2">
180
+ <div class="px-4 py-2 border-b border-gray-200">
181
+ <h3 class="font-medium">Mon Panier</h3>
182
+ </div>
183
+ <div id="cartItems" class="max-h-60 overflow-y-auto">
184
+ <!-- Cart items will be added here dynamically -->
185
+ <div class="px-4 py-3 text-center text-gray-500">Votre panier est vide</div>
186
+ </div>
187
+ <div class="px-4 py-2 border-t border-gray-200">
188
+ <div class="flex justify-between mb-2">
189
+ <span>Total:</span>
190
+ <span id="cartTotal">€0.00</span>
191
+ </div>
192
+ <button id="checkoutBtn" class="w-full py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
193
+ Payer maintenant
194
+ </button>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ <div id="userAvatar" class="hidden">
199
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 cursor-pointer">
200
+ <i class="fas fa-user"></i>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </header>
206
+
207
+ <!-- Main Content Area -->
208
+ <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
209
+ <!-- Hero Section -->
210
+ <div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl text-white p-8 mb-8">
211
+ <div class="max-w-2xl">
212
+ <h2 class="text-3xl font-bold mb-4">Des serveurs ultra-rapides avec 99.9% de disponibilité</h2>
213
+ <p class="text-lg mb-6">Support technique 24/7, infrastructure haute performance et paiements sécurisés.</p>
214
+ <div class="flex space-x-4">
215
+ <button id="getStartedBtn" class="px-6 py-3 bg-white text-indigo-600 rounded-lg font-medium hover:bg-gray-100">
216
+ Commencer maintenant
217
+ </button>
218
+ <button class="px-6 py-3 border border-white text-white rounded-lg font-medium hover:bg-white hover:bg-opacity-10">
219
+ En savoir plus
220
+ </button>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Pricing Plans -->
226
+ <div class="mb-8">
227
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Nos Offres d'Hébergement</h2>
228
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
229
+ <!-- Basic Plan -->
230
+ <div class="hosting-card bg-white rounded-xl border border-gray-200 overflow-hidden shadow-sm transition">
231
+ <div class="p-6 border-b border-gray-200">
232
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Basique</h3>
233
+ <p class="text-gray-600 mb-4">Parfait pour les petits sites et projets personnels</p>
234
+ <div class="flex items-baseline mb-4">
235
+ <span class="text-3xl font-bold">€4.99</span>
236
+ <span class="ml-1 text-gray-500">/mois</span>
237
+ </div>
238
+ <div class="flex items-center text-sm text-green-600 mb-2">
239
+ <i class="fas fa-check-circle mr-2"></i>
240
+ <span>Disponibilité 99.9%</span>
241
+ </div>
242
+ </div>
243
+ <div class="p-6">
244
+ <ul class="space-y-3 mb-6">
245
+ <li class="flex items-center">
246
+ <i class="fas fa-check text-green-500 mr-2"></i>
247
+ <span>10GB Stockage SSD</span>
248
+ </li>
249
+ <li class="flex items-center">
250
+ <i class="fas fa-check text-green-500 mr-2"></i>
251
+ <span>100GB Bandwidth</span>
252
+ </li>
253
+ <li class="flex items-center">
254
+ <i class="fas fa-check text-green-500 mr-2"></i>
255
+ <span>1 Site Web</span>
256
+ </li>
257
+ <li class="flex items-center">
258
+ <i class="fas fa-check text-green-500 mr-2"></i>
259
+ <span>Support 24/7</span>
260
+ </li>
261
+ </ul>
262
+ <button class="add-to-cart w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition" data-plan="basique" data-price="4.99">
263
+ Ajouter au panier
264
+ </button>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Pro Plan (Featured) -->
269
+ <div class="hosting-card bg-white rounded-xl border-2 border-indigo-500 overflow-hidden shadow-md transition relative">
270
+ <div class="absolute top-0 right-0 bg-indigo-500 text-white text-xs font-bold px-2 py-1 rounded-bl-lg">
271
+ POPULAIRE
272
+ </div>
273
+ <div class="p-6 border-b border-gray-200">
274
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Professionnel</h3>
275
+ <p class="text-gray-600 mb-4">Idéal pour les entreprises et sites à trafic moyen</p>
276
+ <div class="flex items-baseline mb-4">
277
+ <span class="text-3xl font-bold">€12.99</span>
278
+ <span class="ml-1 text-gray-500">/mois</span>
279
+ </div>
280
+ <div class="flex items-center text-sm text-green-600 mb-2">
281
+ <i class="fas fa-check-circle mr-2"></i>
282
+ <span>Disponibilité 99.9%</span>
283
+ </div>
284
+ </div>
285
+ <div class="p-6">
286
+ <ul class="space-y-3 mb-6">
287
+ <li class="flex items-center">
288
+ <i class="fas fa-check text-green-500 mr-2"></i>
289
+ <span>50GB Stockage SSD</span>
290
+ </li>
291
+ <li class="flex items-center">
292
+ <i class="fas fa-check text-green-500 mr-2"></i>
293
+ <span>500GB Bandwidth</span>
294
+ </li>
295
+ <li class="flex items-center">
296
+ <i class="fas fa-check text-green-500 mr-2"></i>
297
+ <span>5 Sites Web</span>
298
+ </li>
299
+ <li class="flex items-center">
300
+ <i class="fas fa-check text-green-500 mr-2"></i>
301
+ <span>Support Premium 24/7</span>
302
+ </li>
303
+ </ul>
304
+ <button class="add-to-cart w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition" data-plan="professionnel" data-price="12.99">
305
+ Ajouter au panier
306
+ </button>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Enterprise Plan -->
311
+ <div class="hosting-card bg-white rounded-xl border border-gray-200 overflow-hidden shadow-sm transition">
312
+ <div class="p-6 border-b border-gray-200">
313
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Entreprise</h3>
314
+ <p class="text-gray-600 mb-4">Solution haut de gamme pour les sites à fort trafic</p>
315
+ <div class="flex items-baseline mb-4">
316
+ <span class="text-3xl font-bold">€29.99</span>
317
+ <span class="ml-1 text-gray-500">/mois</span>
318
+ </div>
319
+ <div class="flex items-center text-sm text-green-600 mb-2">
320
+ <i class="fas fa-check-circle mr-2"></i>
321
+ <span>Disponibilité 99.9%</span>
322
+ </div>
323
+ </div>
324
+ <div class="p-6">
325
+ <ul class="space-y-3 mb-6">
326
+ <li class="flex items-center">
327
+ <i class="fas fa-check text-green-500 mr-2"></i>
328
+ <span>200GB Stockage SSD</span>
329
+ </li>
330
+ <li class="flex items-center">
331
+ <i class="fas fa-check text-green-500 mr-2"></i>
332
+ <span>Bandwidth Illimité</span>
333
+ </li>
334
+ <li class="flex items-center">
335
+ <i class="fas fa-check text-green-500 mr-2"></i>
336
+ <span>Sites Web Illimités</span>
337
+ </li>
338
+ <li class="flex items-center">
339
+ <i class="fas fa-check text-green-500 mr-2"></i>
340
+ <span>Support VIP 24/7</span>
341
+ </li>
342
+ </ul>
343
+ <button class="add-to-cart w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition" data-plan="entreprise" data-price="29.99">
344
+ Ajouter au panier
345
+ </button>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+
351
+ <!-- Features Section -->
352
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
353
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Pourquoi choisir notre hébergement ?</h2>
354
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
355
+ <div class="text-center p-4">
356
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
357
+ <i class="fas fa-bolt text-indigo-600 text-2xl"></i>
358
+ </div>
359
+ <h3 class="font-medium text-lg mb-2">Ultra Rapide</h3>
360
+ <p class="text-gray-600">SSD NVMe et cache optimisé pour des temps de chargement record.</p>
361
+ </div>
362
+ <div class="text-center p-4">
363
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
364
+ <i class="fas fa-shield-alt text-green-600 text-2xl"></i>
365
+ </div>
366
+ <h3 class="font-medium text-lg mb-2">Sécurisé</h3>
367
+ <p class="text-gray-600">Protection DDoS, SSL gratuit et sauvegardes automatiques.</p>
368
+ </div>
369
+ <div class="text-center p-4">
370
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
371
+ <i class="fas fa-headset text-purple-600 text-2xl"></i>
372
+ </div>
373
+ <h3 class="font-medium text-lg mb-2">Support 24/7</h3>
374
+ <p class="text-gray-600">Notre équipe est disponible à tout moment pour vous aider.</p>
375
+ </div>
376
+ <div class="text-center p-4">
377
+ <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4">
378
+ <i class="fas fa-chart-line text-pink-600 text-2xl"></i>
379
+ </div>
380
+ <h3 class="font-medium text-lg mb-2">99.9% Uptime</h3>
381
+ <p class="text-gray-600">Garantie de disponibilité avec infrastructure redondante.</p>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <!-- Dashboard Section (Hidden by default) -->
387
+ <div id="dashboardSection" class="hidden">
388
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
389
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Tableau de Bord</h2>
390
+
391
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
392
+ <div class="bg-indigo-50 rounded-lg p-4">
393
+ <div class="flex justify-between items-start">
394
+ <div>
395
+ <p class="text-sm text-indigo-600">Abonnement Actif</p>
396
+ <h3 class="text-xl font-bold mt-1" id="currentPlan">Professionnel</h3>
397
+ </div>
398
+ <div class="bg-indigo-100 p-2 rounded-full">
399
+ <i class="fas fa-server text-indigo-600"></i>
400
+ </div>
401
+ </div>
402
+ <div class="mt-4">
403
+ <p class="text-sm text-gray-600">Prochain paiement:</p>
404
+ <p class="font-medium" id="nextPayment">15 Juillet 2023 - €12.99</p>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="bg-green-50 rounded-lg p-4">
409
+ <div class="flex justify-between items-start">
410
+ <div>
411
+ <p class="text-sm text-green-600">Utilisation du Stockage</p>
412
+ <h3 class="text-xl font-bold mt-1">18.5GB / 50GB</h3>
413
+ </div>
414
+ <div class="bg-green-100 p-2 rounded-full">
415
+ <i class="fas fa-database text-green-600"></i>
416
+ </div>
417
+ </div>
418
+ <div class="mt-4">
419
+ <div class="w-full bg-gray-200 rounded-full h-2">
420
+ <div class="bg-green-500 h-2 rounded-full" style="width: 37%"></div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <div class="bg-purple-50 rounded-lg p-4">
426
+ <div class="flex justify-between items-start">
427
+ <div>
428
+ <p class="text-sm text-purple-600">Sites Actifs</p>
429
+ <h3 class="text-xl font-bold mt-1">3/5</h3>
430
+ </div>
431
+ <div class="bg-purple-100 p-2 rounded-full">
432
+ <i class="fas fa-globe text-purple-600"></i>
433
+ </div>
434
+ </div>
435
+ <div class="mt-4">
436
+ <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium">
437
+ Gérer les sites <i class="fas fa-arrow-right ml-1"></i>
438
+ </a>
439
+ </div>
440
+ </div>
441
+ </div>
442
+
443
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Historique des Paiements</h3>
444
+ <div class="overflow-x-auto">
445
+ <table class="min-w-full divide-y divide-gray-200">
446
+ <thead class="bg-gray-50">
447
+ <tr>
448
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
449
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th>
450
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Méthode</th>
451
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
452
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Facture</th>
453
+ </tr>
454
+ </thead>
455
+ <tbody class="bg-white divide-y divide-gray-200">
456
+ <tr>
457
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Juin 2023</td>
458
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">€12.99</td>
459
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
460
+ <div class="flex items-center">
461
+ <i class="fab fa-cc-stripe text-blue-500 mr-2"></i> Stripe
462
+ </div>
463
+ </td>
464
+ <td class="px-6 py-4 whitespace-nowrap">
465
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span>
466
+ </td>
467
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
468
+ <a href="#" class="text-indigo-600 hover:text-indigo-900">Télécharger</a>
469
+ </td>
470
+ </tr>
471
+ <tr>
472
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Mai 2023</td>
473
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">€12.99</td>
474
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
475
+ <div class="flex items-center">
476
+ <i class="fab fa-cc-paypal text-blue-500 mr-2"></i> PayPal
477
+ </div>
478
+ </td>
479
+ <td class="px-6 py-4 whitespace-nowrap">
480
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span>
481
+ </td>
482
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
483
+ <a href="#" class="text-indigo-600 hover:text-indigo-900">Télécharger</a>
484
+ </td>
485
+ </tr>
486
+ <tr>
487
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Avril 2023</td>
488
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">€12.99</td>
489
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
490
+ <div class="flex items-center">
491
+ <i class="fab fa-cc-stripe text-blue-500 mr-2"></i> Stripe
492
+ </div>
493
+ </td>
494
+ <td class="px-6 py-4 whitespace-nowrap">
495
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span>
496
+ </td>
497
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
498
+ <a href="#" class="text-indigo-600 hover:text-indigo-900">Télécharger</a>
499
+ </td>
500
+ </tr>
501
+ </tbody>
502
+ </table>
503
+ </div>
504
+
505
+ <div class="mt-8">
506
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Méthodes de Paiement</h3>
507
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
508
+ <div class="border border-gray-200 rounded-lg p-4">
509
+ <div class="flex justify-between items-center mb-4">
510
+ <h4 class="font-medium">PayPal</h4>
511
+ <img src="https://www.paypalobjects.com/webstatic/mktg/logo/pp_cc_mark_37x23.jpg" alt="PayPal" class="h-8">
512
+ </div>
513
+ <p class="text-sm text-gray-600 mb-4">Payer rapidement et facilement avec votre compte PayPal.</p>
514
+ <button id="paypalBtn" class="w-full py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
515
+ <i class="fab fa-paypal mr-2"></i> Payer avec PayPal
516
+ </button>
517
+ </div>
518
+
519
+ <div class="border border-gray-200 rounded-lg p-4">
520
+ <div class="flex justify-between items-center mb-4">
521
+ <h4 class="font-medium">Carte Bancaire</h4>
522
+ <div class="flex space-x-2">
523
+ <i class="fab fa-cc-visa text-gray-600 text-xl"></i>
524
+ <i class="fab fa-cc-mastercard text-gray-600 text-xl"></i>
525
+ <i class="fab fa-cc-amex text-gray-600 text-xl"></i>
526
+ </div>
527
+ </div>
528
+ <p class="text-sm text-gray-600 mb-4">Paiement sécurisé par Stripe avec cryptage SSL.</p>
529
+ <button id="stripeBtn" class="w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
530
+ <i class="fab fa-cc-stripe mr-2"></i> Payer avec Stripe
531
+ </button>
532
+ </div>
533
+ </div>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ </main>
538
+ </div>
539
+
540
+ <!-- Checkout Modal -->
541
+ <div id="checkoutModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
542
+ <div class="bg-white rounded-xl p-6 w-full max-w-md">
543
+ <div class="flex justify-between items-center mb-4">
544
+ <h3 class="text-lg font-medium">Finaliser la Commande</h3>
545
+ <button id="closeCheckoutModal" class="text-gray-500 hover:text-gray-700">
546
+ <i class="fas fa-times"></i>
547
+ </button>
548
+ </div>
549
+
550
+ <div class="mb-4">
551
+ <h4 class="font-medium mb-2">Votre Commande</h4>
552
+ <div id="checkoutItems" class="space-y-2 mb-4">
553
+ <!-- Cart items will be added here dynamically -->
554
+ </div>
555
+ <div class="flex justify-between border-t border-gray-200 pt-2">
556
+ <span class="font-medium">Total:</span>
557
+ <span id="checkoutTotal" class="font-bold">€0.00</span>
558
+ </div>
559
+ </div>
560
+
561
+ <div class="mb-6">
562
+ <h4 class="font-medium mb-2">Méthode de Paiement</h4>
563
+ <div class="grid grid-cols-2 gap-3">
564
+ <button id="selectPaypal" class="py-2 border border-gray-300 rounded-lg hover:border-blue-500 flex items-center justify-center">
565
+ <i class="fab fa-paypal text-blue-500 mr-2 text-xl"></i>
566
+ </button>
567
+ <button id="selectStripe" class="py-2 border border-gray-300 rounded-lg hover:border-indigo-500 flex items-center justify-center">
568
+ <i class="fab fa-cc-stripe text-indigo-500 mr-2 text-xl"></i>
569
+ </button>
570
+ </div>
571
+ </div>
572
+
573
+ <button id="confirmPaymentBtn" class="w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
574
+ Confirmer et Payer
575
+ </button>
576
+ </div>
577
+ </div>
578
+
579
+ <script>
580
+ // User authentication state
581
+ let isLoggedIn = false;
582
+ let currentUser = null;
583
+ let cart = [];
584
+
585
+ // Mobile menu toggle
586
+ const menuToggle = document.getElementById('menuToggle');
587
+ const sidebar = document.getElementById('sidebar');
588
+
589
+ menuToggle.addEventListener('click', () => {
590
+ sidebar.classList.toggle('open');
591
+ });
592
+
593
+ // Auth modal toggle
594
+ const authModal = document.getElementById('authModal');
595
+ const showAuthModal = document.getElementById('showAuthModal');
596
+ const closeAuthModal = document.getElementById('closeAuthModal');
597
+
598
+ showAuthModal.addEventListener('click', () => {
599
+ authModal.classList.remove('hidden');
600
+ });
601
+
602
+ closeAuthModal.addEventListener('click', () => {
603
+ authModal.classList.add('hidden');
604
+ });
605
+
606
+ // Login functionality
607
+ const loginBtn = document.getElementById('loginBtn');
608
+ const signupBtn = document.getElementById('signupBtn');
609
+ const logoutBtn = document.getElementById('logoutBtn');
610
+ const userProfile = document.getElementById('userProfile');
611
+ const loginPrompt = document.getElementById('loginPrompt');
612
+ const userAvatar = document.getElementById('userAvatar');
613
+ const userName = document.getElementById('userName');
614
+ const userEmail = document.getElementById('userEmail');
615
+
616
+ loginBtn.addEventListener('click', () => {
617
+ const email = document.getElementById('authEmail').value;
618
+ const password = document.getElementById('authPassword').value;
619
+
620
+ if (email && password) {
621
+ // In a real app, you would validate credentials with your backend
622
+ isLoggedIn = true;
623
+ currentUser = {
624
+ name: "John Doe",
625
+ email: email
626
+ };
627
+
628
+ updateAuthUI();
629
+ authModal.classList.add('hidden');
630
+ } else {
631
+ alert("Veuillez entrer un email et un mot de passe valides.");
632
+ }
633
+ });
634
+
635
+ signupBtn.addEventListener('click', () => {
636
+ const email = document.getElementById('authEmail').value;
637
+ const password = document.getElementById('authPassword').value;
638
+
639
+ if (email && password) {
640
+ // In a real app, you would create a new user account
641
+ isLoggedIn = true;
642
+ currentUser = {
643
+ name: "Nouvel Utilisateur",
644
+ email: email
645
+ };
646
+
647
+ updateAuthUI();
648
+ authModal.classList.add('hidden');
649
+ } else {
650
+ alert("Veuillez entrer un email et un mot de passe valides.");
651
+ }
652
+ });
653
+
654
+ logoutBtn.addEventListener('click', () => {
655
+ isLoggedIn = false;
656
+ currentUser = null;
657
+ updateAuthUI();
658
+ });
659
+
660
+ function updateAuthUI() {
661
+ if (isLoggedIn) {
662
+ userProfile.classList.remove('hidden');
663
+ loginPrompt.classList.add('hidden');
664
+ userAvatar.classList.remove('hidden');
665
+ userName.textContent = currentUser.name;
666
+ userEmail.textContent = currentUser.email;
667
+ } else {
668
+ userProfile.classList.add('hidden');
669
+ loginPrompt.classList.remove('hidden');
670
+ userAvatar.classList.add('hidden');
671
+ }
672
+ }
673
+
674
+ // Cart functionality
675
+ const cartIcon = document.getElementById('cartIcon');
676
+ const cartDropdown = document.getElementById('cartDropdown');
677
+ const cartCount = document.getElementById('cartCount');
678
+ const cartItems = document.getElementById('cartItems');
679
+ const cartTotal = document.getElementById('cartTotal');
680
+ const addToCartButtons = document.querySelectorAll('.add-to-cart');
681
+ const checkoutBtn = document.getElementById('checkoutBtn');
682
+
683
+ cartIcon.addEventListener('click', (e) => {
684
+ e.stopPropagation();
685
+ cartDropdown.classList.toggle('hidden');
686
+ });
687
+
688
+ // Close cart dropdown when clicking outside
689
+ document.addEventListener('click', (e) => {
690
+ if (!cartDropdown.contains(e.target) && e.target !== cartIcon) {
691
+ cartDropdown.classList.add('hidden');
692
+ }
693
+ });
694
+
695
+ addToCartButtons.forEach(button => {
696
+ button.addEventListener('click', () => {
697
+ if (!isLoggedIn) {
698
+ authModal.classList.remove('hidden');
699
+ return;
700
+ }
701
+
702
+ const plan = button.getAttribute('data-plan');
703
+ const price = parseFloat(button.getAttribute('data-price'));
704
+
705
+ // Check if item already in cart
706
+ const existingItem = cart.find(item => item.plan === plan);
707
+
708
+ if (existingItem) {
709
+ existingItem.quantity += 1;
710
+ } else {
711
+ cart.push({
712
+ plan: plan,
713
+ price: price,
714
+ quantity: 1
715
+ });
716
+ }
717
+
718
+ updateCartUI();
719
+ cartDropdown.classList.remove('hidden');
720
+ });
721
+ });
722
+
723
+ function updateCartUI() {
724
+ // Update cart count
725
+ const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
726
+ cartCount.textContent = totalItems;
727
+
728
+ // Update cart items list
729
+ cartItems.innerHTML = '';
730
+
731
+ if (cart.length === 0) {
732
+ cartItems.innerHTML = '<div class="px-4 py-3 text-center text-gray-500">Votre panier est vide</div>';
733
+ cartTotal.textContent = '€0.00';
734
+ return;
735
+ }
736
+
737
+ let total = 0;
738
+
739
+ cart.forEach((item, index) => {
740
+ const itemTotal = item.price * item.quantity;
741
+ total += itemTotal;
742
+
743
+ const itemElement = document.createElement('div');
744
+ itemElement.className = 'cart-item px-4 py-3 flex justify-between items-center';
745
+ itemElement.innerHTML = `
746
+ <div>
747
+ <p class="font-medium">${item.plan.charAt(0).toUpperCase() + item.plan.slice(1)}</p>
748
+ <p class="text-sm text-gray-500">${item.quantity} x €${item.price.toFixed(2)}</p>
749
+ </div>
750
+ <div class="flex items-center">
751
+ <span class="font-medium mr-3">€${itemTotal.toFixed(2)}</span>
752
+ <button class="remove-item text-red-500 hover:text-red-700" data-index="${index}">
753
+ <i class="fas fa-times"></i>
754
+ </button>
755
+ </div>
756
+ `;
757
+
758
+ cartItems.appendChild(itemElement);
759
+ });
760
+
761
+ // Add remove item event listeners
762
+ document.querySelectorAll('.remove-item').forEach(button => {
763
+ button.addEventListener('click', (e) => {
764
+ e.stopPropagation();
765
+ const index = parseInt(button.getAttribute('data-index'));
766
+ cart.splice(index, 1);
767
+ updateCartUI();
768
+ });
769
+ });
770
+
771
+ // Update total
772
+ cartTotal.textContent = `€${total.toFixed(2)}`;
773
+ }
774
+
775
+ // Checkout functionality
776
+ const checkoutModal = document.getElementById('checkoutModal');
777
+ const closeCheckoutModal = document.getElementById('closeCheckoutModal');
778
+ const checkoutItems = document.getElementById('checkoutItems');
779
+ const checkoutTotal = document.getElementById('checkoutTotal');
780
+ const selectPaypal = document.getElementById('selectPaypal');
781
+ const selectStripe = document.getElementById('selectStripe');
782
+ const confirmPaymentBtn = document.getElementById('confirmPaymentBtn');
783
+
784
+ checkoutBtn.addEventListener('click', () => {
785
+ if (cart.length === 0) {
786
+ alert("Votre panier est vide.");
787
+ return;
788
+ }
789
+
790
+ if (!isLoggedIn) {
791
+ authModal.classList.remove('hidden');
792
+ return;
793
+ }
794
+
795
+ // Update checkout items
796
+ checkoutItems.innerHTML = '';
797
+
798
+ let total = 0;
799
+
800
+ cart.forEach(item => {
801
+ const itemTotal = item.price * item.quantity;
802
+ total += itemTotal;
803
+
804
+ const itemElement = document.createElement('div');
805
+ itemElement.className = 'flex justify-between';
806
+ itemElement.innerHTML = `
807
+ <span>${item.plan.charAt(0).toUpperCase() + item.plan.slice(1)} x${item.quantity}</span>
808
+ <span>€${itemTotal.toFixed(2)}</span>
809
+ `;
810
+
811
+ checkoutItems.appendChild(itemElement);
812
+ });
813
+
814
+ checkoutTotal.textContent = `€${total.toFixed(2)}`;
815
+ checkoutModal.classList.remove('hidden');
816
+ cartDropdown.classList.add('hidden');
817
+ });
818
+
819
+ closeCheckoutModal.addEventListener('click', () => {
820
+ checkoutModal.classList.add('hidden');
821
+ });
822
+
823
+ let selectedPaymentMethod = null;
824
+
825
+ selectPaypal.addEventListener('click', () => {
826
+ selectedPaymentMethod = 'paypal';
827
+ selectPaypal.classList.add('border-blue-500', 'bg-blue-50');
828
+ selectStripe.classList.remove('border-indigo-500', 'bg-indigo-50');
829
+ });
830
+
831
+ selectStripe.addEventListener('click', () => {
832
+ selectedPaymentMethod = 'stripe';
833
+ selectStripe.classList.add('border-indigo-500', 'bg-indigo-50');
834
+ selectPaypal.classList.remove('border-blue-500', 'bg-blue-50');
835
+ });
836
+
837
+ confirmPaymentBtn.addEventListener('click', () => {
838
+ if (!selectedPaymentMethod) {
839
+ alert("Veuillez sélectionner une méthode de paiement.");
840
+ return;
841
+ }
842
+
843
+ // In a real app, you would process payment here
844
+ alert(`Paiement de €${checkoutTotal.textContent} avec ${selectedPaymentMethod.toUpperCase()} effectué avec succès!`);
845
+
846
+ // Clear cart and close modals
847
+ cart = [];
848
+ updateCartUI();
849
+ checkoutModal.classList.add('hidden');
850
+ });
851
+
852
+ // Dashboard functionality
853
+ const dashboardLink = document.getElementById('dashboardLink');
854
+ const dashboardSection = document.getElementById('dashboardSection');
855
+ const getStartedBtn = document.getElementById('getStartedBtn');
856
+ const paypalBtn = document.getElementById('paypalBtn');
857
+ const stripeBtn = document.getElementById('stripeBtn');
858
+
859
+ dashboardLink.addEventListener('click', (e) => {
860
+ e.preventDefault();
861
+
862
+ if (!isLoggedIn) {
863
+ authModal.classList.remove('hidden');
864
+ return;
865
+ }
866
+
867
+ // Show dashboard and hide other sections
868
+ dashboardSection.classList.remove('hidden');
869
+ document.querySelectorAll('main > div:not(#dashboardSection)').forEach(section => {
870
+ section.classList.add('hidden');
871
+ });
872
+ });
873
+
874
+ getStartedBtn.addEventListener('click', () => {
875
+ if (!isLoggedIn) {
876
+ authModal.classList.remove('hidden');
877
+ } else {
878
+ // Scroll to pricing section
879
+ document.querySelector('.hosting-card').scrollIntoView({ behavior: 'smooth' });
880
+ }
881
+ });
882
+
883
+ paypalBtn.addEventListener('click', () => {
884
+ alert("Redirection vers PayPal pour le paiement...");
885
+ // In a real app: window.location.href = "your-paypal-checkout-url";
886
+ });
887
+
888
+ stripeBtn.addEventListener('click', () => {
889
+ alert("Ouverture du formulaire de paiement Stripe...");
890
+ // In a real app: stripe.redirectToCheckout({ sessionId: 'your-session-id' });
891
+ });
892
+
893
+ // Initialize UI
894
+ updateAuthUI();
895
+ updateCartUI();
896
+ </script>
897
+ <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/host-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
898
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ https://huggingface.co/spaces/docto41/d-ploiemenr
2
+ Hébergement Web Haute Performance Des serveurs ultra-rapides avec une disponibilité de 99.9% et un support technique 24/7.::: ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paement