Styled loader and modal

src/webui/js/build.js

@@ -5,18 +5,20 @@
  * @param {number} duration - Duration in ms.
  */
 
-function showLoader(text = "Building...") {
+// --- Loader helpers ---
+function showLoader(text = "Uploading...") {
   const loader = document.getElementById("global-loader");
   if (loader) {
-    loader.style.display = "flex";
+    loader.classList.add("active");
     document.getElementById("loader-text").textContent = text;
   }
 }
 function hideLoader() {
   const loader = document.getElementById("global-loader");
-  if (loader) loader.style.display = "none";
+  if (loader) loader.classList.remove("active");
 }
 
+// --- Toast helpers ---
 function showToast(message, type = "success", duration = 3000) {
   const container = document.getElementById("toast-container");
   if (!container) return;

src/webui/js/site-info.js

@@ -16,13 +16,13 @@ function showToast(message, type = "success", duration = 3000) {
 function showLoader(text = "Uploading...") {
   const loader = document.getElementById("global-loader");
   if (loader) {
-    loader.style.display = "flex";
+    loader.classList.add("active");
     document.getElementById("loader-text").textContent = text;
   }
 }
 function hideLoader() {
   const loader = document.getElementById("global-loader");
-  if (loader) loader.style.display = "none";
+  if (loader) loader.classList.remove("active");
 }
 
 document.addEventListener("DOMContentLoaded", () => {

src/webui/js/theme-editor.js

@@ -35,15 +35,16 @@ function showToast(message, type = "success", duration = 3000) {
 function showLoader(text = "Uploading...") {
   const loader = document.getElementById("global-loader");
   if (loader) {
-    loader.style.display = "flex";
+    loader.classList.add("active");
     document.getElementById("loader-text").textContent = text;
   }
 }
 function hideLoader() {
   const loader = document.getElementById("global-loader");
-  if (loader) loader.style.display = "none";
+  if (loader) loader.classList.remove("active");
 }
 
+// --- Color Picker
 function setupColorPicker(colorId, btnId, textId, initial) {
   const colorInput = document.getElementById(colorId);
   const colorBtn = document.getElementById(btnId);

src/webui/js/upload.js

@@ -2,13 +2,13 @@
 function showLoader(text = "Uploading...") {
   const loader = document.getElementById("global-loader");
   if (loader) {
-    loader.style.display = "flex";
+    loader.classList.add("active");
     document.getElementById("loader-text").textContent = text;
   }
 }
 function hideLoader() {
   const loader = document.getElementById("global-loader");
-  if (loader) loader.style.display = "none";
+  if (loader) loader.classList.remove("active");
 }
 
 // --- Upload gallery images ---

src/webui/style/style.css

@@ -230,6 +230,24 @@ h2 {
   margin-top: 8px;
 }
 
+.photo button.validate-tag-btn {
+    border-radius: 30px;
+    border: none;
+    background: #049b3d;
+    color: #fff;
+    font-size: 10px;
+    cursor: pointer;
+    margin-left: 4px;
+    transition: all ease 0.2s;
+    width: 35px;
+    border: 1px solid #585858;
+}
+
+.photo button.validate-tag-btn:hover {
+  background: #02cb4e;
+} 
+
+
 .suggestions li.selected {
   background-color: #007782;
   color: white;
@@ -432,15 +450,16 @@ h2 {
 }
 
 .modal-content {
-  background: #131313;
+  background: #000000a3;
   color: #fff;
   padding: 2rem 2.5rem;
   border-radius: 10px;
-  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
   min-width: 300px;
   max-width: 90vw;
   position: relative;
   text-align: center;
+  backdrop-filter: blur(20px);
 }
 
 .modal-close {
@@ -497,6 +516,7 @@ h2 {
   background: #2d2d2d;
   color: white;
   display: none;
+  margin-bottom: 6px;
 }
 
 #remove-all-gallery:hover,
@@ -888,19 +908,51 @@ justify-content: center;
     display: flex;
 }
 
-.photo button.validate-tag-btn {
+/* --- Global Loader & Spinner --- */
-    border-radius: 30px;
+#global-loader {
-    border: none;
+  display: none;
-    background: #049b3d;
+  position: fixed;
-    color: #fff;
+  top: 0; left: 0; width: 100vw; height: 100vh;
-    font-size: 10px;
+  z-index: 99999;
-    cursor: pointer;
+  background: rgba(0,0,0,0.4);
-    margin-left: 4px;
+  align-items: center;
-    transition: all ease 0.2s;
+  justify-content: center;
-    width: 35px;
-    border: 1px solid #585858;
 }
 
-.photo button.validate-tag-btn:hover {
+#global-loader.active {
-  background: #02cb4e;
+  display: flex;
 }
+
+.loader-inner {
+  opacity: 0;
+  transition: opacity 0.9s cubic-bezier(.4,0,.2,1);
+  background: #0c0d0c29;
+  padding: 32px 48px;
+  border-radius: 16px;
+  box-shadow: 0 2px 24px #000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  backdrop-filter: blur(20px);
+}
+
+#global-loader.active .loader-inner {
+  opacity: 1;
+}
+
+.loader-spinner {
+  width: 48px;
+  height: 48px;
+  border: 6px solid #55c3ec;
+  border-top: 6px solid #222;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+#loader-text {
+  margin-top: 18px;
+  color: #fff;
+  font-size: 18px;
+}
+
+@keyframes spin { 100% { transform: rotate(360deg); } }

src/webui/template/base.html

@@ -66,15 +66,12 @@
             </div>
         </div>
         <!-- Loader -->
-        <div id="global-loader" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;">
+        <div id="global-loader">
-            <div style="background:#222;padding:32px 48px;border-radius:16px;box-shadow:0 2px 24px #000;display:flex;flex-direction:column;align-items:center;">
+            <div class="loader-inner">
-                <div class="loader-spinner" style="width:48px;height:48px;border:6px solid #55c3ec;border-top:6px solid #222;border-radius:50%;animation:spin 1s linear infinite;"></div>
+                <div class="loader-spinner"></div>
-                <div style="margin-top:18px;color:#fff;font-size:18px;" id="loader-text">Uploading...</div>
+                <div id="loader-text">Uploading...</div>
             </div>
         </div>
-        <style>
-        @keyframes spin { 100% { transform: rotate(360deg); } }
-        </style>
         <!-- Scripts -->
         <script src="{{ url_for('static', filename='js/build.js') }}" defer></script>
         {% block scripts %}{% endblock %}