|
|
<!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() { } |
|
|
|
|
|
|
|
|
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> |
