Add 1 files

index.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Étoile de Mots Interactive</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .target-container {
@@ -162,6 +161,28 @@
             flex-wrap: wrap;
         }
         
+        .edit-modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            display: none;
+        }
+        
+        .edit-modal-content {
+            background: white;
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            width: 90%;
+            max-width: 400px;
+        }
+        
         @media (max-width: 640px) {
             .label {
                 font-size: 0.75rem;
@@ -194,10 +215,6 @@
                 <i class="fas fa-star text-yellow-400 mr-2"></i>Étoile de Mots
             </h1>
             <div class="flex gap-2">
-                <button onclick="saveAsPDF()" class="action-btn bg-indigo-500 text-white px-4 py-2 rounded-lg hover:bg-indigo-600">
-                    <i class="fas fa-file-pdf"></i>
-                    <span class="mobile-hidden">PDF</span>
-                </button>
                 <button onclick="resetKeywords()" class="action-btn bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600">
                     <i class="fas fa-redo"></i>
                     <span class="mobile-hidden">Réinit.</span>
@@ -227,6 +244,32 @@
             </button>
         </div>
         
+        <div class="context-menu" id="contextMenu">
+            <div class="context-menu-item" onclick="showEditModal()">
+                <i class="fas fa-edit text-blue-500"></i> Modifier
+            </div>
+            <div class="context-menu-item" onclick="deleteSelectedKeyword()">
+                <i class="fas fa-trash text-red-500"></i> Supprimer
+            </div>
+            <div class="context-menu-item" onclick="showStyleEditor()">
+                <i class="fas fa-paint-brush text-purple-500"></i> Style
+            </div>
+            <div class="context-menu-item" onclick="deselectKeyword()">
+                <i class="fas fa-times-circle text-gray-500"></i> Désélectionner
+            </div>
+        </div>
+        
+        <div class="edit-modal" id="editModal">
+            <div class="edit-modal-content">
+                <h3 class="font-bold text-lg mb-4">Modifier le mot</h3>
+                <input type="text" id="editKeywordInput" class="w-full p-2 border rounded mb-4">
+                <div class="flex justify-end gap-2">
+                    <button onclick="closeEditModal()" class="px-4 py-2 rounded-lg border">Annuler</button>
+                    <button onclick="updateKeyword()" class="px-4 py-2 rounded-lg bg-blue-500 text-white">Enregistrer</button>
+                </div>
+            </div>
+        </div>
+        
         <div class="style-editor" id="styleEditor" style="display: none;">
             <h3 class="font-medium text-gray-700 mb-3">Style du mot sélectionné</h3>
             
@@ -287,27 +330,9 @@
                 Appliquer
             </button>
         </div>
-        
-        <div class="context-menu" id="contextMenu">
-            <div class="context-menu-item" onclick="editSelectedKeyword()">
-                <i class="fas fa-edit text-blue-500"></i> Modifier
-            </div>
-            <div class="context-menu-item" onclick="deleteSelectedKeyword()">
-                <i class="fas fa-trash text-red-500"></i> Supprimer
-            </div>
-            <div class="context-menu-item" onclick="deselectKeyword()">
-                <i class="fas fa-times-circle text-gray-500"></i> Désélectionner
-            </div>
-            <div class="context-menu-item" onclick="showStyleEditor()">
-                <i class="fas fa-paint-brush text-purple-500"></i> Style
-            </div>
-        </div>
     </div>
 
     <script>
-        // Initialize jsPDF
-        const { jsPDF } = window.jspdf;
-        
         let keywords = [
             { text: "Identification", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" },
             { text: "Gestion", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" },
@@ -333,6 +358,7 @@
         const canvas = document.getElementById('canvas');
         const ctx = canvas.getContext('2d');
         const contextMenu = document.getElementById('contextMenu');
+        const editModal = document.getElementById('editModal');
         
         function renderKeywords() {
             const container = document.getElementById('target-container');
@@ -589,19 +615,6 @@
             }
         }
         
-        function editSelectedKeyword() {
-            if (selectedKeywordIndex === null) return;
-            
-            const newText = prompt("Modifier le mot:", keywords[selectedKeywordIndex].text);
-            if (newText !== null && newText.trim() !== "") {
-                keywords[selectedKeywordIndex].text = newText.trim();
-                renderKeywords();
-                selectKeyword(selectedKeywordIndex);
-            }
-            
-            contextMenu.style.display = 'none';
-        }
-        
         function deleteSelectedKeyword() {
             if (selectedKeywordIndex === null) return;
             
@@ -644,6 +657,31 @@
             document.removeEventListener('click', closeContextMenu);
         }
         
+        function showEditModal() {
+            if (selectedKeywordIndex === null) return;
+            
+            const keyword = keywords[selectedKeywordIndex];
+            document.getElementById('editKeywordInput').value = keyword.text;
+            editModal.style.display = 'flex';
+            contextMenu.style.display = 'none';
+        }
+        
+        function closeEditModal() {
+            editModal.style.display = 'none';
+        }
+        
+        function updateKeyword() {
+            if (selectedKeywordIndex === null) return;
+            
+            const newText = document.getElementById('editKeywordInput').value.trim();
+            if (newText) {
+                keywords[selectedKeywordIndex].text = newText;
+                renderKeywords();
+                selectKeyword(selectedKeywordIndex);
+            }
+            closeEditModal();
+        }
+        
         function showStyleEditor() {
             if (selectedKeywordIndex === null) return;
             
@@ -688,58 +726,6 @@
             document.getElementById('styleEditor').style.display = 'none';
         }
         
-        async function saveAsPDF() {
-            const buttons = document.querySelectorAll('button, input');
-            buttons.forEach(btn => btn.style.visibility = 'hidden');
-            
-            const note = document.getElementById('userNotes');
-            const originalStyles = {
-                textAlign: note.style.textAlign,
-                fontSize: note.style.fontSize,
-                fontWeight: note.style.fontWeight,
-                backgroundColor: note.style.backgroundColor,
-                border: note.style.border,
-                boxShadow: note.style.boxShadow
-            };
-            
-            note.style.textAlign = 'center';
-            note.style.fontSize = '18px';
-            note.style.fontWeight = 'bold';
-            note.style.backgroundColor = 'transparent';
-            note.style.border = 'none';
-            note.style.boxShadow = 'none';
-            
-            try {
-                const canvas = await html2canvas(document.querySelector('.w-full.max-w-2xl'), {
-                    scale: 2,
-                    backgroundColor: '#f9fafb',
-                    useCORS: true,
-                    logging: false
-                });
-                
-                const imgData = canvas.toDataURL('image/png');
-                const pdf = new jsPDF({
-                    orientation: 'portrait',
-                    unit: 'mm'
-                });
-                
-                const imgWidth = 190;
-                const imgHeight = (canvas.height * imgWidth) / canvas.width;
-                
-                pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight);
-                pdf.save(`etoile_mots_${new Date().toISOString().split('T')[0]}.pdf`);
-            } catch (err) {
-                console.error("Erreur lors de l'export PDF:", err);
-                alert("Une erreur est survenue lors de l'export PDF");
-            } finally {
-                buttons.forEach(btn => btn.style.visibility = 'visible');
-                
-                Object.keys(originalStyles).forEach(style => {
-                    note.style[style] = originalStyles[style];
-                });
-            }
-        }
-        
         // Initialize
         document.addEventListener('DOMContentLoaded', () => {
             renderKeywords();
@@ -763,6 +749,10 @@
                     document.getElementById('styleEditor').style.display === 'block') {
                     document.getElementById('styleEditor').style.display = 'none';
                 }
+                
+                if (editModal.style.display === 'flex' && !editModal.querySelector('.edit-modal-content').contains(e.target)) {
+                    closeEditModal();
+                }
             });
         });
     </script>