Statistiche

index.html

@@ -12,15 +12,17 @@
     <div class="titolo">OROSCOPO DEI POVERY 2025 AI EDITION</div>
     <div class="content">
       <center>
-      <label for="nome">Nome:</label>
-      <input id="nome" name="nome" />
-      <br />
-      <label for="segno">Segno:</label>
-      <input id="segno" name="segno" />
-      <div id="output"></div>
-      <br />
-      <button onclick="Oroscopo()">Chiedi il tuo pronostico</button>
-    </center>
+        <label for="nome">Nome:</label>
+        <input id="nome" name="nome" />
+        <br />
+        <label for="segno">Segno:</label>
+        <input id="segno" name="segno" />
+        <br />
+        <button onclick="Oroscopo()" id="bottone">
+          Chiedi il tuo pronostico
+        </button>
+        <div id="output"></div>
+      </center>
     </div>
     <div class="nomeRiquadro2"><center>Descrizione</center></div>
     <div class="desc">
@@ -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>Vergine?</option>
+          <option>Gemelli</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,55 +170,136 @@
       document.getElementById("bordi").addEventListener("input", coloreBordi);
 
       function coloreBordi(event) {
-        document.querySelectorAll(
-          ".griglia > div"
-        ).forEach((div) => {
-          div.style.border = `2px solid ${event.target.value}`
+        document.querySelectorAll(".griglia > div").forEach((div) => {
+          div.style.border = `2px solid ${event.target.value}`;
         });
       }
 
       async function Oroscopo() {
         //frasiCaricamento();
-        //statistiche();
+
         document.getElementById("output").innerHTML = "";
-        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 ${
-            domani.toISOString().split("T")[0]
-          }, prevedendo fortuna, amore, finanza e salute`,
-          stream: false,
-        };
+        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 ${
+                domani.toISOString().split("T")[0]
+              }, prevedendo fortuna, amore, finanza e salute`,
+              stream: false,
+            };
 
-        try {
-          const response = await fetch(url, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(data),
-          });
+            try {
+              const response = await fetch(url, {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/json",
+                },
+                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();
+              const result = await response.text();
 
-          document.getElementById("output").innerHTML = marked.parse(
-            result
-              .substring(
-                result.indexOf('response":"') + 11,
-                result.indexOf(',"done') - 1
-              )
-              .replace(/\\n/g, "<br>")
-              .replace(/\\/g, "")
-          );
-        } catch (error) {
-          console.error("Errore nella richiesta:", error);
+              document.getElementById("output").innerHTML = marked.parse(
+                result
+                  .substring(
+                    result.indexOf('response":"') + 11,
+                    result.indexOf(',"done') - 1
+                  )
+                  .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>
 </html>

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;
 }