Spaces:

Abmacode12
/

espace-codage

Configuration error

App Files Files Community

Abmacode12 commited on Dec 16, 2025

Commit

ce4176c

verified ·

1 Parent(s): 5ca5f94

Manual changes saved

Browse files

Files changed (1) hide show

index.html +920 -1

index.html CHANGED Viewed

@@ -793,4 +793,923 @@ export async function llmChat(messages: Msg[]) {
   const data: any = await res.json();
   return data?.message?.content ?? "Rosalinda: (réponse vide)";
-}

   const data: any = await res.json();
   return data?.message?.content ?? "Rosalinda: (réponse vide)";
+}
+html
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mini Constructeur de Site Web IA</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            color: #333;
+        }
+        header {
+            background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
+            color: white;
+            padding: 20px;
+            text-align: center;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+        }
+        header p {
+            font-size: 1.2rem;
+            opacity: 0.9;
+        }
+        .container {
+            display: flex;
+            flex: 1;
+            padding: 20px;
+            gap: 20px;
+        }
+        .toolbox {
+            width: 250px;
+            background: white;
+            border-radius: 15px;
+            padding: 20px;
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+        .toolbox h2 {
+            color: #4b6cb7;
+            margin-bottom: 10px;
+            font-size: 1.8rem;
+        }
+        .toolbox button {
+            padding: 15px;
+            border: none;
+            border-radius: 10px;
+            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+            color: white;
+            font-size: 1.1rem;
+            cursor: pointer;
+            transition: transform 0.3s, box-shadow 0.3s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+        }
+        .toolbox button:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 5px 15px rgba(106, 17, 203, 0.4);
+        }
+        .toolbox button i {
+            font-size: 1.5rem;
+        }
+        .canvas {
+            flex: 1;
+            background: white;
+            border-radius: 15px;
+            padding: 20px;
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+            overflow-y: auto;
+            position: relative;
+            min-height: 600px;
+        }
+        .canvas h2 {
+            color: #4b6cb7;
+            margin-bottom: 20px;
+            font-size: 1.8rem;
+        }
+        .element {
+            border: 2px dashed #4b6cb7;
+            border-radius: 10px;
+            padding: 20px;
+            margin-bottom: 20px;
+            cursor: move;
+            transition: all 0.3s;
+            position: relative;
+            background: white;
+        }
+        .element:hover {
+            border-color: #2575fc;
+            background: #f8f9ff;
+        }
+        .element.selected {
+            border: 2px solid #2575fc;
+            background: #f0f4ff;
+        }
+        .element .delete-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: #ff4757;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            padding: 5px 10px;
+            cursor: pointer;
+            display: none;
+        }
+        .element:hover .delete-btn {
+            display: block;
+        }
+        .element .edit-btn {
+            position: absolute;
+            top: 10px;
+            right: 60px;
+            background: #2ed573;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            padding: 5px 10px;
+            cursor: pointer;
+            display: none;
+        }
+        .element:hover .edit-btn {
+            display: block;
+        }
+        .properties {
+            width: 300px;
+            background: white;
+            border-radius: 15px;
+            padding: 20px;
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+        .properties h2 {
+            color: #4b6cb7;
+            margin-bottom: 10px;
+            font-size: 1.8rem;
+        }
+        .properties input, .properties select, .properties textarea {
+            padding: 12px;
+            border: 2px solid #ddd;
+            border-radius: 8px;
+            font-size: 1rem;
+            transition: border 0.3s;
+        }
+        .properties input:focus, .properties select:focus, .properties textarea:focus {
+            border-color: #4b6cb7;
+            outline: none;
+        }
+        .properties label {
+            font-weight: bold;
+            color: #555;
+            margin-top: 10px;
+        }
+        .ai-panel {
+            background: white;
+            border-radius: 15px;
+            padding: 20px;
+            margin: 20px;
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+        .ai-panel h2 {
+            color: #4b6cb7;
+            font-size: 1.8rem;
+        }
+        .ai-panel textarea {
+            padding: 12px;
+            border: 2px solid #ddd;
+            border-radius: 8px;
+            font-size: 1rem;
+            min-height: 100px;
+            resize: vertical;
+        }
+        .ai-panel button {
+            padding: 15px;
+            border: none;
+            border-radius: 10px;
+            background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
+            color: white;
+            font-size: 1.1rem;
+            cursor: pointer;
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+        .ai-panel button:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 5px 15px rgba(255, 126, 95, 0.4);
+        }
+        footer {
+            background: linear-gradient(90deg, #182848 0%, #4b6cb7 100%);
+            color: white;
+            text-align: center;
+            padding: 15px;
+            font-size: 1.1rem;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            justify-content: center;
+            align-items: center;
+        }
+        .modal-content {
+            background: white;
+            padding: 30px;
+            border-radius: 15px;
+            width: 500px;
+            max-width: 90%;
+            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
+            position: relative;
+        }
+        .close-modal {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            font-size: 2rem;
+            cursor: pointer;
+            color: #aaa;
+        }
+        .close-modal:hover {
+            color: #000;
+        }
+        .modal h2 {
+            color: #4b6cb7;
+            margin-bottom: 20px;
+            font-size: 2rem;
+        }
+        .modal textarea {
+            width: 100%;
+            min-height: 200px;
+            padding: 15px;
+            border: 2px solid #ddd;
+            border-radius: 10px;
+            font-family: monospace;
+            font-size: 1rem;
+            margin-bottom: 20px;
+            resize: vertical;
+        }
+        .modal button {
+            padding: 15px 30px;
+            border: none;
+            border-radius: 10px;
+            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+            color: white;
+            font-size: 1.2rem;
+            cursor: pointer;
+            transition: transform 0.3s, box-shadow 0.3s;
+            width: 100%;
+        }
+        .modal button:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 5px 15px rgba(106, 17, 203, 0.4);
+        }
+        .generate-btn {
+            padding: 20px;
+            border: none;
+            border-radius: 15px;
+            background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
+            color: white;
+            font-size: 1.5rem;
+            cursor: pointer;
+            transition: transform 0.3s, box-shadow 0.3s;
+            margin: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 15px;
+        }
+        .generate-btn:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 176, 155, 0.4);
+        }
+        .generate-btn i {
+            font-size: 2rem;
+        }
+    </style>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body>
+    <header>
+        <h1><i class="fas fa-magic"></i> Mini Constructeur de Site Web IA</h1>
+        <p>Glissez-déposez des éléments, personnalisez et générez votre site web en quelques clics !</p>
+    </header>
+    <div class="container">
+        <div class="toolbox">
+            <h2><i class="fas fa-tools"></i> Boîte à outils</h2>
+            <button id="add-title"><i class="fas fa-heading"></i> Ajouter un titre</button>
+            <button id="add-paragraph"><i class="fas fa-paragraph"></i> Ajouter un paragraphe</button>
+            <button id="add-image"><i class="fas fa-image"></i> Ajouter une image</button>
+            <button id="add-button"><i class="fas fa-square"></i> Ajouter un bouton</button>
+            <button id="add-section"><i class="fas fa-layer-group"></i> Ajouter une section</button>
+            <h2 style="margin-top: 30px;"><i class="fas fa-palette"></i> Thèmes rapides</h2>
+            <button id="theme-modern"><i class="fas fa-star"></i> Moderne</button>
+            <button id="theme-classic"><i class="fas fa-landmark"></i> Classique</button>
+            <button id="theme-dark"><i class="fas fa-moon"></i> Sombre</button>
+        </div>
+        <div class="canvas" id="canvas">
+            <h2><i class="fas fa-paint-brush"></i> Votre Canva</h2>
+            <p style="color: #666; margin-bottom: 20px;">Glissez les éléments ici et personnalisez-les.</p>
+            <!-- Les éléments ajoutés apparaîtront ici -->
+        </div>
+        <div class="properties" id="properties-panel">
+            <h2><i class="fas fa-sliders-h"></i> Propriétés</h2>
+            <p style="color: #666;">Sélectionnez un élément pour le personnaliser.</p>
+            <!-- Les contrôles de propriétés seront ajoutés dynamiquement -->
+        </div>
+    </div>
+    <div class="ai-panel">
+        <h2><i class="fas fa-robot"></i> Assistant IA</h2>
+        <p>Utilisez l'IA pour générer du contenu pour votre site. Entrez une description et choisissez le type de contenu.</p>
+        <textarea id="ai-prompt" placeholder="Exemple : Un titre accrocheur pour un site de restaurant italien..."></textarea>
+        <select id="ai-content-type">
+            <option value="title">Titre</option>
+            <option value="paragraph">Paragraphe</option>
+            <option value="button">Texte de bouton</option>
+            <option value="section">Section complète</option>
+        </select>
+        <button id="generate-ai-content"><i class="fas fa-bolt"></i> Générer avec l'IA</button>
+        <small>Remarque : Vous devez configurer votre propre clé API OpenAI dans le code pour utiliser cette fonctionnalité.</small>
+    </div>
+    <button class="generate-btn" id="generate-site">
+        <i class="fas fa-rocket"></i> Générer et Télécharger le Site Web
+    </button>
+    <footer>
+        <p>Mini Constructeur de Site Web IA &copy; 2024 - Développé avec <i class="fas fa-heart" style="color: #ff4757;"></i> pour démontrer les capacités de génération de code</p>
+    </footer>
+    <!-- Modal pour afficher le code généré -->
+    <div class="modal" id="code-modal">
+        <div class="modal-content">
+            <span class="close-modal" id="close-modal">&times;</span>
+            <h2><i class="fas fa-code"></i> Code généré</h2>
+            <p>Voici le code HTML et CSS de votre site web. Copiez-le ou téléchargez-le.</p>
+            <textarea id="generated-code" readonly></textarea>
+            <button id="download-code"><i class="fas fa-download"></i> Télécharger le code</button>
+        </div>
+    </div>
+    <script>
+        // État de l'application
+        let elements = [];
+        let selectedElementId = null;
+        let elementCounter = 0;
+        // Références aux éléments DOM
+        const canvas = document.getElementById('canvas');
+        const propertiesPanel = document.getElementById('properties-panel');
+        const generateSiteBtn = document.getElementById('generate-site');
+        const codeModal = document.getElementById('code-modal');
+        const generatedCodeTextarea = document.getElementById('generated-code');
+        const closeModalBtn = document.getElementById('close-modal');
+        const downloadCodeBtn = document.getElementById('download-code');
+        // Initialisation
+        document.addEventListener('DOMContentLoaded', function() {
+            // Ajouter les écouteurs d'événements pour les boutons d'ajout d'éléments
+            document.getElementById('add-title').addEventListener('click', () => addElement('title'));
+            document.getElementById('add-paragraph').addEventListener('click', () => addElement('paragraph'));
+            document.getElementById('add-image').addEventListener('click', () => addElement('image'));
+            document.getElementById('add-button').addEventListener('click', () => addElement('button'));
+            document.getElementById('add-section').addEventListener('click', () => addElement('section'));
+            // Écouteurs pour les thèmes rapides
+            document.getElementById('theme-modern').addEventListener('click', () => applyTheme('modern'));
+            document.getElementById('theme-classic').addEventListener('click', () => applyTheme('classic'));
+            document.getElementById('theme-dark').addEventListener('click', () => applyTheme('dark'));
+            // Écouteur pour générer le site
+            generateSiteBtn.addEventListener('click', generateAndDownloadSite);
+            // Écouteurs pour la modal
+            closeModalBtn.addEventListener('click', () => codeModal.style.display = 'none');
+            downloadCodeBtn.addEventListener('click', downloadGeneratedCode);
+            // Écouteur pour fermer la modal en cliquant en dehors
+            window.addEventListener('click', (event) => {
+                if (event.target === codeModal) {
+                    codeModal.style.display = 'none';
+                }
+            });
+            // Écouteur pour l'IA (fonctionnalité basique)
+            document.getElementById('generate-ai-content').addEventListener('click', generateAIContent);
+            // Afficher les propriétés par défaut
+            updatePropertiesPanel();
+        });
+        // Fonction pour ajouter un nouvel élément
+        function addElement(type) {
+            elementCounter++;
+            const id = `element-${elementCounter}`;
+            let content = '';
+            let tag = 'div';
+            let defaultStyles = {};
+            switch (type) {
+                case 'title':
+                    content = 'Mon Titre Accrocheur';
+                    tag = 'h2';
+                    defaultStyles = {
+                        fontSize: '32px',
+                        fontWeight: 'bold',
+                        color: '#2c3e50',
+                        marginBottom: '20px'
+                    };
+                    break;
+                case 'paragraph':
+                    content = 'Ceci est un paragraphe de texte. Vous pouvez le modifier en double-cliquant dessus ou via le panneau de propriétés.';
+                    tag = 'p';
+                    defaultStyles = {
+                        fontSize: '18px',
+                        lineHeight: '1.6',
+                        color: '#34495e',
+                        marginBottom: '20px'
+                    };
+                    break;
+                case 'image':
+                    content = '<img src="https://via.placeholder.com/400x250/4b6cb7/ffffff?text=Image+Exemple" alt="Exemple" style="width:100%; border-radius:10px;">';
+                    tag = 'div';
+                    defaultStyles = {
+                        marginBottom: '20px'
+                    };
+                    break;
+                case 'button':
+                    content = 'Cliquez ici';
+                    tag = 'button';
+                    defaultStyles = {
+                        backgroundColor: '#4b6cb7',
+                        color: 'white',
+                        padding: '15px 30px',
+                        border: 'none',
+                        borderRadius: '8px',
+                        fontSize: '18px',
+                        cursor: 'pointer',
+                        marginBottom: '20px'
+                    };
+                    break;
+                case 'section':
+                    content = '<h3>Nouvelle Section</h3><p>Contenu de la section...</p>';
+                    tag = 'section';
+                    defaultStyles = {
+                        backgroundColor: '#f8f9fa',
+                        padding: '30px',
+                        borderRadius: '15px',
+                        marginBottom: '30px',
+                        borderLeft: '5px solid #4b6cb7'
+                    };
+                    break;
+            }
+            const element = {
+                id,
+                type,
+                tag,
+                content,
+                styles: defaultStyles,
+                classes: []
+            };
+            elements.push(element);
+            renderElement(element);
+            selectElement(id);
+        }
+        // Fonction pour rendre un élément sur le canevas
+        function renderElement(element) {
+            // Créer l'élément DOM
+            const el = document.createElement('div');
+            el.id = element.id;
+            el.className = 'element';
+            el.innerHTML = `
+                ${element.type === 'image' ? element.content : `<${element.tag}>${element.content}</${element.tag}>`}
+                <button class="delete-btn" data-id="${element.id}"><i class="fas fa-trash"></i></button>
+                <button class="edit-btn" data-id="${element.id}"><i class="fas fa-edit"></i></button>
+            `;
+            // Appliquer les styles
+            Object.keys(element.styles).forEach(style => {
+                el.style[style] = element.styles[style];
+            });
+            // Ajouter des écouteurs d'événements
+            el.addEventListener('click', (e) => {
+                if (!e.target.closest('.delete-btn') && !e.target.closest('.edit-btn')) {
+                    selectElement(element.id);
+                }
+            });
+            // Double-clic pour éditer le texte (si ce n'est pas une image)
+            if (element.type !== 'image') {
+                el.addEventListener('dblclick', () => {
+                    const currentText = el.querySelector(`${element.tag}`).innerText;
+                    const newText = prompt('Modifier le texte:', currentText);
+                    if (newText !== null) {
+                        element.content = newText;
+                        el.querySelector(`${element.tag}`).innerText = newText;
+                        updatePropertiesPanel();
+                    }
+                });
+            }
+            // Bouton supprimer
+            el.querySelector('.delete-btn').addEventListener('click', (e) => {
+                e.stopPropagation();
+                deleteElement(element.id);
+            });
+            // Bouton éditer (ouvre le panneau de propriétés)
+            el.querySelector('.edit-btn').addEventListener('click', (e) => {
+                e.stopPropagation();
+                selectElement(element.id);
+            });
+            // Rendre l'élément glissable
+            el.draggable = true;
+            el.addEventListener('dragstart', (e) => {
+                e.dataTransfer.setData('text/plain', element.id);
+            });
+            // Ajouter au canevas
+            canvas.appendChild(el);
+            // Zone de dépôt pour le glisser-déposer
+            canvas.addEventListener('dragover', (e) => e.preventDefault());
+            canvas.addEventListener('drop', (e) => {
+                e.preventDefault();
+                const id = e.dataTransfer.getData('text/plain');
+                const draggedEl = document.getElementById(id);
+                if (draggedEl) {
+                    // On pourrait implémenter un repositionnement plus sophistiqué ici
+                    // Pour l'exemple, on ne change pas la position
+                }
+            });
+        }
+        // Fonction pour supprimer un élément
+        function deleteElement(id) {
+            elements = elements.filter(el => el.id !== id);
+            document.getElementById(id)?.remove();
+            if (selectedElementId === id) {
+                selectedElementId = null;
+                updatePropertiesPanel();
+            }
+        }
+        // Fonction pour sélectionner un élément
+        function selectElement(id) {
+            // Désélectionner l'élément précédent
+            if (selectedElementId) {
+                const prevEl = document.getElementById(selectedElementId);
+                if (prevEl) prevEl.classList.remove('selected');
+            }
+            // Sélectionner le nouvel élément
+            selectedElementId = id;
+            const currentEl = document.getElementById(id);
+            if (currentEl) {
+                currentEl.classList.add('selected');
+            }
+            updatePropertiesPanel();
+        }
+        // Fonction pour mettre à jour le panneau de propriétés
+        function updatePropertiesPanel() {
+            propertiesPanel.innerHTML = '<h2><i class="fas fa-sliders-h"></i> Propriétés</h2>';
+            if (!selectedElementId) {
+                propertiesPanel.innerHTML += '<p style="color:#666;">Sélectionnez un élément pour le personnaliser.</p>';
+                return;
+            }
+            const element = elements.find(el => el.id === selectedElementId);
+            if (!element) return;
+            // Afficher les propriétés de l'élément sélectionné
+            propertiesPanel.innerHTML += `
+                <p><strong>Type:</strong> ${element.type}</p>
+                <label for="edit-content">Contenu:</label>
+                <textarea id="edit-content">${element.type === 'image' ? 'Image (non modifiable)' : element.content}</textarea>
+                <label for="edit-font-size">Taille de police:</label>
+                <input type="text" id="edit-font-size" value="${element.styles.fontSize || '16px'}">
+                <label for="edit-color">Couleur:</label>
+                <input type="color" id="edit-color" value="${element.styles.color || '#000000'}">
+                <label for="edit-bg-color">Couleur de fond:</label>
+                <input type="color" id="edit-bg-color" value="${element.styles.backgroundColor || '#ffffff'}">
+                <label for="edit-padding">Padding:</label>
+                <input type="text" id="edit-padding" value="${element.styles.padding || '0px'}">
+                <label for="edit-margin">Margin:</label>
+                <input type="text" id="edit-margin" value="${element.styles.margin || '0px'}">
+                <button id="apply-properties"><i class="fas fa-check"></i> Appliquer les modifications</button>
+            `;
+            // Écouteur pour appliquer les modifications
+            document.getElementById('apply-properties').addEventListener('click', () => {
+                applyProperties(element);
+            });
+        }
+        // Fonction pour appliquer les propriétés modifiées
+        function applyProperties(element) {
+            // Mettre à jour le contenu
+            if (element.type !== 'image') {
+                const newContent = document.getElementById('edit-content').value;
+                element.content = newContent;
+            }
+            // Mettre à jour les styles
+            const styles = {
+                fontSize: document.getElementById('edit-font-size').value,
+                color: document.getElementById('edit-color').value,
+                backgroundColor: document.getElementById('edit-bg-color').value,
+                padding: document.getElementById('edit-padding').value,
+                margin: document.getElementById('edit-margin').value
+            };
+            // Appliquer les styles non vides
+            Object.keys(styles).forEach(style => {
+                if (styles[style]) {
+                    element.styles[style] = styles[style];
+                }
+            });
+            // Re-rendre l'élément
+            const el = document.getElementById(element.id);
+            if (el) {
+                if (element.type !== 'image') {
+                    el.querySelector(element.tag).innerText = element.content;
+                }
+                Object.keys(element.styles).forEach(style => {
+                    el.style[style] = element.styles[style];
+                });
+            }
+        }
+        // Fonction pour appliquer un thème rapide
+        function applyTheme(themeName) {
+            const themes = {
+                modern: {
+                    backgroundColor: '#ffffff',
+                    primaryColor: '#4b6cb7',
+                    secondaryColor: '#2575fc',
+                    fontFamily: "'Segoe UI', sans-serif"
+                },
+                classic: {
+                    backgroundColor: '#f8f4e9',
+                    primaryColor: '#8b4513',
+                    secondaryColor: '#d2691e',
+                    fontFamily: "'Times New Roman', serif"
+                },
+                dark: {
+                    backgroundColor: '#2c3e50',
+                    primaryColor: '#1abc9c',
+                    secondaryColor: '#3498db',
+                    fontFamily: "'Arial', sans-serif"
+                }
+            };
+            const theme = themes[themeName];
+            // Appliquer le thème au body
+            document.body.style.backgroundColor = theme.backgroundColor;
+            document.body.style.color = theme.primaryColor;
+            document.body.style.fontFamily = theme.fontFamily;
+            // Appliquer le thème aux éléments existants
+            elements.forEach(element => {
+                if (element.type === 'title' || element.type === 'paragraph') {
+                    element.styles.color = theme.primaryColor;
+                }
+                if (element.type === 'button') {
+                    element.styles.backgroundColor = theme.secondaryColor;
+                }
+                if (element.type === 'section') {
+                    element.styles.backgroundColor = theme.backgroundColor;
+                    element.styles.borderLeftColor = theme.secondaryColor;
+                }
+                // Re-rendre l'élément
+                const el = document.getElementById(element.id);
+                if (el) {
+                    Object.keys(element.styles).forEach(style => {
+                        el.style[style] = element.styles[style];
+                    });
+                }
+            });
+        }
+        // Fonction pour générer et télécharger le site
+        function generateAndDownloadSite() {
+            // Générer le code HTML
+            let html = `<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Site Généré avec le Mini Constructeur</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            color: #333;
+            line-height: 1.6;
+            padding: 20px;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        ${generateCSS()}
+    </style>
+</head>
+<body>
+    <div class="container">
+`;
+            // Ajouter chaque élément
+            elements.forEach(element => {
+                html += `        <!-- Élément ${element.type} -->\n`;
+                html += `        <div class="generated-element ${element.type}">\n`;
+                if (element.type === 'image') {
+                    html += `            ${element.content}\n`;
+                } else {
+                    html += `            <${element.tag}>${element.content}</${element.tag}>\n`;
+                }
+                html += `        </div>\n\n`;
+            });
+            html += `    </div>
+</body>
+</html>`;
+            // Afficher le code dans la modal
+            generatedCodeTextarea.value = html;
+            codeModal.style.display = 'flex';
+        }
+        // Fonction pour générer le CSS
+        function generateCSS() {
+            let css = '';
+            elements.forEach(element => {
+                css += `.${element.id} {\n`;
+                Object.keys(element.styles).forEach(style => {
+                    const cssStyle = style.replace(/([A-Z])/g, '-$1').toLowerCase();
+                    css += `    ${cssStyle}: ${element.styles[style]};\n`;
+                });
+                css += '}\n\n';
+            });
+            return css;
+        }
+        // Fonction pour télécharger le code généré
+        function downloadGeneratedCode() {
+            const code = generatedCodeTextarea.value;
+            const blob = new Blob([code], { type: 'text/html' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'site-generé.html';
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+        // Fonction pour générer du contenu avec l'IA (version simulée car besoin d'une clé API)
+        function generateAIContent() {
+            const prompt = document.getElementById('ai-prompt').value;
+            const contentType = document.getElementById('ai-content-type').value;
+            if (!prompt.trim()) {
+                alert('Veuillez entrer une description pour l\'IA.');
+                return;
+            }
+            // Simulation de réponse IA (en production, il faudrait appeler l'API OpenAI)
+            const responses = {
+                title: [
+                    "Découvrez un Monde d'Innovation",
+                    "Votre Partenaire pour la Réussite Digitale",
+                    "Excellence et Créativité au Service de Vos Projets"
+                ],
+                paragraph: [
+                    "Nous sommes une équipe passionnée dédiée à la création de solutions web innovantes. Notre approche combine design élégant et technologie de pointe pour offrir des expériences utilisateur exceptionnelles.",
+                    "Avec des années d'expérience dans le développement web, nous accompagnons nos clients dans la réalisation de leurs projets digitaux, de la conception à la mise en production.",
+                    "Notre philosophie est simple : comprendre vos besoins, anticiper vos attentes et délivrer des solutions qui dépassent vos espérances."
+                ],
+                button: [
+                    "Commencer l'aventure",
+                    "En savoir plus",
+                    "Contactez-nous"
+                ],
+                section: `
+                    <section style="background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; padding: 60px 20px; border-radius: 20px; text-align: center;">
+                        <h2 style="font-size: 2.5rem; margin-bottom: 20px;">Une Solution Sur Mesure</h2>
+                        <p style="font-size: 1.2rem; max-width: 800px; margin: 0 auto 30px;">Notre équipe d'experts crée des solutions personnalisées adaptées à vos besoins spécifiques pour maximiser votre impact digital.</p>
+                        <button style="background: white; color: #2575fc; border: none; padding: 15px 40px; font-size: 1.1rem; border-radius: 50px; cursor: pointer; font-weight: bold;">Découvrir nos réalisations</button>
+                    </section>
+                `
+            };
+            // Choisir une réponse aléatoire pour le type demandé
+            let response;
+            if (contentType === 'section') {
+                response = responses[contentType];
+            } else {
+                const options = responses[contentType];
+                response = options[Math.floor(Math.random() * options.length)];
+            }
+            // Si un élément est sélectionné, mettre à jour son contenu
+            if (selectedElementId) {
+                const element = elements.find(el => el.id === selectedElementId);
+                if (element) {
+                    element.content = response;
+                    const el = document.getElementById(element.id);
+                    if (el && element.type !== 'image') {
+                        el.querySelector(element.tag).innerHTML = response;
+                        updatePropertiesPanel();
+                    }
+                }
+            } else {
+                // Sinon, ajouter un nouvel élément avec le contenu généré
+                let type = contentType;
+                if (contentType === 'section') type = 'section';
+                addElement(type);
+                // Le nouvel élément aura le contenu par défaut, donc on le met à jour
+                const newElement = elements[elements.length - 1];
+                newElement.content = response;
+                const el = document.getElementById(newElement.id);
+                if (el && newElement.type !== 'image') {
+                    el.querySelector(newElement.tag).innerHTML = response;
+                }
+            }
+            alert('Contenu généré avec l\'IA (simulation). En production, connectez-vous à l\'API OpenAI.');
+        }
+    </script>
+</body>
+</html>