| [0e4d807] | 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> |
|---|
