Spaces:

PierreH
/

star

Running

App Files Files Community

PierreH commited on Apr 11

Commit

cb3e03a

verified ·

1 Parent(s): 57a23fc

Add 1 files

Browse files

Files changed (1) hide show

index.html +477 -216

index.html CHANGED Viewed

@@ -1,224 +1,485 @@
-<!DOCTYPE html><html lang="fr">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Toile Dynamique Minimaliste</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <style>
-    .target-container {
-      position: relative;
-      width: 100%;
-      aspect-ratio: 1/1;
-      border-radius: 50%;
-      overflow: visible;
-    }
-    .circle { position: absolute; border-radius: 50%; z-index: 1; }
-    .circle1 { background-color: #fecaca; width: 8%; height: 8%; top: 46%; left: 46%; }
-    .circle2 { background-color: #fed7aa; width: 20%; height: 20%; top: 40%; left: 40%; }
-    .circle3 { background-color: #fef08a; width: 35%; height: 35%; top: 32.5%; left: 32.5%; }
-    .circle4 { background-color: #bbf7d0; width: 55%; height: 55%; top: 22.5%; left: 22.5%; }
-    .circle5 { background-color: #bfdbfe; width: 75%; height: 75%; top: 12.5%; left: 12.5%; }.label {
-  position: absolute;
-  font-weight: bold;
-  font-size: 0.75rem;
-  color: #333;
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-  z-index: 7;
-  padding: 0.25rem 0.5rem;
-  background-color: rgba(255, 255, 255, 0.85);
-  border-radius: 0.25rem;
-  transition: all 0.2s ease;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-}
-.label:hover { transform: scale(1.05); background-color: rgba(255,255,255,0.95); }
-.label.selected { background-color: #3b82f6; color: white; transform: scale(1.1); }
-#canvas {
-  position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
-  z-index: 6;
-  pointer-events: none;
-}
-  </style>
 </head>
 <body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center p-4">
-  <div class="w-full max-w-md bg-white rounded-xl shadow-md p-6 space-y-6">
-    <h1 class="text-xl font-bold text-center text-gray-700">☆ Mon Étoile de Mots ☆</h1>
-    <textarea id="editKeyword" class="w-full p-2 rounded-lg border" placeholder="Modifier le mot sélectionné..."></textarea>
-    <div class="target-container bg-white 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>  <script>
-    let keywords = [
-      { text: "Identification", x: null, y: null },
-      { text: "Gestion", x: null, y: null },
-      { text: "Adaptation", x: null, y: null },
-      { text: "Autonomie", x: null, y: null }
-    ];
-    let selectedKeywordIndex = null;
-    let isDragging = false;
-    let dragStartX, dragStartY;
-    let draggedLabel = null;
-    let draggedIndex = null;
-    const canvas = document.getElementById('canvas');
-    const ctx = canvas.getContext('2d');
-    function renderKeywords() {
-      const container = document.getElementById('target-container');
-      const centerX = container.offsetWidth / 2;
-      const centerY = container.offsetHeight / 2;
-      const radius = Math.min(centerX, centerY) * 0.35;
-      container.querySelectorAll('.label').forEach(e => e.remove());
-      keywords.forEach((word, index) => {
-        const labelWidth = word.text.length * 8 + 16;
-        const labelHeight = 24;
-        if (word.x === null || word.y === null) {
-          const angleStep = (2 * Math.PI) / keywords.length;
-          const angle = index * angleStep - Math.PI / 2;
-          word.x = centerX + radius * Math.cos(angle) - labelWidth / 2;
-          word.y = centerY + radius * Math.sin(angle) - labelHeight / 2;
         }
-        const label = document.createElement('div');
-        label.className = 'label';
-        label.style.left = `${word.x}px`;
-        label.style.top = `${word.y}px`;
-        label.textContent = word.text;
-        label.dataset.index = index;
-        label.addEventListener('mousedown', (e) => startDrag(e, label, index));
-        label.addEventListener('touchstart', (e) => {
-          const touch = e.touches[0];
-          startDrag(touch, label, index);
-        });
-        if (index === selectedKeywordIndex) label.classList.add('selected');
-        container.appendChild(label);
-      });
-      resizeCanvas();
-    }
-    function startDrag(e, label, index) {
-      isDragging = true;
-      draggedLabel = label;
-      draggedIndex = index;
-      dragStartX = e.clientX - parseFloat(label.style.left);
-      dragStartY = e.clientY - parseFloat(label.style.top);
-      selectKeyword(index);
-      document.addEventListener('mousemove', drag);
-      document.addEventListener('mouseup', stopDrag);
-      e.preventDefault();
-    }
-    function drag(e) {
-      if (!isDragging) return;
-      const container = document.getElementById('target-container');
-      let newX = e.clientX - dragStartX;
-      let newY = e.clientY - dragStartY;
-      newX = Math.max(0, Math.min(newX, container.offsetWidth - draggedLabel.offsetWidth));
-      newY = Math.max(0, Math.min(newY, container.offsetHeight - draggedLabel.offsetHeight));
-      draggedLabel.style.left = `${newX}px`;
-      draggedLabel.style.top = `${newY}px`;
-      keywords[draggedIndex].x = newX;
-      keywords[draggedIndex].y = newY;
-      resizeCanvas();
-    }
-    function stopDrag() {
-      isDragging = false;
-      draggedLabel = null;
-      draggedIndex = null;
-      document.removeEventListener('mousemove', drag);
-      document.removeEventListener('mouseup', stopDrag);
-    }
-    function selectKeyword(index) {
-      selectedKeywordIndex = index;
-      document.getElementById('editKeyword').value = keywords[index].text;
-      document.querySelectorAll('.label').forEach(label => label.classList.remove('selected'));
-      const selectedLabel = document.querySelector(`.label[data-index='${index}']`);
-      if (selectedLabel) selectedLabel.classList.add('selected');
-    }
-    function deselectKeyword() {
-      selectedKeywordIndex = null;
-      document.getElementById('editKeyword').value = '';
-      document.querySelectorAll('.label').forEach(label => label.classList.remove('selected'));
-    }
-    function resizeCanvas() {
-      const container = document.getElementById('target-container');
-      canvas.width = container.offsetWidth;
-      canvas.height = container.offsetHeight;
-      drawLines();
-    }
-    function drawLines() {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      if (keywords.length < 2) return;
-      ctx.beginPath();
-      ctx.strokeStyle = '#3b82f6';
-      ctx.lineWidth = 1;
-      ctx.setLineDash([5, 3]);
-      const positions = keywords.map((k, i) => {
-        const label = document.querySelector(`.label[data-index='${i}']`);
-        return {
-          x: k.x + (label?.offsetWidth || 0) / 2,
-          y: k.y + (label?.offsetHeight || 0) / 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();
-    }
-    document.addEventListener('DOMContentLoaded', () => {
-      renderKeywords();
-      document.addEventListener('click', (e) => {
-        if (!e.target.classList.contains('label') && !e.target.closest('.label')) {
-          deselectKeyword();
         }
-      });
-    });
-    document.addEventListener('touchmove', function(e) {
-      if (isDragging) {
-        const touch = e.touches[0];
-        drag(touch);
-        e.preventDefault();
-      }
-    }, { passive: false });
-    document.addEventListener('touchend', stopDrag);
-  </script></body>
 </html>

+<!DOCTYPE html>
+<html lang="fr">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Toile Dynamique Minimaliste</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>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <style>
+        .target-container {
+            position: relative;
+            width: 100%;
+            aspect-ratio: 1/1;
+            border-radius: 50%;
+            overflow: visible;
+        }
+        .circle {
+            position: absolute;
+            border-radius: 50%;
+            z-index: 1;
+        }
+        .circle1 { background-color: #fecaca; width: 8%; height: 8%; top: 46%; left: 46%; }
+        .circle2 { background-color: #fed7aa; width: 20%; height: 20%; top: 40%; left: 40%; }
+        .circle3 { background-color: #fef08a; width: 35%; height: 35%; top: 32.5%; left: 32.5%; }
+        .circle4 { background-color: #bbf7d0; width: 55%; height: 55%; top: 22.5%; left: 22.5%; }
+        .circle5 { background-color: #bfdbfe; width: 75%; height: 75%; top: 12.5%; left: 12.5%; }
+        .label {
+            position: absolute;
+            font-weight: bold;
+            font-size: 0.75rem;
+            color: #333;
+            cursor: move;
+            user-select: none;
+            white-space: nowrap;
+            z-index: 7;
+            padding: 0.25rem 0.5rem;
+            background-color: rgba(255, 255, 255, 0.85);
+            border-radius: 0.25rem;
+            transition: all 0.2s ease;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+        }
+        .label:hover {
+            transform: scale(1.05);
+            background-color: rgba(255, 255, 255, 0.95);
+        }
+        .label.selected {
+            background-color: #3b82f6;
+            color: white;
+            transform: scale(1.1);
+        }
+        #canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 6;
+            pointer-events: none;
+        }
+        .note-input {
+            resize: none;
+            font-size: 0.875rem;
+            text-align: center;
+            background-color: transparent;
+            border: none;
+            outline: none;
+        }
+        .note-input::placeholder {
+            color: #9ca3af;
+        }
+        .action-btn {
+            transition: all 0.2s ease;
+        }
+        .action-btn:hover {
+            transform: translateY(-1px);
+        }
+        .action-btn:active {
+            transform: translateY(1px);
+        }
+    </style>
 </head>
 <body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center p-4">
+    <div class="w-full max-w-md bg-white rounded-xl shadow-md p-6 space-y-6">
+        <h1 class="text-xl font-bold text-center text-gray-700">☆ Mon Étoile de Mots ☆</h1>
+        <textarea id="userNotes" class="note-input w-full p-2 rounded-lg bg-gray-50"
+                  placeholder="Écrivez vos notes ici... nom, date, objectifs etc." rows="2"></textarea>
+        <div class="target-container bg-white 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 gap-3">
+            <input type="text" id="newKeyword" placeholder="Nouveau mot"
+                   class="col-span-2 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            <div class="flex space-x-2">
+                <input type="text" id="editKeyword" placeholder="Modifier"
+                       class="flex-1 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                <button onclick="updateKeyword()" class="action-btn bg-blue-500 text-white px-3 py-2 rounded-lg hover:bg-blue-600">
+                    Modifier
+                </button>
+            </div>
+            <button onclick="deleteKeyword()" class="action-btn bg-red-500 text-white py-2 rounded-lg hover:bg-red-600">
+                Supprimer
+            </button>
+            <button onclick="addKeyword()" class="action-btn bg-green-500 text-white py-2 rounded-lg hover:bg-green-600">
+                Ajouter
+            </button>
+            <button onclick="saveAsImage()" class="action-btn bg-purple-500 text-white py-2 rounded-lg hover:bg-purple-600">
+                Enregistrer (Image)
+            </button>
+            <button onclick="saveAsPDF()" class="action-btn bg-indigo-500 text-white py-2 rounded-lg hover:bg-indigo-600">
+                Enregistrer (PDF)
+            </button>
+            <button onclick="resetKeywords()" class="action-btn bg-gray-500 text-white py-2 rounded-lg hover:bg-gray-600 col-span-2">
+                Réinitialiser
+            </button>
+        </div>
     </div>
+    <script>
+        // Initialize jsPDF
+        const { jsPDF } = window.jspdf;
+        let keywords = [
+            { text: "Identification", x: null, y: null },
+            { text: "Gestion", x: null, y: null },
+            { text: "Adaptation", x: null, y: null },
+            { text: "Autonomie", x: null, y: null },
+            { text: "Connaissance", x: null, y: null },
+            { text: "Prévention", x: null, y: null },
+            { text: "Équilibre", x: null, y: null },
+            { text: "Stratégies", x: null, y: null },
+            { text: "Motivation", x: null, y: null },
+            { text: "Recours", x: null, y: null }
+        ];
+        let selectedKeywordIndex = null;
+        let isDragging = false;
+        let dragStartX, dragStartY;
+        let draggedLabel = null;
+        let draggedIndex = null;
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        function renderKeywords() {
+            const container = document.getElementById('target-container');
+            const centerX = container.offsetWidth / 2;
+            const centerY = container.offsetHeight / 2;
+            const radius = Math.min(centerX, centerY) * 0.35;
+            // 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;
+                // Calculate position if not set
+                if (word.x === null || word.y === null) {
+                    const angleStep = (2 * Math.PI) / keywords.length;
+                    const angle = index * angleStep - Math.PI / 2;
+                    word.x = centerX + radius * Math.cos(angle) - label.offsetWidth / 2;
+                    word.y = centerY + radius * Math.sin(angle) - label.offsetHeight / 2;
+                }
+                label.style.left = `${word.x}px`;
+                label.style.top = `${word.y}px`;
+                label.addEventListener('mousedown', (e) => {
+                    startDrag(e, label, index);
+                });
+                if (index === selectedKeywordIndex) {
+                    label.classList.add('selected');
+                }
+                container.appendChild(label);
+            });
+            // Force reflow to ensure labels are rendered before calculating positions
+            setTimeout(() => {
+                updateLabelPositions();
+                resizeCanvas();
+            }, 0);
         }
+        function updateLabelPositions() {
+            const container = document.getElementById('target-container');
+            const labels = container.querySelectorAll('.label');
+            labels.forEach((label, index) => {
+                if (keywords[index].x === null || keywords[index].y === null) {
+                    const rect = label.getBoundingClientRect();
+                    const containerRect = container.getBoundingClientRect();
+                    keywords[index].x = rect.left - containerRect.left;
+                    keywords[index].y = rect.top - containerRect.top;
+                }
+            });
         }
+        function startDrag(e, label, index) {
+            isDragging = true;
+            draggedLabel = label;
+            draggedIndex = index;
+            const rect = label.getBoundingClientRect();
+            dragStartX = e.clientX - rect.left;
+            dragStartY = e.clientY - rect.top;
+            // Select the label being dragged
+            selectKeyword(index);
+            document.addEventListener('mousemove', drag);
+            document.addEventListener('mouseup', stopDrag);
+            e.preventDefault();
+        }
+        function drag(e) {
+            if (!isDragging || !draggedLabel) return;
+            const container = document.getElementById('target-container');
+            const containerRect = container.getBoundingClientRect();
+            // Calculate new position relative to container
+            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));
+            draggedLabel.style.left = `${newX}px`;
+            draggedLabel.style.top = `${newY}px`;
+            // Update keyword position
+            keywords[draggedIndex].x = newX;
+            keywords[draggedIndex].y = newY;
+            drawLines();
+        }
+        function stopDrag() {
+            isDragging = false;
+            draggedLabel = null;
+            draggedIndex = null;
+            document.removeEventListener('mousemove', drag);
+            document.removeEventListener('mouseup', stopDrag);
+        }
+        function selectKeyword(index) {
+            selectedKeywordIndex = index;
+            document.getElementById('editKeyword').value = keywords[index].text;
+            // Update UI
+            document.querySelectorAll('.label').forEach(label => {
+                label.classList.remove('selected');
+            });
+            const selectedLabel = document.querySelector(`.label[data-index='${index}']`);
+            if (selectedLabel) {
+                selectedLabel.classList.add('selected');
+            }
+        }
+        function resizeCanvas() {
+            const container = document.getElementById('target-container');
+            canvas.width = container.offsetWidth;
+            canvas.height = container.offsetHeight;
+            drawLines();
+        }
+        function drawLines() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            if (keywords.length < 2) return;
+            ctx.beginPath();
+            ctx.strokeStyle = '#3b82f6';
+            ctx.lineWidth = 1;
+            ctx.setLineDash([5, 3]);
+            const labels = document.querySelectorAll('.label');
+            const positions = [];
+            labels.forEach(label => {
+                const index = parseInt(label.dataset.index);
+                if (!isNaN(index) && index >= 0 && index < keywords.length) {
+                    const rect = label.getBoundingClientRect();
+                    const containerRect = canvas.getBoundingClientRect();
+                    positions.push({
+                        x: rect.left - containerRect.left + rect.width / 2,
+                        y: rect.top - containerRect.top + rect.height / 2
+                    });
+                }
+            });
+            // Draw connecting lines
+            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();
+        }
+        function addKeyword() {
+            const input = document.getElementById('newKeyword');
+            const text = input.value.trim();
+            if (text) {
+                keywords.push({ text: text, x: null, y: null });
+                input.value = '';
+                renderKeywords();
+            }
+        }
+        function updateKeyword() {
+            const input = document.getElementById('editKeyword');
+            const text = input.value.trim();
+            if (text && selectedKeywordIndex !== null) {
+                keywords[selectedKeywordIndex].text = text;
+                renderKeywords();
+                selectKeyword(selectedKeywordIndex);
+            }
+        }
+        function deleteKeyword() {
+            if (selectedKeywordIndex !== null) {
+                keywords.splice(selectedKeywordIndex, 1);
+                selectedKeywordIndex = null;
+                document.getElementById('editKeyword').value = '';
+                renderKeywords();
+            }
+        }
+        function resetKeywords() {
+            keywords.forEach(word => {
+                word.x = null;
+                word.y = null;
+            });
+            renderKeywords();
+        }
+        async function saveAsImage() {
+            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-md'), {
+                    scale: 2,
+                    backgroundColor: '#f9fafb',
+                    useCORS: true,
+                    logging: false
+                });
+                const link = document.createElement('a');
+                link.download = `etoile_mots_${new Date().toISOString().split('T')[0]}.png`;
+                link.href = canvas.toDataURL('image/png');
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            } catch (err) {
+                console.error("Erreur lors de l'export:", err);
+            } finally {
+                buttons.forEach(btn => btn.style.visibility = 'visible');
+                Object.keys(originalStyles).forEach(style => {
+                    note.style[style] = originalStyles[style];
+                });
+            }
+        }
+        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-md'), {
+                    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);
+            } finally {
+                buttons.forEach(btn => btn.style.visibility = 'visible');
+                Object.keys(originalStyles).forEach(style => {
+                    note.style[style] = originalStyles[style];
+                });
+            }
+        }
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            renderKeywords();
+        });
+        window.addEventListener('resize', () => {
+            renderKeywords();
+        });
+    </script>
+<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=PierreH/star" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>