source: src/main/resources/templates/myOrders.html

main
Last change on this file was f4b4afa, checked in by Nikola Todoroski <nikola.todoroski@…>, 6 months ago

Pushed whole project, original project location on github:https://github.com/hehxd/Tech-Harbor

  • Property mode set to 100644
File size: 5.0 KB
RevLine 
[f4b4afa]1<!DOCTYPE html>
2<html lang="en" xmlns:th="http://www.thymeleaf.org">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Orders</title>
7 <!-- Tailwind CSS from CDN for development purposes -->
8 <script src="https://cdn.tailwindcss.com"></script>
9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
10 <link href="./output.css" rel="stylesheet">
11</head>
12
13<body class="font-sans antialiased bg-gray-100 flex flex-col min-h-screen">
14
15<nav class="bg-gray-800 text-white p-4 text-lg sm:text-xl"> <!-- Responsive font size -->
16 <div class="container mx-auto flex justify-between items-center">
17 <div class="flex items-center">
18 <img src="/images/logoWhite.png" alt="Logo" class="object-cover h-32 w-32 rounded-lg">
19 <h1 class="text-2xl font-semibold ml-4 sm:text-3xl">Tech Harbor</h1> <!-- Responsive font size -->
20 </div>
21 <ul class="flex space-x-8">
22 <li><a href="/" class="hover:text-emerald-500">Home</a></li>
23 <li><a th:href="@{'/aboutUs'}" class="hover:text-emerald-500">About Us</a></li>
24 <li th:if="${user != null}">
25 <a th:href="@{'/orders/{id}' (id=${user.userId})}" class="text-emerald-500 hover:text-emerald-500">My
26 Orders</a>
27 </li>
28 <li th:if="${user != null}">
29 <a th:href="@{'/reviews/{id}' (id=${user.userId})}" class="hover:text-emerald-500">My Reviews</a>
30 </li>
31 </ul>
32 <ul class="flex space-x-4">
33 <li th:if="${user != null}">
34 <span>Welcome <span th:text="${user.nameUser}"></span></span>
35 </li>
36 <li th:if="${user != null}">
37 <a th:href="@{'/shoppingCart'}"><i class="fa-solid fa-cart-shopping"></i></a>
38 </li>
39 <li th:if="${user != null}">
40 <a class="hover:text-emerald-500" th:href="@{/logout}">Log out</a>
41 </li>
42 <li th:if="${user == null}">
43 <a th:href="@{/login}" class="hover:text-emerald-500">Sign In</a>
44 </li>
45 <li th:if="${user == null}">
46 <a th:href="@{/register}" class="hover:text-emerald-500">Register</a>
47 </li>
48 </ul>
49
50 </div>
51</nav>
52
53<main class="container mx-auto mt-8 flex-grow">
54
55
56 <div class="max-w-5xl mx-auto py-8 grid grid-cols-1 md:grid-cols-2 gap-4 font-sans mb-auto">
57 <div class="card bg-gray-700 p-4 rounded-md shadow-md text-white col-span-1 md:col-span-full">
58 <table class="w-full text-left border-collapse border border-gray-800">
59 <thead>
60 <tr class="bg-gray-800 text-white text-center">
61 <th class="px-4 py-2">Order ID</th>
62 <th class="px-4 py-2">Product Picture</th>
63 <th class="px-4 py-2">Product Name</th>
64 <th class="px-4 py-2">Product Quantity</th>
65 <th class="px-4 py-2">Order Date</th>
66 <th class="px-4 py-2">Order Status</th>
67 </tr>
68 </thead>
69 <tbody>
70 <tr th:each="order,iterator : ${orders}" class="hover:bg-gray-600 text-center">
71 <td class="px-4 py-2 border border-gray-800">[[${order.orderId}]]</td>
72 <td class="px-4 py-2 border border-gray-800"><img alt="Product Picture"
73 class="object-cover h-32 w-32 rounded-lg"
74 th:src="${products.get(iterator.index).getProductImage()}">
75 </td>
76 <td class="px-4 py-2 border border-gray-800">[[${products.get(iterator.index).getProductName()}]]
77 </td>
78 <td class="px-4 py-2 border border-gray-800">[[${orderList.get(iterator.index).getQuantity()}]]</td>
79 <td class="px-4 py-2 border border-gray-800">[[${order.orderDate}]]</td>
80 <td class="px-4 py-2 border border-gray-800">[[${order.orderStatus}]]</td>
81 </tr>
82 </tbody>
83 </table>
84 </div>
85 </div>
86</main>
87
88
89<!-- Footer -->
90<footer class="bg-white rounded-lg shadow m-4 dark:bg-gray-800">
91 <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
92 <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2024 Tech Harbor. All rights reserved.™
93 </span>
94 <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
95 <li>
96 <a th:href="@{'/aboutUs'}" class="hover:underline me-4 md:me-6">About</a>
97 </li>
98 <li>
99 <a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a>
100 </li>
101 <li>
102 <a href="#" class="hover:underline">Contact</a>
103 </li>
104 </ul>
105 </div>
106</footer>
107</body>
108
109</html>
Note: See TracBrowser for help on using the repository browser.