source: src/main/resources/templates/films.html@ c05cd97

Last change on this file since c05cd97 was c05cd97, checked in by milamihajlovska <mila.mihajlovska01@…>, 22 months ago

update i homeController for getFilmPage1 method
  • Property mode set to 100644
File size: 6.5 KB
Line 
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 .form-group{
197 width: 200px;
198 }
199
200</style>
201<div>
202<!-- <form th:action="@{'/home/getFilm/{id}' (id=${film.getId_film()})}"-->
203<!-- th:method="POST">-->
204
205<!-- <div class="form-group">-->
206<!-- <label style="color: white;font-size: 20px;font-weight: bold">Кино</label>-->
207<!-- <select name="cinemas" class="form-control" id="cinema">-->
208<!-- <option-->
209<!-- th:selected="${cinemas.get(1)}"-->
210<!-- th:each="cinema : ${cinemas}"-->
211<!-- th:value="${cinema.getId_cinema()}"-->
212<!-- th:text="${cinema.getName()}">-->
213<!-- </option>-->
214<!-- </select>-->
215
216<!-- </div>-->
217<!-- <button class="button" type="submit">Filter</button>-->
218<!--</form>-->
219 <form id="filter-form">
220
221 <label for="f2">Cinema</label>
222 <select name="id_cinema" id="f2">
223 <option value="">All</option>
224 <option th:each="cinema : ${cinemas}" th:value="${cinema.id_cinema}" th:text="${cinema.name}"> [course]</option>
225 </select>
226 <button id="filter" type="submit">Filter</button>
227 </form>
228
229</div>
230<div xmlns:th="http://www.thymeleaf.org">
231 <div class="main">
232 <div th:if="${films.isEmpty()} == false"
233 th:each="film : ${films}" class="container">
234 <div class="card">
235 <div class="imgBx">
236 <img th:src="@{${film.getUrl()}}"/>
237 </div>
238 <div class="contentBx">
239 <h2 th:if="${films.isEmpty()} == false"
240 th:text="${film.getName()}"></h2>
241 <div class="color">
242 <h3>Start Date:</h3>
243 <span th:if="${films.isEmpty()} == false"
244 th:text="${film.getStart_date()}"></span>
245 </div>
246 <form th:if="${films.isEmpty()} == false"
247 th:action="@{'/home/getFilm/{id}' (id=${film.getId_film()})}"
248 th:method="GET">
249 <button class="button" type="submit">Details</button>
250 </form>
251
252
253 </div>
254 </div>
255 </div>
256 </div>
257</div>
Note: See TracBrowser for help on using the repository browser.