source: src/main/resources/templates/edit_form.html@ f02aea4

Last change on this file since f02aea4 was f02aea4, checked in by Ivona <ivonatapshanovska@…>, 10 months ago

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