114 lines
4.7 KiB
HTML
114 lines
4.7 KiB
HTML
<!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> |