diff --git a/css/animation.css b/css/animation.css index 421369f..9a6d681 100644 --- a/css/animation.css +++ b/css/animation.css @@ -3,6 +3,71 @@ ======================================== */ +/* ======================================== + LOADING OVERLAY + ======================================== */ + +/* Overlay di caricamento a schermo intero */ +.loading-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(16, 25, 75, 0.95); + backdrop-filter: blur(8px); + display: flex; + justify-content: center; + align-items: center; + z-index: 9999; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; +} + +/* Quando l'overlay è attivo */ +.loading-overlay.active { + opacity: 1; + visibility: visible; +} + +/* Contenuto dell'overlay */ +.loading-content { + text-align: center; + color: white; +} + +/* Spinner grande per il loading overlay */ +.spinner-large { + width: 60px; + height: 60px; + border: 5px solid rgba(255, 255, 255, 0.2); + border-top-color: #f7b835; + border-radius: 50%; + animation: spin 0.8s linear infinite; + margin: 0 auto 20px; +} + +/* Testo di caricamento */ +.loading-text { + font-size: 1.1rem; + font-weight: 500; + color: white; + margin: 0; + animation: pulse 1.5s ease-in-out infinite; +} + +/* Animazione pulse per il testo */ +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + + /* Transizione per i link di navigazione */ .navLink, .nav-link, diff --git a/data/changelog.xml b/data/changelog.xml index c517922..2cf0816 100644 --- a/data/changelog.xml +++ b/data/changelog.xml @@ -2,7 +2,15 @@ - + + 2.2.0 + + E' stato reintrodotto la schermata di caricamento ad ogni selezione di ogni pagina dell'applicazione + Correzione e bugfix di problematiche varie. + + + + 2.1.4 Corretto la visione verticale sui dispositivi mobili diff --git a/data/radio.xml b/data/radio.xml index a03fef0..555b579 100644 --- a/data/radio.xml +++ b/data/radio.xml @@ -24,7 +24,7 @@ https://www.radiocitta105.it/contentrpigplay - + - + \ No newline at end of file diff --git a/js/app.js b/js/app.js index 2b0894e..5cac683 100644 --- a/js/app.js +++ b/js/app.js @@ -6,6 +6,7 @@ document.addEventListener('DOMContentLoaded', function () { let hlsInstance = null; let currentXHR = null; let isLoading = false; + let loadingOverlay = null; // WeakMap per tracciare i listener degli elementi const linkListeners = new WeakMap(); @@ -94,6 +95,27 @@ document.addEventListener('DOMContentLoaded', function () { } } + /** + * Mostra l'overlay di caricamento + */ + function showLoadingOverlay() { + if (!loadingOverlay) { + loadingOverlay = document.getElementById('loadingOverlay'); + } + if (loadingOverlay) { + loadingOverlay.classList.add('active'); + } + } + + /** + * Nasconde l'overlay di caricamento + */ + function hideLoadingOverlay() { + if (loadingOverlay) { + loadingOverlay.classList.remove('active'); + } + } + /** * Caricamento pagina con protezione da race condition */ @@ -120,6 +142,9 @@ document.addEventListener('DOMContentLoaded', function () { return; } + // Mostra l'overlay di caricamento + showLoadingOverlay(); + // Animazione fade out contentContainer.classList.remove('fade-in'); contentContainer.classList.add('fade-out'); @@ -138,6 +163,9 @@ document.addEventListener('DOMContentLoaded', function () { if (this.status === 200) { contentContainer.innerHTML = this.responseText; + // Nascondi overlay di caricamento + hideLoadingOverlay(); + // Animazione fade in contentContainer.classList.remove('fade-out'); contentContainer.classList.add('fade-in'); @@ -175,6 +203,7 @@ document.addEventListener('DOMContentLoaded', function () { console.log('Pagina caricata:', page); } else { + hideLoadingOverlay(); contentContainer.innerHTML = '

Errore

Impossibile caricare la pagina. Codice errore: ' + this.status + '

'; contentContainer.classList.remove('fade-out'); contentContainer.classList.add('fade-in'); @@ -185,6 +214,7 @@ document.addEventListener('DOMContentLoaded', function () { currentXHR.onerror = function () { isLoading = false; currentXHR = null; + hideLoadingOverlay(); contentContainer.innerHTML = '

Errore di connessione

Controlla la tua connessione internet e riprova.

'; contentContainer.classList.remove('fade-out'); contentContainer.classList.add('fade-in'); @@ -194,6 +224,7 @@ document.addEventListener('DOMContentLoaded', function () { currentXHR.onabort = function () { isLoading = false; currentXHR = null; + hideLoadingOverlay(); console.log('Richiesta XHR annullata'); }; diff --git a/pages/mobile.php b/pages/mobile.php index 65ca746..c4fcefb 100644 --- a/pages/mobile.php +++ b/pages/mobile.php @@ -93,6 +93,14 @@ ?> + +
+
+
+

Caricamento...

+
+
+