"Scopri il Nostro Nuovo Progetto!" - BOX 2.0

<!-- Font Awesome per l’icona Librerie custom by losmanettone.it-->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<!-- Material Icons Librerie-->

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Pulsante per aprire il pannello icona in basso gialla a destra by gli smanettoni assemblaggio by MAX 2025 -->

<button id="accessibilityToggle" aria-label="Accessibilità">

<i class="fas fa-universal-access"></i>

</button>

<!-- Pannello di accessibilità aggiornato-->

<div id="accessibilityPanel" role="dialog" aria-labelledby="accessibilityTitle" tabindex="0">

 <h3 id="accessibilityTitle" class="static-text" style="display: flex; align-items: center; justify-content: space-between;">

   <div style="display: flex; align-items: center;">

     <span class="material-icons">accessibility</span> Accessibilità Testi solo per PC e Tablet.

     <i id="infoIcon" class="fas fa-exclamation-circle"

        style="color: white; font-size: 20px; cursor: pointer; margin-left: 20px;"

        title="Clicca per info"></i>

       <!-- Icona di chiusura -->

   <i id="closeIcon" class="fas fa-times"

  style="color: white; font-size: 20px; cursor: pointer; position: absolute; top: 20px; right: 15px;"

  title="Chiudi il box"></i>

 </h3>

 <div class="color-picker-row">

   <span class="material-icons">palette</span> <!-- Icona a sinistra per il colore -->

   <span class="color-label">PANNELLO</span> <!-- Testo ben allineato -->

   <input type="color" id="panelColor" class="color-picker"> <!-- Dimensioni Quadrato colore sfondo pannello -->

 </div>

 <!-- Contenitore dei pulsanti divisi in due colonne per il responsive-->

 <div id="buttonContainer">

 <div class="column">

 

   <button class="access-btn" id="zoomInBtn" aria-label="Aumenta la dimensione del testo">

   <span class="material-icons">zoom_in</span> Testo +

   </button>

   

   <button class="access-btn" id="zoomOutBtn" aria-label="Riduci la dimensione del testo">

   <span class="material-icons">zoom_out</span> Testo -

   </button>

   

   <button class="access-btn" id="highContrastBtn" aria-label="Attiva il contrasto elevato">

   <span class="material-icons">contrast</span> Alto Contrasto

   </button>

   

   <button class="access-btn" id="enlargeCursorBtn" aria-label="Ingrandisci il puntatore del mouse">

   <span class="material-icons">mouse</span> Ingrandisci Puntatore

   </button>

   

   <button class="access-btn" id="stopAnimationsBtn" aria-label="Disattiva le animazioni">

   <span class="material-icons">pause</span> Stop Animazioni

   </button>

   

   <button class="access-btn" id="lowResolutionBtn" aria-label="Bassa Risoluzione">

   <span class="material-icons">settings</span> Bassa Risoluzione

   </button>

 

 </div>

 

 <div class="column">

   <button class="access-btn" id="dyslexiaFontBtn" aria-label="Attiva il font per dislessia">

   <span class="material-icons">menu_book</span> Font Dislessia

   </button>

   

   <button class="access-btn" id="monochromeBtn" aria-label="Attiva la modalità monocromatica">

   <span class="material-icons">toggle_on</span> Modalità Monocromatica

   </button>

   

   <button class="access-btn" id="letterSpacingBtn" aria-label="Aumenta la spaziatura tra caratteri">

   <span class="material-icons">vertical_split</span> Spaziatura Caratteri

   </button>

   

   <button class="access-btn" id="boldTextBtn" aria-label="Rendi il testo in grassetto">

   <span class="material-icons">format_bold</span> Peso del Carattere

   </button>

   

   <button class="access-btn" id="resetBtn" aria-label="Reimposta tutte le modifiche">

   <span class="material-icons">restart_alt</span> Reset

   </button>

 

   <button class="access-btn" id="highSaturationBtn" aria-label="Alta Saturazione">

   <span class="material-icons">high_quality</span> Alta Saturazione

 </button>

</div>

<footer class="access-footer static-text">

 GLI SMANETTONI © 2025 - ACCESSIBILITÀ 2.0

 <br>

 <a href="https://www.losmanettone.it" target="_blank" rel="noopener noreferrer">

   <img src="https://www.losmanettone.it/images/A_RIPICCOLO.png" alt="Logo Personalizzato" class="footer-logo">

 </a>

</footer>

<style>

 padding-bottom: 20px; /* aumenta distanza tra logo e base pannello */

}

#buttonContainer {

 display: flex; /* Disposizione orizzontale */

 justify-content: space-between; /* Spaziatura uniforme */

 gap: 20px; /* Spaziatura tra le colonne */

}

.column {

 flex: 1; /* Occupa ugualmente lo spazio disponibile */

 max-width: 50%; /* Imposta il 50% della larghezza disponibile */

 box-sizing: border-box; /* Include padding e bordi nel calcolo della larghezza */

}

.access-btn {

 width: auto; /* Adatta la larghezza alla dimensione del contenuto */

 min-width: 120px; /* Imposta una larghezza minima */

 padding: 10px 15px; /* Aggiunge spazio interno */

 text-align: left; /* Allinea il testo a sinistra */

 display: flex; /* Disposizione flessibile per testo e icona */

 align-items: center; /* Allinea icona e testo verticalmente */

}

#accessibilityTitle {

 text-align: left; /* Allinea il contenuto del titolo a sinistra */

 padding-left: 5px; /* Riduci lo spazio dall'inizio */

 font-size: 12px;

 color: #FFFFFF;

 font-family: Arial, sans-serif; /* Imposta il font Arial */

}

#accessibilityTitle {

  border-bottom: 2px solid #ffc107;

  padding-bottom: 8px;

}

#accessibilityTitle .material-icons {

 font-size: 32px; /* Dimensione dell'icona */

 vertical-align: middle; /* Allinea l'icona con il testo */

 margin-right: 10px; /* Spazio tra l'icona e il testo */

 color: #ffc107; /* Colore dell'icona */

 margin-left: 0; /* Rimuove eventuali margini sinistri */

}

#accessibilityToggle {

position: fixed;

bottom: 100px; /* 20px sopra il pulsante “torna su” */

right: 24px;

width: 60px;

height: 60px;

background: #ffc107;

color: #000;

border: none;

border-radius: 50%;

font-size: 22px;

cursor: pointer;

z-index: 9999;

display: flex;

align-items: center;

justify-content: center;

}

#accessibilityPanel {

position: fixed;

bottom: 250px;

right: 20px;

width: 660px;

background: rgba(36, 46, 91, 0.9);

color: white;

padding: 15px;

border-radius: 10px;

display: none;

z-index: 2147483647 !important;

}

#accessibilityPanel {

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}

@media (max-width: 1378px) {

   #accessibilityPanel {

   position: fixed;

   top: 20%;

   right: 30px;

   max-width: 460px;

   padding: 15px;

   background-color: #ffffff;

   min-height: 475px; /* Altezza minima */

   height: 575px; /* Altezza controllata */

   overflow-y: auto;

   overflow-x: hidden; /* Evita scorrimento orizzontale */

   box-sizing: border-box; /* Corregge il calcolo della larghezza */

   

   }

   footer {

   overflow: hidden; /* Assicura che il footer non causi scorrimento */

   }

}

/* Stili per monitor più piccoli notebook */

@media (max-width: 1378px) {

   .access-btn {

   height: 35px !important; /* Forza l'altezza */

   padding: 5px !important; /* Forza la spaziatura interna */

   font-size: 12px !important; /* Forza la dimensione del testo */

   line-height: 1 !important; /* Allinea il testo */

   }

   #accessibilityPanel {

   height: 450px; /* Mantieni l'altezza controllata */

   overflow-y: auto;

   }

}

@media (max-width: 600px) and (max-width: 1280px) {

   #accessibilityPanel {

   position: fixed;

   top: 20%;

   right: 30px;

   max-width: 460px;

   padding: 15px;

   background-color: #ffffff;

   min-height: 475px; /* Altezza minima */

   height: 575px; /* Altezza controllata */

   overflow-y: auto;

   overflow-x: hidden; /* Evita scorrimento orizzontale */

   box-sizing: border-box; /* Corregge il calcolo della larghezza */

   

   }

   footer {

   overflow: hidden; /* Assicura che il footer non causi scorrimento */

   }

}

/* Stili per monitor più piccoli notebook */

@media (min-width: 600px) and (max-width: 1280px) {

   .access-btn {

       height: 35px !important; /* Forza l'altezza */

       padding: 5px !important; /* Forza la spaziatura interna */

       font-size: 12px !important; /* Forza la dimensione del testo */

       line-height: 1 !important; /* Allinea il testo */

   }

   #accessibilityPanel {

       height: 450px; /* Mantieni l'altezza controllata */

       overflow-y: auto;

   }

}

.access-btn {

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.access-btn {

width: 100%;

margin: 6px 0;

padding: 10px;

background: #0078D7;

color: white;

border: none;

border-radius: 2px;

font-size: 15px;

cursor: pointer;

text-align: left; /* Allinea il contenuto a sinistra */

padding-left: 10px; /* Distanza di 10px dal bordo sinistro */

display: flex; /* Per gestire layout con icone e testo */

align-items: center; /* Allinea verticalmente l'icona e il testo */

}

.access-btn {

width: 100%; /* Pulsanti a larghezza piena */

height: 50px; /* Altezza fissa */

display: flex; /* Layout flessibile per testo e icone */

align-items: center; /* Allinea icona e testo verticalmente */

justify-content: flex-start; /* Allinea tutto a sinistra */

padding: 10px; /* Spazio interno */

margin: 6px 0; /* Distanza tra i pulsanti */

background: linear-gradient(135deg, rgb(45, 156, 219), rgb(34, 102, 204)); /* Gradiente dinamico */

border-radius: 5px; /* Angoli arrotondati */

color: white;

font-size: 15px;

border: none;

transition: all 0.3s ease; /* Transizioni morbide */

}

.material-icons {

font-size: 20px; /* Dimensione uniforme delle icone */

margin-right: 10px; /* Spaziatura tra icona e testo */

}

.access-btn:hover {

background: linear-gradient(135deg, rgb(34, 102, 204), rgb(45, 156, 219)); /* Inverti i colori per l'effetto hover */

transform: translateY(-3px); /* Effetto di sollevamento al passaggio del mouse */

}

.access-btn {

transition: background 0.3s ease, transform 0.2s ease;

}

.access-btn:hover {

transform: translateY(-1px); /* Effetto di sollevamento */

}

.access-btn.active {

background: #ffc107; /* Cambia il colore per mostrare l’attivazione */

color: black;

}

.material-icons {

font-size: 28px;

margin-right: 12px;

color: white;

}

.access-btn:hover {

background: #0056b3;

}

.access-footer {

text-align: center;

font-size: 13px;

margin-top: 10px;

color: #ccc;

font-family: Arial, sans-serif; /* Imposta il font Arial */

}

.high-contrast * {

background: black !important;

color: white !important;

}

.monochrome {

filter: grayscale(100%);

}

.monochrome #accessibilityPanel,

.monochrome #accessibilityToggle {

filter: none;

}

.dyslexia-font *:not(.material-icons) {

font-family: 'OpenDyslexic', sans-serif !important;

}

.letter-spacing * {

letter-spacing: 1px !important;

}

.bold-text * {

font-weight: bold !important;

}

.large-cursor {

cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='64' height='64'%3E%3Cpolygon fill='white' stroke='black' stroke-width='2' points='0,0 0,32 10,22 16,32 26,22 18,10 32,10'/%3E%3C/svg%3E"), auto;

}

.stop-animations * {

animation: none !important;

transition: none !important;

}

*:focus {

outline: 2px solid #ffc107;

}

.color-picker-row {

 display: flex; /* Posizionamento orizzontale */

 align-items: center; /* Allinea verticalmente gli elementi */

 justify-content: flex-start; /* Allinea gli elementi a sinistra */

 width: 100%; /* Stessa larghezza dei pulsanti */

 height: 50px; /* Stessa altezza dei pulsanti */

 margin: 6px 0; /* Spaziatura tra righe */

 padding-left: 10px; /* Margine interno coerente con i pulsanti */

 background: transparent; /* Mantieni sfondo trasparente */

}

.color-picker-row .material-icons {

 font-size: 28px; /* Stessa dimensione delle icone */

 color: white; /* Stesso colore delle icone */

 margin-right: 12px; /* Spaziatura tra icona e testo */

}

.color-picker-row .color-label {

 font-size: 15px; /* Stessa dimensione del testo dei pulsanti */

 font-family: Arial, sans-serif; /* Font coerente */

 color: white; /* Stesso colore dei testi */

 flex: 1; /* Permette al testo di occupare spazio disponibile */

}

.color-picker-row .color-picker {

 width: 20px; /* Dimensione del quadrato colore */

 height: 20px; /* Altezza del quadrato colore */

 cursor: pointer; /* Punta interattiva */

 border: none; /* Rimuove bordi */

 border-radius: 5px; /* Angoli arrotondati */

}

.color-picker-row .material-icons {

 font-size: 28px; /* Stessa dimensione delle altre icone */

 margin-right: 12px; /* Spaziatura coerente con altre icone */

 vertical-align: middle; /* Allinea l'icona al centro */

 color: white; /* Stesso colore delle icone dei pulsanti */

}

.color-picker-row .color-label {

 font-size: 15px; /* Stessa dimensione del testo dei pulsanti */

 font-family: Arial, sans-serif; /* Font coerente */

 color: white; /* Colore del testo */

 flex: none; /* Impedisci il riadattamento automatico */

 margin-left: -10px; /* Sposta il testo verso sinistra */

 padding-left: 0; /* Assicurati che non ci sia padding aggiuntivo */

}

.color-picker-row {

 display: flex; /* Layout flessibile */

 align-items: center; /* Allinea verticalmente icona, testo e quadratino */

 justify-content: flex-start; /* Allinea tutto a sinistra */

 gap: 10px; /* Spaziatura uniforme tra elementi */

}

.color-picker-row .color-picker {

 width: 20px; /* Dimensione del quadrato */

 height: 20px; /* Altezza del quadrato */

 cursor: pointer; /* Puntatore interattivo */

 border: none; /* Rimuove i bordi */

 border-radius: 5px; /* Angoli arrotondati */

 margin-left: 10px; /* Sposta il quadratino verso sinistra */

}

 /* Effetto per bassa risoluzione: pixelated con scale forzato */

 .low-resolution img {

   image-rendering: pixelated;

   transform: scale(1.5);

   /* Puoi sperimentare con: filter: blur(0.5px); oppure image-rendering: crisp-edges; */

 }

 /* Effetto per alta saturazione rimane invariato */

 .high-saturation {

   filter: saturate(2);

   transition: filter 0.3s ease;

 }

@keyframes flash {

 0%   { opacity: 1; }

 50%  { opacity: 0.5; }

 100% { opacity: 1; }

}

/* Applica l'animazione ai pulsanti specifici quando hanno la classe active */

#lowResolutionBtn.active,

#highSaturationBtn.active {

 animation: flash 1s infinite;

}

<script>

let fontSizeMultiplier = 1;

const max = 1.4;

const min = 0.8;

/* Seleziona tutti gli elementi, escludendo il pannello e pulsanti */

const allElements = () =>

 document.querySelectorAll("body *:not(#accessibilityPanel):not(#accessibilityPanel *):not(#accessibilityToggle)");

document.getElementById("zoomInBtn").addEventListener("click", () => {

   if (fontSizeMultiplier >= max) return; // Raggiunto il limite massimo

   fontSizeMultiplier *= 1.05; // Incremento graduale

   allElements().forEach(el => {

       const currentSize = parseFloat(window.getComputedStyle(el).fontSize);

       el.style.fontSize = (currentSize * 1.05) + "px"; // Aumenta la dimensione del font

   });

});

document.getElementById("zoomOutBtn").addEventListener("click", () => {

   if (fontSizeMultiplier <= min) return; // Raggiunto il limite minimo

   fontSizeMultiplier /= 1.05; // Riduce gradualmente il moltiplicatore

   allElements().forEach(el => {

       const currentSize = parseFloat(window.getComputedStyle(el).fontSize); // Ottieni dimensione attuale

       el.style.fontSize = (currentSize / 1.05) + "px"; // Applica riduzione proporzionale

   });

});

document.getElementById("highContrastBtn").addEventListener("click", () => {

 document.body.classList.toggle("high-contrast");

});

document.getElementById("dyslexiaFontBtn").addEventListener("click", () => {

 document.body.classList.toggle("dyslexia-font");

});

document.getElementById("monochromeBtn").addEventListener("click", () => {

 document.body.classList.toggle("monochrome");

});

document.getElementById("letterSpacingBtn").addEventListener("click", () => {

 document.body.classList.toggle("letter-spacing");

});

document.getElementById("boldTextBtn").addEventListener("click", () => {

 document.body.classList.toggle("bold-text");

});

document.getElementById("enlargeCursorBtn").addEventListener("click", () => {

 document.body.classList.toggle("large-cursor");

});

document.getElementById("stopAnimationsBtn").addEventListener("click", () => {

 document.body.classList.toggle("stop-animations");

});

document.getElementById("accessibilityToggle").addEventListener("click", () => {

 const panel = document.getElementById("accessibilityPanel");

 const firstButton = document.getElementById("zoomInBtn");

 if (panel.style.display === "block") {

   panel.style.display = "none";

 } else {

   panel.style.display = "block";

   firstButton.focus(); // Sposta il focus al primo pulsante

 }

});

document.getElementById("resetBtn").addEventListener("click", () => {

 location.reload();

});

document.addEventListener("keydown", (event) => {

 const panel = document.getElementById("accessibilityPanel");

 if (event.key === "Escape" && panel.style.display === "block") {

   panel.style.display = "none"; // Chiudi il pannello

 }

});

// Imposta il focus sull'icona quando la pagina viene caricata

window.onload = () => {

 const toggleButton = document.getElementById("accessibilityToggle");

 toggleButton.focus(); // Focus automatico sull'icona

};

const allButtons = document.querySelectorAll(".access-btn");

document.addEventListener("keydown", (event) => {

 const focusedElement = document.activeElement;

 const focusableButtons = Array.from(allButtons);

 const currentIndex = focusableButtons.indexOf(focusedElement);

 if (event.key === "ArrowDown" && currentIndex < focusableButtons.length - 1) {

   focusableButtons[currentIndex + 1].focus();

 }

 if (event.key === "ArrowUp" && currentIndex > 0) {

   focusableButtons[currentIndex - 1].focus();

 }

});

// Cambiare e salvare il colore del pannello

document.getElementById("panelColor").addEventListener("input", function () {

 const color = this.value;

 const panel = document.getElementById("accessibilityPanel");

 // Cambia il colore del pannello

 panel.style.backgroundColor = color;

 // Salva il colore scelto nel local storage

 localStorage.setItem("panelBgColor", color);

});

// Recuperare il colore salvato al caricamento della pagina

window.addEventListener("load", function () {

 const savedPanelColor = localStorage.getItem("panelBgColor");

 if (savedPanelColor) {

   const panel = document.getElementById("accessibilityPanel");

   panel.style.backgroundColor = savedPanelColor;

   document.getElementById("panelColor").value = savedPanelColor;

 }

});

 // Gestione pulsante "Bassa Risoluzione"

 document.getElementById("lowResolutionBtn").addEventListener("click", function() {

   const body = document.body;

   const highSaturationBtn = document.getElementById("highSaturationBtn");

   // Se l'effetto Alta Saturazione è attivo, disattivalo

   if (body.classList.contains("high-saturation")) {

     body.classList.remove("high-saturation");

     highSaturationBtn.classList.remove("active");

   }

   // Toggle dell'effetto Bassa Risoluzione

   body.classList.toggle("low-resolution");

   this.classList.toggle("active");

 });

 // Gestione pulsante "Alta Saturazione"

 document.getElementById("highSaturationBtn").addEventListener("click", function() {

   const body = document.body;

   const lowResolutionBtn = document.getElementById("lowResolutionBtn");

   // Se l'effetto Bassa Risoluzione è attivo, disattivalo

   if (body.classList.contains("low-resolution")) {

     body.classList.remove("low-resolution");

     lowResolutionBtn.classList.remove("active");

   }

   // Toggle dell'effetto Alta Saturazione

   body.classList.toggle("high-saturation");

   this.classList.toggle("active");

 });

 

  document.getElementById("closeIcon").onclick = function () {

 const panel = document.getElementById("accessibilityPanel");

 if (panel) {

   panel.style.display = "none"; // Nasconde il pannello

 }

};

 

 // gestione popup

 document.getElementById("infoIcon").addEventListener("click", function () {

 alert("Regole di utilizzo:\n- Funziona solo su PC e Tablet\n- Alcune funzionalità potrebbero non essere supportate sui dispositivi mobili.Include navigazione da tastiera SU e GIÙ,TAB ed ESC. Focus sugli elementi.Attivazione e disattivazione sul click per ogni pulsante. La presente licenza consente l'utilizzo, la modifica e la distribuzione del presente codice e dei relativi contenuti, ad eccezione del logo RSTStudio, su cui permane il pieno copyright.Tutti i diritti relativi al logo RSTStudio sono riservati. L’utilizzo, la riproduzione o l’adattamento del logo è vietato senza previa autorizzazione scritta da parte del titolare dei diritti.");

 });

</script>

<script>

// Al caricamento della pagina, imposta un colore di default al pannello se non è stato ancora scelto

window.addEventListener("DOMContentLoaded", () => {

   const panel = document.getElementById("accessibilityPanel");

   if (panel) {

       const savedColor = localStorage.getItem("panelBgColor");

       if (!savedColor) {

           const defaultColor = "#222"; // Cambialo se vuoi un altro colore di base

           panel.style.backgroundColor = defaultColor;

           localStorage.setItem("panelBgColor", defaultColor);

       } else {

           panel.style.backgroundColor = savedColor;

       }

   }

});

</script>