106 lines
3.8 KiB
HTML
106 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>动作颜色可视化 - 按类别分组</title>
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.category {
|
|
margin: 20px;
|
|
border: 1px solid #ddd;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.category-title {
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.color-box {
|
|
width: 120px;
|
|
height: 80px;
|
|
margin: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
color: white;
|
|
overflow: hidden; /* Added to prevent text overflow */
|
|
word-break: break-all; /* Added to break long words */
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.color-box {
|
|
width: 100px;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script>
|
|
const actionColors = {
|
|
"站立类": "#2962FF", "行走类": "#3F51B5", "奔跑类": "#138FFF", "坐卧类": "#82B1FF", "蹲类": "#42A5F5", "转动类": "#90CAF9", "感知类": "#4DD0E1",
|
|
"饮食类": "#009688", "喝水": "#CDDC39", "穿戴类": "#8BC34A", "休息类": "#81C784", "清洁类": "#A5D6A7", "医疗类": "#C8E6C9",
|
|
"交际类": "#FFA500", "娱乐类": "#F57C00", "情感表达": "#FFD145",
|
|
"阅读类": "#EE7AE9", "写作类": "#F635D1", "工作类": "#FF7CB4", "创作类": "#FFB6C1",
|
|
"运动类": "#9966FF",
|
|
"异常行为": "#EE0000"
|
|
};
|
|
|
|
const categories = {
|
|
"基础动作": ["站立类", "行走类", "奔跑类", "坐卧类", "蹲类", "转动类", "感知类"],
|
|
"日常生活": ["饮食类", "喝水", "穿戴类", "休息类", "清洁类", "医疗类"],
|
|
"社交活动": ["交际类", "娱乐类", "情感表达"],
|
|
"工作学习": ["阅读类", "写作类", "工作类", "创作类"],
|
|
"运动娱乐": ["运动类"],
|
|
"异常行为": ["异常行为"]
|
|
};
|
|
|
|
const fallbackColors = ['#F6DE00', '#8470FF', '#00BCD4', '#F4A460', '#607D8B', '#4CAF50'];
|
|
|
|
// Add random category
|
|
const randomCategoryName = "随机动作";
|
|
categories[randomCategoryName] = [];
|
|
for (let i = 0; i < fallbackColors.length; i++) {
|
|
categories[randomCategoryName].push(`随机动作${i+1}`);
|
|
}
|
|
|
|
|
|
for (const category in categories) {
|
|
const categoryDiv = document.createElement('div');
|
|
categoryDiv.className = 'category';
|
|
|
|
const titleDiv = document.createElement('div');
|
|
titleDiv.className = 'category-title';
|
|
titleDiv.textContent = category;
|
|
categoryDiv.appendChild(titleDiv);
|
|
|
|
categories[category].forEach((action, index) => { // Add index to forEach
|
|
const colorBox = document.createElement('div');
|
|
colorBox.className = 'color-box';
|
|
const color = actionColors[action] || (category === randomCategoryName ? fallbackColors[index] : fallbackColors[Math.floor(Math.random() * fallbackColors.length)]); // Use index for fallbackColors
|
|
colorBox.style.backgroundColor = color;
|
|
colorBox.textContent = `${action} ${color}`;
|
|
categoryDiv.appendChild(colorBox);
|
|
});
|
|
|
|
document.body.appendChild(categoryDiv);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |