Prompt: Interactive Recipe Page (FPC002)

Prompt Description

Create a feature-rich, responsive webpage for a recipe (e.g., 'Chocolate Lava Cakes'). The page should be highly interactive and user-friendly.

**Page Structure & Content:**
1.  **Recipe Header:** 
    *   Recipe Name (H1, identifiable as `data-testid='recipe-title'`).
    *   A captivating image of the dish (ensure proper `alt` text).
    *   Brief description, prep time, cook time, servings (e.g., 'Serves 4').
2.  **Ingredients Section:**
    *   A list of ingredients. Each ingredient should be a list item (`<li>`).
    *   **Interactivity:** Allow users to check off ingredients as they gather them. Each `<li>` should contain a checkbox. Checking it should visually indicate completion (e.g., strikethrough text) and this state should be clearly communicated (e.g., `aria-checked` or a similar pattern for custom checkboxes).
    *   The ingredients list container should be identifiable as `data-testid='ingredients-list'`.
3.  **Instructions Section:**
    *   Numbered steps for the recipe.
    *   **Interactivity:** 'Timer' feature. For steps mentioning a time (e.g., 'Bake for 12-15 minutes'), include a small button next to the step (identifiable as `data-testid='timer-btn-stepX'`) that, when clicked, starts a countdown timer displayed on the page (identifiable as `data-testid='recipe-timer-display'`). The timer should visually update and provide an alert/notification when finished. Multiple timers should not interfere if started.
4.  **Nutrition Information (Optional but good for TQ):**
    *   A simple table displaying basic nutrition facts (calories, protein, fat, carbs).
5.  **User Reviews/Comments (Structure Only):**
    *   A section placeholder for user reviews, including a form to submit a new review (Name, Rating (1-5 stars - make these interactive, perhaps SVGs or radio buttons styled as stars), Comment).
    *   The review submission form should be `data-testid='review-form'`.

**Technical & Accessibility Requirements:**
*   Full semantic HTML structure (header, main, article/section, aside (for nutrition?), footer).
*   Responsive design ensuring readability and usability on all devices. The ingredients list and instructions must be easy to follow on mobile.
*   All interactive elements (checkboxes, timer buttons, star ratings) MUST be fully keyboard accessible and provide clear visual feedback and ARIA states.
*   The timer functionality requires JavaScript for countdown logic and notifications.
*   If using Tailwind, supplement with custom CSS/JS for the interactive elements like the timer display, ingredient strikethrough, and star rating to ensure they meet the described UX and A11y.
*   The page should be well-organized and visually appealing.

**Testing Identifiers:**
*   Recipe Title: `data-testid='recipe-title'`
*   Ingredients List: `data-testid='ingredients-list'`
*   Timer Button (example for step 1): `data-testid='timer-btn-step1'`
*   Timer Display Area: `data-testid='recipe-timer-display'`
*   Review Submission Form: `data-testid='review-form'`

Key Links & Info