diff --git a/index.html b/index.html
index 352ee4d..f34a22d 100644
--- a/index.html
+++ b/index.html
@@ -290,6 +290,12 @@
+
+
+
diff --git a/src/index.ts b/src/index.ts
index 0fd2f44..0dbc881 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -217,6 +217,20 @@ async function handleClearCache() {
}
}
+function handleAICheckboxChange(e: Event) {
+ const checkbox = e.target as HTMLInputElement;
+
+ if (checkbox.checked) {
+ // If a food is already selected, load its AI nutrition info
+ if (selectedFood) {
+ loadAINutritionInfo(selectedFood.name);
+ }
+ } else {
+ // Hide the AI nutrition card
+ hideAINutritionCard();
+ }
+}
+
async function handleLogout() {
showLoading();
@@ -468,6 +482,9 @@ const setupEventListeners = () => {
// Clear cache button
getButtonById('clearCacheBtn')?.addEventListener('click', handleClearCache);
+ // AI nutrition checkbox
+ document.getElementById('enableAINutrition')?.addEventListener('change', handleAICheckboxChange);
+
// Share button event listeners
getButtonById('shareBtn').addEventListener('click', handleShareClick);
getButtonById('shareBtnMobile').addEventListener('click', handleShareClick);
@@ -688,8 +705,13 @@ function selectFood(food: FoodItem) {
// Show cancel button so user can clear selection
getButtonById('cancel-food-btn').style.display = 'inline-block';
- // Load AI nutrition info for the selected food
- loadAINutritionInfo(food.name);
+ // Load AI nutrition info only if checkbox is checked
+ const aiCheckbox = document.getElementById('enableAINutrition') as HTMLInputElement;
+ if (aiCheckbox && aiCheckbox.checked) {
+ loadAINutritionInfo(food.name);
+ } else {
+ hideAINutritionCard();
+ }
}
async function setFoodToEdit(foodId: string) {
diff --git a/style.css b/style.css
index 67ebb2e..456d988 100644
--- a/style.css
+++ b/style.css
@@ -461,6 +461,36 @@ label {
color: #666;
}
+.checkbox-group {
+ margin: 10px 0;
+}
+
+.checkbox-label {
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ color: #e0e0e0;
+ font-weight: 400;
+ user-select: none;
+}
+
+.ai-checkbox {
+ width: 18px;
+ height: 18px;
+ margin-right: 10px;
+ cursor: pointer;
+ accent-color: #6B8DD6;
+}
+
+.checkbox-label span {
+ font-size: 0.95rem;
+ color: #b0b0b0;
+}
+
+.checkbox-label:hover span {
+ color: #e0e0e0;
+}
+
.add-btn {
padding: 17px 25px;
background: linear-gradient(135deg, #4CAF50, #45a049);