|
<!DOCTYPE html> |
|
<html lang="fr"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Étoile de Mots Interactive</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
.target-container { |
|
position: relative; |
|
width: 100%; |
|
aspect-ratio: 1/1; |
|
border-radius: 50%; |
|
overflow: visible; |
|
touch-action: none; |
|
background: radial-gradient(circle, #f8fafc 0%, #e2e8f0 100%); |
|
} |
|
|
|
.circle { |
|
position: absolute; |
|
border-radius: 50%; |
|
z-index: 1; |
|
opacity: 0.7; |
|
} |
|
|
|
.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: 500; |
|
font-size: 0.85rem; |
|
color: #1e293b; |
|
cursor: move; |
|
user-select: none; |
|
white-space: nowrap; |
|
z-index: 7; |
|
padding: 0.35rem 0.7rem; |
|
background-color: rgba(255, 255, 255, 0.9); |
|
border-radius: 1rem; |
|
transition: all 0.2s ease; |
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
border: 1px solid rgba(0,0,0,0.05); |
|
} |
|
|
|
.label:hover { |
|
transform: scale(1.05); |
|
box-shadow: 0 4px 6px rgba(0,0,0,0.15); |
|
z-index: 10; |
|
} |
|
|
|
.label.selected { |
|
background-color: #3b82f6; |
|
color: white; |
|
transform: scale(1.1); |
|
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3); |
|
z-index: 10; |
|
} |
|
|
|
#canvas { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
z-index: 6; |
|
pointer-events: none; |
|
} |
|
|
|
.note-input { |
|
resize: none; |
|
font-size: 0.9rem; |
|
text-align: center; |
|
background-color: transparent; |
|
border: none; |
|
outline: none; |
|
padding: 0.5rem; |
|
border-radius: 0.5rem; |
|
background-color: rgba(255,255,255,0.7); |
|
} |
|
|
|
.note-input::placeholder { |
|
color: #94a3b8; |
|
font-style: italic; |
|
} |
|
|
|
.action-btn { |
|
transition: all 0.2s ease; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
gap: 0.5rem; |
|
} |
|
|
|
.action-btn:hover { |
|
transform: translateY(-1px); |
|
} |
|
|
|
.action-btn:active { |
|
transform: translateY(1px); |
|
} |
|
|
|
.context-menu { |
|
position: absolute; |
|
background: white; |
|
border-radius: 0.5rem; |
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
|
z-index: 100; |
|
min-width: 180px; |
|
overflow: hidden; |
|
display: none; |
|
} |
|
|
|
.context-menu-item { |
|
padding: 0.5rem 1rem; |
|
cursor: pointer; |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
font-size: 0.85rem; |
|
} |
|
|
|
.context-menu-item:hover { |
|
background-color: #f1f5f9; |
|
} |
|
|
|
.style-editor { |
|
background: white; |
|
border-radius: 0.75rem; |
|
box-shadow: 0 4px 16px rgba(0,0,0,0.1); |
|
padding: 1rem; |
|
margin-top: 1rem; |
|
} |
|
|
|
.style-option { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
margin-bottom: 0.75rem; |
|
} |
|
|
|
.color-option { |
|
width: 24px; |
|
height: 24px; |
|
border-radius: 50%; |
|
cursor: pointer; |
|
border: 2px solid transparent; |
|
} |
|
|
|
.color-option.selected { |
|
border-color: #1e293b; |
|
} |
|
|
|
.color-palette { |
|
display: flex; |
|
gap: 0.5rem; |
|
flex-wrap: wrap; |
|
} |
|
|
|
.edit-modal { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background-color: rgba(0,0,0,0.5); |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
z-index: 1000; |
|
display: none; |
|
} |
|
|
|
.edit-modal-content { |
|
background: white; |
|
border-radius: 0.75rem; |
|
padding: 1.5rem; |
|
width: 90%; |
|
max-width: 400px; |
|
} |
|
|
|
@media (max-width: 640px) { |
|
.label { |
|
font-size: 0.75rem; |
|
padding: 0.25rem 0.5rem; |
|
} |
|
|
|
.note-input { |
|
font-size: 0.8rem; |
|
} |
|
|
|
.action-btn { |
|
padding: 0.5rem; |
|
font-size: 0.8rem; |
|
} |
|
|
|
.context-menu { |
|
min-width: 160px; |
|
} |
|
|
|
.mobile-hidden { |
|
display: none; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen flex flex-col items-center justify-center p-4"> |
|
<div class="w-full max-w-2xl bg-white rounded-xl shadow-lg p-6 space-y-6"> |
|
<div class="flex justify-between items-center"> |
|
<h1 class="text-2xl font-bold text-center text-gray-800"> |
|
<i class="fas fa-star text-yellow-400 mr-2"></i>Étoile de Mots |
|
</h1> |
|
<div class="flex gap-2"> |
|
<button onclick="resetKeywords()" class="action-btn bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600"> |
|
<i class="fas fa-redo"></i> |
|
<span class="mobile-hidden">Réinit.</span> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<textarea id="userNotes" class="note-input w-full" |
|
placeholder="Titre, notes ou objectifs... ✍️" rows="2"></textarea> |
|
|
|
<div class="target-container 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 sm:grid-cols-3 gap-3"> |
|
<input type="text" id="newKeyword" placeholder="Nouveau mot" |
|
class="col-span-2 sm:col-span-1 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
|
<button onclick="addKeyword()" class="action-btn bg-green-500 text-white py-2 rounded-lg hover:bg-green-600"> |
|
<i class="fas fa-plus"></i> |
|
<span>Ajouter</span> |
|
</button> |
|
</div> |
|
|
|
<div class="context-menu" id="contextMenu"> |
|
<div class="context-menu-item" onclick="showEditModal()"> |
|
<i class="fas fa-edit text-blue-500"></i> Modifier |
|
</div> |
|
<div class="context-menu-item" onclick="deleteSelectedKeyword()"> |
|
<i class="fas fa-trash text-red-500"></i> Supprimer |
|
</div> |
|
<div class="context-menu-item" onclick="showStyleEditor()"> |
|
<i class="fas fa-paint-brush text-purple-500"></i> Style |
|
</div> |
|
<div class="context-menu-item" onclick="deselectKeyword()"> |
|
<i class="fas fa-times-circle text-gray-500"></i> Désélectionner |
|
</div> |
|
</div> |
|
|
|
<div class="edit-modal" id="editModal"> |
|
<div class="edit-modal-content"> |
|
<h3 class="font-bold text-lg mb-4">Modifier le mot</h3> |
|
<input type="text" id="editKeywordInput" class="w-full p-2 border rounded mb-4"> |
|
<div class="flex justify-end gap-2"> |
|
<button onclick="closeEditModal()" class="px-4 py-2 rounded-lg border">Annuler</button> |
|
<button onclick="updateKeyword()" class="px-4 py-2 rounded-lg bg-blue-500 text-white">Enregistrer</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="style-editor" id="styleEditor" style="display: none;"> |
|
<h3 class="font-medium text-gray-700 mb-3">Style du mot sélectionné</h3> |
|
|
|
<div class="style-option"> |
|
<span>Couleur du texte:</span> |
|
<input type="color" id="textColor" value="#1e293b" class="w-8 h-8"> |
|
</div> |
|
|
|
<div class="style-option"> |
|
<span>Couleur de fond:</span> |
|
<input type="color" id="bgColor" value="#ffffff" class="w-8 h-8"> |
|
</div> |
|
|
|
<div class="style-option"> |
|
<span>Taille de police:</span> |
|
<select id="fontSize" class="border rounded p-1"> |
|
<option value="0.75rem">Petit</option> |
|
<option value="0.85rem" selected>Moyen</option> |
|
<option value="1rem">Grand</option> |
|
</select> |
|
</div> |
|
|
|
<div class="style-option"> |
|
<span>Style de police:</span> |
|
<select id="fontWeight" class="border rounded p-1"> |
|
<option value="400">Normal</option> |
|
<option value="500" selected>Medium</option> |
|
<option value="600">Gras</option> |
|
</select> |
|
</div> |
|
|
|
<div class="mt-4"> |
|
<span class="block mb-2">Style des liens:</span> |
|
<div class="color-palette"> |
|
<div class="color-option bg-blue-500 selected" data-color="#3b82f6" onclick="selectLineColor(this)"></div> |
|
<div class="color-option bg-red-500" data-color="#ef4444" onclick="selectLineColor(this)"></div> |
|
<div class="color-option bg-green-500" data-color="#10b981" onclick="selectLineColor(this)"></div> |
|
<div class="color-option bg-purple-500" data-color="#8b5cf6" onclick="selectLineColor(this)"></div> |
|
<div class="color-option bg-pink-500" data-color="#ec4899" onclick="selectLineColor(this)"></div> |
|
</div> |
|
|
|
<div class="mt-3"> |
|
<span class="block mb-1">Épaisseur:</span> |
|
<input type="range" id="lineWidth" min="1" max="5" value="1" class="w-full"> |
|
</div> |
|
|
|
<div class="mt-3"> |
|
<span class="block mb-1">Style:</span> |
|
<select id="lineStyle" class="border rounded p-1 w-full"> |
|
<option value="solid">Continue</option> |
|
<option value="dashed">Pointillés</option> |
|
<option value="dotted">Pointillés fins</option> |
|
</select> |
|
</div> |
|
</div> |
|
|
|
<button onclick="applyStyles()" class="mt-4 w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600"> |
|
Appliquer |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
let keywords = [ |
|
{ text: "Identification", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" }, |
|
{ text: "Gestion", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" }, |
|
{ text: "Adaptation", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" }, |
|
{ text: "Autonomie", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" }, |
|
{ text: "Connaissance", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" }, |
|
{ text: "Prévention", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" }, |
|
{ text: "Équilibre", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" }, |
|
{ text: "Stratégies", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" }, |
|
{ text: "Motivation", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" }, |
|
{ text: "Recours", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500" } |
|
]; |
|
|
|
let selectedKeywordIndex = null; |
|
let isDragging = false; |
|
let dragStartX, dragStartY; |
|
let draggedLabel = null; |
|
let draggedIndex = null; |
|
let lineColor = "#3b82f6"; |
|
let lineWidth = 1; |
|
let lineStyle = "solid"; |
|
|
|
const canvas = document.getElementById('canvas'); |
|
const ctx = canvas.getContext('2d'); |
|
const contextMenu = document.getElementById('contextMenu'); |
|
const editModal = document.getElementById('editModal'); |
|
|
|
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 label = document.createElement('div'); |
|
label.className = 'label draggable'; |
|
label.textContent = word.text; |
|
label.dataset.index = index; |
|
|
|
|
|
label.style.color = word.color; |
|
label.style.backgroundColor = word.bgColor; |
|
label.style.fontSize = word.fontSize; |
|
label.style.fontWeight = word.fontWeight; |
|
|
|
|
|
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) - label.offsetWidth / 2; |
|
word.y = centerY + radius * Math.sin(angle) - label.offsetHeight / 2; |
|
} |
|
|
|
label.style.left = `${word.x}px`; |
|
label.style.top = `${word.y}px`; |
|
|
|
label.addEventListener('mousedown', (e) => { |
|
startDrag(e, label, index); |
|
}); |
|
|
|
label.addEventListener('contextmenu', (e) => { |
|
e.preventDefault(); |
|
showContextMenu(e, index); |
|
}); |
|
|
|
label.addEventListener('touchstart', (e) => { |
|
e.preventDefault(); |
|
const touch = e.touches[0]; |
|
const mouseEvent = new MouseEvent('mousedown', { |
|
clientX: touch.clientX, |
|
clientY: touch.clientY |
|
}); |
|
label.dispatchEvent(mouseEvent); |
|
}, { passive: false }); |
|
|
|
if (index === selectedKeywordIndex) { |
|
label.classList.add('selected'); |
|
} |
|
|
|
container.appendChild(label); |
|
}); |
|
|
|
|
|
setTimeout(() => { |
|
updateLabelPositions(); |
|
resizeCanvas(); |
|
}, 0); |
|
} |
|
|
|
function updateLabelPositions() { |
|
const container = document.getElementById('target-container'); |
|
const labels = container.querySelectorAll('.label'); |
|
|
|
labels.forEach((label, index) => { |
|
if (keywords[index].x === null || keywords[index].y === null) { |
|
const rect = label.getBoundingClientRect(); |
|
const containerRect = container.getBoundingClientRect(); |
|
|
|
keywords[index].x = rect.left - containerRect.left; |
|
keywords[index].y = rect.top - containerRect.top; |
|
} |
|
}); |
|
} |
|
|
|
function startDrag(e, label, index) { |
|
|
|
if (e.button === 2) return; |
|
|
|
|
|
if (selectedKeywordIndex === index) { |
|
return; |
|
} |
|
|
|
isDragging = true; |
|
draggedLabel = label; |
|
draggedIndex = index; |
|
|
|
const rect = label.getBoundingClientRect(); |
|
dragStartX = e.clientX - rect.left; |
|
dragStartY = e.clientY - rect.top; |
|
|
|
|
|
selectKeyword(index); |
|
|
|
document.addEventListener('mousemove', drag); |
|
document.addEventListener('mouseup', stopDrag); |
|
document.addEventListener('touchmove', touchDrag, { passive: false }); |
|
document.addEventListener('touchend', stopDrag); |
|
|
|
e.preventDefault(); |
|
} |
|
|
|
function drag(e) { |
|
if (!isDragging || !draggedLabel) return; |
|
|
|
const container = document.getElementById('target-container'); |
|
const containerRect = container.getBoundingClientRect(); |
|
|
|
|
|
let newX = e.clientX - containerRect.left - dragStartX; |
|
let newY = e.clientY - containerRect.top - 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; |
|
|
|
drawLines(); |
|
} |
|
|
|
function touchDrag(e) { |
|
if (!isDragging || !draggedLabel) return; |
|
|
|
const touch = e.touches[0]; |
|
const mouseEvent = new MouseEvent('mousemove', { |
|
clientX: touch.clientX, |
|
clientY: touch.clientY |
|
}); |
|
drag(mouseEvent); |
|
} |
|
|
|
function stopDrag() { |
|
isDragging = false; |
|
draggedLabel = null; |
|
draggedIndex = null; |
|
|
|
document.removeEventListener('mousemove', drag); |
|
document.removeEventListener('mouseup', stopDrag); |
|
document.removeEventListener('touchmove', touchDrag); |
|
document.removeEventListener('touchend', stopDrag); |
|
} |
|
|
|
function selectKeyword(index) { |
|
selectedKeywordIndex = index; |
|
|
|
|
|
document.querySelectorAll('.label').forEach(label => { |
|
label.classList.remove('selected'); |
|
}); |
|
|
|
const selectedLabel = document.querySelector(`.label[data-index='${index}']`); |
|
if (selectedLabel) { |
|
selectedLabel.classList.add('selected'); |
|
} |
|
|
|
|
|
document.getElementById('styleEditor').style.display = 'none'; |
|
} |
|
|
|
function deselectKeyword() { |
|
selectedKeywordIndex = null; |
|
|
|
|
|
document.querySelectorAll('.label').forEach(label => { |
|
label.classList.remove('selected'); |
|
}); |
|
|
|
|
|
contextMenu.style.display = 'none'; |
|
document.getElementById('styleEditor').style.display = 'none'; |
|
} |
|
|
|
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 = lineColor; |
|
ctx.lineWidth = lineWidth; |
|
|
|
|
|
if (lineStyle === "dashed") { |
|
ctx.setLineDash([5, 3]); |
|
} else if (lineStyle === "dotted") { |
|
ctx.setLineDash([2, 2]); |
|
} else { |
|
ctx.setLineDash([]); |
|
} |
|
|
|
const labels = document.querySelectorAll('.label'); |
|
const positions = []; |
|
|
|
labels.forEach(label => { |
|
const index = parseInt(label.dataset.index); |
|
if (!isNaN(index) && index >= 0 && index < keywords.length) { |
|
const rect = label.getBoundingClientRect(); |
|
const containerRect = canvas.getBoundingClientRect(); |
|
|
|
positions.push({ |
|
x: rect.left - containerRect.left + rect.width / 2, |
|
y: rect.top - containerRect.top + rect.height / 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: text, |
|
x: null, |
|
y: null, |
|
color: "#1e293b", |
|
bgColor: "#ffffff", |
|
fontSize: "0.85rem", |
|
fontWeight: "500" |
|
}); |
|
input.value = ''; |
|
renderKeywords(); |
|
} |
|
} |
|
|
|
function deleteSelectedKeyword() { |
|
if (selectedKeywordIndex === null) return; |
|
|
|
if (confirm("Supprimer ce mot?")) { |
|
keywords.splice(selectedKeywordIndex, 1); |
|
deselectKeyword(); |
|
renderKeywords(); |
|
} |
|
|
|
contextMenu.style.display = 'none'; |
|
} |
|
|
|
function resetKeywords() { |
|
if (confirm("Réinitialiser tous les mots à leur position par défaut?")) { |
|
keywords.forEach(word => { |
|
word.x = null; |
|
word.y = null; |
|
}); |
|
deselectKeyword(); |
|
renderKeywords(); |
|
} |
|
} |
|
|
|
function showContextMenu(e, index) { |
|
e.preventDefault(); |
|
selectKeyword(index); |
|
|
|
contextMenu.style.display = 'block'; |
|
contextMenu.style.left = `${e.clientX}px`; |
|
contextMenu.style.top = `${e.clientY}px`; |
|
|
|
|
|
setTimeout(() => { |
|
document.addEventListener('click', closeContextMenu); |
|
}, 10); |
|
} |
|
|
|
function closeContextMenu() { |
|
contextMenu.style.display = 'none'; |
|
document.removeEventListener('click', closeContextMenu); |
|
} |
|
|
|
function showEditModal() { |
|
if (selectedKeywordIndex === null) return; |
|
|
|
const keyword = keywords[selectedKeywordIndex]; |
|
document.getElementById('editKeywordInput').value = keyword.text; |
|
editModal.style.display = 'flex'; |
|
contextMenu.style.display = 'none'; |
|
} |
|
|
|
function closeEditModal() { |
|
editModal.style.display = 'none'; |
|
} |
|
|
|
function updateKeyword() { |
|
if (selectedKeywordIndex === null) return; |
|
|
|
const newText = document.getElementById('editKeywordInput').value.trim(); |
|
if (newText) { |
|
keywords[selectedKeywordIndex].text = newText; |
|
renderKeywords(); |
|
selectKeyword(selectedKeywordIndex); |
|
} |
|
closeEditModal(); |
|
} |
|
|
|
function showStyleEditor() { |
|
if (selectedKeywordIndex === null) return; |
|
|
|
const editor = document.getElementById('styleEditor'); |
|
const keyword = keywords[selectedKeywordIndex]; |
|
|
|
|
|
document.getElementById('textColor').value = keyword.color; |
|
document.getElementById('bgColor').value = keyword.bgColor; |
|
document.getElementById('fontSize').value = keyword.fontSize; |
|
document.getElementById('fontWeight').value = keyword.fontWeight; |
|
|
|
editor.style.display = 'block'; |
|
contextMenu.style.display = 'none'; |
|
} |
|
|
|
function selectLineColor(element) { |
|
document.querySelectorAll('.color-option').forEach(opt => { |
|
opt.classList.remove('selected'); |
|
}); |
|
element.classList.add('selected'); |
|
lineColor = element.dataset.color; |
|
drawLines(); |
|
} |
|
|
|
function applyStyles() { |
|
if (selectedKeywordIndex === null) return; |
|
|
|
const keyword = keywords[selectedKeywordIndex]; |
|
|
|
|
|
keyword.color = document.getElementById('textColor').value; |
|
keyword.bgColor = document.getElementById('bgColor').value; |
|
keyword.fontSize = document.getElementById('fontSize').value; |
|
keyword.fontWeight = document.getElementById('fontWeight').value; |
|
|
|
|
|
lineWidth = document.getElementById('lineWidth').value; |
|
lineStyle = document.getElementById('lineStyle').value; |
|
|
|
renderKeywords(); |
|
document.getElementById('styleEditor').style.display = 'none'; |
|
} |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
renderKeywords(); |
|
|
|
|
|
let resizeTimer; |
|
window.addEventListener('resize', () => { |
|
clearTimeout(resizeTimer); |
|
resizeTimer = setTimeout(() => { |
|
renderKeywords(); |
|
}, 200); |
|
}); |
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
if (!contextMenu.contains(e.target) && contextMenu.style.display === 'block') { |
|
contextMenu.style.display = 'none'; |
|
} |
|
|
|
if (!document.getElementById('styleEditor').contains(e.target) && |
|
document.getElementById('styleEditor').style.display === 'block') { |
|
document.getElementById('styleEditor').style.display = 'none'; |
|
} |
|
|
|
if (editModal.style.display === 'flex' && !editModal.querySelector('.edit-modal-content').contains(e.target)) { |
|
closeEditModal(); |
|
} |
|
}); |
|
}); |
|
</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> |
