new recipe bar on home working

This commit is contained in:
kaipher7
2026-04-21 23:54:16 -06:00
parent c0b536cba6
commit f8f41d680b
9 changed files with 513 additions and 21 deletions
@@ -5,7 +5,7 @@
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
<meta name="_csrf" th:content="${_csrf.token}"/>
<title>Profile - Thyme Crunch</title>
<link rel="stylesheet" th:href="@{/css/my-profile.css}">
<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>
@@ -56,7 +56,7 @@
<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.cost}">Cost</p>
<p class="card-cost" th:text="${recipe.cost}">Cost</p>
</div>
</a>
</div>
@@ -76,5 +76,13 @@
</div>
<script>
// For cost display
document.querySelectorAll('.card-cost').forEach(el => {
const num = parseInt(el.textContent);
el.textContent = num === 0 ? '' : '$'.repeat(num);
});
</script>
</body>
</html>