From 28eddf888e16853f7d2ae0cc6677826394734f66 Mon Sep 17 00:00:00 2001
From: La Programmatrice Verde <brianbassanetti.bb@gmail.com>
Date: Wed, 26 Mar 2025 23:49:10 +0100
Subject: [PATCH] Modifiche UI funzionanti

---
 index.html | 33 +++++++++++++++++++++------------
 style.css  |  1 +
 2 files changed, 22 insertions(+), 12 deletions(-)
diff --git a/index.html b/index.html
index d8f6138..bdcfbdc 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
   <body class="griglia">
     <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 />
@@ -18,9 +19,10 @@
       <input id="segno" name="segno" />
       <div id="output"></div>
       <br />
-      <button onclick="Oroscopo()">bottone</button>
+      <button onclick="Oroscopo()">Chiedi il tuo pronostico</button>
+    </center>
     </div>
-    <div class="nomeRiquadro2">Descrizione</div>
+    <div class="nomeRiquadro2"><center>Descrizione</center></div>
     <div class="desc">
       L'oroscopo è un sistema astronomico e astrologico che associa a ogni
       persona nata in un giorno preciso del mese di gennaio, il simbolo
@@ -46,11 +48,11 @@
       modo per scoprire caratteristiche della propria personalità, abitudini e
       preferenze che potrebbero essere nascoste anche a noi stessi.
     </div>
-    <div class="nomeRiquadro1">Stats</div>
+    <div class="nomeRiquadro1"><center>Stats</center></div>
     <div class="stats">lorem</div>
-    <div class="nomeRiquadro3">Controls</div>
+    <div class="nomeRiquadro3"><center>Controls</center></div>
     <div class="controls">
-      <label for="selezione">Sceglere l'opzione di sfondo:</label>
+      <label for="selezione">Scegliere l'opzione di sfondo:</label>
       <br />
       <select name="selezione" id="selezione">
         <option>Colore</option>
@@ -81,13 +83,15 @@
         </select>
       </div>
       <br />
+      <br />
+      <br />
       <div>
         <label for="testo">Scegliere il colore del testo:</label>
         <input name="color" type="color" value="#ffffff" id="testo" />
       </div>
       <div>
         <label for="testo">Scegliere il colore dei bordi:</label>
-        <input name="color" type="color" value="#00ff00" id="bordi" />
+        <input name="color" type="color" value="#008000" id="bordi" />
       </div>
     </div>
     <script>
@@ -127,17 +131,22 @@
       document.getElementById("testo").addEventListener("input", coloreTesto);
 
       function coloreTesto(event) {
-          document.body.style.color = event.target.value;
-        }
+        document.body.style.color = event.target.value;
+      }
 
-        document.getElementById("bordi").addEventListener("input", coloreBordi);
+      document.getElementById("bordi").addEventListener("input", coloreBordi);
 
       function coloreBordi(event) {
-          document.querySelectorAll(".griglia > div").style = `border: 2px solid ${event.target.value};
-    box-shadow: 0 0 20px ${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
diff --git a/style.css b/style.css
index e56f3e0..e81df0a 100644
--- a/style.css
+++ b/style.css
@@ -32,6 +32,7 @@
 .content {
     grid-area: 2 / 2 / 6 / 3;
     border: 2px solid green;
+    overflow-y: scroll;
 }
 
 .desc {
