Add buttons

assets/js/main.js

@@ -242,7 +242,7 @@ const app = {
                 buttonGroup.className = 'mt-auto pt-2 d-flex gap-2 justify-content-center w-100';
                 buttonGroup.innerHTML = `
                     <button class="btn btn-light btn-sm view-recipe"><i class="bi bi-eye"></i> View</button>
-                    <button class="btn btn-light btn-sm edit-recipe"><i class="bi bi-pencil"></i></button>
+                    <button class="btn btn-light btn-sm edit-recipe"><i class="bi bi-pencil"></i> Edit</button>
                     <button class="btn btn-outline-danger btn-sm delete-recipe" title="Delete"><i class="bi bi-trash"></i></button>
                 `;
                 
@@ -497,18 +497,31 @@ const app = {
             document.getElementById('view-recipe-instructions').textContent = recipe.instructions || 'No instructions provided.';
             
                         const ingredientsList = document.getElementById('view-recipe-ingredients');
+            
                         ingredientsList.innerHTML = '';
+            
+            
+            
                         if (recipe.ingredients) {
+            
                             recipe.ingredients.forEach(ing => {
+            
                                 const li = document.createElement('li');
+            
                                 li.className = 'list-group-item';
+            
                                 li.textContent = `${ing.name} - ${ing.quantity} ${ing.unit}`;
+            
                                 ingredientsList.appendChild(li);
+            
                             });
+            
                         }
             
-            const viewRecipeModal = new bootstrap.Modal(modal);
+            
-            viewRecipeModal.show();
+            
+                        app.dom.viewRecipeModal.show();
+            
                     },
         getRecipeDataFromForm() {
             const recipeName = app.dom.recipeNameInput.value.trim();
@@ -635,6 +648,34 @@ const app = {
                 }
             });
 
+            document.getElementById('add-recipe-options-modal').addEventListener('click', (e) => {
+                const btn = e.target.closest('.add-option-btn');
+                if (!btn) return;
+
+                const method = btn.dataset.method;
+                app.dom.addRecipeOptionsModal.hide();
+
+                if (method === 'scratch' || method === 'photo') {
+                    app.ui.clearForm();
+                    app.dom.recipeFormModal.show();
+                    if (method === 'photo') {
+                        setTimeout(() => app.dom.recipeImage.click(), 500);
+                    }
+                } else if (method === 'web' || method === 'social') {
+                    const url = prompt('Please enter the URL of the recipe:');
+                    if (url) {
+                        alert('Analyzing recipe from URL... (Feature integration in progress)');
+                        // Here you would typically call an AI endpoint to scrape/analyze the URL
+                    }
+                } else if (method === 'ingredients') {
+                    const ingredients = prompt('What ingredients do you have? (comma separated)');
+                    if (ingredients) {
+                        alert('Generating a recipe from: ' + ingredients + '... (Feature integration in progress)');
+                        // Here you would call an AI endpoint to generate a recipe
+                    }
+                }
+            });
+
             app.dom.addIngredientBtn.addEventListener('click', () => app.ui.addIngredientRow());
 
             app.dom.aiScanBtn.addEventListener('click', async function() {
@@ -749,7 +790,7 @@ const app = {
             app.dom.recipeCardsContainer.addEventListener('click', function(e) {
                 const target = e.target.closest('button');
                 const checkbox = e.target.closest('.select-recipe');
-                const cardCol = e.target.closest('.col-12[data-id]');
+                const cardCol = e.target.closest('[data-id]');
                 if (!cardCol) return;
 
                 const recipeId = cardCol.getAttribute('data-id');
@@ -1042,12 +1083,14 @@ const app = {
             
             printShoppingListBtn: document.getElementById('print-shopping-list-btn'),
             recipeFormModal: new bootstrap.Modal(document.getElementById('recipe-form-modal')),
+            viewRecipeModal: new bootstrap.Modal(document.getElementById('view-recipe-modal')),
             addProductModal: new bootstrap.Modal(document.getElementById('add-product-modal')),
             addProductForm: document.getElementById('add-product-form'),
             productNameInput: document.getElementById('productName'),
             productQuantityInput: document.getElementById('productQuantity'),
             productCategoryWrapper: document.getElementById('product-category-wrapper'),
             productCategory: document.getElementById('productCategory'),
+            addRecipeOptionsModal: new bootstrap.Modal(document.getElementById('add-recipe-options-modal')),
         };
 
         app.ui.loadCheckedItems();

index.php

@@ -167,7 +167,7 @@
                 <div class="col-md-6">
                     <div class="d-flex justify-content-between align-items-center mb-4">
                         <h2 class="text-center mb-0">All Recipes</h2>
-                        <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#recipe-form-modal">
+                        <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#add-recipe-options-modal">
                             Add recipe
                         </button>
                     </div>
@@ -211,6 +211,57 @@
         </main>
     </div>
 
+    <!-- Modal Add Recipe Options -->
+    <div class="modal fade" id="add-recipe-options-modal" tabindex="-1" aria-labelledby="add-recipe-options-modal-label" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
+                <div class="modal-header border-0 pb-0">
+                    <h5 class="modal-title fw-bold" id="add-recipe-options-modal-label">Choose method</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body p-4">
+                    <div class="d-grid gap-3">
+                        <button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="photo">
+                            <i class="bi bi-camera fs-3 me-3"></i>
+                            <div>
+                                <div class="fw-bold">Create from a photo</div>
+                                <div class="small text-muted">Scan a physical recipe or a dish</div>
+                            </div>
+                        </button>
+                        <button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="web">
+                            <i class="bi bi-globe fs-3 me-3"></i>
+                            <div>
+                                <div class="fw-bold">Save from the web</div>
+                                <div class="small text-muted">Paste a recipe URL</div>
+                            </div>
+                        </button>
+                        <button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="social">
+                            <i class="bi bi-instagram fs-3 me-3"></i>
+                            <div>
+                                <div class="fw-bold">Save from social media</div>
+                                <div class="small text-muted">Instagram, TikTok, Pinterest</div>
+                            </div>
+                        </button>
+                        <button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="ingredients">
+                            <i class="bi bi-basket fs-3 me-3"></i>
+                            <div>
+                                <div class="fw-bold">Create from available ingredients</div>
+                                <div class="small text-muted">Generate a recipe from what you have</div>
+                            </div>
+                        </button>
+                        <button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="scratch">
+                            <i class="bi bi-pencil-square fs-3 me-3"></i>
+                            <div>
+                                <div class="fw-bold">Create a recipe from scratch</div>
+                                <div class="small text-muted">Enter ingredients and steps manually</div>
+                            </div>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Modal Recipe Form -->
     <div class="modal fade" id="recipe-form-modal" tabindex="-1" aria-labelledby="recipe-form-modal-label" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">