Build a Weekly Meal Planner with AI

Build a single-page weekly meal planner as a static HTML/CSS/JS site. Page background #0f0f17 with a full-width layout (max-width 1100px, centered). Use #12121a for card backgrounds, 1px solid #2a2a3a borders, and 12px border-radius. At the top, display "Weekly Meal Planner" heading in white, the current week range (e.g., "Feb 24 - Mar 2, 2026") in #8888a0, and left/right arrows to navigate between weeks. Below the header, create the main 7-day meal grid. The grid has 4 rows (Breakfast, Lunch, Dinner, Snack) and 7 columns (Mon-Sun), plus a row header column. Style the day headers (Mon, Tue, etc.) in #8888a0, bold, centered. Style the meal type labels (Breakfast, Lunch, etc.) vertically in the first column with these accent colors: Breakfast #f59e0b, Lunch #22c55e, Dinner #3b82f6, Snack #a855f7. Each grid cell is a drop zone (min-height 80px, #16161e background, 1px dashed #2a2a3a border). When a meal is placed, the cell shows: meal name (white, 0.85rem, bold), estimated calories in a small badge (#6a6a80 text), and a small X to remove. Cells support drag-and-drop — users can drag meals between cells to rearrange. Below the grid, add a "Meal Library" panel with a search input and a scrollable list of preset meals. Include 40 common meals organized by meal type, each with: name, estimated calories, protein/carbs/fat in grams, and a list of key ingredients. Examples: "Oatmeal with Berries" (350 cal), "Grilled Chicken Salad" (420 cal), "Salmon with Rice" (550 cal), "Greek Yogurt Parfait" (280 cal), etc. Each meal in the library is draggable. Also include an "Add Custom Meal" button that opens a form for name, calories, and macros. To the right of the grid (or below on mobile), show a "Daily Summary" sidebar that updates based on the selected/hovered day. Display: Total Calories (large, #fff), Protein (in #ef4444), Carbs (in #f59e0b), Fat (in #3b82f6), as both grams and percentage of total calories. Show a horizontal stacked bar for the macro split. Below the macros, show a daily calorie goal input (default 2000) with a progress ring showing percentage of goal met. Below the daily summary, add a "Shopping List" section with a button "Generate Shopping List." When clicked, it aggregates all ingredients from all planned meals for the week, groups them by category (Produce, Protein, Dairy, Grains, Pantry), and displays a checklist. Each item shows quantity and has a checkbox. Users can manually add items too. The list is printable with a clean print stylesheet. All data persists in localStorage keyed by week. Include a "Clear Week" button (with confirmation) and a "Copy Last Week" button that duplicates the previous week's plan into the current week. On mobile, the grid should scroll horizontally with the meal type column sticky on the left. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].

Update the meal library in the weekly meal planner with fresh recipes. Find the JavaScript array containing the preset meals (each with name, calories, protein, carbs, fat, mealType, and ingredients). Replace 15-20 meals with new seasonal recipes while keeping at least 20 staple meals unchanged. Each new meal should include realistic calorie and macro estimates and a list of key ingredients for the shopping list feature. Ensure a good mix across breakfast, lunch, dinner, and snack categories. Update the "Last refreshed" date if one exists. Do not change any other code, styling, or functionality. After updating, redeploy the site following the guide at https://accessagent.ai/api/guide. My email is [your@email.com].