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

Last change on this file was d3cf3a1, checked in by Marija Micevska <marija_micevska@…>, 2 years ago

Initial commit
  • Property mode set to 100644
File size: 9.2 KB
RevLine 
[d3cf3a1]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>
Note: See TracBrowser for help on using the repository browser.