新

2026-04-17 18:31:14 +08:00
parent 11f0f030b4
commit 61da354a51
3 changed files with 412 additions and 54 deletions
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>4.2寸墨水屏看板 (红色提醒版)</title>
+    <style>
+        :root { --ink-red: #ff0000; --ink-black: #000000; }
+        body { font-family: sans-serif; background: #f0f2f5; display: flex; flex-direction: column; align-items: center; padding: 20px; }
+        .container { display: flex; gap: 20px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+        .editor { width: 300px; }
+        .input-box { display: flex; gap: 5px; margin-bottom: 15px; }
+        input { flex: 1; padding: 8px; border: 1px solid #ddd; }
+        .task-item { display: flex; align-items: center; padding: 8px; border-bottom: 1px solid #eee; font-size: 14px; }
+        canvas { border: 1px solid #000; background: #fff; width: 400px; height: 300px; }
+        .btn-dl { width: 100%; margin-top: 15px; padding: 10px; background: var(--ink-red); color: white; border: none; cursor: pointer; font-weight: bold; }
+    </style>
+</head>
+<body>
+
+    <h2>三色墨水屏待办生成器</h2>
+    <p style="color: #666;">提示：红色代表<strong>未完成</strong>（急需处理），黑色代表<strong>已完成</strong>。</p>
+
+    <div class="container">
+        <div class="editor">
+            <div class="input-box">
+                <input type="text" id="taskInput" placeholder="添加任务...">
+                <button onclick="addTask()">添加</button>
+            </div>
+            <div id="listUI"></div>
+            <button class="btn-dl" onclick="download()">下载 400x300 图片</button>
+        </div>
+
+        <div>
+            <canvas id="canvas" width="400" height="300"></canvas>
+        </div>
+    </div>
+
+<script>
+    let tasks = [
+        { text: "Class 612 网站数据库备份", done: false },
+        { text: "Surveying 测量平差作业", done: false },
+        { text: "已完成的演示任务", done: true }
+    ];
+
+    function addTask() {
+        const val = document.getElementById('taskInput').value;
+        if(val) { tasks.push({text: val, done: false}); render(); }
+    }
+
+    function render() {
+        // UI 渲染
+        const listUI = document.getElementById('listUI');
+        listUI.innerHTML = '';
+        tasks.forEach((t, i) => {
+            const div = document.createElement('div');
+            div.className = 'task-item';
+            div.innerHTML = `<input type="checkbox" ${t.done?'checked':''} onchange="tasks[${i}].done=!tasks[${i}].done;render()"> 
+                             <span style="flex:1; margin-left:8px; ${t.done?'text-decoration:line-through;color:#999':''}">${t.text}</span>
+                             <button onclick="tasks.splice(${i},1);render()">×</button>`;
+            listUI.appendChild(div);
+        });
+
+        // Canvas 绘图
+        const ctx = document.getElementById('canvas').getContext('2d');
+        ctx.fillStyle = "#fff"; ctx.fillRect(0,0,400,300);
+
+        // 标题栏 (黑色)
+        ctx.fillStyle = "#000"; ctx.font = "bold 24px 'Microsoft YaHei'";
+        ctx.fillText("Focus Tasks", 20, 45);
+        ctx.fillRect(20, 55, 360, 2); // 黑线下划线
+
+        // 绘制列表
+        tasks.forEach((t, i) => {
+            const y = 90 + i * 38;
+            if(y > 270) return;
+
+            if(!t.done) {
+                // --- 未完成任务：红色强调 ---
+                ctx.strokeStyle = "#f00"; ctx.fillStyle = "#f00"; ctx.lineWidth = 2;
+                // 空心框
+                ctx.strokeRect(20, y - 16, 18, 18);
+                // 粗体文字
+                ctx.font = "bold 19px 'Microsoft YaHei'";
+                ctx.fillText(t.text, 50, y);
+            } else {
+                // --- 已完成任务：黑色弱化 ---
+                ctx.strokeStyle = "#000"; ctx.fillStyle = "#000"; ctx.lineWidth = 1;
+                // 打钩框
+                ctx.strokeRect(20, y - 16, 18, 18);
+                ctx.beginPath(); ctx.moveTo(22, y-8); ctx.lineTo(28, y); ctx.lineTo(36, y-12); ctx.stroke();
+                // 普通文字 + 删除线
+                ctx.font = "17px 'Microsoft YaHei'";
+                ctx.fillText(t.text, 50, y);
+                ctx.beginPath(); ctx.moveTo(50, y-6); ctx.lineTo(380, y-6); ctx.stroke();
+            }
+        });
+
+        // 底部提示 (黑色)
+        ctx.fillStyle = "#000"; ctx.font = "12px monospace";
+        ctx.fillText(`Update: ${new Date().toLocaleTimeString()}`, 20, 290);
+        ctx.fillText(`Pending: ${tasks.filter(x=>!x.done).length}`, 310, 290);
+    }
+
+    function download() {
+        const link = document.createElement('a');
+        link.download = 'eink_todo.png';
+        link.href = document.getElementById('canvas').toDataURL();
+        link.click();
+    }
+
+    render();
+</script>
+</body>
+</html>