Build a Regex Tester & Debugger with AI

Build a single-page Regex Tester & Debugger as a static HTML file with embedded CSS and JavaScript. No frameworks or external dependencies. LAYOUT: - Dark theme (background #0d1117, text #c9d1d9) - Three main sections stacked vertically: 1. Pattern input bar at top 2. Test string textarea in the middle (large, 300px min height) 3. Results panel at bottom split into two tabs: "Match List" and "Explanation" - Right sidebar (collapsible on mobile) with Quick Reference PATTERN INPUT BAR: - Text input styled like a code editor line with "/" prefix and "/" suffix displayed as decorative text - Flag toggle buttons next to the input: g (global), i (case-insensitive), m (multiline), s (dotAll), u (unicode) - Each flag button is a small pill that toggles on/off with active state highlighted in blue - Show the full regex with flags as a copyable string below: e.g., /pattern/gi - Red border and error message below if regex is invalid (e.g., "Unterminated group" or "Invalid escape sequence") TEST STRING TEXTAREA: - Large monospace textarea where the user types or pastes test strings - Behind the textarea, render an overlay div with the same text but with match highlights - Use a transparent textarea trick: textarea has transparent text color, overlay div behind it shows colored highlights - Match highlight colors by capture group: - Full match: background #264f7840 - Group 1: background #2ea04340 - Group 2: background #a371f740 - Group 3: background #f2cc6040 - Group 4: background #ff7b7240 - Non-capturing groups are not highlighted separately MATCH LIST TAB: - Show each match in a numbered list - For each match display: - Match number and full matched text in monospace - Index position (start-end) in the test string - Each named or numbered capture group on its own indented line with its value - Groups that didn't participate show as "undefined" in gray italic - Total match count at the top: "4 matches found" - If no matches: "No matches" in muted text EXPLANATION TAB: - Parse the regex and generate a human-readable breakdown - Display as a bulleted list, e.g.: - "^ — Start of string" - "(\d{3}) — Capture group 1: exactly 3 digits" - "[-.]? — Optional dash or dot" - "$ — End of string" - Handle common tokens: \d, \w, \s, \b, ., *, +, ?, {n,m}, [], (), |, ^, $, lookaheads, lookbehinds - For tokens the parser doesn't recognize, show the raw characters with "Literal: ..." REPLACE MODE: - Toggle button to switch between "Match" and "Replace" mode - In replace mode, show a replacement input field below the pattern bar - Support backreferences ($1, $2, $&, $`) in the replacement - Show the replaced output in a read-only textarea below the test string - Highlight what changed: additions in green background, removals in red strikethrough QUICK REFERENCE SIDEBAR: - Collapsible panel on the right (or below on mobile) - Organized sections: Character Classes, Quantifiers, Anchors, Groups, Lookaround - Each entry: pattern on left, description on right - Clicking a pattern inserts it at cursor position in the pattern input KEYBOARD SHORTCUTS: - Ctrl+Enter: Execute/refresh matches - Ctrl+R: Toggle replace mode - Escape: Clear pattern STATUS BAR at bottom: - Execution time in milliseconds - Match count - Current flags as text Make it responsive: sidebar collapses below the main content on screens under 900px. Pattern bar stacks vertically on screens under 600px.