Spaces:

PierreH
/

star

Running

File size: 17,988 Bytes

83ee0e3

<!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... 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 labelWidth = word.text.length * 8 + 16;
                const labelHeight = 24;
                
                // 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) - 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);
                });
                
                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);
            
            // Select the label being dragged
            selectKeyword(index);
            
            document.addEventListener('mousemove', drag);
            document.addEventListener('mouseup', stopDrag);
            
            e.preventDefault();
        }
        
        function drag(e) {
            if (!isDragging) return;
            
            const container = document.getElementById('target-container');
            const containerRect = container.getBoundingClientRect();
            
            // Calculate new position
            let newX = e.clientX - dragStartX;
            let newY = e.clientY - 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;
            
            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;
            
            // 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 positions = keywords.map(k => {
                return {
                    x: k.x + (document.querySelector(`.label[data-index='${keywords.indexOf(k)}']`)?.offsetWidth / 2 || 0),
                    y: k.y + (document.querySelector(`.label[data-index='${keywords.indexOf(k)}']`)?.offsetHeight / 2 || 0)
                };
            });
            
            // 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>