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

25
index.html
View File

@ -11,6 +11,7 @@
<body class="griglia"> <body class="griglia">
<div class="titolo">OROSCOPO DEI POVERY 2025 AI EDITION</div> <div class="titolo">OROSCOPO DEI POVERY 2025 AI EDITION</div>
<div class="content"> <div class="content">
<center>
<label for="nome">Nome:</label> <label for="nome">Nome:</label>
<input id="nome" name="nome" /> <input id="nome" name="nome" />
<br /> <br />
@ -18,9 +19,10 @@
<input id="segno" name="segno" /> <input id="segno" name="segno" />
<div id="output"></div> <div id="output"></div>
<br /> <br />
<button onclick="Oroscopo()">bottone</button> <button onclick="Oroscopo()">Chiedi il tuo pronostico</button>
</center>
</div> </div>
<div class="nomeRiquadro2">Descrizione</div> <div class="nomeRiquadro2"><center>Descrizione</center></div>
<div class="desc"> <div class="desc">
L'oroscopo è un sistema astronomico e astrologico che associa a ogni L'oroscopo è un sistema astronomico e astrologico che associa a ogni
persona nata in un giorno preciso del mese di gennaio, il simbolo 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 modo per scoprire caratteristiche della propria personalità, abitudini e
preferenze che potrebbero essere nascoste anche a noi stessi. preferenze che potrebbero essere nascoste anche a noi stessi.
</div> </div>
<div class="nomeRiquadro1">Stats</div> <div class="nomeRiquadro1"><center>Stats</center></div>
<div class="stats">lorem</div> <div class="stats">lorem</div>
<div class="nomeRiquadro3">Controls</div> <div class="nomeRiquadro3"><center>Controls</center></div>
<div class="controls"> <div class="controls">
<label for="selezione">Sceglere l'opzione di sfondo:</label> <label for="selezione">Scegliere l'opzione di sfondo:</label>
<br /> <br />
<select name="selezione" id="selezione"> <select name="selezione" id="selezione">
<option>Colore</option> <option>Colore</option>
@ -81,13 +83,15 @@
</select> </select>
</div> </div>
<br /> <br />
<br />
<br />
<div> <div>
<label for="testo">Scegliere il colore del testo:</label> <label for="testo">Scegliere il colore del testo:</label>
<input name="color" type="color" value="#ffffff" id="testo" /> <input name="color" type="color" value="#ffffff" id="testo" />
</div> </div>
<div> <div>
<label for="testo">Scegliere il colore dei bordi:</label> <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>
</div> </div>
<script> <script>
@ -133,11 +137,16 @@
document.getElementById("bordi").addEventListener("input", coloreBordi); document.getElementById("bordi").addEventListener("input", coloreBordi);
function coloreBordi(event) { function coloreBordi(event) {
document.querySelectorAll(".griglia > div").style = `border: 2px solid ${event.target.value}; document.querySelectorAll(
box-shadow: 0 0 20px ${event.target.value}`; ".griglia > div"
).forEach((div) => {
div.style.border = `2px solid ${event.target.value}`
});
} }
async function Oroscopo() { async function Oroscopo() {
//frasiCaricamento();
//statistiche();
document.getElementById("output").innerHTML = ""; document.getElementById("output").innerHTML = "";
const domani = new Date(Date.now() + 86400000); // 86400000 ms = 1 giorno 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"; // Endpoint del server

1
style.css
View File

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