source: src/main/resources/templates/user-order.ftl@ 4d7e387

Last change on this file since 4d7e387 was 4d7e387, checked in by makyjovanovsky <mjovanovski04@…>, 18 months ago

commit 1
  • Property mode set to 100644
File size: 8.5 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Order Products</title>
6 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
7 <!-- Font Awesome -->
8 <link
9 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
10 rel="stylesheet"
11 />
12 <!-- Google Fonts -->
13 <link
14 href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
15 rel="stylesheet"
16 />
17 <!-- MDB -->
18 <link
19 href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.css"
20 rel="stylesheet"
21 />
22 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
23 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
24 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
25 <style>
26 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
27
28 * {
29 -webkit-box-sizing: border-box;
30 box-sizing: border-box;
31 margin: 0;
32 padding: 0;
33 }
34
35
36 body {
37 font-family: 'Roboto', sans-serif;
38 }
39
40 a {
41 text-decoration: none;
42 }
43
44 .product-card {
45 width: 380px;
46 position: relative;
47 box-shadow: 0 2px 7px #dfdfdf;
48 margin: 50px auto;
49 background: #fafafa;
50 }
51
52 .badge {
53 position: absolute;
54 left: 0;
55 top: 20px;
56 text-transform: uppercase;
57 font-size: 13px;
58 font-weight: 700;
59 background: red;
60 color: #fff;
61 padding: 3px 10px;
62 }
63
64 .product-tumb {
65 display: flex;
66 align-items: center;
67 justify-content: center;
68 height: 300px;
69 padding: 50px;
70 background: #f0f0f0;
71 }
72
73 .product-tumb img {
74 width: 300px;
75 height: 100%;
76 object-fit: contain;
77 background: #f0f0f0;
78 }
79
80 .product-details {
81 padding: 30px;
82 }
83
84 .product-catagory {
85 display: block;
86 font-size: 12px;
87 font-weight: 700;
88 text-transform: uppercase;
89 color: #ccc;
90 margin-bottom: 18px;
91 }
92
93 .product-details h4 a {
94 font-weight: 500;
95 display: block;
96 margin-bottom: 18px;
97 text-transform: uppercase;
98 color: #363636;
99 text-decoration: none;
100 transition: 0.3s;
101 }
102
103 .product-details h4 a:hover {
104 color: #fbb72c;
105 }
106
107 .product-details p {
108 font-size: 15px;
109 line-height: 22px;
110 margin-bottom: 18px;
111 color: #999;
112 }
113
114 .product-bottom-details {
115 overflow: hidden;
116 border-top: 1px solid #eee;
117 padding-top: 20px;
118 }
119
120 .product-bottom-details div {
121 float: left;
122 width: 50%;
123 }
124
125 .product-price {
126 font-size: 18px;
127 color: #fbb72c;
128 font-weight: 600;
129 }
130
131 .product-price small {
132 font-size: 80%;
133 font-weight: 400;
134 text-decoration: line-through;
135 display: inline-block;
136 margin-right: 5px;
137 }
138
139 .product-links {
140 text-align: right;
141 }
142
143 .product-links a {
144 display: inline-block;
145 margin-left: 5px;
146 color: #e1e1e1;
147 transition: 0.3s;
148 font-size: 17px;
149 }
150
151 .product-links a:hover {
152 color: #fbb72c;
153 }
154
155 .grid-container {
156 display: grid;
157 grid-template-columns: auto auto auto;
158 padding: 10px;
159 }
160
161 #cart {
162 position: fixed;
163 right: 10px;
164 bottom: 10px;
165 }
166
167 </style>
168</head>
169<body>
170
171<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
172 <a class="navbar-brand" href="#">Salon Bella</a>
173 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
174 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
175 <span class="navbar-toggler-icon"></span>
176 </button>
177
178 <div class="collapse navbar-collapse" id="navbarSupportedContent">
179 <ul class="navbar-nav mr-auto">
180 <li class="nav-item ">
181 <a class="nav-link" href="/userDashboard">Home <span class="sr-only">(current)</span></a>
182 </li>
183
184 <li class="nav-item dropdown">
185 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
186 aria-haspopup="true" aria-expanded="false">
187 Functions - Reservations
188 </a>
189 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
190 <a class="dropdown-item" href="/schedule-reservation">Schedule Reservations</a>
191 <a class="dropdown-item" href="/my-reservations">My scheduled reservations</a>
192 </div>
193 </li>
194
195 <li class="nav-item dropdown">
196 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
197 aria-haspopup="true" aria-expanded="false">
198 Functions - Orders
199 </a>
200 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
201 <a class="dropdown-item" href="/order">Order Products</a>
202 <a class="dropdown-item" href="/my-orders">Ordered Products</a>
203 </div>
204 </li>
205
206 </ul>
207 <form class="form-inline my-2 my-lg-0" method="get" action="/logout">
208 <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Log out</button>
209 </form>
210 </div>
211</nav>
212<br>
213<div class="grid-container">
214
215 <#if products??>
216 <#list products as product>
217 <div class="container d-flex justify-content-center mt-50 mb-50">
218 <div class="product-card">
219 <div class="badge">Hot</div>
220 <div class="product-tumb">
221 <img src="data:image/jpeg;base64,${product['base64']}" alt=""/>
222 </div>
223 <div class="product-details">
224 <span class="product-catagory">${product['category']}</span>
225 <h4><a href="">${product['name']}</a></h4>
226 <p>${product['description']}</p>
227 <div class="product-bottom-details">
228 <div class="product-price">${product['price']} ден.</div>
229 <div class="product-links">
230 </div>
231 </div>
232 <br>
233 <form method="post" action="/add-to-cart">
234 <input type="text" value="${product['id']}" name="id" hidden />
235 <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Add to cart</button>
236 </form>
237
238 </div>
239 </div>
240 </div>
241 </#list>
242 </#if>
243</div>
244
245<form method="get" action="/my-cart">
246 <button id="cart" type="submit" class="btn btn-primary btn-lg"><i class="fa fa-shopping-cart"></i></button>
247</form>
248
249
250
251<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
252 integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
253 crossorigin="anonymous"></script>
254<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
255 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
256 crossorigin="anonymous"></script>
257<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
258 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
259 crossorigin="anonymous"></script>
260<script
261 type="text/javascript"
262 src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.js"
263></script>
264</body>
265</html>
Note: See TracBrowser for help on using the repository browser.