source: src/main/resources/templates/edit_form.html@ 0e4d807

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

Initial commit
  • Property mode set to 100644
File size: 10.8 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>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</head>
11<body style="background-color: #226781">
12<header xmlns:th="http://www.thymeleaf.org">
13 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
14 <div class="container">
15 <a class="navbar-brand" href="/">LaggerNet</a>
16 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
17 aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
18 <span class="navbar-toggler-icon"></span>
19 </button>
20
21 <div class="collapse navbar-collapse justify-content-end" id="navbarsExampleDefault">
22 <ul class="navbar-nav m-auto">
23 <li class="nav-item m-auto">
24 <a class="nav-link active" href="/home">Дома</a>
25 </li>
26
27 <li class="nav-item m-auto" >
28 <a class="nav-link active" href="/proizvodi">Производи</a>
29 </li>
30 <li class="nav-item m-auto" >
31 <a class="nav-link active" href="/korisnici">Корисници</a>
32 </li>
33 </ul>
34
35
36
37 <ul class="nav navbar-nav navbar-right">
38 <li style="color: white; padding-left: 5px;" class="nav-item" th:if="${session.korisnik != null}"
39 th:text="${'Welcome, ' + session.korisnik.ime }">
40 <a class="nav-link" href="#">
41
42 </a>
43 </li>
44
45 <li class="nav-item" th:if="${session.korisnik == null}">
46 <a class="btn btn-light btn-sm ml-3" href="/login">
47 <i class="fa fa-shopping-cart"></i> Login
48 </a>
49 </li>
50 <li class="nav-item">
51 <a class="btn btn-light btn-sm ml-3" href="/logout">
52 <i class="fa fa-shopping-cart"></i> Logout
53 </a>
54 </li>
55 </ul>
56 </div>
57 </div>
58 </nav>
59</header>
60<form method="POST" th:action="@{'/korisnici/{ime}' (ime = ${korisnik?.ime})}" >
61 <fieldset>
62 <div class="container">
63
64 <div class="form-group">
65 <label for="ime" class="form-label mt-4"><b>Корисничко име</b></label>
66 <input type="text"
67 id="ime"
68 name="ime"
69 th:value="${korisnik?.ime}"
70 class="form-control"
71 required>
72 </div>
73
74 <div class="form-group">
75 <label for="lozinka" class="form-label mt-4"><b>Лозинка</b></label>
76 <input type="password"
77 id="lozinka"
78 name="lozinka"
79 th:value="${korisnik?.lozinka}"
80 class="form-control"
81 required>
82 </div>
83
84 <div class="form-group">
85 <label for="email" class="form-label mt-4"><b>Е-пошта</b></label>
86 <input type="text"
87 id="email"
88 name="email"
89 th:value="${korisnik?.email}"
90 class="form-control"
91 required>
92 </div>
93
94 <div class="form-group">
95 <label for="telefonski_broj" class="form-label mt-4"><b>Телефонски број</b></label>
96 <input type="text"
97 id="telefonski_broj"
98 name="telefonski_broj"
99 th:value="${korisnik?.broj}"
100 class="form-control"
101 required>
102 </div>
103 <br>
104 <hr>
105 <br>
106 <button id="submit" type="submit" class="btn btn-primary">Поднеси</button>
107
108
109 </div>
110 </fieldset>
111</form>
112<footer class="text-black-50 mt-xl-5" xmlns:th="http://www.thymeleaf.org">
113 <div class="container">
114 <div class="row">
115 <div class="col-md-3 col-lg-4 col-xl-3">
116 <h5>За нас</h5>
117 <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
118 <p class="mb-0">
119 Компанијата LaggerNet постои од 2001 година и е тука за да ви овозможи да го најдете производот што ви треба за најдобрата цена!
120 </p>
121 </div>
122
123 <div class="col-md-2 col-lg-2 col-xl-2 mx-auto">
124 <h5>Информации</h5>
125 <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
126 <ul class="list-unstyled">
127 <li><a href="">Link 1</a></li>
128 <li><a href="">Link 2</a></li>
129 <li><a href="">Link 3</a></li>
130 <li><a href="">Link 4</a></li>
131 </ul>
132 </div>
133
134 <div class="col-md-3 col-lg-2 col-xl-2 mx-auto">
135 <h5>Други линкови</h5>
136 <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
137 <ul class="list-unstyled">
138 <li><a href="">Link 1</a></li>
139 <li><a href="">Link 2</a></li>
140 <li><a href="">Link 3</a></li>
141 <li><a href="">Link 4</a></li>
142 </ul>
143 </div>
144
145 <div class="col-md-4 col-lg-3 col-xl-3">
146 <h5>Контакт</h5>
147 <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
148 <ul class="list-unstyled">
149 <li><i class="fa fa-home mr-2"></i>За дополнителни информации можете да ни се обратите на следната е-пошта или телефонските броеви оставени подолу. </li>
150 <li><i class="fa fa-envelope mr-2" ></i> <b>laggernet@yahoo.com</b></li>
151 <li><i class="fa fa-phone mr-2"></i><b> +389 323 200</b></li>
152 <li><i class="fa fa-print mr-2"></i> <b>+389 775 632</b></li>
153 </ul>
154 </div>
155 </div>
156 </div>
157</footer>
158</body>
159
160</html>
161<style>
162 body {
163 font-family: Arial, sans-serif;
164 margin: 0;
165 padding: 0;
166 background-color: #4d4a4a;
167 }
168
169 /* Form styling */
170 form {
171 background-color: #1b556b;
172 padding: 50px;
173 max-width: 800px;
174 margin: 50px auto;
175 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
176 border-radius: 5px;
177 display: grid;
178 grid-template-columns: 1fr 1fr;
179 grid-gap: 40px;
180 }
181
182 /* Form input styling */
183 label {
184 display: block;
185 font-size: 19px;
186 font-weight: bold;
187 margin-bottom: 5px;
188 }
189
190 input[type="text"],
191 input[type="number"] {
192 display: block;
193 width: 100%;
194 padding: 10px;
195 margin-bottom: 20px;
196 border: none;
197 border-radius: 5px;
198 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
199 }
200
201 input[type="text"]:focus,
202 input[type="number"]:focus {
203 outline: none;
204 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 3px rgba(0, 0, 0, 0.2);
205 }
206
207 /* Select styling */
208 select {
209 display: block;
210 width: 100%;
211 padding: 10px;
212 margin-bottom: 20px;
213 border: none;
214 border-radius: 5px;
215 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
216 -webkit-appearance: none;
217 -moz-appearance: none;
218 appearance: none;
219 background-color: #f5f5f5;
220 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 2l4 4 4-4h-8z'/%3E%3C/svg%3E");
221 background-repeat: no-repeat;
222 background-position: right 10px center;
223 }
224
225 /* Button styling */
226 button[type="submit"] {
227 background-color: #4CAF50;
228 color: #fff;
229 padding: 10px 20px;
230 border: none;
231 border-radius: 5px;
232 cursor: pointer;
233 transition: background-color 0.3s ease;
234 }
235
236 button[type="submit"]:hover {
237 background-color: #3e8e41;
238 }
239 .navbar {
240 border-radius: 0;
241 }
242
243 .navbar-brand {
244 font-family: 'Montserrat', sans-serif;
245 font-size: 2rem;
246 font-weight: bold;
247 color: #fff;
248 }
249
250 .nav-link {
251 font-size: 1.2rem;
252 color: #fff !important;
253 text-transform: uppercase;
254 font-weight: bold;
255 margin-right: 1.5rem;
256 }
257
258 .nav-link:hover {
259 color: #00a6ff !important;
260 }
261
262 .jumbotron-heading {
263 font-size: 3rem;
264 color: #3a3c3d;
265 font-weight: bold;
266 text-shadow: 2px 2px #226781;
267 margin-top: 3rem;
268 }
269
270 .btn {
271 border-radius: 20px;
272 font-weight: bold;
273 text-transform: uppercase;
274 }
275
276 .btn-light {
277 background-color: #fff;
278 color: #000;
279 border: none;
280 }
281
282 .btn-light:hover {
283 background-color: #00a6ff;
284 color: #fff;
285 }
286
287 footer {
288 background-color: #4f535d;
289 color: #fff;
290 padding: 4rem 0;
291 margin-top: 3rem;
292 }
293
294 h5 {
295 font-size: 1.5rem;
296 text-transform: uppercase;
297 font-weight: bold;
298 margin-bottom: 1.5rem;
299 }
300
301 p {
302 font-size: 1.2rem;
303 margin-bottom: 2rem;
304 }
305
306 hr.bg-white {
307 border-color: #fff;
308 }
309
310 @media (max-width: 991.98px) {
311 .navbar-nav.m-auto {
312 margin-top: 1.5rem;
313 display: flex;
314 flex-direction: column;
315 align-items: center;
316 }
317
318 .nav-link {
319 margin-right: 0;
320 margin-bottom: 1.5rem;
321 }
322
323 .jumbotron-heading {
324 font-size: 3.5rem;
325 }
326 }
327</style>
Note: See TracBrowser for help on using the repository browser.