Prototipando
This commit is contained in:
La Programmatrice Verde
parent
3a31cad1b3
commit
77e43dfeb2
BIN
img/Ariete.png
Normal file
BIN
img/Ariete.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
BIN
img/Bestia satanica.png
Normal file
BIN
img/Bestia satanica.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
BIN
img/Bilancia.png
Normal file
BIN
img/Bilancia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
BIN
img/Cancro.png
Normal file
BIN
img/Cancro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
BIN
img/Centauro Arciere.png
Normal file
BIN
img/Centauro Arciere.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
BIN
img/Gemelli?.png
Normal file
BIN
img/Gemelli?.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
BIN
img/Leone.png
Normal file
BIN
img/Leone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
BIN
img/Pesci.png
Normal file
BIN
img/Pesci.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
BIN
img/Scorpione.png
Normal file
BIN
img/Scorpione.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
BIN
img/Toro.png
Normal file
BIN
img/Toro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
BIN
img/Tutte.png
Normal file
BIN
img/Tutte.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
BIN
img/Vaso rovesciato.png
Normal file
BIN
img/Vaso rovesciato.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
BIN
img/Vergine?.png
Normal file
BIN
img/Vergine?.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
177
index.html
177
index.html
@ -1,12 +1,183 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="content-type" content="text/html" charset="utf-8">
|
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
|
||||||
<title>Titolo</title>
|
<title>Titolo</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css" />
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
|
|
||||||
|
<body class="griglia">
|
||||||
|
<div class="titolo">OROSCOPO DEI POVERY 2025 AI EDITION</div>
|
||||||
|
<div class="content">
|
||||||
|
<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()">bottone</button>
|
||||||
|
</div>
|
||||||
|
<div class="nomeRiquadro2">Descrizione</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
|
||||||
|
zodiacale corrispondente. Esistono due tipi principali di oroscopi: quelli
|
||||||
|
classici, basati sul modello antico greco romano e quelli moderni che si
|
||||||
|
sono evoluti nel tempo. Il sistema originario del classico oroscopo era
|
||||||
|
basato sulla posizione dei pianeti al momento della nascita
|
||||||
|
dell'individuo. Questo sistema è basato su nove "case" che rappresentano
|
||||||
|
la vita, l'amore, i rapporti con gli altri e altre aree della personalità.
|
||||||
|
L'oroscopo ha origini antiche: infatti, il concetto di zodiaco e di
|
||||||
|
oroscopi si può ritrovare già nell'antica civiltà assira. In epoca romana,
|
||||||
|
l'astrologo Manilio scrisse un trattato intitolato "Astronomicon" che
|
||||||
|
descriveva come le stelle influenzassero la vita dei Romani. Nel Medioevo
|
||||||
|
in Europa, gli oroscopi erano molto popolari e venivano spesso utilizzati
|
||||||
|
per predire il futuro. Con l'avvento del Rinascimento e dell'Illuminismo,
|
||||||
|
l'astrologia subì un declino a causa della crescente diffusione delle idee
|
||||||
|
scientifiche di Galileo Galilei e di Isaac Newton. L'oroscopo moderno è
|
||||||
|
nato nel XIX secolo con la fondazione della rivista "The Sidereal
|
||||||
|
Messenger", che pubblicava oroscopi basati sull'osservazione dei pianeti.
|
||||||
|
Negli anni successivi, l'astrologia ha continuato a evolversi e ad
|
||||||
|
ampliare le sue teorie e i suoi metodi. L'oroscopo è diventato uno
|
||||||
|
strumento popolare per comprendere se stessi e il proprio destino. È un
|
||||||
|
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="stats">lorem</div>
|
||||||
|
<div class="nomeRiquadro3">Controls</div>
|
||||||
|
<div class="controls">
|
||||||
|
<label for="selezione">Sceglere l'opzione di sfondo:</label>
|
||||||
|
<br />
|
||||||
|
<select name="selezione" id="selezione">
|
||||||
|
<option>Colore</option>
|
||||||
|
<option>Costellazione</option>
|
||||||
|
</select>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<div id="color">
|
||||||
|
<label for="color">Colore:</label>
|
||||||
|
<input name="color" type="color" value="#000000" />
|
||||||
|
</div>
|
||||||
|
<div id="costellazione">
|
||||||
|
<label for="costellazione">Costellazione:</label>
|
||||||
|
<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>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<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" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
color = document.getElementById("color");
|
||||||
|
costellazione = document.getElementById("costellazione");
|
||||||
|
|
||||||
|
document
|
||||||
|
.getElementById("selezione")
|
||||||
|
.addEventListener("input", function () {
|
||||||
|
if (document.getElementById("selezione").value == "Colore") {
|
||||||
|
costellazione.style.display = "none";
|
||||||
|
document.body.style = "background-image: none";
|
||||||
|
color.value = "#000000";
|
||||||
|
color.style.display = "inline";
|
||||||
|
} else {
|
||||||
|
color.style.display = "none";
|
||||||
|
costellazione.style.display = "inline";
|
||||||
|
document.getElementById("selezioneCostellazione").value = "Tutte";
|
||||||
|
document.body.style = 'background-image: url("img/Tutte.png")';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document
|
||||||
|
.getElementById("color")
|
||||||
|
.addEventListener("input", function (event) {
|
||||||
|
document.body.style = `background-color: ${event.target.value}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
document
|
||||||
|
.getElementById("selezioneCostellazione")
|
||||||
|
.addEventListener("input", function () {
|
||||||
|
document.body.style = `background-image: url("img/${
|
||||||
|
document.getElementById("selezioneCostellazione").value
|
||||||
|
}.png"); background-repeat: no-repeat; background-size: cover`;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("testo").addEventListener("input", coloreTesto);
|
||||||
|
|
||||||
|
function coloreTesto(event) {
|
||||||
|
document.body.style.color = event.target.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
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}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function Oroscopo() {
|
||||||
|
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,
|
||||||
|
};
|
||||||
|
|
||||||
|
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}`);
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
<!-- comando per docker: docker run -v ./Desktop/ollama:/root/.ollama -p 11434:11434 ollama/ollama -->
|
||||||
|
|||||||
57
style.css
57
style.css
@ -0,0 +1,57 @@
|
|||||||
|
.griglia {
|
||||||
|
margin-left: 10%;
|
||||||
|
margin-right: 10%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
grid-template-rows: 0.1fr 0.1fr 0.3fr 0.1fr 0.6fr;
|
||||||
|
grid-column-gap: 50px;
|
||||||
|
grid-row-gap: 50px;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titolo {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
border: 2px solid green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nomeRiquadro1 {
|
||||||
|
grid-area: 2 / 1 / 3 / 2;
|
||||||
|
border: 2px solid green;
|
||||||
|
}
|
||||||
|
.nomeRiquadro2 {
|
||||||
|
grid-area: 2 / 3 / 3 / 4;
|
||||||
|
border: 2px solid green;
|
||||||
|
}
|
||||||
|
.nomeRiquadro3 {
|
||||||
|
grid-area: 4 / 1 / 5 / 2;
|
||||||
|
border: 2px solid #008000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
grid-area: 2 / 2 / 6 / 3;
|
||||||
|
border: 2px solid green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
grid-area: 3 / 3 / 6 / 4;
|
||||||
|
border: 2px solid green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
grid-area: 3 / 1 / 4 / 2;
|
||||||
|
border: 2px solid green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
grid-area: 5 / 1 / 6 / 2;
|
||||||
|
border: 2px solid green;
|
||||||
|
}
|
||||||
|
|
||||||
|
#color{
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
#costellazione{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user