source: src/main/resources/templates/add-product.html@ 0e4d807

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

Initial commit
  • Property mode set to 100644
File size: 3.5 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>ADD product</title>
6</head>
7<body>
8
9<form action="/proizvodi/add" method="post">
10 <div>
11 <label for="name">Име на производ</label>
12 <input type="text"
13 id="name"
14 name="name"
15 required
16 placeholder="Внеси име на производ">
17 </div>
18 <div>
19 <label for="kolicina">Количина</label>
20 <input type="number"
21 id="kolicina"
22 name="kolicina"
23 required
24 placeholder="Внеси количина">
25 </div>
26 <div>
27 <label for="boja">Боја на производ</label>
28 <input type="text"
29 id="boja"
30 name="boja"
31 required
32 placeholder="Внеси боја на производ">
33 </div>
34 <div>
35 <label for="karakteristiki">Карактеристики на производот</label>
36 <input type="text" id="karakteristiki" name="karakteristiki" required placeholder="Внеси карактеристики за производот" >
37 </div>
38
39 <div>
40 <label>Компании</label>
41 <select name="kompanijaName" id="kompanijaName">
42 <option th:each="k : ${kompanii}"
43 th:text="${k.ime}">[kompanija.ime]
44 </option>
45 </select>
46 </div>
47 <button type="submit">Submit</button>
48</form>
49</body>
50</html>
51<style>
52 /* Overall styling */
53 body {
54 font-family: Arial, sans-serif;
55 margin: 0;
56 padding: 0;
57 background-color: #4d4a4a;
58 }
59
60 /* Form styling */
61 form {
62 background-color: #1b556b;
63 padding: 50px;
64 max-width: 800px;
65 margin: 50px auto;
66 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
67 border-radius: 5px;
68 display: grid;
69 grid-template-columns: 1fr 1fr;
70 grid-gap: 40px;
71 }
72
73 /* Form input styling */
74 label {
75 display: block;
76 font-size: 19px;
77 font-weight: bold;
78 margin-bottom: 5px;
79 }
80
81 input[type="text"],
82 input[type="number"] {
83 display: block;
84 width: 100%;
85 padding: 10px;
86 margin-bottom: 20px;
87 border: none;
88 border-radius: 5px;
89 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
90 }
91
92 input[type="text"]:focus,
93 input[type="number"]:focus {
94 outline: none;
95 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 3px rgba(0, 0, 0, 0.2);
96 }
97
98 /* Select styling */
99 select {
100 display: block;
101 width: 100%;
102 padding: 10px;
103 margin-bottom: 20px;
104 border: none;
105 border-radius: 5px;
106 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
107 -webkit-appearance: none;
108 -moz-appearance: none;
109 appearance: none;
110 background-color: #f5f5f5;
111 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");
112 background-repeat: no-repeat;
113 background-position: right 10px center;
114 }
115
116 /* Button styling */
117 button[type="submit"] {
118 background-color: #4CAF50;
119 color: #fff;
120 padding: 10px 20px;
121 border: none;
122 border-radius: 5px;
123 cursor: pointer;
124 transition: background-color 0.3s ease;
125 }
126
127 button[type="submit"]:hover {
128 background-color: #3e8e41;
129 }
130</style>
Note: See TracBrowser for help on using the repository browser.