Spaces:

docto41
/

mega-game-generator

Running

File size: 27,002 Bytes

<!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>