Spaces:

PierreH
/

star

Running

App Files Files Community

PierreH commited on Apr 11

Commit

2620a3c

verified ·

1 Parent(s): 5187d48

Update index.html

Browse files

Files changed (1) hide show

index.html +31 -288

index.html CHANGED Viewed

@@ -1,298 +1,41 @@
-<!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: 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;
-        }
-        .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..." 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>
-        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;
-            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;
-                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 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();
-        }
-        function addKeyword() {
-            const input = document.getElementById('newKeyword');
-            const text = input.value.trim();
-            if (text) {
-                keywords.push({ 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() { /* ... */ }
-        async function saveAsPDF() { /* ... */ }
-        // Support drag tactile
-        document.addEventListener('touchmove', function(e) {
-            if (isDragging) {
-                const touch = e.touches[0];
-                drag(touch);
-                e.preventDefault();
-            }
-        }, { passive: false });
-        document.addEventListener('touchend', stopDrag);
-        document.addEventListener('DOMContentLoaded', renderKeywords);
-        window.addEventListener('resize', renderKeywords);
-    </script>
-</body>
-</html>

+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;
+        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();
+}