Spaces:

PierreH
/

star

Running

File size: 11,969 Bytes

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