时间轴颜色可视化，可以忽略

2025-01-14 03:23:40 +00:00
parent a11307fa9b
commit ef39d7014c
1 changed files with 106 additions and 0 deletions
@@ -0,0 +1,106 @@
+<!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>