Build a Calorie Counter with AI

Build a single-page calorie counter as a static HTML/CSS/JS site. Page background #0f0f17 with a centered layout (max-width 640px). Use #12121a for card backgrounds, 1px solid #2a2a3a borders, and 14px border-radius. Design mobile-first. At the top, display "Calorie Counter" heading in white, today's date formatted as "Fri, Feb 28" in #6a6a80, and left/right arrows to navigate between days. Below the header, show a circular calorie progress ring (200px diameter) using SVG. The background ring is #1a1a2a (6px stroke), the progress ring is #22c55e when under goal, #f59e0b when within 10% of goal, and #ef4444 when over goal. Inside the ring, display: Remaining calories (large 32px bold white number), "remaining" label in #6a6a80, and below it "X of Y kcal" showing consumed vs goal in #8888a0. Below the ring, show three macro nutrient cards in a row: Protein (in #ef4444, showing grams consumed / goal), Carbs (in #f59e0b), and Fat (in #3b82f6). Each card has a mini progress bar, current grams, and goal grams. Default macro targets: 150g protein, 200g carbs, 65g fat (adjustable in settings). Below the macros, create meal sections for the day: Breakfast, Lunch, Dinner, and Snacks. Each section has a colored left border (Breakfast #f59e0b, Lunch #22c55e, Dinner #3b82f6, Snacks #a855f7), the meal name, current calorie total for that meal, and an "Add Food" button. When food items are added, they appear in the section as rows showing: food name, serving size, calories, and a delete X button. Each row also shows P/C/F grams in small #6a6a80 text. The "Add Food" button opens a search panel. At the top, a text search input with real-time filtering. Below it, show matching foods from a hardcoded database of 100 common foods. Each food in the search results shows: name, default serving size, calories per serving, and P/C/F grams. Tapping a food adds it to the selected meal. Hardcode the food database as a JavaScript array with at least 100 items across categories. Include realistic calorie and macro data. Categories and example items: Proteins (20 items): Chicken Breast (165 cal/4oz, 31g P), Salmon (208 cal/4oz, 20g P), Ground Beef 85% (215 cal/4oz, 22g P), Eggs (72 cal/1 large, 6g P), Turkey Breast (135 cal/4oz, 30g P), Tuna canned (100 cal/3oz, 22g P), Shrimp (84 cal/3oz, 18g P), Tofu firm (88 cal/4oz, 10g P), Greek Yogurt (100 cal/6oz, 17g P), Cottage Cheese (110 cal/4oz, 13g P), etc. Grains (15 items): White Rice (206 cal/cup, 4g P), Brown Rice (216 cal/cup, 5g P), Oatmeal (150 cal/cup, 5g P), Whole Wheat Bread (69 cal/slice, 4g P), Pasta cooked (200 cal/cup, 7g P), Quinoa (222 cal/cup, 8g P), etc. Fruits (15 items): Banana (105 cal, 27g C), Apple (95 cal, 25g C), Orange (62 cal, 15g C), Blueberries (85 cal/cup, 21g C), Strawberries (49 cal/cup, 12g C), Avocado half (161 cal, 15g F), etc. Vegetables (15 items): Broccoli (55 cal/cup, 11g C), Spinach (7 cal/cup, 1g C), Sweet Potato (103 cal/medium, 24g C), Carrots (52 cal/cup, 12g C), etc. Dairy (10 items): Whole Milk (149 cal/cup, 8g P), Cheddar Cheese (113 cal/oz, 7g P), Butter (102 cal/tbsp, 12g F), etc. Snacks & Common (15 items): Peanut Butter (188 cal/2tbsp, 7g P), Almonds (164 cal/oz, 6g P), Dark Chocolate (170 cal/oz, 2g P), Protein Bar (200 cal, 20g P), etc. Beverages (10 items): Coffee black (2 cal), Orange Juice (112 cal/cup, 26g C), Whole Milk Latte (190 cal, 10g P), Coca-Cola (140 cal/12oz, 39g C), Beer (153 cal/12oz, 13g C), etc. Also include an "Add Custom Food" button in the search panel that opens a form for: food name, calories, serving size, protein, carbs, and fat. Custom foods get saved to localStorage and appear in future searches. Below the meal sections, show a "Daily Summary" with a horizontal stacked bar chart showing calorie breakdown by meal (breakfast/lunch/dinner/snacks) using each meal's accent color. Settings (gear icon in header): Daily Calorie Goal (number input, default 2000), Protein Goal (grams), Carbs Goal (grams), Fat Goal (grams). Save to localStorage. All data persists in localStorage keyed by date. Include a "Clear Day" button and an "Export CSV" button that downloads the current day's food log as a spreadsheet. Auto-detect new day and start fresh. 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].