update message timeout

public/js/utils.js

@@ -6,12 +6,34 @@ export const showLoading = (show) => {
     loadingSpinner.innerHTML = show ? `<div class="inline-block animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>` : '';
 };
 
-export const showMessage = (message, type = 'success') => {
+// Keep a reference to the timer so we can reset it if a new message appears
-    const messageBox = document.getElementById('message-box');
+let messageTimer = null;
-    messageBox.innerHTML = `<div class="p-4 mb-4 text-sm rounded-lg flex items-center justify-between ${type === 'error' ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}" role="alert"><span>${message}</span><button onclick="this.parentElement.style.display='none'" class="font-bold text-lg">&times;</button></div>`;
-    messageBox.classList.remove('hidden');
-};
 
+export const showMessage = (message, type = 'success', duration = 4000) => { // duration is 4 seconds
+    const messageBox = document.getElementById('message-box');
+    
+    // The HTML for the message itself, using Tailwind classes for styling
+    messageBox.innerHTML = `
+        <div class="p-4 rounded-lg shadow-xl flex items-center justify-between animate-fade-in-down
+                    ${type === 'error' ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}" 
+             role="alert">
+            <span>${message}</span>
+            <button onclick="this.parentElement.parentElement.classList.add('hidden')" 
+                    class="font-bold text-lg hover:text-black">
+                &times;
+            </button>
+        </div>`;
+        
+    messageBox.classList.remove('hidden');
+
+    // Clear any previous timer that might be running
+    clearTimeout(messageTimer);
+
+    // Set a new timer to hide the message box after the specified duration
+    messageTimer = setTimeout(() => {
+        messageBox.classList.add('hidden');
+    }, duration);
+};
 export const formatDecimal = (ms) => ms ? (ms / 3600000).toFixed(2) : '0.00';
 
 export const formatDateTime = (s) => s ? new Date(s).toLocaleString(undefined, { month: '2-digit', day: '2-digit', year: '2-digit', hour: 'numeric', minute: '2-digit' }) : 'N/A';

public/style/style.css

@@ -44,4 +44,15 @@ body {
     /* A darker text color for the active tab to make it stand out */
     color: #1E40AF; /* Tailwind's blue-800 */
     font-weight: 500;
+}
+
+/* Sticky Message Box Styles */
+#message-box {
+    position: fixed; /* 'Fixes' the element relative to the browser window */
+    top: 1rem;       /* 1rem (16px) from the top */
+    left: 50%;       /* Start at 50% from the left */
+    transform: translateX(-50%); /* Shift left by half its own width to perfectly center it */
+    z-index: 2000;   /* Ensures it appears on top of all other content */
+    width: 90%;      /* Make it 90% of the screen width */
+    max-width: 500px; /* But no wider than 500px */
 }