Statistiche

index.html

@@ -17,9 +17,11 @@
         <br />
         <label for="segno">Segno:</label>
         <input id="segno" name="segno" />
-      <div id="output"></div>
         <br />
-      <button onclick="Oroscopo()">Chiedi il tuo pronostico</button>
+        <button onclick="Oroscopo()" id="bottone">
+          Chiedi il tuo pronostico
+        </button>
+        <div id="output"></div>
       </center>
     </div>
     <div class="nomeRiquadro2"><center>Descrizione</center></div>
@@ -49,7 +51,38 @@
       preferenze che potrebbero essere nascoste anche a noi stessi.
     </div>
     <div class="nomeRiquadro1"><center>Stats</center></div>
-    <div class="stats">lorem</div>
+    <div class="stats" id="stats">
+      <p>
+        Utenti che hanno fatto affidamento a questo oroscopo:
+        <span id="conteggio">0</span>
+      </p>
+      <table>
+        <tr>
+          <td>Utenti di segno ariete: <span id="conteggioAriete">0</span></td>
+          <td class="tabellaColonna2">Utenti di segno toro: <span id="conteggioToro">0</span></td>        
+        </tr>
+        <tr>
+          <td>Utenti di segno gemelli: <span id="conteggioGemelli">0</span></td>
+          <td class="tabellaColonna2">Utenti di segno cancro: <span id="conteggioCancro">0</span></td>
+        </tr>
+        <tr>
+          <td>Utenti di segno leone: <span id="conteggioLeone">0</span></td>
+          <td class="tabellaColonna2">Utenti di segno vergine: <span id="conteggioVergine">0</span></td>
+        </tr>
+        <tr>
+          <td>Utenti di segno bilancia: <span id="conteggioBilancia">0</span></td>
+          <td class="tabellaColonna2">Utenti di segno scorpione: <span id="conteggioScorpione">0</span></td>
+        </tr>
+        <tr>          
+          <td>Utenti di segno sagittario: <span id="conteggioSagittario">0</span></td>
+          <td class="tabellaColonna2">Utenti di segno capricorno: <span id="conteggioCapricorno">0</span></td>
+        </tr>
+        <tr>
+          <td>Utenti di segno acquario: <span id="conteggioAcquario">0</span></td>
+          <td class="tabellaColonna2">Utenti di segno pesci: <span id="conteggioPesci">0</span></td>
+        </tr>
+      </table>
+    </div>
     <div class="nomeRiquadro3"><center>Controls</center></div>
     <div class="controls">
       <label for="selezione">Scegliere l'opzione di sfondo:</label>
@@ -69,17 +102,17 @@
         <select name="costellazione" id="selezioneCostellazione">
           <option>Tutte</option>
           <option>Ariete</option>
-          <option>Bestia satanica</option>
-          <option>Bilancia</option>
-          <option>Cancro</option>
-          <option>Centauro Arciere</option>
-          <option>Gemelli?</option>
-          <option>Leone</option>
-          <option>Pesci</option>
-          <option>Scorpione</option>
           <option>Toro</option>
-          <option>Vaso rovesciato</option>
+          <option>Gemelli</option>
-          <option>Vergine?</option>
+          <option>Cancro</option>
+          <option>Leone</option>
+          <option>Vergine</option>
+          <option>Bilancia</option>
+          <option>Scorpione</option>
+          <option>Sagittario</option>
+          <option>Capricorno</option>
+          <option>Acquario</option>
+          <option>Pesci</option>
         </select>
       </div>
       <br />
@@ -123,9 +156,9 @@
       document
         .getElementById("selezioneCostellazione")
         .addEventListener("input", function () {
-          document.body.style = `background-image: url("img/${
+          document.body.style = `background: url("img/${
             document.getElementById("selezioneCostellazione").value
-          }.png"); background-repeat: no-repeat; background-size: cover`;
+          }.png") center no-repeat #071828`;
         });
 
       document.getElementById("testo").addEventListener("input", coloreTesto);
@@ -137,24 +170,28 @@
       document.getElementById("bordi").addEventListener("input", coloreBordi);
 
       function coloreBordi(event) {
-        document.querySelectorAll(
+        document.querySelectorAll(".griglia > div").forEach((div) => {
-          ".griglia > div"
+          div.style.border = `2px solid ${event.target.value}`;
-        ).forEach((div) => {
-          div.style.border = `2px solid ${event.target.value}`
         });
       }
 
       async function Oroscopo() {
         //frasiCaricamento();
-        //statistiche();
+
         document.getElementById("output").innerHTML = "";
+        document.getElementById("bottone").innerHTML =
+          "Chiedi il tuo pronostico";
+        if (Segni()) {
+          if (!(document.getElementById("nome").value === "")) {
             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 data = {
               model: "llama3.2-vision",
               prompt: `Dimmi l'oroscopo per una persona di nome ${
                 document.getElementById("nome").value
-          }, di segno ${document.getElementById("segno").value} per il giorno ${
+              }, di segno ${
+                document.getElementById("segno").value
+              } per il giorno ${
                 domani.toISOString().split("T")[0]
               }, prevedendo fortuna, amore, finanza e salute`,
               stream: false,
@@ -169,7 +206,8 @@
                 body: JSON.stringify(data),
               });
 
-          if (!response.ok) throw new Error(`Errore HTTP: ${response.status}`);
+              if (!response.ok)
+                throw new Error(`Errore HTTP: ${response.status}`);
 
               const result = await response.text();
 
@@ -182,9 +220,85 @@
                   .replace(/\\n/g, "<br>")
                   .replace(/\\/g, "")
               );
+              document.getElementById("bottone").innerHTML =
+                "Chiedi un altro pronostico";
             } catch (error) {
               console.error("Errore nella richiesta:", error);
             }
+          } else {
+            alert("Inserire il proprio nome");
+          }
+        }
+      }
+
+      const segniZodiacali = [
+        "ariete",
+        "toro",
+        "gemelli",
+        "cancro",
+        "leone",
+        "vergine",
+        "bilancia",
+        "scorpione",
+        "sagittario",
+        "capricorno",
+        "acquario",
+        "pesci",
+      ];
+
+      // Oggetto per gestire i contatori
+      let contatori = {};
+
+      // Recupera i valori dal localStorage oppure inizializza a 0
+      segniZodiacali.forEach((segno) => {
+        contatori[segno] = localStorage.getItem(segno)
+          ? parseInt(localStorage.getItem(segno))
+          : 0;
+      });
+
+      // totale utenti
+      let countTotale = localStorage.getItem("countTotale")
+        ? parseInt(localStorage.getItem("countTotale"))
+        : 0;
+
+      // Aggiorna i testi iniziali nella UI
+      document.getElementById("conteggio").innerHTML = countTotale;
+      segniZodiacali.forEach((segno) => {
+        const elem = document.getElementById(`conteggio${capitalize(segno)}`);
+        if (elem) elem.innerHTML = contatori[segno];
+      });
+
+      // Funzione per gestire il conteggio
+      function Segni() {
+        const segno = document.getElementById("segno").value.toLowerCase();
+
+        if (segniZodiacali.includes(segno)) {
+          Conteggio(segno);
+          return true;
+        } else {
+          alert("Il segno inserito non è valido");
+          return false;
+        }
+      }
+
+      // Funzione per incrementare il conteggio e salvare i dati
+      function Conteggio(segno) {
+        contatori[segno]++; // Incrementa il conteggio del segno
+        countTotale++; // Incrementa il conteggio totale
+
+        // Salva in localStorage
+        localStorage.setItem(segno, contatori[segno]);
+        localStorage.setItem("countTotale", countTotale);
+
+        // Aggiorna la UI
+        document.getElementById(`conteggio${capitalize(segno)}`).innerHTML =
+          contatori[segno];
+        document.getElementById("conteggio").innerHTML = countTotale;
+      }
+
+      // Funzione per capitalizzare la prima lettera (es: "ariete" → "Ariete")
+      function capitalize(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1);
       }
     </script>
   </body>

style.css

@@ -33,6 +33,8 @@
     grid-area: 2 / 2 / 6 / 3;
     border: 2px solid green;
     overflow-y: scroll;
+    line-height: 1.5em; /* altezza di una riga */
+    height: calc((1.5em * 24) + (1.5em / 2)); /* 24 righe */
 }
 
 .desc {
@@ -53,6 +55,11 @@
 #color{
     display: inline;
 }
+
 #costellazione{
     display: none;
 }
+
+.tabellaColonna2{
+    padding-left: 40px;
+}