Hugging Face's logo

Spaces:
docto41
/
mm
Running

App Files Community
docto41 commited on
Commit
9f88c10
·
verified ·
1 Parent(s): 81dc042

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +250 -908
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Commandement IA Créative - Armée de 500K IA</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
@@ -19,8 +19,8 @@
19
 
20
  body {
21
  font-family: 'Roboto', sans-serif;
22
- background-color: var(--dark);
23
- color: var(--light);
24
  overflow-x: hidden;
25
  }
26
 
@@ -33,17 +33,23 @@
33
  }
34
 
35
  .card-glow {
36
- box-shadow: 0 0 20px rgba(110, 69, 226, 0.5);
37
  transition: all 0.3s ease;
38
  }
39
 
40
  .card-glow:hover {
41
- box-shadow: 0 0 30px rgba(110, 69, 226, 0.8);
42
  transform: translateY(-5px);
43
  }
44
 
45
- .neon-text {
46
- text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--primary), 0 0 20px var(--primary);
 
 
 
 
 
 
47
  }
48
 
49
  .dashboard-grid {
@@ -53,65 +59,60 @@
53
  }
54
 
55
  .sidebar {
56
- background: rgba(26, 26, 46, 0.9);
57
  backdrop-filter: blur(10px);
58
  border-right: 1px solid rgba(255, 255, 255, 0.1);
59
  }
60
 
61
  .main-content {
62
- background: linear-gradient(rgba(26, 26, 46, 0.7), rgba(26, 26, 46, 0.9)),
63
- url('https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');
64
- background-size: cover;
65
- background-position: center;
66
  }
67
 
68
- .progress-bar {
69
- height: 6px;
70
- border-radius: 3px;
71
- background: rgba(255, 255, 255, 0.1);
72
  }
73
 
74
- .progress-fill {
75
- height: 100%;
76
- border-radius: 3px;
77
- background: linear-gradient(90deg, var(--primary), var(--secondary));
78
- }
79
-
80
- @keyframes pulse {
81
- 0% { opacity: 0.6; }
82
- 50% { opacity: 1; }
83
- 100% { opacity: 0.6; }
84
  }
85
 
86
- .pulse {
87
- animation: pulse 2s infinite;
88
  }
89
 
90
- .terminal {
91
- background: rgba(0, 0, 0, 0.7);
92
- border: 1px solid rgba(255, 255, 255, 0.1);
93
- border-radius: 5px;
94
- font-family: 'Courier New', monospace;
95
- color: #00ff00;
96
- padding: 15px;
97
- height: 300px;
98
- overflow-y: auto;
99
  }
100
 
101
- .terminal-line {
102
- margin-bottom: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
103
  }
104
 
105
- .terminal-prompt {
106
- color: var(--secondary);
107
  }
108
 
109
- .terminal-command {
110
- color: var(--light);
 
111
  }
112
 
113
- .terminal-response {
114
- color: #cccccc;
 
115
  }
116
 
117
  .blink {
@@ -122,11 +123,6 @@
122
  from, to { opacity: 1; }
123
  50% { opacity: 0; }
124
  }
125
-
126
- button:disabled {
127
- opacity: 0.5;
128
- cursor: not-allowed;
129
- }
130
  </style>
131
  </head>
132
  <body>
@@ -137,39 +133,39 @@
137
  <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center mr-3">
138
  <i class="fas fa-robot text-white text-xl"></i>
139
  </div>
140
- <h1 class="orbitron text-xl font-bold text-white">IA COMMAND</h1>
141
  </div>
142
 
143
  <nav class="flex-1">
144
  <ul class="space-y-2">
145
  <li>
146
  <a href="#" class="flex items-center p-3 rounded-lg bg-indigo-900 text-white">
147
- <i class="fas fa-tachometer-alt mr-3"></i>
148
- Tableau de bord
149
  </a>
150
  </li>
151
  <li>
152
  <a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-800 text-gray-300 hover:text-white">
153
- <i class="fas fa-gamepad mr-3"></i>
154
- Jeux en production
155
  </a>
156
  </li>
157
  <li>
158
  <a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-800 text-gray-300 hover:text-white">
159
- <i class="fas fa-box-open mr-3"></i>
160
- Produits divers
161
  </a>
162
  </li>
163
  <li>
164
  <a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-800 text-gray-300 hover:text-white">
165
- <i class="fas fa-network-wired mr-3"></i>
166
- Réseau IA
167
  </a>
168
  </li>
169
  <li>
170
  <a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-800 text-gray-300 hover:text-white">
171
- <i class="fas fa-chart-line mr-3"></i>
172
- Analytics
173
  </a>
174
  </li>
175
  <li>
@@ -187,7 +183,8 @@
187
  <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
188
  <span class="text-sm text-white">Système actif</span>
189
  </div>
190
- <div class="text-xs text-gray-300">500,000 IA opérationnelles</div>
 
191
  </div>
192
  </div>
193
  </div>
@@ -195,903 +192,248 @@
195
  <!-- Main Content -->
196
  <div class="main-content p-8 overflow-y-auto">
197
  <header class="flex justify-between items-center mb-8">
198
- <h1 class="orbitron text-3xl font-bold text-white">Commandement Central IA</h1>
 
 
 
199
  <div class="flex items-center space-x-4">
200
  <div class="relative">
201
- <input type="text" placeholder="Rechercher..." class="bg-indigo-900 bg-opacity-50 border border-indigo-700 rounded-full py-2 px-4 text-white pl-10 focus:outline-none focus:ring-2 focus:ring-indigo-500">
202
- <i class="fas fa-search absolute left-3 top-3 text-indigo-400"></i>
203
  </div>
204
- <button id="notificationBtn" class="bg-indigo-700 hover:bg-indigo-600 text-white p-2 rounded-full">
205
  <i class="fas fa-bell"></i>
 
 
 
 
 
206
  </button>
207
- <div class="flex items-center">
208
- <div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center mr-2">
209
- <i class="fas fa-user text-white"></i>
210
- </div>
211
- <span class="text-white">Admin</span>
212
- </div>
213
  </div>
214
  </header>
215
 
216
- <!-- Stats Overview -->
217
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
218
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 card-glow">
219
- <div class="flex justify-between items-start">
220
- <div>
221
- <p class="text-gray-400">IA Actives</p>
222
- <h3 class="text-3xl font-bold text-white">500,000</h3>
223
- </div>
224
- <div class="p-3 rounded-full bg-indigo-900 text-indigo-300">
225
- <i class="fas fa-microchip text-xl"></i>
226
- </div>
227
- </div>
228
- <div class="mt-4">
229
- <div class="progress-bar">
230
- <div class="progress-fill" style="width: 100%"></div>
231
  </div>
232
- <p class="text-xs text-gray-400 mt-1">Capacité maximale atteinte</p>
233
  </div>
234
- </div>
235
-
236
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 card-glow">
237
- <div class="flex justify-between items-start">
238
- <div>
239
- <p class="text-gray-400">Jeux en production</p>
240
- <h3 class="text-3xl font-bold text-white">1,247</h3>
241
- </div>
242
- <div class="p-3 rounded-full bg-purple-900 text-purple-300">
243
- <i class="fas fa-gamepad text-xl"></i>
 
 
 
 
 
 
 
 
 
 
244
  </div>
245
- </div>
246
- <div class="mt-4">
247
- <div class="progress-bar">
248
- <div class="progress-fill" style="width: 78%"></div>
249
  </div>
250
- <p class="text-xs text-gray-400 mt-1">+32 cette semaine</p>
251
  </div>
252
  </div>
253
-
254
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 card-glow">
255
- <div class="flex justify-between items-start">
256
- <div>
257
- <p class="text-gray-400">Produits divers</p>
258
- <h3 class="text-3xl font-bold text-white">5,892</h3>
259
- </div>
260
- <div class="p-3 rounded-full bg-blue-900 text-blue-300">
261
- <i class="fas fa-box-open text-xl"></i>
262
- </div>
263
- </div>
264
- <div class="mt-4">
265
- <div class="progress-bar">
266
- <div class="progress-fill" style="width: 65%"></div>
267
- </div>
268
- <p class="text-xs text-gray-400 mt-1">+124 cette semaine</p>
269
- </div>
270
  </div>
271
 
272
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 card-glow">
273
- <div class="flex justify-between items-start">
274
- <div>
275
- <p class="text-gray-400">Revenus estimés</p>
276
- <h3 class="text-3xl font-bold text-white">$287M</h3>
277
- </div>
278
- <div class="p-3 rounded-full bg-green-900 text-green-300">
279
- <i class="fas fa-dollar-sign text-xl"></i>
280
- </div>
281
- </div>
282
- <div class="mt-4">
283
- <div class="progress-bar">
284
- <div class="progress-fill" style="width: 42%"></div>
285
  </div>
286
- <p class="text-xs text-gray-400 mt-1">+12% ce mois</p>
 
287
  </div>
288
- </div>
289
- </div>
290
-
291
- <!-- Main Dashboard -->
292
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
293
- <!-- IA Network Status -->
294
- <div class="lg:col-span-2 bg-gray-800 bg-opacity-50 rounded-xl p-6 card-glow">
295
- <div class="flex justify-between items-center mb-6">
296
- <h2 class="orbitron text-xl font-bold text-white">Réseau IA Global</h2>
297
- <div class="flex space-x-2">
298
- <button id="optimizeBtn" class="bg-indigo-700 hover:bg-indigo-600 text-white px-3 py-1 rounded-lg text-sm">Optimiser</button>
299
- <button id="viewAllBtn" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-lg text-sm">Voir tout</button>
300
  </div>
 
 
301
  </div>
302
-
303
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
304
- <div class="bg-gray-900 rounded-lg p-4 text-center">
305
- <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-2">
306
- <i class="fas fa-brain text-white text-2xl"></i>
307
- </div>
308
- <h4 class="font-bold text-white">Concepteurs</h4>
309
- <p class="text-sm text-gray-400">120,000 IA</p>
310
- </div>
311
- <div class="bg-gray-900 rounded-lg p-4 text-center">
312
- <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-2">
313
- <i class="fas fa-code text-white text-2xl"></i>
314
- </div>
315
- <h4 class="font-bold text-white">Développeurs</h4>
316
- <p class="text-sm text-gray-400">150,000 IA</p>
317
- </div>
318
- <div class="bg-gray-900 rounded-lg p-4 text-center">
319
- <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-2">
320
- <i class="fas fa-paint-brush text-white text-2xl"></i>
321
- </div>
322
- <h4 class="font-bold text-white">Designers</h4>
323
- <p class="text-sm text-gray-400">90,000 IA</p>
324
- </div>
325
- <div class="bg-gray-900 rounded-lg p-4 text-center">
326
- <div class="w-16 h-16 bg-green-600 rounded-full flex items center justify-center mx-auto mb-2">
327
- <i class="fas fa-chart-line text-white text-2xl"></i>
328
- </div>
329
- <h4 class="font-bold text-white">Analystes</h4>
330
- <p class="text-sm text-gray-400">140,000 IA</p>
331
  </div>
 
 
332
  </div>
333
-
334
- <div class="bg-gray-900 rounded-lg p-4">
335
- <div class="flex justify-between items-center mb-3">
336
- <h4 class="font-medium text-white">Distribution des ressources</h4>
337
- <span class="text-sm text-gray-400">Mise à jour en temps réel</span>
338
- </div>
339
- <div class="space-y-3">
340
- <div>
341
- <div class="flex justify-between text-sm mb-1">
342
- <span class="text-gray-300">Jeux AAA</span>
343
- <span class="text-gray-400">45%</span>
344
- </div>
345
- <div class="progress-bar">
346
- <div class="progress-fill" style="width: 45%; background: linear-gradient(90deg, #6e45e2, #9d50bb);"></div>
347
- </div>
348
- </div>
349
- <div>
350
- <div class="flex justify-between text-sm mb-1">
351
- <span class="text-gray-300">Jeux indépendants</span>
352
- <span class="text-gray-400">30%</span>
353
- </div>
354
- <div class="progress-bar">
355
- <div class="progress-fill" style="width: 30%; background: linear-gradient(90deg, #9d50bb, #4776e6);"></div>
356
- </div>
357
- </div>
358
- <div>
359
- <div class="flex justify-between text-sm mb-1">
360
- <span class="text-gray-300">Produits logiciels</span>
361
- <span class="text-gray-400">15%</span>
362
- </div>
363
- <div class="progress-bar">
364
- <div class="progress-fill" style="width: 15%; background: linear-gradient(90deg, #4776e6, #00c6ff);"></div>
365
- </div>
366
- </div>
367
- <div>
368
- <div class="flex justify-between text-sm mb-1">
369
- <span class="text-gray-300">Contenu divers</span>
370
- <span class="text-gray-400">10%</span>
371
- </div>
372
- <div class="progress-bar">
373
- <div class="progress-fill" style="width: 10%; background: linear-gradient(90deg, #00c6ff, #88d3ce);"></div>
374
- </div>
375
- </div>
376
  </div>
 
 
377
  </div>
378
- </div>
379
-
380
- <!-- Command Terminal -->
381
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 card-glow">
382
- <div class="flex justify-between items-center mb-6">
383
- <h2 class="orbitron text-xl font-bold text-white">Terminal de Commandement</h2>
384
- <div class="flex space-x-2">
385
- <button id="executeBtn" class="bg-indigo-700 hover:bg-indigo-600 text-white px-3 py-1 rounded-lg text-sm">Exécuter</button>
386
  </div>
 
 
387
  </div>
388
-
389
- <div id="terminalOutput" class="terminal mb-4">
390
- <div class="terminal-line">
391
- <span class="terminal-prompt">admin@ia-command:~$</span>
392
- <span class="terminal-command">status --network</span>
393
- </div>
394
- <div class="terminal-line terminal-response">
395
- > Réseau IA opérationnel à 100%<br>
396
- > 500,000 unités actives<br>
397
- > 0 erreurs détectées
398
- </div>
399
- <div class="terminal-line">
400
- <span class="terminal-prompt">admin@ia-command:~$</span>
401
- <span class="terminal-command">deploy --game "Cyber Odyssey" --budget 15M</span>
402
- </div>
403
- <div class="terminal-line terminal-response">
404
- > Déploiement de 2,500 IA pour "Cyber Odyssey"<br>
405
- > Budget alloué: $15,000,000<br>
406
- > Date d'achèvement estimée: 2024-03-15
407
  </div>
408
- <div class="terminal-line">
409
- <span class="terminal-prompt">admin@ia-command:~$</span>
410
- <span class="terminal-command blink">█</span>
411
- </div>
412
- </div>
413
-
414
- <div class="relative">
415
- <input id="terminalInput" type="text" placeholder="Entrez une commande..." class="w-full bg-gray-900 border border-gray-700 rounded-lg py-2 px-4 text-white pl-10 focus:outline-none focus:ring-2 focus:ring-indigo-500">
416
- <i class="fas fa-terminal absolute left-3 top-3 text-indigo-400"></i>
417
- </div>
418
-
419
- <div class="mt-4 text-xs text-gray-400">
420
- Commandes disponibles: status, deploy, optimize, analyze, help
421
  </div>
422
  </div>
423
  </div>
424
 
425
- <!-- Top Games in Production -->
426
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 card-glow mb-8">
427
  <div class="flex justify-between items-center mb-6">
428
- <h2 class="orbitron text-xl font-bold text-white">Top Jeux en Production</h2>
429
- <div class="flex space-x-2">
430
- <button id="newProjectBtn" class="bg-indigo-700 hover:bg-indigo-600 text-white px-3 py-1 rounded-lg text-sm">Nouveau projet</button>
431
- <button id="viewAllGamesBtn" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-lg text-sm">Voir tout</button>
432
  </div>
433
  </div>
434
 
435
- <div class="overflow-x-auto">
436
- <table class="w-full">
437
- <thead>
438
- <tr class="text-left text-gray-400 border-b border-gray-700">
439
- <th class="pb-3">Titre</th>
440
- <th class="pb-3">Genre</th>
441
- <th class="pb-3">IA assignées</th>
442
- <th class="pb-3">Budget</th>
443
- <th class="pb-3">Progression</th>
444
- <th class="pb-3">Actions</th>
445
- </tr>
446
- </thead>
447
- <tbody>
448
- <tr class="border-b border-gray-700 hover:bg-gray-900">
449
- <td class="py-4">
450
- <div class="flex items-center">
451
- <div class="w-10 h-10 bg-purple-600 rounded-md flex items-center justify-center mr-3">
452
- <i class="fas fa-gamepad text-white"></i>
453
- </div>
454
- <div>
455
- <div class="font-medium text-white">Cyber Odyssey</div>
456
- <div class="text-xs text-gray-400">ID: #CYB-2049</div>
457
- </div>
458
- </div>
459
- </td>
460
- <td class="text-gray-300">RPG Sci-Fi</td>
461
- <td class="text-gray-300">2,500 IA</td>
462
- <td class="text-gray-300">$15M</td>
463
- <td>
464
- <div class="flex items-center">
465
- <div class="w-24 mr-2">
466
- <div class="progress-bar">
467
- <div class="progress-fill" style="width: 68%"></div>
468
- </div>
469
- </div>
470
- <span class="text-sm text-gray-300">68%</span>
471
- </div>
472
- </td>
473
- <td>
474
- <button class="play-btn text-indigo-400 hover:text-indigo-300 mr-2">
475
- <i class="fas fa-play"></i>
476
- </button>
477
- <button class="stats-btn text-blue-400 hover:text-blue-300 mr-2">
478
- <i class="fas fa-chart-bar"></i>
479
- </button>
480
- <button class="settings-btn text-green-400 hover:text-green-300">
481
- <i class="fas fa-cog"></i>
482
- </button>
483
- </td>
484
- </tr>
485
- <tr class="border-b border-gray-700 hover:bg-gray-900">
486
- <td class="py-4">
487
- <div class="flex items-center">
488
- <div class="w-10 h-10 bg-blue-600 rounded-md flex items-center justify-center mr-3">
489
- <i class="fas fa-gamepad text-white"></i>
490
- </div>
491
- <div>
492
- <div class="font-medium text-white">Kingdom Eternal</div>
493
- <div class="text-xs text-gray-400">ID: #KNG-3072</div>
494
- </div>
495
- </div>
496
- </td>
497
- <td class="text-gray-300">MMORPG</td>
498
- <td class="text-gray-300">3,200 IA</td>
499
- <td class="text-gray-300">$22M</td>
500
- <td>
501
- <div class="flex items-center">
502
- <div class="w-24 mr-2">
503
- <div class="progress-bar">
504
- <div class="progress-fill" style="width: 45%"></div>
505
- </div>
506
- </div>
507
- <span class="text-sm text-gray-300">45%</span>
508
- </div>
509
- </td>
510
- <td>
511
- <button class="play-btn text-indigo-400 hover:text-indigo-300 mr-2">
512
- <i class="fas fa-play"></i>
513
- </button>
514
- <button class="stats-btn text-blue-400 hover:text-blue-300 mr-2">
515
- <i class="fas fa-chart-bar"></i>
516
- </button>
517
- <button class="settings-btn text-green-400 hover:text-green-300">
518
- <i class="fas fa-cog"></i>
519
- </button>
520
- </td>
521
- </tr>
522
- <tr class="border-b border-gray-700 hover:bg-gray-900">
523
- <td class="py-4">
524
- <div class="flex items-center">
525
- <div class="w-10 h-10 bg-green-600 rounded-md flex items-center justify-center mr-3">
526
- <i class="fas fa-gamepad text-white"></i>
527
- </div>
528
- <div>
529
- <div class="font-medium text-white">Neon Drift</div>
530
- <div class="text-xs text-gray-400">ID: #NDR-1155</div>
531
- </div>
532
- </div>
533
- </td>
534
- <td class="text-gray-300">Course Arcade</td>
535
- <td class="text-gray-300">1,800 IA</td>
536
- <td class="text-gray-300">$8.5M</td>
537
- <td>
538
- <div class="flex items-center">
539
- <div class="w-24 mr-2">
540
- <div class="progress-bar">
541
- <div class="progress-fill" style="width: 82%"></div>
542
- </div>
543
- </div>
544
- <span class="text-sm text-gray-300">82%</span>
545
- </div>
546
- </td>
547
- <td>
548
- <button class="play-btn text-indigo-400 hover:text-indigo-300 mr-2">
549
- <i class="fas fa-play"></i>
550
- </button>
551
- <button class="stats-btn text-blue-400 hover:text-blue-300 mr-2">
552
- <i class="fas fa-chart-bar"></i>
553
- </button>
554
- <button class="settings-btn text-green-400 hover:text-green-300">
555
- <i class="fas fa-cog"></i>
556
- </button>
557
- </td>
558
- </tr>
559
- <tr class="hover:bg-gray-900">
560
- <td class="py-4">
561
- <div class="flex items-center">
562
- <div class="w-10 h-10 bg-red-600 rounded-md flex items-center justify-center mr-3">
563
- <i class="fas fa-gamepad text-white"></i>
564
- </div>
565
- <div>
566
- <div class="font-medium text-white">Shadow Protocol</div>
567
- <div class="text-xs text-gray-400">ID: #SHP-4096</div>
568
- </div>
569
- </div>
570
- </td>
571
- <td class="text-gray-300">FPS Tactique</td>
572
- <td class="text-gray-300">2,700 IA</td>
573
- <td class="text-gray-300">$18M</td>
574
- <td>
575
- <div class="flex items-center">
576
- <div class="w-24 mr-2">
577
- <div class="progress-bar">
578
- <div class="progress-fill" style="width: 29%"></div>
579
- </div>
580
- </div>
581
- <span class="text-sm text-gray-300">29%</span>
582
- </div>
583
- </td>
584
- <td>
585
- <button class="play-btn text-indigo-400 hover:text-indigo-300 mr-2">
586
- <i class="fas fa-play"></i>
587
- </button>
588
- <button class="stats-btn text-blue-400 hover:text-blue-300 mr-2">
589
- <i class="fas fa-chart-bar"></i>
590
- </button>
591
- <button class="settings-btn text-green-400 hover:text-green-300">
592
- <i class="fas fa-cog"></i>
593
- </button>
594
- </td>
595
- </tr>
596
- </tbody>
597
- </table>
598
- </div>
599
- </div>
600
-
601
- <!-- Recent Products -->
602
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
603
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 card-glow">
604
- <div class="flex justify-between items-center mb-6">
605
- <h2 class="orbitron text-xl font-bold text-white">Produits Récents</h2>
606
- </div>
607
-
608
- <div class="space-y-4">
609
- <div class="flex items-start p-3 hover:bg-gray-900 rounded-lg transition">
610
- <div class="w-12 h-12 bg-indigo-900 rounded-md flex items-center justify-center mr-4">
611
- <i class="fas fa-box text-indigo-300"></i>
612
  </div>
613
- <div class="flex-1">
614
- <h4 class="font-medium text-white">AI Design Suite Pro</h4>
615
- <p class="text-sm text-gray-400">Suite complète de design assisté par IA</p>
616
- <div class="flex items-center mt-1">
617
- <span class="text-xs bg-indigo-900 text-indigo-300 px-2 py-1 rounded mr-2">Logiciel</span>
618
- <span class="text-xs text-gray-500">Publié: 2 jours</span>
619
  </div>
620
- </div>
621
- <div class="text-right">
622
- <div class="text-white font-medium">$149.99</div>
623
- <div class="text-xs text-green-400">+12% ventes</div>
624
  </div>
625
  </div>
626
-
627
- <div class="flex items-start p-3 hover:bg-gray-900 rounded-lg transition">
628
- <div class="w-12 h-12 bg-purple-900 rounded-md flex items-center justify-center mr-4">
629
- <i class="fas fa-music text-purple-300"></i>
630
- </div>
631
- <div class="flex-1">
632
- <h4 class="font-medium text-white">Neon Dreams OST</h4>
633
- <p class="text-sm text-gray-400">Bande originale du jeu Neon Drift</p>
634
- <div class="flex items-center mt-1">
635
- <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded mr-2">Audio</span>
636
- <span class="text-xs text-gray-500">Publié: 1 semaine</span>
637
- </div>
638
- </div>
639
- <div class="text-right">
640
- <div class="text-white font-medium">$24.99</div>
641
- <div class="text-xs text-green-400">+45% ventes</div>
642
- </div>
643
- </div>
644
-
645
- <div class="flex items-start p-3 hover:bg-gray-900 rounded-lg transition">
646
- <div class="w-12 h-12 bg-blue-900 rounded-md flex items-center justify-center mr-4">
647
- <i class="fas fa-book text-blue-300"></i>
648
- </div>
649
- <div class="flex-1">
650
- <h4 class="font-medium text-white">Cyberpunk Artbook</h4>
651
- <p class="text-sm text-gray-400">Collection d'art conceptuel</p>
652
- <div class="flex items-center mt-1">
653
- <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded mr-2">Livre</span>
654
- <span class="text-xs text-gray-500">Publié: 3 jours</span>
655
- </div>
656
- </div>
657
- <div class="text-right">
658
- <div class="text-white font-medium">$39.99</div>
659
- <div class="text-xs text-green-400">+28% ventes</div>
660
- </div>
661
  </div>
662
  </div>
663
- </div>
664
-
665
- <!-- Quick Actions -->
666
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 card-glow">
667
- <div class="flex justify-between items-center mb-6">
668
- <h2 class="orbitron text-xl font-bold text-white">Actions Rapides</h2>
669
- </div>
670
 
671
- <div class="grid grid-cols-2 gap-4">
672
- <button id="newGameBtn" class="bg-indigo-900 hover:bg-indigo-800 rounded-lg p-4 flex flex-col items-center justify-center h-32 transition">
673
- <div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center mb-2">
674
- <i class="fas fa-plus text-white"></i>
 
 
 
 
 
 
 
 
675
  </div>
676
- <span class="text-white font-medium">Nouveau Jeu</span>
677
- <span class="text-xs text-gray-400">500+ IA disponibles</span>
678
- </button>
679
-
680
- <button id="newProductBtn" class="bg-purple-900 hover:bg-purple-800 rounded-lg p-4 flex flex-col items-center justify-center h-32 transition">
681
- <div class="w-10 h-10 bg-purple-700 rounded-full flex items-center justify-center mb-2">
682
- <i class="fas fa-box text-white"></i>
683
- </div>
684
- <span class="text-white font-medium">Nouveau Produit</span>
685
- <span class="text-xs text-gray-400">Divers formats</span>
686
- </button>
687
-
688
- <button id="marketAnalysisBtn" class="bg-blue-900 hover:bg-blue-800 rounded-lg p-4 flex flex-col items-center justify-center h-32 transition">
689
- <div class="w-10 h-10 bg-blue-700 rounded-full flex items-center justify-center mb-2">
690
- <i class="fas fa-chart-pie text-white"></i>
691
- </div>
692
- <span class="text-white font-medium">Analyse Marché</span>
693
- <span class="text-xs text-gray-400">120K IA analystes</span>
694
- </button>
695
-
696
- <button id="launchProductBtn" class="bg-green-900 hover:bg-green-800 rounded-lg p-4 flex flex-col items-center justify-center h-32 transition">
697
- <div class="w-10 h-10 bg-green-700 rounded-full flex items-center justify-center mb-2">
698
- <i class="fas fa-rocket text-white"></i>
699
  </div>
700
- <span class="text-white font-medium">Lancer Produit</span>
701
- <span class="text-xs text-gray-400">Steam & autres</span>
702
- </button>
703
- </div>
704
-
705
- <div class="mt-6 bg-gray-900 rounded-lg p-4">
706
- <h4 class="font-medium text-white mb-3">Déploiement Rapide</h4>
707
- <div class="flex">
708
- <input id="quickDeployInput" type="text" placeholder="Nom du projet..." class="flex-1 bg-gray-800 border border-gray-700 rounded-l-lg py-2 px-4 text-white focus:outline-none">
709
- <button id="quickDeployBtn" class="bg-indigo-700 hover:bg-indigo-600 text-white px-4 rounded-r-lg">
710
- <i class="fas fa-paper-plane"></i>
711
- </button>
712
  </div>
713
- </div>
714
- </div>
715
- </div>
716
- </div>
717
- </div>
718
-
719
- <script>
720
- document.addEventListener('DOMContentLoaded', function() {
721
- // Terminal functionality
722
- const terminalOutput = document.getElementById('terminalOutput');
723
- const terminalInput = document.getElementById('terminalInput');
724
- const executeBtn = document.getElementById('executeBtn');
725
-
726
- function addTerminalLine(prompt, command, response) {
727
- const commandLine = document.createElement('div');
728
- commandLine.className = 'terminal-line';
729
- commandLine.innerHTML = `
730
- <span class="terminal-prompt">${prompt}</span>
731
- <span class="terminal-command">${command}</span>
732
- `;
733
- terminalOutput.appendChild(commandLine);
734
-
735
- if (response) {
736
- const responseLine = document.createElement('div');
737
- responseLine.className = 'terminal-line terminal-response';
738
- responseLine.innerHTML = response;
739
- terminalOutput.appendChild(responseLine);
740
- }
741
-
742
- // Add blinking cursor
743
- const cursorLine = document.createElement('div');
744
- cursorLine.className = 'terminal-line';
745
- cursorLine.innerHTML = `
746
- <span class="terminal-prompt">admin@ia-command:~$</span>
747
- <span class="terminal-command blink">█</span>
748
- `;
749
- terminalOutput.appendChild(cursorLine);
750
-
751
- terminalOutput.scrollTop = terminalOutput.scrollHeight;
752
- }
753
-
754
- function processCommand(command) {
755
- if (command.trim() === '') return;
756
-
757
- let response = '';
758
-
759
- if (command.startsWith('deploy')) {
760
- const gameMatch = command.match(/--game "([^"]+)"/);
761
- const budgetMatch = command.match(/--budget (\d+M)/);
762
-
763
- const gameName = gameMatch ? gameMatch[1] : 'Nouveau Projet';
764
- const budget = budgetMatch ? budgetMatch[1] : '10M';
765
- const iaCount = Math.floor(Math.random() * 2000) + 1000;
766
-
767
- response = `
768
- > Déploiement de ${iaCount.toLocaleString()} IA pour "${gameName}"<br>
769
- > Budget alloué: $${budget.replace('M', ',000,000')}<br>
770
- > Date d'achèvement estimée: ${new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]}
771
- `;
772
- } else if (command.startsWith('status')) {
773
- response = `
774
- > Réseau IA: Optimal<br>
775
- > Capacité: 500,000/500,000 IA<br>
776
- > Projets actifs: 1,247 jeux, 5,892 produits<br>
777
- > Charge système: ${Math.floor(Math.random() * 30) + 60}%
778
- `;
779
- } else if (command === 'optimize') {
780
- response = `
781
- > Optimisation du réseau en cours...<br>
782
- > Réallocation des ressources IA...<br>
783
- > Performance améliorée de ${Math.floor(Math.random() * 15) + 5}%
784
- `;
785
- } else if (command === 'analyze') {
786
- response = `
787
- > Analyse des performances en cours...<br>
788
- > Temps moyen de développement: ${Math.floor(Math.random() * 5) + 2} mois<br>
789
- > Taux de réussite: ${Math.floor(Math.random() * 30) + 70}%
790
- `;
791
- } else if (command === 'help') {
792
- response = `
793
- Commandes disponibles:<br>
794
- - status: Affiche le statut du réseau<br>
795
- - deploy --game "Nom" --budget XM: Lance un nouveau projet<br>
796
- - optimize: Optimise les ressources IA<br>
797
- - analyze: Analyse les performances<br>
798
- - help: Affiche cette aide
799
- `;
800
- } else {
801
- response = `> Commande non reconnue. Tapez 'help' pour la liste des commandes.`;
802
- }
803
-
804
- addTerminalLine('admin@ia-command:~$', command, response);
805
- }
806
-
807
- terminalInput.addEventListener('keypress', function(e) {
808
- if (e.key === 'Enter') {
809
- processCommand(this.value);
810
- this.value = '';
811
- }
812
- });
813
-
814
- executeBtn.addEventListener('click', function() {
815
- if (terminalInput.value.trim() !== '') {
816
- processCommand(terminalInput.value);
817
- terminalInput.value = '';
818
- }
819
- });
820
-
821
- // Button functionalities
822
- document.getElementById('notificationBtn').addEventListener('click', function() {
823
- addTerminalLine('admin@ia-command:~$', 'notifications --show', `
824
- > Notifications:<br>
825
- > - Nouveau jeu "Stellar Conquest" à 45%<br>
826
- > - Produit "AI Sound Pack" lancé avec succès<br>
827
- > - 12 nouvelles IA ajoutées au réseau
828
- `);
829
- });
830
-
831
- document.getElementById('optimizeBtn').addEventListener('click', function() {
832
- processCommand('optimize');
833
- });
834
-
835
- document.getElementById('viewAllBtn').addEventListener('click', function() {
836
- addTerminalLine('admin@ia-command:~$', 'network --view-all', `
837
- > Affichage de tous les noeuds IA...<br>
838
- > 500,000 unités connectées<br>
839
- > Aucune erreur détectée
840
- `);
841
- });
842
-
843
- document.getElementById('newProjectBtn').addEventListener('click', function() {
844
- const gameNames = [
845
- "Galactic Empires", "Cyber Revolution", "Fantasy Realms",
846
- "Neon Racers", "Shadow Wars", "Ocean Explorers"
847
- ];
848
- const randomGame = gameNames[Math.floor(Math.random() * gameNames.length)];
849
- const randomBudget = `${Math.floor(Math.random() * 20) + 5}M`;
850
-
851
- processCommand(`deploy --game "${randomGame}" --budget ${randomBudget}`);
852
- });
853
-
854
- document.getElementById('viewAllGamesBtn').addEventListener('click', function() {
855
- addTerminalLine('admin@ia-command:~$', 'games --list-all', `
856
- > Liste de tous les jeux en production:<br>
857
- > 1. Cyber Odyssey (68%)<br>
858
- > 2. Kingdom Eternal (45%)<br>
859
- > 3. Neon Drift (82%)<br>
860
- > 4. Shadow Protocol (29%)<br>
861
- > ...plus 1,243 autres
862
- `);
863
- });
864
-
865
- document.getElementById('viewAllProductsBtn').addEventListener('click', function() {
866
- addTerminalLine('admin@ia-command:~$', 'products --list-all', `
867
- > Liste de tous les produits:<br>
868
- > 1. AI Design Suite Pro ($149.99)<br>
869
- > 2. Neon Dreams OST ($24.99)<br>
870
- > 3. Cyberpunk Artbook ($39.99)<br>
871
- > ...plus 5,889 autres
872
- `);
873
- });
874
-
875
- document.getElementById('newGameBtn').addEventListener('click', function() {
876
- this.innerHTML = `
877
- <div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center mb-2">
878
- <i class="fas fa-spinner fa-spin text-white"></i>
879
- </div>
880
- <span class="text-white font-medium">Initialisation...</span>
881
- `;
882
- this.disabled = true;
883
-
884
- setTimeout(() => {
885
- const gameNames = [
886
- "Quantum Legends", "Dragon's Ascent", "Pixel Universe",
887
- "Steampunk Chronicles", "Magic & Mayhem"
888
- ];
889
- const randomGame = gameNames[Math.floor(Math.random() * gameNames.length)];
890
-
891
- addTerminalLine('admin@ia-command:~$', `game --new "${randomGame}"`, `
892
- > Nouveau jeu "${randomGame}" initialisé<br>
893
- > 500 IA assignées<br>
894
- > Budget initial: $5,000,000
895
- `);
896
-
897
- this.innerHTML = `
898
- <div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center mb-2">
899
- <i class="fas fa-plus text-white"></i>
900
  </div>
901
- <span class="text-white font-medium">Nouveau Jeu</span>
902
- <span class="text-xs text-gray-400">500+ IA disponibles</span>
903
- `;
904
- this.disabled = false;
905
- }, 1500);
906
- });
907
-
908
- document.getElementById('newProductBtn').addEventListener('click', function() {
909
- this.innerHTML = `
910
- <div class="w-10 h-10 bg-purple-700 rounded-full flex items-center justify-center mb-2">
911
- <i class="fas fa-spinner fa-spin text-white"></i>
912
  </div>
913
- <span class="text-white font-medium">Création...</span>
914
- `;
915
- this.disabled = true;
916
-
917
- setTimeout(() => {
918
- const productTypes = [
919
- "Sound Pack", "Art Collection", "Developer Tools",
920
- "OST Bundle", "Game Assets"
921
- ];
922
- const randomType = productTypes[Math.floor(Math.random() * productTypes.length)];
923
- const price = (Math.random() * 100 + 10).toFixed(2);
924
-
925
- addTerminalLine('admin@ia-command:~$', `product --new "AI ${randomType}"`, `
926
- > Nouveau produit créé: "AI ${randomType}"<br>
927
- > Prix: $${price}<br>
928
- > 50 IA assignées à la production
929
- `);
930
 
931
- this.innerHTML = `
932
- <div class="w-10 h-10 bg-purple-700 rounded-full flex items-center justify-center mb-2">
933
- <i class="fas fa-box text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
934
  </div>
935
- <span class="text-white font-medium">Nouveau Produit</span>
936
- <span class="text-xs text-gray-400">Divers formats</span>
937
- `;
938
- this.disabled = false;
939
- }, 1500);
940
- });
941
-
942
- document.getElementById('marketAnalysisBtn').addEventListener('click', function() {
943
- this.innerHTML = `
944
- <div class="w-10 h-10 bg-blue-700 rounded-full flex items-center justify-center mb-2">
945
- <i class="fas fa-spinner fa-spin text-white"></i>
946
- </div>
947
- <span class="text-white font-medium">Analyse...</span>
948
- `;
949
- this.disabled = true;
950
-
951
- setTimeout(() => {
952
- const trends = [
953
- "RPG", "FPS", "MMO", "Stratégie", "Simulation", "Aventure"
954
- ];
955
- const randomTrend = trends[Math.floor(Math.random() * trends.length)];
956
- const growth = (Math.random() * 20 + 5).toFixed(1);
957
-
958
- addTerminalLine('admin@ia-command:~$', 'analyze --market', `
959
- > Analyse du marché terminée:<br>
960
- > Tendance dominante: ${randomTrend}<br>
961
- > Croissance: +${growth}% ce trimestre<br>
962
- > Opportunité: ${Math.random() > 0.5 ? "Mobile" : "PC"}
963
- `);
964
-
965
- this.innerHTML = `
966
- <div class="w-10 h-10 bg-blue-700 rounded-full flex items-center justify-center mb-2">
967
- <i class="fas fa-chart-pie text-white"></i>
968
  </div>
969
- <span class="text-white font-medium">Analyse Marché</span>
970
- <span class="text-xs text-gray-400">120K IA analystes</span>
971
- `;
972
- this.disabled = false;
973
- }, 2000);
974
- });
975
-
976
- document.getElementById('launchProductBtn').addEventListener('click', function() {
977
- this.innerHTML = `
978
- <div class="w-10 h-10 bg-green-700 rounded-full flex items-center justify-center mb-2">
979
- <i class="fas fa-spinner fa-spin text-white"></i>
980
  </div>
981
- <span class="text-white font-medium">Lancement...</span>
982
- `;
983
- this.disabled = true;
984
-
985
- setTimeout(() => {
986
- const platforms = ["Steam", "Epic Store", "GOG", "Origin", "Ubisoft Connect"];
987
- const randomPlatform = platforms[Math.floor(Math.random() * platforms.length)];
988
-
989
- addTerminalLine('admin@ia-command:~$', 'launch --platform ' + randomPlatform, `
990
- > Produit lancé avec succès sur ${randomPlatform}<br>
991
- > Premières ventes: $${(Math.random() * 50000 + 10000).toFixed(0)}<br>
992
- > Note moyenne: ${(Math.random() * 2 + 3).toFixed(1)}/5
993
- `);
994
 
995
- this.innerHTML = `
996
- <div class="w-10 h-10 bg-green-700 rounded-full flex items-center justify-center mb-2">
997
- <i class="fas fa-rocket text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
998
  </div>
999
- <span class="text-white font-medium">Lancer Produit</span>
1000
- <span class="text-xs text-gray-400">Steam & autres</span>
1001
- `;
1002
- this.disabled = false;
1003
- }, 2500);
1004
- });
1005
-
1006
- document.getElementById('quickDeployBtn').addEventListener('click', function() {
1007
- const projectName = document.getElementById('quickDeployInput').value.trim();
1008
- if (projectName === '') {
1009
- addTerminalLine('admin@ia-command:~$', 'deploy --error', '> Erreur: Nom de projet requis');
1010
- return;
1011
- }
1012
-
1013
- const quickDeployInput = document.getElementById('quickDeployInput');
1014
- quickDeployInput.disabled = true;
1015
- this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
1016
-
1017
- setTimeout(() => {
1018
- const iaCount = Math.floor(Math.random() * 3000) + 500;
1019
- const budget = `${Math.floor(Math.random() * 15) + 5}M`;
1020
-
1021
- addTerminalLine('admin@ia-command:~$', `deploy --quick "${projectName}"`, `
1022
- > Déploiement rapide activé pour "${projectName}"<br>
1023
- > ${iaCount.toLocaleString()} IA assignées<br>
1024
- > Budget automatique: $${budget.replace('M', ',000,000')}
1025
- `);
1026
-
1027
- quickDeployInput.value = '';
1028
- quickDeployInput.disabled = false;
1029
- this.innerHTML = '<i class="fas fa-paper-plane"></i>';
1030
- }, 1000);
1031
- });
1032
-
1033
- // Game table buttons
1034
- document.querySelectorAll('.play-btn').forEach(btn => {
1035
- btn.addEventListener('click', function() {
1036
- const gameName = this.closest('tr').querySelector('.font-medium').textContent;
1037
- addTerminalLine('admin@ia-command:~$', `game --play "${gameName}"`, `
1038
- > Lancement du jeu "${gameName}"<br>
1039
- > Chargement des ressources...<br>
1040
- > Prêt pour le test QA
1041
- `);
1042
- });
1043
- });
1044
-
1045
- document.querySelectorAll('.stats-btn').forEach(btn => {
1046
- btn.addEventListener('click', function() {
1047
- const gameName = this.closest('tr').querySelector('.font-medium').textContent;
1048
- const progress = this.closest('tr').querySelector('.text-sm.text-gray-300').textContent;
1049
-
1050
- addTerminalLine('admin@ia-command:~$', `game --stats "${gameName}"`, `
1051
- > Statistiques pour "${gameName}":<br>
1052
- > Progression: ${progress}<br>
1053
- > IA assignées: ${this.closest('tr').querySelector('td:nth-child(3)').textContent}<br>
1054
- > Budget utilisé: ${this.closest('tr').querySelector('td:nth-child(4)').textContent}
1055
- `);
1056
- });
1057
- });
1058
-
1059
- document.querySelectorAll('.settings-btn').forEach(btn => {
1060
- btn.addEventListener('click', function() {
1061
- const gameName = this.closest('tr').querySelector('.font-medium').textContent;
1062
- addTerminalLine('admin@ia-command:~$', `game --config "${gameName}"`, `
1063
- > Configuration de "${gameName}"<br>
1064
- > Options disponibles:<br>
1065
- > - Réallouer des IA<br>
1066
- > - Ajuster le budget<br>
1067
- > - Modifier la date de sortie
1068
- `);
1069
- });
1070
- });
1071
-
1072
- // Simulate real-time updates
1073
- setInterval(() => {
1074
- const randomStats = document.querySelectorAll('.text-3xl.font-bold');
1075
- if (randomStats.length > 0) {
1076
- // Random small fluctuations in the numbers
1077
- const gamesInProduction = randomStats[1];
1078
- const currentGames = parseInt(gamesInProduction.textContent.replace(/,/g, ''));
1079
- const newGames = currentGames + Math.floor(Math.random() * 3);
1080
- gamesInProduction.textContent = newGames.toLocaleString();
1081
-
1082
- const diverseProducts = randomStats[2];
1083
- const currentProducts = parseInt(diverseProducts.textContent.replace(/,/g, ''));
1084
- const newProducts = currentProducts + Math.floor(Math.random() * 5);
1085
- diverseProducts.textContent = newProducts.toLocaleString();
1086
-
1087
- const estimatedRevenue = randomStats[3];
1088
- const currentRevenue = parseFloat(estimatedRevenue.textContent.replace(/[$,]/g, '').replace('M', ''));
1089
- const revenueChange = (Math.random() * 0.5 - 0.25); // Random small change
1090
- const newRevenue = currentRevenue * (1 + revenueChange/100);
1091
- estimatedRevenue.textContent = `$${(newRevenue / 100).toFixed(1)}M`;
1092
- }
1093
- }, 5000);
1094
- });
1095
- </script>
1096
- <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/mm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1097
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MegaMarket AI - La Plus Grande Marketplace de Services</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
 
19
 
20
  body {
21
  font-family: 'Roboto', sans-serif;
22
+ background-color: #f5f7fa;
23
+ color: #333;
24
  overflow-x: hidden;
25
  }
26
 
 
33
  }
34
 
35
  .card-glow {
36
+ box-shadow: 0 0 20px rgba(110, 69, 226, 0.1);
37
  transition: all 0.3s ease;
38
  }
39
 
40
  .card-glow:hover {
41
+ box-shadow: 0 0 30px rgba(110, 69, 226, 0.2);
42
  transform: translateY(-5px);
43
  }
44
 
45
+ .ai-pulse {
46
+ animation: aiPulse 3s infinite;
47
+ }
48
+
49
+ @keyframes aiPulse {
50
+ 0% { opacity: 0.8; }
51
+ 50% { opacity: 1; }
52
+ 100% { opacity: 0.8; }
53
  }
54
 
55
  .dashboard-grid {
 
59
  }
60
 
61
  .sidebar {
62
+ background: rgba(26, 26, 46, 0.95);
63
  backdrop-filter: blur(10px);
64
  border-right: 1px solid rgba(255, 255, 255, 0.1);
65
  }
66
 
67
  .main-content {
68
+ background-color: #f5f7fa;
 
 
 
69
  }
70
 
71
+ .category-chip {
72
+ transition: all 0.2s ease;
 
 
73
  }
74
 
75
+ .category-chip:hover {
76
+ transform: scale(1.05);
 
 
 
 
 
 
 
 
77
  }
78
 
79
+ .product-card {
80
+ transition: all 0.3s ease;
81
  }
82
 
83
+ .product-card:hover {
84
+ transform: translateY(-5px);
85
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
86
  }
87
 
88
+ .ai-badge {
89
+ position: absolute;
90
+ top: -10px;
91
+ right: -10px;
92
+ background: linear-gradient(135deg, #ff6b6b, #ff8e53);
93
+ color: white;
94
+ border-radius: 50%;
95
+ width: 30px;
96
+ height: 30px;
97
+ display: flex;
98
+ align-items: center;
99
+ justify-content: center;
100
+ font-size: 12px;
101
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
102
  }
103
 
104
+ .modal {
105
+ transition: opacity 0.3s ease, transform 0.3s ease;
106
  }
107
 
108
+ .modal-enter {
109
+ opacity: 0;
110
+ transform: scale(0.9);
111
  }
112
 
113
+ .modal-enter-active {
114
+ opacity: 1;
115
+ transform: scale(1);
116
  }
117
 
118
  .blink {
 
123
  from, to { opacity: 1; }
124
  50% { opacity: 0; }
125
  }
 
 
 
 
 
126
  </style>
127
  </head>
128
  <body>
 
133
  <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center mr-3">
134
  <i class="fas fa-robot text-white text-xl"></i>
135
  </div>
136
+ <h1 class="orbitron text-xl font-bold text-white">MegaMarket AI</h1>
137
  </div>
138
 
139
  <nav class="flex-1">
140
  <ul class="space-y-2">
141
  <li>
142
  <a href="#" class="flex items-center p-3 rounded-lg bg-indigo-900 text-white">
143
+ <i class="fas fa-home mr-3"></i>
144
+ Accueil
145
  </a>
146
  </li>
147
  <li>
148
  <a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-800 text-gray-300 hover:text-white">
149
+ <i class="fas fa-th-large mr-3"></i>
150
+ Catégories
151
  </a>
152
  </li>
153
  <li>
154
  <a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-800 text-gray-300 hover:text-white">
155
+ <i class="fas fa-fire mr-3"></i>
156
+ Tendances
157
  </a>
158
  </li>
159
  <li>
160
  <a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-800 text-gray-300 hover:text-white">
161
+ <i class="fas fa-download mr-3"></i>
162
+ Mes téléchargements
163
  </a>
164
  </li>
165
  <li>
166
  <a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-800 text-gray-300 hover:text-white">
167
+ <i class="fas fa-heart mr-3"></i>
168
+ Favoris
169
  </a>
170
  </li>
171
  <li>
 
183
  <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
184
  <span class="text-sm text-white">Système actif</span>
185
  </div>
186
+ <div class="text-xs text-gray-300">987,000 IA opérationnelles</div>
187
+ <div class="text-xs text-gray-300 mt-1">7,560,000 produits disponibles</div>
188
  </div>
189
  </div>
190
  </div>
 
192
  <!-- Main Content -->
193
  <div class="main-content p-8 overflow-y-auto">
194
  <header class="flex justify-between items-center mb-8">
195
+ <div>
196
+ <h1 class="orbitron text-3xl font-bold text-gray-800">MegaMarket AI</h1>
197
+ <p class="text-gray-600">La plus grande marketplace de services en ligne, alimentée par 987,000 IA</p>
198
+ </div>
199
  <div class="flex items-center space-x-4">
200
  <div class="relative">
201
+ <input type="text" placeholder="Rechercher parmi 7.56M produits..." class="bg-white border border-gray-300 rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-64">
202
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
203
  </div>
204
+ <button id="notificationBtn" class="bg-white hover:bg-gray-100 text-gray-700 p-2 rounded-full border border-gray-300">
205
  <i class="fas fa-bell"></i>
206
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
207
+ </button>
208
+ <button id="loginBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg">
209
+ <i class="fas fa-user mr-2"></i>
210
+ Connexion
211
  </button>
 
 
 
 
 
 
212
  </div>
213
  </header>
214
 
215
+ <!-- Hero Section -->
216
+ <div class="gradient-bg rounded-2xl p-8 text-white mb-8">
217
+ <div class="flex flex-col md:flex-row items-center">
218
+ <div class="md:w-1/2 mb-6 md:mb-0">
219
+ <h2 class="orbitron text-4xl font-bold mb-4">Accédez à 7.56 millions de produits</h2>
220
+ <p class="text-lg mb-6">Téléchargez gratuitement après inscription et abonnement à notre plateforme révolutionnaire gérée par IA.</p>
221
+ <div class="flex space-x-4">
222
+ <button id="registerBtn" class="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium">
223
+ S'inscrire maintenant
224
+ </button>
225
+ <button id="learnMoreBtn" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-20 px-6 py-3 rounded-lg font-medium">
226
+ En savoir plus
227
+ </button>
 
 
228
  </div>
 
229
  </div>
230
+ <div class="md:w-1/2 relative">
231
+ <div class="bg-white bg-opacity-20 rounded-xl p-6 backdrop-blur-md">
232
+ <div class="flex items-center mb-4">
233
+ <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center mr-3">
234
+ <i class="fas fa-robot text-indigo-600"></i>
235
+ </div>
236
+ <div>
237
+ <h3 class="font-bold">Assistant IA MegaMarket</h3>
238
+ <p class="text-sm text-white text-opacity-80">En ligne - Prêt à vous aider</p>
239
+ </div>
240
+ </div>
241
+ <div class="bg-white bg-opacity-30 rounded-lg p-4 mb-3">
242
+ <p>Bonjour ! Je peux vous aider à trouver exactement ce dont vous avez besoin parmi nos 7.56 millions de produits.</p>
243
+ </div>
244
+ <div class="flex">
245
+ <input type="text" placeholder="Posez votre question..." class="flex-1 bg-white bg-opacity-50 border-0 rounded-l-lg py-2 px-4 text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white">
246
+ <button class="bg-white text-indigo-600 px-4 rounded-r-lg">
247
+ <i class="fas fa-paper-plane"></i>
248
+ </button>
249
+ </div>
250
  </div>
251
+ <div class="absolute -bottom-4 -right-4 bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold">
252
+ <i class="fas fa-bolt mr-1"></i>
253
+ Powered by 987K IA
 
254
  </div>
 
255
  </div>
256
  </div>
257
+ </div>
258
+
259
+ <!-- Categories -->
260
+ <div class="mb-8">
261
+ <div class="flex justify-between items-center mb-6">
262
+ <h2 class="orbitron text-2xl font-bold text-gray-800">Catégories populaires</h2>
263
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Voir toutes (287)</a>
 
 
 
 
 
 
 
 
 
 
264
  </div>
265
 
266
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
267
+ <div class="category-chip bg-white rounded-xl p-4 text-center cursor-pointer hover:shadow-md">
268
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-3">
269
+ <i class="fas fa-code text-indigo-600 text-xl"></i>
 
 
 
 
 
 
 
 
 
270
  </div>
271
+ <h3 class="font-medium">Développement</h3>
272
+ <p class="text-xs text-gray-500">1.2M produits</p>
273
  </div>
274
+ <div class="category-chip bg-white rounded-xl p-4 text-center cursor-pointer hover:shadow-md">
275
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
276
+ <i class="fas fa-paint-brush text-purple-600 text-xl"></i>
 
 
 
 
 
 
 
 
 
277
  </div>
278
+ <h3 class="font-medium">Design</h3>
279
+ <p class="text-xs text-gray-500">980K produits</p>
280
  </div>
281
+ <div class="category-chip bg-white rounded-xl p-4 text-center cursor-pointer hover:shadow-md">
282
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
283
+ <i class="fas fa-chart-line text-blue-600 text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
284
  </div>
285
+ <h3 class="font-medium">Marketing</h3>
286
+ <p class="text-xs text-gray-500">750K produits</p>
287
  </div>
288
+ <div class="category-chip bg-white rounded-xl p-4 text-center cursor-pointer hover:shadow-md">
289
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
290
+ <i class="fas fa-camera text-green-600 text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
291
  </div>
292
+ <h3 class="font-medium">Photo/Vidéo</h3>
293
+ <p class="text-xs text-gray-500">620K produits</p>
294
  </div>
295
+ <div class="category-chip bg-white rounded-xl p-4 text-center cursor-pointer hover:shadow-md">
296
+ <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3">
297
+ <i class="fas fa-music text-red-600 text-xl"></i>
 
 
 
 
 
298
  </div>
299
+ <h3 class="font-medium">Audio</h3>
300
+ <p class="text-xs text-gray-500">510K produits</p>
301
  </div>
302
+ <div class="category-chip bg-white rounded-xl p-4 text-center cursor-pointer hover:shadow-md">
303
+ <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-3">
304
+ <i class="fas fa-gamepad text-yellow-600 text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
305
  </div>
306
+ <h3 class="font-medium">Jeux</h3>
307
+ <p class="text-xs text-gray-500">890K produits</p>
 
 
 
 
 
 
 
 
 
 
 
308
  </div>
309
  </div>
310
  </div>
311
 
312
+ <!-- AI Powered Products -->
313
+ <div class="mb-8">
314
  <div class="flex justify-between items-center mb-6">
315
+ <h2 class="orbitron text-2xl font-bold text-gray-800">Produits générés par IA</h2>
316
+ <div class="flex items-center">
317
+ <span class="text-sm text-gray-600 mr-3">Gérés par 987,000 IA</span>
318
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Voir plus</a>
319
  </div>
320
  </div>
321
 
322
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
323
+ <!-- Product 1 -->
324
+ <div class="product-card bg-white rounded-xl overflow-hidden shadow-sm relative">
325
+ <div class="ai-badge">
326
+ <i class="fas fa-brain"></i>
327
+ </div>
328
+ <div class="h-48 bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center">
329
+ <i class="fas fa-robot text-white text-5xl opacity-30"></i>
330
+ </div>
331
+ <div class="p-4">
332
+ <div class="flex justify-between items-start mb-2">
333
+ <h3 class="font-bold text-lg">AI Website Builder Pro</h3>
334
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Gratuit</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
335
  </div>
336
+ <p class="text-gray-600 text-sm mb-3">Créez des sites web professionnels en quelques minutes avec notre IA avancée</p>
337
+ <div class="flex justify-between items-center">
338
+ <div class="flex items-center">
339
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
340
+ <span class="text-sm font-medium">4.9</span>
341
+ <span class="text-sm text-gray-500 ml-1">(12K)</span>
342
  </div>
343
+ <span class="text-xs text-gray-500">1.2M téléchargements</span>
 
 
 
344
  </div>
345
  </div>
346
+ <div class="px-4 pb-4">
347
+ <button class="download-btn w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg text-sm font-medium">
348
+ <i class="fas fa-download mr-2"></i>Télécharger
349
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
350
  </div>
351
  </div>
 
 
 
 
 
 
 
352
 
353
+ <!-- Product 2 -->
354
+ <div class="product-card bg-white rounded-xl overflow-hidden shadow-sm relative">
355
+ <div class="ai-badge">
356
+ <i class="fas fa-brain"></i>
357
+ </div>
358
+ <div class="h-48 bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center">
359
+ <i class="fas fa-paint-brush text-white text-5xl opacity-30"></i>
360
+ </div>
361
+ <div class="p-4">
362
+ <div class="flex justify-between items-start mb-2">
363
+ <h3 class="font-bold text-lg">AI Design Master</h3>
364
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Gratuit</span>
365
  </div>
366
+ <p class="text-gray-600 text-sm mb-3">Générez des designs professionnels en quelques secondes avec notre IA créative</p>
367
+ <div class="flex justify-between items-center">
368
+ <div class="flex items-center">
369
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
370
+ <span class="text-sm font-medium">4.8</span>
371
+ <span class="text-sm text-gray-500 ml-1">(8.7K)</span>
372
+ </div>
373
+ <span class="text-xs text-gray-500">980K téléchargements</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
374
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
375
  </div>
376
+ <div class="px-4 pb-4">
377
+ <button class="download-btn w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg text-sm font-medium">
378
+ <i class="fas fa-download mr-2"></i>Télécharger
379
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
380
  </div>
 
 
 
 
 
 
 
 
 
 
 
381
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
382
 
383
+ <!-- Product 3 -->
384
+ <div class="product-card bg-white rounded-xl overflow-hidden shadow-sm relative">
385
+ <div class="ai-badge">
386
+ <i class="fas fa-brain"></i>
387
+ </div>
388
+ <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
389
+ <i class="fas fa-music text-white text-5xl opacity-30"></i>
390
+ </div>
391
+ <div class="p-4">
392
+ <div class="flex justify-between items-start mb-2">
393
+ <h3 class="font-bold text-lg">AI Music Composer</h3>
394
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Gratuit</span>
395
+ </div>
396
+ <p class="text-gray-600 text-sm mb-3">Composez de la musique professionnelle en quelques clics avec notre IA musicale</p>
397
+ <div class="flex justify-between items-center">
398
+ <div class="flex items-center">
399
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
400
+ <span class="text-sm font-medium">4.7</span>
401
+ <span class="text-sm text-gray-500 ml-1">(6.5K)</span>
402
+ </div>
403
+ <span class="text-xs text-gray-500">750K téléchargements</span>
404
+ </div>
405
  </div>
406
+ <div class="px-4 pb-4">
407
+ <button class="download-btn w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg text-sm font-medium">
408
+ <i class="fas fa-download mr-2"></i>Télécharger
409
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
410
  </div>
 
 
 
 
 
 
 
 
 
 
 
411
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
412
 
413
+ <!-- Product 4 -->
414
+ <div class="product-card bg-white rounded-xl overflow-hidden shadow-sm relative">
415
+ <div class="ai-badge">
416
+ <i class="fas fa-brain"></i>
417
+ </div>
418
+ <div class="h-48 bg-gradient-to-r from-red-500 to-orange-500 flex items-center justify-center">
419
+ <i class="fas fa-video text-white text-5xl opacity-30"></i>
420
+ </div>
421
+ <div class="p-4">
422
+ <div class="flex justify-between items-start mb-2">
423
+ <h3 class="font-bold text-lg">AI Video Editor Pro</h3>
424
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Gratuit</span>
425
+ </div>
426
+ <p class="text-gray-600 text-sm mb-3">Éditez des vidéos professionnelles automatiquement avec notre IA vidéo</p>
427
+ <div class="flex justify-between items-center">
428
+ <div class="flex items-center">
429
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
430
+ <span class="text-sm font-medium">4.9</span>
431
+ <span class="text-sm text-gray-500 ml-1">(15.2K)</span>
432
+ </div>
433
+ <span class="text-xs text-gray-500">1.8M téléchargements</span>
434
+ </div>
435
  </div>
436
+ <div class="px-4 pb-4">
437
+ <button class="download-btn w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg text-sm font-medium">
438
+ <i class="fas fa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
439
  </html>
prompts.txt CHANGED
@@ -1,3 +1,4 @@
1
  je veux une armées tres puissant de 500000 IA qui creer des jeux hyper cher comme steam téléchargeables toutes type de produit divers
2
  TOUTES LES BOUTONS NE SONT PAS CLIQUABLES ET NE FONCTIONNE PAS VEUILLEZ CORRIGER TOUTES LES ERREURS
3
- activer toutes les boutons , activer tout
 
 
1
  je veux une armées tres puissant de 500000 IA qui creer des jeux hyper cher comme steam téléchargeables toutes type de produit divers
2
  TOUTES LES BOUTONS NE SONT PAS CLIQUABLES ET NE FONCTIONNE PAS VEUILLEZ CORRIGER TOUTES LES ERREURS
3
+ activer toutes les boutons , activer tout
4
+ CREER LE PLUS GIGANTESQUE MARKET PLACE DE TOUT SERVICE EN LIGNE AVEC PLUS DE 7560000 PRODUITS LE TOUT COMMANDER PAR 987000 INT2LIGENCES ARTIFICIEL EN AUTOMATIQUE . AVEC OBLIGATION DE S INCRIRE ET DE S ABONNER POUR AVOIR ACCES GRATUITE AU TELECHAGEMENT