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