fixed event details

The-Socialites · Jun 28, 2024 · c5e6198 · c5e6198
1 parent 928861a
commit c5e6198
Showing 1 changed file with 30 additions and 20 deletions.
diff --git a/src/main/resources/templates/events/details.html b/src/main/resources/templates/events/details.html
@@ -3,26 +3,26 @@
 <head>
     <meta charset="UTF-8">
     <title>Event Details</title>
-    <link rel="stylesheet" th:href="@{/styles/dark.css}">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <link rel="stylesheet" th:href="@{/styles/dark.css}">
+
     <style>
         #map {
             height: 400px;
             width: 100%;
         }
-        body {
-            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
-            color: white;
-        }
     </style>
     <script th:inline="javascript">
         /*<![CDATA[*/
         var googleMapsApiKey = /*[[${googleMapsApiKey}]]*/ 'YOUR_FALLBACK_KEY';
         /*]]>*/
     </script>
 </head>
-<body th:class="${theme}" class="bg-gray-900 text-white">
+<body th:class="${theme}">
+<div th:replace="fragments/navbar :: navbar"></div>
+
 <div class="container mx-auto p-6">
     <h1 class="text-4xl font-bold mb-4">Event Details</h1>
     <div class="mb-2">
@@ -48,18 +48,28 @@ <h1 class="text-4xl font-bold mb-4">Event Details</h1>
         <strong class="text-xl">Host:</strong> <span th:text="${event.user.username}" class="text-lg"></span>
     </div>
 </div>
-<form action="#" th:action="@{/events/details/{id}/comments/new(id=${{event.id}})}" th:object="${comment}" method="post">
-    <p>Comment: <input type="text" th:field="*{content}" /></p>
-    <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
-</form>
-<h5 th:text="${comments.isEmpty()}? 'No comments yet' : 'Comments'"></h5>
-<ul>
-    <li th:each="comment : ${comments}">
-        <p th:text="${comment.user.username}"></p>
-        <p th:text="${comment.formattedCreatedAt}"></p>
-        <p th:text="${comment.content}"></p>
-    </li>
-</ul>
+
+<div class="container mx-auto p-6 bg-gray-200 rounded-lg">
+    <form action="#" th:action="@{/events/details/{id}/comments/new(id=${{event.id}})}" th:object="${comment}" method="post" class="mb-6">
+        <div class="mb-4">
+            <label for="content" class="block text-lg font-semibold mb-2">Comment:</label>
+            <input type="text" id="content" th:field="*{content}" class="w-full px-4 py-2 rounded-lg bg-gray-100 text-black border border-gray-400 focus:outline-none focus:border-blue-500" />
+        </div>
+        <div class="flex justify-end gap-4">
+            <input type="submit" value="Submit" class="px-6 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white focus:outline-none focus:ring-2 focus:ring-blue-400 cursor-pointer" />
+            <input type="reset" value="Reset" class="px-6 py-2 rounded-lg bg-gray-500 hover:bg-gray-600 text-white focus:outline-none focus:ring-2 focus:ring-gray-400 cursor-pointer" />
+        </div>
+    </form>
+    <h5 class="text-2xl font-bold mb-4" th:text="${comments.isEmpty()}? 'No comments yet' : 'Comments'"></h5>
+    <ul>
+        <li th:each="comment : ${comments}" class="mb-4 p-4 rounded-lg bg-gray-300">
+            <p class="font-semibold" th:text="${comment.user.username}"></p>
+            <p class="text-sm text-gray-500" th:text="${comment.formattedCreatedAt}"></p>
+            <p class="mt-2" th:text="${comment.content}"></p>
+        </li>
+    </ul>
+</div>
+
 
 <script>
     function initMap() {
@@ -97,4 +107,4 @@ <h5 th:text="${comments.isEmpty()}? 'No comments yet' : 'Comments'"></h5>
     });
 </script>
 </body>
-</html>
+</html>