source: src/main/resources/templates/login.html@ a51a591

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

final
  • Property mode set to 100644
File size: 10.5 KB
Line 
1<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="">
2<head>
3 <title>Login</title>
4 <head>
5 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
6 <style>
7 .navbar {
8 background: darkkhaki;
9 }
10
11 span {
12 color: #b2d7ff;
13 text-decoration: none;
14 background: transparent;
15 }
16
17 ul {
18 text-align: justify;
19 margin-left: 50px;
20 margin-right: 50px;
21
22 }
23
24 body {
25 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");
26 background-size: 100%;
27 background-repeat: no-repeat;
28 background-position: center top -150px; /* Adjust the background position to move the image up */
29 }
30
31 .navbar-brand {
32 color: #343a40;
33 font-weight: bold;
34 }
35
36 .nav-link {
37 color: #343a40;
38 font-weight: bold;
39
40 }
41
42 footer {
43 position: fixed;
44 bottom: 0;
45 left: 0;
46 right: 0;
47 background: #111;
48 height: auto;
49 width: 100vw;
50 padding-top: 40px;
51 color: #fff;
52 }
53
54 .footer-content {
55 display: flex;
56 align-items: center;
57 justify-content: center;
58 flex-direction: column;
59 text-align: center;
60 height: 80px;
61 }
62
63 .footer-content h3 {
64 font-size: 2.1rem;
65 font-weight: 500;
66 text-transform: capitalize;
67 line-height: 3rem;
68 margin-top: 20px;
69 }
70
71 .footer-content p {
72 max-width: 500px;
73 margin: 10px auto;
74 line-height: 28px;
75 font-size: 14px;
76 color: #cacdd2;
77 }
78
79 .socials {
80 list-style: none;
81 display: flex;
82 align-items: center;
83 justify-content: center;
84 margin: 1rem 0 3rem 0;
85 }
86
87 .socials li {
88 margin: 0 10px;
89 }
90
91 .socials a {
92 text-decoration: none;
93 color: #fff;
94 border: 1.1px solid white;
95 padding: 5px;
96 border-radius: 50%;
97 }
98
99 .socials a i {
100 font-size: 1.1rem;
101 width: 20px;
102 transition: color .4s ease;
103 }
104
105 .socials a:hover i {
106 color: aqua;
107 }
108
109 .footer-bottom p {
110 float: left;
111 font-size: 14px;
112 word-spacing: 2px;
113 text-transform: capitalize;
114 }
115
116 .footer-bottom p a {
117 color: #44bae8;
118 font-size: 16px;
119 text-decoration: none;
120 }
121
122 .footer-bottom span {
123 text-transform: uppercase;
124 opacity: .4;
125 font-weight: 200;
126 }
127
128 .footer-menu ul {
129 display: flex;
130 }
131
132 .footer-menu ul li {
133 padding-right: 10px;
134 display: block;
135 }
136
137 .footer-menu ul li a {
138 color: #cfd2d6;
139 text-decoration: none;
140 }
141
142 .footer-menu ul li a:hover {
143 color: #27bcda;
144 }
145
146 @media (max-width: 500px) {
147 .footer-menu ul {
148 display: flex;
149 margin-top: 10px;
150 margin-bottom: 20px;
151 }
152 }
153
154 .kopce {
155 background-color: mediumslateblue;
156 border: none;
157 color: white;
158 padding: 15px 32px;
159 text-align: center;
160 text-decoration: none;
161 display: inline-block;
162 font-size: 16px;
163 margin-left: 20px;
164 }
165
166 /*#logo{*/
167 /* width:160px;*/
168 /* height: 60px*/
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 #signInText{
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 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
212 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
213 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
214 integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
215 crossorigin="anonymous"></script>
216 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
217 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
218 crossorigin="anonymous"></script>
219 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
220 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
221 crossorigin="anonymous"></script>
222 </head>
223
224<body>
225 <div>
226 <nav class="navbar navbar-expand-md ">
227 <div class="container">
228 <!-- <img class="u-image u-image-default u-image-1" src="../static/logoeventra.png" alt="" data-image-width="648" data-image-height="292">-->
229 <!-- <a class="navbar-brand" href="/home"></a>-->
230 <a class="navbar-brand"> Eventrra</a>
231 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
232 aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
233 <span class="navbar-toggler-icon"></span>
234 </button>
235
236 <div class="collapse navbar-collapse justify-content-end" id="navbarsExampleDefault">
237 <ul class="navbar-nav m-auto">
238
239 <li th:if="${session.user!=null}" class="nav-item m-auto">
240 <a class="nav-link active" href="/">Home</a>
241 </li>
242
243 <li th:if="${session.user!=null and session.role == 'ROLE_CLIENT'}"
244 class="nav-item m-auto">
245 <a class="kopce" href="/host_event">Host an event</a>
246 </li>
247 <li th:if="${session.user!=null}" class="nav-item m-auto">
248 <a class="nav-link active" href="/my_events">Scheduled events</a>
249 </li>
250 </ul>
251
252 <form class="form-inline my-2 my-lg-0">
253
254 <div th:if="${session.user==null}">
255 <a class="btn btn-light btn-sm ml-3" href="/login">
256 Login
257 </a>
258
259 <a class="btn btn-light btn-sm ml-3" href="/register">
260 Sign up
261 </a>
262 </div>
263 <div style="text-align: center" th:if="${session.user!=null}" class="nav-item m-auto">
264 <a th:text="${session.user.username}" style="color:white; font-size: 20px;"
265 class="nav-link active" href="/login/profile"></a>
266 </div>
267
268 <div th:if="${session.user!=null}">
269 <a class="btn btn-light btn-sm ml-3" href="/logout">
270 Log out
271 </a>
272 </div>
273 </form>
274 </div>
275 </div>
276 </nav>
277 </div>
278 <br>
279 <form th:method="POST" th:action="@{/login}">
280 <div class="container">
281 <form class="form-signin mt-xl-5" method="post" action="/login">
282 <h2 class="form-signin-heading" id="signInText">Sign in</h2>
283 <p>
284 <label for="username" class="sr-only">Username</label>
285 <input type="text" id="username" name="username" class="form-control" placeholder="Username" required=""
286 autofocus="">
287 </p>
288 <p>
289 <label for="password" class="sr-only">Password</label>
290 <input type="password" id="password" name="password" class="form-control" placeholder="Password"
291 required="">
292 </p>
293
294 <div th:if="${hasError}">
295 <div th:text="${error}" class="text-danger"></div>
296 </div>
297 </form>
298 <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
299 </div>
300 </form>
301 <form th:method="GET" th:action="@{/register}">
302 <div>
303 <button class="btn btn-lg btn-light btn-block" type="submit">You don't have an account? Register here</button>
304 </div>
305 </form>
306 <br>
307</body>
308</html>
Note: See TracBrowser for help on using the repository browser.