Build a Cron Expression Builder with AI

Build a single-page Cron Expression Builder as a static HTML file with embedded CSS and JavaScript. No frameworks or dependencies. LAYOUT: - Dark theme (background #0d1117, text #c9d1d9) - Center-aligned, max-width 800px - Header: "Cron Expression Builder" title, subtitle "Build, understand, and test cron schedules visually" - Main sections top to bottom: Expression Display, Visual Builder, Human-Readable Description, Next Runs, Common Examples EXPRESSION DISPLAY: - Large monospace text showing the current cron expression (e.g., "0 9 * * 1") - Each of the 5 fields is a separate span with a distinct subtle background color: - Minute: #3b82f620 - Hour: #22c55e20 - Day of month: #f59e0b20 - Month: #a855f720 - Day of week: #ef444420 - Below the expression, labels for each field: "minute", "hour", "day (month)", "month", "day (week)" - The expression is editable — typing directly into it updates the visual builder below - Copy button next to the expression - Validation: if the typed expression is invalid, show red border and error message (e.g., "Invalid minute value: must be 0-59, *, or a valid pattern") VISUAL BUILDER: - Five rows, one for each cron field, each with: MINUTE (0-59): - Dropdown with options: "Every minute (*)", "Every N minutes (*/N)", "Specific minute(s)" - If "Every N minutes": number input for N (1-59) - If "Specific minute(s)": multi-select grid of buttons 0-59 (compact, 12 per row), clicking toggles selection - Selected values shown as comma-separated: "0,15,30,45" HOUR (0-23): - Dropdown: "Every hour (*)", "Every N hours (*/N)", "Specific hour(s)", "Range" - If "Every N hours": number input for N (1-23) - If "Specific hour(s)": multi-select buttons 0-23 (8 per row), showing both 24h and 12h format (e.g., "9 (9 AM)", "14 (2 PM)") - If "Range": two dropdowns for start hour and end hour DAY OF MONTH (1-31): - Dropdown: "Every day (*)", "Every N days (*/N)", "Specific day(s)", "Last day of month (L)" - If "Specific day(s)": multi-select calendar-style grid 1-31 (7 per row) MONTH (1-12): - Dropdown: "Every month (*)", "Every N months (*/N)", "Specific month(s)" - If "Specific month(s)": buttons with month names: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec DAY OF WEEK (0-6): - Dropdown: "Every day (*)", "Specific day(s)", "Weekdays (1-5)", "Weekends (0,6)" - If "Specific day(s)": buttons: Sun, Mon, Tue, Wed, Thu, Fri, Sat - Selected days highlight in blue - Any change in the visual builder immediately updates the expression display and all other sections HUMAN-READABLE DESCRIPTION: - Card with a green left border showing the schedule in plain English - Examples: - "0 9 * * 1" → "At 09:00 AM, only on Monday" - "*/15 * * * *" → "Every 15 minutes" - "0 0 1 * *" → "At 12:00 AM, on day 1 of the month" - "30 14 * * 1-5" → "At 02:30 PM, Monday through Friday" - "0 8,12,18 * * *" → "At 08:00 AM, 12:00 PM, and 06:00 PM" - Handle complex combinations with proper grammar (commas, "and", ranges) - Show timezone note: "(times shown in your local timezone)" NEXT 5 SCHEDULED RUNS: - List showing the next 5 times the cron will fire, relative to current time - Each entry shows: - Full date and time: "Monday, March 3, 2026 at 9:00 AM" - Relative time: "in 2 days, 3 hours" - Calculate using JavaScript Date, accounting for month lengths and day-of-week constraints - If expression results in fewer than 5 runs within the next year, show however many exist COMMON EXAMPLES SIDEBAR: - Right sidebar on desktop (below on mobile) with clickable presets: - "Every minute" → * * * * * - "Every 5 minutes" → */5 * * * * - "Every hour" → 0 * * * * - "Every day at midnight" → 0 0 * * * - "Every day at 9 AM" → 0 9 * * * - "Every Monday at 9 AM" → 0 9 * * 1 - "Weekdays at 8:30 AM" → 30 8 * * 1-5 - "First of every month" → 0 0 1 * * - "Every 6 hours" → 0 */6 * * * - "Every Sunday at noon" → 0 12 * * 0 - "Twice daily (9 AM, 5 PM)" → 0 9,17 * * * - "Quarterly (Jan, Apr, Jul, Oct)" → 0 0 1 1,4,7,10 * - Clicking a preset loads it into the builder, updating everything KEYBOARD SHORTCUT: - Ctrl+C when expression is focused: copy expression - Enter in manual expression input: apply to builder Make it responsive: on mobile, the sidebar moves below the main content. Multi-select grids compress to smaller buttons. Expression field spans full width.