Cron 表达式翻译器

做一个 cron 表达式翻译器：用户输入 cron 表达式，实时翻译成人话解释，并列出接下来若干次执行时间。单文件 HTML。

做一个 cron 表达式翻译器：用户输入 cron 表达式，实时翻译成人话解释，并列出接下来若干次执行时间。单文件 HTML。 以下是详细的功能需求： **输入：** 1. 顶部一个宽大的 cron 表达式输入框，等宽字体，居中醒目 2. 下方并排展示 5 个字段的标签（分钟 / 小时 / 日 / 月 / 星期），输入时高亮当前字段 3. 输入支持标准 5 字段 cron 格式（Unix/Linux 标准，不含秒） 4. 提供至少 6 个常用表达式的快捷按钮（每分钟、每小时、每天午夜、每周一 9 点、每月 1 号、每季度等） **语法覆盖（必须全部支持）：** 5. 通配符 `*`（任意值） 6. 具体值：`5`、`0`、`31` 等 7. 列表：`1,3,5` 8. 范围：`1-5`、`9-17` 9. 步长：`*/5`、`0-30/5`、`1-10/2` 10. 星期字段支持数字（`0-7`，0 和 7 都是周日）和英文缩写（`SUN-SAT`） 11. 月份字段支持数字（`1-12`）和英文缩写（`JAN-DEC`） 12. （可选加分）宏语法：`@yearly` / `@monthly` / `@weekly` / `@daily` / `@hourly` **人话翻译（核心）：** 13. 实时输出一句自然语言描述，例如： - `*/5 * * * *` → "每 5 分钟执行一次" - `0 9 * * 1-5` → "每周一到周五的 9:00 执行" - `0 0 1 */3 *` → "每 3 个月的 1 号 0:00 执行" 14. 翻译要简洁、自然、无歧义（避免机械堆砌字段名） 15. 可选择中文或英文输出（至少支持中文） **下次执行时间：** 16. 列出接下来 **10 次** 执行时间，格式如 `2026-04-20 09:00 (周一)` 17. 使用用户本地时区，在界面上明确标注当前使用的时区 18. 支持切换参考时间（默认为"现在"，可改为任意用户指定时刻） **错误处理：** 19. 非法表达式（字段数不对、数值越界、范围颠倒、步长为 0 等）要给出**具体到字段**的错误提示 20. 错误提示应含有"建议"：例如用户输入 `60 * * * *`，提示"分钟字段必须在 0-59 之间，你是想输入 `0 * * * *`（每小时整点）吗？" 21. 输入为空时显示引导文案，而非错误 **UI/UX：** 22. 响应式，移动端可用 23. 支持一键复制当前表达式 24. 历史记录：最近输入过的 5-10 个表达式可快速回填 **技术约束：** - 单文件 HTML，所有自己写的 CSS 和 JS 内联 - cron 解析与时间计算的**核心逻辑必须自己实现**，不允许调用 `cron-parser`、`cronstrue` 等现成的 cron 库 - UI 层面的 CDN（图标、字体、样式库）不做限制

做一个 cron 表达式翻译器：用户输入 cron 表达式，实时翻译成人话解释，并列出接下来若干次执行时间。单文件 HTML。 以下是详细的功能需求： **输入：** 1. 顶部一个宽大的 cron 表达式输入框，等宽字体，居中醒目 2. 下方并排展示 5 个字段的标签（分钟 / 小时 / 日 / 月 / 星期），输入时高亮当前字段 3. 输入支持标准 5 字段 cron 格式（Unix/Linux 标准，不含秒） 4. 提供至少 6 个常用表达式的快捷按钮（每分钟、每小时、每天午夜、每周一 9 点、每月 1 号、每季度等） **语法覆盖（必须全部支持）：** 5. 通配符 `*`（任意值） 6. 具体值：`5`、`0`、`31` 等 7. 列表：`1,3,5` 8. 范围：`1-5`、`9-17` 9. 步长：`*/5`、`0-30/5`、`1-10/2` 10. 星期字段支持数字（`0-7`，0 和 7 都是周日）和英文缩写（`SUN-SAT`） 11. 月份字段支持数字（`1-12`）和英文缩写（`JAN-DEC`） 12. （可选加分）宏语法：`@yearly` / `@monthly` / `@weekly` / `@daily` / `@hourly` **人话翻译（核心）：** 13. 实时输出一句自然语言描述，例如： - `*/5 * * * *` → "每 5 分钟执行一次" - `0 9 * * 1-5` → "每周一到周五的 9:00 执行" - `0 0 1 */3 *` → "每 3 个月的 1 号 0:00 执行" 14. 翻译要简洁、自然、无歧义（避免机械堆砌字段名） 15. 可选择中文或英文输出（至少支持中文） **下次执行时间：** 16. 列出接下来 **10 次** 执行时间，格式如 `2026-04-20 09:00 (周一)` 17. 使用用户本地时区，在界面上明确标注当前使用的时区 18. 支持切换参考时间（默认为"现在"，可改为任意用户指定时刻） **错误处理：** 19. 非法表达式（字段数不对、数值越界、范围颠倒、步长为 0 等）要给出**具体到字段**的错误提示 20. 错误提示应含有"建议"：例如用户输入 `60 * * * *`，提示"分钟字段必须在 0-59 之间，你是想输入 `0 * * * *`（每小时整点）吗？" 21. 输入为空时显示引导文案，而非错误 **UI/UX：** 22. 响应式，移动端可用 23. 支持一键复制当前表达式 24. 历史记录：最近输入过的 5-10 个表达式可快速回填 **技术约束：** - 单文件 HTML，所有自己写的 CSS 和 JS 内联 - cron 解析与时间计算的**核心逻辑必须自己实现**，不允许调用 `cron-parser`、`cronstrue` 等现成的 cron 库 - UI 层面的 CDN（图标、字体、样式库）不做限制 **视觉要求：** 严格遵循以下 Vaporwave / Outrun Design System 实现界面。 ```` <design-system> # Vaporwave / Outrun Design System ## 1. Design Philosophy **"Digital Nostalgia meets Neon Future — A synthetic reality drenched in retro-futuristic excess."** This is a bold celebration of 1980s retro-futurism, vaporwave aesthetics, and early computer graphics. The design transports users to a synthetic digital dimension where neon lights pierce through infinite grids, CRT scanlines distort reality, and every interaction feels like commanding a vintage terminal from the year 2088. ### Core Aesthetic DNA **Visual Language**: High-contrast maximalism with unapologetic neon saturation. Nothing is subtle. Every element glows, transforms, or pulses with digital energy. The design rejects minimalism in favor of dense, layered visual effects that create depth through overlapping gradients, glows, scanlines, and perspective distortions. **Emotional Tone**: Nostalgic yet futuristic. Simultaneously retro (80s arcade cabinets, VHS tapes, early Windows UIs) and forward-looking (cyberpunk cityscapes, holographic interfaces, digital utopias). The mood is dreamy, synthetic, slightly surreal — like navigating a computer from a past vision of the future. **Design Pillars**: 1. **The Infinite Grid**: Perspective-transformed wireframe grids that recede toward the horizon, creating spatial depth and that iconic outrun highway feeling 2. **Neon Glow Supremacy**: Hot magenta (#FF00FF), electric cyan (#00FFFF), and sunset orange (#FF9900) with aggressive drop shadows and box shadows that make elements appear to emit light 3. **CRT Scanlines & Distortion**: Global overlay of horizontal scanlines and subtle RGB chromatic aberration mimicking old CRT monitors 4. **Terminal/Command-Line Interfaces**: Text prefixed with ">" symbols, monospace fonts, window chrome with colored dots, status bars — everything references DOS prompts and early GUIs 5. **Geometric Transformation**: Skewed containers, rotated icons, perspective grids — elements are rarely perfectly aligned; they feel kinetic and dimensional 6. **Gradient Mania**: Multi-stop gradients everywhere — text fills, backgrounds, borders, glows. Especially the iconic sunset gradient (yellow → orange → pink → purple) ### Interaction Philosophy **Hover States Are Theatrical**: Buttons don't just change color — they un-skew, explode with glow, scale up, and invert colors. Icons rotate. Cards lift off the page. Every interaction is a micro-event. ### The "Anti-Patterns" (What This Is NOT) - **Not Flat**: Aggressive use of shadows, glows, gradients, and depth - **Not Minimalist**: Dense with effects, borders, patterns, and overlays - **Not Corporate**: Playful, artistic, experimental - **Not Muted**: Colors are 100% saturated; contrasts are extreme ## 2. Design Token System (The DNA) ### Colors (Dark Mode Only) - **Background (The Void)**: `#090014` - **Foreground (Chrome Text)**: `#E0E0E0` - **Card Background (Glass Panels)**: `rgba(26, 16, 60, 0.8)` / `#1a103c` - **Primary Accent (Hot Magenta)**: `#FF00FF` - **Secondary Accent (Electric Cyan)**: `#00FFFF` - **Tertiary Accent (Sunset Orange)**: `#FF9900` - **Border (Default)**: `#2D1B4E` - **Border (Active)**: `#00FFFF` or `#FF00FF` **Gradient Combinations**: - **Sunset Gradient**: `linear-gradient(to right, #FF9900, #FF00FF, #00FFFF)` - **Glow Gradient**: `linear-gradient(to bottom, #FF9900, #FF00FF)` - **Accent Bar**: `linear-gradient(to right, #FF00FF, #00FFFF)` ### Typography - **Headings**: `"Orbitron", sans-serif` — geometric, futuristic, all-caps preferred - **Body/UI/Code**: `"Share Tech Mono", monospace` — terminal-like, fixed-width ### Radius & Borders - **Border Radius**: `0px` (aggressively geometric, angular) - **Border Width**: `2px` standard; heavier for outer containers - **Active Borders**: Neon cyan or magenta ### Shadows & Effects (The Glow) - **Magenta Glow**: `box-shadow: 0 0 20px #FF00FF` - **Cyan Glow**: `box-shadow: 0 0 15px #00FFFF` - **Hover**: 2x–3x glow intensity amplification ### Textures & Background Patterns **Perspective Grid Floor**: ```css background-image: linear-gradient(transparent 95%, #FF00FF 95%), linear-gradient(90deg, transparent 95%, #FF00FF 95%); background-size: 40px 40px; transform: perspective(500px) rotateX(60deg) translateY(-100px) scale(2); mask-image: linear-gradient(to bottom, transparent, black); ``` **Global Scanlines Overlay**: ```css background: linear-gradient(rgba(18,16,20,0) 50%, rgba(0,0,0,0.25) 50%); background-size: 100% 4px; position: fixed; inset: 0; pointer-events: none; z-index: 50; ``` **Floating Sun**: `600px` diameter blurred gradient orb, `blur: 100px`, `background: linear-gradient(to bottom, #FF9900, #FF00FF)`, `opacity: 0.2` ## 3. Component Stylings ### Buttons **Primary**: `-skew-x-12` transform, `border-2 border-[#00FFFF]`, transparent bg, cyan text; on hover: un-skew, fill cyan bg, black text, `box-shadow: 0 0 20px #00FFFF` **Secondary**: `-skew-x-12`, magenta fill; hover: un-skew, scale **Ghost**: transparent, on hover: cyan tint bg, cyan text All buttons: `border-radius: 0`, uppercase, monospace, wide letter-spacing ### Cards / Containers **Standard Card**: - `border: 1px solid rgba(255,0,255,0.3)` + `border-top: 2px solid #00FFFF` (laser accent) - `background: rgba(26,16,60,0.8)`, `backdrop-filter: blur(12px)` - Card title: cyan, `text-shadow: 0 0 5px rgba(0,255,255,0.8)` **Terminal Window**: - `border: 2px solid #00FFFF`, `background: rgba(0,0,0,0.8)`, cyan glow shadow - Title bar with window-chrome dots (magenta / cyan / orange circles) ### Inputs **Terminal-Style**: ```css border: none; border-bottom: 2px solid #FF00FF; background: black; color: #00FFFF; font-family: 'Share Tech Mono', monospace; font-size: 1.125rem; ``` On focus: `border-bottom-color: #00FFFF`, `box-shadow: 0 0 15px #00FFFF` ## 4. Non-Generic "Bold" Choices (Mandatory) 1. **Aggressive Skewing**: Buttons/badges use `-skew-x-12`; un-skew on hover 2. **Global CRT Scanlines**: Fixed overlay across entire viewport 3. **Perspective Grid Backgrounds**: Iconic receding grid floor effect 4. **Gradient Text Fills**: `background: linear-gradient(...); -webkit-background-clip: text; color: transparent` 5. **Terminal/Window Chrome**: Title bars with colored dots, ">" command prompt prefixes 6. **Massive Blurred Sun**: Giant gradient orb for atmospheric depth ## 5. Animation & Motion - **Transition**: `200ms linear` — fast, unnatural, digital - **Hover**: Buttons un-skew + fill + glow; Cards lift (`translateY(-4px)`) + shadow increase - **Cursor**: Terminal blinking caret on inputs ## 6. Layout Strategy - Background layers (back → front): perspective grid → floating sun → content → scanline overlay - Cards use `backdrop-filter: blur` to show layered depth - Section containers: `max-width: 1280px`, centered ## 7. Responsive Strategy - Mobile-first; neon borders, glows, and grid backgrounds are **non-negotiable on all screen sizes** - Buttons maintain minimum 44px touch target - Scale down typography on mobile but keep all visual effects </design-system> ````