source: src/main/resources/templates/Checkout.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: 8.3 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>Checkout</title>
7 <!-- Add your CSS styles or links to external stylesheets if needed -->
8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
9 <!-- Tailwind CSS from CDN for development purposes -->
10 <script src="https://cdn.tailwindcss.com"></script>
11
12 <link href="./output.css" rel="stylesheet">
13</head>
14<body class="font-sans antialiased bg-gray-100 flex flex-col min-h-screen">
15
16<nav class="bg-gray-800 text-white p-4 text-lg sm:text-xl"> <!-- Responsive font size -->
17 <div class="container mx-auto flex justify-between items-center">
18 <div class="flex items-center">
19 <img src="/images/logoWhite.png" alt="Logo" class="object-cover h-32 w-32 rounded-lg">
20 <h1 class="text-2xl font-semibold ml-4 sm:text-3xl">Tech Harbor</h1> <!-- Responsive font size -->
21 </div>
22 <ul class="flex space-x-8">
23 <li><a href="/" class="hover:text-emerald-500">Home</a></li>
24 <li><a th:href="@{'/aboutUs'}" class="hover:text-emerald-500">About Us</a></li>
25 <li th:if="${user != null}">
26 <a th:href="@{'/orders/{id}' (id=${user.userId})}" class="hover:text-emerald-500">My 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><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 <form th:method="get" th:action="@{'/finalizeOrder'}">
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 <!-- Billing Details -->
58 <div class="p-4">
59 <h2 class="text-2xl font-semibold mb-4">Billing Details</h2>
60 <form>
61 <div class="mb-4">
62 <label for="name" class="block text-gray-700">Name</label>
63 <input type="text" id="name" name="name" class="w-full border p-2">
64 </div>
65 <div class="mb-4">
66 <label for="email" class="block text-gray-700">Email</label>
67 <input type="email" id="email" name="email" class="w-full border p-2">
68 </div>
69 <div class="mb-4">
70 <label for="address" class="block text-gray-700">Address</label>
71 <input type="text" id="address" name="address" class="w-full border p-2">
72 </div>
73 <div class="mb-4">
74 <label for="country" class="block text-gray-700">Country</label>
75 <input type="text" id="country" name="country" class="w-full border p-2">
76 </div>
77 <div class="mb-4">
78 <label for="phonenumber" class="block text-gray-700">Phone Number</label>
79 <input type="tel" id="phonenumber" name="phonenumber" class="w-full border p-2">
80 </div>
81 <div class="mb-4 flex">
82 <div class="mr-2 w-1/2">
83 <label for="city" class="block text-gray-700">City</label>
84 <input type="text" id="city" name="city" class="w-full border p-2">
85 </div>
86 <div class="ml-2 w-1/2">
87 <label for="postalcode" class="block text-gray-700">Postal Code</label>
88 <input type="text" id="postalcode" name="postalcode" class="w-full border p-2">
89 </div>
90 </div>
91 <!-- Add other billing details fields as needed -->
92
93 <!-- Credit Card Details -->
94 <h2 class="text-2xl font-semibold mb-4 mt-8">Credit Card Details</h2>
95 <div class="mb-4">
96 <label for="cardholdername" class="block text-gray-700">Card Holder Name</label>
97 <input type="text" id="cardholdername" name="cardholdername" class="w-full border p-2">
98 </div>
99 <div class="mb-4">
100 <label for="cardnumber" class="block text-gray-700">Card Number</label>
101 <input type="text" id="cardnumber" name="cardnumber" class="w-full border p-2">
102 </div>
103 <div class="mb-4">
104 <label for="expirydate" class="block text-gray-700">Expiry Date</label>
105 <input type="text" id="expirydate" name="expirydate" placeholder="MM/YYYY"
106 class="w-full border p-2">
107 </div>
108 <div class="mb-4">
109 <label for="securitycode" class="block text-gray-700">Security Code (CVV)</label>
110 <input type="text" id="securitycode" name="securitycode" class="w-full border p-2">
111 </div>
112 <!-- Add other credit card details fields as needed -->
113 </form>
114 </div>
115 <!-- Cart Summary -->
116 <div class="p-4 bg-gray-700 rounded-md shadow-md text-white">
117 <h2 class="text-2xl font-semibold mb-4">Cart Summary</h2>
118 <table class="w-full border-collapse border border-gray-800">
119 <thead>
120 <tr>
121 <th class="text-center py-2">Product Image</th>
122 <th class="text-center py-2">Product Name</th>
123 <th class="text-center py-2">Product Price</th>
124 </tr>
125 </thead>
126 <tbody>
127 <tr th:each="product : ${cartItems}">
128 <td class="py-2">
129 <img th:src="${product.getProductImage()}" alt="Product Image"
130 class="mx-auto w-30 h-20"></td>
131 <td class="text-center py-2" th:text="${product.getProductName()}"></td>
132 <td class="text-center py-2" th:text="${product.getProductPrice()}"></td>
133 </tr>
134 </tbody>
135 </table>
136
137 <div class="flex items-center justify-end mt-4">
138 <span class="font-bold text-lg mr-8" th:text="'Total: ' + ${grandTotal} + ' ден.'"></span>
139 <button type="submit" class="px-4 py-2 bg-emerald-500 text-white rounded-md hover:bg-emerald-600">
140 Proceed
141 </button>
142 </div>
143 </div>
144 </div>
145 </form>
146
147</main>
148
149<!-- Footer -->
150<footer class="bg-white rounded-lg shadow m-4 dark:bg-gray-800">
151 <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
152 <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2024 Tech Harbor. All rights reserved.™
153 </span>
154 <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
155 <li>
156 <a th:href="@{'/aboutUs'}" class="hover:underline me-4 md:me-6">About</a>
157 </li>
158 <li>
159 <a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a>
160 </li>
161 <li>
162 <a href="#" class="hover:underline">Contact</a>
163 </li>
164 </ul>
165 </div>
166</footer>
167
168</body>
169</html>
Note: See TracBrowser for help on using the repository browser.