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

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

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