Spaces:

docto41
/

corrector

Running

File size: 55,346 Bytes

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bolt.New Plus | Générateur DeepSite</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>
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        .shake-animation {
            animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
        }
        @keyframes boltPulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
            100% { transform: scale(1); opacity: 1; }
        }
        .bolt-animation {
            animation: boltPulse 1.5s infinite;
        }
        .electric-glow {
            box-shadow: 0 0 15px rgba(110, 231, 183, 0.7);
        }
        .bolt-gradient {
            background: linear-gradient(135deg, #00f5d4 0%, #00bbf9 50%, #9b5de5 100%);
        }
        .instant-transition {
            transition: all 0.05s ease-out;
        }
        .quantum-card {
            backdrop-filter: blur(10px);
            background-color: rgba(15, 23, 42, 0.7);
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 100;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
        }
        .modal-content {
            background-color: #0f172a;
            margin: 10% auto;
            padding: 2rem;
            border-radius: 1rem;
            max-width: 800px;
            animation: blurIn 0.3s ease-out;
        }
        @keyframes blurIn {
            from { filter: blur(10px); opacity: 0; }
            to { filter: blur(0); opacity: 1; }
        }
        .blur-in {
            animation: blurIn 0.5s ease-out forwards;
        }
        .preview-window {
            border: 2px solid #1e293b;
            border-radius: 0.5rem;
            overflow: hidden;
            background: white;
        }
        .template-option {
            transition: all 0.2s ease;
        }
        .template-option:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        .code-editor {
            font-family: 'Courier New', monospace;
            background: #1e293b;
            color: #f8fafc;
            border-radius: 0.5rem;
            padding: 1rem;
            height: 300px;
            overflow-y: auto;
        }
        .tab-active {
            border-bottom: 2px solid #0ea5e9;
            color: #0ea5e9;
        }
        .error-card {
            border-left: 4px solid #ef4444;
        }
    </style>
</head>
<body class="bg-slate-900 text-slate-100 min-h-screen overflow-x-hidden">
    <!-- Quantum Loader -->
    <div id="quantum-loader" class="fixed inset-0 z-50 flex items-center justify-center bolt-gradient">
        <div class="text-center">
            <div class="text-6xl mb-4 text-white bolt-animation">
                <i class="fas fa-bolt"></i>
            </div>
            <h1 class="text-4xl font-bold text-white">Bolt.New Plus</h1>
            <p class="text-xl text-white mt-2">Chargement du générateur DeepSite...</p>
        </div>
    </div>

    <!-- Modal -->
    <div id="bolt-modal" class="modal">
        <div class="modal-content relative">
            <span id="close-modal" class="absolute top-4 right-4 text-2xl cursor-pointer hover:text-teal-400">&times;</span>
            <h2 id="modal-title" class="text-3xl font-bold mb-4"></h2>
            <div id="modal-content" class="text-slate-300"></div>
        </div>
    </div>

    <!-- Main Interface -->
    <div class="container mx-auto px-4 py-8 blur-in">
        <!-- Header -->
        <header class="flex justify-between items-center py-6">
            <div class="flex items-center">
                <div class="text-3xl font-bold flex items-center">
                    <i class="fas fa-bolt text-teal-400 mr-2"></i>
                    <span>Bolt</span><span class="text-teal-400">.New Plus</span>
                </div>
            </div>
            <div class="flex space-x-4">
                <button id="notifications-btn" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-slate-700 instant-transition">
                    <i class="fas fa-bell"></i>
                </button>
                <button id="settings-btn" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-slate-700 instant-transition">
                    <i class="fas fa-cog"></i>
                </button>
                <div class="w-10 h-10 rounded-full bg-teal-500 flex items-center justify-center">
                    <i class="fas fa-user"></i>
                </div>
            </div>
        </header>

        <!-- Main Dashboard -->
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mt-8">
            <!-- Speed Card -->
            <div class="bg-slate-800 p-6 rounded-xl quantum-card hover:bg-slate-700 instant-transition cursor-pointer electric-glow" id="speed-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-slate-400">Vitesse de génération</p>
                        <h3 class="text-3xl font-bold mt-2">10,000x</h3>
                    </div>
                    <div class="text-4xl text-teal-400">
                        <i class="fas fa-tachometer-alt"></i>
                    </div>
                </div>
                <div class="mt-4 h-2 bg-slate-700 rounded-full overflow-hidden">
                    <div class="h-full bolt-gradient rounded-full" style="width: 100%"></div>
                </div>
                <p class="text-sm text-slate-400 mt-2">Performance maximale atteinte</p>
            </div>

            <!-- Templates Card -->
            <div class="bg-slate-800 p-6 rounded-xl quantum-card hover:bg-slate-700 instant-transition cursor-pointer" id="templates-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-slate-400">Modèles disponibles</p>
                        <h3 class="text-3xl font-bold mt-2">42+</h3>
                    </div>
                    <div class="text-4xl text-blue-400">
                        <i class="fas fa-layer-group"></i>
                    </div>
                </div>
                <p class="text-sm text-slate-400 mt-4">Tous secteurs couverts</p>
            </div>

            <!-- Sites Card -->
            <div class="bg-slate-800 p-6 rounded-xl quantum-card hover:bg-slate-700 instant-transition cursor-pointer" id="sites-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-slate-400">Sites générés</p>
                        <h3 class="text-3xl font-bold mt-2">∞</h3>
                    </div>
                    <div class="text-4xl text-purple-400">
                        <i class="fas fa-globe"></i>
                    </div>
                </div>
                <p class="text-sm text-slate-400 mt-4">Optimisation quantique active</p>
            </div>

            <!-- AI Card -->
            <div class="bg-slate-800 p-6 rounded-xl quantum-card hover:bg-slate-700 instant-transition cursor-pointer" id="ai-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-slate-400">IA Quantique</p>
                        <h3 class="text-3xl font-bold mt-2">100%</h3>
                    </div>
                    <div class="text-4xl text-pink-400">
                        <i class="fas fa-brain"></i>
                    </div>
                </div>
                <p class="text-sm text-slate-400 mt-4">Apprentissage profond activé</p>
            </div>
        </div>

        <!-- DeepSite Generator -->
        <div class="bg-slate-800 p-6 rounded-xl quantum-card mt-8">
            <h2 class="text-2xl font-bold mb-6 flex items-center">
                <i class="fas fa-magic text-teal-400 mr-3"></i>
                Générateur DeepSite
            </h2>
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Configuration Panel -->
                <div class="lg:col-span-1">
                    <div class="bg-slate-850 p-4 rounded-lg">
                        <h3 class="text-lg font-semibold mb-4">Configuration du site</h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium mb-1">Nom du site</label>
                                <input type="text" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2" placeholder="MonSiteQuantique" id="site-name">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium mb-1">Secteur d'activité</label>
                                <select class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2" id="industry-select">
                                    <option value="ecommerce">E-commerce</option>
                                    <option value="portfolio">Portfolio</option>
                                    <option value="corporate">Corporate</option>
                                    <option value="blog">Blog</option>
                                    <option value="saas">SaaS</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium mb-1">Style visuel</label>
                                <div class="grid grid-cols-3 gap-2">
                                    <button class="p-2 bg-slate-700 hover:bg-slate-600 rounded-lg border border-slate-600 instant-transition style-option" data-style="modern">
                                        <div class="h-8 rounded bg-gradient-to-r from-teal-500 to-blue-500 mb-1"></div>
                                        <span class="text-xs">Moderne</span>
                                    </button>
                                    <button class="p-2 bg-slate-700 hover:bg-slate-600 rounded-lg border border-slate-600 instant-transition style-option" data-style="minimal">
                                        <div class="h-8 rounded bg-gradient-to-r from-slate-100 to-slate-300 mb-1"></div>
                                        <span class="text-xs">Minimal</span>
                                    </button>
                                    <button class="p-2 bg-slate-700 hover:bg-slate-600 rounded-lg border border-slate-600 instant-transition style-option" data-style="bold">
                                        <div class="h-8 rounded bolt-gradient mb-1"></div>
                                        <span class="text-xs">Audacieux</span>
                                    </button>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium mb-1">Fonctionnalités</label>
                                <div class="space-y-2">
                                    <label class="flex items-center">
                                        <input type="checkbox" class="form-checkbox bg-slate-700 border-slate-600 rounded text-teal-400 mr-2" checked>
                                        <span>Responsive Design</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="form-checkbox bg-slate-700 border-slate-600 rounded text-blue-400 mr-2" checked>
                                        <span>Optimisation SEO</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="form-checkbox bg-slate-700 border-slate-600 rounded text-purple-400 mr-2">
                                        <span>Blog Intégré</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="form-checkbox bg-slate-700 border-slate-600 rounded text-pink-400 mr-2">
                                        <span>Formulaire de contact</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <button id="generate-site-btn" class="w-full mt-6 py-3 bolt-gradient hover:opacity-90 rounded-lg font-bold instant-transition">
                            <i class="fas fa-bolt mr-2"></i> Générer le site
                        </button>
                    </div>
                </div>
                
                <!-- Preview Panel -->
                <div class="lg:col-span-2">
                    <div class="bg-slate-850 p-4 rounded-lg h-full">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold">Aperçu en temps réel</h3>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-xs instant-transition" id="desktop-preview">
                                    <i class="fas fa-desktop mr-1"></i> Desktop
                                </button>
                                <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-xs instant-transition" id="tablet-preview">
                                    <i class="fas fa-tablet-alt mr-1"></i> Tablet
                                </button>
                                <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-xs instant-transition" id="mobile-preview">
                                    <i class="fas fa-mobile-alt mr-1"></i> Mobile
                                </button>
                            </div>
                        </div>
                        
                        <div class="preview-window mx-auto" id="preview-container">
                            <div class="bg-gray-100 p-4 border-b flex justify-between items-center">
                                <div class="text-sm font-medium">MonSiteQuantique</div>
                                <div class="flex space-x-4">
                                    <a href="#" class="text-sm hover:text-blue-600">Accueil</a>
                                    <a href="#" class="text-sm hover:text-blue-600">Services</a>
                                    <a href="#" class="text-sm hover:text-blue-600">À propos</a>
                                    <a href="#" class="text-sm hover:text-blue-600">Contact</a>
                                </div>
                            </div>
                            <div class="p-6">
                                <div class="text-center py-12">
                                    <h1 class="text-3xl font-bold mb-4">Bienvenue sur votre nouveau site</h1>
                                    <p class="text-gray-600 mb-8">Généré instantanément avec Bolt.New Plus DeepSite</p>
                                    <button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">En savoir plus</button>
                                </div>
                                <div class="grid grid-cols-3 gap-4 mt-8">
                                    <div class="bg-white p-4 rounded-lg shadow">
                                        <div class="text-blue-500 mb-2"><i class="fas fa-bolt"></i></div>
                                        <h3 class="font-medium mb-1">Rapide</h3>
                                        <p class="text-sm text-gray-500">Chargement en 0.001s</p>
                                    </div>
                                    <div class="bg-white p-4 rounded-lg shadow">
                                        <div class="text-green-500 mb-2"><i class="fas fa-lock"></i></div>
                                        <h3 class="font-medium mb-1">Sécurisé</h3>
                                        <p class="text-sm text-gray-500">Protection quantique</p>
                                    </div>
                                    <div class="bg-white p-4 rounded-lg shadow">
                                        <div class="text-purple-500 mb-2"><i class="fas fa-chart-line"></i></div>
                                        <h3 class="font-medium mb-1">Optimisé</h3>
                                        <p class="text-sm text-gray-500">SEO intégré</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-gray-800 text-white p-4 text-center text-sm">
                                © 2023 MonSiteQuantique. Tous droits réservés.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Templates Gallery -->
        <div class="bg-slate-800 p-6 rounded-xl quantum-card mt-8">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold flex items-center">
                    <i class="fas fa-boxes text-blue-400 mr-3"></i>
                    Galerie de modèles
                </h2>
                <div class="flex space-x-3">
                    <button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition active-template-filter" data-filter="all">
                        Tous
                    </button>
                    <button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition template-filter" data-filter="ecommerce">
                        E-commerce
                    </button>
                    <button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition template-filter" data-filter="portfolio">
                        Portfolio
                    </button>
                    <button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition template-filter" data-filter="corporate">
                        Corporate
                    </button>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="templates-grid">
                <!-- Template items will be added here by JavaScript -->
            </div>
        </div>

        <!-- Export Options -->
        <div class="bg-slate-800 p-6 rounded-xl quantum-card mt-8">
            <h2 class="text-2xl font-bold mb-6 flex items-center">
                <i class="fas fa-file-export text-purple-400 mr-3"></i>
                Options d'exportation
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- HTML Export -->
                <div class="bg-slate-850 p-6 rounded-lg">
                    <div class="text-4xl text-orange-400 mb-4">
                        <i class="fab fa-html5"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Export HTML</h3>
                    <p class="text-slate-400 mb-4">Code source propre et optimisé pour un déploiement instantané.</p>
                    <button class="w-full py-2 bg-orange-500 hover:bg-orange-400 rounded-lg font-medium instant-transition export-btn" data-format="html">
                        <i class="fas fa-download mr-2"></i> Télécharger HTML
                    </button>
                </div>
                
                <!-- React Export -->
                <div class="bg-slate-850 p-6 rounded-lg">
                    <div class="text-4xl text-blue-400 mb-4">
                        <i class="fab fa-react"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Export React</h3>
                    <p class="text-slate-400 mb-4">Composants React optimisés avec état intégré.</p>
                    <button class="w-full py-2 bg-blue-500 hover:bg-blue-400 rounded-lg font-medium instant-transition export-btn" data-format="react">
                        <i class="fas fa-download mr-2"></i> Télécharger React
                    </button>
                </div>
                
                <!-- Quantum Export -->
                <div class="bg-slate-850 p-6 rounded-lg">
                    <div class="text-4xl text-teal-400 mb-4">
                        <i class="fas fa-atom"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Export Quantique</h3>
                    <p class="text-slate-400 mb-4">Format propriétaire pour chargement instantané.</p>
                    <button class="w-full py-2 bolt-gradient hover:opacity-90 rounded-lg font-bold instant-transition export-btn" data-format="quantum">
                        <i class="fas fa-bolt mr-2"></i> Télécharger Quantum
                    </button>
                </div>
            </div>
        </div>

        <!-- Code Editor -->
        <div class="bg-slate-800 p-6 rounded-xl quantum-card mt-8">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold flex items-center">
                    <i class="fas fa-code text-pink-400 mr-3"></i>
                    Éditeur Quantique
                </h2>
                <div class="flex space-x-3" id="code-tabs">
                    <button class="px-4 py-2 rounded-lg instant-transition code-tab tab-active" data-tab="html">
                        HTML
                    </button>
                    <button class="px-4 py-2 rounded-lg instant-transition code-tab" data-tab="css">
                        CSS
                    </button>
                    <button class="px-4 py-2 rounded-lg instant-transition code-tab" data-tab="js">
                        JavaScript
                    </button>
                </div>
            </div>
            
            <div class="code-editor" id="html-editor">
                <div class="text-green-400">&lt;!DOCTYPE html&gt;</div>
                <div class="text-green-400">&lt;html lang="fr"&gt;</div>
                <div class="text-green-400">&lt;head&gt;</div>
                <div class="text-green-400 ml-4">&lt;meta charset="UTF-8"&gt;</div>
                <div class="text-green-400 ml-4">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</div>
                <div class="text-green-400 ml-4">&lt;title&gt;MonSiteQuantique&lt;/title&gt;</div>
                <div class="text-green-400">&lt;/head&gt;</div>
                <div class="text-green-400">&lt;body&gt;</div>
                <div class="text-green-400 ml-4">&lt;header&gt;</div>
                <div class="text-green-400 ml-8">&lt;h1&gt;Bienvenue sur mon site&lt;/h1&gt;</div>
                <div class="text-green-400 ml-4">&lt;/header&gt;</div>
                <div class="text-green-400 ml-4">&lt;main&gt;</div>
                <div class="text-green-400 ml-8">&lt;p&gt;Généré avec Bolt.New Plus DeepSite&lt;/p&gt;</div>
                <div class="text-green-400 ml-4">&lt;/main&gt;</div>
                <div class="text-green-400">&lt;/body&gt;</div>
                <div class="text-green-400">&lt;/html&gt;</div>
            </div>
            
            <div class="code-editor hidden" id="css-editor">
                <div class="text-blue-400">body {</div>
                <div class="text-blue-400 ml-4">font-family: 'Inter', sans-serif;</div>
                <div class="text-blue-400 ml-4">background-color: #f8fafc;</div>
                <div class="text-blue-400 ml-4">color: #1e293b;</div>
                <div class="text-blue-400">}</div>
                <div class="text-blue-400 mt-4">header {</div>
                <div class="text-blue-400 ml-4">background: linear-gradient(135deg, #00f5d4 0%, #00bbf9 100%);</div>
                <div class="text-blue-400 ml-4">padding: 2rem;</div>
                <div class="text-blue-400 ml-4">text-align: center;</div>
                <div class="text-blue-400">}</div>
                <div class="text-blue-400 mt-4">h1 {</div>
                <div class="text-blue-400 ml-4">font-size: 2.5rem;</div>
                <div class="text-blue-400 ml-4">font-weight: 800;</div>
                <div class="text-blue-400 ml-4">color: white;</div>
                <div class="text-blue-400">}</div>
            </div>
            
            <div class="code-editor hidden" id="js-editor">
                <div class="text-yellow-400">// Initialisation du site quantique</div>
                <div class="text-yellow-400">document.addEventListener('DOMContentLoaded', () => {</div>
                <div class="text-yellow-400 ml-4">console.log('Site quantique initialisé');</div>
                <div class="text-yellow-400">});</div>
                <div class="text-yellow-400 mt-4">// Animation quantique</div>
                <div class="text-yellow-400">function animateQuantumElements() {</div>
                <div class="text-yellow-400 ml-4">const elements = document.querySelectorAll('.quantum');</div>
                <div class="text-yellow-400 ml-4">elements.forEach(el => {</div>
                <div class="text-yellow-400 ml-8">el.style.transform = 'translateY(0)';</div>
                <div class="text-yellow-400 ml-8">el.style.opacity = '1';</div>
                <div class="text-yellow-400 ml-4">});</div>
                <div class="text-yellow-400">}</div>
            </div>
            
            <div class="flex justify-end mt-4">
                <button class="px-6 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg mr-3 instant-transition">
                    <i class="fas fa-copy mr-2"></i> Copier
                </button>
                <button class="px-6 py-2 bg-teal-500 hover:bg-teal-400 rounded-lg instant-transition">
                    <i class="fas fa-save mr-2"></i> Sauvegarder
                </button>
            </div>
        </div>
    </div>

    <script>
        // Hide loader after quantum speed simulation
        setTimeout(() => {
            document.getElementById('quantum-loader').style.display = 'none';
        }, 50);

        // Modal functions
        const modal = document.getElementById('bolt-modal');
        const closeModal = document.getElementById('close-modal');
        
        function openModal(title, content) {
            document.getElementById('modal-title').textContent = title;
            document.getElementById('modal-content').innerHTML = content;
            modal.style.display = 'block';
        }
        
        closeModal.addEventListener('click', () => {
            modal.style.display = 'none';
        });
        
        window.addEventListener('click', (event) => {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        });

        // Template gallery
        const templates = [
            {
                id: 1,
                name: "Quantum E-commerce",
                category: "ecommerce",
                description: "Boutique en ligne ultra-rapide avec paiement quantique",
                image: "linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)"
            },
            {
                id: 2,
                name: "Portfolio Neutrino",
                category: "portfolio",
                description: "Présentation élégante de vos projets avec animations fluides",
                image: "linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)"
            },
            {
                id: 3,
                name: "Corporate Singularity",
                category: "corporate",
                description: "Site d'entreprise professionnel avec gestion de contenu",
                image: "linear-gradient(135deg, #10b981 0%, #3b82f6 100%)"
            },
            {
                id: 4,
                name: "Blog Temporel",
                category: "blog",
                description: "Plateforme de blog avec recherche prédictive",
                image: "linear-gradient(135deg, #6366f1 0%, #a855f7 100%)"
            },
            {
                id: 5,
                name: "SaaS Quantum",
                category: "saas",
                description: "Interface SaaS moderne avec tableau de bord analytique",
                image: "linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%)"
            },
            {
                id: 6,
                name: "Minimal Portfolio",
                category: "portfolio",
                description: "Design épuré pour mettre en valeur votre travail",
                image: "linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)"
            }
        ];

        function renderTemplates(filter = 'all') {
            const templatesGrid = document.getElementById('templates-grid');
            templatesGrid.innerHTML = '';
            
            const filteredTemplates = filter === 'all' 
                ? templates 
                : templates.filter(t => t.category === filter);
            
            filteredTemplates.forEach(template => {
                const templateElement = document.createElement('div');
                templateElement.className = 'bg-slate-850 p-4 rounded-lg template-option cursor-pointer';
                templateElement.innerHTML = `
                    <div class="h-40 rounded-lg mb-4" style="background: ${template.image};"></div>
                    <h3 class="font-semibold mb-1">${template.name}</h3>
                    <p class="text-sm text-slate-400 mb-3">${template.description}</p>
                    <button class="w-full py-2 bg-slate-700 hover:bg-slate-600 rounded-lg text-sm instant-transition template-select-btn" data-id="${template.id}">
                        <i class="fas fa-eye mr-2"></i> Prévisualiser
                    </button>
                `;
                templatesGrid.appendChild(templateElement);
            });
            
            // Add event listeners to template select buttons
            document.querySelectorAll('.template-select-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const templateId = e.target.getAttribute('data-id');
                    const selectedTemplate = templates.find(t => t.id == templateId);
                    openModal(`Template: ${selectedTemplate.name}`, `
                        <div class="space-y-6">
                            <div class="h-64 rounded-lg" style="background: ${selectedTemplate.image};"></div>
                            <div class="bg-slate-850 p-4 rounded-lg">
                                <h3 class="font-semibold mb-2">${selectedTemplate.name}</h3>
                                <p class="text-slate-400 mb-4">${selectedTemplate.description}</p>
                                <div class="flex justify-between">
                                    <span class="text-sm bg-slate-700 px-3 py-1 rounded-full">${selectedTemplate.category}</span>
                                    <button class="px-4 py-1 bg-teal-500 hover:bg-teal-400 rounded-lg text-sm instant-transition use-template-btn" data-id="${templateId}">
                                        Utiliser ce modèle
                                    </button>
                                </div>
                            </div>
                        </div>
                    `);
                    
                    // Add event listener to "Use this template" button in modal
                    document.querySelector('.use-template-btn').addEventListener('click', () => {
                        // Update the preview with selected template
                        updatePreview(selectedTemplate);
                        modal.style.display = 'none';
                    });
                });
            });
        }

        // Filter templates
        document.querySelectorAll('.template-filter').forEach(filter => {
            filter.addEventListener('click', (e) => {
                const category = e.target.getAttribute('data-filter');
                renderTemplates(category);
                
                // Update active filter
                document.querySelectorAll('.template-filter').forEach(f => f.classList.remove('bg-blue-500', 'text-white'));
                document.querySelectorAll('.template-filter').forEach(f => f.classList.add('bg-slate-700'));
                e.target.classList.remove('bg-slate-700');
                e.target.classList.add('bg-blue-500', 'text-white');
            });
        });

        // Initial render
        renderTemplates();

        // Style options
        document.querySelectorAll('.style-option').forEach(option => {
            option.addEventListener('click', (e) => {
                const style = e.target.getAttribute('data-style');
                
                // Update active style
                document.querySelectorAll('.style-option').forEach(o => o.classList.remove('border-teal-400'));
                e.target.classList.add('border-teal-400');
                
                // Update preview based on style
                // This would be more complex in a real implementation
            });
        });

        // Code tabs
        document.querySelectorAll('.code-tab').forEach(tab => {
            tab.addEventListener('click', (e) => {
                const tabName = e.target.getAttribute('data-tab');
                
                // Hide all editors
                document.querySelectorAll('.code-editor').forEach(editor => {
                    editor.classList.add('hidden');
                });
                
                // Show selected editor
                document.getElementById(`${tabName}-editor`).classList.remove('hidden');
                
                // Update active tab
                document.querySelectorAll('.code-tab').forEach(t => t.classList.remove('bg-blue-500', 'text-white'));
                document.querySelectorAll('.code-tab').forEach(t => t.classList.add('bg-slate-700'));
                e.target.classList.remove('bg-slate-700');
                e.target.classList.add('bg-blue-500', 'text-white');
            });
        });

        // Preview device buttons
        document.getElementById('desktop-preview').addEventListener('click', () => {
            document.getElementById('preview-container').className = 'preview-window mx-auto';
        });
        
        document.getElementById('tablet-preview').addEventListener('click', () => {
            document.getElementById('preview-container').className = 'preview-window mx-auto max-w-md';
        });
        
        document.getElementById('mobile-preview').addEventListener('click', () => {
            document.getElementById('preview-container').className = 'preview-window mx-auto max-w-xs';
        });

        // Generate site button
        document.getElementById('generate-site-btn').addEventListener('click', () => {
            const siteName = document.getElementById('site-name').value || 'MonSiteQuantique';
            const industry = document.getElementById('industry-select').value;
            
            openModal('Génération en cours', `
                <div class="text-center py-8">
                    <div class="inline-block p-6 rounded-full bg-slate-800 mb-4 bolt-animation">
                        <i class="fas fa-bolt text-teal-400 text-4xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-2">Génération de "${siteName}"</h3>
                    <p class="text-slate-400 mb-6">Utilisation de l'IA quantique pour créer votre site parfait...</p>
                    
                    <div class="w-full bg-slate-700 rounded-full h-2 mb-6">
                        <div class="h-full bolt-gradient rounded-full" style="width: 0%" id="generation-progress"></div>
                    </div>
                    
                    <div class="grid grid-cols-4 gap-4 text-center text-sm" id="generation-steps">
                        <div>
                            <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mx-auto mb-1">
                                <i class="fas fa-cube"></i>
                            </div>
                            <span>Structure</span>
                        </div>
                        <div>
                            <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mx-auto mb-1">
                                <i class="fas fa-palette"></i>
                            </div>
                            <span>Design</span>
                        </div>
                        <div>
                            <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mx-auto mb-1">
                                <i class="fas fa-code"></i>
                            </div>
                            <span>Code</span>
                        </div>
                        <div>
                            <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mx-auto mb-1">
                                <i class="fas fa-rocket"></i>
                            </div>
                            <span>Optimisation</span>
                        </div>
                    </div>
                </div>
            `);
            
            // Simulate generation progress
            let progress = 0;
            const progressInterval = setInterval(() => {
                progress += 5;
                document.getElementById('generation-progress').style.width = `${progress}%`;
                
                if (progress >= 100) {
                    clearInterval(progressInterval);
                    setTimeout(() => {
                        document.getElementById('modal-content').innerHTML = `
                            <div class="text-center py-8">
                                <div class="inline-block p-6 rounded-full bg-green-500 bg-opacity-20 mb-4">
                                    <i class="fas fa-check text-green-400 text-4xl"></i>
                                </div>
                                <h3 class="text-2xl font-bold mb-2">Site généré avec succès!</h3>
                                <p class="text-slate-400 mb-6">Votre site "${siteName}" est prêt à être déployé.</p>
                                
                                <div class="grid grid-cols-2 gap-4">
                                    <button class="py-2 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition" id="view-site-btn">
                                        <i class="fas fa-eye mr-2"></i> Voir le site
                                    </button>
                                    <button class="py-2 bg-teal-500 hover:bg-teal-400 rounded-lg instant-transition" id="export-site-btn">
                                        <i class="fas fa-download mr-2"></i> Exporter
                                    </button>
                                </div>
                            </div>
                        `;
                        
                        // Add event listeners to new buttons
                        document.getElementById('view-site-btn').addEventListener('click', () => {
                            openModal('Aperçu du site', `
                                <div class="preview-window">
                                    <div class="bg-gray-100 p-4 border-b flex justify-between items-center">
                                        <div class="text-sm font-medium">${siteName}</div>
                                        <div class="flex space-x-4">
                                            <a href="#" class="text-sm hover:text-blue-600">Accueil</a>
                                            <a href="#" class="text-sm hover:text-blue-600">Services</a>
                                            <a href="#" class="text-sm hover:text-blue-600">À propos</a>
                                            <a href="#" class="text-sm hover:text-blue-600">Contact</a>
                                        </div>
                                    </div>
                                    <div class="p-6">
                                        <div class="text-center py-12">
                                            <h1 class="text-3xl font-bold mb-4">Bienvenue sur ${siteName}</h1>
                                            <p class="text-gray-600 mb-8">Votre site ${industry} généré avec Bolt.New Plus</p>
                                            <button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Découvrir</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-4 flex justify-center">
                                    <button class="px-6 py-2 bg-blue-500 hover:bg-blue-400 rounded-lg instant-transition">
                                        <i class="fas fa-external-link-alt mr-2"></i> Ouvrir en plein écran
                                    </button>
                                </div>
                            `);
                        });
                        
                        document.getElementById('export-site-btn').addEventListener('click', () => {
                            openModal('Options d\'exportation', `
                                <div class="space-y-4">
                                    <div class="bg-slate-850 p-4 rounded-lg">
                                        <h3 class="font-semibold mb-3">Format d'exportation</h3>
                                        <div class="grid grid-cols-3 gap-3">
                                            <button class="p-3 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition export-option" data-format="html">
                                                <i class="fab fa-html5 text-orange-400 text-2xl mb-2"></i>
                                                <span>HTML</span>
                                            </button>
                                            <button class="p-3 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition export-option" data-format="react">
                                                <i class="fab fa-react text-blue-400 text-2xl mb-2"></i>
                                                <span>React</span>
                                            </button>
                                            <button class="p-3 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition export-option" data-format="quantum">
                                                <i class="fas fa-atom text-teal-400 text-2xl mb-2"></i>
                                                <span>Quantum</span>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="bg-slate-850 p-4 rounded-lg">
                                        <h3 class="font-semibold mb-3">Destination</h3>
                                        <div class="grid grid-cols-2 gap-3">
                                            <button class="p-3 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition">
                                                <i class="fas fa-cloud text-blue-400 text-2xl mb-2"></i>
                                                <span>Bolt Cloud</span>
                                            </button>
                                            <button class="p-3 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition">
                                                <i class="fas fa-server text-purple-400 text-2xl mb-2"></i>
                                                <span>FTP</span>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <button class="w-full py-3 bg-teal-500 hover:bg-teal-400 rounded-lg font-medium instant-transition">
                                        <i class="fas fa-file-export mr-2"></i> Exporter le site
                                    </button>
                                </div>
                            `);
                        });
                    }, 1000);
                }
                
                // Update generation steps
                if (progress >= 25) {
                    document.querySelector('#generation-steps div:nth-child(1) div').className = 'w-8 h-8 rounded-full bg-teal-500 flex items-center justify-center mx-auto mb-1';
                    document.querySelector('#generation-steps div:nth-child(1) div i').className = 'fas fa-check';
                }
                if (progress >= 50) {
                    document.querySelector('#generation-steps div:nth-child(2) div').className = 'w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mx-auto mb-1';
                    document.querySelector('#generation-steps div:nth-child(2) div i').className = 'fas fa-check';
                }
                if (progress >= 75) {
                    document.querySelector('#generation-steps div:nth-child(3) div').className = 'w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center mx-auto mb-1';
                    document.querySelector('#generation-steps div:nth-child(3) div i').className = 'fas fa-check';
                }
            }, 100);
        });

        // Export buttons
        document.querySelectorAll('.export-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const format = e.target.getAttribute('data-format');
                let formatName = '';
                let icon = '';
                let color = '';
                
                switch(format) {
                    case 'html':
                        formatName = 'HTML';
                        icon = 'fab fa-html5';
                        color = 'orange';
                        break;
                    case 'react':
                        formatName = 'React';
                        icon = 'fab fa-react';
                        color = 'blue';
                        break;
                    case 'quantum':
                        formatName = 'Quantum';
                        icon = 'fas fa-atom';
                        color = 'teal';
                        break;
                }
                
                // Show error message with animation
                const errorMessage = `
                    <div class="shake-animation">
                        <div class="bg-slate-800 p-6 rounded-xl error-card mb-6">
                            <div class="flex items-start">
                                <div class="bg-red-500 bg-opacity-20 p-3 rounded-lg mr-4">
                                    <i class="fas fa-exclamation-triangle text-red-400 text-xl"></i>
                                </div>
                                <div>
                                    <h3 class="font-bold text-lg mb-1">Exportation Impossible</h3>
                                    <p class="text-slate-400">La fonctionnalité d'exportation est temporairement désactivée pour maintenance quantique.</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-center">
                            <div class="inline-block p-6 rounded-full bg-${color}-500 bg-opacity-20 mb-4">
                                <i class="${icon} text-${color}-400 text-4xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-2">Export ${formatName}</h3>
                            <p class="text-slate-400 mb-6">Préparation de votre site au format ${formatName}...</p>
                            
                            <div class="w-full bg-slate-700 rounded-full h-2 mb-6">
                                <div class="h-full bg-red-500 rounded-full" style="width: 100%" id="export-progress"></div>
                            </div>
                            
                            <div class="bg-slate-800 p-4 rounded-lg text-left mb-6">
                                <div class="flex justify-between text-sm mb-2">
                                    <span>Statut</span>
                                    <span class="font-mono text-red-400">ERREUR</span>
                                </div>
                                <div class="flex justify-between text-sm mb-2">
                                    <span>Code</span>
                                    <span class="font-mono">D4EXPORTER_FAULT</span>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <span>Message</span>
                                    <span class="font-mono">Fonction non disponible</span>
                                </div>
                            </div>
                            
                            <button class="px-6 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg font-medium instant-transition">
                                <i class="fas fa-question-circle mr-2"></i> Aide technique
                            </button>
                        </div>
                    </div>
                `;
                
                openModal(`Export ${formatName}`, errorMessage);
            });
        });

        // Update preview function
        function updatePreview(template) {
            const previewContainer = document.getElementById('preview-container');
            const siteName = document.getElementById('site-name').value || 'MonSiteQuantique';
            
            // This would be more sophisticated in a real implementation
            previewContainer.innerHTML = `
                <div class="bg-gray-100 p-4 border-b flex justify-between items-center">
                    <div class="text-sm font-medium">${siteName}</div>
                    <div class="flex space-x-4">
                        <a href="#" class="text-sm hover:text-blue-600">Accueil</a>
                        <a href="#" class="text-sm hover:text-blue-600">Services</a>
                        <a href="#" class="text-sm hover:text-blue-600">À propos</a>
                        <a href="#" class="text-sm hover:text-blue-600">Contact</a>
                    </div>
                </div>
                <div class="p-6">
                    <div class="text-center py-12">
                        <h1 class="text-3xl font-bold mb-4">Bienvenue sur ${siteName}</h1>
                        <p class="text-gray-600 mb-8">Modèle: ${template.name}</p>
                        <button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">En savoir plus</button>
                    </div>
                    <div class="grid grid-cols-3 gap-4 mt-8">
                        <div class="bg-white p-4 rounded-lg shadow">
                            <div class="text-blue-500 mb-2"><i class="fas fa-bolt"></i></div>
                            <h3 class="font-medium mb-1">Rapide</h3>
                            <p class="text-sm text-gray-500">Chargement en 0.001s</p>
                        </div>
                        <div class="bg-white p-4 rounded-lg shadow">
                            <div class="text-green-500 mb-2"><i class="fas fa-lock"></i></div>
                            <h3 class="font-medium mb-1">Sécurisé</h3>
                            <p class="text-sm text-gray-500">Protection quantique</p>
                        </div>
                        <div class="bg-white p-4 rounded-lg shadow">
                            <div class="text-purple-500 mb-2"><i class="fas fa-chart-line"></i></div>
                            <h3 class="font-medium mb-1">Optimisé</h3>
                            <p class="text-sm text-gray-500">SEO intégré</p>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-800 text-white p-4 text-center text-sm">
                    © 2023 ${siteName}. Tous droits réservés.
                </div>
            `;
        }

        // Card click handlers
        document.getElementById('speed-card').addEventListener('click', () => {
            openModal('Vitesse Quantique', `
                <div class="text-center py-4">
                    <div class="inline-block p-6 rounded-full bg-slate-800 mb-4">
                        <i class="fas fa-tachometer-alt text-5xl bolt-gradient text-transparent bg-clip-text"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-2">10,000x Vitesse Standard</h3>
                    <p class="text-slate-400 mb-6">Notre technologie quantique dépasse toutes les limites de vitesse connues</p>
                    <div class="bg-slate-800 p-4 rounded-lg mb-6">
                        <div class="flex justify-between text-sm mb-2">
                            <span>Latence</span>
                            <span class="font-mono">0.0001ms</span>
                        </div>
        </div>
    </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/corrector" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>