user dashboard user fav tab user view profile upgrade

scripts/userDashboard.js

@@ -785,7 +785,7 @@ async function fetchData(key = 0) {
 
 const openRecipeDetailPage = (id) => {
     const recipeDetailURL = `userRecipeDetail.html?id=${id}`;
-    console.log("Girdi");
+    console.log("Girdi");    
     // Perform any additional actions before navigating, if needed
     // For example, you might want to validate the id or perform some asynchronous tasks
     window.location.href = recipeDetailURL;

scripts/userFavTab.js

@@ -32,16 +32,42 @@ async function displayFavRecipes() {
       cardDiv.classList.add('card');
       const truncatedDescription = truncateDescription(item.description);
       const cardContent = `
-        <img src="${item.photoPath}" alt="${item.title}">
+      <img src="${item.photoPath ? item.photoPath : (item.userRecipePhoto ? item.userRecipePhoto : 'default/path/to/image.jpg')}" alt="${item.title}">
+
         <div class="info">
           <h1>${item.title}</h1>
           <p>${truncatedDescription}</p>
-          <button>Read More</button>
+          <button class="read-more-btn" ">Read More</button>
         </div>
       `;
       cardDiv.innerHTML = cardContent;
       cardsContainer.appendChild(cardDiv);
     });
+
+    const openRecipeDetailPage = (id) => {
+      const recipeDetailURL = `recipeDetail.html?id=${id}`;
+      // Perform any additional actions before navigating, if needed
+      // For example, you might want to validate the id or perform some asynchronous tasks
+      window.location.href = recipeDetailURL;
+  };
+
+  // Adding event listeners to the "Read More" buttons
+  document.querySelectorAll('.read-more-btn').forEach(button => {
+      button.addEventListener('click', () => {
+          const recipeId = button.getAttribute('data-id');
+          openRecipeDetailPage(recipeId);
+      });
+  });
+
+  // Assuming you have an element with class "link" for the event listener
+  const link = document.querySelector('.link');
+  // Adding event listener to the link
+  link.addEventListener('click', () => {
+      // Here you should get the ID from your data, in this example let's assume you have it as "recipeId"
+      const recipeId = recipe.recipe.id; // Adjust this according to your data structure
+      openRecipeDetailPage(recipeId);
+  });
+
   } catch (error) {
     console.error('Error displaying favorite recipes:', error);
   }

styles/userEditProfile.css

@@ -25,9 +25,10 @@
     border-radius: 5px;
     margin-bottom: 5px; 
     cursor: pointer;
-    margin-left: 250px;
+    margin-top: 15px;
     vertical-align:middle;
     margin-bottom:10px;
+
 }
 
 /* Checkbox input - checked state */

styles/userFavTab.css

@@ -176,8 +176,9 @@
   }
 
   h1 {
-    color: var(--light_purple);
+    color:#363b4e;
     font-size: 40px;
+    -webkit-text-stroke: 0.25px white; /* WebKit tarayıcılar için */
   }
 
   ul {

styles/userViewProfile.css

@@ -169,6 +169,12 @@ body {
     height: auto; /* Maintain aspect ratio */
     margin-right: 20px; /* Space between photo and details */
 }
+@media only screen and (max-width: 600px) {
+    .recipe-photo {
+        width: 100%;
+        margin-right: 10px;
+    }
+}
 
 .photo-title-container {
     display: flex;

templates/userFavTab.html

@@ -17,7 +17,7 @@
         <button id="back-arrow-button">
           <ion-icon class="back-arrow" name="chevron-back-circle-outline"></ion-icon>
         </button>
-            <h1 class="header-title" style="margin-left:650px;">Favorite Recipes</h1>
+            <h1 class="header-title" style="margin-left:650px; color: #c4bbf0;  -webkit-text-stroke: 0;">Favorite Recipes</h1>
       </div>
   </div>
 </header>