source: src/main/resources/templates/productPage.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: 10.8 KB
Line 
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>Product Page</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="text-emerald-500 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="hover:text-emerald-500">My Orders</a>
26 </li>
27 <li th:if="${user != null}">
28 <a th:href="@{'/reviews/{id}' (id=${user.userId})}" class="hover:text-emerald-500">My Reviews</a>
29 </li>
30 <li th:if="${deliveryMan != null}">
31 <a th:href="@{'/myDeliveries/{id}' (id=${deliveryMan.userId})}" class="hover:text-emerald-500">My
32 Deliveries</a>
33 </li>
34 </ul>
35 <ul class="flex space-x-4">
36 <li th:if="${user != null}">
37 <span>Welcome <span th:text="${user.nameUser}"></span></span>
38 </li>
39 <li th:if="${deliveryMan != null}">
40 <span>Welcome Delivery Man <span th:text="${deliveryMan.nameUser}"></span></span>
41 </li>
42 <li th:if="${user != null}">
43 <a th:href="@{'/shoppingCart'}"><i class="fa-solid fa-cart-shopping"></i></a>
44 </li>
45 <li th:if="${user != null || deliveryMan != null}">
46 <a class="hover:text-emerald-500" th:href="@{/logout}">Log out</a>
47 </li>
48 <li th:if="${user == null && deliveryMan == null}">
49 <a th:href="@{/login}" class="hover:text-emerald-500">Sign In</a>
50 </li>
51 <li th:if="${user == null && deliveryMan == null}">
52 <a th:href="@{/register}" class="hover:text-emerald-500">Register</a>
53 </li>
54 </ul>
55
56 </div>
57</nav>
58
59
60<main class="container mx-auto mt-8 flex-grow">
61
62
63 <div class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8 bg-gray-800 rounded-lg mt-16 flex-grow">
64 <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
65 <div class="lg:col-span-1 rounded-lg">
66 <img th:src="${product.productImage}" src="../static/images/intel_core_i7.jpg" alt="Image of product"
67 class="object-cover h-96 w-96 rounded-lg">
68 </div>
69 <div class="lg:col-span-2">
70 <h1 th:text="${product.productName}" class="text-2xl font-bold tracking-tight text-white text-center">
71 Product Name</h1>
72 <p th:text="${product.productDescription}" class="mt-2 text-base text-gray-300">Product description</p>
73 <div class="mt-4">
74 <div class="flex items-center justify-between">
75 <div>
76 <span th:text="${product.productPrice + ' ден.'}"
77 class="text-xl font-semibold text-white mr-2">Price:</span>
78 </div>
79 <div th:unless="${deliveryMan != null}">
80 <span class="text-lg font-semibold text-white mr-2">Quantity:</span>
81 <label for="quantity"><input type="number" id="quantity" name="quantity" min="1" value="1"
82 class="w-16 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></label>
83 <a th:href="${user != null} ? @{'/shoppingCart/' + ${product.productId}} : '/login'"
84 class="px-4 py-2 bg-indigo-500 text-white font-bold rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ml-5">
85 Add to cart
86 </a>
87 </div>
88 </div>
89 </div>
90 <!-- Review Section -->
91 <div class="mt-8">
92 <div class="mt-16 flex items-center justify-between">
93 <h2 class="text-xl font-semibold text-white">Product Reviews</h2>
94 <button type="button" id="addReviewBtn"
95 class="px-4 py-2 bg-indigo-500 text-white font-bold rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ml-5">
96 Add a Review
97 </button>
98 </div>
99
100 <!-- Popup for the review form -->
101 <div id="reviewPopup"
102 class="fixed top-0 left-0 w-full h-full bg-gray-900 bg-opacity-50 flex justify-center items-center"
103 style="display: none;">
104 <div class="bg-white rounded-lg p-8 max-w-6xl">
105 <button class="absolute top-0 right-0 mt-2 mr-2 text-gray-600" onclick="closePopup()">
106 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
107 xmlns="http://www.w3.org/2000/svg">
108 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
109 d="M6 18L18 6M6 6l12 12"></path>
110 </svg>
111 </button>
112 <form id="reviewForm">
113 <input type="hidden" name="productId" th:value="${product.productId}"/>
114 <div class="mb-4">
115 <label for="reviewRating"
116 class="block text-gray-700 text-sm font-bold mb-2">Rating:</label>
117 <input type="number" name="reviewRating" id="reviewRating" min="1" max="5" required
118 class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
119 </div>
120 <div class="mb-6">
121 <label for="reviewDescription" class="block text-gray-700 text-sm font-bold mb-2">Description:</label>
122 <textarea name="reviewDescription" id="reviewDescription" required
123 class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
124 </div>
125 <div class="flex justify-end">
126 <button type="submit"
127 class="px-4 py-2 bg-indigo-500 text-white font-bold rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
128 Submit Review
129 </button>
130 </div>
131 </form>
132 </div>
133 </div>
134
135
136 <div class="mt-4">
137 <ul>
138 <li th:each="review : ${reviews}" class="border-2 rounded-2xl m-5 box-border">
139 <div class="flex items-center m-5">
140 <i class="fa-regular fa-star ml-2 mr-3" style="color: #ffffff;"></i>
141 <p class="text-lg font-semibold mr-4 text-white"
142 th:text="${review.reviewRating}"></p>
143 <p class="text-lg text-white" th:text="${review.reviewDescription}"></p>
144 </div>
145 </li>
146 </ul>
147 </div>
148 </div>
149 </div>
150 </div>
151 </div>
152</main>
153
154<!-- Footer -->
155<footer class="bg-white rounded-lg shadow m-4 dark:bg-gray-800">
156 <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
157 <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2024 Tech Harbor. All rights reserved.™
158 </span>
159 <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
160 <li>
161 <a th:href="@{'/aboutUs'}" class="hover:underline me-4 md:me-6">About</a>
162 </li>
163 <li>
164 <a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a>
165 </li>
166 <li>
167 <a href="#" class="hover:underline">Contact</a>
168 </li>
169 </ul>
170 </div>
171</footer>
172</body>
173
174
175</html>
176
177<script th:inline="javascript">
178 /*<![CDATA[*/
179 document.getElementById('addReviewBtn').addEventListener('click', function () {
180 document.getElementById('reviewPopup').style.display = 'flex';
181 });
182
183 function closePopup() {
184 document.getElementById('reviewPopup').style.display = 'none';
185 }
186
187 document.getElementById('reviewForm').addEventListener('submit', function (event) {
188 event.preventDefault(); // Prevent default form submission
189
190 // Get form data
191 var formData = new FormData(document.getElementById('reviewForm'));
192
193 // Make AJAX request to submit the review
194 fetch('/add-review', {
195 method: 'POST',
196 body: formData
197 })
198 .then(response => {
199 if (!response.ok) {
200 throw new Error('Error submitting review');
201 }
202 closePopup();
203 console.log('Redirecting...')
204 window.location.href = '/product/' + formData.get('productId'); // Redirect to product page
205 })
206 .catch(error => {
207 console.error('Error:', error);
208 });
209 });
210 /*]]>*/
211</script>
212
213
214
Note: See TracBrowser for help on using the repository browser.