Djeex/lumeex
1
1
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 8 Wiki Activity

Styled loader and modal

Browse Source
This commit is contained in:
Djeex
2025-08-22 15:29:18 +02:00
parent 1591886505
commit b5f8ceeb31
6 changed files with 84 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/webui/js/build.js
View File

@ -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;

4
src/webui/js/site-info.js
View File

@ -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", () => {

5
src/webui/js/theme-editor.js
View File

@ -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);

4
src/webui/js/upload.js
View File

@ -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 ---

82
src/webui/style/style.css
View File

@ -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;
#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); } }

11
src/webui/template/base.html
View File

@ -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 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-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 style="margin-top:18px;color:#fff;font-size:18px;" id="loader-text">Uploading...</div>
<div id="global-loader">
<div class="loader-inner">
<div class="loader-spinner"></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 %}