source: src/main/resources/templates/register.html

Last change on this file was a51a591, checked in by colovik <j.colovik@…>, 14 months ago

final
  • Property mode set to 100644
File size: 10.7 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 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
5 <style>
6 .navbar {
7 background: darkkhaki;
8 }
9
10 span {
11 color: #b2d7ff;
12 text-decoration: none;
13 background: transparent;
14 }
15
16 ul {
17 text-align: justify;
18 margin-left: 50px;
19 margin-right: 50px;
20
21 }
22
23 body {
24 background-image: url("https://images.unsplash.com/photo-1511795409834-ef04bbd61622?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=869&q=80");
25 background-size: 100%;
26 background-repeat: no-repeat;
27 background-position: center top -150px; /* Adjust the background position to move the image up */
28 }
29
30 .navbar-brand {
31 color: #343a40;
32 font-weight: bold;
33 }
34
35 .nav-link {
36 color: #343a40;
37 font-weight: bold;
38
39 }
40
41 footer {
42 position: fixed;
43 bottom: 0;
44 left: 0;
45 right: 0;
46 background: #111;
47 height: auto;
48 width: 100vw;
49 padding-top: 40px;
50 color: #fff;
51 }
52
53 .footer-content {
54 display: flex;
55 align-items: center;
56 justify-content: center;
57 flex-direction: column;
58 text-align: center;
59 height: 80px;
60 }
61
62 .footer-content h3 {
63 font-size: 2.1rem;
64 font-weight: 500;
65 text-transform: capitalize;
66 line-height: 3rem;
67 margin-top: 20px;
68 }
69
70 .footer-content p {
71 max-width: 500px;
72 margin: 10px auto;
73 line-height: 28px;
74 font-size: 14px;
75 color: #cacdd2;
76 }
77
78 .socials {
79 list-style: none;
80 display: flex;
81 align-items: center;
82 justify-content: center;
83 margin: 1rem 0 3rem 0;
84 }
85
86 .socials li {
87 margin: 0 10px;
88 }
89
90 .socials a {
91 text-decoration: none;
92 color: #fff;
93 border: 1.1px solid white;
94 padding: 5px;
95 border-radius: 50%;
96 }
97
98 .socials a i {
99 font-size: 1.1rem;
100 width: 20px;
101 transition: color .4s ease;
102 }
103
104 .socials a:hover i {
105 color: aqua;
106 }
107
108 .footer-bottom p {
109 float: left;
110 font-size: 14px;
111 word-spacing: 2px;
112 text-transform: capitalize;
113 }
114
115 .footer-bottom p a {
116 color: #44bae8;
117 font-size: 16px;
118 text-decoration: none;
119 }
120
121 .footer-bottom span {
122 text-transform: uppercase;
123 opacity: .4;
124 font-weight: 200;
125 }
126
127 .footer-menu ul {
128 display: flex;
129 }
130
131 .footer-menu ul li {
132 padding-right: 10px;
133 display: block;
134 }
135
136 .footer-menu ul li a {
137 color: #cfd2d6;
138 text-decoration: none;
139 }
140
141 .footer-menu ul li a:hover {
142 color: #27bcda;
143 }
144
145 @media (max-width: 500px) {
146 .footer-menu ul {
147 display: flex;
148 margin-top: 10px;
149 margin-bottom: 20px;
150 }
151 }
152
153 .kopce {
154 background-color: mediumslateblue;
155 border: none;
156 color: white;
157 padding: 15px 32px;
158 text-align: center;
159 text-decoration: none;
160 display: inline-block;
161 font-size: 16px;
162 margin-left: 20px;
163 }
164
165 /*#logo{*/
166 /* width:160px;*/
167 /* height: 60px*/
168 /*}*/
169
170 h1 {
171 color: black;
172 font-size: 60px;
173 font-weight: 700;
174 letter-spacing: 8px;
175 margin-bottom: 20px;
176 margin-left: auto;
177 margin-right: auto;
178 margin-top: 50px;
179 position: relative;
180 animation: text 3s 1;
181 }
182
183 @keyframes text {
184 0% {
185 color: black;
186 margin-bottom: -40px;
187 }
188 30% {
189 letter-spacing: 25px;
190 margin-bottom: -40px;
191 }
192 85% {
193 letter-spacing: 8px;
194 margin-bottom: -40px;
195 }
196 }
197
198 footer {
199 width: 100%;
200 padding: 20px;
201 box-sizing: border-box;
202 }
203
204 #signUpText{
205 color: white;
206 font-weight: 500;
207 }
208 </style>
209 <meta name="viewport" content="width=device-width, initial-scale=1">
210 <meta charset="UTF-8"/>
211 <title>Sign Up</title>
212 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
213 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
214 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
215 integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
216 crossorigin="anonymous"></script>
217 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
218 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
219 crossorigin="anonymous"></script>
220 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
221 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
222 crossorigin="anonymous"></script>
223</head>
224
225<body>
226<div>
227 <nav class="navbar navbar-expand-md ">
228 <div class="container">
229 <!-- <img class="u-image u-image-default u-image-1" src="../static/logoeventra.png" alt="" data-image-width="648" data-image-height="292">-->
230 <!-- <a class="navbar-brand" href="/home"></a>-->
231 <a class="navbar-brand"> Eventrra</a>
232 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
233 aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
234 <span class="navbar-toggler-icon"></span>
235 </button>
236
237 <div class="collapse navbar-collapse justify-content-end" id="navbarsExampleDefault">
238 <ul class="navbar-nav m-auto">
239
240 <li th:if="${session.user!=null}" class="nav-item m-auto">
241 <a class="nav-link active" href="/">Home</a>
242 </li>
243
244 <li th:if="${session.user!=null and session.role == 'ROLE_CLIENT'}"
245 class="nav-item m-auto">
246 <a class="kopce" href="/host_event">Host an event</a>
247 </li>
248 <li th:if="${session.user!=null}" class="nav-item m-auto">
249 <a class="nav-link active" href="/my_events">Scheduled events</a>
250 </li>
251 </ul>
252
253 <form class="form-inline my-2 my-lg-0">
254
255 <div th:if="${session.user==null}">
256 <a class="btn btn-light btn-sm ml-3" href="/login">
257 Login
258 </a>
259
260 <a class="btn btn-light btn-sm ml-3" href="/register">
261 Sign up
262 </a>
263 </div>
264 <div style="text-align: center" th:if="${session.user!=null}" class="nav-item m-auto">
265 <a th:text="${session.user.username}" style="color:white; font-size: 20px;"
266 class="nav-link active" href="/login/profile"></a>
267 </div>
268
269 <div th:if="${session.user!=null}">
270 <a class="btn btn-light btn-sm ml-3" href="/logout">
271 Log out
272 </a>
273 </div>
274 </form>
275 </div>
276 </div>
277 </nav>
278</div>
279 <br>
280 <form th:method="POST" th:action="@{/register}">
281 <div class="container">
282 <form class="form-signin mt-xl-5" method="post" action="/register">
283 <h2 class="form-signin-heading" id="signUpText">Register</h2>
284 <p>
285 <label for="name" class="sr-only">Name</label>
286 <input type="text" id="name" name="name" class="form-control" placeholder="Name" required="" autofocus="">
287 </p>
288 <p>
289 <label for="username" class="sr-only">Username</label>
290 <input type="text" id="username" name="username" class="form-control" placeholder="Username" required="" autofocus="">
291 </p>
292 <p>
293 <label class="sr-only">Phone number</label>
294 <input type="text" id="phone" name="number" class="form-control" placeholder="Phone" required="" autofocus="">
295 </p>
296 <p>
297 <label for="password" class="sr-only">Password</label>
298 <input type="password" id="password" name="password" class="form-control" placeholder="Password" required="">
299 </p>
300 <p>
301 <label for="rpassword" class="sr-only">Repeat Password</label>
302 <input type="password" id="rpassword" name="rpassword" class="form-control" placeholder="Repeat Password" required="">
303 </p>
304 <p>
305 <label for="role" class="sr-only">
306 Choose a role
307 </label>
308 <select class="form-control" id="role" name="role" required>
309 <option value="client">Client</option>
310 <option value="band">Band</option>
311 <option value="photographer">Photographer</option>
312 <option value="waiter">Waiter</option>
313 <option value="catering">Catering Company</option>
314 </select>
315 </p>
316
317 <div th:if="${hasError}">
318 <div th:text="${error}" class="text-danger"></div>
319 </div>
320 </form>
321 <button class="btn btn-lg btn-primary btn-block" type="submit">Sign up</button>
322 </div>
323 </form>
324 <br>
325 <a href="/login" class="btn btn-lg btn-block btn-light">Already have an account? Login here!</a>
326</body>
327</html>
Note: See TracBrowser for help on using the repository browser.