Spaces:

duqing26
/

cron-schedule-studio

Sleeping

App Files Files Community

Trae Assistant commited on Jan 31

Commit

3ff4c5e

0 Parent(s):

Initial commit: Cron Schedule Studio with robust Vue/Flask setup

Browse files

Files changed (6) hide show

.gitignore +7 -0
Dockerfile +10 -0
README.md +53 -0
app.py +26 -0
requirements.txt +2 -0
templates/index.html +544 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,7 @@

+__pycache__/
+*.py[cod]
+*$py.class
+.venv/
+env/
+venv/
+.DS_Store

Dockerfile ADDED Viewed

	@@ -0,0 +1,10 @@

+FROM python:3.9-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md ADDED Viewed

	@@ -0,0 +1,53 @@

+---
+title: 定时任务调度工坊
+emoji: ⏰
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+short_description: 可视化 Cron 表达式生成与代码导出工具
+---
+# 定时任务调度工坊 (Cron Schedule Studio)
+这是一个现代化的、可视化的 Cron 表达式生成器和调度工具。
+## 功能特点
+- **可视化编辑器**: 直观地调整分钟、小时、日期、月份和星期。
+- **实时预览**: 实时计算并显示未来 5 次运行时间（本地时间和 UTC）。
+- **多格式导出**:
+  - Linux Crontab
+  - Kubernetes CronJob YAML
+  - GitHub Actions YAML
+  - Node.js (node-cron)
+  - Python (APScheduler)
+- **暗黑模式**: 完美的深色主题支持。
+- **快速预设**: 内置常用调度模板（如每天午夜、每周一等）。
+## 运行方式
+### 本地运行
+1. 安装依赖:
+   ```bash
+   pip install -r requirements.txt
+   ```
+2. 启动应用:
+   ```bash
+   python app.py
+   ```
+3. 访问: http://localhost:7860
+### Docker 运行
+```bash
+docker build -t cron-schedule-studio .
+docker run -p 7860:7860 cron-schedule-studio
+```
+## 许可证
+MIT

app.py ADDED Viewed

	@@ -0,0 +1,26 @@

+from flask import Flask, render_template, send_from_directory, request
+import os
+app = Flask(__name__)
+# Config for robustness
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload limit
+app.config['TEMPLATES_AUTO_RELOAD'] = True
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/static/<path:path>')
+def send_static(path):
+    return send_from_directory('static', path)
+@app.route('/health')
+def health():
+    return "OK", 200
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 7860))
+    # Disable debug in production-like environments if needed, but for Spaces it's fine usually.
+    # We use 0.0.0.0 for external access
+    app.run(host='0.0.0.0', port=port)

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ flask
2	+ gunicorn

templates/index.html ADDED Viewed

	@@ -0,0 +1,544 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>定时任务调度工坊 (Cron Schedule Studio)</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/cron-parser@4.9.0/dist/cron-parser.min.js"></script>
+    <script src="https://unpkg.com/cronstrue@latest/dist/cronstrue.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', system-ui, -apple-system, sans-serif;
+        }
+        .cron-input {
+            transition: all 0.2s;
+        }
+        .cron-input:focus {
+            transform: translateY(-2px);
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #1f2937;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #4b5563;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #6b7280;
+        }
+        [v-cloak] { display: none; }
+    </style>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3b82f6',
+                        secondary: '#10b981',
+                        dark: '#0f172a',
+                        darker: '#020617',
+                        surface: '#1e293b'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-100 dark:bg-darker text-gray-800 dark:text-gray-100 min-h-screen transition-colors duration-300">
+    <div id="app" v-cloak class="flex flex-col min-h-screen">
+        <!-- Header -->
+        <header class="bg-white dark:bg-surface border-b dark:border-gray-700 shadow-sm sticky top-0 z-50">
+            <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 bg-gradient-to-br from-primary to-purple-600 rounded-xl flex items-center justify-center text-white shadow-lg">
+                        <i class="fa-solid fa-clock text-xl"></i>
+                    </div>
+                    <div>
+                        <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-500">
+                            定时任务调度工坊
+                        </h1>
+                        <p class="text-xs text-gray-500 dark:text-gray-400">Cron Schedule Studio</p>
+                    </div>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button @click="toggleTheme" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+                        <i class="fas" :class="isDark ? 'fa-sun text-yellow-400' : 'fa-moon text-gray-600'"></i>
+                    </button>
+                    <a href="https://github.com" target="_blank" class="text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors">
+                        <i class="fab fa-github text-xl"></i>
+                    </a>
+                </div>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <main class="flex-grow container mx-auto px-4 py-8">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <!-- Left Column: Editor -->
+                <div class="lg:col-span-2 space-y-6">
+                    <!-- Quick Presets -->
+                    <div class="bg-white dark:bg-surface rounded-2xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
+                        <h2 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">快速预设</h2>
+                        <div class="flex flex-wrap gap-2">
+                            <button v-for="preset in presets"
+                                    @click="applyPreset(preset)"
+                                    class="px-3 py-1.5 text-sm rounded-lg border transition-all duration-200"
+                                    :class="currentPreset === preset.name
+                                        ? 'bg-primary/10 border-primary text-primary font-medium'
+                                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-500'">
+                                ${ preset.name }
+                            </button>
+                        </div>
+                    </div>
+                    <!-- Cron Editor -->
+                    <div class="bg-white dark:bg-surface rounded-2xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
+                        <div class="flex justify-between items-center mb-6">
+                            <h2 class="text-xl font-bold">表达式编辑器</h2>
+                            <div class="flex space-x-2">
+                                <button @click="importCron" class="text-sm px-3 py-1 bg-purple-500 text-white rounded hover:bg-purple-600 transition-colors mr-2">
+                                    <i class="fas fa-file-import mr-1"></i> 导入/反解析
+                                </button>
+                                <button @click="copyCron" class="text-sm px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
+                                    <i class="fas fa-copy mr-1"></i> 复制
+                                </button>
+                                <button @click="resetCron" class="text-sm px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
+                                    <i class="fas fa-undo mr-1"></i> 重置
+                                </button>
+                            </div>
+                        </div>
+                        <!-- Import Modal (Inline) -->
+                        <div v-if="showImport" class="mb-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-600 animate-fade-in">
+                            <label class="block text-sm font-medium mb-2">输入 Cron 表达式:</label>
+                            <div class="flex space-x-2">
+                                <input v-model="importInput" type="text" class="flex-grow px-4 py-2 rounded-lg bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-primary outline-none" placeholder="* * * * *">
+                                <button @click="confirmImport" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600">解析</button>
+                                <button @click="showImport = false" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300">取消</button>
+                            </div>
+                            <p v-if="importError" class="text-red-500 text-xs mt-2">${ importError }</p>
+                        </div>
+                        <!-- The 5 Fields -->
+                        <div class="grid grid-cols-5 gap-4 mb-8">
+                            <div v-for="(field, index) in cronFields" :key="index" class="text-center group">
+                                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2 uppercase">${ field.label }</label>
+                                <input type="text"
+                                       v-model="field.value"
+                                       @input="updateCronFromFields"
+                                       class="cron-input w-full text-center py-3 rounded-xl bg-gray-50 dark:bg-gray-800 border-2 border-transparent focus:border-primary focus:bg-white dark:focus:bg-gray-900 outline-none text-xl font-mono font-bold shadow-sm"
+                                       :class="{'border-red-500': field.error}">
+                                <div class="text-[10px] text-gray-400 mt-1 opacity-0 group-hover:opacity-100 transition-opacity">${ field.range }</div>
+                            </div>
+                        </div>
+                        <!-- Combined Result Display -->
+                        <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 flex items-center justify-center mb-6 border border-gray-200 dark:border-gray-700">
+                            <span class="font-mono text-3xl font-bold tracking-wider text-primary">${ cronString }</span>
+                        </div>
+                        <!-- Human Readable -->
+                        <div class="text-center">
+                            <p class="text-lg text-gray-700 dark:text-gray-300">
+                                <i class="fas fa-language text-secondary mr-2"></i>
+                                <span v-if="humanReadable">${ humanReadable }</span>
+                                <span v-else class="text-red-500">表达式无效</span>
+                            </p>
+                            <p class="text-sm text-gray-500 mt-1">下一次运行: ${ nextRunRelative }</p>
+                        </div>
+                    </div>
+                    <!-- Next Runs -->
+                    <div class="bg-white dark:bg-surface rounded-2xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
+                        <h2 class="text-lg font-bold mb-4 flex items-center">
+                            <i class="fas fa-history text-purple-500 mr-2"></i>
+                            未来运行时间 (Next 5 Runs)
+                        </h2>
+                        <div v-if="nextRuns.length > 0" class="space-y-3">
+                            <div v-for="(run, idx) in nextRuns" :key="idx"
+                                 class="flex justify-between items-center p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-750 transition-colors border border-gray-100 dark:border-gray-700">
+                                <div class="flex items-center">
+                                    <span class="w-6 h-6 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 flex items-center justify-center text-xs font-bold mr-3">
+                                        ${ idx + 1 }
+                                    </span>
+                                    <span class="font-mono text-sm">${ run.local }</span>
+                                </div>
+                                <span class="text-xs text-gray-400 font-mono">UTC: ${ run.utc }</span>
+                            </div>
+                        </div>
+                        <div v-else class="text-center py-8 text-gray-400">
+                            <i class="fas fa-exclamation-triangle mb-2 text-2xl"></i>
+                            <p>无法计算运行时间，请检查表达式</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Right Column: Export & Config -->
+                <div class="space-y-6">
+                    <!-- Code Export -->
+                    <div class="bg-white dark:bg-surface rounded-2xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
+                        <h2 class="text-lg font-bold mb-4 flex items-center">
+                            <i class="fas fa-code text-secondary mr-2"></i>
+                            代码导出
+                        </h2>
+                        <div class="flex space-x-2 mb-4 overflow-x-auto pb-2 no-scrollbar">
+                            <button v-for="type in exportTypes"
+                                    @click="currentExport = type.id"
+                                    class="px-3 py-1 text-xs whitespace-nowrap rounded-full transition-colors"
+                                    :class="currentExport === type.id
+                                        ? 'bg-secondary text-white shadow-md'
+                                        : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'">
+                                ${ type.name }
+                            </button>
+                        </div>
+                        <div class="relative group">
+                            <div class="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                                <button @click="copyCode" class="p-1.5 bg-gray-700 text-white rounded hover:bg-gray-600 text-xs" title="复制">
+                                    <i class="fas fa-copy"></i>
+                                </button>
+                            </div>
+                            <pre class="bg-[#282c34] text-gray-300 p-4 rounded-xl text-xs overflow-x-auto font-mono leading-relaxed custom-scrollbar"><code>${ generatedCode }</code></pre>
+                        </div>
+                    </div>
+                     <!-- History -->
+                     <div class="bg-white dark:bg-surface rounded-2xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
+                        <div class="flex justify-between items-center mb-4">
+                            <h2 class="text-lg font-bold flex items-center">
+                                <i class="fas fa-clock-rotate-left text-blue-400 mr-2"></i>
+                                历史记录
+                            </h2>
+                            <button @click="clearHistory" class="text-xs text-gray-400 hover:text-red-500">清空</button>
+                        </div>
+                        <div class="space-y-2 max-h-60 overflow-y-auto custom-scrollbar">
+                            <div v-for="(hist, idx) in history" :key="idx"
+                                 @click="loadHistory(hist)"
+                                 class="p-2 bg-gray-50 dark:bg-gray-800 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer flex justify-between items-center group">
+                                <span class="font-mono text-xs font-bold">${ hist.cron }</span>
+                                <span class="text-[10px] text-gray-400 truncate ml-2 max-w-[100px]">${ hist.desc }</span>
+                            </div>
+                            <div v-if="history.length === 0" class="text-center text-sm text-gray-400 py-4">暂无历史记录</div>
+                        </div>
+                    </div>
+                    <!-- Helper / Cheatsheet -->
+                    <div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl shadow-lg p-6 text-white">
+                        <h2 class="text-lg font-bold mb-4 flex items-center">
+                            <i class="fas fa-lightbulb text-yellow-300 mr-2"></i>
+                            速查表
+                        </h2>
+                        <div class="space-y-3 text-sm opacity-90">
+                            <div class="flex justify-between border-b border-white/20 pb-2">
+                                <span>*</span>
+                                <span>任意值</span>
+                            </div>
+                            <div class="flex justify-between border-b border-white/20 pb-2">
+                                <span>,</span>
+                                <span>分隔符 (1,3,5)</span>
+                            </div>
+                            <div class="flex justify-between border-b border-white/20 pb-2">
+                                <span>-</span>
+                                <span>范围 (1-5)</span>
+                            </div>
+                            <div class="flex justify-between border-b border-white/20 pb-2">
+                                <span>/</span>
+                                <span>步长 (*/5)</span>
+                            </div>
+                        </div>
+                        <div class="mt-4 pt-4 border-t border-white/20">
+                            <p class="text-xs italic">
+                                提示: 周日可以是 0 或 7。
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <!-- Footer -->
+        <footer class="bg-white dark:bg-surface border-t dark:border-gray-700 py-6 mt-auto">
+            <div class="container mx-auto px-4 text-center text-sm text-gray-500">
+                <p>Created with <i class="fas fa-heart text-red-500 mx-1"></i> by Trae AI</p>
+            </div>
+        </footer>
+    </div>
+    <script>
+        const { createApp, ref, computed, watch, onMounted } = Vue;
+        createApp({
+            delimiters: ['${', '}'], // Important: Resolve conflict with Flask Jinja2
+            setup() {
+                const isDark = ref(true); // Default dark
+                const currentPreset = ref('');
+                const currentExport = ref('crontab');
+                const cronFields = ref([
+                    { label: '分钟', value: '*', range: '0-59' },
+                    { label: '小时', value: '*', range: '0-23' },
+                    { label: '日期', value: '*', range: '1-31' },
+                    { label: '月份', value: '*', range: '1-12' },
+                    { label: '星期', value: '*', range: '0-7' },
+                ]);
+                const nextRuns = ref([]);
+                const humanReadable = ref('');
+                const nextRunRelative = ref('');
+                // Import Logic
+                const showImport = ref(false);
+                const importInput = ref('');
+                const importError = ref('');
+                // History Logic
+                const history = ref([]);
+                const presets = [
+                    { name: '每分钟', value: '* * * * *' },
+                    { name: '每小时', value: '0 * * * *' },
+                    { name: '每天午夜', value: '0 0 * * *' },
+                    { name: '每周一', value: '0 0 * * 1' },
+                    { name: '每月1号', value: '0 0 1 * *' },
+                    { name: '工作日(早9点)', value: '0 9 * * 1-5' },
+                ];
+                const exportTypes = [
+                    { id: 'crontab', name: 'Linux Crontab' },
+                    { id: 'k8s', name: 'K8s CronJob' },
+                    { id: 'github', name: 'GitHub Actions' },
+                    { id: 'node', name: 'Node.js' },
+                    { id: 'python', name: 'Python' },
+                ];
+                const cronString = computed(() => {
+                    return cronFields.value.map(f => f.value).join(' ');
+                });
+                const generatedCode = computed(() => {
+                    const cron = cronString.value;
+                    const desc = humanReadable.value || 'Scheduled Task';
+                    switch(currentExport.value) {
+                        case 'crontab':
+                            return `# ${desc}\n# m h  dom mon dow   command\n${cron} /path/to/script.sh`;
+                        case 'k8s':
+                            return `apiVersion: batch/v1\nkind: CronJob\nmetadata:\n  name: my-job\nspec:\n  schedule: "${cron}"\n  jobTemplate:\n    spec:\n      template:\n        spec:\n          containers:\n          - name: job\n            image: busybox\n            args:\n            - /bin/sh\n            - -c\n            - date; echo Hello from Kubernetes Cluster\n          restartPolicy: OnFailure`;
+                        case 'github':
+                            return `name: Scheduled Workflow\non:\n  schedule:\n    - cron: '${cron}'\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout code\n        uses: actions/checkout@v2\n      - name: Run script\n        run: echo "Hello World"`;
+                        case 'node':
+                            return `const cron = require('node-cron');\n\ncron.schedule('${cron}', () => {\n  console.log('Running a task every ${desc}');\n});`;
+                        case 'python':
+                            return `# Using APScheduler:\nfrom apscheduler.schedulers.blocking import BlockingScheduler\n\nsched = BlockingScheduler()\n\n# ${desc}\n@sched.scheduled_job('cron', minute='${cronFields.value[0].value}', hour='${cronFields.value[1].value}', day='${cronFields.value[2].value}', month='${cronFields.value[3].value}', day_of_week='${cronFields.value[4].value}')\ndef scheduled_job():\n    print('This job is run every ${desc}.')\n\nsched.start()`;
+                        default:
+                            return cron;
+                    }
+                });
+                function applyPreset(preset) {
+                    currentPreset.value = preset.name;
+                    const parts = preset.value.split(' ');
+                    if(parts.length === 5) {
+                        cronFields.value.forEach((field, i) => {
+                            field.value = parts[i];
+                        });
+                        calculate();
+                    }
+                }
+                function updateCronFromFields() {
+                    currentPreset.value = '';
+                    calculate();
+                }
+                function resetCron() {
+                    applyPreset(presets[0]);
+                }
+                // Import / Reverse Parse
+                function importCron() {
+                    importInput.value = cronString.value;
+                    importError.value = '';
+                    showImport.value = true;
+                }
+                function confirmImport() {
+                    const parts = importInput.value.trim().split(/\s+/);
+                    if (parts.length !== 5) {
+                        importError.value = 'Cron 表达式必须包含 5 个部分 (分 时 日 月 周)';
+                        return;
+                    }
+                    try {
+                        // Test if valid
+                        const options = { currentDate: new Date() };
+                        cronParser.parseExpression(importInput.value, options);
+                        // Apply
+                        cronFields.value.forEach((field, i) => {
+                            field.value = parts[i];
+                        });
+                        currentPreset.value = '';
+                        calculate();
+                        showImport.value = false;
+                    } catch (e) {
+                        importError.value = '无效的 Cron 表达式: ' + e.message;
+                    }
+                }
+                function calculate() {
+                    try {
+                        const options = { currentDate: new Date() };
+                        const interval = cronParser.parseExpression(cronString.value, options);
+                        nextRuns.value = [];
+                        for (let i = 0; i < 5; i++) {
+                            const date = interval.next();
+                            nextRuns.value.push({
+                                local: date.toString(),
+                                utc: date.toISOString()
+                            });
+                        }
+                        // Human readable
+                        try {
+                            humanReadable.value = cronstrue.toString(cronString.value, { locale: "zh_CN" });
+                        } catch (e) {
+                            humanReadable.value = "根据 Cron 表达式执行";
+                        }
+                        // Relative time
+                        const next = new Date(nextRuns.value[0].local);
+                        const now = new Date();
+                        const diff = next - now;
+                        const minutes = Math.floor(diff / 60000);
+                        if (minutes < 60) nextRunRelative.value = `${minutes} 分钟后`;
+                        else if (minutes < 1440) nextRunRelative.value = `${Math.floor(minutes/60)} 小时后`;
+                        else nextRunRelative.value = `${Math.floor(minutes/1440)} 天后`;
+                        cronFields.value.forEach(f => f.error = false);
+                        addToHistory();
+                    } catch (err) {
+                        // console.error(err);
+                        humanReadable.value = null;
+                        nextRuns.value = [];
+                        nextRunRelative.value = '';
+                    }
+                }
+                // History Management
+                function addToHistory() {
+                    const currentCron = cronString.value;
+                    const currentDesc = humanReadable.value || 'Unknown';
+                    // Avoid duplicates at the top
+                    if (history.value.length > 0 && history.value[0].cron === currentCron) return;
+                    history.value.unshift({ cron: currentCron, desc: currentDesc });
+                    if (history.value.length > 10) history.value.pop();
+                    localStorage.setItem('cron_history', JSON.stringify(history.value));
+                }
+                function loadHistory(hist) {
+                    const parts = hist.cron.split(' ');
+                    if(parts.length === 5) {
+                        cronFields.value.forEach((field, i) => {
+                            field.value = parts[i];
+                        });
+                        calculate();
+                    }
+                }
+                function clearHistory() {
+                    history.value = [];
+                    localStorage.removeItem('cron_history');
+                }
+                function toggleTheme() {
+                    isDark.value = !isDark.value;
+                    if (isDark.value) {
+                        document.documentElement.classList.add('dark');
+                    } else {
+                        document.documentElement.classList.remove('dark');
+                    }
+                }
+                function copyCron() {
+                    navigator.clipboard.writeText(cronString.value);
+                    // Minimal feedback
+                }
+                function copyCode() {
+                    navigator.clipboard.writeText(generatedCode.value);
+                }
+                onMounted(() => {
+                    // Check system preference
+                    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                        isDark.value = true;
+                    }
+                    if (isDark.value) document.documentElement.classList.add('dark');
+                    // Load History
+                    const saved = localStorage.getItem('cron_history');
+                    if (saved) {
+                        try {
+                            history.value = JSON.parse(saved);
+                        } catch(e) {}
+                    }
+                    // Init
+                    applyPreset(presets[2]); // Default to Daily
+                });
+                return {
+                    isDark,
+                    cronFields,
+                    cronString,
+                    nextRuns,
+                    humanReadable,
+                    nextRunRelative,
+                    presets,
+                    currentPreset,
+                    applyPreset,
+                    updateCronFromFields,
+                    resetCron,
+                    toggleTheme,
+                    copyCron,
+                    copyCode,
+                    exportTypes,
+                    currentExport,
+                    generatedCode,
+                    // Import
+                    showImport,
+                    importInput,
+                    importError,
+                    importCron,
+                    confirmImport,
+                    // History
+                    history,
+                    loadHistory,
+                    clearHistory
+                }
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>