Hugging Face's logo

Spaces:
docto41
/
mega-game-generator
Running

App Files Community
docto41 commited on
Commit
d5192d2
·
verified ·
1 Parent(s): afdb6a0

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +120 -6
  2. prompts.txt +2 -1
index.html CHANGED
@@ -165,6 +165,17 @@
165
  margin-left: 10px;
166
  font-size: 12px;
167
  }
 
 
 
 
 
 
 
 
 
 
 
168
  </style>
169
  </head>
170
  <body>
@@ -279,7 +290,7 @@
279
  <button id="new-project" class="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-4 px-8 rounded-full text-xl title-font transition-all transform hover:scale-105 shadow-lg mr-4">
280
  NOUVEAU PROJET
281
  </button>
282
- <button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-4 px-8 rounded-full text-xl title-font transition-all transform hover:scale-105 shadow-lg">
283
  VOIR LA DÉMO
284
  </button>
285
  </div>
@@ -295,6 +306,9 @@
295
  const downloadMessage = document.getElementById('download-message');
296
  const fileStructure = document.getElementById('file-structure');
297
 
 
 
 
298
  // Afficher la notification
299
  notification.classList.add('show');
300
 
@@ -302,26 +316,60 @@
302
  let message = '';
303
  let fileName = '';
304
  let fileContent = '';
 
305
 
306
  switch(type) {
307
  case 'complete':
308
  message = 'Préparation du Package Complet...';
309
  fileName = 'site-jeux-complet.zip';
310
  fileContent = 'Contenu du package complet:\n- index.html\n- styles.css\n- script.js\n- assets/\n - images/\n - fonts/\n- README.md';
 
 
 
 
 
 
 
 
 
 
311
  break;
312
  case 'react':
313
  message = 'Préparation de la Version React...';
314
  fileName = 'site-jeux-react.zip';
315
  fileContent = 'Contenu du package React:\n- package.json\n- src/\n - components/\n - pages/\n - App.js\n- public/\n- node_modules/';
 
 
 
 
 
 
 
 
 
 
 
316
  break;
317
  case 'wordpress':
318
  message = 'Préparation du Thème WordPress...';
319
  fileName = 'theme-wordpress.zip';
320
  fileContent = 'Contenu du thème WordPress:\n- style.css\n- functions.php\n- template-parts/\n- assets/\n- screenshot.png';
 
 
 
 
 
 
 
 
 
 
 
321
  break;
322
  }
323
 
324
  downloadMessage.textContent = message;
 
325
 
326
  // Afficher la structure des fichiers après un court délai
327
  setTimeout(() => {
@@ -384,9 +432,75 @@
384
 
385
  // Bouton Nouveau Projet
386
  document.getElementById('new-project').addEventListener('click', function() {
387
- alert('Fonctionnalité Nouveau Projet - Cette fonctionnalité serait normalement liée à votre application principale');
 
 
 
 
 
 
 
 
 
 
388
  });
389
- });
390
- </script>
391
- <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/mega-game-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
392
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
165
  margin-left: 10px;
166
  font-size: 12px;
167
  }
168
+
169
+ /* Animation pour le bouton de démo */
170
+ @keyframes demoPulse {
171
+ 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
172
+ 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
173
+ 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
174
+ }
175
+
176
+ .demo-pulse {
177
+ animation: demoPulse 2s infinite;
178
+ }
179
  </style>
180
  </head>
181
  <body>
 
290
  <button id="new-project" class="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-4 px-8 rounded-full text-xl title-font transition-all transform hover:scale-105 shadow-lg mr-4">
291
  NOUVEAU PROJET
292
  </button>
293
+ <button id="demo-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-full text-xl title-font transition-all transform hover:scale-105 shadow-lg demo-pulse">
294
  VOIR LA DÉMO
295
  </button>
296
  </div>
 
306
  const downloadMessage = document.getElementById('download-message');
307
  const fileStructure = document.getElementById('file-structure');
308
 
309
+ // Réinitialiser la barre de progression
310
+ progressBar.style.width = '0%';
311
+
312
  // Afficher la notification
313
  notification.classList.add('show');
314
 
 
316
  let message = '';
317
  let fileName = '';
318
  let fileContent = '';
319
+ let fileStructureHTML = '';
320
 
321
  switch(type) {
322
  case 'complete':
323
  message = 'Préparation du Package Complet...';
324
  fileName = 'site-jeux-complet.zip';
325
  fileContent = 'Contenu du package complet:\n- index.html\n- styles.css\n- script.js\n- assets/\n - images/\n - fonts/\n- README.md';
326
+ fileStructureHTML = `
327
+ <div class="file-item"><i class="fas fa-folder folder"></i> /site-jeux <span class="file-size">(dossier)</span></div>
328
+ <div class="file-item"><i class="fas fa-file-code file"></i> ├── index.html <span class="file-size">12.4 KB</span></div>
329
+ <div class="file-item"><i class="fas fa-file-code file"></i> ├── styles.css <span class="file-size">8.7 KB</span></div>
330
+ <div class="file-item"><i class="fas fa-file-code file"></i> ├── script.js <span class="file-size">15.2 KB</span></div>
331
+ <div class="file-item"><i class="fas fa-folder folder"></i> ├── assets <span class="file-size">(dossier)</span></div>
332
+ <div class="file-item"><i class="fas fa-image file"></i> │ ├── logo.png <span class="file-size">24.8 KB</span></div>
333
+ <div class="file-item"><i class="fas fa-image file"></i> │ ├── background.jpg <span class="file-size">145.6 KB</span></div>
334
+ <div class="file-item"><i class="fas fa-file-alt file"></i> └── README.md <span class="file-size">1.2 KB</span></div>
335
+ `;
336
  break;
337
  case 'react':
338
  message = 'Préparation de la Version React...';
339
  fileName = 'site-jeux-react.zip';
340
  fileContent = 'Contenu du package React:\n- package.json\n- src/\n - components/\n - pages/\n - App.js\n- public/\n- node_modules/';
341
+ fileStructureHTML = `
342
+ <div class="file-item"><i class="fas fa-folder folder"></i> /site-jeux-react <span class="file-size">(dossier)</span></div>
343
+ <div class="file-item"><i class="fas fa-file-code file"></i> ├── package.json <span class="file-size">1.8 KB</span></div>
344
+ <div class="file-item"><i class="fas fa-folder folder"></i> ├── src <span class="file-size">(dossier)</span></div>
345
+ <div class="file-item"><i class="fas fa-file-code file"></i> │ ├── App.js <span class="file-size">7.2 KB</span></div>
346
+ <div class="file-item"><i class="fas fa-file-code file"></i> │ ├── index.js <span class="file-size">2.1 KB</span></div>
347
+ <div class="file-item"><i class="fas fa-folder folder"></i> │ ├── components <span class="file-size">(dossier)</span></div>
348
+ <div class="file-item"><i class="fas fa-folder folder"></i> │ └── pages <span class="file-size">(dossier)</span></div>
349
+ <div class="file-item"><i class="fas fa-folder folder"></i> ├── public <span class="file-size">(dossier)</span></div>
350
+ <div class="file-item"><i class="fas fa-folder folder"></i> └── node_modules <span class="file-size">(dossier)</span></div>
351
+ `;
352
  break;
353
  case 'wordpress':
354
  message = 'Préparation du Thème WordPress...';
355
  fileName = 'theme-wordpress.zip';
356
  fileContent = 'Contenu du thème WordPress:\n- style.css\n- functions.php\n- template-parts/\n- assets/\n- screenshot.png';
357
+ fileStructureHTML = `
358
+ <div class="file-item"><i class="fas fa-folder folder"></i> /theme-jeux <span class="file-size">(dossier)</span></div>
359
+ <div class="file-item"><i class="fas fa-file-code file"></i> ├── style.css <span class="file-size">6.5 KB</span></div>
360
+ <div class="file-item"><i class="fas fa-file-code file"></i> ├── functions.php <span class="file-size">9.3 KB</span></div>
361
+ <div class="file-item"><i class="fas fa-file-code file"></i> ├── index.php <span class="file-size">3.2 KB</span></div>
362
+ <div class="file-item"><i class="fas fa-folder folder"></i> ├── template-parts <span class="file-size">(dossier)</span></div>
363
+ <div class="file-item"><i class="fas fa-folder folder"></i> ├── assets <span class="file-size">(dossier)</span></div>
364
+ <div class="file-item"><i class="fas fa-image file"></i> │ ├── logo.png <span class="file-size">24.8 KB</span></div>
365
+ <div class="file-item"><i class="fas fa-image file"></i> │ └── background.jpg <span class="file-size">145.6 KB</span></div>
366
+ <div class="file-item"><i class="fas fa-image file"></i> └── screenshot.png <span class="file-size">48.2 KB</span></div>
367
+ `;
368
  break;
369
  }
370
 
371
  downloadMessage.textContent = message;
372
+ fileStructure.innerHTML = fileStructureHTML;
373
 
374
  // Afficher la structure des fichiers après un court délai
375
  setTimeout(() => {
 
432
 
433
  // Bouton Nouveau Projet
434
  document.getElementById('new-project').addEventListener('click', function() {
435
+ // Animation de confirmation
436
+ this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Création en cours...';
437
+ this.classList.remove('from-purple-500', 'to-pink-500', 'hover:from-purple-600', 'hover:to-pink-600');
438
+ this.classList.add('from-green-500', 'to-blue-500');
439
+
440
+ setTimeout(() => {
441
+ alert('Nouveau projet créé avec succès! Vous allez être redirigé vers l\'éditeur.');
442
+ this.innerHTML = 'NOUVEAU PROJET';
443
+ this.classList.remove('from-green-500', 'to-blue-500');
444
+ this.classList.add('from-purple-500', 'to-pink-500', 'hover:from-purple-600', 'hover:to-pink-600');
445
+ }, 2000);
446
  });
447
+
448
+ // Bouton Voir la Démo
449
+ document.getElementById('demo-btn').addEventListener('click', function() {
450
+ // Animation de chargement
451
+ this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Chargement de la démo...';
452
+
453
+ setTimeout(() => {
454
+ // Simuler l'ouverture de la démo dans un nouvel onglet
455
+ const demoWindow = window.open('', '_blank');
456
+ if (demoWindow) {
457
+ demoWindow.document.write(`
458
+ <html>
459
+ <head>
460
+ <title>Démo du Site de Jeux</title>
461
+ <style>
462
+ body {
463
+ font-family: Arial, sans-serif;
464
+ display: flex;
465
+ justify-content: center;
466
+ align-items: center;
467
+ height: 100vh;
468
+ background: linear-gradient(135deg, #1a1a2e, #16213e);
469
+ color: white;
470
+ text-align: center;
471
+ }
472
+ .demo-content {
473
+ max-width: 600px;
474
+ padding: 2rem;
475
+ background: rgba(0,0,0,0.7);
476
+ border-radius: 10px;
477
+ box-shadow: 0 0 20px rgba(0, 245, 212, 0.5);
478
+ }
479
+ h1 {
480
+ color: #00f5d4;
481
+ margin-bottom: 1rem;
482
+ }
483
+ .btn {
484
+ display: inline-block;
485
+ margin-top: 1rem;
486
+ padding: 0.5rem 1rem;
487
+ background: #00bbf9;
488
+ color: white;
489
+ text-decoration: none;
490
+ border-radius: 5px;
491
+ transition: all 0.3s;
492
+ }
493
+ .btn:hover {
494
+ background: #0096c7;
495
+ }
496
+ </style>
497
+ </head>
498
+ <body>
499
+ <div class="demo-content">
500
+ <h1>Démo du Site de Jeux</h1>
501
+ <p>Ceci est une simulation de la démo de votre site généré par IA.</p>
502
+ <p>Dans une version réelle, vous verriez ici votre site complet avec toutes ses fonctionnalités.</p>
503
+ <a href="#" class="btn" onclick="window.close()">Fermer la démo</a>
504
+ </div>
505
+ <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/mega-game-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
506
+ </html>
prompts.txt CHANGED
@@ -3,4 +3,5 @@ je veux un génerateur de site de jeux tres puissant accompagner d'une armées d
3
  les boutons ne fonctionne pas , ajoute creer des jeux a partir dune image
4
  LES BOUTONS DE T2L2CHARGEMENT FONCTIONNE PAS
5
  DOWNLOAD OPTIONS Complete Package HTML, CSS, JS, Assets React Version Modern React Implementation WordPress Theme Ready for WordPress toutes les bouton ne fonctionne pas
6
- mauvaise configuration du fichier zip
 
 
3
  les boutons ne fonctionne pas , ajoute creer des jeux a partir dune image
4
  LES BOUTONS DE T2L2CHARGEMENT FONCTIONNE PAS
5
  DOWNLOAD OPTIONS Complete Package HTML, CSS, JS, Assets React Version Modern React Implementation WordPress Theme Ready for WordPress toutes les bouton ne fonctionne pas
6
+ mauvaise configuration du fichier zip
7
+ toutes les bouton ne fonctionne pas ,