From b5f8ceeb310c04c607604114efdb1b03a6e004d4 Mon Sep 17 00:00:00 2001 From: Djeex Date: Fri, 22 Aug 2025 15:29:18 +0200 Subject: [PATCH] Styled loader and modal --- src/webui/js/build.js | 8 ++-- src/webui/js/site-info.js | 4 +- src/webui/js/theme-editor.js | 5 ++- src/webui/js/upload.js | 4 +- src/webui/style/style.css | 84 +++++++++++++++++++++++++++++------- src/webui/template/base.html | 11 ++--- 6 files changed, 84 insertions(+), 32 deletions(-) diff --git a/src/webui/js/build.js b/src/webui/js/build.js index d48408c..91022da 100644 --- a/src/webui/js/build.js +++ b/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; diff --git a/src/webui/js/site-info.js b/src/webui/js/site-info.js index d0af38e..3af7338 100644 --- a/src/webui/js/site-info.js +++ b/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", () => { diff --git a/src/webui/js/theme-editor.js b/src/webui/js/theme-editor.js index c51a00d..f7b45c4 100644 --- a/src/webui/js/theme-editor.js +++ b/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); diff --git a/src/webui/js/upload.js b/src/webui/js/upload.js index 81c30a0..d2a45f1 100644 --- a/src/webui/js/upload.js +++ b/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 --- diff --git a/src/webui/style/style.css b/src/webui/style/style.css index f15b1c4..b347332 100644 --- a/src/webui/style/style.css +++ b/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 { - 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; +/* --- Global Loader & Spinner --- */ +#global-loader { + 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; } -.photo button.validate-tag-btn:hover { - background: #02cb4e; -} \ No newline at end of file +#global-loader.active { + 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); } } \ No newline at end of file diff --git a/src/webui/template/base.html b/src/webui/template/base.html index 8645784..f76a2b6 100644 --- a/src/webui/template/base.html +++ b/src/webui/template/base.html @@ -66,15 +66,12 @@ -