Ignore:
Timestamp:
02/10/23 11:18:48 (21 months ago)
Author:
DenicaKj <dkorvezir@…>
Branches:
master
Children:
04153a9
Parents:
7926d68
Message:

Interested in event

Location:
src/main/resources/templates
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • src/main/resources/templates/event.html

    r7926d68 ref84238  
    2424        border-radius: 20px;
    2525    }
     26    .button {
     27        top:250px;
     28        background-color: #ff5019;
     29        border: none;
     30        color: black;
     31        padding: 10px 20px;
     32        text-align: center;
     33        text-decoration: none;
     34        display: inline-block;
     35        font-size: 16px;
     36        border-radius: 20px;
     37    }
     38    .form-group{
     39        width: 200px;
     40    }
    2641</style>
    2742<div xmlns:th="http://www.thymeleaf.org">
    … …  
    3752                минути
    3853            </h4>
     54            <form th:action="@{'/home/addInterestedEvent/{id}' (id=${event.id_event})}"
     55                  th:method="POST">
     56                <button class="button" type="submit">Додади Заинтересиран</button>
     57            </form>
    3958        </div>
    4059        <div class="slika">

  • src/main/resources/templates/profileUser.html

    r7926d68 ref84238  
     1<style xmlns:sec="http://www.w3.org/1999/xhtml">
     2    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
     3
     4
     5    *{
     6        font-family: 'Poppins', sans-serif;
     7    }
     8
     9
     10    .container{
     11
     12        position: relative;
     13    }
     14
     15    .container .card{
     16        position: relative;
     17        width: 250px;
     18        height: 300px;
     19        background: #232323;
     20        border-radius: 20px;
     21        overflow: hidden;
     22    }
     23
     24    .container .card:before{
     25        content: '';
     26        position: absolute;
     27        top: 0;
     28        left: 0;
     29        width: 100%;
     30        height: 100%;
     31        background: black;
     32        transition: 0.5s ease-in-out;
     33    }
     34
     35
     36    .container .card:after{
     37        position: absolute;
     38
     39        font-size: 6em;
     40        font-weight: 600;
     41        font-style: italic;
     42        color: rgba(255,255,25,0.05)
     43    }
     44
     45    .container .card .imgBx{
     46        position: absolute;
     47        width: 100%;
     48        height: 300px;
     49        transition: 0.5s;
     50    }
     51
     52    .container .card:hover .imgBx{
     53        top: 0%;
     54
     55    }
     56
     57    .container .card .imgBx img{
     58        position: absolute;
     59        width: 100%;
     60    }
     61
     62    .container .card .contentBx{
     63        position: absolute;
     64        bottom: 0;
     65        width: 100%;
     66        height: 300px;
     67        text-align: center;
     68        transition: 1s;
     69        z-index: 10;
     70    }
     71
     72    .container .card:hover .contentBx{
     73        height: 300px;
     74    }
     75
     76    .container .card .contentBx h2{
     77        position: relative;
     78        font-weight: 300;
     79        letter-spacing: 1px;
     80        color: #fff;
     81        margin: 0;
     82    }
     83
     84    .container .card .contentBx .size, .container .card .contentBx .color, .container .card .contentBx .button {
     85        display: flex;
     86        justify-content: start;
     87        align-items: start;
     88        padding: 8px 20px;
     89        transition: 0.5s;opacity: 0;
     90        visibility: hidden;
     91        padding-top: 0;
     92        padding-bottom: 0;
     93    }
     94
     95    .container .card .contentBx .button {
     96        display: flex;
     97        justify-content: center;
     98        align-items: center;
     99        padding: 8px 20px;
     100        transition: 0.5s;opacity: 0;
     101        visibility: hidden;
     102        padding-top: 0;
     103        padding-bottom: 0;
     104    }
     105    .container .card:hover .contentBx .size{
     106        opacity: 1;
     107        visibility: visible;
     108        transition-delay: 0.5s;
     109    }
     110    .container .card:hover .contentBx .button{
     111        opacity: 1;
     112        visibility: visible;
     113        transition-delay: 0.5s;
     114    }
     115
     116    .container .card:hover .contentBx .color{
     117        opacity: 1;
     118        visibility: visible;
     119        transition-delay: 0.6s;
     120    }
     121
     122    .container .card .contentBx .size h3, .container .card .contentBx .color h3{
     123        color: #fff;
     124        font-weight: 600;
     125        font-size: 8px;
     126        text-transform: uppercase;
     127        letter-spacing: 2px;
     128        margin-right: 10px;
     129    }
     130
     131    .container .card .contentBx .size span{
     132        width: 26px;
     133        height: 26px;
     134        text-align: center;
     135        line-height: 26px;
     136        font-size: 8px;
     137        display: inline-block;
     138        color: #111;
     139        background: #fff;
     140        margin: 0 5px;
     141        transition: 0.5s;
     142        color: #111;
     143        border-radius: 4px;
     144        cursor: pointer;
     145    }
     146
     147
     148
     149    .container .card .contentBx .color span{
     150        width: 100%;
     151        height: 20px;
     152        color: white;
     153        margin: 0 5px;
     154        cursor: pointer;
     155    }
     156
     157
     158    .container .card .contentBx a{
     159        display: inline-block;
     160        padding: 10px 20px;
     161        background: #fff;
     162        border-radius: 4px;
     163        margin-top: 10px;
     164        text-decoration: none;
     165        font-weight: 600;
     166        color: #111;
     167        opacity: 0;
     168        transform: translateY(50px);
     169        transition: 0.5s;
     170        margin-top: 0;
     171    }
     172
     173    .container .card:hover .contentBx a{
     174        opacity: 1;
     175        transition-delay: 0.75s;
     176
     177    }
     178    .main{
     179        margin-top: 100px;
     180        display: flex;
     181        align-items: flex-start;
     182        justify-content: flex-start;
     183    }
     184    .button {
     185        top:250px;
     186        background-color: #ff5019;
     187        border: none;
     188        color: black;
     189        padding: 10px 20px;
     190        text-align: center;
     191        text-decoration: none;
     192        display: inline-block;
     193        font-size: 16px;
     194        border-radius: 20px;
     195    }
     196    .form-group{
     197        width: 200px;
     198    }
     199</style>
    1200<div class="container-1">
    2201    <h1 style="color: white; font-weight: 600" class="name" th:text="${customer.first_name}+' '+${customer.last_name}">
    … …  
    12211    </h4>
    13212</div>
     213<div xmlns:th="http://www.thymeleaf.org">
     214    <h1 style="color: white">Мои Настани</h1>
     215    <div class="main">
     216        <div th:each="event : ${events}" class="container">
     217            <div class="card">
     218                <div class="imgBx">
     219                    <img th:src="@{${event.img_url}}"/>
     220                </div>
     221                <div class="contentBx">
     222                    <h2  th:text="${event.theme}"></h2>
     223                    <div class="size">
     224                        <h3>Duration :</h3>
     225                        <span th:text="${event.getDuration()}"></span>
     226                    </div>
     227                    <form th:action="@{'/home/deleteInterestedEvent/{id}' (id=${event.getId_event()})}"
     228                          th:method="POST">
     229                        <button class="button" type="submit">Избриши од заинтересирани</button>
     230                    </form>
     231                </div>
     232
     233            </div>
     234        </div>
     235    </div>
     236</div>
     237</div>
Note: See TracChangeset for help on using the changeset viewer.