From 8ff84cb4e65f30ad4c2b3175a6f2ca572bc44915 Mon Sep 17 00:00:00 2001
From: biss <bishsh2006@outlook.com>
Date: Fri, 17 Apr 2026 20:08:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gen/countdown_s.html | 218 +++++++++++++++++++++++++++++++++++++++++++
 gen/index.html       | 106 +++++++++++++++++++++
 2 files changed, 324 insertions(+)
 create mode 100644 gen/countdown_s.html
 create mode 100644 gen/index.html
diff --git a/gen/countdown_s.html b/gen/countdown_s.html
new file mode 100644
index 0000000..7738077
--- /dev/null
+++ b/gen/countdown_s.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>墨水屏标语倒计时 - 红黑版</title>
+    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
+    <style>
+        :root { --ep-black: #000000; --ep-red: #ff0000; --ep-white: #ffffff; }
+        body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f4f4; display: flex; flex-direction: column; align-items: center; padding: 30px; }
+        
+        /* --- 4.2寸预览区 (400x300) --- */
+        #capture-area {
+            width: 400px; height: 300px;
+            background: var(--ep-white);
+            border: 2px solid #000;
+            display: flex; flex-direction: column;
+            justify-content: center; 
+            align-items: center;
+            box-sizing: border-box; overflow: hidden;
+            position: relative;
+            padding: 20px;
+        }
+
+        /* 顶部日期栏 */
+        .top-date {
+            position: absolute;
+            top: 15px;
+            font-size: 11px;
+            font-weight: bold;
+            color: var(--ep-black);
+            letter-spacing: 1px;
+            border-bottom: 1px solid var(--ep-black);
+            padding-bottom: 2px;
+        }
+
+        /* 核心标语区 - 居中特大号 */
+        .motto-section {
+            width: 90%;
+            text-align: center;
+            margin-top: 10px;
+        }
+        #editable-motto {
+            font-size: 42px; /* 进一步放大 */
+            font-weight: 900;
+            color: var(--ep-black);
+            margin: 0;
+            cursor: pointer;
+            line-height: 1.1;
+            word-wrap: break-word;
+        }
+
+        /* 分割点 */
+        .dot-divider {
+            margin: 15px 0;
+            font-size: 20px;
+            color: var(--ep-red);
+            font-weight: bold;
+        }
+
+        /* 倒计时展示区 */
+        .countdown-section {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .event-label {
+            font-size: 15px;
+            font-weight: bold;
+            color: #444;
+            margin-bottom: 5px;
+        }
+
+        .days-container {
+            display: flex;
+            align-items: baseline;
+        }
+
+        .days-num {
+            font-size: 85px; /* 巨型数字 */
+            font-family: 'Arial Black', sans-serif;
+            font-weight: 900;
+            line-height: 0.85;
+            color: var(--ep-red); /* 改为红色 */
+        }
+
+        .days-unit {
+            font-size: 22px;
+            font-weight: bold;
+            color: var(--ep-black);
+            margin-left: 6px;
+        }
+
+        /* 管理面板 */
+        .admin-panel { 
+            width: 400px; background: white; padding: 25px; 
+            border-radius: 12px; margin-top: 20px; 
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1); 
+        }
+        .input-item { margin-bottom: 15px; display: flex; flex-direction: column; gap: 5px; }
+        .input-item label { font-size: 13px; font-weight: bold; color: #666; }
+        .input-item input { padding: 10px; border: 1px solid #ccc; border-radius: 6px; }
+        
+        .btn-save { 
+            width: 100%; padding: 12px; border: none; border-radius: 6px; 
+            font-weight: bold; cursor: pointer; background: var(--ep-red); color: white;
+        }
+    </style>
+</head>
+<body>
+
+    <div id="capture-area">
+        <div class="top-date" id="live-date">2026 / 04 / 17 FRIDAY</div>
+        
+        <div class="motto-section">
+            <h1 id="editable-motto" onclick="editMotto()" title="点击修改标语">新婚快乐</h1>
+        </div>
+
+        <div class="dot-divider">✦ ✦ ✦</div>
+
+        <div class="countdown-section" id="countdown-display">
+            </div>
+    </div>
+
+    <div class="admin-panel">
+        <div class="input-item">
+            <label>目标事件描述</label>
+            <input type="text" id="event-name" placeholder="例如：距离考研/周年庆">
+        </div>
+        <div class="input-item">
+            <label>目标日期</label>
+            <input type="date" id="target-date">
+        </div>
+        
+        <button class="btn-save" onclick="saveImage()">下载 400x300 图片</button>
+        <p style="font-size:12px; color:#999; text-align:center; margin-top:12px">提示：直接点击图片中的“黑色大字”可改写标语</p>
+    </div>
+
+    <script>
+        let config = JSON.parse(localStorage.getItem('ep_red_cfg')) || {
+            motto: "保持热爱",
+            label: "距离考研",
+            date: "2026-12-21"
+        };
+
+        function init() {
+            // 填充表单默认值
+            document.getElementById('event-name').value = config.label;
+            document.getElementById('target-date').value = config.date;
+            render();
+            updateDate();
+        }
+
+        function updateDate() {
+            const n = new Date();
+            const weeks = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
+            document.getElementById('live-date').innerText = `${n.getFullYear()} / ${String(n.getMonth()+1).padStart(2,'0')} / ${String(n.getDate()).padStart(2,'0')}   ${weeks[n.getDay()]}`;
+        }
+
+        function editMotto() {
+            const val = prompt("请输入顶端大标语：", config.motto);
+            if (val) {
+                config.motto = val;
+                render();
+            }
+        }
+
+        function render() {
+            const label = document.getElementById('event-name').value || "距离目标";
+            const date = document.getElementById('target-date').value || "2026-12-31";
+            
+            // 更新配置
+            config.label = label;
+            config.date = date;
+            document.getElementById('editable-motto').innerText = config.motto;
+
+            const target = new Date(date).setHours(0,0,0,0);
+            const today = new Date().setHours(0,0,0,0);
+            const diff = Math.ceil((target - today) / (1000 * 60 * 60 * 24));
+
+            let displayNum = diff;
+            let unit = "DAYS";
+
+            if (diff === 0) { displayNum = "0"; }
+            else if (diff < 0) { displayNum = "!"; unit = "OVER"; }
+
+            document.getElementById('countdown-display').innerHTML = `
+                <div class="event-label">${label}</div>
+                <div class="days-container">
+                    <span class="days-num">${displayNum}</span>
+                    <span class="days-unit">${unit}</span>
+                </div>
+            `;
+            
+            localStorage.setItem('ep_red_cfg', JSON.stringify(config));
+        }
+
+        // 监听输入
+        document.getElementById('event-name').addEventListener('input', render);
+        document.getElementById('target-date').addEventListener('input', render);
+
+        function saveImage() {
+            html2canvas(document.getElementById('capture-area'), {
+                width: 400,
+                height: 300,
+                scale: 2
+            }).then(canvas => {
+                const a = document.createElement('a');
+                a.download = `EInk_Countdown_Red.png`;
+                a.href = canvas.toDataURL();
+                a.click();
+            });
+        }
+
+        init();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/gen/index.html b/gen/index.html
new file mode 100644
index 0000000..b67fe93
--- /dev/null
+++ b/gen/index.html
@@ -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>
+        :root {
+            --bg-color: #1e1e1e;
+            --card-bg: #2d2d2d;
+            --text-color: #e0e0e0;
+            --accent-color: #ff7b00; /* 匹配你截图中的橙色调 */
+            --hover-color: #ff9533;
+        }
+
+        body {
+            font-family: 'Segoe UI', system-ui, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 40px 20px;
+            margin: 0;
+        }
+
+        h1 {
+            font-weight: 300;
+            margin-bottom: 30px;
+            color: var(--accent-color);
+        }
+
+        .nav-container {
+            width: 100%;
+            max-width: 500px;
+            display: grid;
+            gap: 15px;
+        }
+
+        .nav-item {
+            background: var(--card-bg);
+            padding: 18px 25px;
+            border-radius: 8px;
+            text-decoration: none;
+            color: var(--text-color);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            transition: transform 0.2s, background 0.2s;
+            border: 1px solid transparent;
+        }
+
+        .nav-item:hover {
+            transform: translateX(10px);
+            background: #383838;
+            border-color: var(--accent-color);
+        }
+
+        .icon {
+            margin-right: 15px;
+            color: var(--accent-color);
+            font-weight: bold;
+        }
+
+        .file-name {
+            flex-grow: 1;
+            font-size: 1.1rem;
+        }
+
+        .arrow {
+            opacity: 0.5;
+        }
+    </style>
+</head>
+<body>
+
+    <h1>目录:</h1>
+
+    <div class="nav-container">
+        <a href="countdown_s.html" class="nav-item">
+            <span class="icon">&lt;/&gt;</span>
+            <span class="file-name">特殊倒计时</span>
+            <span class="arrow">→</span>
+        </a>
+
+        <a href="countdown.html" class="nav-item">
+            <span class="icon">&lt;/&gt;</span>
+            <span class="file-name">普通倒计时</span>
+            <span class="arrow">→</span>
+        </a>
+
+        <a href="resum.html" class="nav-item">
+            <span class="icon">&lt;/&gt;</span>
+            <span class="file-name">简历生成器</span>
+            <span class="arrow">→</span>
+        </a>
+
+        <a href="todo.html" class="nav-item">
+            <span class="icon">&lt;/&gt;</span>
+            <span class="file-name">待办事项</span>
+            <span class="arrow">→</span>
+        </a>
+    </div>
+
+</body>
+</html>
\ No newline at end of file
