Turn a photo of your grocery list into a recipe card

Here is a photo of my grocery list. First, write out every item you can read; mark anything unclear with (?). Then suggest one dish that uses most of these and needs little else, and say in one line why it fits. Assume I have oil, salt and pepper, and tell me if the dish needs anything else.

Write the recipe: a short specific title, total time (including any chilling or resting), servings, the ingredients with metric quantities, what I need from the cupboard, and 3 to 6 numbered method steps with times and heat levels. Add an estimated calorie count per serving, rounded to the nearest 10, and label it as an estimate. Flag anything with raw egg or that needs cooking to a safe temperature.

Write one image prompt for this dish in this pattern: "Overhead food photograph of [the dish with the ingredients you would see] in [a bowl or plate that suits it] on [a surface], [light]". For a tall dish like a cake slice, use a side angle instead of overhead. No text, hands or packaging.

Build a recipe card as one self-contained HTML page at 9:16 (573 x 1019 px). The food photo fills the top 600 px. A white card with 28 px rounded corners overlaps it from 520 px down, with: a small orange label "RECIPE · 01", the title in Fraunces bold, a grey line with ⏱ time, 🍽 serves and 🔥 ~kcal, and my list items as rounded chips with a green tick. Put a small "estimate per serving" note under the calories. Below the card, show the full recipe with quantities and method. Let me drag my photo onto the photo area.

Put these dishes together as a menu page at 9:16: a cream paper card on a dark green border, a small subtitle with who and when ("FOR FOUR · 29 OCT"), a big serif title, a short rule, then one row per course with a round photo, the course name, the dish and its first three ingredients. Put them in a sensible eating order.