| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html lang="en">
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta charset="UTF-8">
|
|---|
| 5 | <title>Title</title>
|
|---|
| 6 |
|
|---|
| 7 | </head>
|
|---|
| 8 | <body>
|
|---|
| 9 | <div class="comment-section">
|
|---|
| 10 | <h2>Остави коментар</h2>
|
|---|
| 11 | <form th:action="@{'/proizvodi/{id}/comment' (id = ${proizvod?.ids})}" method="post">
|
|---|
| 12 | <label for="id">Производ:</label>
|
|---|
| 13 | <input type="text" id="id" name="id" th:value="${proizvod?.name}" disabled >
|
|---|
| 14 | <label for="ime">Корисничко име:</label>
|
|---|
| 15 | <input type="text" id="ime" name="ime" required>
|
|---|
| 16 | <label for="tekst">Коментар:</label>
|
|---|
| 17 | <textarea id="tekst" name="tekst" required></textarea>
|
|---|
| 18 | <input type="submit" value="Submit">
|
|---|
| 19 | </form>
|
|---|
| 20 |
|
|---|
| 21 | </div>
|
|---|
| 22 | </body>
|
|---|
| 23 | <style>
|
|---|
| 24 | body
|
|---|
| 25 | {
|
|---|
| 26 | background-color: #3a3c3d;
|
|---|
| 27 |
|
|---|
| 28 | }
|
|---|
| 29 | .comment-section {
|
|---|
| 30 | max-width: 800px;
|
|---|
| 31 | margin: 50px auto;
|
|---|
| 32 | padding: 20px;
|
|---|
| 33 | background-color: #f5f5f5;
|
|---|
| 34 | border: 1px solid #ddd;
|
|---|
| 35 | border-radius: 5px;
|
|---|
| 36 | font-family: Arial, sans-serif;
|
|---|
| 37 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|---|
| 38 | }
|
|---|
| 39 |
|
|---|
| 40 | .comment-section h2 {
|
|---|
| 41 | font-size: 24px;
|
|---|
| 42 | margin-bottom: 20px;
|
|---|
| 43 | text-align: center;
|
|---|
| 44 | color: #333;
|
|---|
| 45 | }
|
|---|
| 46 |
|
|---|
| 47 | .comment-section form label {
|
|---|
| 48 | display: block;
|
|---|
| 49 | font-weight: bold;
|
|---|
| 50 | margin-bottom: 10px;
|
|---|
| 51 | color: #666;
|
|---|
| 52 | }
|
|---|
| 53 |
|
|---|
| 54 | .comment-section form input[type="text"],
|
|---|
| 55 | .comment-section form input[type="email"],
|
|---|
| 56 | .comment-section form textarea {
|
|---|
| 57 | display: block;
|
|---|
| 58 | width: 100%;
|
|---|
| 59 | padding: 10px;
|
|---|
| 60 | margin-bottom: 20px;
|
|---|
| 61 | border: 1px solid #ccc;
|
|---|
| 62 | border-radius: 5px;
|
|---|
| 63 | font-size: 16px;
|
|---|
| 64 | color: #333;
|
|---|
| 65 | }
|
|---|
| 66 |
|
|---|
| 67 | .comment-section form input[type="text"]:focus,
|
|---|
| 68 | .comment-section form input[type="email"]:focus,
|
|---|
| 69 | .comment-section form textarea:focus {
|
|---|
| 70 | border-color: #007bff;
|
|---|
| 71 | box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
|
|---|
| 72 | }
|
|---|
| 73 |
|
|---|
| 74 | .comment-section form textarea {
|
|---|
| 75 | height: 120px;
|
|---|
| 76 | }
|
|---|
| 77 |
|
|---|
| 78 | .comment-section form input[type="submit"] {
|
|---|
| 79 | background-color: #007bff;
|
|---|
| 80 | color: #fff;
|
|---|
| 81 | padding: 10px 20px;
|
|---|
| 82 | border: none;
|
|---|
| 83 | border-radius: 5px;
|
|---|
| 84 | font-size: 18px;
|
|---|
| 85 | cursor: pointer;
|
|---|
| 86 | transition: background-color 0.2s ease;
|
|---|
| 87 | }
|
|---|
| 88 |
|
|---|
| 89 | .comment-section form input[type="submit"]:hover {
|
|---|
| 90 | background-color: #0069d9;
|
|---|
| 91 | }
|
|---|
| 92 |
|
|---|
| 93 | .comment-section .comments {
|
|---|
| 94 | margin-top: 40px;
|
|---|
| 95 | }
|
|---|
| 96 |
|
|---|
| 97 | .comment-section .comments h3 {
|
|---|
| 98 | font-size: 20px;
|
|---|
| 99 | margin-bottom: 20px;
|
|---|
| 100 | color: #333;
|
|---|
| 101 | }
|
|---|
| 102 |
|
|---|
| 103 | .comment-section .comments ul {
|
|---|
| 104 | list-style: none;
|
|---|
| 105 | padding: 0;
|
|---|
| 106 | margin: 0;
|
|---|
| 107 | }
|
|---|
| 108 |
|
|---|
| 109 | .comment-section .comments li {
|
|---|
| 110 | margin-bottom: 30px;
|
|---|
| 111 | border: 1px solid #ddd;
|
|---|
| 112 | border-radius: 5px;
|
|---|
| 113 | background-color: #fff;
|
|---|
| 114 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|---|
| 115 | }
|
|---|
| 116 |
|
|---|
| 117 | .comment-section .comments .comment {
|
|---|
| 118 | padding: 20px;
|
|---|
| 119 | }
|
|---|
| 120 |
|
|---|
| 121 | .comment-section .comments .comment p {
|
|---|
| 122 | margin: 0;
|
|---|
| 123 | font-size: 16px;
|
|---|
| 124 | color: #333;
|
|---|
| 125 | }
|
|---|
| 126 |
|
|---|
| 127 | .comment-section .comments .comment-info {
|
|---|
| 128 | margin-bottom: 10px;
|
|---|
| 129 | }
|
|---|
| 130 |
|
|---|
| 131 | .comment-section .comments .comment-info strong {
|
|---|
| 132 | font-weight: bold;
|
|---|
| 133 | color: #007bff;
|
|---|
| 134 | }
|
|---|
| 135 |
|
|---|
| 136 | .comment-section .comments .comment-info em {
|
|---|
| 137 | font-style: italic;
|
|---|
| 138 | color: #666;
|
|---|
| 139 | }
|
|---|
| 140 | </style>
|
|---|
| 141 |
|
|---|
| 142 | </html>
|
|---|
