source: src/main/resources/templates/proizvodi.html

Last change on this file was 0e4d807, checked in by Ivona <ivonatapshanovska@…>, 17 months ago

Initial commit
  • Property mode set to 100644
File size: 10.0 KB
RevLine 
[0e4d807]1<!DOCTYPE html>
2<html lang="en" xmlns:sec="http://www.w3.org/1999/xhtml">
3<head>
4 <meta charset="UTF-8">
5 <title>Производи</title>
6 <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">
7 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
8 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
9 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
10
11
12</head>
13<body>
14<header xmlns:th="http://www.thymeleaf.org">
15 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
16 <div class="container">
17 <a class="navbar-brand" href="/">LaggerNet</a>
18 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
19 aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
20 <span class="navbar-toggler-icon"></span>
21 </button>
22
23 <div class="collapse navbar-collapse justify-content-end" id="navbarsExampleDefault">
24 <ul class="navbar-nav m-auto">
25 <li class="nav-item m-auto">
26 <a class="nav-link active" href="/home">Дома</a>
27 </li>
28
29 <li class="nav-item m-auto" >
30 <a class="nav-link active" href="/proizvodi">Производи</a>
31 </li>
32 <li class="nav-item m-auto" >
33 <a class="nav-link active" href="/korisnici">Корисници</a>
34 </li>
35 </ul>
36
37
38
39 <ul class="nav navbar-nav navbar-right">
40 <li style="color: white; padding-left: 5px;" class="nav-item" th:if="${session.korisnik != null}"
41 th:text="${'Welcome, ' + session.korisnik }">
42 <a class="nav-link" href="#">
43
44 </a>
45 </li>
46
47 <li class="nav-item" th:if="${session.korisnik != null}" >
48 <a class="btn btn-light btn-sm ml-3" href="/login">
49 <i class="fa fa-shopping-cart"></i> Login
50 </a>
51 </li>
52 <li class="nav-item">
53 <a class="btn btn-light btn-sm ml-3" href="/logout" >
54 <i class="fa fa-shopping-cart"></i> Logout
55 </a>
56 </li>
57 </ul>
58 </div>
59 </div>
60 </nav>
61</header>
62
63<div th:block xmlns:th="http://www.thymeleaf.org">
64 <section class="jumbotron text-center">
65 <div class="container">
66 <h3 class="jumbotron-heading">Производи</h3>
67 </div>
68 </section>
69
70 <div th:if="${hasError}">
71 <h5 class="text-center text-danger" th:text="${error}"></h5>
72 </div>
73
74 <div class="container mb-4">
75 <div class="row">
76 <div class="col-12" th:if="${proizvodi.size() > 0}">
77 <div class="table-responsive">
78 <table class="table table-striped">
79 <thead>
80 <tr>
81 <th scope="col">Име</th>
82 <th scope="col">Количина</th>
83 <th scope="col">Боја</th>
84 <th scope="col">Компанија</th>
85 </tr>
86 </thead>
87 <tbody>
88 <tr th:each="p: ${proizvodi}" class="product">
89 <td th:text="${p.name}">[p.name]</td>
90 <td th:text="${p.getKolicina()}">[p.kolicina]</td>
91 <td th:text="${p.getBoja()}">[p.boja]</td>
92 <td th:text="${p.ime.getIme()}">[p.kompanija]</td>
93 <td>
94 <a th:href="@{'/proizvodi/{id}/edit' (id = ${p.ids})}" class="edit-item" sec:authorize="hasAuthority('ROLES_VRABOTEN')">Уреди</a>
95 <a class="edit-item" th:href="@{'/proizvodi/{id}/komentiraj' (id = ${p.ids})}" sec:authorize="hasAuthority('ROLES_KUPUVAC')" >Коментирај</a>
96 </td>
97
98 </tr>
99 </tbody>
100 </table>
101 </div>
102 </div>
103 <div class="col mb-3">
104 <div class="row">
105 <div class="col-sm-12 col-md-12">
106 <a href="/proizvodi/add" class="btn btn-block btn-dark add-product-btn" sec:authorize="hasAuthority('ROLES_VRABOTEN')">
107 Додади нов производ
108 </a>
109 </div>
110 </div>
111 </div>
112 </div>
113 </div>
114
115</div>
116
117<footer class="text-black-50 mt-xl-5" xmlns:th="http://www.thymeleaf.org">
118 <div class="container">
119 <div class="row">
120 <div class="col-md-3 col-lg-4 col-xl-3">
121 <h5>За нас</h5>
122 <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
123 <p class="mb-0">
124 Компанијата LaggerNet постои од 2001 година и е тука за да ви овозможи да го најдете производот што ви треба за најдобрата цена!
125 </p>
126 </div>
127
128 <div class="col-md-2 col-lg-2 col-xl-2 mx-auto">
129 <h5>Информации</h5>
130 <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
131 <ul class="list-unstyled">
132 <li><a href="">Link 1</a></li>
133 <li><a href="">Link 2</a></li>
134 <li><a href="">Link 3</a></li>
135 <li><a href="">Link 4</a></li>
136 </ul>
137 </div>
138
139 <div class="col-md-3 col-lg-2 col-xl-2 mx-auto">
140 <h5>Други линкови</h5>
141 <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
142 <ul class="list-unstyled">
143 <li><a href="">Link 1</a></li>
144 <li><a href="">Link 2</a></li>
145 <li><a href="">Link 3</a></li>
146 <li><a href="">Link 4</a></li>
147 </ul>
148 </div>
149
150 <div class="col-md-4 col-lg-3 col-xl-3">
151 <h5>Контакт</h5>
152 <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
153 <ul class="list-unstyled">
154 <li><i class="fa fa-home mr-2"></i>За дополнителни информации можете да ни се обратите на следната е-пошта или телефонските броеви оставени подолу. </li>
155 <li><i class="fa fa-envelope mr-2" ></i> <b>laggernet@yahoo.com</b></li>
156 <li><i class="fa fa-phone mr-2"></i><b> +389 323 200</b></li>
157 <li><i class="fa fa-print mr-2"></i> <b>+389 775 632</b></li>
158 </ul>
159 </div>
160 </div>
161 </div>
162</footer>
163</body>
164</html>
165<style>
166 .edit-item {
167 display: inline-block;
168 background-color: #28a745;
169 color: #fff;
170 padding: 0.5rem 1rem;
171 border-radius: 0.25rem;
172 text-decoration: none;
173 transition: background-color 0.3s ease;
174 }
175
176 .edit-item:hover {
177 background-color: #1d943b;
178 }
179
180 body {
181 background-color: #f2f2f2;
182 }
183
184 .navbar {
185 border-radius: 0;
186 }
187
188 .navbar-brand {
189 font-family: 'Montserrat', sans-serif;
190 font-size: 2rem;
191 font-weight: bold;
192 color: #fff;
193 }
194
195 .nav-link {
196 font-size: 1.2rem;
197 color: #fff !important;
198 text-transform: uppercase;
199 font-weight: bold;
200 margin-right: 1.5rem;
201 }
202
203 .nav-link:hover {
204 color: #00a6ff !important;
205 }
206
207 .jumbotron-heading {
208 font-size: 3rem;
209 color: #3a3c3d;
210 font-weight: bold;
211 text-shadow: 2px 2px #226781;
212 margin-top: 3rem;
213 }
214
215 .btn {
216 border-radius: 20px;
217 font-weight: bold;
218 text-transform: uppercase;
219 }
220
221 .btn-light {
222 background-color: #fff;
223 color: #000;
224 border: none;
225 }
226
227 .btn-light:hover {
228 background-color: #00a6ff;
229 color: #fff;
230 }
231
232 footer {
233 background-color: #4f535d;
234 color: #fff;
235 padding: 4rem 0;
236 margin-top: 3rem;
237 }
238
239 h5 {
240 font-size: 1.5rem;
241 text-transform: uppercase;
242 font-weight: bold;
243 margin-bottom: 1.5rem;
244 }
245
246 p {
247 font-size: 1.2rem;
248 margin-bottom: 2rem;
249 }
250
251 hr.bg-white {
252 border-color: #fff;
253 }
254
255 @media (max-width: 991.98px) {
256 .navbar-nav.m-auto {
257 margin-top: 1.5rem;
258 display: flex;
259 flex-direction: column;
260 align-items: center;
261 }
262
263 .nav-link {
264 margin-right: 0;
265 margin-bottom: 1.5rem;
266 }
267
268 .jumbotron-heading {
269 font-size: 3.5rem;
270 }
271 }
272
273</style>
274
Note: See TracBrowser for help on using the repository browser.