<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Sơ đồ Tư duy của tôi</h1>
<div class="tree" id="mindmap"></div>
<script src="script.js"></script>
</body>
</html>
:root {
--bg-color: #f8f9fa;
--line-color: #adb5bd;
--node-bg: #ffffff;
--primary-color: #4dabf7;
--accent-color: #ff8787;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
margin: 0;
padding: 50px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 { color: #343a40; margin-bottom: 30px; }
/* Cấu trúc cây Mind Map */
.tree ul {
padding-top: 20px;
position: relative;
transition: all 0.5s;
display: flex;
justify-content: center;
}
.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
}
/* Vẽ đường nối bằng pseudo-elements */
.tree li::before, .tree li::after {
content: '';
position: absolute; top: 0; right: 50%;
border-top: 2px solid var(--line-color);
width: 50%; height: 20px;
}
.tree li::after {
right: auto; left: 50%;
border-left: 2px solid var(--line-color);
}
/* Loại bỏ đường nối ở các node đơn độc */
.tree li:only-child::after, .tree li:only-child::before { display: none; }
.tree li:only-child { padding-top: 0; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; }
.tree li:last-child::before { border-right: 2px solid var(--line-color); border-radius: 0 5px 0 0; }
.tree li:first-child::after { border-radius: 5px 0 0 0; }
.tree ul ul::before {
content: '';
position: absolute; top: 0; left: 50%;
border-left: 2px solid var(--line-color);
width: 0; height: 20px;
}
/* Style cho Node */
.node-container {
border: 2px solid var(--line-color);
padding: 10px 15px;
display: inline-block;
border-radius: 8px;
background: var(--node-bg);
transition: all 0.3s;
position: relative;
min-width: 100px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.node-container:hover {
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.node-text {
outline: none;
padding: 5px;
display: block;
margin-bottom: 5px;
font-weight: 500;
}
/* Nút chức năng */
.controls {
display: flex;
justify-content: center;
gap: 5px;
opacity: 0;
transition: opacity 0.2s;
}
.node-container:hover .controls { opacity: 1; }
button {
cursor: pointer;
border: none;
border-radius: 4px;
padding: 2px 8px;
font-size: 12px;
color: white;
}
.add-btn { background-color: var(--primary-color); }
.del-btn { background-color: var(--accent-color); }
.root-node {
background-color: var(--primary-color);
color: white;
border: none;
}
.root-node .node-text { font-size: 1.2em; }
// Dữ liệu ban đầu (Cấu trúc Cây)
let mindData = {
id: "1",
text: "Chủ đề chính",
children: [
{ id: "2", text: "Ý tưởng A", children: [] },
{ id: "3", text: "Ý tưởng B", children: [] }
]
};
const container = document.getElementById('mindmap');
// Hàm render sơ đồ từ JSON
function render(node) {
const li = document.createElement('li');
const isRoot = node.id === "1";
li.innerHTML = `
<div class="node-container ${isRoot ? 'root-node' : ''}">
<span class="node-text" contenteditable="true" onblur="updateText('${node.id}', this.innerText)">${node.text}</span>
<div class="controls">
<button class="add-btn" onclick="addNode('${node.id}')">+</button>
${!isRoot ? `<button class="del-btn" onclick="deleteNode('${node.id}')">x</button>` : ''}
</div>
</div>
`;
if (node.children && node.children.length > 0) {
const ul = document.createElement('ul');
node.children.forEach(child => {
ul.appendChild(render(child));
});
li.appendChild(ul);
}
return li;
}
function refresh() {
container.innerHTML = '';
const rootUl = document.createElement('ul');
rootUl.appendChild(render(mindData));
container.appendChild(rootUl);
}
// Tìm node theo ID (Đệ quy)
function findNode(root, id) {
if (root.id === id) return root;
for (let child of root.children) {
let found = findNode(child, id);
if (found) return found;
}
return null;
}
// Thêm node mới
window.addNode = function(parentId) {
const parent = findNode(mindData, parentId);
if (parent) {
parent.children.push({
id: Date.now().toString(),
text: "Nhánh mới",
children: []
});
refresh();
}
};
// Xóa node (Đệ quy tìm cha để xóa con)
window.deleteNode = function(id) {
function remove(root, id) {
root.children = root.children.filter(child => child.id !== id);
root.children.forEach(child => remove(child, id));
}
remove(mindData, id);
refresh();
};
// Cập nhật text khi người dùng gõ xong
window.updateText = function(id, newText) {
const node = findNode(mindData, id);
if (node) node.text = newText;
};
// Khởi tạo lần đầu
refresh();