File History: src/main/resources/templates/cart.html

File Content at Commit f0438c2

      
      <!DOCTYPE html>
    
      <html lang="en" xmlns:th="http://www.thymeleaf.org">
    
      <head>
    
          <meta charset="UTF-8">
    
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
          <title>Shopping Cart - Payment Link Service</title>
    
          <link rel="stylesheet" th:href="@{/css/styles.css}">
    
          <style>
    
              .cart-container {
    
                  max-width: 900px;
    
                  margin: 2rem auto;
    
                  padding: 0 1.5rem;
    
              }
    
              .cart-header {
    
                  margin-bottom: 1.5rem;
    
              }
    
              .cart-header h2 {
    
                  font-size: 1.5rem;
    
                  font-weight: 500;
    
                  color: var(--text-color);
    
                  margin: 0;
    
                  letter-spacing: -0.01em;
    
              }
    
              .cart-items {
    
                  background: transparent;
    
                  padding: 0;
    
              }
    
              .cart-item {
    
                  display: flex;
    
                  align-items: flex-start;
    
                  padding: 1.25rem 0;
    
                  border-bottom: 1px solid var(--border-color);
    
                  background: transparent;
    
                  transition: opacity 0.2s ease;
    
              }
    
              .cart-item:last-child {
    
                  border-bottom: none;
    
              }
    
              .cart-item-image {
    
                  width: 80px;
    
                  height: 80px;
    
                  object-fit: cover;
    
                  border-radius: 4px;
    
                  margin-right: 1.25rem;
    
                  background: #f8f8f8;
    
                  display: flex;
    
                  align-items: center;
    
                  justify-content: center;
    
                  font-size: 0.65rem;
    
                  color: #bbb;
    
                  flex-shrink: 0;
    
              }
    
              .cart-item-image img {
    
                  width: 100%;
    
                  height: 100%;
    
                  object-fit: cover;
    
                  border-radius: 4px;
    
              }
    
              .cart-item-info {
    
                  flex: 1;
    
                  min-width: 0;
    
                  padding-right: 1rem;
    
              }
    
              .cart-item-name {
    
                  font-size: 1rem;
    
                  font-weight: 500;
    
                  margin-bottom: 0.25rem;
    
                  color: var(--text-color);
    
                  line-height: 1.3;
    
              }
    
              .cart-item-price {
    
                  color: var(--text-light);
    
                  font-weight: 400;
    
                  font-size: 0.875rem;
    
                  margin-bottom: 0.75rem;
    
              }
    
              .cart-item-quantity {
    
                  display: flex;
    
                  align-items: center;
    
                  gap: 0.75rem;
    
                  flex-wrap: wrap;
    
              }
    
              .cart-item-quantity label {
    
                  font-size: 0.8125rem;
    
                  font-weight: 400;
    
                  color: var(--text-light);
    
              }
    
              .quantity-input {
    
                  width: 70px;
    
                  padding: 0.5rem;
    
                  border: 1px solid var(--border-color);
    
                  border-radius: 4px;
    
                  text-align: center;
    
                  font-size: 0.875rem;
    
                  font-weight: 400;
    
                  background: var(--card-bg);
    
                  transition: border-color 0.2s ease;
    
              }
    
              .quantity-input:focus {
    
                  outline: none;
    
                  border-color: var(--text-color);
    
              }
    
              .cart-item-quantity .btn {
    
                  padding: 0.35rem 0.75rem;
    
                  font-size: 0.75rem;
    
                  background: #f5f5f5;
    
                  color: var(--text-color);
    
                  border: 1px solid var(--border-color);
    
                  border-radius: 4px;
    
                  font-weight: 400;
    
                  text-decoration: none;
    
                  cursor: pointer;
    
                  transition: all 0.2s ease;
    
              }
    
              .cart-item-quantity .btn:hover {
    
                  background: #eeeeee;
    
                  border-color: var(--text-color);
    
              }
    
              .cart-item-total {
    
                  font-size: 1rem;
    
                  font-weight: 500;
    
                  min-width: 100px;
    
                  text-align: right;
    
                  color: var(--text-color);
    
                  padding-left: 1rem;
    
                  white-space: nowrap;
    
              }
    
              .cart-summary {
    
                  background: transparent;
    
                  padding: 0;
    
                  margin-top: 2rem;
    
                  width: 100%;
    
              }
    
              .cart-summary h3 {
    
                  font-size: 0.75rem;
    
                  font-weight: 500;
    
                  margin-bottom: 1.25rem;
    
                  color: var(--text-color);
    
                  text-transform: uppercase;
    
                  letter-spacing: 0.1em;
    
              }
    
              .summary-row {
    
                  display: flex;
    
                  justify-content: space-between;
    
                  align-items: center;
    
                  margin-bottom: 0.75rem;
    
                  padding-bottom: 0.75rem;
    
                  border-bottom: 1px solid var(--border-color);
    
                  font-size: 0.875rem;
    
              }
    
              .summary-row:last-of-type {
    
                  border-bottom: none;
    
                  margin-bottom: 0;
    
              }
    
              .summary-row span:first-child {
    
                  color: var(--text-light);
    
                  font-weight: 400;
    
              }
    
              .summary-row span:last-child {
    
                  font-weight: 500;
    
                  color: var(--text-color);
    
              }
    
              .summary-row.total {
    
                  font-size: 1rem;
    
                  font-weight: 600;
    
                  border-bottom: none;
    
                  padding-top: 0.75rem;
    
                  margin-top: 0.75rem;
    
                  border-top: 2px solid var(--border-color);
    
              }
    
              .summary-row.total span:first-child {
    
                  color: var(--text-color);
    
                  font-weight: 600;
    
              }
    
              .summary-row.total span:last-child {
    
                  color: var(--text-color);
    
                  font-size: 1.125rem;
    
              }
    
              .cart-summary .btn {
    
                  width: 100%;
    
                  margin-top: 1rem;
    
                  text-align: center;
    
                  padding: 0.875rem;
    
                  font-size: 0.875rem;
    
                  font-weight: 500;
    
                  border-radius: 4px;
    
                  transition: all 0.2s ease;
    
                  text-decoration: none;
    
                  display: block;
    
              }
    
              .cart-summary .btn-success {
    
                  background: var(--text-color);
    
                  color: white;
    
                  border: none;
    
              }
    
              .cart-summary .btn-success:hover {
    
                  background: var(--text-color);
    
                  opacity: 0.85;
    
              }
    
              .cart-summary .btn:not(.btn-success) {
    
                  background: transparent;
    
                  border: 1px solid var(--border-color);
    
                  color: var(--text-color);
    
              }
    
              .cart-summary .btn:not(.btn-success):hover {
    
                  background: var(--bg-color);
    
                  border-color: var(--text-color);
    
              }
    
              .empty-cart {
    
                  text-align: center;
    
                  padding: 4rem 2rem;
    
                  background: transparent;
    
              }
    
              .empty-cart-icon {
    
                  font-size: 3rem;
    
                  margin-bottom: 1rem;
    
                  opacity: 0.15;
    
              }
    
              .empty-cart h3 {
    
                  font-size: 1.25rem;
    
                  font-weight: 500;
    
                  margin-bottom: 0.5rem;
    
                  color: var(--text-color);
    
              }
    
              .empty-cart p {
    
                  color: var(--text-light);
    
                  margin-bottom: 1.5rem;
    
                  font-size: 0.875rem;
    
              }
    
              .empty-cart .btn {
    
                  padding: 0.875rem 1.5rem;
    
                  font-size: 0.875rem;
    
              }
    
              @media (max-width: 968px) {
    
                  .cart-container {
    
                      margin: 1.5rem auto;
    
                      padding: 0 1rem;
    
                  }
    
                  .cart-summary {
    
                      margin-top: 1.5rem;
    
                  }
    
                  .cart-item {
    
                      flex-wrap: wrap;
    
                      padding: 1rem 0;
    
                  }
    
                  .cart-item-image {
    
                      width: 70px;
    
                      height: 70px;
    
                      margin-right: 1rem;
    
                  }
    
                  .cart-item-total {
    
                      width: 100%;
    
                      text-align: left;
    
                      margin-top: 0.75rem;
    
                      padding-top: 0.75rem;
    
                      padding-left: 0;
    
                      border-top: 1px solid var(--border-color);
    
                      min-width: auto;
    
                  }
    
                  .cart-item-quantity {
    
                      width: 100%;
    
                  }
    
              }
    
              @media (max-width: 640px) {
    
                  .cart-container {
    
                      margin: 1rem auto;
    
                      padding: 0 1rem;
    
                  }
    
                  .cart-item {
    
                      padding: 0.875rem 0;
    
                  }
    
                  .cart-item-image {
    
                      width: 60px;
    
                      height: 60px;
    
                      margin-right: 0.875rem;
    
                  }
    
                  .cart-item-name {
    
                      font-size: 0.9375rem;
    
                  }
    
                  .cart-item-total {
    
                      font-size: 0.9375rem;
    
                  }
    
              }
    
          </style>
    
      </head>
    
      <body>
    
          <header>
    
              <nav class="navbar container">
    
                  <a th:href="@{/}" class="navbar-brand">
    
                      <h1>Webshop</h1>
    
                  </a>
    
                  <div class="navbar-actions">
    
                      <a th:href="@{/cart}" class="cart-button" aria-label="Cart">
    
                          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
    
                          <span id="cartCount" class="cart-badge" style="display: none;">0</span>
    
                      </a>
    
                  </div>
    
              </nav>
    
          </header>
    
          <main class="container">
    
              <div class="cart-container">
    
                  <div class="cart-header">
    
                      <h2>Shopping Cart</h2>
    
                  </div>
    
                  <div id="cartContent">
    
                      <div class="loading">Loading cart...</div>
    
                  </div>
    
              </div>
    
          </main>
    
          <!-- Notification Container -->
    
          <div id="notificationContainer" class="notification-container"></div>
    
          <script th:src="@{/js/notifications.js}"></script>
    
          <script th:src="@{/js/csrf.js}"></script>
    
          <script th:src="@{/js/cart.js}"></script>
    
      </body>
    
      </html>

Commits

Commit	Author	Date	Message	File SHA	Actions
`f0438c2`	<f69e50@finnacloud.com> 1766443042 +0300	12/22/2025, 10:37:22 PM	increment once more	`ce847a1`	Hide
`188fc92`	<f69e50@finnacloud.com> 1766442998 +0300	12/22/2025, 10:36:38 PM	increment	`ce847a1`	View
`4617f76`	<f69e50@finnacloud.com> 1766442953 +0300	12/22/2025, 10:35:53 PM	rename branch from main to master oops	`ce847a1`	View
`e6d1548`	<f69e50@finnacloud.com> 1766442769 +0300	12/22/2025, 10:32:49 PM	add initial test workflow file	`ce847a1`	View
`9c24ca4`	<f69e50@finnacloud.com> 1766442705 +0300	12/22/2025, 10:31:45 PM	add CI configuration and test script for Jenkins build	`ce847a1`	View
`690c1f6`	<f69e50@finnacloud.com> 1766368110 +0300	12/22/2025, 1:48:30 AM	initialize backend structure with controllers, DTOs, and configuration files	`ce847a1`	View

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>Shopping Cart - Payment Link Service</title>
7	<link rel="stylesheet" th:href="@{/css/styles.css}">
8	<style>
9	.cart-container {
10	max-width: 900px;
11	margin: 2rem auto;
12	padding: 0 1.5rem;
13	}
14	.cart-header {
15	margin-bottom: 1.5rem;
16	}
17	.cart-header h2 {
18	font-size: 1.5rem;
19	font-weight: 500;
20	color: var(--text-color);
21	margin: 0;
22	letter-spacing: -0.01em;
23	}
24	.cart-items {
25	background: transparent;
26	padding: 0;
27	}
28	.cart-item {
29	display: flex;
30	align-items: flex-start;
31	padding: 1.25rem 0;
32	border-bottom: 1px solid var(--border-color);
33	background: transparent;
34	transition: opacity 0.2s ease;
35	}
36	.cart-item:last-child {
37	border-bottom: none;
38	}
39	.cart-item-image {
40	width: 80px;
41	height: 80px;
42	object-fit: cover;
43	border-radius: 4px;
44	margin-right: 1.25rem;
45	background: #f8f8f8;
46	display: flex;
47	align-items: center;
48	justify-content: center;
49	font-size: 0.65rem;
50	color: #bbb;
51	flex-shrink: 0;
52	}
53	.cart-item-image img {
54	width: 100%;
55	height: 100%;
56	object-fit: cover;
57	border-radius: 4px;
58	}
59	.cart-item-info {
60	flex: 1;
61	min-width: 0;
62	padding-right: 1rem;
63	}
64	.cart-item-name {
65	font-size: 1rem;
66	font-weight: 500;
67	margin-bottom: 0.25rem;
68	color: var(--text-color);
69	line-height: 1.3;
70	}
71	.cart-item-price {
72	color: var(--text-light);
73	font-weight: 400;
74	font-size: 0.875rem;
75	margin-bottom: 0.75rem;
76	}
77	.cart-item-quantity {
78	display: flex;
79	align-items: center;
80	gap: 0.75rem;
81	flex-wrap: wrap;
82	}
83	.cart-item-quantity label {
84	font-size: 0.8125rem;
85	font-weight: 400;
86	color: var(--text-light);
87	}
88	.quantity-input {
89	width: 70px;
90	padding: 0.5rem;
91	border: 1px solid var(--border-color);
92	border-radius: 4px;
93	text-align: center;
94	font-size: 0.875rem;
95	font-weight: 400;
96	background: var(--card-bg);
97	transition: border-color 0.2s ease;
98	}
99	.quantity-input:focus {
100	outline: none;
101	border-color: var(--text-color);
102	}
103	.cart-item-quantity .btn {
104	padding: 0.35rem 0.75rem;
105	font-size: 0.75rem;
106	background: #f5f5f5;
107	color: var(--text-color);
108	border: 1px solid var(--border-color);
109	border-radius: 4px;
110	font-weight: 400;
111	text-decoration: none;
112	cursor: pointer;
113	transition: all 0.2s ease;
114	}
115	.cart-item-quantity .btn:hover {
116	background: #eeeeee;
117	border-color: var(--text-color);
118	}
119	.cart-item-total {
120	font-size: 1rem;
121	font-weight: 500;
122	min-width: 100px;
123	text-align: right;
124	color: var(--text-color);
125	padding-left: 1rem;
126	white-space: nowrap;
127	}
128	.cart-summary {
129	background: transparent;
130	padding: 0;
131	margin-top: 2rem;
132	width: 100%;
133	}
134	.cart-summary h3 {
135	font-size: 0.75rem;
136	font-weight: 500;
137	margin-bottom: 1.25rem;
138	color: var(--text-color);
139	text-transform: uppercase;
140	letter-spacing: 0.1em;
141	}
142	.summary-row {
143	display: flex;
144	justify-content: space-between;
145	align-items: center;
146	margin-bottom: 0.75rem;
147	padding-bottom: 0.75rem;
148	border-bottom: 1px solid var(--border-color);
149	font-size: 0.875rem;
150	}
151	.summary-row:last-of-type {
152	border-bottom: none;
153	margin-bottom: 0;
154	}
155	.summary-row span:first-child {
156	color: var(--text-light);
157	font-weight: 400;
158	}
159	.summary-row span:last-child {
160	font-weight: 500;
161	color: var(--text-color);
162	}
163	.summary-row.total {
164	font-size: 1rem;
165	font-weight: 600;
166	border-bottom: none;
167	padding-top: 0.75rem;
168	margin-top: 0.75rem;
169	border-top: 2px solid var(--border-color);
170	}
171	.summary-row.total span:first-child {
172	color: var(--text-color);
173	font-weight: 600;
174	}
175	.summary-row.total span:last-child {
176	color: var(--text-color);
177	font-size: 1.125rem;
178	}
179	.cart-summary .btn {
180	width: 100%;
181	margin-top: 1rem;
182	text-align: center;
183	padding: 0.875rem;
184	font-size: 0.875rem;
185	font-weight: 500;
186	border-radius: 4px;
187	transition: all 0.2s ease;
188	text-decoration: none;
189	display: block;
190	}
191	.cart-summary .btn-success {
192	background: var(--text-color);
193	color: white;
194	border: none;
195	}
196	.cart-summary .btn-success:hover {
197	background: var(--text-color);
198	opacity: 0.85;
199	}
200	.cart-summary .btn:not(.btn-success) {
201	background: transparent;
202	border: 1px solid var(--border-color);
203	color: var(--text-color);
204	}
205	.cart-summary .btn:not(.btn-success):hover {
206	background: var(--bg-color);
207	border-color: var(--text-color);
208	}
209	.empty-cart {
210	text-align: center;
211	padding: 4rem 2rem;
212	background: transparent;
213	}
214	.empty-cart-icon {
215	font-size: 3rem;
216	margin-bottom: 1rem;
217	opacity: 0.15;
218	}
219	.empty-cart h3 {
220	font-size: 1.25rem;
221	font-weight: 500;
222	margin-bottom: 0.5rem;
223	color: var(--text-color);
224	}
225	.empty-cart p {
226	color: var(--text-light);
227	margin-bottom: 1.5rem;
228	font-size: 0.875rem;
229	}
230	.empty-cart .btn {
231	padding: 0.875rem 1.5rem;
232	font-size: 0.875rem;
233	}
234	@media (max-width: 968px) {
235	.cart-container {
236	margin: 1.5rem auto;
237	padding: 0 1rem;
238	}
239	.cart-summary {
240	margin-top: 1.5rem;
241	}
242	.cart-item {
243	flex-wrap: wrap;
244	padding: 1rem 0;
245	}
246	.cart-item-image {
247	width: 70px;
248	height: 70px;
249	margin-right: 1rem;
250	}
251	.cart-item-total {
252	width: 100%;
253	text-align: left;
254	margin-top: 0.75rem;
255	padding-top: 0.75rem;
256	padding-left: 0;
257	border-top: 1px solid var(--border-color);
258	min-width: auto;
259	}
260	.cart-item-quantity {
261	width: 100%;
262	}
263	}
264	@media (max-width: 640px) {
265	.cart-container {
266	margin: 1rem auto;
267	padding: 0 1rem;
268	}
269	.cart-item {
270	padding: 0.875rem 0;
271	}
272	.cart-item-image {
273	width: 60px;
274	height: 60px;
275	margin-right: 0.875rem;
276	}
277	.cart-item-name {
278	font-size: 0.9375rem;
279	}
280	.cart-item-total {
281	font-size: 0.9375rem;
282	}
283	}
284	</style>
285	</head>
286	<body>
287	<header>
288	<nav class="navbar container">
289	<a th:href="@{/}" class="navbar-brand">
290	<h1>Webshop</h1>
291	</a>
292	<div class="navbar-actions">
293	<a th:href="@{/cart}" class="cart-button" aria-label="Cart">
294	<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
295	<span id="cartCount" class="cart-badge" style="display: none;">0</span>
296	</a>
297	</div>
298	</nav>
299	</header>
300
301	<main class="container">
302	<div class="cart-container">
303	<div class="cart-header">
304	<h2>Shopping Cart</h2>
305	</div>
306	<div id="cartContent">
307	<div class="loading">Loading cart...</div>
308	</div>
309	</div>
310	</main>
311
312	<!-- Notification Container -->
313	<div id="notificationContainer" class="notification-container"></div>
314
315	<script th:src="@{/js/notifications.js}"></script>
316	<script th:src="@{/js/csrf.js}"></script>
317	<script th:src="@{/js/cart.js}"></script>
318	</body>
319	</html>
320

backend

File History: src/main/resources/templates/cart.html

File Content at Commit f0438c2

Commits