Frasi di caricamento complete

index.html

@@ -39,7 +39,7 @@
           <input type="date" id="date" />
           <button onclick="trovaSegno()">Trova il tuo segno</button>
         </div>
-        <button onclick="predizione()" id="bottone">
+        <button onclick="Oroscopo()" id="bottone">
           Chiedi il tuo pronostico
         </button>
         <div id="output"></div>
@@ -258,15 +258,6 @@
       function Segni() {
         const segno = document.getElementById("segno").value.toLowerCase();
         Conteggio(segno);
-        /*if (segniZodiacali.includes(segno)) {
-          Conteggio(segno);
-          return true;
-        } else {
-          alert("Il segno inserito non è valido");
-          document.getElementById("segno").value = "";
-          document.getElementById("link").style.display = "block";
-          return false;
-        }*/
       }
 
       function Conteggio(segno) {
@@ -290,21 +281,22 @@
       /*******************************************************************************************************************************************************/
 
       /***********************************************Sezione Content*****************************************************************************************/
-      let keepGoing = true;
 
-      const arrayFrasiCaricamento = ["frase 1", "frase 2"];
-      function predizione() {
-        frasiCaricamento();
-        Oroscopo();
-      }
       async function Oroscopo() {
         document.getElementById("output").innerHTML = "";
         document.getElementById("bottone").innerHTML =
           "Chiedi il tuo pronostico";
-        Segni();
+
+        //blocca input
+        document.getElementById('nome').disabled = true;
+        document.getElementById('segno').disabled = true;
+        document.getElementById('bottone').disabled = true;
+        document.getElementById('link').style.display = 'none';
+
         if (!(document.getElementById("nome").value === "")) {
+          Segni();
           const domani = new Date(Date.now() + 86400000); // 86400000 ms = 1 giorno
-          const url = "http://127.0.0.1:11434/api/generate"; // Endpoint del server
+          const url = "http://127.0.0.1:11434/api/generate"; // TODO: sostituirlo con il mio dominio
           const data = {
             model: "llama3.2-vision",
             prompt: `Dimmi l'oroscopo per una persona di nome ${
@@ -316,7 +308,110 @@
             }, prevedendo fortuna, amore, finanza e salute`,
             stream: false,
           };
-          console.log(data);
+          const frasiCaricamento = 
+          [
+            "L'astrologia si basa sulla posizione degli astri al momento della nascita.",
+            "Ogni persona ha un oroscopo personale e unico.",
+            "La posizione delle stelle influenza la personalità e gli eventi della vita.",
+            "Le previsioni sono fatte con l'aiuto di mappe astronomiche.",
+            "Il processo di predizione è complesso e richiede tempo ed esperienza.",
+            "Gli astrologi utilizzano diverse tecniche per fare le previsioni.",
+            "La posizione del Sole, della Luna e degli altri pianeti influenza il destino.",
+            "L'oroscopo può aiutare a capire se stiamo andando nella direzione giusta.",
+            "Le previsioni possono essere utilizzate come strumento di auto-aiuto.",
+            "Gli astrologi cercano di aiutare le persone a comprendere se stesse e il mondo intorno a loro.",
+            "La posizione delle stelle può influenzare gli eventi della vita, ma non determinarli.",
+            "L'astrologia non è una scienza esatta, ma un'arte che richiede creatività e immaginazione.",
+            "Gli astrologi utilizzano i calcoli matematici per fare le previsioni.",
+            "La posizione degli astri può influenzare la personalità, ma anche gli eventi della vita.",
+            "Le previsioni possono essere utilizzate come strumento di consulenza personale.",
+            "Gli astrologi cercano di aiutare le persone a prendere decisioni informate.",
+            "La posizione delle stelle può influenzare la carriera e i rapporti personali.",
+            "L'astrologia non è una scienza, ma un'arte che richiede intuito e immaginazione.",
+            "Gli astrologi utilizzano diversi metodi per fare le previsioni.",
+            "La posizione degli astri può influenzare la salute e il benessere generale.",
+            "Le previsioni possono essere utilizzate come strumento di auto-aiuto per migliorare la vita.",
+            "Gli astrologi cercano di aiutare le persone a comprendere se stesse e il mondo intorno a loro.",
+            "La posizione delle stelle può influenzare gli eventi della vita, ma non determinarli.",
+            "L'astrologia è una disciplina che richiede tempo ed esperienza per essere appresa.",
+            "Gli astrologi utilizzano i calcoli matematici per fare le previsioni.",
+            "La posizione degli astri può influenzare la personalità, ma anche gli eventi della vita.",
+            "Le previsioni possono essere utilizzate come strumento di consulenza personale.",
+            "Gli astrologi cercano di aiutare le persone a prendere decisioni informate.",
+            "La posizione delle stelle può influenzare la carriera e i rapporti personali.",
+            "L'astrologia è una disciplina che richiede intuito e immaginazione per essere appresa.",
+            "Gli astrologi utilizzano diversi metodi per fare le previsioni.",
+            "La posizione degli astri può influenzare la salute e il benessere generale.",
+            "Le previsioni possono essere utilizzate come strumento di auto-aiuto per migliorare la vita.",
+            "Gli astrologi cercano di aiutare le persone a comprendere se stesse e il mondo intorno a loro.",
+            "La posizione delle stelle può influenzare gli eventi della vita, ma non determinarli.",
+            "L'astrologia è una disciplina che richiede tempo ed esperienza per essere appresa.",
+            "Gli astrologi utilizzano i calcoli matematici per fare le previsioni.",
+            "La posizione degli astri può influenzare la personalità, ma anche gli eventi della vita.",
+            "Le previsioni possono essere utilizzate come strumento di consulenza personale.",
+            "Gli astrologi cercano di aiutare le persone a prendere decisioni informate.",
+            "La posizione delle stelle può influenzare la carriera e i rapporti personali.",
+            "L'astrologia è una disciplina che richiede intuito e immaginazione per essere appresa.",
+            "Gli astrologi utilizzano diversi metodi per fare le previsioni.",
+            "La posizione degli astri può influenzare la salute e il benessere generale.",
+            "Le previsioni possono essere utilizzate come strumento di auto-aiuto per migliorare la vita.",
+            "Gli astrologi cercano di aiutare le persone a comprendere se stesse e il mondo intorno a loro.",
+            "La posizione delle stelle può influenzare gli eventi della vita, ma non determinarli.",
+            "L'astrologia è una disciplina che richiede tempo ed esperienza per essere appresa.",
+            "Gli astrologi utilizzano i calcoli matematici per fare le previsioni.",
+            "La posizione degli astri può influenzare la personalità, ma anche gli eventi della vita.",
+            "L'astrologia è una disciplina che richiede creatività e immaginazione per essere appresa.",
+            "Gli astrologi cercano di aiutare le persone a comprendere se stesse e il mondo intorno a loro.",
+            "La posizione delle stelle può influenzare la carriera e i rapporti personali.",
+            "L'astrologia non è una scienza esatta, ma un'arte che richiede intuito e immaginazione.",
+            "Gli astrologi utilizzano diversi metodi per fare le previsioni.",
+            "La posizione degli astri può influenzare la salute e il benessere generale.",
+            "Le previsioni possono essere utilizzate come strumento di auto-aiuto per migliorare la vita.",
+            "Gli astrologi cercano di aiutare le persone a prendere decisioni informate.",
+            "La posizione delle stelle può influenzare gli eventi della vita, ma non determinarli.",
+            "L'astrologia è una disciplina che richiede tempo ed esperienza per essere appresa.",
+            "Gli astrologi utilizzano i calcoli matematici per fare le previsioni.",
+            "La posizione degli astri può influenzare la personalità, ma anche gli eventi della vita.",
+            "Le previsioni possono essere utilizzate come strumento di consulenza personale.",
+            "Gli astrologi cercano di aiutare le persone a comprendere se stesse e il mondo intorno a loro.",
+            "La posizione delle stelle può influenzare la carriera e i rapporti personali.",
+            "L'astrologia è una disciplina che richiede creatività e immaginazione per essere appresa.",
+            "Gli astrologi utilizzano diversi metodi per fare le previsioni.",
+            "La posizione degli astri può influenzare la salute e il benessere generale.",
+            "Le previsioni possono essere utilizzate come strumento di auto-aiuto per migliorare la vita.",
+            "Gli astrologi cercano di aiutare le persone a prendere decisioni informate.",
+            "L'astrologia è una disciplina che richiede tempo ed esperienza per essere appresa.",
+            "Gli astrologi utilizzano i calcoli matematici per fare le previsioni.",
+            "La posizione degli astri può influenzare la personalità, ma anche gli eventi della vita.",
+            "Le previsioni possono essere utilizzate come strumento di consulenza personale.",
+            "Gli astrologi cercano di aiutare le persone a comprendere se stesse e il mondo intorno a loro.",
+            "La posizione delle stelle può influenzare la carriera e i rapporti personali.",
+            "L'astrologia è una disciplina che richiede creatività e immaginazione per essere appresa.",
+            "Gli astrologi utilizzano diversi metodi per fare le previsioni.",
+            "La posizione degli astri può influenzare la salute e il benessere generale.",
+            "Le previsioni possono essere utilizzate come strumento di auto-aiuto per migliorare la vita.",
+            "Gli astrologi cercano di aiutare le persone a prendere decisioni informate.",
+            "La posizione delle stelle può influenzare gli eventi della vita, ma non determinarli.",
+            "L'astrologia è una disciplina che richiede tempo ed esperienza per essere appresa.",
+            "Gli astrologi utilizzano i calcoli matematici per fare le previsioni.",
+            "La posizione degli astri può influenzare la personalità, ma anche gli eventi della vita.",
+            "L'astrologia è una disciplina che richiede creatività e immaginazione per essere appresa.",
+            "Gli astrologi utilizzano diversi metodi per fare le previsioni.",
+            "La posizione degli astri può influenzare la salute e il benessere generale.",
+            "Le previsioni possono essere utilizzate come strumento di auto-aiuto per migliorare la vita.",
+            "Gli astrologi cercano di aiutare le persone a prendere decisioni informate."
+
+          ];
+          let i = 0;
+
+          document.getElementById("output").innerText = frasiCaricamento[i];
+          i++;
+
+          const loadingInterval = setInterval(() => {
+            document.getElementById("output").innerText = frasiCaricamento[i];
+            i = (i + 1) % frasiCaricamento.length; // Ciclo tra le frasi
+          }, 5000); // Cambia ogni 5 secondi
+
           try {
             const response = await fetch(url, {
               method: "POST",
@@ -328,9 +423,17 @@
 
             if (!response.ok)
               throw new Error(`Errore HTTP: ${response.status}`);
-            keepGoing = false;
             const result = await response.text();
 
+            //Ferma frasi di caricamento
+            clearInterval(loadingInterval);
+
+            //ripristina input
+            document.getElementById('nome').disabled = false;
+            document.getElementById('segno').disabled = false;
+            document.getElementById('bottone').disabled = false;
+            document.getElementById('link').style.display = ''; 
+
             document.getElementById("output").innerHTML = marked.parse(
               JSON.parse(result)
                 .response.replace(/\\n/g, "<br>")
@@ -339,10 +442,23 @@
             document.getElementById("bottone").innerHTML =
               "Chiedi un altro pronostico";
           } catch (error) {
+            //Ferma frasi di caricamento
+            clearInterval(loadingInterval);
+            //ripristina input
+            document.getElementById('nome').disabled = false;
+            document.getElementById('segno').disabled = false;
+            document.getElementById('bottone').disabled = false;
+            document.getElementById('link').style.display = ''; 
+
             console.error("Errore nella richiesta:", error);
           }
         } else {
           alert("Inserire il proprio nome");
+          //ripristina input
+          document.getElementById('nome').disabled = false;
+          document.getElementById('segno').disabled = false;
+          document.getElementById('bottone').disabled = false;
+          document.getElementById('link').style.display = ''; 
         }
       }
 
@@ -356,6 +472,7 @@
       document
         .getElementById("link")
         .addEventListener("click", function (event) {
+          document.getElementById("output").innerHTML = "";
           document.getElementById("link").style.display = "none";
           document.getElementById("defaultInput").style.display = "none";
           document.getElementById("bottone").style.display = "none";