From 7d59e99f7d060dcf76894f336f904c2c7e0838f2 Mon Sep 17 00:00:00 2001
From: Madeleine Stamp <madeleine.stamp@student.nmt.edu>
Date: Sun, 19 Apr 2026 10:06:02 -0600
Subject: [PATCH] Update 3 files

- /src/main/resources/templates/explore.html
- /src/main/resources/templates/my-profile.html
- /src/main/resources/templates/public-profile.html
---
 src/main/resources/templates/explore.html     | 392 +++++++++++-------
 src/main/resources/templates/my-profile.html  | 107 ++++-
 .../resources/templates/public-profile.html   | 238 +++--------
 3 files changed, 381 insertions(+), 356 deletions(-)
diff --git a/src/main/resources/templates/explore.html b/src/main/resources/templates/explore.html
index bdb17b0..4c72f0e 100644
--- a/src/main/resources/templates/explore.html
+++ b/src/main/resources/templates/explore.html
@@ -2,194 +2,268 @@
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
-    <title>Explore Recipes</title>
+    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
+    <meta name="_csrf" th:content="${_csrf.token}"/>
+    <title>Thyme Crunch Home</title>
+    <link rel="stylesheet" th:href="@{css/explore.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">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
+
+    <style>
+        .sidebar-right {
+            max-height: 85vh;
+            overflow-y: auto;
+            box-sizing: border-box;
+            padding-bottom: 25px;
+            padding-right: 12px;
+        }
+
+        .sidebar-right label {
+            display: inline-block;
+            margin-bottom: 8px;
+        }
+
+        .sidebar-right h3:last-of-type {
+            margin-top: 35px;
+        }
+    </style>
 </head>
 <body>
-    <h1>Explore Recipes</h1>
 
-    <nav>
-        <a th:href="@{/}">Home</a> |
-        <a th:href="@{/explore}">Explore</a> |
-        <a th:href="@{/my-profile}">Profile</a>
-    </nav>
+<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>
 
-    <form id="search-form" th:action="@{/explore}" method="get">
-        <input type="text" id="site-search" name="q" th:value="${q}" placeholder="Search recipes">
-        <button type="submit">Search</button>
-
-        <h3>Prep Time</h3>
-        <label>
-            <input type="checkbox" name="prepTime" value="15"> &lt;15 min
-        </label><br>
-        <label>
-            <input type="checkbox" name="prepTime" value="30"> 15~30 min
-        </label><br>
-        <label>
-            <input type="checkbox" name="prepTime" value="60"> 30~60 min
-        </label><br>
-        <label>
-            <input type="checkbox" name="prepTime" value="240"> 1~4 hours
-        </label><br>
-        <label>
-            <input type="checkbox" name="prepTime" value="241"> 4+ hours
-        </label>
-
-        <h3>Cook Time</h3>
-        <label>
-            <input type="checkbox" name="cookTime" value="15"> &lt;15 min
-        </label><br>
-        <label>
-            <input type="checkbox" name="cookTime" value="30"> 15~30 min
-        </label><br>
-        <label>
-            <input type="checkbox" name="cookTime" value="60"> 30~60 min
-        </label><br>
-        <label>
-            <input type="checkbox" name="cookTime" value="120"> 1~2 hours
-        </label><br>
-        <label>
-            <input type="checkbox" name="cookTime" value="121"> 2+ hours
-        </label>
-
-        <h3>Price</h3>
-        <label>
-            <input type="checkbox" name="price" value="1"> $
-        </label><br>
-        <label>
-            <input type="checkbox" name="price" value="2"> $$
-        </label><br>
-        <label>
-            <input type="checkbox" name="price" value="3"> $$$
-        </label><br>
-        <label>
-            <input type="checkbox" name="price" value="4"> $$$$
-        </label>
-    </form>
-
-    <div th:if="${#lists.isEmpty(recipes)}">
-        <p>No recipes found.</p>
+<div class="body">
+    <!--Navigation Bar -->
+    <div class="body-left">
+        <nav class="sidebar-left">
+            <ul>
+                <li><a th:href="@{/}">Home</a></li>
+                <li><a th:href="@{/explore}">Explore</a></li>
+                <li><a th:href="@{/my-profile}">Profile</a></li>
+                <li><a href="#">Saved</a></li>
+                <li>
+                    <form th:action="@{/logout}" method="post">
+                        <input type="image" th:src="@{images/logout_icon.png}" alt="Logout button" class="nav_icon"/>
+                    </form>
+                </li>
+            </ul>
+        </nav>
+        <a th:href="@{/create}" target="_blank" class="create_icon">
+            <img th:src="@{images/create_icon.png}" alt="Create New Recipe Icon (Red mixing bowl with a spoon and yellow addition symbol.)">
+        </a>
     </div>
 
-    <div th:unless="${#lists.isEmpty(recipes)}">
-        <div th:each="recipe : ${recipes}" style="margin-bottom: 20px; border: 1px solid #ccc; padding: 10px;">
-            <h3>
-                <a th:href="@{/recipes/{id}(id=${recipe.id})}" th:text="${recipe.title}">Recipe Title</a>
-            </h3>
+    <!-- Main Content -->
+    <main class="main-content">
+        <div class="search-bar">
+            <form id="search-form" th:action="@{/explore}" method="get">
+                <label for="site-search">Search:</label>
+                <div class="search-btn">
+                    <input type="search" id="site-search" name="q" th:value="${q}" placeholder="Search for recipes...">
+                    <button type="submit"><i class="fa fa-search"></i></button>
+                </div>
+            </form>
+        </div>
 
-            <p>
-                <strong>Author:</strong>
-                <a th:href="@{/users/{id}(id=${recipe.userDto.id})}"
-                   th:text="${recipe.userDto.displayName != null and !#strings.isEmpty(recipe.userDto.displayName) ? recipe.userDto.displayName : recipe.userDto.username}">
-                    Author Name
-                </a>
-            </p>
+        <div class="recipe-card">
+            <a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card" th:each="recipe : ${recipes}">
+                <div class="card-text">
+                    <h2 th:text="${recipe.title}"></h2>
 
-            <p th:text="${recipe.description}">Recipe description</p>
+                    <p class="recipe-author">
+                        <strong>Author:</strong>
+                        <span th:text="${recipe.userDto.displayName != null and !#strings.isEmpty(recipe.userDto.displayName) ? recipe.userDto.displayName : recipe.userDto.username}"></span>
+                    </p>
 
-            <p>
-                <strong>Prep:</strong> <span th:text="${recipe.prepTimeMinutes}">0</span> min |
-                <strong>Cook:</strong> <span th:text="${recipe.cookTimeMinutes}">0</span> min |
-                <strong>Servings:</strong> <span th:text="${recipe.servings}">0</span> |
-                <strong>Cost:</strong> <span th:text="${recipe.cost}">0</span>
-            </p>
+                    <p>
+                        <span
+                            th:attr="data-user-id=${recipe.userDto.id}"
+                            onclick="event.preventDefault(); event.stopPropagation(); window.location.href='/users/' + this.dataset.userId;"
+                            style="text-decoration: underline; cursor: pointer;">
+                            View Author Profile
+                        </span>
+                    </p>
 
-            <div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
-                <img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image" style="max-width: 200px;">
-            </div>
+                    <p th:text="${recipe.description}"></p>
+                </div>
 
-            <p><a th:href="@{/recipes/{id}(id=${recipe.id})}">View Recipe</a></p>
+                <div class="card-right">
+                    <div th:each="img : ${recipe.images}">
+                        <img th:src="${img.imageUrl}" alt="Recipe Image"/>
+                    </div>
+                </div>
+            </a>
+        </div>
+    </main>
+
+    <!--Filter -->
+    <div class="body-right">
+        <div class="sidebar-right">
+            <h1> FILTER </h1>
+            <form id="filter-form">
+                <h3>Prep Time</h3>
+
+                <label>
+                    <input type="checkbox" name="prepTime" value="15">&lt;15 min
+                </label><br>
+                <label>
+                    <input type="checkbox" name="prepTime" value="30">15~30 min
+                </label><br>
+
+                <label>
+                    <input type="checkbox" name="prepTime" value="60">30~60 min
+                </label><br>
+
+                <label>
+                    <input type="checkbox" name="prepTime" value="240">1~4 hours
+                </label><br>
+
+                <label>
+                    <input type="checkbox" name="prepTime" value="241">4+ hours
+                </label>
+
+                <h3>Cook Time</h3>
+
+                <label>
+                    <input type="checkbox" name="cookTime" value="15">&lt;15 min
+                </label><br>
+                <label>
+                    <input type="checkbox" name="cookTime" value="30">15~30 min
+                </label><br>
+
+                <label>
+                    <input type="checkbox" name="cookTime" value="60">30~60 min
+                </label><br>
+
+                <label>
+                    <input type="checkbox" name="cookTime" value="120">1~2 hours
+                </label><br>
+
+                <label>
+                    <input type="checkbox" name="cookTime" value="121">2+ hours
+                </label>
+
+                <h3>Price</h3>
+
+                <label>
+                    <input type="checkbox" name="price" value="1"> $
+                </label><br>
+
+                <label>
+                    <input type="checkbox" name="price" value="2"> $$
+                </label><br>
+
+                <label>
+                    <input type="checkbox" name="price" value="3"> $$$
+                </label><br>
+
+                <label>
+                    <input type="checkbox" name="price" value="4"> $$$$
+                </label>
+            </form>
         </div>
     </div>
+</div>
 
-    <script>
-    (function () {
-        const input = document.getElementById('site-search');
-        const tags = [];
-        const params = new URLSearchParams(window.location.search);
+<script>
+(function () {
+    const input = document.getElementById('site-search');
+    const tags = [];
 
-        params.getAll('prices').forEach(p => {
-            const cb = document.querySelector(`input[name="price"][value="${p}"]`);
-            if (cb) cb.checked = true;
-        });
+    const params = new URLSearchParams(window.location.search);
 
-        params.getAll('cookTime').forEach(p => {
-            const cb = document.querySelector(`input[name="cookTime"][value="${p}"]`);
-            if (cb) cb.checked = true;
-        });
+    params.getAll('prices').forEach(p => {
+        const cb = document.querySelector(`input[name="price"][value="${p}"]`);
+        if (cb) cb.checked = true;
+    });
 
-        params.getAll('prepTime').forEach(p => {
-            const cb = document.querySelector(`input[name="prepTime"][value="${p}"]`);
-            if (cb) cb.checked = true;
-        });
+    params.getAll('cookTime').forEach(p => {
+        const cb = document.querySelector(`input[name="cookTime"][value="${p}"]`);
+        if (cb) cb.checked = true;
+    });
 
-        params.getAll('tags').forEach(addChip);
+    params.getAll('prepTime').forEach(p => {
+        const cb = document.querySelector(`input[name="prepTime"][value="${p}"]`);
+        if (cb) cb.checked = true;
+    });
 
-        input.addEventListener('keydown', (e) => {
-            if ((e.key === ' ' || e.key === 'Enter') && input.value.includes('#')) {
-                const val = input.value + ' ';
-                const match = val.match(/(^|\s)(#\w+)(\s)/);
-                if (match) {
-                    e.preventDefault();
-                    addChip(match[2].substring(1));
-                    input.value = val.replace(match[0], '');
-                    input.value += ' ';
-                }
+    params.getAll('tags').forEach(addChip);
+
+    input.addEventListener('keydown', (e) => {
+        if ((e.key === ' ' || e.key === 'Enter') && input.value.includes('#')) {
+            const val = input.value + ' ';
+            const match = val.match(/(^|\s)(#\w+)(\s)/);
+            if (match) {
+                e.preventDefault();
+                addChip(match[2].substring(1));
+                input.value = val.replace(match[0], '');
+                input.value += ' ';
             }
+        }
+    });
+
+    document.querySelectorAll('input[name="price"]').forEach(cb => {
+        cb.addEventListener('change', submitSearch);
+    });
+
+    document.querySelectorAll('input[name="cookTime"]').forEach(cb => {
+        cb.addEventListener('change', submitSearch);
+    });
+
+    document.querySelectorAll('input[name="prepTime"]').forEach(cb => {
+        cb.addEventListener('change', submitSearch);
+    });
+
+    document.getElementById('search-form').addEventListener('submit', (e) => {
+        e.preventDefault();
+        submitSearch();
+    });
+
+    function addChip(tag) {
+        if (tags.includes(tag)) return;
+        tags.push(tag);
+
+        const chip = document.createElement('span');
+        chip.className = 'tag-chip';
+        chip.innerHTML = `#${tag} <button type="button" aria-label="Remove ${tag}">×</button>`;
+
+        chip.querySelector('button').addEventListener('click', () => {
+            chip.remove();
+            tags.splice(tags.indexOf(tag), 1);
         });
 
-        document.querySelectorAll('input[name="price"]').forEach(cb => {
-            cb.addEventListener('change', submitSearch);
-        });
-
-        document.querySelectorAll('input[name="cookTime"]').forEach(cb => {
-            cb.addEventListener('change', submitSearch);
-        });
-
-        document.querySelectorAll('input[name="prepTime"]').forEach(cb => {
-            cb.addEventListener('change', submitSearch);
-        });
-
-        document.getElementById('search-form').addEventListener('submit', (e) => {
-            e.preventDefault();
-            submitSearch();
-        });
-
-        function addChip(tag) {
-            if (tags.includes(tag)) return;
-            tags.push(tag);
-
-            const chip = document.createElement('span');
-            chip.className = 'tag-chip';
-            chip.innerHTML = `#${tag} <button type="button" aria-label="Remove ${tag}">×</button>`;
-
-            chip.querySelector('button').addEventListener('click', () => {
-                chip.remove();
-                tags.splice(tags.indexOf(tag), 1);
-                submitSearch();
-            });
-
+        const lastChip = input.parentElement.querySelector('.tag-chip:last-of-type');
+        if (lastChip) {
+            lastChip.insertAdjacentElement('afterend', chip);
+        } else {
             input.insertAdjacentElement('afterend', chip);
         }
+    }
 
-        function submitSearch() {
-            const cleanedQuery = input.value.replace(/#\w+/g, '').trim();
-            const out = new URLSearchParams();
+    function submitSearch() {
+        const cleanedQuery = input.value.replace(/#\w+/g, '').trim();
 
-            if (cleanedQuery) out.set('q', cleanedQuery);
-            tags.forEach(t => out.append('tags', t));
+        const out = new URLSearchParams();
+        if (cleanedQuery) out.set('q', cleanedQuery);
+        tags.forEach(t => out.append('tags', t));
 
-            document.querySelectorAll('input[name="price"]:checked')
-                .forEach(cb => out.append('prices', cb.value));
+        document.querySelectorAll('input[name="price"]:checked')
+            .forEach(cb => out.append('prices', cb.value));
 
-            document.querySelectorAll('input[name="cookTime"]:checked')
-                .forEach(cb => out.append('cookTime', cb.value));
+        document.querySelectorAll('input[name="cookTime"]:checked')
+            .forEach(cb => out.append('cookTime', cb.value));
 
-            document.querySelectorAll('input[name="prepTime"]:checked')
-                .forEach(cb => out.append('prepTime', cb.value));
+        document.querySelectorAll('input[name="prepTime"]:checked')
+            .forEach(cb => out.append('prepTime', cb.value));
+
+        window.location.href = '/explore?' + out.toString();
+    }
+})();
+</script>
 
-            window.location.href = '/explore?' + out.toString();
-        }
-    })();
-    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/my-profile.html b/src/main/resources/templates/my-profile.html
index 3784d47..3924536 100644
--- a/src/main/resources/templates/my-profile.html
+++ b/src/main/resources/templates/my-profile.html
@@ -2,42 +2,105 @@
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
-    <title>My Profile</title>
+    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
+    <meta name="_csrf" th:content="${_csrf.token}"/>
+    <title>My Profile - Thyme Crunch</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>
-    <h1>My Profile</h1>
 
-    <p><strong>Username:</strong> <span th:text="${profile.username}">username</span></p>
-    <p>
-        <strong>Public Profile:</strong>
-        <a th:href="@{/users/{id}(id=${profile.id})}">View my public profile</a>
-    </p>
+<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>
 
-    <h2>Edit Profile</h2>
-    <form th:action="@{/my-profile/update}" method="post" th:object="${updateProfileDto}">
-        <div>
-            <label for="displayName">Screen Name</label><br>
-            <input type="text" id="displayName" th:field="*{displayName}" maxlength="100">
-        </div>
+<div class="form-wrap">
+    <div class="form-split">
+
+        <h1>My Profile</h1>
+
+        <nav>
+            <a th:href="@{/}">Home</a> |
+            <a th:href="@{/explore}">Explore</a> |
+            <a th:href="@{/my-profile}">Profile</a>
+        </nav>
 
         <br>
 
-        <div>
-            <label for="bio">Bio</label><br>
-            <textarea id="bio" th:field="*{bio}" rows="6" cols="50" maxlength="1000"></textarea>
-        </div>
+        <p>
+            <strong>Username:</strong>
+            <span th:text="${profile.username}">username</span>
+        </p>
+
+        <p>
+            <strong>Public Profile:</strong>
+            <a th:href="@{/users/{id}(id=${profile.id})}">View my public profile</a>
+        </p>
+
+        <h2>Edit Profile</h2>
+
+        <form th:action="@{/my-profile/update}" method="post" th:object="${updateProfileDto}">
+            <div class="rows">
+                <label for="displayName">Screen Name</label>
+                <input type="text" id="displayName" th:field="*{displayName}" maxlength="100">
+            </div>
+
+            <div class="rows">
+                <label for="bio">Bio</label>
+                <textarea id="bio" th:field="*{bio}" rows="6" maxlength="1000"></textarea>
+            </div>
+
+            <button type="submit">Save Profile</button>
+        </form>
 
         <br>
 
-        <button type="submit">Save Profile</button>
-    </form>
+        <h2>My Recipes</h2>
 
-    <h2>My Recipes</h2>
+        <div th:if="${#lists.isEmpty(profile.recipes)}">
+            <p>You have not created any recipes yet.</p>
+        </div>
+
+        <div th:unless="${#lists.isEmpty(profile.recipes)}">
+            <div th:each="recipe : ${profile.recipes}" class="recipe-block" style="margin-bottom: 20px;">
+                <h3 th:text="${recipe.title}">Recipe Title</h3>
+
+                <p>
+                    <strong>Author:</strong>
+                    <a th:href="@{/users/{id}(id=${recipe.userDto.id})}"
+                       th:text="${recipe.userDto.displayName != null and !#strings.isEmpty(recipe.userDto.displayName) ? recipe.userDto.displayName : recipe.userDto.username}">
+                        Author Name
+                    </a>
+                </p>
+
+                <p th:text="${recipe.description}">Recipe description</p>
+
+                <p>
+                    <strong>Prep:</strong> <span th:text="${recipe.prepTimeMinutes}">0</span> min |
+                    <strong>Cook:</strong> <span th:text="${recipe.cookTimeMinutes}">0</span> min |
+                    <strong>Servings:</strong> <span th:text="${recipe.servings}">0</span> |
+                    <strong>Cost:</strong> <span th:text="${recipe.cost}">0</span>
+                </p>
+
+                <div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
+                    <img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image" style="max-width: 200px;">
+                </div>
+
+                <p>
+                    <a th:href="@{/recipes/{id}(id=${recipe.id})}">View Recipe</a>
+                    |
+                    <a th:href="@{/recipes/{id}/edit(id=${recipe.id})}">Edit Recipe</a>
+                </p>
+            </div>
+        </div>
 
-    <div th:if="${#lists.isEmpty(profile.recipes)}">
-        <p>You have not created any recipes yet.</p>
     </div>
+</div>
 
+</body>
+</html>
     <div th:unless="${#lists.isEmpty(profile.recipes)}">
         <div th:each="recipe : ${profile.recipes}" style="margin-bottom: 20px; border: 1px solid #ccc; padding: 10px;">
             <h3 th:text="${recipe.title}">Recipe Title</h3>
diff --git a/src/main/resources/templates/public-profile.html b/src/main/resources/templates/public-profile.html
index 6bc91c8..baa8b4f 100644
--- a/src/main/resources/templates/public-profile.html
+++ b/src/main/resources/templates/public-profile.html
@@ -2,194 +2,82 @@
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
-    <title>Explore Recipes</title>
+    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
+    <meta name="_csrf" th:content="${_csrf.token}"/>
+    <title>Public Profile - Thyme Crunch</title>
+<!--<link rel="stylesheet" th:href="@{css/public-profile.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>
-    <h1>Explore Recipes</h1>
 
-    <nav>
-        <a th:href="@{/}">Home</a> |
-        <a th:href="@{/explore}">Explore</a> |
-        <a th:href="@{/my-profile}">Profile</a>
-    </nav>
+<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>
 
-    <form id="search-form" th:action="@{/explore}" method="get">
-        <input type="text" id="site-search" name="q" th:value="${q}" placeholder="Search recipes">
-        <button type="submit">Search</button>
+<div class="form-wrap">
+    <div class="form-split">
 
-        <h3>Prep Time</h3>
-        <label>
-            <input type="checkbox" name="prepTime" value="15"> &lt;15 min
-        </label><br>
-        <label>
-            <input type="checkbox" name="prepTime" value="30"> 15~30 min
-        </label><br>
-        <label>
-            <input type="checkbox" name="prepTime" value="60"> 30~60 min
-        </label><br>
-        <label>
-            <input type="checkbox" name="prepTime" value="240"> 1~4 hours
-        </label><br>
-        <label>
-            <input type="checkbox" name="prepTime" value="241"> 4+ hours
-        </label>
+        <h1 th:text="${profile.displayName != null and !#strings.isEmpty(profile.displayName) ? profile.displayName : profile.username}">
+            Display Name
+        </h1>
 
-        <h3>Cook Time</h3>
-        <label>
-            <input type="checkbox" name="cookTime" value="15"> &lt;15 min
-        </label><br>
-        <label>
-            <input type="checkbox" name="cookTime" value="30"> 15~30 min
-        </label><br>
-        <label>
-            <input type="checkbox" name="cookTime" value="60"> 30~60 min
-        </label><br>
-        <label>
-            <input type="checkbox" name="cookTime" value="120"> 1~2 hours
-        </label><br>
-        <label>
-            <input type="checkbox" name="cookTime" value="121"> 2+ hours
-        </label>
+        <nav>
+            <a th:href="@{/}">Home</a> |
+            <a th:href="@{/explore}">Explore</a> |
+            <a th:href="@{/my-profile}">Profile</a>
+        </nav>
 
-        <h3>Price</h3>
-        <label>
-            <input type="checkbox" name="price" value="1"> $
-        </label><br>
-        <label>
-            <input type="checkbox" name="price" value="2"> $$
-        </label><br>
-        <label>
-            <input type="checkbox" name="price" value="3"> $$$
-        </label><br>
-        <label>
-            <input type="checkbox" name="price" value="4"> $$$$
-        </label>
-    </form>
+        <br>
 
-    <div th:if="${#lists.isEmpty(recipes)}">
-        <p>No recipes found.</p>
-    </div>
+        <p>
+            <strong>Username:</strong>
+            <span th:text="${profile.username}">username</span>
+        </p>
 
-    <div th:unless="${#lists.isEmpty(recipes)}">
-        <div th:each="recipe : ${recipes}" style="margin-bottom: 20px; border: 1px solid #ccc; padding: 10px;">
-            <h3>
-                <a th:href="@{/recipes/{id}(id=${recipe.id})}" th:text="${recipe.title}">Recipe Title</a>
-            </h3>
+        <h2>Bio</h2>
+        <p th:if="${profile.bio != null and !#strings.isEmpty(profile.bio)}" th:text="${profile.bio}">
+            Bio text
+        </p>
+        <p th:unless="${profile.bio != null and !#strings.isEmpty(profile.bio)}">
+            This user has not added a bio yet.
+        </p>
 
-            <p>
-                <strong>Author:</strong>
-                <a th:href="@{/users/{id}(id=${recipe.userDto.id})}"
-                   th:text="${recipe.userDto.displayName != null and !#strings.isEmpty(recipe.userDto.displayName) ? recipe.userDto.displayName : recipe.userDto.username}">
-                    Author Name
-                </a>
-            </p>
+        <h2>Recipes</h2>
 
-            <p th:text="${recipe.description}">Recipe description</p>
-
-            <p>
-                <strong>Prep:</strong> <span th:text="${recipe.prepTimeMinutes}">0</span> min |
-                <strong>Cook:</strong> <span th:text="${recipe.cookTimeMinutes}">0</span> min |
-                <strong>Servings:</strong> <span th:text="${recipe.servings}">0</span> |
-                <strong>Cost:</strong> <span th:text="${recipe.cost}">0</span>
-            </p>
-
-            <div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
-                <img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image" style="max-width: 200px;">
-            </div>
-
-            <p><a th:href="@{/recipes/{id}(id=${recipe.id})}">View Recipe</a></p>
+        <div th:if="${#lists.isEmpty(profile.recipes)}">
+            <p>This user has not created any recipes yet.</p>
         </div>
+
+        <div th:unless="${#lists.isEmpty(profile.recipes)}">
+            <div th:each="recipe : ${profile.recipes}" class="recipe-block" style="margin-bottom: 20px;">
+                <h3>
+                    <a th:href="@{/recipes/{id}(id=${recipe.id})}" th:text="${recipe.title}">Recipe Title</a>
+                </h3>
+
+                <p>
+                    <strong>Author:</strong>
+                    <a th:href="@{/users/{id}(id=${recipe.userDto.id})}"
+                       th:text="${recipe.userDto.displayName != null and !#strings.isEmpty(recipe.userDto.displayName) ? recipe.userDto.displayName : recipe.userDto.username}">
+                        Author Name
+                    </a>
+                </p>
+
+                <p th:text="${recipe.description}">Recipe description</p>
+
+                <div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
+                    <img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image" style="max-width: 200px;">
+                </div>
+
+                <p>
+                    <a th:href="@{/recipes/{id}(id=${recipe.id})}">View Recipe</a>
+                </p>
+            </div>
+        </div>
+
     </div>
+</div>
 
-    <script>
-    (function () {
-        const input = document.getElementById('site-search');
-        const tags = [];
-        const params = new URLSearchParams(window.location.search);
-
-        params.getAll('prices').forEach(p => {
-            const cb = document.querySelector(`input[name="price"][value="${p}"]`);
-            if (cb) cb.checked = true;
-        });
-
-        params.getAll('cookTime').forEach(p => {
-            const cb = document.querySelector(`input[name="cookTime"][value="${p}"]`);
-            if (cb) cb.checked = true;
-        });
-
-        params.getAll('prepTime').forEach(p => {
-            const cb = document.querySelector(`input[name="prepTime"][value="${p}"]`);
-            if (cb) cb.checked = true;
-        });
-
-        params.getAll('tags').forEach(addChip);
-
-        input.addEventListener('keydown', (e) => {
-            if ((e.key === ' ' || e.key === 'Enter') && input.value.includes('#')) {
-                const val = input.value + ' ';
-                const match = val.match(/(^|\s)(#\w+)(\s)/);
-                if (match) {
-                    e.preventDefault();
-                    addChip(match[2].substring(1));
-                    input.value = val.replace(match[0], '');
-                    input.value += ' ';
-                }
-            }
-        });
-
-        document.querySelectorAll('input[name="price"]').forEach(cb => {
-            cb.addEventListener('change', submitSearch);
-        });
-
-        document.querySelectorAll('input[name="cookTime"]').forEach(cb => {
-            cb.addEventListener('change', submitSearch);
-        });
-
-        document.querySelectorAll('input[name="prepTime"]').forEach(cb => {
-            cb.addEventListener('change', submitSearch);
-        });
-
-        document.getElementById('search-form').addEventListener('submit', (e) => {
-            e.preventDefault();
-            submitSearch();
-        });
-
-        function addChip(tag) {
-            if (tags.includes(tag)) return;
-            tags.push(tag);
-
-            const chip = document.createElement('span');
-            chip.className = 'tag-chip';
-            chip.innerHTML = `#${tag} <button type="button" aria-label="Remove ${tag}">×</button>`;
-
-            chip.querySelector('button').addEventListener('click', () => {
-                chip.remove();
-                tags.splice(tags.indexOf(tag), 1);
-                submitSearch();
-            });
-
-            input.insertAdjacentElement('afterend', chip);
-        }
-
-        function submitSearch() {
-            const cleanedQuery = input.value.replace(/#\w+/g, '').trim();
-            const out = new URLSearchParams();
-
-            if (cleanedQuery) out.set('q', cleanedQuery);
-            tags.forEach(t => out.append('tags', t));
-
-            document.querySelectorAll('input[name="price"]:checked')
-                .forEach(cb => out.append('prices', cb.value));
-
-            document.querySelectorAll('input[name="cookTime"]:checked')
-                .forEach(cb => out.append('cookTime', cb.value));
-
-            document.querySelectorAll('input[name="prepTime"]:checked')
-                .forEach(cb => out.append('prepTime', cb.value));
-
-            window.location.href = '/explore?' + out.toString();
-        }
-    })();
-    </script>
 </body>
 </html>
\ No newline at end of file
