mega-game-generator / index.html
docto41's picture
Add 2 files
d5192d2 verified
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Générateur de Site de Jeux avec 200K IA</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Rajdhani:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Rajdhani', sans-serif;
background: #0a0a12;
color: #e2e8f0;
overflow-x: hidden;
}
.title-font {
font-family: 'Orbitron', sans-serif;
}
.gradient-text {
background: linear-gradient(90deg, #00f5d4, #00bbf9, #9b5de5);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.glow-box {
box-shadow: 0 0 20px rgba(0, 245, 212, 0.3);
border: 1px solid rgba(0, 245, 212, 0.2);
}
.glow-box-purple {
box-shadow: 0 0 20px rgba(155, 93, 229, 0.3);
border: 1px solid rgba(155, 93, 229, 0.2);
}
.glow-box-blue {
box-shadow: 0 0 20px rgba(0, 187, 249, 0.3);
border: 1px solid rgba(0, 187, 249, 0.2);
}
@keyframes pulse {
0% { opacity: 0.6; transform: scale(0.95); }
50% { opacity: 1; transform: scale(1.05); }
100% { opacity: 0.6; transform: scale(0.95); }
}
.pulse {
animation: pulse 2s infinite;
}
.game-card {
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.game-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 15px 30px rgba(0, 245, 212, 0.4);
}
.progress-bar {
height: 6px;
background: linear-gradient(90deg, #00f5d4, #00bbf9);
border-radius: 3px;
transition: width 0.5s ease;
}
.typewriter {
border-right: 3px solid #00f5d4;
white-space: nowrap;
overflow: hidden;
animation: typing 3s steps(40) 1s 1 normal both, blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #00f5d4 }
}
/* Style pour les notifications de téléchargement */
.download-notification {
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.8);
border-left: 4px solid #00f5d4;
color: white;
padding: 15px;
border-radius: 5px;
display: flex;
align-items: center;
z-index: 1000;
transform: translateX(120%);
transition: transform 0.3s ease;
max-width: 350px;
}
.download-notification.show {
transform: translateX(0);
}
.download-notification i {
margin-right: 10px;
font-size: 20px;
}
.download-progress {
width: 100%;
height: 3px;
background: #333;
margin-top: 10px;
border-radius: 3px;
overflow: hidden;
}
.download-progress-bar {
height: 100%;
background: linear-gradient(90deg, #00f5d4, #00bbf9);
width: 0%;
transition: width 0.1s linear;
}
.file-structure {
background: rgba(15, 23, 42, 0.7);
border-radius: 8px;
padding: 15px;
margin-top: 15px;
font-family: monospace;
font-size: 14px;
max-height: 200px;
overflow-y: auto;
}
.file-item {
padding: 2px 0;
display: flex;
align-items: center;
}
.file-item i {
margin-right: 8px;
width: 16px;
text-align: center;
}
.folder {
color: #00bbf9;
}
.file {
color: #e2e8f0;
}
.file-size {
color: #94a3b8;
margin-left: 10px;
font-size: 12px;
}
/* Animation pour le bouton de démo */
@keyframes demoPulse {
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.demo-pulse {
animation: demoPulse 2s infinite;
}
</style>
</head>
<body>
<!-- Notification de téléchargement -->
<div id="download-notification" class="download-notification">
<i class="fas fa-download"></i>
<div style="flex-grow: 1;">
<div id="download-message">Téléchargement en cours...</div>
<div id="file-structure" class="file-structure" style="display: none;">
<div class="file-item"><i class="fas fa-folder folder"></i> /site-jeux <span class="file-size">(dossier)</span></div>
<div class="file-item"><i class="fas fa-file-code file"></i> ├── index.html <span class="file-size">12.4 KB</span></div>
<div class="file-item"><i class="fas fa-file-code file"></i> ├── styles.css <span class="file-size">8.7 KB</span></div>
<div class="file-item"><i class="fas fa-file-code file"></i> ├── script.js <span class="file-size">15.2 KB</span></div>
<div class="file-item"><i class="fas fa-folder folder"></i> ├── assets <span class="file-size">(dossier)</span></div>
<div class="file-item"><i class="fas fa-image file"></i> │ ├── logo.png <span class="file-size">24.8 KB</span></div>
<div class="file-item"><i class="fas fa-image file"></i> │ ├── background.jpg <span class="file-size">145.6 KB</span></div>
<div class="file-item"><i class="fas fa-file-alt file"></i> └── README.md <span class="file-size">1.2 KB</span></div>
</div>
<div class="download-progress">
<div id="download-progress-bar" class="download-progress-bar"></div>
</div>
</div>
</div>
<!-- Results Panel -->
<div class="container mx-auto px-4 py-12">
<div class="max-w-6xl mx-auto bg-black bg-opacity-50 rounded-xl p-8 glow-box">
<div class="text-center mb-12">
<div class="text-5xl font-bold mb-4 title-font gradient-text">GÉNÉRATION TERMINÉE!</div>
<p class="text-xl max-w-3xl mx-auto">Votre site de jeux a été généré avec succès par notre armée de 200,000 IA en <span class="font-bold text-green-400">4.7 secondes</span>.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
<div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 glow-box-purple">
<h3 class="text-xl font-bold mb-4 title-font">STATISTIQUES</h3>
<div class="space-y-4">
<div class="flex justify-between">
<span>Pages Générées</span>
<span class="font-bold">27</span>
</div>
<div class="flex justify-between">
<span>Assets Créés</span>
<span class="font-bold">143</span>
</div>
<div class="flex justify-between">
<span>IA Utilisées</span>
<span class="font-bold">200,000</span>
</div>
<div class="flex justify-between">
<span>Puissance de Calcul</span>
<span class="font-bold">4.7 PetaFLOPS</span>
</div>
<div class="flex justify-between">
<span>Score de Qualité</span>
<span class="font-bold">98.7%</span>
</div>
</div>
</div>
<div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 glow-box-blue">
<h3 class="text-xl font-bold mb-4 title-font">OPTIONS DE TÉLÉCHARGEMENT</h3>
<div class="space-y-4">
<button id="download-complete" class="w-full flex items-center justify-between bg-gray-800 hover:bg-gray-700 px-6 py-4 rounded-lg transition-all">
<div class="flex items-center">
<div class="text-2xl mr-4 text-blue-400">
<i class="fas fa-file-archive"></i>
</div>
<div>
<div class="font-bold">Package Complet</div>
<div class="text-sm text-gray-400">HTML, CSS, JS, Assets (ZIP vérifié)</div>
</div>
</div>
<div class="text-gray-400">
<i class="fas fa-download"></i>
</div>
</button>
<button id="download-react" class="w-full flex items-center justify-between bg-gray-800 hover:bg-gray-700 px-6 py-4 rounded-lg transition-all">
<div class="flex items-center">
<div class="text-2xl mr-4 text-green-400">
<i class="fab fa-react"></i>
</div>
<div>
<div class="font-bold">Version React</div>
<div class="text-sm text-gray-400">Implémentation React Moderne (ZIP vérifié)</div>
</div>
</div>
<div class="text-gray-400">
<i class="fas fa-download"></i>
</div>
</button>
<button id="download-wordpress" class="w-full flex items-center justify-between bg-gray-800 hover:bg-gray-700 px-6 py-4 rounded-lg transition-all">
<div class="flex items-center">
<div class="text-2xl mr-4 text-purple-400">
<i class="fab fa-wordpress"></i>
</div>
<div>
<div class="font-bold">Thème WordPress</div>
<div class="text-sm text-gray-400">Prêt pour WordPress (ZIP vérifié)</div>
</div>
</div>
<div class="text-gray-400">
<i class="fas fa-download"></i>
</div>
</button>
</div>
</div>
</div>
<div class="text-center">
<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">
NOUVEAU PROJET
</button>
<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">
VOIR LA DÉMO
</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Fonction pour simuler le téléchargement
function downloadPackage(type) {
const notification = document.getElementById('download-notification');
const progressBar = document.getElementById('download-progress-bar');
const downloadMessage = document.getElementById('download-message');
const fileStructure = document.getElementById('file-structure');
// Réinitialiser la barre de progression
progressBar.style.width = '0%';
// Afficher la notification
notification.classList.add('show');
// Définir le message en fonction du type de package
let message = '';
let fileName = '';
let fileContent = '';
let fileStructureHTML = '';
switch(type) {
case 'complete':
message = 'Préparation du Package Complet...';
fileName = 'site-jeux-complet.zip';
fileContent = 'Contenu du package complet:\n- index.html\n- styles.css\n- script.js\n- assets/\n - images/\n - fonts/\n- README.md';
fileStructureHTML = `
<div class="file-item"><i class="fas fa-folder folder"></i> /site-jeux <span class="file-size">(dossier)</span></div>
<div class="file-item"><i class="fas fa-file-code file"></i> ├── index.html <span class="file-size">12.4 KB</span></div>
<div class="file-item"><i class="fas fa-file-code file"></i> ├── styles.css <span class="file-size">8.7 KB</span></div>
<div class="file-item"><i class="fas fa-file-code file"></i> ├── script.js <span class="file-size">15.2 KB</span></div>
<div class="file-item"><i class="fas fa-folder folder"></i> ├── assets <span class="file-size">(dossier)</span></div>
<div class="file-item"><i class="fas fa-image file"></i> │ ├── logo.png <span class="file-size">24.8 KB</span></div>
<div class="file-item"><i class="fas fa-image file"></i> │ ├── background.jpg <span class="file-size">145.6 KB</span></div>
<div class="file-item"><i class="fas fa-file-alt file"></i> └── README.md <span class="file-size">1.2 KB</span></div>
`;
break;
case 'react':
message = 'Préparation de la Version React...';
fileName = 'site-jeux-react.zip';
fileContent = 'Contenu du package React:\n- package.json\n- src/\n - components/\n - pages/\n - App.js\n- public/\n- node_modules/';
fileStructureHTML = `
<div class="file-item"><i class="fas fa-folder folder"></i> /site-jeux-react <span class="file-size">(dossier)</span></div>
<div class="file-item"><i class="fas fa-file-code file"></i> ├── package.json <span class="file-size">1.8 KB</span></div>
<div class="file-item"><i class="fas fa-folder folder"></i> ├── src <span class="file-size">(dossier)</span></div>
<div class="file-item"><i class="fas fa-file-code file"></i> │ ├── App.js <span class="file-size">7.2 KB</span></div>
<div class="file-item"><i class="fas fa-file-code file"></i> │ ├── index.js <span class="file-size">2.1 KB</span></div>
<div class="file-item"><i class="fas fa-folder folder"></i> │ ├── components <span class="file-size">(dossier)</span></div>
<div class="file-item"><i class="fas fa-folder folder"></i> │ └── pages <span class="file-size">(dossier)</span></div>
<div class="file-item"><i class="fas fa-folder folder"></i> ├── public <span class="file-size">(dossier)</span></div>
<div class="file-item"><i class="fas fa-folder folder"></i> └── node_modules <span class="file-size">(dossier)</span></div>
`;
break;
case 'wordpress':
message = 'Préparation du Thème WordPress...';
fileName = 'theme-wordpress.zip';
fileContent = 'Contenu du thème WordPress:\n- style.css\n- functions.php\n- template-parts/\n- assets/\n- screenshot.png';
fileStructureHTML = `
<div class="file-item"><i class="fas fa-folder folder"></i> /theme-jeux <span class="file-size">(dossier)</span></div>
<div class="file-item"><i class="fas fa-file-code file"></i> ├── style.css <span class="file-size">6.5 KB</span></div>
<div class="file-item"><i class="fas fa-file-code file"></i> ├── functions.php <span class="file-size">9.3 KB</span></div>
<div class="file-item"><i class="fas fa-file-code file"></i> ├── index.php <span class="file-size">3.2 KB</span></div>
<div class="file-item"><i class="fas fa-folder folder"></i> ├── template-parts <span class="file-size">(dossier)</span></div>
<div class="file-item"><i class="fas fa-folder folder"></i> ├── assets <span class="file-size">(dossier)</span></div>
<div class="file-item"><i class="fas fa-image file"></i> │ ├── logo.png <span class="file-size">24.8 KB</span></div>
<div class="file-item"><i class="fas fa-image file"></i> │ └── background.jpg <span class="file-size">145.6 KB</span></div>
<div class="file-item"><i class="fas fa-image file"></i> └── screenshot.png <span class="file-size">48.2 KB</span></div>
`;
break;
}
downloadMessage.textContent = message;
fileStructure.innerHTML = fileStructureHTML;
// Afficher la structure des fichiers après un court délai
setTimeout(() => {
fileStructure.style.display = 'block';
downloadMessage.textContent = 'Compression des fichiers...';
// Simuler la progression du téléchargement
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 10;
if (progress > 100) progress = 100;
progressBar.style.width = `${progress}%`;
if (progress >= 100) {
clearInterval(interval);
downloadMessage.textContent = 'Téléchargement terminé!';
// Créer un lien de téléchargement factice plus réaliste
const content = `Ceci est une simulation du fichier ${fileName}\n\n${fileContent}`;
const blob = new Blob([content], { type: 'application/zip' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
// Nettoyer après le téléchargement
setTimeout(() => {
document.body.removeChild(link);
URL.revokeObjectURL(url);
// Masquer la notification après 3 secondes
setTimeout(() => {
notification.classList.remove('show');
progressBar.style.width = '0%';
fileStructure.style.display = 'none';
}, 3000);
}, 100);
}
}, 150);
}, 1000);
}
// Écouteurs d'événements pour les boutons de téléchargement
document.getElementById('download-complete').addEventListener('click', function() {
downloadPackage('complete');
});
document.getElementById('download-react').addEventListener('click', function() {
downloadPackage('react');
});
document.getElementById('download-wordpress').addEventListener('click', function() {
downloadPackage('wordpress');
});
// Bouton Nouveau Projet
document.getElementById('new-project').addEventListener('click', function() {
// Animation de confirmation
this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Création en cours...';
this.classList.remove('from-purple-500', 'to-pink-500', 'hover:from-purple-600', 'hover:to-pink-600');
this.classList.add('from-green-500', 'to-blue-500');
setTimeout(() => {
alert('Nouveau projet créé avec succès! Vous allez être redirigé vers l\'éditeur.');
this.innerHTML = 'NOUVEAU PROJET';
this.classList.remove('from-green-500', 'to-blue-500');
this.classList.add('from-purple-500', 'to-pink-500', 'hover:from-purple-600', 'hover:to-pink-600');
}, 2000);
});
// Bouton Voir la Démo
document.getElementById('demo-btn').addEventListener('click', function() {
// Animation de chargement
this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Chargement de la démo...';
setTimeout(() => {
// Simuler l'ouverture de la démo dans un nouvel onglet
const demoWindow = window.open('', '_blank');
if (demoWindow) {
demoWindow.document.write(`
<html>
<head>
<title>Démo du Site de Jeux</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #1a1a2e, #16213e);
color: white;
text-align: center;
}
.demo-content {
max-width: 600px;
padding: 2rem;
background: rgba(0,0,0,0.7);
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 245, 212, 0.5);
}
h1 {
color: #00f5d4;
margin-bottom: 1rem;
}
.btn {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 1rem;
background: #00bbf9;
color: white;
text-decoration: none;
border-radius: 5px;
transition: all 0.3s;
}
.btn:hover {
background: #0096c7;
}
</style>
</head>
<body>
<div class="demo-content">
<h1>Démo du Site de Jeux</h1>
<p>Ceci est une simulation de la démo de votre site généré par IA.</p>
<p>Dans une version réelle, vous verriez ici votre site complet avec toutes ses fonctionnalités.</p>
<a href="#" class="btn" onclick="window.close()">Fermer la démo</a>
</div>
<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>
</html>