mirror of
https://gitlab.com/etc404/software-engineering-project.git
synced 2026-05-10 20:52:58 +00:00
kaipher7
101 lines
3.8 KiB
HTML
101 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Thyme Crunch Favorites</title>
|
|
<link rel="stylesheet" th:href="@{css/home.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="body">
|
|
<div class="body-left">
|
|
<nav class="sidebar-left">
|
|
<ul>
|
|
<li><a th:href="@{/explore}">Explore</a></li>
|
|
<li th:unless="${guest}"><a th:href="@{/}">Saved</a></li>
|
|
<li th:unless="${guest}"><a th:href="@{/my-profile}">Profile</a></li>
|
|
|
|
<li th:if="${guest}" class="login-link">
|
|
<a th:href="@{/login}">Login</a> or <a th:href="@{/register}">Sign Up</a> to create and save recipes
|
|
</li>
|
|
|
|
<li th:unless="${guest}">
|
|
<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}" 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>
|
|
|
|
<main class="main-content">
|
|
<div class="recipe-card">
|
|
<div th:if="${guest}" style="text-align:center; padding: 20px 0;">
|
|
<p style="margin-bottom:16px;">Log in to view and save your favorite recipes.</p>
|
|
</div>
|
|
|
|
<div th:unless="${guest}">
|
|
<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}">Recipe Title</h2>
|
|
<p th:text="${recipe.description}">Description</p>
|
|
</div>
|
|
<div class="card-right">
|
|
<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
|
|
<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
|
|
</div>
|
|
<p class="card-cost" th:text="${recipe.cost}">Cost</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div class="body-right">
|
|
<div class="sidebar-right">
|
|
<h1>NEW</h1>
|
|
<div class="new-recipes">
|
|
<a th:each="recipe : ${newestRecipes}"
|
|
th:href="@{/recipes/{id}(id=${recipe.id})}"
|
|
class="new-recipe-item">
|
|
<p th:text="${recipe.title}">Title</p>
|
|
<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
|
|
<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function renderCost(cost) {
|
|
const num = parseInt(cost, 10);
|
|
if (!num || num <= 0) return '';
|
|
if (num >= 4) return '$$$$';
|
|
return '$'.repeat(num);
|
|
}
|
|
|
|
document.querySelectorAll('.card-cost').forEach(el => {
|
|
el.textContent = renderCost(el.textContent);
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |