migliorato la schermata errore "DISP. NON SOPPOR."

Laaouatni · Jan 1, 2022 · 3105a73 · 3105a73
1 parent d58c4d0
commit 3105a73
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -85,7 +85,7 @@
                     <div class="app-icon"><img src="./images/ms-file-explorer.ico" alt="file Explorer icon by microsoft"><span>Esplora File</span></div>
                 </div>
             </div>
-            <!-- la parte ci sono le cartelle -->
+            <!-- la parte dove ci sono le CARTELLE -->
             <div id="article-div">
                 <div class="app-container-header">
                     <span>Articoli consigliati</span>
@@ -212,7 +212,29 @@
         <video autoplay muted id="myVideo">
             <source src="./images/video-1dark.mp4" type="video/mp4">
         </video>
-        <section id="not-mobile-friendly">Dispositivo NON Sopportato.</section>
+        <section id="not-mobile-friendly">
+            <div id="titolo-errore">
+                Dispositivo NON Sopportato.
+            </div>
+
+            <div>
+                <span>Apri da PC a Schermo Intero "<em><kbd>F11</kbd></em>"</span>,
+                <span>oppure usa "<em><kbd>CTRL</kbd> <kbd>-</kbd></em>" per zoom out</span>
+
+            </div>
+            <div id="dettagli-errore">
+                <!-- errore in width -->
+                <div id="width-errore">
+                    <span id="width-spiegazione">width: small</span>
+                    <span id="width-attuale">undefined.</span>
+                </div>
+                <!-- errore in height -->
+                <div id="height-errore">
+                    <span id="height-spiegazione">height: small</span>
+                    <span id="height-attuale">undefined.</span>
+                </div>
+            </div>
+        </section>
         <section id="spegni-section" class="">
             <div>
                 <div style="--i: 1;"></div>

diff --git a/script.js b/script.js
@@ -228,9 +228,11 @@ function dragSelectorLogic() {
             else if (e1.target.closest("#notification-section") != notifContainer && notifContainer.classList.contains("notification-on") && e1.target.closest("nav") != nav) {
                 notifContainer.classList.remove("notification-on");
                 dragSelectorCode();
-            } else if (e1.target.closest("#w11-start-section") == startContainer || e1.target.closest("#notification-section") == notifContainer || e1.target.closest("#widget-section") == widgetContainer) {
+            } // se si usa il Drag dentro START, WIDGET o NOTIFICHE, allora la funzione NON è attiva.
+            else if (e1.target.closest("#w11-start-section") == startContainer || e1.target.closest("#notification-section") == notifContainer || e1.target.closest("#widget-section") == widgetContainer) {
                 console.log("You can't drag the tab here!");
-            } else {
+            } // altrimenti, la funzione è attiva
+            else {
                 dragSelectorCode();
             }
         }
@@ -344,4 +346,45 @@ function getDate() {
 
 // le funzione chiamate sono inizializzate in queste funzioni
 dragSelectorLogic();
-getDate();
+getDate();
+
+
+function DispositivoNonSupportato() {
+    let AttualeWidthContainer = document.getElementById("width-attuale");
+    let AttualeHeightContainer = document.getElementById("height-attuale");
+
+    let widthSpiegazione = document.getElementById("width-spiegazione");
+    let heightSpiegazione = document.getElementById("height-spiegazione");
+
+    checkSopporto();
+
+    window.addEventListener("resize", function() {
+        checkSopporto();
+    });
+
+    function checkSopporto() {
+        // se la larghezza è inferiore a 800px, allora si mostra la spiegazione
+        if (window.innerWidth < 800) {
+            widthSpiegazione.innerHTML = "ERRORE LARGHEZZA: ti serve <b>800px</b>" + "   " + "per visualizzare questa pagina";
+            AttualeWidthContainer.innerHTML = window.innerWidth + "px";
+            widthSpiegazione.style.color = "rgb(255, 0, 47)";
+        } else {
+            widthSpiegazione.innerHTML = "Larghezza del tuo Schermo Giusta!";
+            AttualeWidthContainer.innerHTML = "";
+            widthSpiegazione.style.color = "rgb(0, 255, 157)";
+        }
+
+        // se l'altezza è inferiore a 600px, allora si mostra la spiegazione
+        if (window.innerHeight < 600) {
+            heightSpiegazione.innerHTML = "ERRORE ALTEZZA: ti serve <b>600px</b>" + "   " + "per visualizzare questa pagina";
+            AttualeHeightContainer.innerHTML = window.innerHeight + "px";
+            heightSpiegazione.style.color = "rgb(255, 0, 47)";
+        } else {
+            heightSpiegazione.innerHTML = "Altezza del tuo Schermo Giusta!";
+            AttualeHeightContainer.innerHTML = "";
+            heightSpiegazione.style.color = "rgb(0, 255, 157)";
+        }
+    }
+}
+
+DispositivoNonSupportato();
diff --git a/style.css b/style.css
@@ -297,11 +297,15 @@ label input {
     display: none;
     place-content: center;
     color: white;
-    font-size: 6vw;
     height: 100vh;
     width: 100vw;
     z-index: 999;
     backdrop-filter: blur(2em);
+    gap: 1em;
+}
+
+#not-mobile-friendly #titolo-errore {
+    font-size: 6vw;
     text-decoration: underline;
     text-underline-offset: 0.3em;
     font-weight: bolder;