Verde/oroscopo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modifiche UI funzionanti

Browse Source
This commit is contained in:
La Programmatrice Verde 2025-03-26 23:49:10 +01:00
parent 77e43dfeb2
commit 28eddf888e
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@ -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

1
style.css
View File

@ -32,6 +32,7 @@
.content {
grid-area: 2 / 2 / 6 / 3;
border: 2px solid green;
overflow-y: scroll;
}
.desc {