source: src/main/resources/templates/more_details.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: 9.3 KB
RevLine 
[a51a591]1<!DOCTYPE html>
2<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
3<head>
4 <style>
5 .navbar {
6 background: darkkhaki;
7 }
8
9 span {
10 color: #b2d7ff;
11 text-decoration: none;
12 background: transparent;
13 }
14
15 ul {
16 text-align: justify;
17 margin-left: 50px;
18 margin-right: 50px;
19
20 }
21
22 body {
23 background-color: wheat;
24 }
25
26 .navbar-brand {
27 color: #343a40;
28 font-weight: bold;
29 }
30
31 .nav-link {
32 color: #343a40;
33 font-weight: bold;
34
35 }
36
37 footer {
38 position: fixed;
39 bottom: 0;
40 left: 0;
41 right: 0;
42 background: #111;
43 height: auto;
44 width: 100vw;
45 padding-top: 40px;
46 color: #fff;
47 box-sizing: border-box;
48 }
49
50 .footer-content {
51 display: flex;
52 align-items: center;
53 justify-content: center;
54 flex-direction: column;
55 text-align: center;
56 height: 80px;
57 }
58
59 .footer-content h3 {
60 font-size: 2.1rem;
61 font-weight: 500;
62 text-transform: capitalize;
63 line-height: 3rem;
64 margin-top: 20px;
65 }
66
67 .footer-content p {
68 max-width: 500px;
69 margin: 10px auto;
70 line-height: 28px;
71 font-size: 14px;
72 color: #cacdd2;
73 }
74
75 .socials {
76 list-style: none;
77 display: flex;
78 align-items: center;
79 justify-content: center;
80 margin: 1rem 0 3rem 0;
81 }
82
83 .socials li {
84 margin: 0 10px;
85 }
86
87 .socials a {
88 text-decoration: none;
89 color: #fff;
90 border: 1.1px solid white;
91 padding: 5px;
92 border-radius: 50%;
93 }
94
95 .socials a i {
96 font-size: 1.1rem;
97 width: 20px;
98 transition: color .4s ease;
99 }
100
101 .socials a:hover i {
102 color: aqua;
103 }
104
105 .footer-bottom p {
106 float: left;
107 font-size: 14px;
108 word-spacing: 2px;
109 text-transform: capitalize;
110 }
111
112 .footer-bottom p a {
113 color: #44bae8;
114 font-size: 16px;
115 text-decoration: none;
116 }
117
118 .footer-bottom span {
119 text-transform: uppercase;
120 opacity: .4;
121 font-weight: 200;
122 }
123
124 .footer-menu ul {
125 display: flex;
126 }
127
128 .footer-menu ul li {
129 padding-right: 10px;
130 display: block;
131 }
132
133 .footer-menu ul li a {
134 color: #cfd2d6;
135 text-decoration: none;
136 }
137
138 .footer-menu ul li a:hover {
139 color: #27bcda;
140 }
141
142 @media (max-width: 500px) {
143 .footer-menu ul {
144 display: flex;
145 margin-top: 10px;
146 margin-bottom: 20px;
147 }
148 }
149
150 .kopce {
151 background-color: mediumslateblue;
152 border: none;
153 color: white;
154 padding: 15px 32px;
155 text-align: center;
156 text-decoration: none;
157 display: inline-block;
158 font-size: 16px;
159 margin-left: 20px;
160 }
161
162 /*#logo{*/
163 /* width:160px;*/
164 /* height: 60px*/
165 /*}*/
166 h1 {
167 font-size: 1rem;
168 font-weight: 200;
169 /*letter-spacing: 8px;*/
170 margin-left: 20px;
171 margin-right: 20px;
172 position: relative;
173 background-color: #343a40;
174 }
175
176 p, table {
177 margin-left: 40px;
178 font-size: 20px;
179 }
180
181 @keyframes text {
182 0% {
183 color: black;
184 margin-bottom: -40px;
185 }
186 30% {
187 letter-spacing: 25px;
188 margin-bottom: -40px;
189 }
190 85% {
191 letter-spacing: 8px;
192 margin-bottom: -40px;
193 }
194 }
195 </style>
196
197 <meta name="viewport" content="width=device-width, initial-scale=1">
198 <meta charset="UTF-8">
199 <title>My events</title>
200 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
201 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
202 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
203 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
204 integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
205 crossorigin="anonymous"></script>
206 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
207 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
208 crossorigin="anonymous"></script>
209 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
210 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
211 crossorigin="anonymous"></script>
212</head>
213<body>
214 <div>
215 <nav class="navbar navbar-expand-md ">
216 <div class="container">
217 <!-- <img class="u-image u-image-default u-image-1" src="../static/logoeventra.png" alt="" data-image-width="648" data-image-height="292">-->
218 <!-- <a class="navbar-brand" href="/home"></a>-->
219 <a class="navbar-brand" style="color: yellow"> Eventrra</a>
220 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
221 aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
222 <span class="navbar-toggler-icon"></span>
223 </button>
224
225 <div class="collapse navbar-collapse justify-content-end" id="navbarsExampleDefault">
226 <ul class="navbar-nav m-auto">
227
228 <li th:if="${session.user!=null}" class="nav-item m-auto">
229 <a class="nav-link active" href="/">Home</a>
230 </li>
231
232 <li th:if="${session.user!=null and session.role == 'ROLE_CLIENT'}"
233 class="nav-item m-auto">
234 <a class="kopce" href="/host_event">Host an event</a>
235 </li>
236 <li th:if="${session.user!=null}" class="nav-item m-auto">
237 <a class="nav-link active" href="/my_events">Scheduled events</a>
238 </li>
239 </ul>
240 </div>
241 </div>
242 </nav>
243 </div>
244 <br>
245 <br>
246 <div>
247 <div>
248 <h1>Time</h1>
249 <p th:text="${event.getTime()}"></p>
250
251 <h1>Date</h1>
252 <p th:text="${event.getDate()}"></p>
253
254 <h1>Location</h1>
255 <p th:text="${event.getLocation()}"></p>
256
257 <h1>Type</h1>
258 <p th:text="${event.getType()}"></p>
259
260 <h1>Description</h1>
261 <p th:text="${event.getDescription()}"></p>
262
263 <h1>Bands</h1>
264 <table>
265 <tr th:each="band : ${bandList}">
266 <td th:text="${band}"></td>
267 </tr>
268 </table>
269
270 <h1>Caterings</h1>
271 <table>
272 <tr th:each="cat : ${cateringList}">
273 <td th:text="${cat}"></td>
274 </tr>
275 </table>
276
277 <h1>Photographers</h1>
278 <table>
279 <tr th:each="ph : ${photographerList}">
280 <td th:text="${ph}"></td>
281 </tr>
282 </table>
283
284 <h1>Status</h1>
285 <p th:text="${event.getStatus()}"></p>
286
287 <form method="post" th:if="${session.role == 'ROLE_ADMIN'}"
288 th:action="@{'/approveEvent/{id}' (id=${event.getId()}) }">
289 <button class="btn btn-primary btn-block btn-lg" type="submit">Approve Event</button>
290 </form>
291 <br>
292 <form method="post" th:if="${session.role == 'ROLE_ADMIN'}"
293 th:action="@{'/rejectEvent/{id}' (id=${event.getId()}) }">
294 <button class="btn btn-primary btn-block btn-lg" type="submit">Reject Event</button>
295 </form>
296 <br>
297 </div>
298 <br>
299 <br>
300 <br>
301 <br>
302 <br>
303 </div>
304 <footer>
305 <div class="footer-content">
306 <br>
307 <h3>Contact us</h3>
308
309 <ul class="socials">
310 <li><a href="#"><i class="fa fa-facebook"></i></a></li>
311 <li><a href="#"><i class="fa fa-twitter"></i></a></li>
312 <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
313 <li><a href="#"><i class="fa fa-youtube"></i></a></li>
314 <li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
315 </ul>
316 </div>
317 </footer>
318</body>
319</html>
Note: See TracBrowser for help on using the repository browser.