Ignore:
Timestamp:
02/06/23 18:12:03 (23 months ago)
Author:
milamihajlovska <mila.mihajlovska01@…>
Branches:
master
Children:
b5ce654
Parents:
f9cc555
Message:

changes in some htmls

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

Legend:

Unmodified
Added
Removed

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

    rf9cc555 ra69d48c  
    1 <!DOCTYPE html>
    2 <html lang="en">
    3 <head>
    4     <meta charset="UTF-8">
    5     <title>Title</title>
    6 </head>
    7 <body>
    8 
    9 </body>
    10 </html>
     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: white;
     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</style>
     197<div xmlns:th="http://www.thymeleaf.org">
     198    <div class="main">
     199        <div th:each="event : ${events}" class="container">
     200            <div class="card">
     201<!--                <div class="imgBx">-->
     202<!--&lt;!&ndash;                    <img th:src="@{${film.getUrl()}}"/>&ndash;&gt;-->
     203<!--                </div>-->
     204                <div class="contentBx">
     205                    <h2  th:text="${event.theme()}"></h2>
     206                    <div class="size">
     207                        <h3>Duration :</h3>
     208                        <span th:text="${event.getDuration()}"></span>
     209                    </div>
     210
     211
     212                </div>
     213            </div>
     214        </div>
     215    </div>
     216</div>

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

    rf9cc555 ra69d48c  
    2525                <span th:text="${genre}"></span>
    2626            </div>
    27 
     27            <h4 style="color: white;"> Возрасна категорија:
     28                <span th:text="${film.age_category}"></span>
     29            </h4>
     30            <h4 style="color: white"> Траење на филмот:
     31                <span th:text="${film.duration}"></span>
     32                минути
     33            </h4>
     34            <h4 style="color: white"> Режисер:
     35                <span th:text="${film.director}"></span>
     36            </h4>
    2837        </div>
    2938

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

    rf9cc555 ra69d48c  
    1 <!DOCTYPE html>
    2 <html lang="en">
    3 <head>
    4     <meta charset="UTF-8">
    5     <title>Title</title>
    6 </head>
    7 <body>
    8 
    9 </body>
    10 </html>
     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: white;
     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</style>
     197<div xmlns:th="http://www.thymeleaf.org">
     198    <div class="main">
     199        <div th:each="film : ${films}" class="container">
     200            <div class="card">
     201                <div class="imgBx">
     202                    <img th:src="@{${film.getUrl()}}"/>
     203                </div>
     204                <div class="contentBx">
     205                    <h2  th:text="${film.getName()}"></h2>
     206                    <div class="size">
     207                        <h3>Duration :</h3>
     208                        <span th:text="${film.getDuration()}"></span>
     209                    </div>
     210                    <div class="color">
     211                        <h3>Genre:</h3>
     212                        <span th:text="${film.getGenre()}"></span>
     213                    </div>
     214                    <form th:action="@{'/home/getFilm/{id}' (id=${film.getId_film()})}"
     215                          th:method="GET">
     216                        <button class="button" type="submit">Details</button>
     217                    </form>
     218
     219
     220                </div>
     221            </div>
     222        </div>
     223    </div>
     224</div>

  • src/main/resources/templates/fragments/header.html

    rf9cc555 ra69d48c  
    6262    <ul class="menu-left">
    6363        <li class="begin"><a href="#!">MovieZone</a></li>
    64         <li class="begin"><a href="#!">Филмови</a></li>
    65         <li class="begin"><a href="#!">Програма</a></li>
    66         <li class="begin"><a href="#!">Настани</a></li>
    67         <li class="begin"><a href="#!">Faq</a></li>
     64        <li class="begin"><a href="/films">Филмови</a></li>
     65        <li class="begin"><a href="/projections">Програма</a></li>
     66        <li class="begin"><a href="/events">Настани</a></li>
     67<!--        <li class="begin"><a href="#!">Faq</a></li>-->
     68        <li class="begin"><a href="/myTickets">Мои Карти</a></li>
     69        <li class="begin"><a href="/workers">Вработени</a></li>
     70        <li class="begin"><a href="/addProjection">Нова Проекција</a></li>
     71        <li class="begin"><a href="/addFilm">Нов Филм</a></li>
     72        <li class="begin"><a href="/addEvent">Нов Настан</a></li>
     73
    6874    </ul>
    6975    <ul class="menu-right">
Note: See TracChangeset for help on using the changeset viewer.