create icon and cards improved

src/main/resources/static/css/explore.css

@@ -141,6 +141,27 @@ body, html {
   transition: transform 0.2s ease; 
 }
 
+.create_icon::after {
+  content: "Create a recipe";
+  display: none;
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  transform: translateX(-50%);
+  background: var(--dark-yellow);
+  color: var(--dusty-red);
+  font-family: 'Mali', cursive;
+  font-size: 0.85em;
+  font-weight: 600;
+  white-space: nowrap;
+  padding: 4px 10px;
+  border-radius: 10px;
+}
+
+.create_icon:hover::after {
+  display: block;
+}
+
 .create_icon:hover {
   transform: scale(1.02);
 }
@@ -262,6 +283,7 @@ input[type="text"]::placeholder {
   height: 50px;
   width: 50px;
   margin: 10px;
+  cursor: pointer;
 }
 
 .search-bar label { display: none; }

src/main/resources/static/css/home.css

@@ -141,6 +141,28 @@ body, html {
   transition: transform 0.2s ease; 
 }
 
+.create_icon::after {
+  content: "Create a recipe";
+  display: none;
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  transform: translateX(-50%);
+  background: var(--dark-yellow);
+  color: var(--dusty-red);
+  font-family: 'Mali', cursive;
+  font-size: 0.85em;
+  font-weight: 600;
+  white-space: nowrap;
+  padding: 4px 10px;
+  border-radius: 10px;
+}
+
+.create_icon:hover::after {
+  display: block;
+}
+
+
 .create_icon:hover {
   transform: scale(1.02);
 }

src/main/resources/static/css/my-profile.css

@@ -145,6 +145,27 @@ body, html {
   transition: transform 0.2s ease; 
 }
 
+.create_icon::after {
+  content: "Create a recipe";
+  display: none;
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  transform: translateX(-50%);
+  background: var(--dark-yellow);
+  color: var(--dusty-red);
+  font-family: 'Mali', cursive;
+  font-size: 0.85em;
+  font-weight: 600;
+  white-space: nowrap;
+  padding: 4px 10px;
+  border-radius: 10px;
+}
+
+.create_icon:hover::after {
+  display: block;
+}
+
 .create_icon:hover {
   transform: scale(1.02);
 }

src/main/resources/templates/explore.html

@@ -53,17 +53,19 @@
 			</div>
 			</form>
     	</div>
-        <div class="recipe-card">
+    	<p th:if="${#lists.isEmpty(recipes)}">There are no recipes that fit this description.</p>
 
+        <div class="recipe-card" th:unless="${#lists.isEmpty(recipes)}">
         	<a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card" th:each="recipe : ${recipes}">
             	<div class="card-text">
-                    <h2 th:text="${recipe.title}"></h2>
+               		<h2 th:text="${recipe.title}">Recipe Title</h2>
-                    <p th:text="${recipe.description}"></p>
+               		<p th:text="${recipe.description}">Description</p>
             	</div>
             	<div class="card-right">
-                <div th:each="img : ${recipe.images}">
+                	<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
-            		<img th:src="${img.imageUrl}" alt="Recipe Image"/>
+                    	<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
                 	</div>
+                	<p th:text="${recipe.cost}">Cost</p>
             	</div>
         	</a>
 		</div>	

src/main/resources/templates/home.html

@@ -39,15 +39,19 @@
     <main class="main-content">
         <div class="recipe-card">
 
+            <p th:if="${#lists.isEmpty(recipes)}">You have not saved any recipes.</p>
+
+        <div class="recipe-card" th:unless="${#lists.isEmpty(recipes)}">
         	<a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card" th:each="recipe : ${recipes}">
             	<div class="card-text">
-                    <h2 th:text="${recipe.title}"></h2>
+               		<h2 th:text="${recipe.title}">Recipe Title</h2>
-                    <p th:text="${recipe.description}"></p>
+               		<p th:text="${recipe.description}">Description</p>
             	</div>
             	<div class="card-right">
-                <div th:each="img : ${recipe.images}">
+                	<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
-            		<img th:src="${img.imageUrl}" alt="Recipe Image"/>
+                    	<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
                 	</div>
+                	<p th:text="${recipe.cost}">Cost</p>
             	</div>
         	</a>	
         </div>

src/main/resources/templates/public-profile.html

@@ -59,7 +59,6 @@
                 	<p th:text="${recipe.cost}">Cost</p>
             	</div>
         	</a>
-        	<a th:href="@{/recipes/{id}/edit(id=${recipe.id})}" class="edit-link">Edit</a>
         	</div>
     		</th:block>
 		</div>

src/main/resources/templates/update-recipe.html

@@ -0,0 +1,346 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+   	<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
+	<meta name="_csrf" th:content="${_csrf.token}"/>	
+    <title>Create Thyme Crunch Recipe</title>
+    <link rel="stylesheet" th:href="@{css/create-recipe.css}">
+    <link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
+</head>
+<body>
+
+<header class="top-header">
+    <img th:src="@{images/header_left.png}" alt="Violin f-hole shape to the left of header." class="swirl">
+    <h1 class="site-name">Thyme Crunch</h1>
+    <img th:src="@{images/header_right.png}" alt="Violin f-hole shape to the right of header." class="swirl">
+</header>
+
+<div class="form-wrap">
+<div class="form-split">
+
+  <!-- Main Content -->
+  <div class="form-section">
+    <div class="section-title">New Recipe</div>
+
+    <div class="field">
+      <label for="title">Title <span class="required">*</span></label>
+      <input type="text" id="title" placeholder="Your recipe title...">
+    </div>
+
+    <div class="field">
+      <label for="desc">Description <span class="required">*</span></label>
+      <textarea id="desc" rows="3" placeholder="Briefly describe your recipe. Who or where is it from?"></textarea>
+    </div>
+
+    <div class="field">
+  	  <label>Ingredients <span class="required">*</span></label>
+      <div id="ingredients-container"></div>
+      <button class="btn-add" id="add-ingredient-btn">+ Add ingredient</button>
+    </div>
+
+    <div class="field">
+      <label>Instructions <span class="required">*</span></label>
+      <div id="steps-container"></div>
+      <button class="btn-add" id="add-step-btn">+ Add step</button>
+    </div>
+    
+  </div>
+
+  <!-- Cover image / Right -->
+  <div class="form-section">
+    <div class="field">
+      <div class="image-drop" id="drop-zone">
+        <p class="upload-title">Click to upload or drag and drop an image.</p>
+      </div>
+      <div class="image-preview" id="preview">
+        <img id="preview-img" src="" alt="Cover preview">
+        <button class="remove-img" id="remove-img-btn">Remove</button>
+      </div>
+      <input type="file" id="img-input" accept="image/*" style="display: none;">
+    </div>
+    
+    <div class="field">
+      <label for="prep">Preparation Time: <span class="required">*</span></label>
+      <input type="text" id="prep" placeholder="0">
+    </div>
+    
+     <div class="field">
+      <label for="cooking">Cooking Time: <span class="required">*</span></label>
+      <input type="text" id="cooking" placeholder="0">
+    </div>
+    
+    <div class="field">
+      <label for="servings">Servings: <span class="required">*</span></label>
+      <input type="text" id="servings" placeholder="0">
+    </div>
+    
+     <div class="field">
+      <label for="cost">Estimated Cost: <span class="required">*</span></label>
+      <input type="text" id="cost" placeholder="0">
+    </div>
+  </div>
+  </div>
+
+  <!-- Tags -->
+  <div class="form-section">
+    
+    <div class="field">
+      <label>Tags</label>
+      <div class="tag-input-row">
+        <input type="text" id="tag-input" placeholder="Type in a tag and click Add">
+        <button class="btn" id="add-tag-btn">Add</button>
+      </div>
+      <div class="tag-wrap" id="tag-wrap"></div>
+    </div>
+  </div>
+
+  <div class="actions">
+    <button class="btn-create" id="publish-btn">CREATE</button>
+  </div>
+
+</div>
+
+<script>
+
+// ---- Ingredients ----
+const ingredientContainer = document.getElementById('ingredients-container');
+document.getElementById('add-ingredient-btn').addEventListener('click', addIngredient);
+addIngredient(); // start with one
+
+function addIngredient() {
+  const row = document.createElement('div');
+  row.className = 'dynamic-row';
+  row.innerHTML = `
+	  <input type="text" class="ing-name" placeholder="Ingredient (e.g. Sugar)">
+	  <input type="text" class="ing-qty" placeholder="Qty (e.g. 3)">
+	  <input type="text" class="ing-unit" placeholder="Unit (e.g. tbsp)">
+	  <input type="text" class="ing-notes" placeholder="Notes (optional)">
+    <button class="btn-remove" title="Remove">✕</button>`;
+  row.querySelector('.btn-remove').addEventListener('click', () => {
+    row.remove();
+  });
+  ingredientContainer.appendChild(row);
+}
+
+// ---- Steps ----
+const stepsContainer = document.getElementById('steps-container');
+document.getElementById('add-step-btn').addEventListener('click', addStep);
+addStep(); // start with one
+
+function addStep() {
+  const row = document.createElement('div');
+  row.className = 'dynamic-row';
+  row.innerHTML = `
+    <div class="step-bubble">?</div>
+    <textarea placeholder="Describe this step..."></textarea>
+    <button class="btn-remove" title="Remove">✕</button>
+  `;
+  row.querySelector('.btn-remove').addEventListener('click', () => {
+    row.remove();
+    renumberSteps();
+  });
+  stepsContainer.appendChild(row);
+  renumberSteps();
+}
+
+function renumberSteps() {
+  stepsContainer.querySelectorAll('.step-bubble').forEach((bubble, i) => {
+    bubble.textContent = i + 1;
+  });
+}
+
+// ---- Collecting on submit ----
+// Call this wherever you build your POST payload:
+function getIngredients() {
+  return [...ingredientContainer.querySelectorAll('.dynamic-row')].map(row => {
+	qtyValue = row.querySelector('.ing-qty').value.trim(); // quantity should be a number NOT A STRING
+    return {
+      ingredient: {
+        name: row.querySelector('.ing-name').value.trim()
+      },
+      quantity: Number(qtyValue),
+      unit: row.querySelector('.ing-unit').value.trim(),
+      notes: row.querySelector('.ing-notes').value.trim()
+    };
+  }).filter(item => item.ingredient.name);
+}
+
+
+function getSteps() {
+  return [...stepsContainer.querySelectorAll('textarea')]
+    .map((el, i) => ({ step_number: i + 1, instruction: el.value.trim() }))
+    .filter(item => item.instruction);
+}
+
+// --- Image upload ---
+const dropZone = document.getElementById('drop-zone');
+const imgInput = document.getElementById('img-input');
+
+dropZone.addEventListener('click', () => imgInput.click());
+
+imgInput.addEventListener('change', function () {
+  if (!this.files || !this.files[0]) return;
+  const url = URL.createObjectURL(this.files[0]);
+  document.getElementById('preview-img').src = url;
+  dropZone.style.display = 'none';
+  document.getElementById('preview').style.display = 'block';
+});
+
+document.getElementById('remove-img-btn').addEventListener('click', function () {
+  imgInput.value = '';
+  document.getElementById('preview').style.display = 'none';
+  dropZone.style.display = 'block';
+});
+
+// --- Tags ---
+const tags = [];
+
+document.getElementById('tag-input').addEventListener('keydown', function (e) {
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    addTag();
+  }
+});
+
+document.getElementById('add-tag-btn').addEventListener('click', addTag);
+
+function addTag() {
+  const input = document.getElementById('tag-input');
+  const val = input.value.trim().toLowerCase().replace(/\s+/g, '-');
+  if (!val || tags.includes(val)) { input.value = ''; return; }
+  tags.push(val);
+  input.value = '';
+  renderTags();
+}
+
+function removeTag(t) {
+  tags.splice(tags.indexOf(t), 1);
+  renderTags();
+}
+
+function renderTags() {
+  document.getElementById('tag-wrap').innerHTML = tags
+    .map(t => `<div class="tag">${t} <span class="remove-tag" data-tag="${t}">✕</span></div>`)
+    .join('');
+
+  document.querySelectorAll('.remove-tag').forEach(btn => {
+    btn.addEventListener('click', () => removeTag(btn.dataset.tag));
+  });
+}
+
+async function getLoggedInUser() {
+    try {
+        const res = await fetch('http://localhost:8080/api/users/me', {
+            credentials: 'include'
+        });
+        if (!res.ok) throw new Error('Failed to get logged-in user');
+        return await res.json();
+    } catch (err) {
+        console.error('Error fetching user:', err);
+        return null;
+    }
+}
+
+function buildRecipeJSON(user) {
+    const title = document.getElementById('title').value.trim();
+    const description = document.getElementById('desc').value.trim();
+    const prepTimeMinutes = Number(document.getElementById('prep').value);
+    const cookTimeMinutes = Number(document.getElementById('cooking').value);
+    const servings = Number(document.getElementById('servings').value);
+    const status = "DRAFT";
+    const cost = Number(document.getElementById('cost').value);
+
+    // Ingredients
+    const recipeIngredients = [...document.querySelectorAll('#ingredients-container .dynamic-row')]
+        .map(row => {
+            const qtyValue = Number(row.querySelector('.ing-qty').value.trim());
+            return {
+                ingredient: { name: row.querySelector('.ing-name').value.trim() },
+                quantity: qtyValue,
+                unit: row.querySelector('.ing-unit').value.trim(),
+                notes: row.querySelector('.ing-notes').value.trim()
+            };
+        })
+        .filter(item => item.ingredient.name);
+
+    // Steps
+    const steps = [...document.querySelectorAll('#steps-container textarea')]
+        .map((el, i) => ({ stepNumber: i + 1, instruction: el.value.trim() }))
+        .filter(item => item.instruction);
+
+    // Images
+
+
+    // Tags
+    const tagsInput = tags;
+    const tagsArray = tagsInput.map(t => ({ name: t }));
+
+    return {
+        title,
+        description,
+        prepTimeMinutes,
+        cookTimeMinutes,
+        servings,
+        status,
+        cost,
+        user,
+        recipeIngredients,
+        steps,
+        //images,
+        tags: tagsArray
+    };
+}
+
+
+document.getElementById('publish-btn').addEventListener('click', async function(e) {
+    e.preventDefault();
+
+    const user = await getLoggedInUser();
+    if (!user) {
+        alert("Unable to fetch logged-in user. Please refresh and try again.");
+        return;
+    }
+
+    console.log("Logged-in user:", user);
+    const recipeJSON = buildRecipeJSON(user);
+    console.log("Recipe JSON to submit:", JSON.stringify(recipeJSON, null, 2));
+
+    try {
+		
+    	const csrfToken = document.querySelector('meta[name="_csrf"]').getAttribute('content');
+    	const csrfHeader = document.querySelector('meta[name="_csrf_header"]').getAttribute('content');
+    	
+
+
+    	const res = await fetch('http://localhost:8080/api/recipes', {
+    	    method: 'POST',
+    	    headers: {
+    	    	[csrfHeader]: csrfToken,
+    	        'Content-Type': 'application/json'
+    	    },
+    	    body: JSON.stringify(recipeJSON),
+    	    credentials: 'include'
+    	});
+
+    	if (res.ok) {
+            const data = await res.json();
+            console.log("Recipe created:", data);
+            alert("Recipe created successfully!");
+        } else {
+            const errorData = await res.json();
+            console.error("Validation errors:", errorData);
+
+            
+            const firstError = Object.values(errorData)[0];
+            alert(firstError);
+        }
+    } catch (err) {
+        console.error("Network error:", err);
+        alert("Network error. Check console for details.");
+    }
+});
+
+</script>
+</body>
+</html>