source: source/freeparkingspace/src/main/resources/templates/reservation.html

Last change on this file was 31d67c0, checked in by zlatko2810 <zlatko.stojanovski@…>, 2 years ago

proekt
  • Property mode set to 100644
File size: 10.8 KB
Line 
1<!DOCTYPE html>
2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
3 <head>
4 <base href="${pageContext.request.contextPath}">
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <title>РЕЗЕРВАЦИЈA!</title>
8 <meta name="description" content="">
9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <style>
11 @import url('https://fonts.googleapis.com/css?family=Montserrat:500');
12 @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:ital,wght@0,900;1,900&display=swap');
13
14 :root {
15 --shadow-color: #FF9E9E;
16 --shadow-color-light: white;
17 }
18
19 .navbar {
20 max-width: 100%;
21 height: 100%;
22 background: rgba(0,0,0,0.25);
23 }
24
25 header {
26 display: flex;
27 justify-content: center;
28 align-items: center;
29 padding: 30px 10%;
30 max-width: 100%;
31 height: 10%;
32 background-color: rgb(0, 0, 0, 0.25);
33 border: none;
34 }
35
36 table{
37 color: white;
38 font-size: 0.3rem;
39 background: rgba(255,255,255,0.05);
40 }
41
42 img {
43 width: 120px;
44 height: 120px;
45 }
46 html{
47 text-align: center;
48 }
49 body {
50 padding: 0;
51 margin: 0;
52 max-width: 100%;
53 background-image: url('../images/background4.jpg');
54 object-fit: cover;
55 height: 100vh;
56 background-size: cover;
57 background-repeat: repeat;
58 text-align: center;
59 }
60
61
62 li,
63 a:not(.btn) {
64 font-family: "Montserrat", sans-serif;
65 font-weight: 500;
66 font-size: 1.2rem;
67 text-decoration: none;
68 color: white;
69 padding: 10%;
70 list-style: none;
71 }
72
73 h1{
74 font-family: 'Roboto', sans-serif;
75 font-width: 900;
76 font-size: 5rem;
77
78 }
79
80 .right {
81 display: flex;
82 align-items: center;
83 justify-content: center;
84 background-color: rgb(0, 225, 255, 0.05);
85 border-radius: 10%;
86 flex-direction: row;
87 margin-left: 25%;
88 width: 17%;
89 height: 2%;
90 }
91
92 .right a {
93 margin: -5px;
94 }
95 .navbar{
96 max-width: 100%;
97 height: 100vh;
98 }
99
100 .reg {
101 color: rgb(255, 0, 0);
102 }
103
104 ul {
105 display: flex;
106 flex-direction: row;
107 }
108
109 .reg:hover {
110 color: white;
111 }
112 .container-main{
113 display: flex;
114 flex-direction: column;
115 align-items: center;
116 justify-content: center;
117 width: 100%;
118 height: 100%;
119 background-color: rgba(0,0,0,0.50);
120 margin-left: 50%;
121 margin-bottom: 10%;
122 }
123 P{
124 font-family: "Montserrat", sans-serif;
125 font-weight: 500;
126 font-size: 4rem;
127 text-decoration: none;
128 color: white;
129 width: 80%;
130 list-style: none;
131 margin-top: -2%;
132 }
133
134 .glow{
135 text-transform: uppercase;
136 height: auto;
137 text-align: center;
138 }
139
140 .glow {
141 color: white;
142 animation: neon 3s infinite;
143 }
144
145 .h1Combined{
146 display: flex;
147 flex-direction: row;
148 align-items: center;
149 justify-content: center;
150 max-width: 100%;
151 }
152
153 @keyframes neon {
154 0% {
155 text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
156 0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
157 0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
158 }
159 50% {
160 text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
161 0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
162 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
163 }
164 100% {
165 text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
166 0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
167 0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
168 }
169 }
170
171 .btn{
172 text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
173 border: 1px solid #b70000;
174 color: white;
175 font-size: 2vw;
176 border:none;
177 background: #af0101;
178 padding: 0.5rem 1.3rem;
179 border-radius: 10%;
180 cursor: pointer;
181 transition: 1s ease;
182 display:block;
183 margin-left: 40%;
184 margin-top: 1.5%;
185 box-shadow: 3px 2px 10px #d50101,
186 -1px -1px 1px #e60000;
187 font-family: 'Roboto', sans-serif;
188 font-weight: 500;
189 text-decoration: none;
190 transition: infinite 1s ease;
191 }
192
193 .btn:hover{
194 background-color: #58ACFA;
195 color: white;
196 }
197
198 .btn2{
199 text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
200 border: 1px solid #b70000;
201 color: white;
202 font-size: 1.5rem;
203 border:none;
204 background: #af0101;
205 padding: 0.5rem 1.3rem;
206 border-radius: 10%;
207 cursor: pointer;
208 transition: 1s ease;
209 display:block;
210 box-shadow: 3px 2px 10px #d50101,
211 -1px -1px 1px #e60000;
212 font-family: 'Roboto', sans-serif;
213 font-weight: 500;
214 text-decoration: none;
215 transition: infinite 1s ease;
216 }
217
218 .btn2:hover{
219 background-color: #58ACFA;
220 color: white;
221 }
222 .forma{
223 display:flex;
224 flex-direction: row;
225 align-items: center;
226 justify-content: center;
227 border: 1px solid red;
228 padding: 30px;
229 font-size: 2rem;
230
231
232 }
233 .vreme{
234 display: flex;
235 flex-direction: row;
236 align-items: center;
237 justify-content: center;
238 }
239 input{
240 margin-left: 10px;
241 }
242 .formi{
243 margin-top: -10%;
244 margin-bottom: 10%;
245 }
246
247
248 </style>
249</head>
250
251<body>
252<div class="navbar">
253 <!-- <header th:replace="fragments/header.html">-->
254 <!-- </header>-->
255 <main>
256 <div class="container-main">
257 <div class="h1Combined" style="margin-bottom: 5%">
258 <h1 style="color:white">FreeParking <h1 style="color:red">Space</h1></h1>
259 </div>
260 <div class="formi">
261 <form class="form-signin mt-xl-5" method="post" action="/reservation/parking-place/add">
262
263
264 <div class="forma">
265 <label for="reg_tablica" style="color: white;font-size: 1.5rem">Вашата регистација за автомобил</label>
266 <input type="text" id="reg_tablica" name="reg_tablica" class="form-control" placeholder="XX-XXXX-XX"
267 required="" >
268 </div>
269
270 <div class="forma">
271 <label for="marka" style="color: white;font-size: 1.5rem">Марка за автомобилот</label>
272 <input type="text" id="marka" name="marka" class="form-control" placeholder="BMW X6 / MERCEDES C220"
273 required="" >
274 </div>
275 <div class="forma">
276 <label for="boja" style="color: white;font-size: 1.5rem">Боја за автомобилот</label>
277 <input type="text" id="boja" name="boja" class="form-control" placeholder="Bela / Crna / Crvena"
278 required="" >
279 </div>
280
281 <div class="vreme">
282 <div class="forma">
283 <label for="pocetno_vreme" style="color: white;font-size: 1.5rem">Резервација од</label>
284 <input type="datetime-local" id="pocetno_vreme" name="pocetno_vreme" class="form-control" placeholder="2022-02-25 17:32:14.093681"
285 required="" >
286 </div>
287 <div class="forma">
288 <label for="krajno_vreme" style="color: white;font-size: 1.5rem">Резервација до</label>
289 <input type="datetime-local" id="krajno_vreme" name="krajno_vreme" class="form-control" placeholder="2022-02-25 19:32:14.093681"
290 required="" >
291 </div>
292 </div>
293 <label style="opacity: 0%">Parking ID</label>
294 <select name="broj_na_pmesta" class="form-control" autocomplete="off" style="opacity: 0%">
295 <option th:if="${parking} != null"
296 th:selected="${parking.getBrojNaPmesta() != null}"
297 th:each="parking : ${parking}"
298 th:value="${parking.getBrojNaPmesta()}"
299 th:text="${parking.getBrojNaPmesta()}">
300 </option>
301 <option th:if="${parking} == null"
302 th:each="parking : ${parking}"
303 th:value="${parking.getBrojNaPmesta()}"
304 th:text="${parking.getBrojNaPmesta()}">
305 </option>
306 </select>
307 <button class="btn" type="submit">Reserve</button>
308 </form>
309 </div>
310 </div>
311 </main>
312 <!--<footer th:replace="fragments/footer"/>-->
313</div>
314</body>
Note: See TracBrowser for help on using the repository browser.