{"id":18789,"date":"2025-03-30T14:11:09","date_gmt":"2025-03-30T14:11:09","guid":{"rendered":"https:\/\/theprivateclinic.me\/?page_id=18789"},"modified":"2025-03-30T15:54:22","modified_gmt":"2025-03-30T15:54:22","slug":"everything-recipe","status":"publish","type":"page","link":"https:\/\/theprivateclinic.me\/en\/resources\/everything-recipe\/","title":{"rendered":"Everything Recipe"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Recipe Analyzer & Meal Planner<\/title>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n <style>\r\n .sp_container * {\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n .sp_container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n color: #333;\r\n }\r\n \r\n .sp_header {\r\n text-align: center;\r\n margin-bottom: 30px;\r\n }\r\n \r\n .sp_title {\r\n font-size: 2.5rem;\r\n color: #2c3e50;\r\n margin-bottom: 10px;\r\n }\r\n \r\n .sp_subtitle {\r\n font-size: 1.2rem;\r\n color: #7f8c8d;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n \r\n .sp_tabs {\r\n display: flex;\r\n border-bottom: 2px solid #e0e0e0;\r\n margin-bottom: 30px;\r\n }\r\n \r\n .sp_tab {\r\n padding: 12px 24px;\r\n background: none;\r\n border: none;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n color: #7f8c8d;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n position: relative;\r\n }\r\n \r\n .sp_tab:focus {\r\n outline: none;\r\n }\r\n \r\n .sp_tab.sp_active {\r\n color: #3498db;\r\n }\r\n \r\n .sp_tab.sp_active::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -2px;\r\n left: 0;\r\n width: 100%;\r\n height: 3px;\r\n background-color: #3498db;\r\n }\r\n \r\n .sp_content {\r\n display: none;\r\n }\r\n \r\n .sp_content.sp_active {\r\n display: block;\r\n animation: fadeIn 0.5s;\r\n }\r\n \r\n .sp_card {\r\n background: white;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n padding: 24px;\r\n margin-bottom: 30px;\r\n }\r\n \r\n .sp_input_group {\r\n margin-bottom: 20px;\r\n }\r\n \r\n .sp_label {\r\n display: block;\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n color: #2c3e50;\r\n }\r\n \r\n .sp_input {\r\n width: 100%;\r\n padding: 12px 16px;\r\n border: 2px solid #e0e0e0;\r\n border-radius: 8px;\r\n font-size: 1rem;\r\n transition: border 0.3s;\r\n }\r\n \r\n .sp_input:focus {\r\n border-color: #3498db;\r\n outline: none;\r\n }\r\n \r\n .sp_textarea {\r\n min-height: 120px;\r\n resize: vertical;\r\n }\r\n \r\n .sp_button {\r\n background-color: #3498db;\r\n color: white;\r\n border: none;\r\n border-radius: 8px;\r\n padding: 12px 24px;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n }\r\n \r\n .sp_button:hover {\r\n background-color: #2980b9;\r\n }\r\n \r\n .sp_button.sp_secondary {\r\n background-color: #e0e0e0;\r\n color: #333;\r\n }\r\n \r\n .sp_button.sp_secondary:hover {\r\n background-color: #d0d0d0;\r\n }\r\n \r\n .sp_flex {\r\n display: flex;\r\n gap: 15px;\r\n }\r\n \r\n .sp_grid {\r\n display: grid !important;\r\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n gap: 20px;\r\n margin-top: 20px;\r\n }\r\n \r\n .sp_recipe_card {\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n transition: transform 0.3s, box-shadow 0.3s;\r\n cursor: pointer;\r\n background: white;\r\n }\r\n \r\n .sp_recipe_card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\r\n }\r\n \r\n .sp_recipe_image {\r\n width: 100%;\r\n height: 180px;\r\n object-fit: cover;\r\n }\r\n \r\n .sp_recipe_content {\r\n padding: 16px;\r\n }\r\n \r\n .sp_recipe_title {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n color: #2c3e50;\r\n }\r\n \r\n .sp_recipe_meta {\r\n display: flex;\r\n gap: 12px;\r\n font-size: 0.9rem;\r\n color: #7f8c8d;\r\n margin-bottom: 8px;\r\n }\r\n \r\n .sp_recipe_meta_item {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n }\r\n \r\n .sp_loader {\r\n display: none;\r\n margin: 30px auto;\r\n width: 50px;\r\n height: 50px;\r\n border: 5px solid #f3f3f3;\r\n border-top: 5px solid #3498db;\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n }\r\n \r\n .sp_error {\r\n display: none;\r\n background-color: #ffebee;\r\n color: #c62828;\r\n padding: 16px;\r\n border-radius: 8px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .sp_chart_container {\r\n position: relative;\r\n width: 100%;\r\n height: 300px;\r\n margin: 20px 0;\r\n }\r\n \r\n .sp_nutrition_chart {\r\n width: 100% !important;\r\n height: 100% !important;\r\n }\r\n \r\n .sp_meal_day {\r\n margin-bottom: 30px;\r\n }\r\n \r\n .sp_meal_header {\r\n background-color: #f8f9fa;\r\n padding: 12px;\r\n border-radius: 8px;\r\n margin-bottom: 15px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n \r\n .sp_meal_title {\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n color: #2c3e50;\r\n }\r\n \r\n .sp_meal_card {\r\n display: flex;\r\n background: white;\r\n border-radius: 8px;\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\r\n margin-bottom: 10px;\r\n overflow: hidden;\r\n }\r\n \r\n .sp_meal_image {\r\n width: 100px;\r\n height: 100px;\r\n object-fit: cover;\r\n }\r\n \r\n .sp_meal_content {\r\n flex: 1;\r\n padding: 12px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n }\r\n \r\n .sp_meal_name {\r\n font-weight: 600;\r\n margin-bottom: 4px;\r\n }\r\n \r\n .sp_meal_calories {\r\n font-size: 0.9rem;\r\n color: #7f8c8d;\r\n }\r\n \r\n .sp_meal_actions {\r\n display: flex;\r\n gap: 10px;\r\n }\r\n \r\n .sp_summary {\r\n margin-top: 30px;\r\n background-color: #f8f9fa;\r\n padding: 20px;\r\n border-radius: 12px;\r\n }\r\n \r\n .sp_summary_title {\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n margin-bottom: 15px;\r\n color: #2c3e50;\r\n }\r\n \r\n .sp_summary_grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\r\n gap: 15px;\r\n }\r\n \r\n .sp_summary_item {\r\n background: white;\r\n padding: 15px;\r\n border-radius: 8px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\r\n text-align: center;\r\n }\r\n \r\n .sp_summary_value {\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n color: #3498db;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .sp_summary_label {\r\n font-size: 0.9rem;\r\n color: #7f8c8d;\r\n }\r\n \r\n .sp_badge {\r\n display: inline-block;\r\n padding: 4px 8px;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n border-radius: 4px;\r\n margin-right: 5px;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .sp_badge.sp_vegan {\r\n background-color: #a5d6a7;\r\n color: #1b5e20;\r\n }\r\n \r\n .sp_badge.sp_vegetarian {\r\n background-color: #c5e1a5;\r\n color: #33691e;\r\n }\r\n \r\n .sp_badge.sp_gluten_free {\r\n background-color: #ffe082;\r\n color: #ff6f00;\r\n }\r\n \r\n .sp_badge.sp_dairy_free {\r\n background-color: #bbdefb;\r\n color: #0d47a1;\r\n }\r\n \r\n .sp_modal_overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: -100px;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n z-index: 9999;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n \r\n .sp_modal {\r\n background: white;\r\n width: 90%;\r\n max-width: 700px;\r\n border-radius: 12px;\r\n box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);\r\n max-height: 75vh;\r\n overflow-y: auto;\r\n }\r\n \r\n .sp_modal_header {\r\n padding: 20px;\r\n border-bottom: 1px solid #e0e0e0;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n \r\n .sp_modal_title {\r\n font-size: 1.5rem;\r\n font-weight: 600;\r\n color: #2c3e50;\r\n }\r\n \r\n .sp_modal_close {\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n color: #7f8c8d;\r\n }\r\n \r\n .sp_modal_body {\r\n padding: 20px;\r\n }\r\n \r\n .sp_modal_footer {\r\n padding: 20px;\r\n border-top: 1px solid #e0e0e0;\r\n display: flex;\r\n justify-content: flex-end;\r\n gap: 10px;\r\n }\r\n \r\n .sp_tabs_content {\r\n margin-top: 20px;\r\n }\r\n \r\n .sp_info_grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 15px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .sp_info_item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .sp_info_icon {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background-color: #ebf5fb;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #3498db;\r\n }\r\n \r\n .sp_info_text {\r\n flex: 1;\r\n }\r\n \r\n .sp_info_label {\r\n font-size: 0.9rem;\r\n color: #7f8c8d;\r\n }\r\n \r\n .sp_info_value {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n color: #2c3e50;\r\n }\r\n \r\n .sp_section_title {\r\n font-size: 1.3rem;\r\n font-weight: 600;\r\n margin: 30px 0 15px;\r\n color: #2c3e50;\r\n }\r\n \r\n .sp_ingredient_list {\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n }\r\n \r\n .sp_ingredient_item {\r\n display: flex;\r\n align-items: center;\r\n padding: 8px 0;\r\n border-bottom: 1px solid #f0f0f0;\r\n }\r\n \r\n .sp_ingredient_amount {\r\n width: 100px;\r\n color: #7f8c8d;\r\n }\r\n \r\n .sp_instructions {\r\n counter-reset: step-counter;\r\n list-style: none;\r\n padding: 0;\r\n }\r\n \r\n .sp_instruction_step {\r\n position: relative;\r\n padding: 15px 15px 15px 50px;\r\n margin-bottom: 15px;\r\n background-color: #f8f9fa;\r\n border-radius: 8px;\r\n }\r\n \r\n .sp_instruction_step::before {\r\n content: counter(step-counter);\r\n counter-increment: step-counter;\r\n position: absolute;\r\n left: 15px;\r\n top: 15px;\r\n width: 25px;\r\n height: 25px;\r\n background-color: #3498db;\r\n color: white;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: 600;\r\n }\r\n \r\n .sp_progress_container {\r\n height: 8px;\r\n width: 100%;\r\n background-color: #f0f0f0;\r\n border-radius: 4px;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .sp_progress_bar {\r\n height: 100%;\r\n border-radius: 4px;\r\n background-color: #3498db;\r\n width: 0;\r\n transition: width 0.3s;\r\n }\r\n \r\n .sp_progress_text {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: 0.8rem;\r\n color: #7f8c8d;\r\n }\r\n \r\n @keyframes fadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n \r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .sp_tabs {\r\n flex-wrap: wrap;\r\n }\r\n \r\n .sp_tab {\r\n flex: 1;\r\n min-width: 120px;\r\n padding: 10px;\r\n text-align: center;\r\n }\r\n \r\n .sp_info_grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .sp_meal_card {\r\n flex-direction: column;\r\n }\r\n \r\n .sp_meal_image {\r\n width: 100%;\r\n height: 150px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"sp_container\">\r\n <div class=\"sp_header\">\r\n <h1 class=\"sp_title\">Culinary Assistant<\/h1>\r\n <p class=\"sp_subtitle\">Analyze recipes, plan meals, and discover nutrition insights with powerful AI-driven tools<\/p>\r\n <\/div>\r\n \r\n <div class=\"sp_tabs\">\r\n <button class=\"sp_tab sp_active\" data-tab=\"recipe-analyzer\">Recipe Analyzer<\/button>\r\n <button class=\"sp_tab\" data-tab=\"meal-planner\">Meal Planner<\/button>\r\n <button class=\"sp_tab\" data-tab=\"recipe-search\">Recipe Search<\/button>\r\n <\/div>\r\n \r\n <!-- Recipe Analyzer Tab -->\r\n <div class=\"sp_content sp_active\" id=\"recipe-analyzer\">\r\n <div class=\"sp_card\">\r\n <div class=\"sp_input_group\">\r\n <label class=\"sp_label\" for=\"recipe-title\">Recipe Title (optional)<\/label>\r\n <input type=\"text\" id=\"recipe-title\" class=\"sp_input\" placeholder=\"Enter recipe title\">\r\n <\/div>\r\n \r\n <div class=\"sp_input_group\">\r\n <label class=\"sp_label\" for=\"recipe-ingredients\">Ingredients<\/label>\r\n <textarea id=\"recipe-ingredients\" class=\"sp_input sp_textarea\" placeholder=\"Enter ingredients, one per line (e.g. 1 cup flour, 2 tablespoons olive oil)\"><\/textarea>\r\n <\/div>\r\n \r\n <div class=\"sp_input_group\">\r\n <label class=\"sp_label\" for=\"recipe-servings\">Servings<\/label>\r\n <input type=\"number\" id=\"recipe-servings\" class=\"sp_input\" min=\"1\" value=\"2\">\r\n <\/div>\r\n \r\n <div class=\"sp_flex\">\r\n <button id=\"analyze-recipe-btn\" class=\"sp_button\">Analyze Recipe<\/button>\r\n <button id=\"clear-recipe-btn\" class=\"sp_button sp_secondary\">Clear<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"recipe-error\" class=\"sp_error\"><\/div>\r\n <div id=\"recipe-loader\" class=\"sp_loader\"><\/div>\r\n \r\n <div id=\"recipe-results\" style=\"display: none;\">\r\n <div class=\"sp_card\">\r\n <h2 class=\"sp_section_title\">Nutrition Summary<\/h2>\r\n \r\n <div class=\"sp_info_grid\">\r\n <div class=\"sp_info_item\">\r\n <div class=\"sp_info_icon\">\ud83d\udd25<\/div>\r\n <div class=\"sp_info_text\">\r\n <div class=\"sp_info_label\">Calories<\/div>\r\n <div id=\"recipe-calories\" class=\"sp_info_value\">0 kcal<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"sp_info_item\">\r\n <div class=\"sp_info_icon\">\ud83e\udd69<\/div>\r\n <div class=\"sp_info_text\">\r\n <div class=\"sp_info_label\">Protein<\/div>\r\n <div id=\"recipe-protein\" class=\"sp_info_value\">0g<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"sp_info_item\">\r\n <div class=\"sp_info_icon\">\ud83c\udf5e<\/div>\r\n <div class=\"sp_info_text\">\r\n <div class=\"sp_info_label\">Carbs<\/div>\r\n <div id=\"recipe-carbs\" class=\"sp_info_value\">0g<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"sp_info_item\">\r\n <div class=\"sp_info_icon\">\ud83e\udd51<\/div>\r\n <div class=\"sp_info_text\">\r\n <div class=\"sp_info_label\">Fat<\/div>\r\n <div id=\"recipe-fat\" class=\"sp_info_value\">0g<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"sp_chart_container\">\r\n <canvas id=\"recipe-nutrition-chart\" class=\"sp_nutrition_chart\"><\/canvas>\r\n <\/div>\r\n \r\n <h3 class=\"sp_section_title\">Daily Value Percentages<\/h3>\r\n <div id=\"recipe-nutrients\" class=\"sp_grid\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Meal Planner Tab -->\r\n <div class=\"sp_content\" id=\"meal-planner\">\r\n <div class=\"sp_card\">\r\n <div class=\"sp_input_group\">\r\n <label class=\"sp_label\">Diet Preferences<\/label>\r\n <div class=\"sp_flex\" style=\"flex-wrap: wrap;\">\r\n <div style=\"display: flex; align-items: center; margin-right: 15px;\">\r\n <input type=\"checkbox\" id=\"diet-vegetarian\" value=\"vegetarian\">\r\n <label for=\"diet-vegetarian\" style=\"margin-left: 5px;\">Vegetarian<\/label>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; margin-right: 15px;\">\r\n <input type=\"checkbox\" id=\"diet-vegan\" value=\"vegan\">\r\n <label for=\"diet-vegan\" style=\"margin-left: 5px;\">Vegan<\/label>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; margin-right: 15px;\">\r\n <input type=\"checkbox\" id=\"diet-glutenFree\" value=\"glutenFree\">\r\n <label for=\"diet-glutenFree\" style=\"margin-left: 5px;\">Gluten Free<\/label>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"diet-dairyFree\" value=\"dairyFree\">\r\n <label for=\"diet-dairyFree\" style=\"margin-left: 5px;\">Dairy Free<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"sp_input_group\">\r\n <label class=\"sp_label\" for=\"meal-calories\">Target Daily Calories<\/label>\r\n <input type=\"number\" id=\"meal-calories\" class=\"sp_input\" min=\"1200\" max=\"4000\" value=\"2000\">\r\n <\/div>\r\n \r\n <div class=\"sp_input_group\">\r\n <label class=\"sp_label\" for=\"meal-days\">Number of Days<\/label>\r\n <input type=\"number\" id=\"meal-days\" class=\"sp_input\" min=\"1\" max=\"7\" value=\"1\">\r\n <\/div>\r\n \r\n <button id=\"generate-meal-plan-btn\" class=\"sp_button\">Generate Meal Plan<\/button>\r\n <\/div>\r\n \r\n <div id=\"meal-error\" class=\"sp_error\"><\/div>\r\n <div id=\"meal-loader\" class=\"sp_loader\"><\/div>\r\n \r\n <div id=\"meal-plan-results\" style=\"display: none;\"><\/div>\r\n <\/div>\r\n \r\n <!-- Recipe Search Tab -->\r\n <div class=\"sp_content\" id=\"recipe-search\">\r\n <div class=\"sp_card\">\r\n <div class=\"sp_input_group\">\r\n <label class=\"sp_label\" for=\"search-query\">Search Recipes<\/label>\r\n <input type=\"text\" id=\"search-query\" class=\"sp_input\" placeholder=\"Enter ingredients or recipe name\">\r\n <\/div>\r\n \r\n <div class=\"sp_input_group\">\r\n <label class=\"sp_label\">Dietary Restrictions<\/label>\r\n <div class=\"sp_flex\" style=\"flex-wrap: wrap;\">\r\n <div style=\"display: flex; align-items: center; margin-right: 15px;\">\r\n <input type=\"checkbox\" id=\"search-vegetarian\" value=\"vegetarian\">\r\n <label for=\"search-vegetarian\" style=\"margin-left: 5px;\">Vegetarian<\/label>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; margin-right: 15px;\">\r\n <input type=\"checkbox\" id=\"search-vegan\" value=\"vegan\">\r\n <label for=\"search-vegan\" style=\"margin-left: 5px;\">Vegan<\/label>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; margin-right: 15px;\">\r\n <input type=\"checkbox\" id=\"search-glutenFree\" value=\"glutenFree\">\r\n <label for=\"search-glutenFree\" style=\"margin-left: 5px;\">Gluten Free<\/label>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center;\">\r\n <input type=\"checkbox\" id=\"search-dairyFree\" value=\"dairyFree\">\r\n <label for=\"search-dairyFree\" style=\"margin-left: 5px;\">Dairy Free<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"sp_input_group\">\r\n <label class=\"sp_label\" for=\"search-cuisine\">Cuisine (Optional)<\/label>\r\n <select id=\"search-cuisine\" class=\"sp_input\">\r\n <option value=\"\">Any Cuisine<\/option>\r\n <option value=\"italian\">Italian<\/option>\r\n <option value=\"mexican\">Mexican<\/option>\r\n <option value=\"asian\">Asian<\/option>\r\n <option value=\"french\">French<\/option>\r\n <option value=\"mediterranean\">Mediterranean<\/option>\r\n <option value=\"indian\">Indian<\/option>\r\n <option value=\"american\">American<\/option>\r\n <\/select>\r\n <\/div>\r\n \r\n <button id=\"search-recipes-btn\" class=\"sp_button\">Search Recipes<\/button>\r\n <\/div>\r\n \r\n <div id=\"search-error\" class=\"sp_error\"><\/div>\r\n <div id=\"search-loader\" class=\"sp_loader\"><\/div>\r\n \r\n <div id=\"search-results\" class=\"sp_grid\" style=\"display: none;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Recipe Modal -->\r\n <div class=\"sp_modal_overlay\" id=\"recipe-modal-overlay\">\r\n <div class=\"sp_modal\">\r\n <div class=\"sp_modal_header\">\r\n <h2 class=\"sp_modal_title\" id=\"recipe-modal-title\">Recipe Details<\/h2>\r\n <button class=\"sp_modal_close\" id=\"recipe-modal-close\">×<\/button>\r\n <\/div>\r\n <div class=\"sp_modal_body\" id=\"recipe-modal-body\">\r\n <!-- Content will be dynamically added -->\r\n <\/div>\r\n <div class=\"sp_modal_footer\">\r\n <button class=\"sp_button sp_secondary\" id=\"recipe-modal-close-btn\">Close<\/button>\r\n <button class=\"sp_button\" id=\"recipe-modal-add-btn\">Add to Meal Plan<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <script>\r\n \/\/ API key (replace with your own)\r\n const API_KEY = \"15643eb57cf6410199c5b26ec6c9dddc\";\r\n const BASE_URL = \"https:\/\/api.spoonacular.com\";\r\n \r\n \/\/ DOM Elements\r\n const tabButtons = document.querySelectorAll('.sp_tab');\r\n const contentSections = document.querySelectorAll('.sp_content');\r\n \r\n \/\/ Recipe Analyzer Elements\r\n const recipeIngredientsInput = document.getElementById('recipe-ingredients');\r\n const recipeTitleInput = document.getElementById('recipe-title');\r\n const recipeServingsInput = document.getElementById('recipe-servings');\r\n const analyzeRecipeBtn = document.getElementById('analyze-recipe-btn');\r\n const clearRecipeBtn = document.getElementById('clear-recipe-btn');\r\n const recipeLoader = document.getElementById('recipe-loader');\r\n const recipeError = document.getElementById('recipe-error');\r\n const recipeResults = document.getElementById('recipe-results');\r\n \r\n \/\/ Meal Planner Elements\r\n const generateMealPlanBtn = document.getElementById('generate-meal-plan-btn');\r\n const mealCaloriesInput = document.getElementById('meal-calories');\r\n const mealDaysInput = document.getElementById('meal-days');\r\n const mealLoader = document.getElementById('meal-loader');\r\n const mealError = document.getElementById('meal-error');\r\n const mealPlanResults = document.getElementById('meal-plan-results');\r\n \r\n \/\/ Recipe Search Elements\r\n const searchQueryInput = document.getElementById('search-query');\r\n const searchRecipesBtn = document.getElementById('search-recipes-btn');\r\n const searchLoader = document.getElementById('search-loader');\r\n const searchError = document.getElementById('search-error');\r\n const searchResults = document.getElementById('search-results');\r\n \r\n \/\/ Modal Elements\r\n const recipeModalOverlay = document.getElementById('recipe-modal-overlay');\r\n const recipeModalTitle = document.getElementById('recipe-modal-title');\r\n const recipeModalBody = document.getElementById('recipe-modal-body');\r\n const recipeModalClose = document.getElementById('recipe-modal-close');\r\n const recipeModalCloseBtn = document.getElementById('recipe-modal-close-btn');\r\n const recipeModalAddBtn = document.getElementById('recipe-modal-add-btn');\r\n \r\n \/\/ Current recipe data\r\n let currentRecipeData = null;\r\n let currentRecipeNutrition = null;\r\n let currentMealPlan = null;\r\n \r\n \/\/ Tab switching\r\n tabButtons.forEach(button => {\r\n button.addEventListener('click', () => {\r\n const tabId = button.getAttribute('data-tab');\r\n \r\n \/\/ Update active tab\r\n tabButtons.forEach(btn => btn.classList.remove('sp_active'));\r\n button.classList.add('sp_active');\r\n \r\n \/\/ Update active content\r\n contentSections.forEach(section => {\r\n section.classList.remove('sp_active');\r\n if (section.id === tabId) {\r\n section.classList.add('sp_active');\r\n }\r\n });\r\n });\r\n });\r\n \r\n \/\/ Analyze Recipe\r\n analyzeRecipeBtn.addEventListener('click', async () => {\r\n const ingredients = recipeIngredientsInput.value.trim();\r\n const title = recipeTitleInput.value.trim();\r\n const servings = parseInt(recipeServingsInput.value) || 2;\r\n \r\n if (!ingredients) {\r\n showError(recipeError, \"Please enter at least one ingredient\");\r\n return;\r\n }\r\n \r\n try {\r\n recipeLoader.style.display = 'block';\r\n recipeError.style.display = 'none';\r\n recipeResults.style.display = 'none';\r\n \r\n \/\/ Analyze recipe\r\n const result = await analyzeRecipe(ingredients, title, servings);\r\n \r\n \/\/ Display results\r\n updateRecipeAnalysis(result);\r\n \r\n recipeResults.style.display = 'block';\r\n } catch (error) {\r\n showError(recipeError, error.message || \"Failed to analyze recipe. Please try again.\");\r\n } finally {\r\n recipeLoader.style.display = 'none';\r\n }\r\n });\r\n \r\n \/\/ Clear Recipe Form\r\n clearRecipeBtn.addEventListener('click', () => {\r\n recipeTitleInput.value = '';\r\n recipeIngredientsInput.value = '';\r\n recipeServingsInput.value = '2';\r\n recipeResults.style.display = 'none';\r\n recipeError.style.display = 'none';\r\n });\r\n\r\n \/\/ Generate Meal Plan\r\n generateMealPlanBtn.addEventListener('click', async () => {\r\n const calories = parseInt(mealCaloriesInput.value) || 2000;\r\n const days = parseInt(mealDaysInput.value) || 1;\r\n \r\n \/\/ Get diet preferences\r\n const dietPreferences = [];\r\n if (document.getElementById('diet-vegetarian').checked) dietPreferences.push('vegetarian');\r\n if (document.getElementById('diet-vegan').checked) dietPreferences.push('vegan');\r\n if (document.getElementById('diet-glutenFree').checked) dietPreferences.push('gluten free');\r\n if (document.getElementById('diet-dairyFree').checked) dietPreferences.push('dairy free');\r\n \r\n try {\r\n mealLoader.style.display = 'block';\r\n mealError.style.display = 'none';\r\n mealPlanResults.style.display = 'none';\r\n \r\n \/\/ Generate meal plan\r\n const mealPlan = await generateMealPlan(calories, days, dietPreferences.join(','));\r\n \r\n \/\/ Display meal plan\r\n updateMealPlan(mealPlan);\r\n \r\n mealPlanResults.style.display = 'block';\r\n } catch (error) {\r\n showError(mealError, error.message || \"Failed to generate meal plan. Please try again.\");\r\n } finally {\r\n mealLoader.style.display = 'none';\r\n }\r\n });\r\n\r\n \/\/ Search Recipes\r\n searchRecipesBtn.addEventListener('click', async () => {\r\n const query = searchQueryInput.value.trim();\r\n \r\n if (!query) {\r\n showError(searchError, \"Please enter search terms\");\r\n return;\r\n }\r\n \r\n \/\/ Get diet preferences\r\n const diet = [];\r\n if (document.getElementById('search-vegetarian').checked) diet.push('vegetarian');\r\n if (document.getElementById('search-vegan').checked) diet.push('vegan');\r\n if (document.getElementById('search-glutenFree').checked) diet.push('gluten free');\r\n if (document.getElementById('search-dairyFree').checked) diet.push('dairy free');\r\n \r\n const cuisine = document.getElementById('search-cuisine').value;\r\n \r\n try {\r\n searchLoader.style.display = 'block';\r\n searchError.style.display = 'none';\r\n searchResults.style.display = 'none';\r\n \r\n \/\/ Search recipes\r\n const recipes = await searchRecipes(query, diet.join(','), cuisine);\r\n \r\n \/\/ Display search results\r\n updateSearchResults(recipes);\r\n \r\n searchResults.style.display = 'block';\r\n } catch (error) {\r\n showError(searchError, error.message || \"Failed to search recipes. Please try again.\");\r\n } finally {\r\n searchLoader.style.display = 'none';\r\n }\r\n });\r\n\r\n \/\/ Modal Close Events\r\n recipeModalClose.addEventListener('click', () => {\r\n recipeModalOverlay.style.display = 'none';\r\n });\r\n\r\n recipeModalCloseBtn.addEventListener('click', () => {\r\n recipeModalOverlay.style.display = 'none';\r\n });\r\n\r\n recipeModalAddBtn.addEventListener('click', () => {\r\n if (currentRecipeData) {\r\n \/\/ Functionality to add recipe to meal plan\r\n alert('Recipe added to meal plan!');\r\n recipeModalOverlay.style.display = 'none';\r\n }\r\n });\r\n\r\n \/\/ API Functions\r\n async function analyzeRecipe(ingredients, title, servings) {\r\n const ingredientsList = ingredients.split('\\n').filter(i => i.trim());\r\n \r\n \/\/ First, analyze ingredients\r\n const analysisUrl = `${BASE_URL}\/recipes\/parseIngredients`;\r\n const formData = new URLSearchParams();\r\n formData.append('ingredientList', ingredientsList.join('\\n'));\r\n formData.append('servings', servings);\r\n formData.append('language', 'en');\r\n \r\n const analysisResponse = await fetch(`${analysisUrl}?apiKey=${API_KEY}`, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/x-www-form-urlencoded'\r\n },\r\n body: formData.toString()\r\n });\r\n\r\n if (!analysisResponse.ok) {\r\n const errorData = await analysisResponse.json();\r\n throw new Error(errorData.message || \"Failed to analyze ingredients\");\r\n }\r\n\r\n const analysis = await analysisResponse.json();\r\n \r\n \/\/ Get nutrition information using a separate endpoint\r\n const nutritionUrl = `${BASE_URL}\/recipes\/parseIngredients`;\r\n const nutritionFormData = new URLSearchParams();\r\n nutritionFormData.append('ingredientList', ingredientsList.join('\\n'));\r\n nutritionFormData.append('servings', servings);\r\n nutritionFormData.append('language', 'en');\r\n nutritionFormData.append('includeNutrition', true);\r\n\r\n const nutritionResponse = await fetch(`${nutritionUrl}?apiKey=${API_KEY}`, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/x-www-form-urlencoded'\r\n },\r\n body: nutritionFormData.toString()\r\n });\r\n\r\n if (!nutritionResponse.ok) {\r\n throw new Error(\"Failed to get nutrition information\");\r\n }\r\n\r\n const nutritionData = await nutritionResponse.json();\r\n \r\n \/\/ Initialize nutrition info\r\n const nutritionInfo = {\r\n calories: 0,\r\n protein: 0,\r\n fat: 0,\r\n carbs: 0,\r\n nutrients: {}\r\n };\r\n\r\n \/\/ Process nutrition data\r\n nutritionData.forEach(ingredient => {\r\n if (ingredient.nutrition && ingredient.nutrition.nutrients) {\r\n ingredient.nutrition.nutrients.forEach(nutrient => {\r\n switch (nutrient.name) {\r\n case 'Calories':\r\n nutritionInfo.calories += nutrient.amount;\r\n break;\r\n case 'Protein':\r\n nutritionInfo.protein += nutrient.amount;\r\n break;\r\n case 'Fat':\r\n nutritionInfo.fat += nutrient.amount;\r\n break;\r\n case 'Carbohydrates':\r\n nutritionInfo.carbs += nutrient.amount;\r\n break;\r\n }\r\n\r\n \/\/ Store all nutrients for detailed view\r\n if (!nutritionInfo.nutrients[nutrient.name]) {\r\n nutritionInfo.nutrients[nutrient.name] = {\r\n amount: 0,\r\n unit: nutrient.unit,\r\n percentOfDailyNeeds: 0\r\n };\r\n }\r\n nutritionInfo.nutrients[nutrient.name].amount += nutrient.amount;\r\n nutritionInfo.nutrients[nutrient.name].percentOfDailyNeeds += nutrient.percentOfDailyNeeds || 0;\r\n });\r\n }\r\n });\r\n\r\n \/\/ Round all values\r\n nutritionInfo.calories = Math.round(nutritionInfo.calories);\r\n nutritionInfo.protein = Math.round(nutritionInfo.protein);\r\n nutritionInfo.fat = Math.round(nutritionInfo.fat);\r\n nutritionInfo.carbs = Math.round(nutritionInfo.carbs);\r\n\r\n Object.values(nutritionInfo.nutrients).forEach(nutrient => {\r\n nutrient.amount = Math.round(nutrient.amount * 10) \/ 10;\r\n nutrient.percentOfDailyNeeds = Math.round(nutrient.percentOfDailyNeeds * 10) \/ 10;\r\n });\r\n\r\n currentRecipeData = {\r\n title: title || 'Custom Recipe',\r\n ingredients: analysis,\r\n servings\r\n };\r\n \r\n currentRecipeNutrition = nutritionInfo;\r\n \r\n return {\r\n recipe: currentRecipeData,\r\n nutrition: nutritionInfo\r\n };\r\n }\r\n\r\n async function generateMealPlan(targetCalories, timeFrame, diet) {\r\n const url = `${BASE_URL}\/mealplanner\/generate`;\r\n const params = new URLSearchParams({\r\n apiKey: API_KEY,\r\n timeFrame: timeFrame === 1 ? 'day' : 'week',\r\n targetCalories,\r\n numDays: timeFrame\r\n });\r\n \r\n if (diet) {\r\n const diets = diet.split(',').map(d => d.trim());\r\n if (diets.includes('vegetarian')) params.append('diet', 'vegetarian');\r\n if (diets.includes('vegan')) params.append('diet', 'vegan');\r\n if (diets.includes('gluten free')) params.append('diet', 'gluten-free');\r\n }\r\n\r\n const response = await fetch(`${url}?${params}`);\r\n \r\n if (!response.ok) {\r\n const errorData = await response.json();\r\n throw new Error(errorData.message || \"Failed to generate meal plan\");\r\n }\r\n \r\n const mealPlan = await response.json();\r\n \r\n \/\/ Transform the response for consistent handling\r\n if (timeFrame === 1) {\r\n return {\r\n week: {\r\n monday: {\r\n meals: mealPlan.meals,\r\n nutrients: mealPlan.nutrients\r\n }\r\n }\r\n };\r\n }\r\n \r\n return mealPlan;\r\n }\r\n\r\n async function searchRecipes(query, diet, cuisine) {\r\n const url = `${BASE_URL}\/recipes\/complexSearch`;\r\n const params = new URLSearchParams({\r\n apiKey: API_KEY,\r\n query,\r\n number: 12,\r\n addRecipeInformation: true,\r\n fillIngredients: true\r\n });\r\n \r\n if (diet) {\r\n params.append('diet', diet);\r\n }\r\n \r\n if (cuisine) {\r\n params.append('cuisine', cuisine);\r\n }\r\n \r\n const response = await fetch(`${url}?${params}`);\r\n \r\n if (!response.ok) {\r\n const errorData = await response.json();\r\n throw new Error(errorData.message || \"Failed to search recipes\");\r\n }\r\n \r\n const data = await response.json();\r\n return data.results;\r\n }\r\n\r\n async function getRecipeById(id) {\r\n const url = `${BASE_URL}\/recipes\/${id}\/information`;\r\n const params = new URLSearchParams({\r\n apiKey: API_KEY,\r\n includeNutrition: true\r\n });\r\n \r\n const response = await fetch(`${url}?${params}`);\r\n \r\n if (!response.ok) {\r\n const errorData = await response.json();\r\n throw new Error(errorData.message || \"Failed to get recipe information\");\r\n }\r\n \r\n return await response.json();\r\n }\r\n\r\n \/\/ UI Update Functions\r\n function updateRecipeAnalysis(data) {\r\n const { nutrition } = data;\r\n \r\n \/\/ Update macronutrient summaries\r\n document.getElementById('recipe-calories').textContent = `${Math.round(nutrition.calories)} kcal`;\r\n document.getElementById('recipe-protein').textContent = `${Math.round(nutrition.protein)}g`;\r\n document.getElementById('recipe-carbs').textContent = `${Math.round(nutrition.carbs)}g`;\r\n document.getElementById('recipe-fat').textContent = `${Math.round(nutrition.fat)}g`;\r\n \r\n \/\/ Create nutrition chart\r\n const chartCanvas = document.getElementById('recipe-nutrition-chart');\r\n \r\n \/\/ Make sure canvas is visible\r\n chartCanvas.style.display = 'block';\r\n \r\n \/\/ Clear any existing chart\r\n if (window.recipeChart) {\r\n window.recipeChart.destroy();\r\n }\r\n \r\n \/\/ Calculate caloric values\r\n const proteinCalories = Math.round(nutrition.protein * 4);\r\n const carbsCalories = Math.round(nutrition.carbs * 4);\r\n const fatCalories = Math.round(nutrition.fat * 9);\r\n \r\n const totalCalories = proteinCalories + carbsCalories + fatCalories;\r\n \r\n \/\/ Debug log\r\n console.log('Chart data:', {\r\n protein: proteinCalories,\r\n carbs: carbsCalories,\r\n fat: fatCalories,\r\n total: totalCalories\r\n });\r\n \r\n \/\/ Only create chart if we have valid data\r\n if (totalCalories > 0) {\r\n try {\r\n window.recipeChart = new Chart(chartCanvas.getContext('2d'), {\r\n type: 'doughnut',\r\n data: {\r\n labels: ['Protein', 'Carbs', 'Fat'],\r\n datasets: [{\r\n data: [proteinCalories, carbsCalories, fatCalories],\r\n backgroundColor: [\r\n '#4CAF50', \/\/ Protein - Green\r\n '#FF9800', \/\/ Carbs - Orange\r\n '#2196F3' \/\/ Fat - Blue\r\n ]\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n position: 'bottom',\r\n labels: {\r\n padding: 20,\r\n font: {\r\n size: 12\r\n }\r\n }\r\n },\r\n tooltip: {\r\n callbacks: {\r\n label: function(context) {\r\n const label = context.label || '';\r\n const value = context.raw || 0;\r\n const percentage = Math.round((value \/ totalCalories) * 100);\r\n return `${label}: ${percentage}% (${value} cal)`;\r\n }\r\n }\r\n }\r\n },\r\n cutout: '70%'\r\n }\r\n });\r\n } catch (error) {\r\n console.error('Error creating chart:', error);\r\n }\r\n } else {\r\n console.log('No valid caloric data for chart');\r\n chartCanvas.style.display = 'none';\r\n }\r\n \r\n \/\/ Display nutrients as daily value percentages\r\n const nutrientsContainer = document.getElementById('recipe-nutrients');\r\n nutrientsContainer.innerHTML = '';\r\n \r\n \/\/ Sort nutrients by their daily value percentage\r\n const sortedNutrients = Object.entries(nutrition.nutrients)\r\n .sort((a, b) => b[1].percentOfDailyNeeds - a[1].percentOfDailyNeeds)\r\n .slice(0, 12); \/\/ Show top 12 nutrients\r\n \r\n sortedNutrients.forEach(([name, info]) => {\r\n if (info.percentOfDailyNeeds > 0) {\r\n const nutrientEl = document.createElement('div');\r\n nutrientEl.className = 'sp_summary_item';\r\n \r\n \/\/ Color based on percentage of daily needs\r\n let color = '#4CAF50'; \/\/ Green for >= 100%\r\n if (info.percentOfDailyNeeds < 25) {\r\n color = '#F44336'; \/\/ Red for < 25%\r\n } else if (info.percentOfDailyNeeds < 50) {\r\n color = '#FF9800'; \/\/ Orange for 25-50%\r\n } else if (info.percentOfDailyNeeds < 100) {\r\n color = '#2196F3'; \/\/ Blue for 50-100%\r\n }\r\n \r\n nutrientEl.innerHTML = `\r\n <div class=\"sp_summary_value\" style=\"color: ${color}\">\r\n ${Math.round(info.percentOfDailyNeeds)}%\r\n <\/div>\r\n <div class=\"sp_summary_label\">${name}<\/div>\r\n <div class=\"sp_progress_container\">\r\n <div class=\"sp_progress_bar\" style=\"width: ${Math.min(100, info.percentOfDailyNeeds)}%; background-color: ${color}\"><\/div>\r\n <\/div>\r\n <div class=\"sp_progress_text\">\r\n <span>${Math.round(info.amount)}${info.unit}<\/span>\r\n <span>DV<\/span>\r\n <\/div>\r\n `;\r\n \r\n nutrientsContainer.appendChild(nutrientEl);\r\n }\r\n });\r\n }\r\n\r\n function updateMealPlan(data) {\r\n const resultsContainer = document.getElementById('meal-plan-results');\r\n resultsContainer.innerHTML = '';\r\n \r\n \/\/ Get number of days from input\r\n const numberOfDays = parseInt(document.getElementById('meal-days').value) || 1;\r\n \r\n const daysOfWeek = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];\r\n const displayDays = daysOfWeek.slice(0, numberOfDays);\r\n \r\n displayDays.forEach(day => {\r\n if (data.week[day]) {\r\n const dayPlan = document.createElement('div');\r\n dayPlan.className = 'sp_meal_day';\r\n \r\n const dayHeader = document.createElement('div');\r\n dayHeader.className = 'sp_meal_header';\r\n dayHeader.innerHTML = `\r\n <div class=\"sp_meal_title\">${day.charAt(0).toUpperCase() + day.slice(1)}<\/div>\r\n `;\r\n \r\n const dayNutrients = data.week[day].nutrients;\r\n const daySummary = document.createElement('div');\r\n daySummary.className = 'sp_summary';\r\n daySummary.innerHTML = `\r\n <h3 class=\"sp_summary_title\">Daily Nutritional Summary<\/h3>\r\n <div class=\"sp_summary_grid\">\r\n <div class=\"sp_summary_item\">\r\n <div class=\"sp_summary_value\">${Math.round(dayNutrients.calories)}<\/div>\r\n <div class=\"sp_summary_label\">Calories<\/div>\r\n <\/div>\r\n <div class=\"sp_summary_item\">\r\n <div class=\"sp_summary_value\">${Math.round(dayNutrients.protein)}g<\/div>\r\n <div class=\"sp_summary_label\">Protein<\/div>\r\n <\/div>\r\n <div class=\"sp_summary_item\">\r\n <div class=\"sp_summary_value\">${Math.round(dayNutrients.carbohydrates)}g<\/div>\r\n <div class=\"sp_summary_label\">Carbs<\/div>\r\n <\/div>\r\n <div class=\"sp_summary_item\">\r\n <div class=\"sp_summary_value\">${Math.round(dayNutrients.fat)}g<\/div>\r\n <div class=\"sp_summary_label\">Fat<\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n \/\/ Create meal cards - modified to handle all meal types\r\n const meals = document.createElement('div');\r\n meals.className = 'sp_card';\r\n \r\n const mealTypes = ['breakfast', 'lunch', 'dinner'];\r\n data.week[day].meals.forEach((mealObj, index) => {\r\n const mealType = mealTypes[index] || 'meal';\r\n \r\n const mealCard = document.createElement('div');\r\n mealCard.className = 'sp_meal_header';\r\n mealCard.innerHTML = `\r\n <div class=\"sp_meal_title\">${mealType.charAt(0).toUpperCase() + mealType.slice(1)}<\/div>\r\n `;\r\n \r\n const mealContent = document.createElement('div');\r\n mealContent.className = 'sp_meal_card';\r\n mealContent.innerHTML = `\r\n <img decoding=\"async\" src=\"${mealObj.imageType ? `https:\/\/spoonacular.com\/recipeImages\/${mealObj.id}-90x90.${mealObj.imageType}` : 'https:\/\/via.placeholder.com\/90'}\" \r\n class=\"sp_meal_image\" alt=\"${mealObj.title}\">\r\n <div class=\"sp_meal_content\">\r\n <div>\r\n <div class=\"sp_meal_name\">${mealObj.title}<\/div>\r\n <div class=\"sp_meal_calories\">Ready in ${mealObj.readyInMinutes} minutes<\/div>\r\n <\/div>\r\n <div class=\"sp_meal_actions\">\r\n <button class=\"sp_button sp_secondary view-recipe-btn\" data-id=\"${mealObj.id}\">View Recipe<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n meals.appendChild(mealCard);\r\n meals.appendChild(mealContent);\r\n });\r\n \r\n dayPlan.appendChild(dayHeader);\r\n dayPlan.appendChild(daySummary);\r\n dayPlan.appendChild(meals);\r\n resultsContainer.appendChild(dayPlan);\r\n }\r\n });\r\n \r\n \/\/ Add event listeners to recipe view buttons\r\n document.querySelectorAll('.view-recipe-btn').forEach(button => {\r\n button.addEventListener('click', async () => {\r\n const recipeId = button.getAttribute('data-id');\r\n try {\r\n recipeModalOverlay.style.display = 'flex';\r\n recipeModalBody.innerHTML = '<div class=\"sp_loader\" style=\"display:block;\"><\/div>';\r\n \r\n const recipe = await getRecipeById(recipeId);\r\n showRecipeDetails(recipe);\r\n } catch (error) {\r\n recipeModalBody.innerHTML = `<div class=\"sp_error\" style=\"display:block;\">Failed to load recipe details<\/div>`;\r\n }\r\n });\r\n });\r\n }\r\n\r\n function updateSearchResults(recipes) {\r\n const resultsContainer = document.getElementById('search-results');\r\n resultsContainer.innerHTML = '';\r\n \r\n if (recipes.length === 0) {\r\n resultsContainer.innerHTML = '<p>No recipes found matching your criteria.<\/p>';\r\n return;\r\n }\r\n \r\n recipes.forEach(recipe => {\r\n const recipeCard = document.createElement('div');\r\n recipeCard.className = 'sp_recipe_card';\r\n recipeCard.innerHTML = `\r\n <img decoding=\"async\" src=\"${recipe.image}\" class=\"sp_recipe_image\" alt=\"${recipe.title}\">\r\n <div class=\"sp_recipe_content\">\r\n <h3 class=\"sp_recipe_title\">${recipe.title}<\/h3>\r\n <div class=\"sp_recipe_meta\">\r\n <div class=\"sp_recipe_meta_item\">\r\n <span>\u23f1\ufe0f<\/span>\r\n <span>${recipe.readyInMinutes} min<\/span>\r\n <\/div>\r\n <div class=\"sp_recipe_meta_item\">\r\n <span>\ud83d\udc65<\/span>\r\n <span>${recipe.servings} servings<\/span>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n ${recipe.vegetarian ? '<span class=\"sp_badge sp_vegetarian\">Vegetarian<\/span>' : ''}\r\n ${recipe.vegan ? '<span class=\"sp_badge sp_vegan\">Vegan<\/span>' : ''}\r\n ${recipe.glutenFree ? '<span class=\"sp_badge sp_gluten_free\">Gluten Free<\/span>' : ''}\r\n ${recipe.dairyFree ? '<span class=\"sp_badge sp_dairy_free\">Dairy Free<\/span>' : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n recipeCard.addEventListener('click', async () => {\r\n try {\r\n recipeModalOverlay.style.display = 'flex';\r\n recipeModalBody.innerHTML = '<div class=\"sp_loader\" style=\"display:block;\"><\/div>';\r\n \r\n const recipeDetails = await getRecipeById(recipe.id);\r\n showRecipeDetails(recipeDetails);\r\n } catch (error) {\r\n recipeModalBody.innerHTML = `<div class=\"sp_error\" style=\"display:block;\">Failed to load recipe details<\/div>`;\r\n }\r\n });\r\n \r\n resultsContainer.appendChild(recipeCard);\r\n });\r\n }\r\n\r\n function showRecipeDetails(recipe) {\r\n recipeModalTitle.textContent = recipe.title;\r\n \r\n let content = `\r\n <div>\r\n <img decoding=\"async\" src=\"${recipe.image}\" alt=\"${recipe.title}\" style=\"width: 100%; max-height: 300px; object-fit: cover; border-radius: 8px;\">\r\n \r\n <div class=\"sp_info_grid\" style=\"margin-top: 20px;\">\r\n <div class=\"sp_info_item\">\r\n <div class=\"sp_info_icon\">\u23f1\ufe0f<\/div>\r\n <div class=\"sp_info_text\">\r\n <div class=\"sp_info_label\">Ready In<\/div>\r\n <div class=\"sp_info_value\">${recipe.readyInMinutes} min<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"sp_info_item\">\r\n <div class=\"sp_info_icon\">\ud83d\udc65<\/div>\r\n <div class=\"sp_info_text\">\r\n <div class=\"sp_info_label\">Servings<\/div>\r\n <div class=\"sp_info_value\">${recipe.servings}<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"sp_info_item\">\r\n <div class=\"sp_info_icon\">\ud83e\uddea<\/div>\r\n <div class=\"sp_info_text\">\r\n <div class=\"sp_info_label\">Health Score<\/div>\r\n <div class=\"sp_info_value\">${recipe.healthScore}<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"sp_info_item\">\r\n <div class=\"sp_info_icon\">\ud83d\udcac<\/div>\r\n <div class=\"sp_info_text\">\r\n <div class=\"sp_info_label\">Likes<\/div>\r\n <div class=\"sp_info_value\">${recipe.aggregateLikes}<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-top: 10px;\">\r\n ${recipe.vegetarian ? '<span class=\"sp_badge sp_vegetarian\">Vegetarian<\/span>' : ''}\r\n ${recipe.vegan ? '<span class=\"sp_badge sp_vegan\">Vegan<\/span>' : ''}\r\n ${recipe.glutenFree ? '<span class=\"sp_badge sp_gluten_free\">Gluten Free<\/span>' : ''}\r\n ${recipe.dairyFree ? '<span class=\"sp_badge sp_dairy_free\">Dairy Free<\/span>' : ''}\r\n <\/div>\r\n `;\r\n \r\n \/\/ Recipe summary\r\n if (recipe.summary) {\r\n content += `\r\n <div style=\"margin-top: 20px;\">\r\n <p>${recipe.summary}<\/p>\r\n <\/div>\r\n `;\r\n }\r\n \r\n \/\/ Ingredients\r\n if (recipe.extendedIngredients && recipe.extendedIngredients.length > 0) {\r\n content += `<h3 class=\"sp_section_title\">Ingredients<\/h3>`;\r\n content += `<ul class=\"sp_ingredient_list\">`;\r\n \r\n recipe.extendedIngredients.forEach(ingredient => {\r\n content += `\r\n <li class=\"sp_ingredient_item\">\r\n <span class=\"sp_ingredient_amount\">${ingredient.amount} ${ingredient.unit}<\/span>\r\n <span>${ingredient.originalName || ingredient.name}<\/span>\r\n <\/li>\r\n `;\r\n });\r\n \r\n content += `<\/ul>`;\r\n }\r\n \r\n \/\/ Instructions\r\n if (recipe.analyzedInstructions && recipe.analyzedInstructions.length > 0) {\r\n content += `<h3 class=\"sp_section_title\">Instructions<\/h3>`;\r\n content += `<ol class=\"sp_instructions\">`;\r\n \r\n recipe.analyzedInstructions[0].steps.forEach(step => {\r\n content += `<li class=\"sp_instruction_step\">${step.step}<\/li>`;\r\n });\r\n \r\n content += `<\/ol>`;\r\n }\r\n \r\n \/\/ Nutrition information if available\r\n if (recipe.nutrition) {\r\n content += `<h3 class=\"sp_section_title\">Nutrition Facts<\/h3>`;\r\n content += `<div class=\"sp_grid\">`;\r\n \r\n recipe.nutrition.nutrients.forEach(nutrient => {\r\n if (['Calories', 'Fat', 'Saturated Fat', 'Carbohydrates', 'Protein', 'Sodium', 'Fiber', 'Sugar'].includes(nutrient.name)) {\r\n content += `\r\n <div class=\"sp_summary_item\">\r\n <div class=\"sp_summary_value\">${Math.round(nutrient.amount)}${nutrient.unit}<\/div>\r\n <div class=\"sp_summary_label\">${nutrient.name}<\/div>\r\n <\/div>\r\n `;\r\n }\r\n });\r\n \r\n content += `<\/div>`;\r\n }\r\n \r\n content += `<\/div>`;\r\n \r\n recipeModalBody.innerHTML = content;\r\n }\r\n\r\n \/\/ Helper Functions\r\n function showError(element, message) {\r\n element.textContent = message;\r\n element.style.display = 'block';\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<!-- CONTENT END 1 -->\n","protected":false},"excerpt":{"rendered":"<p>Recipe Analyzer & Meal Planner Culinary Assistant Analyze recipes, plan meals, and discover nutrition insights with powerful AI-driven tools Recipe Analyzer Meal Planner Recipe Search Recipe Title (optional) Ingredients Servings Analyze Recipe Clear Nutrition Summary \ud83d\udd25 Calories 0 kcal \ud83e\udd69…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":13352,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-18789","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Everything Recipe | The Private Clinic<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/theprivateclinic.me\/en\/resources\/everything-recipe\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Everything Recipe | The Private Clinic\" \/>\n<meta property=\"og:description\" content=\"Recipe Analyzer & Meal Planner Culinary Assistant Analyze recipes, plan meals, and discover nutrition insights with powerful AI-driven tools Recipe Analyzer Meal Planner Recipe Search Recipe Title (optional) Ingredients Servings Analyze Recipe Clear Nutrition Summary \ud83d\udd25 Calories 0 kcal \ud83e\udd69...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/theprivateclinic.me\/en\/resources\/everything-recipe\/\" \/>\n<meta property=\"og:site_name\" content=\"The Private Clinic\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/clinictheprivate\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-30T15:54:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/theprivateclinic.me\/wp-content\/uploads\/2024\/10\/Pink-Purple-Modern-Ticket-Event-Facebook-Cover.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1640\" \/>\n\t<meta property=\"og:image:height\" content=\"924\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@goprivateclinic\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/theprivateclinic.me\\\/resources\\\/everything-recipe\\\/\",\"url\":\"https:\\\/\\\/theprivateclinic.me\\\/resources\\\/everything-recipe\\\/\",\"name\":\"Everything Recipe | The Private Clinic\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/private.dopamain.com\\\/#website\"},\"datePublished\":\"2025-03-30T14:11:09+00:00\",\"dateModified\":\"2025-03-30T15:54:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/theprivateclinic.me\\\/resources\\\/everything-recipe\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/theprivateclinic.me\\\/resources\\\/everything-recipe\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/theprivateclinic.me\\\/resources\\\/everything-recipe\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/theprivateclinic.me\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Posts Hub\",\"item\":\"https:\\\/\\\/theprivateclinic.me\\\/en\\\/resources\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Everything Recipe\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/private.dopamain.com\\\/#website\",\"url\":\"https:\\\/\\\/private.dopamain.com\\\/\",\"name\":\"The Private Clinic\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/private.dopamain.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/private.dopamain.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/private.dopamain.com\\\/#organization\",\"name\":\"The Private Clinic\",\"url\":\"https:\\\/\\\/private.dopamain.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/private.dopamain.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/theprivateclinic.me\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/The_Private_Clinic.png\",\"contentUrl\":\"https:\\\/\\\/theprivateclinic.me\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/The_Private_Clinic.png\",\"width\":396,\"height\":385,\"caption\":\"The Private Clinic\"},\"image\":{\"@id\":\"https:\\\/\\\/private.dopamain.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/clinictheprivate\\\/\",\"https:\\\/\\\/x.com\\\/goprivateclinic\",\"https:\\\/\\\/www.instagram.com\\\/the.private.clinic\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/theprivateclinic\",\"https:\\\/\\\/www.pinterest.com\\\/theprivateclinic\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Everything Recipe | The Private Clinic","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/theprivateclinic.me\/en\/resources\/everything-recipe\/","og_locale":"en_US","og_type":"article","og_title":"Everything Recipe | The Private Clinic","og_description":"Recipe Analyzer & Meal Planner Culinary Assistant Analyze recipes, plan meals, and discover nutrition insights with powerful AI-driven tools Recipe Analyzer Meal Planner Recipe Search Recipe Title (optional) Ingredients Servings Analyze Recipe Clear Nutrition Summary \ud83d\udd25 Calories 0 kcal \ud83e\udd69...","og_url":"https:\/\/theprivateclinic.me\/en\/resources\/everything-recipe\/","og_site_name":"The Private Clinic","article_publisher":"https:\/\/www.facebook.com\/clinictheprivate\/","article_modified_time":"2025-03-30T15:54:22+00:00","og_image":[{"width":1640,"height":924,"url":"https:\/\/theprivateclinic.me\/wp-content\/uploads\/2024\/10\/Pink-Purple-Modern-Ticket-Event-Facebook-Cover.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@goprivateclinic","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/theprivateclinic.me\/resources\/everything-recipe\/","url":"https:\/\/theprivateclinic.me\/resources\/everything-recipe\/","name":"Everything Recipe | The Private Clinic","isPartOf":{"@id":"https:\/\/private.dopamain.com\/#website"},"datePublished":"2025-03-30T14:11:09+00:00","dateModified":"2025-03-30T15:54:22+00:00","breadcrumb":{"@id":"https:\/\/theprivateclinic.me\/resources\/everything-recipe\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/theprivateclinic.me\/resources\/everything-recipe\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/theprivateclinic.me\/resources\/everything-recipe\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/theprivateclinic.me\/en\/"},{"@type":"ListItem","position":2,"name":"Posts Hub","item":"https:\/\/theprivateclinic.me\/en\/resources\/"},{"@type":"ListItem","position":3,"name":"Everything Recipe"}]},{"@type":"WebSite","@id":"https:\/\/private.dopamain.com\/#website","url":"https:\/\/private.dopamain.com\/","name":"The Private Clinic","description":"","publisher":{"@id":"https:\/\/private.dopamain.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/private.dopamain.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/private.dopamain.com\/#organization","name":"The Private Clinic","url":"https:\/\/private.dopamain.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/private.dopamain.com\/#\/schema\/logo\/image\/","url":"https:\/\/theprivateclinic.me\/wp-content\/uploads\/2024\/01\/The_Private_Clinic.png","contentUrl":"https:\/\/theprivateclinic.me\/wp-content\/uploads\/2024\/01\/The_Private_Clinic.png","width":396,"height":385,"caption":"The Private Clinic"},"image":{"@id":"https:\/\/private.dopamain.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/clinictheprivate\/","https:\/\/x.com\/goprivateclinic","https:\/\/www.instagram.com\/the.private.clinic","https:\/\/www.linkedin.com\/company\/theprivateclinic","https:\/\/www.pinterest.com\/theprivateclinic\/"]}]}},"_links":{"self":[{"href":"https:\/\/theprivateclinic.me\/en\/wp-json\/wp\/v2\/pages\/18789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theprivateclinic.me\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/theprivateclinic.me\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/theprivateclinic.me\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theprivateclinic.me\/en\/wp-json\/wp\/v2\/comments?post=18789"}],"version-history":[{"count":0,"href":"https:\/\/theprivateclinic.me\/en\/wp-json\/wp\/v2\/pages\/18789\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/theprivateclinic.me\/en\/wp-json\/wp\/v2\/pages\/13352"}],"wp:attachment":[{"href":"https:\/\/theprivateclinic.me\/en\/wp-json\/wp\/v2\/media?parent=18789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}