Update templates/reward_status.html

templates/reward_status.html

@@ -71,12 +71,17 @@
             justify-content: space-between;
             padding-top: 10px;
             flex-wrap: wrap;
+            gap: 10px; /* Ensures ingredients are spaced out evenly */
         }
         .ingredient {
             width: 48%;
             text-align: center;
             cursor: pointer;
             margin-top: 10px;
+            transition: transform 0.3s ease; /* Added smooth hover effect */
+        }
+        .ingredient:hover {
+            transform: scale(1.05); /* Makes the ingredient slightly larger when hovered */
         }
         .ingredient img {
             width: 100%;
@@ -103,7 +108,7 @@
             margin: 5% auto;
             padding: 20px;
             border: 1px solid #888;
-            width: 80%; /* Changed to 80% of screen width */
+            width: 80%; /* Adjust to 80% of screen width */
             border-radius: 8px;
             position: relative;
         }
@@ -135,7 +140,7 @@
                     <p>Price: ${{ "%.2f"|format(item.price) }}</p>
                 </div>
 
-                <!-- Ingredients -->
+                <!-- Ingredients Section -->
                 <div class="ingredient-card">
                     {% if item.ingredients %}
                         {% for ingredient in item.ingredients %}
@@ -148,19 +153,6 @@
                         <p>No ingredients found for {{ item.name }}</p>
                     {% endif %}
                 </div>
-
-                <!-- Debugging the items and ingredients in console -->
-                <script>
-                    console.log("Rendering item: {{ item.name }}");
-
-                    {% if item.ingredients %}
-                        {% for ingredient in item.ingredients %}
-                            console.log("Ingredient: {{ ingredient.name }} - Image: {{ ingredient.image }}");
-                        {% endfor %}
-                    {% else %}
-                        console.log("No ingredients for {{ item.name }}");
-                    {% endif %}
-                </script>
             {% endfor %}
         </div>
     </div>
@@ -186,7 +178,6 @@
 <script>
     // JavaScript for showing ingredient details in modal
     function showIngredientDetails(name, image, healthBenefits, funFacts) {
-        console.log("Ingredient clicked:", name);  // Debugging to check if the correct ingredient is clicked
         const healthBenefitsList = healthBenefits.split(',');
         const funFactsList = funFacts.split(',');
         document.getElementById("ingredientName").textContent = name;
@@ -210,14 +201,13 @@
         document.getElementById("ingredientModal").style.display = "none";
     }
 
-    // Debugging: Check if items and ingredients exist on page load
+    // Debugging: Ensure ingredients are visible
     window.onload = function() {
         const items = document.querySelectorAll('.item-info');
         items.forEach(item => {
-            console.log("Item:", item.querySelector('h3').innerText);
             const ingredients = item.nextElementSibling.querySelectorAll('.ingredient');
             ingredients.forEach(ingredient => {
-                console.log("Ingredient Name:", ingredient.querySelector('p').innerText);
+                console.log("Ingredient:", ingredient.querySelector('p').innerText);
             });
         });
     }