Spaces:

duqing026
/

interactive-checklist-pro

Sleeping

+---
+title: 交互式清单专家 (Interactive Checklist Pro)
+emoji: ✅
+colorFrom: indigo
+colorTo: blue
+sdk: docker
+app_port: 7860
+short_description: 可视化构建交互式清单，一键导出单文件 HTML 应用（Local-First & 保存进度）。
+---
+# ✅ 交互式清单专家 (Interactive Checklist Pro)
+> **零代码构建、一键导出、永久保存进度的交互式清单应用。**
+Interactive Checklist Pro 是一个为内容创作者、教育者和独立开发者设计的工具。它可以帮助你将枯燥的 PDF/文本清单转化为**精美的、可交互的、自动保存进度的 Web 应用**。
+生成的清单是一个**单文件 HTML**，无需服务器，可以直接发给用户、部署到静态网站或作为数字产品出售。
+## ✨ 核心功能
+*   **可视化构建器**：所见即所得的编辑界面，支持拖拽排序（通过按钮）、分组管理。
+*   **单文件导出**：生成一个独立的 `.html` 文件，包含所有逻辑和样式。
+*   **进度自动保存**：导出的清单使用 `localStorage` 自动记录用户的打钩状态，刷新页面不丢失。
+*   **资源链接集成**：为每个检查项添加备注和外部链接。
+*   **完赛奖励**：当用户完成 100% 进度时，触发庆祝撒花特效 🎉。
+*   **多主题配色**：内置 Indigo, Blue, Emerald, Rose 等多种现代配色方案。
+## 🚀 使用场景
+1.  **作为 Lead Magnet (引流磁铁)**：制作 "2024 SEO 终极检查表" 或 "新媒体运营 SOP"，免费分发以获取潜在客户。
+2.  **作为数字产品**：制作高价值的 "独立开发发布清单" 或 "婚礼筹备全流程"，直接出售 HTML 文件。
+3.  **内部 SOP 管理**：为团队制作标准操作流程清单，分发给员工使用。
+## 🛠️ 技术栈
+*   **Builder (编辑器)**: Flask (Python), Vue 3, Tailwind CSS.
+*   **Exported App (导出的清单)**: Vanilla JS (原生 JavaScript), Tailwind CSS (CDN), Canvas Confetti.
+## 📦 部署与运行
+### Hugging Face Spaces
+本项目已配置 Dockerfile，可直接部署到 Hugging Face Spaces。
+### 本地运行
+1. 克隆项目
+2. 安装依赖: `pip install flask`
+3. 运行: `python app.py`
+4. 访问: `http://localhost:7860`
+## 📝 License
+MIT License

app.py ADDED Viewed

	@@ -0,0 +1,41 @@

+from flask import Flask, render_template, request, send_file, Response
+import json
+import io
+import os
+app = Flask(__name__)
+app.secret_key = "checklist_pro_secret_key"
+@app.route('/')
+def index():
+    return render_template('builder.html')
+@app.route('/download', methods=['POST'])
+def download():
+    data = request.json
+    # Render the standalone template with the data
+    # We pass the data as a JSON string to be embedded in the JS
+    checklist_data_json = json.dumps(data, ensure_ascii=False)
+    html_content = render_template(
+        'export_template.html',
+        checklist_data=data,
+        checklist_data_json=checklist_data_json
+    )
+    # Create a file-like object
+    buffer = io.BytesIO()
+    buffer.write(html_content.encode('utf-8'))
+    buffer.seek(0)
+    return send_file(
+        buffer,
+        as_attachment=True,
+        download_name='checklist.html',
+        mimetype='text/html'
+    )
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port, debug=True)

templates/builder.html ADDED Viewed

	@@ -0,0 +1,327 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>交互式清单专家 (Interactive Checklist Pro)</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <!-- Phosphor Icons -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body { font-family: 'Inter', sans-serif; }
+        .scrollbar-hide::-webkit-scrollbar { display: none; }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-800 h-screen flex flex-col overflow-hidden">
+    <div id="app" class="flex-1 flex flex-col h-full">
+        <!-- Header -->
+        <header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6 shrink-0 z-10">
+            <div class="flex items-center gap-3">
+                <div class="bg-indigo-600 text-white p-2 rounded-lg">
+                    <i class="ph ph-check-square text-xl"></i>
+                </div>
+                <h1 class="text-xl font-bold text-gray-900 tracking-tight">Interactive Checklist Pro</h1>
+            </div>
+            <div class="flex items-center gap-4">
+                <button @click="downloadHTML" :disabled="isExporting" class="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2 rounded-lg font-medium transition-colors shadow-sm disabled:opacity-50">
+                    <i class="ph ph-download-simple" v-if="!isExporting"></i>
+                    <i class="ph ph-spinner animate-spin" v-else></i>
+                    {{ isExporting ? '生成中...' : '导出单文件 HTML' }}
+                </button>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <div class="flex-1 flex overflow-hidden">
+            <!-- Left: Editor -->
+            <div class="w-1/2 bg-white border-r border-gray-200 flex flex-col overflow-hidden">
+                <div class="p-6 overflow-y-auto custom-scrollbar flex-1 pb-20">
+                    <!-- Global Settings -->
+                    <section class="mb-8">
+                        <h2 class="text-sm uppercase tracking-wider text-gray-500 font-semibold mb-4">基本信息</h2>
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">清单标题</label>
+                                <input v-model="checklist.title" type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" placeholder="例如：SEO 终极检查表">
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">描述 / 引言</label>
+                                <textarea v-model="checklist.description" rows="3" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" placeholder="简要介绍这个清单的用途..."></textarea>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">作者 / 品牌</label>
+                                <input v-model="checklist.author" type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" placeholder="例如：YourName @ Twitter">
+                            </div>
+                            <!-- Theme Selection -->
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-2">主题色</label>
+                                <div class="flex gap-3">
+                                    <button v-for="color in themeColors" :key="color.value"
+                                        @click="checklist.theme = color.value"
+                                        class="w-8 h-8 rounded-full border-2 transition-all"
+                                        :class="[color.bgClass, checklist.theme === color.value ? 'border-gray-900 scale-110' : 'border-transparent opacity-70 hover:opacity-100']">
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- Content Editor -->
+                    <section>
+                        <div class="flex items-center justify-between mb-4">
+                            <h2 class="text-sm uppercase tracking-wider text-gray-500 font-semibold">清单内容</h2>
+                            <button @click="addGroup" class="text-sm text-indigo-600 hover:text-indigo-800 font-medium flex items-center gap-1">
+                                <i class="ph ph-plus"></i> 添加分组
+                            </button>
+                        </div>
+                        <div class="space-y-6">
+                            <div v-for="(group, gIndex) in checklist.groups" :key="gIndex" class="border border-gray-200 rounded-xl bg-gray-50 overflow-hidden">
+                                <!-- Group Header -->
+                                <div class="bg-gray-100 p-4 border-b border-gray-200 flex items-start gap-3">
+                                    <div class="flex flex-col gap-1 pt-1">
+                                        <button @click="moveGroup(gIndex, -1)" :disabled="gIndex === 0" class="text-gray-400 hover:text-gray-700 disabled:opacity-30"><i class="ph ph-caret-up"></i></button>
+                                        <button @click="moveGroup(gIndex, 1)" :disabled="gIndex === checklist.groups.length - 1" class="text-gray-400 hover:text-gray-700 disabled:opacity-30"><i class="ph ph-caret-down"></i></button>
+                                    </div>
+                                    <div class="flex-1">
+                                        <input v-model="group.title" type="text" class="w-full bg-transparent border-b border-transparent hover:border-gray-300 focus:border-indigo-500 focus:ring-0 px-0 py-1 font-semibold text-gray-800 placeholder-gray-400 transition" placeholder="分组名称 (例如：准备工作)">
+                                    </div>
+                                    <button @click="removeGroup(gIndex)" class="text-red-400 hover:text-red-600 p-1"><i class="ph ph-trash"></i></button>
+                                </div>
+                                <!-- Items List -->
+                                <div class="p-4 space-y-3">
+                                    <div v-for="(item, iIndex) in group.items" :key="iIndex" class="flex items-start gap-3 bg-white p-3 rounded-lg border border-gray-100 shadow-sm group">
+                                        <div class="flex flex-col gap-0.5 pt-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                                            <button @click="moveItem(gIndex, iIndex, -1)" :disabled="iIndex === 0" class="text-gray-300 hover:text-gray-600 text-xs"><i class="ph ph-caret-up"></i></button>
+                                            <button @click="moveItem(gIndex, iIndex, 1)" :disabled="iIndex === group.items.length - 1" class="text-gray-300 hover:text-gray-600 text-xs"><i class="ph ph-caret-down"></i></button>
+                                        </div>
+                                        <div class="flex-1 space-y-2">
+                                            <input v-model="item.text" type="text" class="w-full border-b border-gray-100 focus:border-indigo-300 focus:ring-0 px-0 py-0.5 text-sm text-gray-800 placeholder-gray-400" placeholder="检查项内容...">
+                                            <!-- Optional Fields Toggle -->
+                                            <div class="flex gap-4 text-xs">
+                                                <input v-model="item.note" type="text" class="flex-1 bg-gray-50 rounded px-2 py-1 text-gray-600 placeholder-gray-300 border-none" placeholder="备注/提示 (可选)">
+                                                <input v-model="item.link" type="text" class="flex-1 bg-gray-50 rounded px-2 py-1 text-gray-600 placeholder-gray-300 border-none" placeholder="链接 URL (可选)">
+                                            </div>
+                                        </div>
+                                        <button @click="removeItem(gIndex, iIndex)" class="text-gray-300 hover:text-red-500 pt-1 opacity-0 group-hover:opacity-100 transition-opacity"><i class="ph ph-x"></i></button>
+                                    </div>
+                                    <button @click="addItem(gIndex)" class="w-full py-2 border border-dashed border-gray-300 rounded-lg text-gray-500 text-sm hover:border-indigo-400 hover:text-indigo-600 transition flex items-center justify-center gap-2">
+                                        <i class="ph ph-plus-circle"></i> 添加检查项
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                </div>
+            </div>
+            <!-- Right: Preview -->
+            <div class="w-1/2 bg-gray-100 flex flex-col overflow-hidden relative">
+                <div class="absolute top-4 right-4 bg-white/80 backdrop-blur px-3 py-1 rounded-full text-xs font-medium text-gray-500 border border-gray-200 shadow-sm z-10">
+                    实时预览 (Export Preview)
+                </div>
+                <div class="flex-1 overflow-y-auto p-8 flex justify-center">
+                    <!-- Phone/Tablet Frame -->
+                    <div class="w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden border-8 border-gray-800 flex flex-col min-h-[600px] max-h-[90vh]">
+                        <!-- App Header -->
+                        <div class="p-6 text-white transition-colors duration-300 shrink-0" :class="currentThemeClass">
+                            <div class="text-xs opacity-80 mb-1 uppercase tracking-wider">{{ checklist.author || 'Author Name' }}</div>
+                            <h2 class="text-2xl font-bold leading-tight">{{ checklist.title || 'Checklist Title' }}</h2>
+                            <p class="text-sm opacity-90 mt-2 line-clamp-2" v-if="checklist.description">{{ checklist.description }}</p>
+                            <!-- Progress Bar Preview -->
+                            <div class="mt-6">
+                                <div class="flex justify-between text-xs font-medium mb-1 opacity-90">
+                                    <span>进度 0%</span>
+                                    <span>0/{{ totalItems }}</span>
+                                </div>
+                                <div class="h-2 bg-black/20 rounded-full overflow-hidden">
+                                    <div class="h-full bg-white/90 w-0"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- App Content -->
+                        <div class="flex-1 overflow-y-auto p-4 space-y-6 bg-white">
+                            <div v-for="(group, gIndex) in checklist.groups" :key="gIndex">
+                                <h3 class="font-bold text-gray-800 mb-3 flex items-center gap-2">
+                                    <span class="w-1.5 h-4 rounded-full" :class="currentThemeTextClass.replace('text-', 'bg-')"></span>
+                                    {{ group.title || 'Untitled Group' }}
+                                </h3>
+                                <div class="space-y-2">
+                                    <div v-for="(item, iIndex) in group.items" :key="iIndex" class="flex items-start gap-3 p-3 rounded-lg border border-gray-100 hover:border-gray-200 transition-colors cursor-pointer">
+                                        <div class="w-5 h-5 rounded border-2 border-gray-300 shrink-0 mt-0.5"></div>
+                                        <div class="flex-1">
+                                            <div class="text-gray-700 text-sm font-medium">{{ item.text || 'Item text' }}</div>
+                                            <div v-if="item.note" class="text-xs text-gray-500 mt-1">{{ item.note }}</div>
+                                            <div v-if="item.link" class="text-xs mt-1 text-blue-500 underline truncate">Resource Link</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-if="checklist.groups.length === 0" class="text-center text-gray-400 py-10 text-sm">
+                                暂无内容，请在左侧添加
+                            </div>
+                        </div>
+                        <!-- Footer -->
+                        <div class="bg-gray-50 p-3 text-center text-xs text-gray-400 border-t border-gray-100 shrink-0">
+                            Powered by Interactive Checklist Pro
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        const { createApp, ref, computed } = Vue;
+        createApp({
+            setup() {
+                const checklist = ref({
+                    title: '我的超级清单',
+                    description: '这是一个帮您达成目标的步骤清单。',
+                    author: '',
+                    theme: 'indigo',
+                    groups: [
+                        {
+                            title: '第一阶段：准备',
+                            items: [
+                                { text: '确定目标', note: '目标需要符合 SMART 原则', link: '' },
+                                { text: '收集资料', note: '', link: 'https://google.com' }
+                            ]
+                        }
+                    ]
+                });
+                const isExporting = ref(false);
+                const themeColors = [
+                    { value: 'indigo', bgClass: 'bg-indigo-600' },
+                    { value: 'blue', bgClass: 'bg-blue-600' },
+                    { value: 'emerald', bgClass: 'bg-emerald-600' },
+                    { value: 'rose', bgClass: 'bg-rose-600' },
+                    { value: 'amber', bgClass: 'bg-amber-600' },
+                    { value: 'slate', bgClass: 'bg-slate-800' },
+                ];
+                const currentThemeClass = computed(() => {
+                    const map = {
+                        'indigo': 'bg-indigo-600',
+                        'blue': 'bg-blue-600',
+                        'emerald': 'bg-emerald-600',
+                        'rose': 'bg-rose-600',
+                        'amber': 'bg-amber-600',
+                        'slate': 'bg-slate-800',
+                    };
+                    return map[checklist.value.theme] || 'bg-indigo-600';
+                });
+                const currentThemeTextClass = computed(() => {
+                    const map = {
+                        'indigo': 'text-indigo-600',
+                        'blue': 'text-blue-600',
+                        'emerald': 'text-emerald-600',
+                        'rose': 'text-rose-600',
+                        'amber': 'text-amber-600',
+                        'slate': 'text-slate-800',
+                    };
+                    return map[checklist.value.theme] || 'text-indigo-600';
+                });
+                const totalItems = computed(() => {
+                    return checklist.value.groups.reduce((acc, g) => acc + g.items.length, 0);
+                });
+                // Actions
+                const addGroup = () => {
+                    checklist.value.groups.push({ title: '', items: [] });
+                };
+                const removeGroup = (index) => {
+                    if(confirm('确定删除此分组吗？')) checklist.value.groups.splice(index, 1);
+                };
+                const moveGroup = (index, direction) => {
+                    const newIndex = index + direction;
+                    if (newIndex >= 0 && newIndex < checklist.value.groups.length) {
+                        const temp = checklist.value.groups[index];
+                        checklist.value.groups[index] = checklist.value.groups[newIndex];
+                        checklist.value.groups[newIndex] = temp;
+                    }
+                };
+                const addItem = (gIndex) => {
+                    checklist.value.groups[gIndex].items.push({ text: '', note: '', link: '' });
+                };
+                const removeItem = (gIndex, iIndex) => {
+                    checklist.value.groups[gIndex].items.splice(iIndex, 1);
+                };
+                const moveItem = (gIndex, iIndex, direction) => {
+                    const items = checklist.value.groups[gIndex].items;
+                    const newIndex = iIndex + direction;
+                    if (newIndex >= 0 && newIndex < items.length) {
+                        const temp = items[iIndex];
+                        items[iIndex] = items[newIndex];
+                        items[newIndex] = temp;
+                    }
+                };
+                const downloadHTML = async () => {
+                    isExporting.value = true;
+                    try {
+                        const response = await fetch('/download', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(checklist.value)
+                        });
+                        if (!response.ok) throw new Error('Export failed');
+                        const blob = await response.blob();
+                        const url = window.URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.href = url;
+                        a.download = `checklist-${Date.now()}.html`;
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                        window.URL.revokeObjectURL(url);
+                    } catch (e) {
+                        alert('导出失败: ' + e.message);
+                    } finally {
+                        isExporting.value = false;
+                    }
+                };
+                return {
+                    checklist,
+                    themeColors,
+                    currentThemeClass,
+                    currentThemeTextClass,
+                    totalItems,
+                    addGroup, removeGroup, moveGroup,
+                    addItem, removeItem, moveItem,
+                    downloadHTML, isExporting
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>

templates/export_template.html ADDED Viewed

	@@ -0,0 +1,253 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ checklist_data.title }}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body { font-family: 'Inter', sans-serif; }
+        .checkbox-wrapper input:checked + div {
+            background-color: currentColor;
+            border-color: currentColor;
+        }
+        .checkbox-wrapper input:checked + div svg {
+            display: block;
+        }
+        /* Smooth transitions */
+        .transition-all-300 { transition: all 0.3s ease; }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen pb-20">
+    <!-- Data Injection -->
+    <script>
+        const checklistData = {{ checklist_data_json|safe }};
+        const STORAGE_KEY = 'checklist_pro_' + btoa(encodeURIComponent(checklistData.title)).slice(0, 16);
+    </script>
+    <div id="app" class="max-w-md mx-auto bg-white min-h-screen shadow-2xl relative">
+        <!-- Header -->
+        <header id="header-bg" class="text-white p-8 pt-12 rounded-b-[2rem] shadow-lg relative overflow-hidden transition-colors duration-300">
+            <div class="relative z-10">
+                <div class="text-xs opacity-80 mb-2 font-medium tracking-wider uppercase">{{ checklist_data.author }}</div>
+                <h1 class="text-3xl font-bold leading-tight mb-3">{{ checklist_data.title }}</h1>
+                <p class="text-white/90 text-sm leading-relaxed">{{ checklist_data.description }}</p>
+                <!-- Progress -->
+                <div class="mt-8">
+                    <div class="flex justify-between text-xs font-bold mb-2 opacity-90">
+                        <span id="progress-text">0% 完成</span>
+                        <span id="count-text">0/0</span>
+                    </div>
+                    <div class="h-2.5 bg-black/20 rounded-full overflow-hidden backdrop-blur-sm">
+                        <div id="progress-bar" class="h-full bg-white/95 w-0 transition-all duration-500 ease-out rounded-full"></div>
+                    </div>
+                </div>
+            </div>
+            <!-- Decorative Circles -->
+            <div class="absolute top-0 right-0 -mr-10 -mt-10 w-40 h-40 bg-white/10 rounded-full blur-2xl"></div>
+            <div class="absolute bottom-0 left-0 -ml-10 -mb-5 w-32 h-32 bg-black/10 rounded-full blur-xl"></div>
+        </header>
+        <!-- Content -->
+        <main class="p-6 space-y-8">
+            <div id="groups-container" class="space-y-8">
+                <!-- Groups will be rendered here -->
+            </div>
+            <!-- Reset Button -->
+            <div class="pt-8 pb-4 text-center">
+                <button onclick="resetProgress()" class="text-xs text-gray-400 hover:text-gray-600 underline decoration-dotted">
+                    重置进度 (Clear Progress)
+                </button>
+            </div>
+        </main>
+        <!-- Footer -->
+        <footer class="text-center p-6 text-xs text-gray-300 border-t border-gray-50">
+            Created with Interactive Checklist Pro
+        </footer>
+    </div>
+    <!-- Logic -->
+    <script>
+        // Theme Mapping
+        const themeMap = {
+            'indigo': 'bg-indigo-600',
+            'blue': 'bg-blue-600',
+            'emerald': 'bg-emerald-600',
+            'rose': 'bg-rose-600',
+            'amber': 'bg-amber-600',
+            'slate': 'bg-slate-800',
+        };
+        const textThemeMap = {
+            'indigo': 'text-indigo-600',
+            'blue': 'text-blue-600',
+            'emerald': 'text-emerald-600',
+            'rose': 'text-rose-600',
+            'amber': 'text-amber-600',
+            'slate': 'text-slate-800',
+        };
+        const themeClass = themeMap[checklistData.theme] || 'bg-indigo-600';
+        const textClass = textThemeMap[checklistData.theme] || 'text-indigo-600';
+        // Apply Theme
+        document.getElementById('header-bg').classList.add(themeClass);
+        // State
+        let state = {
+            checkedItems: [] // array of item IDs (groupIndex-itemIndex)
+        };
+        // Load State
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved) {
+            try {
+                state = JSON.parse(saved);
+            } catch(e) { console.error('Load failed', e); }
+        }
+        // Render
+        const container = document.getElementById('groups-container');
+        let totalItemsCount = 0;
+        checklistData.groups.forEach((group, gIndex) => {
+            const groupEl = document.createElement('div');
+            // Group Title
+            const titleHTML = `
+                <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
+                    <span class="w-1.5 h-5 rounded-full ${themeClass}"></span>
+                    ${group.title}
+                </h2>
+            `;
+            // Items
+            let itemsHTML = '<div class="space-y-3">';
+            group.items.forEach((item, iIndex) => {
+                totalItemsCount++;
+                const itemId = `${gIndex}-${iIndex}`;
+                const isChecked = state.checkedItems.includes(itemId);
+                itemsHTML += `
+                    <label class="checkbox-wrapper flex items-start gap-3 p-3 rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm bg-white transition-all-300 cursor-pointer select-none group ${isChecked ? 'bg-gray-50/50' : ''}">
+                        <input type="checkbox" class="hidden"
+                            onchange="toggleItem('${itemId}')"
+                            ${isChecked ? 'checked' : ''}>
+                        <div class="w-6 h-6 rounded-lg border-2 border-gray-200 flex items-center justify-center text-white shrink-0 transition-colors ${textClass.replace('text-', 'text-')} group-hover:border-gray-300">
+                            <svg class="w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
+                        </div>
+                        <div class="flex-1 pt-0.5 ${isChecked ? 'opacity-50 line-through grayscale' : ''} transition-all duration-300">
+                            <div class="text-gray-700 font-medium text-sm leading-snug">${item.text}</div>
+                            ${item.note ? `<div class="text-xs text-gray-500 mt-1">${item.note}</div>` : ''}
+                            ${item.link ? `<a href="${item.link}" target="_blank" class="inline-flex items-center gap-1 text-xs mt-1.5 ${textClass} hover:underline" onclick="event.stopPropagation()"><i class="ph ph-link"></i> Resource</a>` : ''}
+                        </div>
+                    </label>
+                `;
+            });
+            itemsHTML += '</div>';
+            groupEl.innerHTML = titleHTML + itemsHTML;
+            container.appendChild(groupEl);
+        });
+        // Update UI
+        function updateUI() {
+            const checkedCount = state.checkedItems.length;
+            const percentage = totalItemsCount === 0 ? 0 : Math.round((checkedCount / totalItemsCount) * 100);
+            document.getElementById('progress-bar').style.width = `${percentage}%`;
+            document.getElementById('progress-text').innerText = `${percentage}% 完成`;
+            document.getElementById('count-text').innerText = `${checkedCount}/${totalItemsCount}`;
+            // Check for completion
+            if (percentage === 100 && totalItemsCount > 0) {
+                triggerConfetti();
+            }
+        }
+        // Logic
+        window.toggleItem = (id) => {
+            if (state.checkedItems.includes(id)) {
+                state.checkedItems = state.checkedItems.filter(i => i !== id);
+            } else {
+                state.checkedItems.push(id);
+            }
+            save();
+            // Re-render specifically this item or just toggle class (Optimization: toggle class directly)
+            // For simplicity in this vanilla script, reloading page or complex DOM manipulation is overkill.
+            // But we need to update the visual state of the specific element immediately.
+            // The input 'checked' state handles the icon. We need to handle the strikethrough class.
+            const input = document.querySelector(`input[onchange="toggleItem('${id}')"]`);
+            const wrapper = input.closest('label');
+            const contentDiv = wrapper.querySelector('.flex-1');
+            if (state.checkedItems.includes(id)) {
+                contentDiv.classList.add('opacity-50', 'line-through', 'grayscale');
+                wrapper.classList.add('bg-gray-50/50');
+            } else {
+                contentDiv.classList.remove('opacity-50', 'line-through', 'grayscale');
+                wrapper.classList.remove('bg-gray-50/50');
+            }
+            updateUI();
+        };
+        function save() {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+        }
+        window.resetProgress = () => {
+            if(confirm('确定要清空所有进度吗？')) {
+                state.checkedItems = [];
+                save();
+                location.reload();
+            }
+        };
+        function triggerConfetti() {
+            const count = 200;
+            const defaults = {
+                origin: { y: 0.7 }
+            };
+            function fire(particleRatio, opts) {
+                confetti(Object.assign({}, defaults, opts, {
+                    particleCount: Math.floor(count * particleRatio)
+                }));
+            }
+            fire(0.25, { spread: 26, startVelocity: 55 });
+            fire(0.2, { spread: 60 });
+            fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 });
+            fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 });
+            fire(0.1, { spread: 120, startVelocity: 45 });
+        }
+        // Init
+        // We need to apply initial visual states (strikethrough) since we static rendered
+        // Actually, we should iterate and apply classes based on state on load.
+        state.checkedItems.forEach(id => {
+            const input = document.querySelector(`input[onchange="toggleItem('${id}')"]`);
+            if(input) {
+                input.checked = true;
+                const wrapper = input.closest('label');
+                const contentDiv = wrapper.querySelector('.flex-1');
+                contentDiv.classList.add('opacity-50', 'line-through', 'grayscale');
+                wrapper.classList.add('bg-gray-50/50');
+            }
+        });
+        updateUI();
+    </script>
+</body>
+</html>