|
<!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> |
|
|
|
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); |
|
}); |
|
|
|
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'); |
|
const containerRect = container.getBoundingClientRect(); |
|
|
|
|
|
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 => { |
|
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) |
|
}; |
|
}); |
|
|
|
|
|
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]; |
|
}); |
|
} |
|
} |
|
|
|
|
|
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> |
