# Role You are a Senior Frontend Engineer specializing in UX, form components, and input validation patterns. # Objective Create a custom, lightweight date picker component that renders a calendar dropdown, supports month navigation, and populates a text input on date selection — all without external dependencies. # Instructions 1. Build a text input field that triggers the calendar dropdown: - Display selected date in the input (format: YYYY-MM-DD) - Show a calendar icon inside the input as a visual affordance - Open dropdown on input focus or icon click - Close dropdown on outside click or Escape key 2. Render the calendar grid as a month view: - 7-column grid layout (Sun–Sat) using CSS Grid - Display day-of-week headers (S, M, T, W, T, F, S) - Fill in dates for the current month; gray out overflow days from adjacent months 3. Add month navigation: - Previous (←) and Next (→) arrow buttons flanking the month/year title - Smooth transition between months without page reload 4. Implement date highlighting: - Today's date: accent-colored border or underline - Selected date: filled circle with contrasting text - Hover state: subtle background highlight 5. On date click: - Populate the text input with the selected date - Close the dropdown - Dispatch a `change` event on the input # Constraints - Vanilla HTML, CSS, and JavaScript only — no libraries or frameworks - Use CSS Grid with `grid-template-columns: repeat(7, 1fr)` for the calendar layout - Must be keyboard-accessible: arrow keys to navigate days, Enter to select - Dark mode compatible with subtle borders and muted colors - Do not use the native `<input type="date">` — this is a custom replacement # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Calendar component wrapped in a reusable container - Include sample usage demonstrating the component in context

# Role You are a Senior Email Developer and HTML Specialist with expertise in conversion-optimized signup forms and accessible interactive components. # Objective Design an inline newsletter signup form with real-time email validation, a polished success state, and a visually refined focus effect — optimized for embedding in landing pages and footers. # Instructions 1. Build a single-line form layout: - Email text input and submit button side by side on one row - Input takes majority width; button on the right - Rounded container with subtle border 2. Implement the email input: - Placeholder text: "Enter your email" - `type="email"` for native validation baseline - Gradient border effect on focus (animated or static) - Proper `<label>` element (visually hidden if needed, but present for screen readers) 3. Add client-side validation: - Validate email format on blur and on submit - Show error message below the input (red text, subtle fade-in) - Disable submit button while input is empty or invalid 4. Implement the success state: - On successful submission, replace the form with: - Animated checkmark icon (CSS or SVG) - Success message: "You're subscribed!" - Smooth transition between form and success state (300ms ease-out) 5. Style with dark mode aesthetics: - Dark input background, light placeholder text - Accent-colored submit button with hover brightness - Gradient border visible on focus state # Constraints - Semantic HTML with proper `<form>`, `<label>`, `<input>`, and ARIA attributes - Full keyboard navigation: Tab to input, Enter to submit - `aria-live="polite"` on the error/success message container for screen readers - No external dependencies — vanilla HTML, CSS, and JavaScript - Form should not actually submit — simulate with JavaScript state change - Max-width: 500px, centered # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include both error and success states in the implementation - Well-commented code with transitions clearly documented

# Role You are a Senior Architect and Full-Stack Expert specializing in secure payment interfaces and conversion-optimized checkout flows. # Objective Build a minimalist, Stripe-inspired checkout form that collects payment details securely with a polished dark-mode UI, real-time validation, and clear visual feedback. # Instructions 1. Create a checkout form with the following fields: - Email address (with email validation) - Cardholder name (text input) - Card number (formatted as groups of 4 digits with auto-spacing) - Expiration date (MM/YY format with dual input or masked single input) - CVC (3-digit input, masked) - ZIP / Postal code 2. Add an order summary section above or beside the form: - Line items with name and price - Subtotal, tax, and total amount displayed clearly 3. Include a prominent "Pay $XX.XX" submit button: - Disabled state until all fields are valid - Loading spinner state on submission 4. Style the entire form in dark mode using Tailwind CSS: - Subtle borders, rounded inputs, focus ring indicators - Card brand icon detection area (Visa, Mastercard placeholder) 5. Implement client-side validation: - Real-time error messages below each field - Success checkmarks on valid fields # Constraints - Use semantic HTML with proper ARIA labels and roles - Tailwind CSS only for styling — no custom CSS unless absolutely necessary - Do not include actual payment processing logic — this is a UI-only component - Ensure full keyboard navigation support - Mobile-responsive: single-column layout on small screens # Output Format - Single HTML file using Tailwind CSS CDN - Well-structured, accessible markup with inline comments - Form should be visually centered on the page with max-width of 480px