| 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-color: wheat;
|
|---|
| 25 | }
|
|---|
| 26 |
|
|---|
| 27 | .navbar-brand {
|
|---|
| 28 | color: #343a40;
|
|---|
| 29 | font-weight: bold;
|
|---|
| 30 | }
|
|---|
| 31 |
|
|---|
| 32 | .nav-link {
|
|---|
| 33 | color: #343a40;
|
|---|
| 34 | font-weight: bold;
|
|---|
| 35 |
|
|---|
| 36 | }
|
|---|
| 37 |
|
|---|
| 38 | footer {
|
|---|
| 39 | position: fixed;
|
|---|
| 40 | bottom: 0;
|
|---|
| 41 | left: 0;
|
|---|
| 42 | right: 0;
|
|---|
| 43 | background: #111;
|
|---|
| 44 | height: auto;
|
|---|
| 45 | width: 100vw;
|
|---|
| 46 | padding-top: 40px;
|
|---|
| 47 | color: #fff;
|
|---|
| 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 | color: black;
|
|---|
| 168 | font-size: 60px;
|
|---|
| 169 | font-weight: 700;
|
|---|
| 170 | letter-spacing: 8px;
|
|---|
| 171 | margin-bottom: 20px;
|
|---|
| 172 | margin-left: auto;
|
|---|
| 173 | margin-right: auto;
|
|---|
| 174 | margin-top: 50px;
|
|---|
| 175 | position: relative;
|
|---|
| 176 | animation: text 3s 1;
|
|---|
| 177 | }
|
|---|
| 178 |
|
|---|
| 179 | @keyframes text {
|
|---|
| 180 | 0% {
|
|---|
| 181 | color: black;
|
|---|
| 182 | margin-bottom: -40px;
|
|---|
| 183 | }
|
|---|
| 184 | 30% {
|
|---|
| 185 | letter-spacing: 25px;
|
|---|
| 186 | margin-bottom: -40px;
|
|---|
| 187 | }
|
|---|
| 188 | 85% {
|
|---|
| 189 | letter-spacing: 8px;
|
|---|
| 190 | margin-bottom: -40px;
|
|---|
| 191 | }
|
|---|
| 192 | }
|
|---|
| 193 |
|
|---|
| 194 | footer {
|
|---|
| 195 | width: 100%;
|
|---|
| 196 | padding: 20px;
|
|---|
| 197 | box-sizing: border-box;
|
|---|
| 198 | }
|
|---|
| 199 |
|
|---|
| 200 | #hostEventText{
|
|---|
| 201 | color: white;
|
|---|
| 202 | font-weight: bold;
|
|---|
| 203 | }
|
|---|
| 204 | </style>
|
|---|
| 205 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
|---|
| 206 | <meta charset="UTF-8"/>
|
|---|
| 207 | <title>Host Event</title>
|
|---|
| 208 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
|---|
| 209 | integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|---|
| 210 | <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
|
|---|
| 211 | integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
|---|
| 212 | crossorigin="anonymous"></script>
|
|---|
| 213 | <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
|
|---|
| 214 | integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
|
|---|
| 215 | crossorigin="anonymous"></script>
|
|---|
| 216 | <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
|
|---|
| 217 | integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
|
|---|
| 218 | crossorigin="anonymous"></script>
|
|---|
| 219 | </head>
|
|---|
| 220 | <body>
|
|---|
| 221 | <div>
|
|---|
| 222 | <nav class="navbar navbar-expand-md ">
|
|---|
| 223 | <div class="container">
|
|---|
| 224 | <!-- <img class="u-image u-image-default u-image-1" src="../static/logoeventra.png" alt="" data-image-width="648" data-image-height="292">-->
|
|---|
| 225 | <!-- <a class="navbar-brand" href="/home"></a>-->
|
|---|
| 226 | <a class="navbar-brand"> Eventrra</a>
|
|---|
| 227 | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
|---|
| 228 | aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
|---|
| 229 | <span class="navbar-toggler-icon"></span>
|
|---|
| 230 | </button>
|
|---|
| 231 |
|
|---|
| 232 | <div class="collapse navbar-collapse justify-content-end" id="navbarsExampleDefault">
|
|---|
| 233 | <ul class="navbar-nav m-auto">
|
|---|
| 234 |
|
|---|
| 235 | <li th:if="${session.user!=null}" class="nav-item m-auto">
|
|---|
| 236 | <a class="nav-link active" href="/">Home</a>
|
|---|
| 237 | </li>
|
|---|
| 238 |
|
|---|
| 239 | <li th:if="${session.user!=null and session.role == 'ROLE_CLIENT'}"
|
|---|
| 240 | class="nav-item m-auto">
|
|---|
| 241 | <a class="kopce" href="/host_event">Host an event</a>
|
|---|
| 242 | </li>
|
|---|
| 243 | <li th:if="${session.user!=null}" class="nav-item m-auto">
|
|---|
| 244 | <a class="nav-link active" href="/my_events">Scheduled events</a>
|
|---|
| 245 | </li>
|
|---|
| 246 | </ul>
|
|---|
| 247 |
|
|---|
| 248 | <form class="form-inline my-2 my-lg-0">
|
|---|
| 249 |
|
|---|
| 250 | <div th:if="${session.user==null}">
|
|---|
| 251 | <a class="btn btn-light btn-sm ml-3" href="/login">
|
|---|
| 252 | Login
|
|---|
| 253 | </a>
|
|---|
| 254 |
|
|---|
| 255 | <a class="btn btn-light btn-sm ml-3" href="/register">
|
|---|
| 256 | Sign up
|
|---|
| 257 | </a>
|
|---|
| 258 | </div>
|
|---|
| 259 | <div style="text-align: center" th:if="${session.user!=null}" class="nav-item m-auto">
|
|---|
| 260 | <a th:text="${session.user.username}" style="color:white; font-size: 20px;"
|
|---|
| 261 | class="nav-link active" href="/login/profile"></a>
|
|---|
| 262 | </div>
|
|---|
| 263 |
|
|---|
| 264 | <div th:if="${session.user!=null}">
|
|---|
| 265 | <a class="btn btn-light btn-sm ml-3" href="/logout">
|
|---|
| 266 | Log out
|
|---|
| 267 | </a>
|
|---|
| 268 | </div>
|
|---|
| 269 | </form>
|
|---|
| 270 | </div>
|
|---|
| 271 | </div>
|
|---|
| 272 | </nav>
|
|---|
| 273 | </div>
|
|---|
| 274 | <br>
|
|---|
| 275 | <div class="container">
|
|---|
| 276 | <form class="form-signin mt-xl-5" method="POST" action="/host_event">
|
|---|
| 277 | <h2 class="form-signin-heading" id="hostEventText">Host an event</h2>
|
|---|
| 278 | <p>
|
|---|
| 279 | <label for="time">Time</label>
|
|---|
| 280 | <input type="text" id="time" name="time" class="form-control"
|
|---|
| 281 | placeholder="Choose the time of the event" required="required">
|
|---|
| 282 | </p>
|
|---|
| 283 |
|
|---|
| 284 | <p>
|
|---|
| 285 | <label for="date">Date</label>
|
|---|
| 286 | <input type="date" id="date" name="date" class="form-control"
|
|---|
| 287 | placeholder="Choose the date of the event" required="required">
|
|---|
| 288 | </p>
|
|---|
| 289 |
|
|---|
| 290 | <label for="location">Location</label>
|
|---|
| 291 | <select id="location" name="location" class="form-control" required="required">
|
|---|
| 292 | <option th:each="l : ${locations}"
|
|---|
| 293 | th:text="${l.getAddress()}"
|
|---|
| 294 | th.value="${l.getAdress()}">
|
|---|
| 295 | </option>
|
|---|
| 296 | </select>
|
|---|
| 297 |
|
|---|
| 298 | <p>
|
|---|
| 299 | <label for="type">Type</label>
|
|---|
| 300 | <input type="text" id="type" name="type" class="form-control" placeholder="Type of the event" required="required">
|
|---|
| 301 | </p>
|
|---|
| 302 |
|
|---|
| 303 | <p>
|
|---|
| 304 | <label for="description">Description</label>
|
|---|
| 305 | <input type="text" width="auto" height = "150px" id="description"
|
|---|
| 306 | name="description" class="form-control" placeholder="Description of the event">
|
|---|
| 307 | </p>
|
|---|
| 308 |
|
|---|
| 309 | <p >
|
|---|
| 310 | <label for="bands">Select band/s</label>
|
|---|
| 311 | <br>
|
|---|
| 312 | <input type="checkbox" id="bands" name="bands"
|
|---|
| 313 | th:each="b : ${bands}"
|
|---|
| 314 | th:text="${b.getName()}"
|
|---|
| 315 | th:value="${b.getId()}">
|
|---|
| 316 | <!-- <button type="button" class="btn btn-primary add-field" onclick="addField()">Add Field</button>-->
|
|---|
| 317 | </p>
|
|---|
| 318 |
|
|---|
| 319 | <p>
|
|---|
| 320 | <label for="caterings">Select catering/s</label>
|
|---|
| 321 | <br>
|
|---|
| 322 | <input type="checkbox" id="caterings" name="caterings"
|
|---|
| 323 | th:each="c : ${caterings}"
|
|---|
| 324 | th:text="${c.getName()}"
|
|---|
| 325 | th:value="${c.getId()}">
|
|---|
| 326 | </p>
|
|---|
| 327 |
|
|---|
| 328 | <!-- <p>-->
|
|---|
| 329 | <!-- <label for="number_waiters">Number of waiters</label>-->
|
|---|
| 330 | <!-- <input type="text" id="number_waiters" name="number_waiters" class="form-control"-->
|
|---|
| 331 | <!-- placeholder="Number of waiters for the event" required="required">-->
|
|---|
| 332 | <!-- </p>-->
|
|---|
| 333 |
|
|---|
| 334 | <p>
|
|---|
| 335 | <label for="photographers">Select photographer/s</label>
|
|---|
| 336 | <br>
|
|---|
| 337 | <input type="checkbox" id="photographers" name="photographers"
|
|---|
| 338 | th:each="p : ${photographers}"
|
|---|
| 339 | th:text="${p.getName()}"
|
|---|
| 340 | th:value="${p.getId()}">
|
|---|
| 341 | </p>
|
|---|
| 342 | <button class="btn btn-lg btn-primary btn-block" type="submit">Make a reservation</button>
|
|---|
| 343 | </form>
|
|---|
| 344 | </div>
|
|---|
| 345 | <br>
|
|---|
| 346 | </body>
|
|---|
| 347 | </html> |
|---|
