mirror of
https://gitlab.com/etc404/software-engineering-project.git
synced 2026-05-10 20:52:58 +00:00
moon.gibson
80 lines
3.4 KiB
HTML
80 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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 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">
|
|
|
|
<!-- Left Navigation -->
|
|
<div class="body-left">
|
|
<nav class="sidebar-left">
|
|
<ul>
|
|
<li><a href="/">Home</a></li>
|
|
<li><a th:href="@{/explore}">Explore</a></li>
|
|
<li><a th:href="@{/my-profile}">Profile</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>
|
|
|
|
<!-- Main Content — recipes -->
|
|
<main class="main-content">
|
|
|
|
<h2 th:text="${profile.effectiveDisplayName} + '\'s Recipes'">User's Recipes</h2>
|
|
|
|
<p th:if="${#lists.isEmpty(profile.recipes)}">This user has not created any recipes yet.</p>
|
|
|
|
<div class="recipe-card" th:unless="${#lists.isEmpty(profile.recipes)}">
|
|
<th:block th:each="recipe : ${profile.recipes}">
|
|
<div class="card-wrapper">
|
|
<a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card">
|
|
<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" style="max-width: 200px;">
|
|
</div>
|
|
<span th:text="${recipe.cost != null ? #strings.repeat('$', recipe.cost) : ''}"></span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</th:block>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- Right Sidebar — public profile info only -->
|
|
<div class="body-right">
|
|
<div class="sidebar-right">
|
|
<p><strong th:text="${profile.effectiveDisplayName}">Display Name</strong></p>
|
|
<p th:text="'@' + ${profile.username}">@username</p>
|
|
<p th:if="${profile.bio != null and !#strings.isEmpty(profile.bio)}" th:text="${profile.bio}">Bio goes here.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |