Hugging Face's logo

Spaces:
docto41
/
mon-portfolio
Running

App Files Community
docto41 commited on
Commit
b11881b
·
verified ·
1 Parent(s): 11e534a

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +1114 -394
  2. prompts.txt +5 -1
index.html CHANGED
@@ -3,10 +3,10 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mon Portfolio Professionnel</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
- <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
10
  <style>
11
  body {
12
  font-family: 'Montserrat', sans-serif;
@@ -15,6 +15,9 @@
15
  .hero-gradient {
16
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
  }
 
 
 
18
  .card-hover:hover {
19
  transform: translateY(-5px);
20
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
@@ -38,6 +41,48 @@
38
  .nav-link:hover:after {
39
  width: 100%;
40
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  </style>
42
  </head>
43
  <body class="bg-gray-50 text-gray-800">
@@ -45,15 +90,20 @@
45
  <nav class="fixed w-full bg-white shadow-md z-50">
46
  <div class="container mx-auto px-6 py-4">
47
  <div class="flex items-center justify-between">
48
- <div class="text-2xl font-bold text-indigo-600">MonPortfolio</div>
 
 
49
  <div class="hidden md:flex space-x-8">
50
  <a href="#accueil" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600">Accueil</a>
51
- <a href="#apropos" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600">À propos</a>
52
- <a href="#competences" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600">Compétences</a>
53
- <a href="#projets" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600">Projets</a>
54
- <a href="#contact" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600">Contact</a>
 
 
 
55
  </div>
56
- <button class="md:hidden focus:outline-none">
57
  <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
58
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
59
  </svg>
@@ -62,422 +112,591 @@
62
  </div>
63
  </nav>
64
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  <!-- Hero Section -->
66
  <section id="accueil" class="hero-gradient pt-32 pb-20 text-white">
67
  <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
68
  <div class="md:w-1/2 mb-10 md:mb-0">
69
- <h1 class="text-4xl md:text-6xl font-bold mb-4">Bonjour, je suis <span class="text-yellow-300">[Votre Nom]</span></h1>
70
- <h2 class="text-2xl md:text-3xl mb-6">Développeur Full Stack</h2>
71
- <p class="text-lg mb-8 opacity-90">Je crée des solutions web modernes et performantes avec une attention particulière pour l'expérience utilisateur.</p>
72
- <div class="flex space-x-4">
73
- <a href="#projets" class="bg-white text-indigo-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300">Voir mes projets</a>
74
- <a href="#contact" class="border-2 border-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-indigo-600 transition duration-300">Me contacter</a>
 
 
 
 
75
  </div>
76
  </div>
77
  <div class="md:w-1/2 flex justify-center">
78
- <div class="relative w-64 h-64 md:w-80 md:h-80 bg-white rounded-full overflow-hidden shadow-xl">
79
- <!-- Placeholder for your photo -->
80
- <div class="absolute inset-0 bg-indigo-400 flex items-center justify-center">
81
- <span class="text-6xl font-bold text-white">PN</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
82
  </div>
83
  </div>
84
  </div>
85
  </div>
86
  </section>
87
 
88
- <!-- About Section -->
89
- <section id="apropos" class="py-20 bg-white">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  <div class="container mx-auto px-6">
91
- <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">À propos de moi</h2>
92
- <div class="flex flex-col md:flex-row items-center">
93
- <div class="md:w-1/3 mb-10 md:mb-0 flex justify-center">
94
- <div class="w-64 h-64 rounded-full overflow-hidden shadow-lg">
95
- <!-- Another photo placeholder -->
96
- <div class="w-full h-full bg-indigo-100 flex items-center justify-center">
97
- <span class="text-6xl font-bold text-indigo-600">PN</span>
 
 
 
 
98
  </div>
99
  </div>
100
  </div>
101
- <div class="md:w-2/3 md:pl-16">
102
- <h3 class="text-2xl font-semibold mb-4">Qui suis-je ?</h3>
103
- <p class="text-gray-600 mb-6 leading-relaxed">
104
- Je suis un développeur full stack passionné avec plus de 5 ans d'expérience dans la création d'applications web modernes.
105
- J'ai travaillé avec diverses technologies et frameworks pour fournir des solutions robustes et évolutives.
106
- </p>
107
- <p class="text-gray-600 mb-6 leading-relaxed">
108
- Mon approche combine une solide compréhension technique avec un sens aigu du design, ce qui me permet de créer des produits
109
- qui sont à la fois fonctionnels et esthétiques.
110
- </p>
111
- <div class="grid grid-cols-2 gap-4 mt-8">
112
- <div class="flex items-center">
113
- <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
114
- <i class="fas fa-user text-indigo-600"></i>
115
- </div>
116
  <div>
117
- <h4 class="font-semibold">Nom</h4>
118
- <p class="text-gray-600">[Votre Nom]</p>
119
  </div>
120
- </div>
121
- <div class="flex items-center">
122
- <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
123
- <i class="fas fa-envelope text-indigo-600"></i>
124
- </div>
125
- <div>
126
- <h4 class="font-semibold">Email</h4>
127
- <p class="text-gray-600">votre@email.com</p>
128
  </div>
129
  </div>
130
- <div class="flex items-center">
131
- <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
132
- <i class="fas fa-phone text-indigo-600"></i>
 
133
  </div>
 
 
 
 
 
 
134
  <div>
135
- <h4 class="font-semibold">Téléphone</h4>
136
- <p class="text-gray-600">+XX XXX XXX XXX</p>
137
  </div>
138
- </div>
139
- <div class="flex items-center">
140
- <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
141
- <i class="fas fa-map-marker-alt text-indigo-600"></i>
142
  </div>
143
- <div>
144
- <h4 class="font-semibold">Localisation</h4>
145
- <p class="text-gray-600">Ville, Pays</p>
 
 
146
  </div>
147
  </div>
148
  </div>
149
- </div>
150
- </div>
151
- </div>
152
- </section>
153
-
154
- <!-- Skills Section -->
155
- <section id="competences" class="py-20 bg-gray-50">
156
- <div class="container mx-auto px-6">
157
- <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Mes compétences</h2>
158
-
159
- <div class="grid md:grid-cols-2 gap-12">
160
- <div>
161
- <h3 class="text-xl font-semibold mb-6">Compétences techniques</h3>
162
- <div class="space-y-6">
163
- <div>
164
- <div class="flex justify-between mb-2">
165
- <span class="font-medium">HTML/CSS</span>
166
- <span>90%</span>
167
  </div>
168
- <div class="w-full bg-gray-200 rounded-full h-2">
169
- <div class="skill-bar bg-indigo-600 h-2 rounded-full" style="width: 90%"></div>
170
  </div>
171
  </div>
172
- <div>
173
- <div class="flex justify-between mb-2">
174
- <span class="font-medium">JavaScript</span>
175
- <span>85%</span>
176
- </div>
177
- <div class="w-full bg-gray-200 rounded-full h-2">
178
- <div class="skill-bar bg-indigo-600 h-2 rounded-full" style="width: 85%"></div>
179
  </div>
180
  </div>
181
- <div>
182
- <div class="flex justify-between mb-2">
183
- <span class="font-medium">React</span>
184
- <span>80%</span>
 
 
 
 
185
  </div>
186
- <div class="w-full bg-gray-200 rounded-full h-2">
187
- <div class="skill-bar bg-indigo-600 h-2 rounded-full" style="width: 80%"></div>
188
  </div>
189
  </div>
190
- <div>
191
- <div class="flex justify-between mb-2">
192
- <span class="font-medium">Node.js</span>
193
- <span>75%</span>
194
- </div>
195
- <div class="w-full bg-gray-200 rounded-full h-2">
196
- <div class="skill-bar bg-indigo-600 h-2 rounded-full" style="width: 75%"></div>
197
  </div>
198
  </div>
199
  </div>
200
  </div>
201
 
202
- <div>
203
- <h3 class="text-xl font-semibold mb-6">Compétences professionnelles</h3>
204
- <div class="space-y-6">
205
- <div>
206
- <div class="flex justify-between mb-2">
207
- <span class="font-medium">Communication</span>
208
- <span>95%</span>
209
- </div>
210
- <div class="w-full bg-gray-200 rounded-full h-2">
211
- <div class="skill-bar bg-green-500 h-2 rounded-full" style="width: 95%"></div>
212
- </div>
213
  </div>
214
- <div>
215
- <div class="flex justify-between mb-2">
216
- <span class="font-medium">Travail d'équipe</span>
217
- <span>90%</span>
218
- </div>
219
- <div class="w-full bg-gray-200 rounded-full h-2">
220
- <div class="skill-bar bg-green-500 h-2 rounded-full" style="width: 90%"></div>
221
- </div>
 
 
 
 
 
 
222
  </div>
223
- <div>
224
- <div class="flex justify-between mb-2">
225
- <span class="font-medium">Gestion de projet</span>
226
- <span>80%</span>
227
- </div>
228
- <div class="w-full bg-gray-200 rounded-full h-2">
229
- <div class="skill-bar bg-green-500 h-2 rounded-full" style="width: 80%"></div>
230
- </div>
231
  </div>
232
- <div>
233
- <div class="flex justify-between mb-2">
234
- <span class="font-medium">Résolution de problèmes</span>
235
- <span>85%</span>
236
  </div>
237
- <div class="w-full bg-gray-200 rounded-full h-2">
238
- <div class="skill-bar bg-green-500 h-2 rounded-full" style="width: 85%"></div>
 
 
 
 
 
239
  </div>
240
  </div>
241
  </div>
242
  </div>
243
  </div>
244
-
245
- <div class="mt-16">
246
- <h3 class="text-xl font-semibold mb-8 text-center">Technologies que j'utilise</h3>
247
- <div class="flex flex-wrap justify-center gap-6">
248
- <div class="w-24 h-24 bg-white rounded-xl shadow-md flex flex-col items-center justify-center p-4 hover:shadow-lg transition duration-300">
249
- <i class="fab fa-html5 text-4xl text-orange-500 mb-2"></i>
250
- <span class="text-sm">HTML5</span>
251
- </div>
252
- <div class="w-24 h-24 bg-white rounded-xl shadow-md flex flex-col items-center justify-center p-4 hover:shadow-lg transition duration-300">
253
- <i class="fab fa-css3-alt text-4xl text-blue-500 mb-2"></i>
254
- <span class="text-sm">CSS3</span>
255
- </div>
256
- <div class="w-24 h-24 bg-white rounded-xl shadow-md flex flex-col items-center justify-center p-4 hover:shadow-lg transition duration-300">
257
- <i class="fab fa-js text-4xl text-yellow-500 mb-2"></i>
258
- <span class="text-sm">JavaScript</span>
259
- </div>
260
- <div class="w-24 h-24 bg-white rounded-xl shadow-md flex flex-col items-center justify-center p-4 hover:shadow-lg transition duration-300">
261
- <i class="fab fa-react text-4xl text-blue-400 mb-2"></i>
262
- <span class="text-sm">React</span>
263
- </div>
264
- <div class="w-24 h-24 bg-white rounded-xl shadow-md flex flex-col items-center justify-center p-4 hover:shadow-lg transition duration-300">
265
- <i class="fab fa-node-js text-4xl text-green-500 mb-2"></i>
266
- <span class="text-sm">Node.js</span>
267
- </div>
268
- </div>
269
- </div>
270
  </div>
271
  </section>
272
 
273
- <!-- Projects Section -->
274
- <section id="projets" class="py-20 bg-white">
275
  <div class="container mx-auto px-6">
276
- <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Mes projets</h2>
277
 
278
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
279
- <!-- Project 1 -->
280
- <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover transition duration-300">
281
- <div class="h-48 bg-indigo-100 flex items-center justify-center">
282
- <span class="text-4xl font-bold text-indigo-600">P1</span>
283
- </div>
284
- <div class="p-6">
285
- <h3 class="text-xl font-semibold mb-2">Application E-commerce</h3>
286
- <p class="text-gray-600 mb-4">Une plateforme complète de commerce électronique avec panier, paiement et gestion des commandes.</p>
287
- <div class="flex flex-wrap gap-2 mb-4">
288
- <span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">React</span>
289
- <span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Node.js</span>
290
- <span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">MongoDB</span>
291
- </div>
292
- <a href="#" class="text-indigo-600 font-medium hover:underline">Voir le projet →</a>
293
- </div>
294
- </div>
295
-
296
- <!-- Project 2 -->
297
- <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover transition duration-300">
298
- <div class="h-48 bg-blue-100 flex items-center justify-center">
299
- <span class="text-4xl font-bold text-blue-600">P2</span>
300
- </div>
301
- <div class="p-6">
302
- <h3 class="text-xl font-semibold mb-2">Réseau Social</h3>
303
- <p class="text-gray-600 mb-4">Un réseau social avec authentification, publications, commentaires et notifications en temps réel.</p>
304
- <div class="flex flex-wrap gap-2 mb-4">
305
- <span class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">Vue.js</span>
306
- <span class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">Firebase</span>
307
- <span class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">TailwindCSS</span>
308
- </div>
309
- <a href="#" class="text-blue-600 font-medium hover:underline">Voir le projet →</a>
310
- </div>
311
  </div>
312
 
313
- <!-- Project 3 -->
314
- <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover transition duration-300">
315
- <div class="h-48 bg-green-100 flex items-center justify-center">
316
- <span class="text-4xl font-bold text-green-600">P3</span>
317
- </div>
318
- <div class="p-6">
319
- <h3 class="text-xl font-semibold mb-2">Application de Gestion</h3>
320
- <p class="text-gray-600 mb-4">Un système de gestion de tâches et de projets avec tableau Kanban et rapports analytiques.</p>
321
- <div class="flex flex-wrap gap-2 mb-4">
322
- <span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">Angular</span>
323
- <span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">NestJS</span>
324
- <span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">PostgreSQL</span>
325
- </div>
326
- <a href="#" class="text-green-600 font-medium hover:underline">Voir le projet →</a>
327
- </div>
328
- </div>
329
-
330
- <!-- Project 4 -->
331
- <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover transition duration-300">
332
- <div class="h-48 bg-purple-100 flex items-center justify-center">
333
- <span class="text-4xl font-bold text-purple-600">P4</span>
334
- </div>
335
- <div class="p-6">
336
- <h3 class="text-xl font-semibold mb-2">Portfolio Artistique</h3>
337
- <p class="text-gray-600 mb-4">Un portfolio interactif pour un artiste avec galerie, calendrier d'expositions et boutique en ligne.</p>
338
- <div class="flex flex-wrap gap-2 mb-4">
339
- <span class="px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm">Gatsby</span>
340
- <span class="px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm">Contentful</span>
341
- <span class="px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm">Stripe</span>
342
- </div>
343
- <a href="#" class="text-purple-600 font-medium hover:underline">Voir le projet →</a>
344
- </div>
345
- </div>
346
-
347
- <!-- Project 5 -->
348
- <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover transition duration-300">
349
- <div class="h-48 bg-yellow-100 flex items-center justify-center">
350
- <span class="text-4xl font-bold text-yellow-600">P5</span>
351
- </div>
352
- <div class="p-6">
353
- <h3 class="text-xl font-semibold mb-2">Application Mobile</h3>
354
- <p class="text-gray-600 mb-4">Une application mobile de suivi de fitness avec synchronisation des données et tableau de bord.</p>
355
- <div class="flex flex-wrap gap-2 mb-4">
356
- <span class="px-3 py-1 bg-yellow-100 text-yellow-600 rounded-full text-sm">React Native</span>
357
- <span class="px-3 py-1 bg-yellow-100 text-yellow-600 rounded-full text-sm">GraphQL</span>
358
- <span class="px-3 py-1 bg-yellow-100 text-yellow-600 rounded-full text-sm">AWS</span>
359
- </div>
360
- <a href="#" class="text-yellow-600 font-medium hover:underline">Voir le projet →</a>
361
- </div>
362
- </div>
363
-
364
- <!-- Project 6 -->
365
- <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover transition duration-300">
366
- <div class="h-48 bg-red-100 flex items-center justify-center">
367
- <span class="text-4xl font-bold text-red-600">P6</span>
368
  </div>
369
- <div class="p-6">
370
- <h3 class="text-xl font-semibold mb-2">Dashboard Analytique</h3>
371
- <p class="text-gray-600 mb-4">Un tableau de bord d'analyse de données avec visualisations interactives et export de rapports.</p>
372
- <div class="flex flex-wrap gap-2 mb-4">
373
- <span class="px-3 py-1 bg-red-100 text-red-600 rounded-full text-sm">D3.js</span>
374
- <span class="px-3 py-1 bg-red-100 text-red-600 rounded-full text-sm">Python</span>
375
- <span class="px-3 py-1 bg-red-100 text-red-600 rounded-full text-sm">Flask</span>
376
- </div>
377
- <a href="#" class="text-red-600 font-medium hover:underline">Voir le projet →</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
378
  </div>
 
 
 
 
379
  </div>
380
  </div>
381
-
382
- <div class="text-center mt-12">
383
- <a href="#" class="inline-block bg-indigo-600 text-white px-8 py-3 rounded-full font-semibold hover:bg-indigo-700 transition duration-300">
384
- Voir plus de projets
385
- </a>
386
- </div>
387
  </div>
388
  </section>
389
 
390
  <!-- Contact Section -->
391
  <section id="contact" class="py-20 bg-gray-50">
392
  <div class="container mx-auto px-6">
393
- <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Contactez-moi</h2>
394
 
395
- <div class="flex flex-col lg:flex-row gap-12">
396
- <div class="lg:w-1/2">
397
- <h3 class="text-2xl font-semibold mb-6">Discutons de votre projet</h3>
398
- <p class="text-gray-600 mb-8 leading-relaxed">
399
- Vous avez un projet en tête ou souhaitez en savoir plus sur mon travail ?
400
- N'hésitez pas à me contacter. Je serai ravi d'échanger avec vous et de voir
401
- comment je peux vous aider à concrétiser vos idées.
402
- </p>
403
-
404
- <div class="space-y-6">
405
- <div class="flex items-start">
406
- <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-6">
407
- <i class="fas fa-envelope text-indigo-600"></i>
408
  </div>
 
409
  <div>
410
- <h4 class="font-semibold mb-1">Email</h4>
411
- <p class="text-gray-600">votre@email.com</p>
412
  </div>
413
  </div>
414
 
415
- <div class="flex items-start">
416
- <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-6">
417
- <i class="fas fa-phone text-indigo-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
418
  </div>
 
419
  <div>
420
- <h4 class="font-semibold mb-1">Téléphone</h4>
421
- <p class="text-gray-600">+XX XXX XXX XXX</p>
 
 
 
 
 
 
422
  </div>
423
  </div>
424
 
425
- <div class="flex items-start">
426
- <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-6">
427
- <i class="fas fa-map-marker-alt text-indigo-600"></i>
428
- </div>
429
- <div>
430
- <h4 class="font-semibold mb-1">Adresse</h4>
431
- <p class="text-gray-600">123 Rue Exemple, Ville, Pays</p>
 
 
432
  </div>
433
  </div>
434
- </div>
435
-
436
- <div class="mt-10">
437
- <h4 class="font-semibold mb-4">Suivez-moi</h4>
438
- <div class="flex space-x-4">
439
- <a href="#" class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 hover:bg-indigo-600 hover:text-white transition duration-300">
440
- <i class="fab fa-linkedin-in"></i>
441
- </a>
442
- <a href="#" class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 hover:bg-indigo-600 hover:text-white transition duration-300">
443
- <i class="fab fa-github"></i>
444
- </a>
445
- <a href="#" class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 hover:bg-indigo-600 hover:text-white transition duration-300">
446
- <i class="fab fa-twitter"></i>
447
- </a>
448
- <a href="#" class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 hover:bg-indigo-600 hover:text-white transition duration-300">
449
- <i class="fab fa-dribbble"></i>
450
- </a>
451
  </div>
452
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
453
  </div>
454
 
455
- <div class="lg:w-1/2">
456
- <form class="bg-white p-8 rounded-xl shadow-md">
457
- <div class="mb-6">
458
- <label for="name" class="block text-gray-700 font-medium mb-2">Nom complet</label>
459
- <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Votre nom">
460
  </div>
461
-
462
- <div class="mb-6">
463
- <label for="email" class="block text-gray-700 font-medium mb-2">Adresse email</label>
464
- <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="votre@email.com">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
465
  </div>
466
-
467
- <div class="mb-6">
468
- <label for="subject" class="block text-gray-700 font-medium mb-2">Sujet</label>
469
- <input type="text" id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Objet de votre message">
 
 
470
  </div>
471
-
472
- <div class="mb-6">
473
- <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
474
- <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Décrivez votre projet ou votre demande..."></textarea>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
475
  </div>
476
-
477
- <button type="submit" class="w-full bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition duration-300">
478
- Envoyer le message
479
- </button>
480
- </form>
481
  </div>
482
  </div>
483
  </div>
@@ -488,8 +707,10 @@
488
  <div class="container mx-auto px-6">
489
  <div class="flex flex-col md:flex-row justify-between items-center">
490
  <div class="mb-6 md:mb-0">
491
- <div class="text-2xl font-bold text-white mb-2">MonPortfolio</div>
492
- <p class="text-gray-400">Développeur Full Stack passionné par la création de solutions web innovantes.</p>
 
 
493
  </div>
494
 
495
  <div class="flex space-x-6">
@@ -502,85 +723,584 @@
502
  <a href="#" class="text-gray-400 hover:text-white transition duration-300">
503
  <i class="fab fa-twitter text-xl"></i>
504
  </a>
505
- <a href="#" class="text-gray-400 hover:text-white transition duration-300">
506
- <i class="fab fa-dribbble text-xl"></i>
507
- </a>
508
  </div>
509
  </div>
510
 
511
  <div class="border-t border-gray-700 mt-10 pt-10 flex flex-col md:flex-row justify-between items-center">
512
- <p class="text-gray-400 mb-4 md:mb-0">© 2023 MonPortfolio. Tous droits réservés.</p>
513
 
514
  <div class="flex space-x-6">
515
  <a href="#" class="text-gray-400 hover:text-white transition duration-300">Mentions légales</a>
516
- <a href="#" class="text-gray-400 hover:text-white transition duration-300">Politique de confidentialité</a>
517
- <a href="#" class="text-gray-400 hover:text-white transition duration-300">Conditions d'utilisation</a>
518
  </div>
519
  </div>
520
  </div>
521
  </footer>
522
 
 
 
 
523
  <script>
524
- // Animate skill bars on scroll
525
- document.addEventListener('DOMContentLoaded', function() {
526
- const skillBars = document.querySelectorAll('.skill-bar');
527
-
528
- const observer = new IntersectionObserver((entries) => {
529
- entries.forEach(entry => {
530
- if (entry.isIntersecting) {
531
- const width = entry.target.style.width;
532
- entry.target.style.width = '0';
533
- setTimeout(() => {
534
- entry.target.style.width = width;
535
- }, 100);
 
 
 
 
 
 
 
 
 
 
536
  }
537
- });
538
- }, {threshold: 0.5});
539
-
540
- skillBars.forEach(bar => {
541
- observer.observe(bar);
542
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
543
 
544
- // Mobile menu toggle
545
- const mobileMenuButton = document.querySelector('button.md\\:hidden');
546
- const navLinks = document.querySelector('.md\\:flex.space-x-8');
547
 
548
- mobileMenuButton.addEventListener('click', () => {
549
- navLinks.classList.toggle('hidden');
550
- navLinks.classList.toggle('flex');
551
- navLinks.classList.toggle('flex-col');
552
- navLinks.classList.toggle('absolute');
553
- navLinks.classList.toggle('top-16');
554
- navLinks.classList.toggle('left-0');
555
- navLinks.classList.toggle('right-0');
556
- navLinks.classList.toggle('bg-white');
557
- navLinks.classList.toggle('shadow-md');
558
- navLinks.classList.toggle('p-4');
559
- navLinks.classList.toggle('space-y-4');
560
- navLinks.classList.toggle('space-x-0');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
561
  });
562
 
563
- // Smooth scrolling for anchor links
564
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
565
- anchor.addEventListener('click', function(e) {
566
- e.preventDefault();
 
 
 
 
 
 
 
 
 
567
 
568
- const targetId = this.getAttribute('href');
569
- const targetElement = document.querySelector(targetId);
 
 
570
 
571
- if (targetElement) {
572
- window.scrollTo({
573
- top: targetElement.offsetTop - 80,
574
- behavior: 'smooth'
575
- });
576
-
577
- // Close mobile menu if open
578
- if (!navLinks.classList.contains('hidden')) {
579
- mobileMenuButton.click();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
580
  }
581
  }
582
- });
583
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
584
  });
585
  </script>
586
  <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/mon-portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Armée d'IA Professionnelles - Portfolio Automatisé</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
  <style>
11
  body {
12
  font-family: 'Montserrat', sans-serif;
 
15
  .hero-gradient {
16
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
  }
18
+ .dashboard-gradient {
19
+ background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
20
+ }
21
  .card-hover:hover {
22
  transform: translateY(-5px);
23
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
41
  .nav-link:hover:after {
42
  width: 100%;
43
  }
44
+ .animate-pulse {
45
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
46
+ }
47
+ @keyframes pulse {
48
+ 0%, 100% { opacity: 1; }
49
+ 50% { opacity: 0.5; }
50
+ }
51
+ .ai-army-grid {
52
+ display: grid;
53
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
54
+ gap: 1.5rem;
55
+ }
56
+ .ai-status-ready {
57
+ background: linear-gradient(135deg, #10B981 0%, #059669 100%);
58
+ }
59
+ .ai-status-busy {
60
+ background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
61
+ }
62
+ .ai-status-offline {
63
+ background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%);
64
+ }
65
+ .payment-method {
66
+ transition: all 0.3s ease;
67
+ }
68
+ .payment-method:hover {
69
+ transform: scale(1.05);
70
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
71
+ }
72
+ .payment-method.active {
73
+ border: 2px solid #4F46E5;
74
+ background-color: #EEF2FF;
75
+ }
76
+ .progress-bar {
77
+ transition: width 0.6s ease;
78
+ }
79
+ .ai-card {
80
+ transition: all 0.3s ease;
81
+ }
82
+ .ai-card:hover {
83
+ transform: translateY(-5px);
84
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
85
+ }
86
  </style>
87
  </head>
88
  <body class="bg-gray-50 text-gray-800">
 
90
  <nav class="fixed w-full bg-white shadow-md z-50">
91
  <div class="container mx-auto px-6 py-4">
92
  <div class="flex items-center justify-between">
93
+ <div class="text-2xl font-bold text-indigo-600 flex items-center">
94
+ <i class="fas fa-robot mr-2"></i> AI Army
95
+ </div>
96
  <div class="hidden md:flex space-x-8">
97
  <a href="#accueil" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600">Accueil</a>
98
+ <a href="#armee" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600">Armée d'IA</a>
99
+ <a href="#dashboard" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600">Tableau de Bord</a>
100
+ <a href="#paiements" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600">Paiements</a>
101
+ <a href="#contact" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600">Nouveau Projet</a>
102
+ <a href="#admin" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition flex items-center">
103
+ <i class="fas fa-lock mr-2"></i> Admin
104
+ </a>
105
  </div>
106
+ <button class="md:hidden focus:outline-none" id="mobile-menu-button">
107
  <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
108
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
109
  </svg>
 
112
  </div>
113
  </nav>
114
 
115
+ <!-- Mobile Menu -->
116
+ <div id="mobile-menu" class="hidden md:hidden fixed inset-0 z-40 bg-white mt-16">
117
+ <div class="container mx-auto px-6 py-4">
118
+ <div class="flex flex-col space-y-4">
119
+ <a href="#accueil" class="px-3 py-2 text-gray-700 hover:text-indigo-600 border-b border-gray-100 flex items-center">
120
+ <i class="fas fa-home mr-2"></i> Accueil
121
+ </a>
122
+ <a href="#armee" class="px-3 py-2 text-gray-700 hover:text-indigo-600 border-b border-gray-100 flex items-center">
123
+ <i class="fas fa-robot mr-2"></i> Armée d'IA
124
+ </a>
125
+ <a href="#dashboard" class="px-3 py-2 text-gray-700 hover:text-indigo-600 border-b border-gray-100 flex items-center">
126
+ <i class="fas fa-tachometer-alt mr-2"></i> Tableau de Bord
127
+ </a>
128
+ <a href="#paiements" class="px-3 py-2 text-gray-700 hover:text-indigo-600 border-b border-gray-100 flex items-center">
129
+ <i class="fas fa-credit-card mr-2"></i> Paiements
130
+ </a>
131
+ <a href="#contact" class="px-3 py-2 text-gray-700 hover:text-indigo-600 border-b border-gray-100 flex items-center">
132
+ <i class="fas fa-plus-circle mr-2"></i> Nouveau Projet
133
+ </a>
134
+ <a href="#admin" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition flex items-center justify-center">
135
+ <i class="fas fa-lock mr-2"></i> Admin
136
+ </a>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
  <!-- Hero Section -->
142
  <section id="accueil" class="hero-gradient pt-32 pb-20 text-white">
143
  <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
144
  <div class="md:w-1/2 mb-10 md:mb-0">
145
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Armée d'IA <span class="text-yellow-300">Professionnelles</span></h1>
146
+ <h2 class="text-2xl md:text-3xl mb-6">Prêtes à exécuter vos projets automatiquement</h2>
147
+ <p class="text-lg mb-8 opacity-90">Notre armée de 50 IA spécialisées attend vos demandes pour travailler 24/7 sans interruption.</p>
148
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
149
+ <a href="#armee" class="bg-white text-indigo-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300 flex items-center justify-center">
150
+ <i class="fas fa-robot mr-2"></i> Voir les IA
151
+ </a>
152
+ <a href="#contact" class="border-2 border-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-indigo-600 transition duration-300 flex items-center justify-center">
153
+ <i class="fas fa-plus-circle mr-2"></i> Nouveau Projet
154
+ </a>
155
  </div>
156
  </div>
157
  <div class="md:w-1/2 flex justify-center">
158
+ <div class="relative w-64 h-64 md:w-80 md:h-80">
159
+ <div class="absolute inset-0 bg-white rounded-xl shadow-2xl flex items-center justify-center p-6 transform rotate-3">
160
+ <div class="text-center">
161
+ <div class="animate-pulse mb-4">
162
+ <i class="fas fa-robot text-5xl text-indigo-600"></i>
163
+ </div>
164
+ <h3 class="font-bold text-gray-800">50 IA en attente</h3>
165
+ <p class="text-sm text-gray-600 mt-2">Prêtes à traiter votre demande</p>
166
+ <div class="mt-4">
167
+ <div class="flex justify-center space-x-2">
168
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
169
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
170
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
171
+ </div>
172
+ <p class="text-xs text-gray-500 mt-1">Système opérationnel</p>
173
+ </div>
174
+ </div>
175
  </div>
176
  </div>
177
  </div>
178
  </div>
179
  </section>
180
 
181
+ <!-- AI Army Section -->
182
+ <section id="armee" class="py-20 bg-white">
183
+ <div class="container mx-auto px-6">
184
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Notre Armée d'Intelligences Artificielles</h2>
185
+
186
+ <div class="mb-12 flex justify-center">
187
+ <div class="bg-indigo-50 rounded-full px-6 py-2 inline-flex items-center shadow-sm">
188
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
189
+ <span class="text-indigo-700 font-medium" id="available-count">42 IA disponibles</span>
190
+ <span class="mx-2 text-gray-400">|</span>
191
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
192
+ <span class="text-indigo-700 font-medium" id="busy-count">8 IA occupées</span>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="ai-army-grid" id="ai-container">
197
+ <!-- AI cards will be dynamically loaded here -->
198
+ </div>
199
+
200
+ <div class="text-center mt-12">
201
+ <button id="load-more-ai" class="bg-indigo-600 text-white px-8 py-3 rounded-full font-semibold hover:bg-indigo-700 transition duration-300 flex items-center mx-auto">
202
+ <i class="fas fa-sync-alt mr-2"></i> Charger plus d'IA
203
+ </button>
204
+ </div>
205
+ </div>
206
+ </section>
207
+
208
+ <!-- Dashboard Section -->
209
+ <section id="dashboard" class="py-20 bg-gray-50">
210
  <div class="container mx-auto px-6">
211
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Tableau de Bord Intelligent</h2>
212
+
213
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden">
214
+ <div class="dashboard-gradient text-white p-6">
215
+ <div class="flex flex-col md:flex-row justify-between items-center">
216
+ <h3 class="text-xl font-semibold">Tableau de Bord Administrateur</h3>
217
+ <div class="flex items-center space-x-2 mt-4 md:mt-0">
218
+ <span class="text-sm">Connecté en tant que: <span class="font-medium">Admin</span></span>
219
+ <div class="w-8 h-8 rounded-full bg-white text-indigo-600 flex items-center justify-center">
220
+ <i class="fas fa-user"></i>
221
+ </div>
222
  </div>
223
  </div>
224
  </div>
225
+
226
+ <div class="grid md:grid-cols-4 gap-6 p-6">
227
+ <!-- Stat 1 -->
228
+ <div class="bg-white rounded-lg shadow p-6 ai-card">
229
+ <div class="flex items-center justify-between">
 
 
 
 
 
 
 
 
 
 
230
  <div>
231
+ <p class="text-gray-500">IA Actives</p>
232
+ <h3 class="text-2xl font-bold mt-2" id="active-ai-count">42</h3>
233
  </div>
234
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
235
+ <i class="fas fa-robot text-indigo-600"></i>
 
 
 
 
 
 
236
  </div>
237
  </div>
238
+ <div class="mt-4">
239
+ <div class="flex items-center text-sm text-green-500">
240
+ <i class="fas fa-arrow-up mr-1"></i>
241
+ <span>8% ce mois</span>
242
  </div>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- Stat 2 -->
247
+ <div class="bg-white rounded-lg shadow p-6 ai-card">
248
+ <div class="flex items-center justify-between">
249
  <div>
250
+ <p class="text-gray-500">Projets en cours</p>
251
+ <h3 class="text-2xl font-bold mt-2" id="active-projects">18</h3>
252
  </div>
253
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
254
+ <i class="fas fa-tasks text-green-600"></i>
 
 
255
  </div>
256
+ </div>
257
+ <div class="mt-4">
258
+ <div class="flex items-center text-sm text-green-500">
259
+ <i class="fas fa-arrow-up mr-1"></i>
260
+ <span>23% ce mois</span>
261
  </div>
262
  </div>
263
  </div>
264
+
265
+ <!-- Stat 3 -->
266
+ <div class="bg-white rounded-lg shadow p-6 ai-card">
267
+ <div class="flex items-center justify-between">
268
+ <div>
269
+ <p class="text-gray-500">Clients actifs</p>
270
+ <h3 class="text-2xl font-bold mt-2" id="active-clients">27</h3>
 
 
 
 
 
 
 
 
 
 
 
271
  </div>
272
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
273
+ <i class="fas fa-users text-blue-600"></i>
274
  </div>
275
  </div>
276
+ <div class="mt-4">
277
+ <div class="flex items-center text-sm text-green-500">
278
+ <i class="fas fa-arrow-up mr-1"></i>
279
+ <span>12% ce mois</span>
 
 
 
280
  </div>
281
  </div>
282
+ </div>
283
+
284
+ <!-- Stat 4 -->
285
+ <div class="bg-white rounded-lg shadow p-6 ai-card">
286
+ <div class="flex items-center justify-between">
287
+ <div>
288
+ <p class="text-gray-500">Revenus mensuels</p>
289
+ <h3 class="text-2xl font-bold mt-2" id="monthly-revenue">$24,500</h3>
290
  </div>
291
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
292
+ <i class="fas fa-dollar-sign text-purple-600"></i>
293
  </div>
294
  </div>
295
+ <div class="mt-4">
296
+ <div class="flex items-center text-sm text-red-500">
297
+ <i class="fas fa-arrow-down mr-1"></i>
298
+ <span>5% ce mois</span>
 
 
 
299
  </div>
300
  </div>
301
  </div>
302
  </div>
303
 
304
+ <div class="grid md:grid-cols-3 gap-6 p-6">
305
+ <!-- Recent Projects -->
306
+ <div class="md:col-span-2 bg-white rounded-lg shadow">
307
+ <div class="p-6 border-b border-gray-200 flex justify-between items-center">
308
+ <h3 class="font-semibold text-lg">Projets Récents</h3>
309
+ <button class="text-indigo-600 text-sm font-medium flex items-center">
310
+ <i class="fas fa-plus mr-1"></i> Nouveau Projet
311
+ </button>
 
 
 
312
  </div>
313
+ <div class="overflow-x-auto">
314
+ <table class="min-w-full divide-y divide-gray-200">
315
+ <thead class="bg-gray-50">
316
+ <tr>
317
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projet</th>
318
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IA Assignée</th>
319
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
320
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progression</th>
321
+ </tr>
322
+ </thead>
323
+ <tbody class="bg-white divide-y divide-gray-200" id="projects-table">
324
+ <!-- Projects will be loaded here -->
325
+ </tbody>
326
+ </table>
327
  </div>
328
+ </div>
329
+
330
+ <!-- AI Activity -->
331
+ <div class="bg-white rounded-lg shadow">
332
+ <div class="p-6 border-b border-gray-200">
333
+ <h3 class="font-semibold text-lg">Activité des IA</h3>
 
 
334
  </div>
335
+ <div class="p-6">
336
+ <div class="space-y-4" id="ai-activity">
337
+ <!-- AI activity will be loaded here -->
 
338
  </div>
339
+
340
+ <div class="mt-6 pt-4 border-t border-gray-200">
341
+ <h4 class="font-medium mb-2">Prochaine Maintenance</h4>
342
+ <div class="flex items-center text-sm text-gray-600">
343
+ <i class="fas fa-calendar-alt mr-2"></i>
344
+ <span id="next-maintenance">15 Mars 2023 à 02:00</span>
345
+ </div>
346
  </div>
347
  </div>
348
  </div>
349
  </div>
350
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
351
  </div>
352
  </section>
353
 
354
+ <!-- Payments Section -->
355
+ <section id="paiements" class="py-20 bg-white">
356
  <div class="container mx-auto px-6">
357
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Intégration des Paiements</h2>
358
 
359
+ <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-md overflow-hidden">
360
+ <div class="dashboard-gradient text-white p-6">
361
+ <h3 class="text-xl font-semibold">Configuration des Paiements Automatiques</h3>
362
+ <p class="opacity-90 mt-2">Connectez vos comptes Stripe et PayPal pour recevoir des paiements automatiquement</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
363
  </div>
364
 
365
+ <div class="p-6">
366
+ <div class="grid md:grid-cols-2 gap-6 mb-8">
367
+ <!-- Stripe -->
368
+ <div class="payment-method bg-white rounded-lg shadow p-6 border-2 border-transparent active" id="stripe-method">
369
+ <div class="flex items-center mb-4">
370
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
371
+ <i class="fab fa-stripe text-2xl text-purple-600"></i>
372
+ </div>
373
+ <h4 class="text-lg font-semibold">Stripe</h4>
374
+ </div>
375
+ <p class="text-gray-600 mb-4">Acceptez les paiements par carte de crédit et virements bancaires.</p>
376
+ <div class="space-y-4">
377
+ <div>
378
+ <label class="block text-sm font-medium text-gray-700 mb-1">Clé API Publique</label>
379
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="pk_test_51K..." value="pk_test_51K..." id="stripe-public-key">
380
+ </div>
381
+ <div>
382
+ <label class="block text-sm font-medium text-gray-700 mb-1">Clé API Secrète</label>
383
+ <div class="relative">
384
+ <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="sk_test_51K..." value="sk_test_51K..." id="stripe-secret-key">
385
+ <button class="absolute right-3 top-2 text-gray-500 hover:text-gray-700" id="toggle-stripe-key">
386
+ <i class="fas fa-eye"></i>
387
+ </button>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+
393
+ <!-- PayPal -->
394
+ <div class="payment-method bg-white rounded-lg shadow p-6 border-2 border-transparent" id="paypal-method">
395
+ <div class="flex items-center mb-4">
396
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
397
+ <i class="fab fa-paypal text-2xl text-blue-600"></i>
398
+ </div>
399
+ <h4 class="text-lg font-semibold">PayPal</h4>
400
+ </div>
401
+ <p class="text-gray-600 mb-4">Acceptez les paiements PayPal et cartes de crédit.</p>
402
+ <div class="space-y-4">
403
+ <div>
404
+ <label class="block text-sm font-medium text-gray-700 mb-1">Client ID</label>
405
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="AeA..." value="AeA..." id="paypal-client-id">
406
+ </div>
407
+ <div>
408
+ <label class="block text-sm font-medium text-gray-700 mb-1">Clé Secrète</label>
409
+ <div class="relative">
410
+ <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="EC..." value="EC..." id="paypal-secret-key">
411
+ <button class="absolute right-3 top-2 text-gray-500 hover:text-gray-700" id="toggle-paypal-key">
412
+ <i class="fas fa-eye"></i>
413
+ </button>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
 
 
418
  </div>
419
+
420
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
421
+ <h4 class="font-semibold text-lg mb-4">Statut des Paiements</h4>
422
+ <div class="grid md:grid-cols-2 gap-6">
423
+ <div>
424
+ <div class="flex justify-between mb-2">
425
+ <span class="text-gray-600">Paiements ce mois:</span>
426
+ <span class="font-semibold" id="monthly-payments">$5,420</span>
427
+ </div>
428
+ <div class="flex justify-between mb-2">
429
+ <span class="text-gray-600">Paiements en attente:</span>
430
+ <span class="font-semibold" id="pending-payments">$1,250</span>
431
+ </div>
432
+ <div class="flex justify-between">
433
+ <span class="text-gray-600">Prochain paiement:</span>
434
+ <span class="font-semibold" id="next-payment">15 Mars 2023</span>
435
+ </div>
436
+ </div>
437
+ <div>
438
+ <div class="flex justify-between mb-2">
439
+ <span class="text-gray-600">Stripe:</span>
440
+ <span class="font-semibold" id="stripe-payments">$3,780</span>
441
+ </div>
442
+ <div class="flex justify-between">
443
+ <span class="text-gray-600">PayPal:</span>
444
+ <span class="font-semibold" id="paypal-payments">$1,640</span>
445
+ </div>
446
+ </div>
447
+ </div>
448
  </div>
449
+
450
+ <button id="update-payments" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-semibold hover:bg-indigo-700 transition duration-300 flex items-center justify-center">
451
+ <i class="fas fa-save mr-2"></i> Mettre à jour les paramètres de paiement
452
+ </button>
453
  </div>
454
  </div>
 
 
 
 
 
 
455
  </div>
456
  </section>
457
 
458
  <!-- Contact Section -->
459
  <section id="contact" class="py-20 bg-gray-50">
460
  <div class="container mx-auto px-6">
461
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Nouveau Projet</h2>
462
 
463
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
464
+ <div class="dashboard-gradient text-white p-6">
465
+ <h3 class="text-xl font-semibold">Demande de Service Automatisée</h3>
466
+ <p class="opacity-90 mt-2">Notre système IA analysera votre demande et assignera automatiquement la meilleure IA pour votre projet</p>
467
+ </div>
468
+
469
+ <div class="p-6">
470
+ <form id="project-form" class="space-y-6">
471
+ <div class="grid md:grid-cols-2 gap-6">
472
+ <div>
473
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nom complet <span class="text-red-500">*</span></label>
474
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Votre nom" required>
 
475
  </div>
476
+
477
  <div>
478
+ <label for="email" class="block text-gray-700 font-medium mb-2">Adresse email <span class="text-red-500">*</span></label>
479
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="votre@email.com" required>
480
  </div>
481
  </div>
482
 
483
+ <div>
484
+ <label for="project-type" class="block text-gray-700 font-medium mb-2">Type de projet <span class="text-red-500">*</span></label>
485
+ <select id="project-type" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" required>
486
+ <option value="">Sélectionnez un type</option>
487
+ <option value="web-dev">Développement Web</option>
488
+ <option value="mobile-app">Application Mobile</option>
489
+ <option value="ui-ux">Design UI/UX</option>
490
+ <option value="marketing">Marketing Digital</option>
491
+ <option value="content">Rédaction SEO</option>
492
+ <option value="data">Analyse de Données</option>
493
+ <option value="other">Autre</option>
494
+ </select>
495
+ </div>
496
+
497
+ <div>
498
+ <label for="project-details" class="block text-gray-700 font-medium mb-2">Détails du projet <span class="text-red-500">*</span></label>
499
+ <textarea id="project-details" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Décrivez votre projet en détail..." required></textarea>
500
+ </div>
501
+
502
+ <div class="grid md:grid-cols-2 gap-6">
503
+ <div>
504
+ <label for="budget" class="block text-gray-700 font-medium mb-2">Budget estimé (optionnel)</label>
505
+ <select id="budget" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
506
+ <option value="">Sélectionnez une fourchette</option>
507
+ <option value="500-1000">$500 - $1,000</option>
508
+ <option value="1000-3000">$1,000 - $3,000</option>
509
+ <option value="3000-5000">$3,000 - $5,000</option>
510
+ <option value="5000+">$5,000+</option>
511
+ </select>
512
  </div>
513
+
514
  <div>
515
+ <label for="timeline" class="block text-gray-700 font-medium mb-2">Délai souhaité (optionnel)</label>
516
+ <select id="timeline" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
517
+ <option value="">Sélectionnez un délai</option>
518
+ <option value="1-2">1-2 semaines</option>
519
+ <option value="2-4">2-4 semaines</option>
520
+ <option value="1-2m">1-2 mois</option>
521
+ <option value="3m+">3 mois+</option>
522
+ </select>
523
  </div>
524
  </div>
525
 
526
+ <div id="ai-suggestion" class="hidden bg-indigo-50 rounded-lg p-4 border border-indigo-100">
527
+ <div class="flex items-start">
528
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
529
+ <i class="fas fa-robot text-indigo-600"></i>
530
+ </div>
531
+ <div>
532
+ <h4 class="font-semibold text-indigo-800">Suggestion d'IA</h4>
533
+ <p class="text-sm text-indigo-600">Notre système recommande d'assigner <span id="suggested-ai" class="font-bold">IA Développement Web</span> pour ce projet.</p>
534
+ </div>
535
  </div>
536
  </div>
537
+
538
+ <div class="pt-4 border-t border-gray-200">
539
+ <button type="submit" id="submit-project" class="w-full bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition duration-300 flex items-center justify-center">
540
+ <i class="fas fa-paper-plane mr-2"></i> Soumettre la demande
541
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
542
  </div>
543
+ </form>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </section>
548
+
549
+ <!-- Admin Panel Section -->
550
+ <section id="admin" class="py-20 bg-white">
551
+ <div class="container mx-auto px-6">
552
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Panneau d'Administration</h2>
553
+
554
+ <div class="bg-gray-50 rounded-xl shadow-xl overflow-hidden">
555
+ <div class="dashboard-gradient text-white p-6">
556
+ <h3 class="text-xl font-semibold">Configuration Automatique</h3>
557
+ <p class="opacity-90 mt-2">Gérez votre armée d'IA et automatisations depuis ce panneau</p>
558
  </div>
559
 
560
+ <div class="grid md:grid-cols-3 gap-6 p-6">
561
+ <!-- AI Configuration -->
562
+ <div class="md:col-span-2 bg-white rounded-lg shadow">
563
+ <div class="p-6 border-b border-gray-200">
564
+ <h3 class="font-semibold text-lg">Configuration des IA</h3>
565
  </div>
566
+ <div class="p-6">
567
+ <div class="space-y-6">
568
+ <!-- AI Auto-Assignment -->
569
+ <div class="flex items-start">
570
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
571
+ <i class="fas fa-cogs text-indigo-600"></i>
572
+ </div>
573
+ <div class="flex-1">
574
+ <h4 class="font-medium mb-2">Assignation Automatique</h4>
575
+ <div class="mb-2">
576
+ <label class="block text-sm text-gray-600 mb-1">Mode d'assignation:</label>
577
+ <select id="assignment-mode" class="border border-gray-300 rounded px-3 py-2 text-sm w-full focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
578
+ <option>Automatique (recommandé)</option>
579
+ <option>Manuel</option>
580
+ <option>Hybride</option>
581
+ </select>
582
+ </div>
583
+ <div class="flex items-center">
584
+ <input type="checkbox" id="auto-assign" class="mr-2 h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
585
+ <label for="auto-assign" class="text-sm">Activer l'assignation intelligente</label>
586
+ </div>
587
+ </div>
588
+ </div>
589
+
590
+ <!-- AI Scaling -->
591
+ <div class="flex items-start">
592
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
593
+ <i class="fas fa-expand text-blue-600"></i>
594
+ </div>
595
+ <div class="flex-1">
596
+ <h4 class="font-medium mb-2">Mise à l'échelle automatique</h4>
597
+ <div class="mb-2">
598
+ <label class="block text-sm text-gray-600 mb-1">Niveau d'IA actives:</label>
599
+ <div class="flex items-center">
600
+ <input type="range" min="10" max="50" value="42" class="w-full mr-4 focus:outline-none focus:ring-2 focus:ring-indigo-500" id="ai-scale-slider">
601
+ <span class="text-sm font-medium" id="ai-scale-value">42 IA</span>
602
+ </div>
603
+ </div>
604
+ <div class="flex items-center">
605
+ <input type="checkbox" id="auto-scale" class="mr-2 h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
606
+ <label for="auto-scale" class="text-sm">Ajustement automatique selon la charge</label>
607
+ </div>
608
+ </div>
609
+ </div>
610
+
611
+ <!-- AI Notifications -->
612
+ <div class="flex items-start">
613
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
614
+ <i class="fas fa-bell text-green-600"></i>
615
+ </div>
616
+ <div class="flex-1">
617
+ <h4 class="font-medium mb-2">Notifications</h4>
618
+ <div class="mb-2">
619
+ <label class="block text-sm text-gray-600 mb-1">Fréquence des rapports:</label>
620
+ <select id="report-frequency" class="border border-gray-300 rounded px-3 py-2 text-sm w-full focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
621
+ <option>Quotidien</option>
622
+ <option selected>Hebdomadaire</option>
623
+ <option>Mensuel</option>
624
+ </select>
625
+ </div>
626
+ <div class="flex items-center">
627
+ <input type="checkbox" id="email-notifications" class="mr-2 h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
628
+ <label for="email-notifications" class="text-sm">Notifications par email</label>
629
+ </div>
630
+ </div>
631
+ </div>
632
+ </div>
633
+
634
+ <div class="mt-8 pt-6 border-t border-gray-200">
635
+ <button id="save-settings" class="bg-indigo-600 text-white px-6 py-2 rounded-md hover:bg-indigo-700 transition flex items-center">
636
+ <i class="fas fa-save mr-2"></i> Enregistrer les modifications
637
+ </button>
638
+ </div>
639
  </div>
640
+ </div>
641
+
642
+ <!-- System Status -->
643
+ <div class="bg-white rounded-lg shadow">
644
+ <div class="p-6 border-b border-gray-200">
645
+ <h3 class="font-semibold text-lg">Statut du Système</h3>
646
  </div>
647
+ <div class="p-6">
648
+ <div class="mb-6">
649
+ <h4 class="font-medium mb-3">Performance des IA</h4>
650
+ <div class="h-40 bg-gray-100 rounded flex items-center justify-center">
651
+ <canvas id="performance-chart" width="100%" height="100%"></canvas>
652
+ </div>
653
+ </div>
654
+
655
+ <div class="space-y-4">
656
+ <div>
657
+ <div class="flex justify-between text-sm mb-1">
658
+ <span>IA Disponibles</span>
659
+ <span id="available-ai-count">42/50</span>
660
+ </div>
661
+ <div class="w-full bg-gray-200 rounded-full h-2">
662
+ <div class="bg-green-600 h-2 rounded-full progress-bar" style="width: 84%" id="available-ai-bar"></div>
663
+ </div>
664
+ </div>
665
+
666
+ <div>
667
+ <div class="flex justify-between text-sm mb-1">
668
+ <span>Charge CPU Moyenne</span>
669
+ <span id="cpu-load">62%</span>
670
+ </div>
671
+ <div class="w-full bg-gray-200 rounded-full h-2">
672
+ <div class="bg-yellow-500 h-2 rounded-full progress-bar" style="width: 62%" id="cpu-load-bar"></div>
673
+ </div>
674
+ </div>
675
+
676
+ <div>
677
+ <div class="flex justify-between text-sm mb-1">
678
+ <span>Mémoire Utilisée</span>
679
+ <span id="memory-usage">45%</span>
680
+ </div>
681
+ <div class="w-full bg-gray-200 rounded-full h-2">
682
+ <div class="bg-blue-500 h-2 rounded-full progress-bar" style="width: 45%" id="memory-usage-bar"></div>
683
+ </div>
684
+ </div>
685
+ </div>
686
+
687
+ <div class="mt-6 pt-4 border-t border-gray-200">
688
+ <h4 class="font-medium mb-2">Prochaine Maintenance</h4>
689
+ <div class="flex items-center text-sm text-gray-600">
690
+ <i class="fas fa-calendar-alt mr-2"></i>
691
+ <span id="admin-maintenance">15 Mars 2023 à 02:00</span>
692
+ </div>
693
+ <div class="flex items-center text-sm text-gray-600 mt-1">
694
+ <i class="fas fa-clock mr-2"></i>
695
+ <span>Durée estimée: <span id="maintenance-duration">30 minutes</span></span>
696
+ </div>
697
+ </div>
698
  </div>
699
+ </div>
 
 
 
 
700
  </div>
701
  </div>
702
  </div>
 
707
  <div class="container mx-auto px-6">
708
  <div class="flex flex-col md:flex-row justify-between items-center">
709
  <div class="mb-6 md:mb-0">
710
+ <div class="text-2xl font-bold text-white mb-2 flex items-center">
711
+ <i class="fas fa-robot mr-2"></i> AI Army
712
+ </div>
713
+ <p class="text-gray-400">Solutions IA automatisées pour vos projets.</p>
714
  </div>
715
 
716
  <div class="flex space-x-6">
 
723
  <a href="#" class="text-gray-400 hover:text-white transition duration-300">
724
  <i class="fab fa-twitter text-xl"></i>
725
  </a>
 
 
 
726
  </div>
727
  </div>
728
 
729
  <div class="border-t border-gray-700 mt-10 pt-10 flex flex-col md:flex-row justify-between items-center">
730
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 AI Army. Tous droits réservés.</p>
731
 
732
  <div class="flex space-x-6">
733
  <a href="#" class="text-gray-400 hover:text-white transition duration-300">Mentions légales</a>
734
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Confidentialité</a>
735
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Conditions</a>
736
  </div>
737
  </div>
738
  </div>
739
  </footer>
740
 
741
+ <!-- Chart.js for performance chart -->
742
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
743
+
744
  <script>
745
+ // Mobile menu toggle
746
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
747
+ document.getElementById('mobile-menu').classList.toggle('hidden');
748
+ });
749
+
750
+ // Smooth scrolling for anchor links
751
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
752
+ anchor.addEventListener('click', function(e) {
753
+ e.preventDefault();
754
+
755
+ const targetId = this.getAttribute('href');
756
+ const targetElement = document.querySelector(targetId);
757
+
758
+ if (targetElement) {
759
+ window.scrollTo({
760
+ top: targetElement.offsetTop - 80,
761
+ behavior: 'smooth'
762
+ });
763
+
764
+ // Close mobile menu if open
765
+ if (!document.getElementById('mobile-menu').classList.contains('hidden')) {
766
+ document.getElementById('mobile-menu').classList.add('hidden');
767
  }
768
+ }
 
 
 
 
769
  });
770
+ });
771
+
772
+ // Payment method selection
773
+ const paymentMethods = document.querySelectorAll('.payment-method');
774
+ paymentMethods.forEach(method => {
775
+ method.addEventListener('click', function() {
776
+ paymentMethods.forEach(m => m.classList.remove('active'));
777
+ this.classList.add('active');
778
+ });
779
+ });
780
+
781
+ // Toggle payment key visibility
782
+ document.getElementById('toggle-stripe-key').addEventListener('click', function() {
783
+ const input = document.getElementById('stripe-secret-key');
784
+ if (input.type === 'password') {
785
+ input.type = 'text';
786
+ this.innerHTML = '<i class="fas fa-eye-slash"></i>';
787
+ } else {
788
+ input.type = 'password';
789
+ this.innerHTML = '<i class="fas fa-eye"></i>';
790
+ }
791
+ });
792
+
793
+ document.getElementById('toggle-paypal-key').addEventListener('click', function() {
794
+ const input = document.getElementById('paypal-secret-key');
795
+ if (input.type === 'password') {
796
+ input.type = 'text';
797
+ this.innerHTML = '<i class="fas fa-eye-slash"></i>';
798
+ } else {
799
+ input.type = 'password';
800
+ this.innerHTML = '<i class="fas fa-eye"></i>';
801
+ }
802
+ });
803
+
804
+ // AI data
805
+ const aiData = [
806
+ {
807
+ id: 1,
808
+ name: "IA Développement Web",
809
+ description: "Spécialiste React, Vue, Node.js",
810
+ speed: 95,
811
+ icon: "fa-code",
812
+ status: "ready",
813
+ type: "web-dev"
814
+ },
815
+ {
816
+ id: 2,
817
+ name: "IA Design UI/UX",
818
+ description: "Expert Figma, Adobe XD, Sketch",
819
+ speed: 90,
820
+ icon: "fa-paint-brush",
821
+ status: "ready",
822
+ type: "ui-ux"
823
+ },
824
+ {
825
+ id: 3,
826
+ name: "IA Marketing Digital",
827
+ description: "SEO, Publicités, Analytics",
828
+ speed: 85,
829
+ icon: "fa-bullhorn",
830
+ status: "busy",
831
+ type: "marketing",
832
+ availableIn: 2
833
+ },
834
+ {
835
+ id: 4,
836
+ name: "IA Rédaction SEO",
837
+ description: "Contenu optimisé, articles, traductions",
838
+ speed: 92,
839
+ icon: "fa-pen-fancy",
840
+ status: "ready",
841
+ type: "content"
842
+ },
843
+ {
844
+ id: 5,
845
+ name: "IA Analyse de Données",
846
+ description: "Python, SQL, Machine Learning",
847
+ speed: 88,
848
+ icon: "fa-chart-line",
849
+ status: "ready",
850
+ type: "data"
851
+ },
852
+ {
853
+ id: 6,
854
+ name: "IA Support Client",
855
+ description: "Chatbots, FAQ, Assistance 24/7",
856
+ speed: 98,
857
+ icon: "fa-headset",
858
+ status: "ready",
859
+ type: "support"
860
+ },
861
+ {
862
+ id: 7,
863
+ name: "IA Traduction",
864
+ description: "Traduction en 50+ langues",
865
+ speed: 95,
866
+ icon: "fa-language",
867
+ status: "ready",
868
+ type: "translation"
869
+ },
870
+ {
871
+ id: 8,
872
+ name: "IA Analyse d'Images",
873
+ description: "Reconnaissance d'objets, traitement",
874
+ speed: 90,
875
+ icon: "fa-image",
876
+ status: "busy",
877
+ type: "image",
878
+ availableIn: 1
879
+ },
880
+ {
881
+ id: 9,
882
+ name: "IA Analyse Vidéo",
883
+ description: "Analyse de contenu vidéo",
884
+ speed: 85,
885
+ icon: "fa-video",
886
+ status: "ready",
887
+ type: "video"
888
+ },
889
+ {
890
+ id: 10,
891
+ name: "IA Analyse Audio",
892
+ description: "Reconnaissance vocale, transcription",
893
+ speed: 92,
894
+ icon: "fa-microphone",
895
+ status: "ready",
896
+ type: "audio"
897
+ }
898
+ ];
899
+
900
+ // Projects data
901
+ const projectsData = [
902
+ {
903
+ name: "Site E-commerce",
904
+ client: "ABC Company",
905
+ ai: "web-dev",
906
+ status: "En cours",
907
+ progress: 75,
908
+ statusClass: "bg-green-100 text-green-800"
909
+ },
910
+ {
911
+ name: "Application Mobile",
912
+ client: "XYZ Startup",
913
+ ai: "ui-ux",
914
+ status: "En attente",
915
+ progress: 30,
916
+ statusClass: "bg-yellow-100 text-yellow-800"
917
+ },
918
+ {
919
+ name: "Campagne Marketing",
920
+ client: "Marketing Pro",
921
+ ai: "marketing",
922
+ status: "En révision",
923
+ progress: 90,
924
+ statusClass: "bg-blue-100 text-blue-800"
925
+ },
926
+ {
927
+ name: "Blog d'entreprise",
928
+ client: "Content Creators",
929
+ ai: "content",
930
+ status: "Terminé",
931
+ progress: 100,
932
+ statusClass: "bg-purple-100 text-purple-800"
933
+ },
934
+ {
935
+ name: "Analyse de données",
936
+ client: "Data Insights",
937
+ ai: "data",
938
+ status: "En cours",
939
+ progress: 60,
940
+ statusClass: "bg-green-100 text-green-800"
941
+ }
942
+ ];
943
+
944
+ // AI Activity data
945
+ const aiActivityData = [
946
+ { name: "IA Développement", projects: 8, progress: 75, color: "bg-indigo-600" },
947
+ { name: "IA Design", projects: 5, progress: 60, color: "bg-blue-600" },
948
+ { name: "IA Marketing", projects: 3, progress: 90, color: "bg-green-600" },
949
+ { name: "IA Rédaction", projects: 2, progress: 40, color: "bg-purple-600" }
950
+ ];
951
+
952
+ // Load AI cards
953
+ function loadAICards(start = 0, count = 6) {
954
+ const container = document.getElementById('ai-container');
955
+ const availableAI = aiData.filter(ai => ai.status === "ready").length;
956
+ const busyAI = aiData.filter(ai => ai.status === "busy").length;
957
+
958
+ document.getElementById('available-count').textContent = `${availableAI} IA disponibles`;
959
+ document.getElementById('busy-count').textContent = `${busyAI} IA occupées`;
960
 
961
+ const end = Math.min(start + count, aiData.length);
962
+ const loadedAI = aiData.slice(start, end);
 
963
 
964
+ loadedAI.forEach(ai => {
965
+ const aiCard = document.createElement('div');
966
+ aiCard.className = `ai-status-${ai.status} rounded-xl p-6 text-white shadow-lg ai-card`;
967
+
968
+ let buttonHtml = '';
969
+ if (ai.status === "ready") {
970
+ buttonHtml = `
971
+ <button class="w-full bg-white text-indigo-600 py-2 rounded-lg font-semibold hover:bg-gray-100 transition assign-ai-btn" data-ai="${ai.type}">
972
+ <i class="fas fa-plus-circle mr-1"></i> Assigner ce projet
973
+ </button>
974
+ `;
975
+ } else {
976
+ buttonHtml = `
977
+ <button class="w-full bg-gray-300 text-gray-600 py-2 rounded-lg font-semibold cursor-not-allowed" disabled>
978
+ <i class="fas fa-clock mr-1"></i> Disponible dans ${ai.availableIn}h
979
+ </button>
980
+ `;
981
+ }
982
+
983
+ aiCard.innerHTML = `
984
+ <div class="flex items-start justify-between">
985
+ <div>
986
+ <h3 class="text-xl font-bold mb-1">${ai.name}</h3>
987
+ <p class="text-indigo-100 mb-4">${ai.description}</p>
988
+ <div class="flex items-center text-sm">
989
+ <i class="fas fa-bolt mr-2"></i>
990
+ <span>Vitesse: ${ai.speed}%</span>
991
+ </div>
992
+ </div>
993
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
994
+ <i class="fas ${ai.icon} text-xl"></i>
995
+ </div>
996
+ </div>
997
+ <div class="mt-6 pt-4 border-t border-white border-opacity-20">
998
+ ${buttonHtml}
999
+ </div>
1000
+ `;
1001
+
1002
+ container.appendChild(aiCard);
1003
  });
1004
 
1005
+ // Update load more button
1006
+ if (end >= aiData.length) {
1007
+ document.getElementById('load-more-ai').classList.add('hidden');
1008
+ } else {
1009
+ document.getElementById('load-more-ai').classList.remove('hidden');
1010
+ document.getElementById('load-more-ai').textContent = `Charger plus d'IA (${aiData.length - end} restantes)`;
1011
+ }
1012
+
1013
+ // Add event listeners to new buttons
1014
+ document.querySelectorAll('.assign-ai-btn').forEach(btn => {
1015
+ btn.addEventListener('click', function() {
1016
+ const aiType = this.getAttribute('data-ai');
1017
+ const aiName = aiData.find(ai => ai.type === aiType).name;
1018
 
1019
+ // Show modal or redirect to project form with AI preselected
1020
+ document.getElementById('project-type').value = aiType;
1021
+ document.getElementById('ai-suggestion').classList.remove('hidden');
1022
+ document.getElementById('suggested-ai').textContent = aiName;
1023
 
1024
+ // Scroll to project form
1025
+ document.getElementById('contact').scrollIntoView({ behavior: 'smooth' });
1026
+ });
1027
+ });
1028
+ }
1029
+
1030
+ // Load projects table
1031
+ function loadProjectsTable() {
1032
+ const container = document.getElementById('projects-table');
1033
+
1034
+ projectsData.forEach(project => {
1035
+ const row = document.createElement('tr');
1036
+
1037
+ let aiIcon = '';
1038
+ let aiName = '';
1039
+
1040
+ switch(project.ai) {
1041
+ case 'web-dev':
1042
+ aiIcon = 'fa-code';
1043
+ aiName = 'IA Développement';
1044
+ break;
1045
+ case 'ui-ux':
1046
+ aiIcon = 'fa-paint-brush';
1047
+ aiName = 'IA Design';
1048
+ break;
1049
+ case 'marketing':
1050
+ aiIcon = 'fa-bullhorn';
1051
+ aiName = 'IA Marketing';
1052
+ break;
1053
+ case 'content':
1054
+ aiIcon = 'fa-pen-fancy';
1055
+ aiName = 'IA Rédaction';
1056
+ break;
1057
+ case 'data':
1058
+ aiIcon = 'fa-chart-line';
1059
+ aiName = 'IA Analyse';
1060
+ break;
1061
+ }
1062
+
1063
+ row.innerHTML = `
1064
+ <td class="px-6 py-4 whitespace-nowrap">
1065
+ <div class="font-medium">${project.name}</div>
1066
+ <div class="text-sm text-gray-500">Client: ${project.client}</div>
1067
+ </td>
1068
+ <td class="px-6 py-4 whitespace-nowrap">
1069
+ <div class="flex items-center">
1070
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
1071
+ <i class="fas ${aiIcon} text-xs text-indigo-600"></i>
1072
+ </div>
1073
+ <span>${aiName}</span>
1074
+ </div>
1075
+ </td>
1076
+ <td class="px-6 py-4 whitespace-nowrap">
1077
+ <span class="px-2 py-1 text-xs rounded-full ${project.statusClass}">${project.status}</span>
1078
+ </td>
1079
+ <td class="px-6 py-4 whitespace-nowrap">
1080
+ <div class="w-full bg-gray-200 rounded-full h-2">
1081
+ <div class="progress-bar h-2 rounded-full ${project.statusClass.replace('text-', 'bg-').replace('100', '500')}" style="width: ${project.progress}%"></div>
1082
+ </div>
1083
+ <span class="text-xs text-gray-500 mt-1">${project.progress}% complété</span>
1084
+ </td>
1085
+ `;
1086
+
1087
+ container.appendChild(row);
1088
+ });
1089
+ }
1090
+
1091
+ // Load AI activity
1092
+ function loadAIActivity() {
1093
+ const container = document.getElementById('ai-activity');
1094
+
1095
+ aiActivityData.forEach(activity => {
1096
+ const item = document.createElement('div');
1097
+
1098
+ item.innerHTML = `
1099
+ <div>
1100
+ <div class="flex justify-between text-sm mb-1">
1101
+ <span>${activity.name}</span>
1102
+ <span>${activity.projects} projets</span>
1103
+ </div>
1104
+ <div class="w-full bg-gray-200 rounded-full h-2">
1105
+ <div class="progress-bar h-2 rounded-full ${activity.color}" style="width: ${activity.progress}%"></div>
1106
+ </div>
1107
+ </div>
1108
+ `;
1109
+
1110
+ container.appendChild(item);
1111
+ });
1112
+ }
1113
+
1114
+ // Project type change handler
1115
+ document.getElementById('project-type').addEventListener('change', function() {
1116
+ const aiSuggestion = document.getElementById('ai-suggestion');
1117
+ const suggestedAi = document.getElementById('suggested-ai');
1118
+
1119
+ if (this.value) {
1120
+ let aiName = '';
1121
+ switch(this.value) {
1122
+ case 'web-dev': aiName = 'IA Développement Web'; break;
1123
+ case 'mobile-app': aiName = 'IA Application Mobile'; break;
1124
+ case 'ui-ux': aiName = 'IA Design UI/UX'; break;
1125
+ case 'marketing': aiName = 'IA Marketing Digital'; break;
1126
+ case 'content': aiName = 'IA Rédaction SEO'; break;
1127
+ case 'data': aiName = 'IA Analyse de Données'; break;
1128
+ default: aiName = 'IA Polyvalente';
1129
+ }
1130
+
1131
+ suggestedAi.textContent = aiName;
1132
+ aiSuggestion.classList.remove('hidden');
1133
+ } else {
1134
+ aiSuggestion.classList.add('hidden');
1135
+ }
1136
+ });
1137
+
1138
+ // Load more AI button
1139
+ document.getElementById('load-more-ai').addEventListener('click', function() {
1140
+ const currentCount = document.getElementById('ai-container').children.length;
1141
+ loadAICards(currentCount, 4);
1142
+ });
1143
+
1144
+ // Project form submission
1145
+ document.getElementById('project-form').addEventListener('submit', function(e) {
1146
+ e.preventDefault();
1147
+
1148
+ const submitButton = document.getElementById('submit-project');
1149
+ const originalText = submitButton.innerHTML;
1150
+
1151
+ // Show processing state
1152
+ submitButton.disabled = true;
1153
+ submitButton.innerHTML = '<i class="fas fa-cog fa-spin mr-2"></i> Analyse en cours par notre IA...';
1154
+
1155
+ // Simulate AI processing delay
1156
+ setTimeout(() => {
1157
+ submitButton.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Demande envoyée';
1158
+
1159
+ // Show success message
1160
+ const successMessage = document.createElement('div');
1161
+ successMessage.className = 'mt-4 p-4 bg-green-100 text-green-700 rounded-lg';
1162
+ successMessage.innerHTML = `
1163
+ <div class="flex items-start">
1164
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
1165
+ <i class="fas fa-check text-green-600"></i>
1166
+ </div>
1167
+ <div>
1168
+ <h4 class="font-semibold text-green-800">Demande reçue</h4>
1169
+ <p class="text-sm text-green-600">Notre IA a analysé votre demande et a assigné la meilleure IA pour votre projet. Vous recevrez une proposition détaillée sous 24 heures.</p>
1170
+ </div>
1171
+ </div>
1172
+ `;
1173
+ this.appendChild(successMessage);
1174
+
1175
+ // Update projects count
1176
+ const activeProjects = parseInt(document.getElementById('active-projects').textContent) + 1;
1177
+ document.getElementById('active-projects').textContent = activeProjects;
1178
+
1179
+ // Reset form after delay
1180
+ setTimeout(() => {
1181
+ this.reset();
1182
+ document.getElementById('ai-suggestion').classList.add('hidden');
1183
+ submitButton.disabled = false;
1184
+ submitButton.innerHTML = originalText;
1185
+ successMessage.remove();
1186
+ }, 5000);
1187
+ }, 3000);
1188
+ });
1189
+
1190
+ // Update payments settings
1191
+ document.getElementById('update-payments').addEventListener('click', function() {
1192
+ const button = this;
1193
+ const originalText = button.innerHTML;
1194
+
1195
+ button.disabled = true;
1196
+ button.innerHTML = '<i class="fas fa-cog fa-spin mr-2"></i> Mise à jour en cours...';
1197
+
1198
+ // Simulate API call
1199
+ setTimeout(() => {
1200
+ button.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Paramètres mis à jour';
1201
+
1202
+ setTimeout(() => {
1203
+ button.disabled = false;
1204
+ button.innerHTML = originalText;
1205
+ }, 2000);
1206
+ }, 1500);
1207
+ });
1208
+
1209
+ // AI scale slider
1210
+ document.getElementById('ai-scale-slider').addEventListener('input', function() {
1211
+ document.getElementById('ai-scale-value').textContent = `${this.value} IA`;
1212
+ });
1213
+
1214
+ // Save admin settings
1215
+ document.getElementById('save-settings').addEventListener('click', function() {
1216
+ const button = this;
1217
+ const originalText = button.innerHTML;
1218
+
1219
+ button.disabled = true;
1220
+ button.innerHTML = '<i class="fas fa-cog fa-spin mr-2"></i> Enregistrement...';
1221
+
1222
+ // Get values
1223
+ const assignmentMode = document.getElementById('assignment-mode').value;
1224
+ const autoAssign = document.getElementById('auto-assign').checked;
1225
+ const aiScale = document.getElementById('ai-scale-slider').value;
1226
+ const autoScale = document.getElementById('auto-scale').checked;
1227
+ const reportFrequency = document.getElementById('report-frequency').value;
1228
+ const emailNotifications = document.getElementById('email-notifications').checked;
1229
+
1230
+ // Simulate API call
1231
+ setTimeout(() => {
1232
+ button.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Enregistré!';
1233
+
1234
+ // Update system stats
1235
+ document.getElementById('available-ai-count').textContent = `${aiScale}/50`;
1236
+ document.getElementById('available-ai-bar').style.width = `${(aiScale/50)*100}%`;
1237
+
1238
+ setTimeout(() => {
1239
+ button.disabled = false;
1240
+ button.innerHTML = originalText;
1241
+ }, 2000);
1242
+ }, 1500);
1243
+ });
1244
+
1245
+ // Performance chart
1246
+ function initPerformanceChart() {
1247
+ const ctx = document.getElementById('performance-chart').getContext('2d');
1248
+ const chart = new Chart(ctx, {
1249
+ type: 'line',
1250
+ data: {
1251
+ labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Déc'],
1252
+ datasets: [{
1253
+ label: 'Performance IA (%)',
1254
+ data: [65, 59, 80, 81, 76, 75, 80, 82, 85, 87, 88, 90],
1255
+ backgroundColor: 'rgba(79, 70, 229, 0.2)',
1256
+ borderColor: 'rgba(79, 70, 229, 1)',
1257
+ borderWidth: 2,
1258
+ tension: 0.4,
1259
+ fill: true
1260
+ }]
1261
+ },
1262
+ options: {
1263
+ responsive: true,
1264
+ maintainAspectRatio: false,
1265
+ plugins: {
1266
+ legend: {
1267
+ display: false
1268
+ }
1269
+ },
1270
+ scales: {
1271
+ y: {
1272
+ beginAtZero: true,
1273
+ max: 100
1274
  }
1275
  }
1276
+ }
1277
  });
1278
+ }
1279
+
1280
+ // Initialize everything when DOM is loaded
1281
+ document.addEventListener('DOMContentLoaded', function() {
1282
+ // Load initial data
1283
+ loadAICards();
1284
+ loadProjectsTable();
1285
+ loadAIActivity();
1286
+
1287
+ // Initialize chart
1288
+ initPerformanceChart();
1289
+
1290
+ // Set current year in footer
1291
+ document.querySelector('footer p').textContent = `© ${new Date().getFullYear()} AI Army. Tous droits réservés.`;
1292
+
1293
+ // Simulate system stats updates
1294
+ setInterval(() => {
1295
+ // Randomly update CPU and memory usage
1296
+ const cpuLoad = Math.min(100, Math.max(30, Math.floor(Math.random() * 30) + 60));
1297
+ const memoryUsage = Math.min(100, Math.max(25, Math.floor(Math.random() * 30) + 40));
1298
+
1299
+ document.getElementById('cpu-load').textContent = `${cpuLoad}%`;
1300
+ document.getElementById('cpu-load-bar').style.width = `${cpuLoad}%`;
1301
+ document.getElementById('memory-usage').textContent = `${memoryUsage}%`;
1302
+ document.getElementById('memory-usage-bar').style.width = `${memoryUsage}%`;
1303
+ }, 5000);
1304
  });
1305
  </script>
1306
  <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/mon-portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -1 +1,5 @@
1
- corriger mon site : https://lovable.dev/projects/4e53d835-db92-40eb-a913-e19c70c3f3ed
 
 
 
 
 
1
+ corriger mon site : https://lovable.dev/projects/4e53d835-db92-40eb-a913-e19c70c3f3ed
2
+ je veux qu'on ajoute d'autres IA avec afin de les voir travailler pour des demande de client : je veux tableau de bord puissant et je veux le site en auto pilote automatique , je veux emplacement pour mes information stripe et paypal
3
+ reverifier toutes les boutons non cliquable qui ne fonctionne pas , je veux une armées d' IA pret a généré toute type de travail qui attend des demandes pour travailer pour eux
4
+ je veux que vous reconfigue toute le site complet pour que tout fonctionne parfaitement et faire une mise a jours
5
+ je veux que vous reconfigue toute le site complet pour que tout fonctionne parfaitement et faire une mise a jours