Spaces:

PierreH
/

star

Running

App Files Files Community

PierreH commited on Apr 11

Commit

0771ac6

verified ·

1 Parent(s): 8a81557

Add 1 files

Browse files

Files changed (1) hide show

index.html +554 -19

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Étoile de Mots Interactive</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>
@@ -22,6 +22,7 @@
             border-radius: 50%;
             z-index: 1;
             opacity: 0.7;
         }
         .circle1 { background-color: #fecaca; width: 8%; height: 8%; top: 46%; left: 46%; }
@@ -61,6 +62,12 @@
             z-index: 10;
         }
         #canvas {
             position: absolute;
             top: 0;
@@ -183,6 +190,62 @@
             max-width: 400px;
         }
         @media (max-width: 640px) {
             .label {
                 font-size: 0.75rem;
@@ -212,9 +275,13 @@
     <div class="w-full max-w-2xl bg-white rounded-xl shadow-lg p-6 space-y-6">
         <div class="flex justify-between items-center">
             <h1 class="text-2xl font-bold text-center text-gray-800">
-                <i class="fas fa-star text-yellow-400 mr-2"></i>Étoile de Mots
             </h1>
             <div class="flex gap-2">
                 <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>
@@ -222,16 +289,53 @@
             </div>
         </div>
         <textarea id="userNotes" class="note-input w-full"
                   placeholder="Titre, notes ou objectifs... ✍️" rows="2"></textarea>
         <div class="target-container shadow-inner" id="target-container">
             <canvas id="canvas"></canvas>
-            <div class="circle circle5"></div>
-            <div class="circle circle4"></div>
-            <div class="circle circle3"></div>
-            <div class="circle circle2"></div>
-            <div class="circle circle1"></div>
         </div>
         <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
@@ -242,6 +346,12 @@
                 <i class="fas fa-plus"></i>
                 <span>Ajouter</span>
             </button>
         </div>
         <div class="context-menu" id="contextMenu">
@@ -254,6 +364,9 @@
             <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>
@@ -289,6 +402,7 @@
                     <option value="0.75rem">Petit</option>
                     <option value="0.85rem" selected>Moyen</option>
                     <option value="1rem">Grand</option>
                 </select>
             </div>
@@ -298,6 +412,17 @@
                     <option value="400">Normal</option>
                     <option value="500" selected>Medium</option>
                     <option value="600">Gras</option>
                 </select>
             </div>
@@ -309,6 +434,7 @@
                     <div class="color-option bg-green-500" data-color="#10b981" onclick="selectLineColor(this)"></div>
                     <div class="color-option bg-purple-500" data-color="#8b5cf6" onclick="selectLineColor(this)"></div>
                     <div class="color-option bg-pink-500" data-color="#ec4899" onclick="selectLineColor(this)"></div>
                 </div>
                 <div class="mt-3">
@@ -330,20 +456,62 @@
                 Appliquer
             </button>
         </div>
     </div>
     <script>
         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" },
-            { text: "Adaptation", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" },
-            { text: "Autonomie", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" },
-            { text: "Connaissance", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" },
-            { text: "Prévention", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" },
-            { text: "Équilibre", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" },
-            { text: "Stratégies", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" },
-            { text: "Motivation", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" },
-            { text: "Recours", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" }
         ];
         let selectedKeywordIndex = null;
@@ -354,11 +522,17 @@
         let lineColor = "#3b82f6";
         let lineWidth = 1;
         let lineStyle = "solid";
         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');
@@ -369,11 +543,24 @@
             // Remove existing labels
             container.querySelectorAll('.label').forEach(e => e.remove());
             // Create new labels
             keywords.forEach((word, index) => {
                 const label = document.createElement('div');
                 label.className = 'label draggable';
-                label.textContent = word.text;
                 label.dataset.index = index;
                 // Apply custom styles
@@ -381,6 +568,7 @@
                 label.style.backgroundColor = word.bgColor;
                 label.style.fontSize = word.fontSize;
                 label.style.fontWeight = word.fontWeight;
                 // Calculate position if not set
                 if (word.x === null || word.y === null) {
@@ -423,6 +611,7 @@
             setTimeout(() => {
                 updateLabelPositions();
                 resizeCanvas();
             }, 0);
         }
@@ -453,6 +642,7 @@
             isDragging = true;
             draggedLabel = label;
             draggedIndex = index;
             const rect = label.getBoundingClientRect();
             dragStartX = e.clientX - rect.left;
@@ -479,6 +669,29 @@
             let newX = e.clientX - containerRect.left - dragStartX;
             let newY = e.clientY - containerRect.top - dragStartY;
             // Constrain to container bounds
             newX = Math.max(0, Math.min(newX, container.offsetWidth - draggedLabel.offsetWidth));
             newY = Math.max(0, Math.min(newY, container.offsetHeight - draggedLabel.offsetHeight));
@@ -505,6 +718,10 @@
         }
         function stopDrag() {
             isDragging = false;
             draggedLabel = null;
             draggedIndex = null;
@@ -608,7 +825,9 @@
                     color: "#1e293b",
                     bgColor: "#ffffff",
                     fontSize: "0.85rem",
-                    fontWeight: "500"
                 });
                 input.value = '';
                 renderKeywords();
@@ -693,6 +912,7 @@
             document.getElementById('bgColor').value = keyword.bgColor;
             document.getElementById('fontSize').value = keyword.fontSize;
             document.getElementById('fontWeight').value = keyword.fontWeight;
             editor.style.display = 'block';
             contextMenu.style.display = 'none';
@@ -717,6 +937,7 @@
             keyword.bgColor = document.getElementById('bgColor').value;
             keyword.fontSize = document.getElementById('fontSize').value;
             keyword.fontWeight = document.getElementById('fontWeight').value;
             // Update line styles
             lineWidth = document.getElementById('lineWidth').value;
@@ -726,6 +947,271 @@
             document.getElementById('styleEditor').style.display = 'none';
         }
         // Initialize
         document.addEventListener('DOMContentLoaded', () => {
             renderKeywords();
@@ -753,6 +1239,55 @@
                 if (editModal.style.display === 'flex' && !editModal.querySelector('.edit-modal-content').contains(e.target)) {
                     closeEditModal();
                 }
             });
         });
     </script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Étoile de Mots Interactive Pro</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>
             border-radius: 50%;
             z-index: 1;
             opacity: 0.7;
+            transition: all 0.5s ease;
         }
         .circle1 { background-color: #fecaca; width: 8%; height: 8%; top: 46%; left: 46%; }
             z-index: 10;
         }
+        .label.dragging {
+            box-shadow: 0 0 15px rgba(0,0,0,0.2);
+            z-index: 20;
+            opacity: 0.9;
+        }
         #canvas {
             position: absolute;
             top: 0;
             max-width: 400px;
         }
+        .grid-lines {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+            pointer-events: none;
+            background-image:
+                linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
+                linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
+            background-size: 20px 20px;
+        }
+        .snap-point {
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            background-color: rgba(59, 130, 246, 0.5);
+            border-radius: 50%;
+            z-index: 3;
+            pointer-events: none;
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); opacity: 0.7; }
+            50% { transform: scale(1.02); opacity: 0.9; }
+            100% { transform: scale(1); opacity: 0.7; }
+        }
+        .layer-selector {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            z-index: 50;
+            background: white;
+            padding: 0.5rem;
+            border-radius: 0.5rem;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        .theme-group {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            z-index: 50;
+            background: white;
+            padding: 0.5rem;
+            border-radius: 0.5rem;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
         @media (max-width: 640px) {
             .label {
                 font-size: 0.75rem;
     <div class="w-full max-w-2xl bg-white rounded-xl shadow-lg p-6 space-y-6">
         <div class="flex justify-between items-center">
             <h1 class="text-2xl font-bold text-center text-gray-800">
+                <i class="fas fa-star text-yellow-400 mr-2"></i>Étoile de Mots Pro
             </h1>
             <div class="flex gap-2">
+                <button onclick="exportToPNG()" class="action-btn bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
+                    <i class="fas fa-download"></i>
+                    <span class="mobile-hidden">Exporter</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>
             </div>
         </div>
+        <div class="flex gap-2">
+            <button onclick="exportToJSON()" class="action-btn bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">
+                <i class="fas fa-save"></i>
+                <span class="mobile-hidden">Sauvegarder</span>
+            </button>
+            <button onclick="importFromJSON()" class="action-btn bg-purple-500 text-white px-4 py-2 rounded-lg hover:bg-purple-600">
+                <i class="fas fa-folder-open"></i>
+                <span class="mobile-hidden">Charger</span>
+            </button>
+            <button onclick="toggleGrid()" id="gridToggle" class="action-btn bg-yellow-500 text-white px-4 py-2 rounded-lg hover:bg-yellow-600">
+                <i class="fas fa-th"></i>
+                <span class="mobile-hidden">Grille</span>
+            </button>
+            <button onclick="toggleSnap()" id="snapToggle" class="action-btn bg-pink-500 text-white px-4 py-2 rounded-lg hover:bg-pink-600">
+                <i class="fas fa-magnet"></i>
+                <span class="mobile-hidden">Magnétisme</span>
+            </button>
+        </div>
         <textarea id="userNotes" class="note-input w-full"
                   placeholder="Titre, notes ou objectifs... ✍️" rows="2"></textarea>
         <div class="target-container shadow-inner" id="target-container">
+            <div class="grid-lines" id="gridLines" style="display: none;"></div>
             <canvas id="canvas"></canvas>
+            <div class="circle circle5 pulse"></div>
+            <div class="circle circle4 pulse"></div>
+            <div class="circle circle3 pulse"></div>
+            <div class="circle circle2 pulse"></div>
+            <div class="circle circle1 pulse"></div>
+            <div class="layer-selector">
+                <select id="layerSelect" class="border rounded p-1 text-sm" onchange="changeLayer()">
+                    <option value="0">Couche 1</option>
+                    <option value="1">Couche 2</option>
+                    <option value="2">Couche 3</option>
+                </select>
+            </div>
+            <div class="theme-group">
+                <select id="themeSelect" class="border rounded p-1 text-sm" onchange="groupByTheme()">
+                    <option value="">Tous les thèmes</option>
+                    <option value="1">Thème 1</option>
+                    <option value="2">Thème 2</option>
+                    <option value="3">Thème 3</option>
+                </select>
+            </div>
         </div>
         <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                 <i class="fas fa-plus"></i>
                 <span>Ajouter</span>
             </button>
+            <select id="fontSelect" class="border rounded p-2">
+                <option value="'Segoe UI', Roboto, sans-serif">Sans-serif</option>
+                <option value="Georgia, 'Times New Roman', serif">Serif</option>
+                <option value="'Comic Sans MS', cursive">Manuscrite</option>
+            </select>
         </div>
         <div class="context-menu" id="contextMenu">
             <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="addIconToKeyword()">
+                <i class="fas fa-icons text-yellow-500"></i> Ajouter icône
+            </div>
             <div class="context-menu-item" onclick="deselectKeyword()">
                 <i class="fas fa-times-circle text-gray-500"></i> Désélectionner
             </div>
                     <option value="0.75rem">Petit</option>
                     <option value="0.85rem" selected>Moyen</option>
                     <option value="1rem">Grand</option>
+                    <option value="1.2rem">Très grand</option>
                 </select>
             </div>
                     <option value="400">Normal</option>
                     <option value="500" selected>Medium</option>
                     <option value="600">Gras</option>
+                    <option value="700">Très gras</option>
+                </select>
+            </div>
+            <div class="style-option">
+                <span>Thème:</span>
+                <select id="keywordTheme" class="border rounded p-1">
+                    <option value="0">Aucun</option>
+                    <option value="1">Thème 1</option>
+                    <option value="2">Thème 2</option>
+                    <option value="3">Thème 3</option>
                 </select>
             </div>
                     <div class="color-option bg-green-500" data-color="#10b981" onclick="selectLineColor(this)"></div>
                     <div class="color-option bg-purple-500" data-color="#8b5cf6" onclick="selectLineColor(this)"></div>
                     <div class="color-option bg-pink-500" data-color="#ec4899" onclick="selectLineColor(this)"></div>
+                    <div class="color-option bg-gray-900" data-color="#111827" onclick="selectLineColor(this)"></div>
                 </div>
                 <div class="mt-3">
                 Appliquer
             </button>
         </div>
+        <div class="edit-modal" id="iconModal" style="display: none;">
+            <div class="edit-modal-content">
+                <h3 class="font-bold text-lg mb-4">Ajouter une icône</h3>
+                <div class="grid grid-cols-4 gap-2 mb-4">
+                    <div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-heart')">
+                        <i class="fas fa-heart text-red-500 text-xl"></i>
+                    </div>
+                    <div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-lightbulb')">
+                        <i class="fas fa-lightbulb text-yellow-500 text-xl"></i>
+                    </div>
+                    <div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-flag')">
+                        <i class="fas fa-flag text-blue-500 text-xl"></i>
+                    </div>
+                    <div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-star')">
+                        <i class="fas fa-star text-purple-500 text-xl"></i>
+                    </div>
+                    <div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-check')">
+                        <i class="fas fa-check text-green-500 text-xl"></i>
+                    </div>
+                    <div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-exclamation')">
+                        <i class="fas fa-exclamation text-orange-500 text-xl"></i>
+                    </div>
+                    <div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-question')">
+                        <i class="fas fa-question text-indigo-500 text-xl"></i>
+                    </div>
+                    <div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-bolt')">
+                        <i class="fas fa-bolt text-yellow-500 text-xl"></i>
+                    </div>
+                </div>
+                <div class="flex justify-end gap-2">
+                    <button onclick="closeIconModal()" class="px-4 py-2 rounded-lg border">Annuler</button>
+                    <button onclick="applyIcon()" class="px-4 py-2 rounded-lg bg-blue-500 text-white">Appliquer</button>
+                </div>
+            </div>
+        </div>
     </div>
     <script>
         let keywords = [
+            { text: "Identification", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 1, icon: "" },
+            { text: "Gestion", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 1, icon: "" },
+            { text: "Adaptation", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 2, icon: "" },
+            { text: "Autonomie", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 2, icon: "" },
+            { text: "Connaissance", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 3, icon: "" },
+            { text: "Prévention", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 3, icon: "" },
+            { text: "Équilibre", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 1, icon: "" },
+            { text: "Stratégies", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 2, icon: "" },
+            { text: "Motivation", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 3, icon: "" },
+            { text: "Recours", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 1, icon: "" }
+        ];
+        let layers = [
+            JSON.parse(JSON.stringify(keywords)),
+            JSON.parse(JSON.stringify(keywords)),
+            JSON.parse(JSON.stringify(keywords))
         ];
         let selectedKeywordIndex = null;
         let lineColor = "#3b82f6";
         let lineWidth = 1;
         let lineStyle = "solid";
+        let currentLayer = 0;
+        let gridEnabled = false;
+        let snapEnabled = false;
+        let selectedIcon = "";
+        let selectedFont = "'Segoe UI', Roboto, sans-serif";
         const canvas = document.getElementById('canvas');
         const ctx = canvas.getContext('2d');
         const contextMenu = document.getElementById('contextMenu');
         const editModal = document.getElementById('editModal');
+        const iconModal = document.getElementById('iconModal');
         function renderKeywords() {
             const container = document.getElementById('target-container');
             // Remove existing labels
             container.querySelectorAll('.label').forEach(e => e.remove());
+            // Get current theme filter
+            const themeFilter = document.getElementById('themeSelect').value;
             // Create new labels
             keywords.forEach((word, index) => {
+                // Skip if theme filter is active and doesn't match
+                if (themeFilter && word.theme != themeFilter) return;
                 const label = document.createElement('div');
                 label.className = 'label draggable';
+                // Add icon if exists
+                if (word.icon) {
+                    label.innerHTML = `<i class="fas ${word.icon} mr-1"></i>${word.text}`;
+                } else {
+                    label.textContent = word.text;
+                }
                 label.dataset.index = index;
                 // Apply custom styles
                 label.style.backgroundColor = word.bgColor;
                 label.style.fontSize = word.fontSize;
                 label.style.fontWeight = word.fontWeight;
+                label.style.fontFamily = selectedFont;
                 // Calculate position if not set
                 if (word.x === null || word.y === null) {
             setTimeout(() => {
                 updateLabelPositions();
                 resizeCanvas();
+                createSnapPoints();
             }, 0);
         }
             isDragging = true;
             draggedLabel = label;
             draggedIndex = index;
+            label.classList.add('dragging');
             const rect = label.getBoundingClientRect();
             dragStartX = e.clientX - rect.left;
             let newX = e.clientX - containerRect.left - dragStartX;
             let newY = e.clientY - containerRect.top - dragStartY;
+            // Snap to grid if enabled
+            if (snapEnabled) {
+                const snapPoints = document.querySelectorAll('.snap-point');
+                let minDist = Infinity;
+                let bestSnap = {x: newX, y: newY};
+                snapPoints.forEach(point => {
+                    const pointX = parseFloat(point.style.left);
+                    const pointY = parseFloat(point.style.top);
+                    const dist = Math.sqrt(Math.pow(newX - pointX, 2) + Math.pow(newY - pointY, 2));
+                    if (dist < 30 && dist < minDist) {
+                        minDist = dist;
+                        bestSnap = {x: pointX, y: pointY};
+                    }
+                });
+                if (minDist < 30) {
+                    newX = bestSnap.x;
+                    newY = bestSnap.y;
+                }
+            }
             // Constrain to container bounds
             newX = Math.max(0, Math.min(newX, container.offsetWidth - draggedLabel.offsetWidth));
             newY = Math.max(0, Math.min(newY, container.offsetHeight - draggedLabel.offsetHeight));
         }
         function stopDrag() {
+            if (draggedLabel) {
+                draggedLabel.classList.remove('dragging');
+            }
             isDragging = false;
             draggedLabel = null;
             draggedIndex = null;
                     color: "#1e293b",
                     bgColor: "#ffffff",
                     fontSize: "0.85rem",
+                    fontWeight: "500",
+                    theme: 0,
+                    icon: ""
                 });
                 input.value = '';
                 renderKeywords();
             document.getElementById('bgColor').value = keyword.bgColor;
             document.getElementById('fontSize').value = keyword.fontSize;
             document.getElementById('fontWeight').value = keyword.fontWeight;
+            document.getElementById('keywordTheme').value = keyword.theme;
             editor.style.display = 'block';
             contextMenu.style.display = 'none';
             keyword.bgColor = document.getElementById('bgColor').value;
             keyword.fontSize = document.getElementById('fontSize').value;
             keyword.fontWeight = document.getElementById('fontWeight').value;
+            keyword.theme = document.getElementById('keywordTheme').value;
             // Update line styles
             lineWidth = document.getElementById('lineWidth').value;
             document.getElementById('styleEditor').style.display = 'none';
         }
+        function toggleGrid() {
+            gridEnabled = !gridEnabled;
+            document.getElementById('gridLines').style.display = gridEnabled ? 'block' : 'none';
+            document.getElementById('gridToggle').classList.toggle('bg-gray-500', !gridEnabled);
+            document.getElementById('gridToggle').classList.toggle('bg-yellow-500', gridEnabled);
+        }
+        function toggleSnap() {
+            snapEnabled = !snapEnabled;
+            document.getElementById('snapToggle').classList.toggle('bg-gray-500', !snapEnabled);
+            document.getElementById('snapToggle').classList.toggle('bg-pink-500', snapEnabled);
+            if (snapEnabled) {
+                createSnapPoints();
+            } else {
+                document.querySelectorAll('.snap-point').forEach(point => point.remove());
+            }
+        }
+        function createSnapPoints() {
+            // Remove existing snap points
+            document.querySelectorAll('.snap-point').forEach(point => point.remove());
+            const container = document.getElementById('target-container');
+            const centerX = container.offsetWidth / 2;
+            const centerY = container.offsetHeight / 2;
+            const radius = Math.min(centerX, centerY) * 0.8;
+            // Create snap points on circle
+            for (let i = 0; i < 12; i++) {
+                const angle = (i * Math.PI * 2) / 12;
+                const x = centerX + radius * Math.cos(angle);
+                const y = centerY + radius * Math.sin(angle);
+                const snapPoint = document.createElement('div');
+                snapPoint.className = 'snap-point';
+                snapPoint.style.left = `${x}px`;
+                snapPoint.style.top = `${y}px`;
+                container.appendChild(snapPoint);
+            }
+            // Create snap points in center
+            for (let i = 0; i < 5; i++) {
+                const snapPoint = document.createElement('div');
+                snapPoint.className = 'snap-point';
+                snapPoint.style.left = `${centerX + (i-2) * 20}px`;
+                snapPoint.style.top = `${centerY}px`;
+                container.appendChild(snapPoint);
+                if (i !== 2) {
+                    const snapPointVert = document.createElement('div');
+                    snapPointVert.className = 'snap-point';
+                    snapPointVert.style.left = `${centerX}px`;
+                    snapPointVert.style.top = `${centerY + (i-2) * 20}px`;
+                    container.appendChild(snapPointVert);
+                }
+            }
+        }
+        function changeLayer() {
+            currentLayer = parseInt(document.getElementById('layerSelect').value);
+            keywords = JSON.parse(JSON.stringify(layers[currentLayer]));
+            renderKeywords();
+        }
+        function groupByTheme() {
+            renderKeywords();
+        }
+        function addIconToKeyword() {
+            if (selectedKeywordIndex === null) return;
+            iconModal.style.display = 'flex';
+            contextMenu.style.display = 'none';
+        }
+        function closeIconModal() {
+            iconModal.style.display = 'none';
+        }
+        function selectIcon(icon) {
+            selectedIcon = icon;
+            document.querySelectorAll('.icon-option').forEach(opt => {
+                opt.classList.remove('bg-blue-100');
+            });
+            event.currentTarget.classList.add('bg-blue-100');
+        }
+        function applyIcon() {
+            if (selectedKeywordIndex === null || !selectedIcon) return;
+            keywords[selectedKeywordIndex].icon = selectedIcon;
+            renderKeywords();
+            closeIconModal();
+        }
+        function exportToPNG() {
+            const container = document.getElementById('target-container');
+            const canvas = document.createElement('canvas');
+            canvas.width = container.offsetWidth;
+            canvas.height = container.offsetHeight;
+            const ctx = canvas.getContext('2d');
+            // Draw background
+            ctx.fillStyle = '#ffffff';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // Draw circles
+            const circles = container.querySelectorAll('.circle');
+            circles.forEach(circle => {
+                const rect = circle.getBoundingClientRect();
+                const containerRect = container.getBoundingClientRect();
+                const x = rect.left - containerRect.left + rect.width / 2;
+                const y = rect.top - containerRect.top + rect.height / 2;
+                const radius = rect.width / 2;
+                ctx.fillStyle = window.getComputedStyle(circle).backgroundColor;
+                ctx.beginPath();
+                ctx.arc(x, y, radius, 0, Math.PI * 2);
+                ctx.fill();
+            });
+            // Draw lines
+            if (keywords.length >= 2) {
+                ctx.beginPath();
+                ctx.strokeStyle = lineColor;
+                ctx.lineWidth = lineWidth;
+                if (lineStyle === "dashed") {
+                    ctx.setLineDash([5, 3]);
+                } else if (lineStyle === "dotted") {
+                    ctx.setLineDash([2, 2]);
+                } else {
+                    ctx.setLineDash([]);
+                }
+                const labels = container.querySelectorAll('.label');
+                const positions = [];
+                labels.forEach(label => {
+                    const rect = label.getBoundingClientRect();
+                    const containerRect = container.getBoundingClientRect();
+                    positions.push({
+                        x: rect.left - containerRect.left + rect.width / 2,
+                        y: rect.top - containerRect.top + rect.height / 2
+                    });
+                });
+                for (let i = 0; i < positions.length; i++) {
+                    const next = positions[(i + 1) % positions.length];
+                    ctx.moveTo(positions[i].x, positions[i].y);
+                    ctx.lineTo(next.x, next.y);
+                }
+                ctx.stroke();
+            }
+            // Draw labels
+            const labels = container.querySelectorAll('.label');
+            labels.forEach(label => {
+                const rect = label.getBoundingClientRect();
+                const containerRect = container.getBoundingClientRect();
+                const x = rect.left - containerRect.left;
+                const y = rect.top - containerRect.top;
+                const width = rect.width;
+                const height = rect.height;
+                // Draw background
+                ctx.fillStyle = window.getComputedStyle(label).backgroundColor;
+                ctx.beginPath();
+                ctx.roundRect(x, y, width, height, 16);
+                ctx.fill();
+                // Draw text
+                ctx.fillStyle = window.getComputedStyle(label).color;
+                ctx.font = `${window.getComputedStyle(label).fontWeight} ${window.getComputedStyle(label).fontSize} ${window.getComputedStyle(label).fontFamily}`;
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(label.textContent, x + width/2, y + height/2);
+            });
+            // Draw notes if any
+            const notes = document.getElementById('userNotes').value;
+            if (notes.trim()) {
+                ctx.fillStyle = '#1e293b';
+                ctx.font = '500 1rem sans-serif';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'top';
+                const lines = notes.split('\n');
+                const startY = 20;
+                lines.forEach((line, i) => {
+                    ctx.fillText(line, canvas.width/2, startY + i*20);
+                });
+            }
+            // Create download link
+            const link = document.createElement('a');
+            link.download = 'etoile-de-mots.png';
+            link.href = canvas.toDataURL('image/png');
+            link.click();
+        }
+        function exportToJSON() {
+            const data = {
+                keywords: keywords,
+                notes: document.getElementById('userNotes').value,
+                lineColor: lineColor,
+                lineWidth: lineWidth,
+                lineStyle: lineStyle
+            };
+            const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.download = 'etoile-de-mots.json';
+            link.href = url;
+            link.click();
+            setTimeout(() => URL.revokeObjectURL(url), 100);
+        }
+        function importFromJSON() {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.accept = '.json';
+            input.onchange = e => {
+                const file = e.target.files[0];
+                const reader = new FileReader();
+                reader.onload = event => {
+                    try {
+                        const data = JSON.parse(event.target.result);
+                        if (data.keywords) {
+                            keywords = data.keywords;
+                            layers[currentLayer] = JSON.parse(JSON.stringify(keywords));
+                            if (data.notes) {
+                                document.getElementById('userNotes').value = data.notes;
+                            }
+                            if (data.lineColor) lineColor = data.lineColor;
+                            if (data.lineWidth) lineWidth = data.lineWidth;
+                            if (data.lineStyle) lineStyle = data.lineStyle;
+                            renderKeywords();
+                        }
+                    } catch (error) {
+                        alert("Erreur lors du chargement du fichier: " + error.message);
+                    }
+                };
+                reader.readAsText(file);
+            };
+            input.click();
+        }
         // Initialize
         document.addEventListener('DOMContentLoaded', () => {
             renderKeywords();
                 if (editModal.style.display === 'flex' && !editModal.querySelector('.edit-modal-content').contains(e.target)) {
                     closeEditModal();
                 }
+                if (iconModal.style.display === 'flex' && !iconModal.querySelector('.edit-modal-content').contains(e.target)) {
+                    closeIconModal();
+                }
+            });
+            // Keyboard navigation
+            document.addEventListener('keydown', (e) => {
+                if (selectedKeywordIndex === null) return;
+                const step = 5;
+                const keyword = keywords[selectedKeywordIndex];
+                switch(e.key) {
+                    case 'ArrowUp':
+                        keyword.y -= step;
+                        e.preventDefault();
+                        break;
+                    case 'ArrowDown':
+                        keyword.y += step;
+                        e.preventDefault();
+                        break;
+                    case 'ArrowLeft':
+                        keyword.x -= step;
+                        e.preventDefault();
+                        break;
+                    case 'ArrowRight':
+                        keyword.x += step;
+                        e.preventDefault();
+                        break;
+                    case 'Delete':
+                        deleteSelectedKeyword();
+                        e.preventDefault();
+                        break;
+                    case 'Escape':
+                        deselectKeyword();
+                        e.preventDefault();
+                        break;
+                }
+                if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+                    renderKeywords();
+                }
+            });
+            // Font selection
+            document.getElementById('fontSelect').addEventListener('change', (e) => {
+                selectedFont = e.target.value;
+                renderKeywords();
             });
         });
     </script>