Spaces:

PierreH
/

star

Running

App Files Files Community

PierreH commited on Apr 11, 2025

Commit

57a23fc

verified ·

1 Parent(s): d74aa38

Update index.html

Browse files

Files changed (1) hide show

index.html +203 -20

index.html CHANGED Viewed

@@ -1,24 +1,100 @@
-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 draggable';
         label.style.left = `${word.x}px`;
         label.style.top = `${word.y}px`;
         label.textContent = word.text;
@@ -26,16 +102,123 @@ function renderKeywords() {
         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();
-}

+<!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.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>