detail pages

scripts/addNewRecipeToBook.js

@@ -53,7 +53,7 @@ async function saveRecipe(recipeData) {
 
 async function saveRecipetoAIdataSet(body, id) {
     try {
-        const apiUrl = 'https://recipieai.azurewebsites.net/add-recipe-to-dataset';
+        const apiUrl = 'http://127.0.0.1:5000/add-recipe-to-dataset';
         const photoPathURL = await getPhotoPathURL(id);
         const new_body = { ...body, photoPathURL };
 

scripts/recipeDetail.js

@@ -107,7 +107,7 @@ class RecipeDetail {
 
         // Update cuisine
         const cuisineElement = document.getElementById('recipe-cuisine');
-        if (selectedRecipe.cuisine) {
+        if (selectedRecipe.cuisine && selectedRecipe.cuisine.length > 1) {
             cuisineElement.innerHTML = `<p>${selectedRecipe.cuisine}</p>`;
         } else {
             cuisineElement.innerHTML = '<p>No cuisine information available</p>';

scripts/userRecipeDetail.js

@@ -84,7 +84,7 @@ class RecipeDetail {
         }
 
         const cuisineElement = document.getElementById('recipe-cuisine');
-        if (selectedRecipe.cuisine) {
+        if (selectedRecipe.cuisine && !selectedRecipe.cuisine.length > 1) {
             cuisineElement.innerHTML = `<p>${selectedRecipe.cuisine}</p>`;
         } else {
             cuisineElement.innerHTML = '<p>No cuisine information available</p>';

styles/recipeDetail.css

@@ -6,7 +6,6 @@
     --background_color: rgb(205, 199, 208);
 }
 
-
 body {
     font-family: Arial, sans-serif;
     font-size: larger;
@@ -22,28 +21,41 @@ header {
     padding: 1em;
 }
 
+
+.recipe-ingredients,
+.recipe-description,
+.recipe-cuisine,
+.recipe-meal,
+.recipe-prep-time {
+    margin-bottom: 20px;
+    padding: 10px;
+    box-shadow: inset 0 0 30px rgba(48, 3, 42, 0.1);
+    border-radius: 10px;
+    text-align: justify;
+}
+
 .recipe-container {
     max-width: 800px;
     margin: 20px auto;
     background-color: #fff;
     padding: 20px;
     border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
 }
 
 .recipe-image {
     max-width: 100%;
     height: auto;
     border-radius: 8px;
     margin-bottom: 20px;
+    max-width: 500px;
+    max-height: 500px;
+    object-fit: cover;
+    border-radius: 5px;
 }
 
-.recipe-ingredients {
-    margin-bottom: 20px;
-}
-
-.recipe-description {
-    line-height: 1.6;
+h2 {
+    color: var(--dark_purple);
 }
 
 #header-container {
@@ -107,6 +119,6 @@ header {
     font-weight: bold;
 }
 
-.highlight{
+.highlight {
     color: red;
-}
+}

styles/userRecipeDetail.css

@@ -7,6 +7,11 @@
 }
 
 
+h2 {
+    color: var(--dark_purple);
+}
+
+
 body {
     font-family: Arial, sans-serif;
     font-size: larger;
@@ -31,6 +36,18 @@ header {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
+.recipe-ingredients,
+.recipe-description,
+.recipe-cuisine,
+.recipe-meal,
+.recipe-prep-time {
+    margin-bottom: 20px;
+    padding: 10px;
+    box-shadow: inset 0 0 30px rgba(48, 3, 42, 0.1);
+    border-radius: 10px;
+    text-align: justify;
+}
+
 .recipe-image {
     max-width: 100%;
     height: auto;

templates/recipeDetail.html

@@ -21,8 +21,9 @@ <h1 id="recipe-title">Loading...</h1>
     <div class="recipe-container">
         <img src="recipe-photo.jpg" alt="Delicious Recipe" class="recipe-image">
 
+        <h2>Ingredients</h2>
         <div class="recipe-ingredients" id="recipe-ingredients">
-            <h2>Ingredients</h2>
+
             <ul>
             </ul>
         </div>

templates/userRecipeDetail.html

@@ -21,8 +21,8 @@ <h1 id="recipe-title">Loading...</h1>
     <div class="recipe-container">
         <img src="recipe-photo.jpg" alt="Delicious Recipe" class="recipe-image">
 
-        <div class="recipe-ingredients" id="recipe-ingredients">
-            <h2>Ingredients</h2>
+        <h2>Ingredients</h2>
+        <div class="recipe-ingredients" id="recipe-ingredients">  
             <ul>
             </ul>
         </div>