[Hacktoberfest] Enhance Debezium Event Feed UI (fade-in animation, color-coded messages)

app/static/script.js

@@ -205,26 +205,36 @@ function handleIncomingMessage(messageData) {
 }
 
 // Create message element
-function createMessageElement(messageData) {
+    function createMessageElement(messageData) {
     const messageDiv = document.createElement("div");
-    messageDiv.className = "message-item";
-
-    // Determine message type and styling
-    let messageType = 'cdc';
-    let typeLabel = 'CDC';
-
-    if (messageData.includes("Created")) {
-        messageType = 'create';
-        typeLabel = 'CREATE';
-    } else if (messageData.includes("Updated")) {
-        messageType = 'update';
-        typeLabel = 'UPDATE';
-    } else if (messageData.includes("Deleted")) {
-        messageType = 'delete';
-        typeLabel = 'DELETE';
-    }
-
-    messageDiv.classList.add(messageType);
+    messageDiv.className = "message"; // unified style with fade-in animation
+
+    // Determine message type and label
+    let type = 'cdc';
+    if (messageData.includes("Created")) type = 'insert';
+    else if (messageData.includes("Updated")) type = 'update';
+    else if (messageData.includes("Deleted")) type = 'delete';
+
+    messageDiv.classList.add(type);
+
+    // Message content
+    const contentSpan = document.createElement("span");
+    contentSpan.textContent = messageData;
+
+    // Timestamp
+    const timeDiv = document.createElement("div");
+    timeDiv.className = "time";
+    timeDiv.textContent = new Date().toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+
+    // Combine
+    messageDiv.appendChild(contentSpan);
+    messageDiv.appendChild(timeDiv);
+
+    return messageDiv;
+}
 
     // Create message content
     const contentDiv = document.createElement("div");

app/static/styles.css

@@ -526,6 +526,65 @@ body {
     }
 }
 
+/* ======================================================
+   CUSTOM ADDITIONS — Event Feed Styling (Hacktoberfest)
+   ====================================================== */
+.message {
+  max-width: 85%;
+  padding: 10px 14px;
+  border-radius: 12px;
+  line-height: 1.4;
+  word-wrap: break-word;
+  position: relative;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  opacity: 0;
+  transform: translateX(-25px);
+  animation: slideInLeft 0.45s ease-out forwards;
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+}
+
+.message.insert {
+  background-color: #e0f7fa;
+  color: #004d40;
+  border-left: 4px solid #009688;
+}
+
+.message.update {
+  background-color: #fff9c4;
+  color: #5d4037;
+  border-left: 4px solid #fbc02d;
+}
+
+.message.delete {
+  background-color: #ffebee;
+  color: #b71c1c;
+  border-left: 4px solid #f44336;
+}
+
+.message:hover {
+  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
+  transform: translateX(-20px);
+}
+
+.message .time {
+  display: block;
+  text-align: right;
+  font-size: 11px;
+  color: rgba(0,0,0,0.5);
+  margin-top: 4px;
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-25px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+
 /* Nickname Modal Styles */
 .modal-overlay {
     position: fixed;
@@ -717,4 +776,4 @@ body {
 
 #nickname-display {
     font-weight: 600;
-}
+}