From d694f8f49fe9f34ec46f7e60b7fa5675f938f207 Mon Sep 17 00:00:00 2001
From: salman <zaher.salman@psi.ch>
Date: Tue, 14 Apr 2026 17:14:27 +0200
Subject: [PATCH] Show density warning near input

---
 TrimSPlib.js | 29 ++++++++++++++++++++++++++++-
 ZGUI.css     | 21 +++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/TrimSPlib.js b/TrimSPlib.js
index a2bab49..103c165 100644
--- a/TrimSPlib.js
+++ b/TrimSPlib.js
@@ -3063,6 +3063,33 @@ function StoppingCoefficients(Element, flag)
     }
 }
 
+let transientWarningTimeout = null;
+function showTransientWarning(message, targetElement, duration = 4000) {
+    let warning = document.getElementById('transientWarning');
+    if (!warning) {
+	warning = document.createElement('div');
+	warning.id = 'transientWarning';
+	warning.className = 'transient-warning';
+	document.body.appendChild(warning);
+    }
+
+    warning.textContent = message;
+    if (targetElement) {
+	const rect = targetElement.getBoundingClientRect();
+	warning.style.left = `${Math.max(12, rect.left + window.scrollX)}px`;
+	warning.style.top = `${rect.bottom + window.scrollY + 8}px`;
+    }
+    warning.classList.add('visible');
+
+    if (transientWarningTimeout) {
+	clearTimeout(transientWarningTimeout);
+    }
+
+    transientWarningTimeout = setTimeout(() => {
+	warning.classList.remove('visible');
+    }, duration);
+}
+
 
 function rho_fun()
 {
@@ -3114,7 +3141,7 @@ function rho_fun()
 			rho = total_molar_mass / total_molar_volume;
 		    }
 		    if (rho > 0) {
-			alert("Warning: Estimated density from additive elemental molar volumes; please verify manually.");
+			showTransientWarning("Warning: Estimated density from additive elemental molar volumes; please verify manually.", document.getElementById(rhoLi));
 		    }
 		}
 	    }
diff --git a/ZGUI.css b/ZGUI.css
index 1efe7d9..1c39454 100644
--- a/ZGUI.css
+++ b/ZGUI.css
@@ -71,6 +71,27 @@ td {
     display: table;
 }
 
+.transient-warning {
+    position: fixed;
+    max-width: 360px;
+    padding: 10px 14px;
+    background-color: #fff4cc;
+    border: 1px solid #c5a100;
+    border-radius: 8px;
+    color: #4d3b00;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
+    font-size: 0.95rem;
+    line-height: 1.35;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s ease;
+    z-index: 1000;
+}
+
+.transient-warning.visible {
+    opacity: 1;
+}
+
 .group_name {
     padding-left:1em;
     padding-right:1em;