1 | <!DOCTYPE html>
|
---|
2 | <html lang="en">
|
---|
3 | <head>
|
---|
4 | <meta charset="UTF-8">
|
---|
5 | <title>Нов предмет</title>
|
---|
6 |
|
---|
7 | <style>
|
---|
8 | @import url('https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap');
|
---|
9 | @import url('https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@600&display=swap');
|
---|
10 |
|
---|
11 | body {
|
---|
12 | margin: 0;
|
---|
13 | background: whitesmoke;
|
---|
14 | font-family: 'Cormorant Unicase', serif;
|
---|
15 | font-weight: 800;
|
---|
16 | }
|
---|
17 |
|
---|
18 | .container {
|
---|
19 | width: 80%;
|
---|
20 | margin: 0 auto;
|
---|
21 | }
|
---|
22 |
|
---|
23 | header {
|
---|
24 | background: whitesmoke;
|
---|
25 | }
|
---|
26 |
|
---|
27 | header::after {
|
---|
28 | content: '';
|
---|
29 | display: table;
|
---|
30 | clear: both;
|
---|
31 | }
|
---|
32 |
|
---|
33 | .logo {
|
---|
34 | float: left;
|
---|
35 | padding: 10px 0;
|
---|
36 | }
|
---|
37 |
|
---|
38 | nav {
|
---|
39 | float: right;
|
---|
40 | }
|
---|
41 |
|
---|
42 | nav ul {
|
---|
43 | margin: 0;
|
---|
44 | padding: 0;
|
---|
45 | list-style: none;
|
---|
46 | }
|
---|
47 |
|
---|
48 | nav li {
|
---|
49 | display: inline-block;
|
---|
50 | margin-left: 70px;
|
---|
51 | padding-top: 23px;
|
---|
52 |
|
---|
53 | position: relative;
|
---|
54 | }
|
---|
55 |
|
---|
56 | nav a {
|
---|
57 | color: #444;
|
---|
58 | text-decoration: none;
|
---|
59 | text-transform: uppercase;
|
---|
60 | font-size: 14px;
|
---|
61 | }
|
---|
62 |
|
---|
63 | nav a:hover {
|
---|
64 | color: #000;
|
---|
65 | }
|
---|
66 |
|
---|
67 | nav a::before {
|
---|
68 | content: '';
|
---|
69 | display: block;
|
---|
70 | height: 5px;
|
---|
71 | background-color: #444;
|
---|
72 |
|
---|
73 | position: absolute;
|
---|
74 | top: 0;
|
---|
75 | width: 0%;
|
---|
76 |
|
---|
77 | transition: all ease-in-out 250ms;
|
---|
78 | }
|
---|
79 |
|
---|
80 | nav a:hover::before {
|
---|
81 | width: 100%;
|
---|
82 | }
|
---|
83 |
|
---|
84 | button {
|
---|
85 | display: inline-block;
|
---|
86 | border-radius: 4px;
|
---|
87 | background-color: black;
|
---|
88 | border: none;
|
---|
89 | color: snow;
|
---|
90 | text-align: center;
|
---|
91 | font-size: 18px;
|
---|
92 | padding: 10px;
|
---|
93 | width: 100px;
|
---|
94 | transition: all 0.5s;
|
---|
95 | cursor: pointer;
|
---|
96 | margin: 5px;
|
---|
97 |
|
---|
98 |
|
---|
99 | }
|
---|
100 |
|
---|
101 | input[type=submit], input[type=reset], input[type=password], input[type=number] {
|
---|
102 | background-color: snow;
|
---|
103 | border: none;
|
---|
104 | color: black;
|
---|
105 | padding: 16px 32px;
|
---|
106 | text-decoration: none;
|
---|
107 | margin: 4px 2px;
|
---|
108 | cursor: pointer;
|
---|
109 | }
|
---|
110 |
|
---|
111 | footer {
|
---|
112 | text-align: center;
|
---|
113 | padding: 3px;
|
---|
114 | color: white;
|
---|
115 | }
|
---|
116 |
|
---|
117 | * {
|
---|
118 | background-color: whitesmoke;
|
---|
119 | font-family: 'Zen Antique', serif;
|
---|
120 | }
|
---|
121 |
|
---|
122 | a:link, a:visited {
|
---|
123 | color: black;
|
---|
124 | text-align: center;
|
---|
125 | text-decoration: none;
|
---|
126 | display: inline-block;
|
---|
127 | }
|
---|
128 |
|
---|
129 |
|
---|
130 | #search {
|
---|
131 | background-color: whitesmoke;
|
---|
132 | border-style: solid;
|
---|
133 | border-width: thin;
|
---|
134 | border-color: black;
|
---|
135 | color: black;
|
---|
136 | padding: 12px 20px;
|
---|
137 | text-decoration: none;
|
---|
138 | margin: 8px 0;
|
---|
139 |
|
---|
140 | cursor: pointer;
|
---|
141 | }
|
---|
142 |
|
---|
143 | input[type=text], input[type=password], input[type=number] {
|
---|
144 | width: 60%;
|
---|
145 | padding: 12px 20px;
|
---|
146 | margin: 8px 0;
|
---|
147 | box-sizing: border-box;
|
---|
148 | }
|
---|
149 |
|
---|
150 | input[type=text]:focus, input[type=password]:focus, input[type=number] {
|
---|
151 | background-color: snow;
|
---|
152 | }
|
---|
153 |
|
---|
154 |
|
---|
155 | /*the container must be positioned relative:*/
|
---|
156 | .custom-select {
|
---|
157 | position: relative;
|
---|
158 | font-family: Arial;
|
---|
159 | }
|
---|
160 |
|
---|
161 | .custom-select select {
|
---|
162 | display: none; /*hide original SELECT element:*/
|
---|
163 | }
|
---|
164 |
|
---|
165 | .select-selected {
|
---|
166 | background-color: lightsteelblue;
|
---|
167 | }
|
---|
168 |
|
---|
169 | /*style the arrow inside the select element:*/
|
---|
170 | .select-selected:after {
|
---|
171 | position: absolute;
|
---|
172 | content: "";
|
---|
173 | top: 14px;
|
---|
174 | right: 10px;
|
---|
175 | width: 0;
|
---|
176 | height: 0;
|
---|
177 | border: 6px solid transparent;
|
---|
178 | border-color: #fff transparent transparent transparent;
|
---|
179 | }
|
---|
180 |
|
---|
181 | /*point the arrow upwards when the select box is open (active):*/
|
---|
182 | .select-selected.select-arrow-active:after {
|
---|
183 | border-color: transparent transparent #fff transparent;
|
---|
184 | top: 7px;
|
---|
185 | }
|
---|
186 |
|
---|
187 | /*style the items (options), including the selected item:*/
|
---|
188 | .select-items div, .select-selected {
|
---|
189 | color: black;
|
---|
190 | padding: 8px 16px;
|
---|
191 | border: 1px solid transparent;
|
---|
192 | border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
|
---|
193 | cursor: pointer;
|
---|
194 | user-select: none;
|
---|
195 | }
|
---|
196 |
|
---|
197 | /*style items (options):*/
|
---|
198 | .select-items {
|
---|
199 | position: absolute;
|
---|
200 | background-color: lightsteelblue;
|
---|
201 | top: 100%;
|
---|
202 | left: 0;
|
---|
203 | right: 0;
|
---|
204 | z-index: 99;
|
---|
205 | }
|
---|
206 |
|
---|
207 | /*hide the items when the select box is closed:*/
|
---|
208 | .select-hide {
|
---|
209 | display: none;
|
---|
210 | }
|
---|
211 |
|
---|
212 | .select-items div:hover, .same-as-selected {
|
---|
213 | background-color: rgba(0, 0, 0, 0.1);
|
---|
214 | }
|
---|
215 |
|
---|
216 | textarea {
|
---|
217 |
|
---|
218 | height: 150px;
|
---|
219 | padding: 12px 20px;
|
---|
220 | box-sizing: border-box;
|
---|
221 | border: 2px solid #ccc;
|
---|
222 | border-radius: 4px;
|
---|
223 | background-color: #f8f8f8;
|
---|
224 | font-size: 16px;
|
---|
225 | resize: none;
|
---|
226 | }
|
---|
227 |
|
---|
228 |
|
---|
229 | </style>
|
---|
230 | </head>
|
---|
231 | <body>
|
---|
232 |
|
---|
233 | <header>
|
---|
234 | <div class="container">
|
---|
235 | <h3 class="logo"></h3>
|
---|
236 |
|
---|
237 | <nav>
|
---|
238 | <ul>
|
---|
239 | <li><a href="/teachers/allClasses" style="font-weight: bold">РАСПОРЕД</a></li>
|
---|
240 | <li><a href="/teachers/allSubjects" style="font-weight: bold">ПРЕДМЕТИ</a></li>
|
---|
241 | <li><a href="/teachers/allStudents" style="font-weight: bold">УЧЕНИЦИ</a></li>
|
---|
242 | <li><a href="/teachers/profile" style="font-weight: bold">ПРОФИЛ</a></li>
|
---|
243 | <li><a href="/logout" style="font-weight: bold">ОДЈАВИ СЕ</a></li>
|
---|
244 | </ul>
|
---|
245 | </nav>
|
---|
246 | </div>
|
---|
247 | </header>
|
---|
248 |
|
---|
249 | <div class="container">
|
---|
250 |
|
---|
251 | <form th:method="post" th:action="@{/teachers/addSubject}">
|
---|
252 | <select id="subjectId" name="subjectId">
|
---|
253 | <option value="" selected disabled hidden>Изберете предмет</option>
|
---|
254 | <option th:each="s : ${allSubjects}"
|
---|
255 | th:value="${s.getId()}"
|
---|
256 | th:text="${s.getName()}">
|
---|
257 | </option>
|
---|
258 | </select>
|
---|
259 | <textarea name="desc" class="form-control">Опис...</textarea>
|
---|
260 |
|
---|
261 | <input type='submit' value='Submit'/>
|
---|
262 | </form>
|
---|
263 | </div>
|
---|
264 |
|
---|
265 |
|
---|
266 | <script>
|
---|
267 | var x, i, j, l, ll, selElmnt, a, b, c;
|
---|
268 | x = document.getElementsByClassName("custom-select");
|
---|
269 | l = x.length;
|
---|
270 | for (i = 0; i < l; i++) {
|
---|
271 | selElmnt = x[i].getElementsByTagName("select")[0];
|
---|
272 | ll = selElmnt.length;
|
---|
273 | a = document.createElement("DIV");
|
---|
274 | a.setAttribute("class", "select-selected");
|
---|
275 | a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
---|
276 | x[i].appendChild(a);
|
---|
277 | b = document.createElement("DIV");
|
---|
278 | b.setAttribute("class", "select-items select-hide");
|
---|
279 | for (j = 1; j < ll; j++) {
|
---|
280 | c = document.createElement("DIV");
|
---|
281 | c.innerHTML = selElmnt.options[j].innerHTML;
|
---|
282 | c.addEventListener("click", function (e) {
|
---|
283 | var y, i, k, s, h, sl, yl;
|
---|
284 | s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
---|
285 | sl = s.length;
|
---|
286 | h = this.parentNode.previousSibling;
|
---|
287 | for (i = 0; i < sl; i++) {
|
---|
288 | if (s.options[i].innerHTML == this.innerHTML) {
|
---|
289 | s.selectedIndex = i;
|
---|
290 | h.innerHTML = this.innerHTML;
|
---|
291 | y = this.parentNode.getElementsByClassName("same-as-selected");
|
---|
292 | yl = y.length;
|
---|
293 | for (k = 0; k < yl; k++) {
|
---|
294 | y[k].removeAttribute("class");
|
---|
295 | }
|
---|
296 | this.setAttribute("class", "same-as-selected");
|
---|
297 | break;
|
---|
298 | }
|
---|
299 | }
|
---|
300 | h.click();
|
---|
301 | });
|
---|
302 | b.appendChild(c);
|
---|
303 | }
|
---|
304 | x[i].appendChild(b);
|
---|
305 | a.addEventListener("click", function (e) {
|
---|
306 | e.stopPropagation();
|
---|
307 | closeAllSelect(this);
|
---|
308 | this.nextSibling.classList.toggle("select-hide");
|
---|
309 | this.classList.toggle("select-arrow-active");
|
---|
310 | });
|
---|
311 | }
|
---|
312 |
|
---|
313 | function closeAllSelect(elmnt) {
|
---|
314 | var x, y, i, xl, yl, arrNo = [];
|
---|
315 | x = document.getElementsByClassName("select-items");
|
---|
316 | y = document.getElementsByClassName("select-selected");
|
---|
317 | xl = x.length;
|
---|
318 | yl = y.length;
|
---|
319 | for (i = 0; i < yl; i++) {
|
---|
320 | if (elmnt == y[i]) {
|
---|
321 | arrNo.push(i)
|
---|
322 | } else {
|
---|
323 | y[i].classList.remove("select-arrow-active");
|
---|
324 | }
|
---|
325 | }
|
---|
326 | for (i = 0; i < xl; i++) {
|
---|
327 | if (arrNo.indexOf(i)) {
|
---|
328 | x[i].classList.add("select-hide");
|
---|
329 | }
|
---|
330 | }
|
---|
331 | }
|
---|
332 |
|
---|
333 | document.addEventListener("click", closeAllSelect);
|
---|
334 | </script>
|
---|
335 | </body>
|
---|
336 | </html> |
---|