oroscopo/index.html
La Programmatrice Verde 82589d2bb4 commit definitivo
2025-04-03 18:38:09 +02:00

602 lines
28 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<title>Titolo</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body class="griglia">
<div class="titolo">OROSCOPO DEI POVERY 2025 AI EDITION</div>
<div class="content">
<center>
<div id="defaultInput">
<label for="nome">Nome:</label>
<input id="nome" name="nome" />
<br />
<label for="segno">Segno:</label>
<select name="segno" id="segno">
<option>Ariete</option>
<option>Toro</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 />
<div id="trovaSegno">
<a href="javascript: void(0)" id="link">Non conosci il tuo segno?</a>
<label for="nascita">Inserisci la tua data di nascita:</label>
<input type="date" id="date" />
<button onclick="trovaSegno()">Trova il tuo segno</button>
</div>
<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">
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"><center>Stats</center></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>
<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>Toro</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 />
<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="#008000" id="bordi" />
</div>
</div>
<script>
/***********************************************Sezione Controls******************************************************************************/
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: url("img/${
document.getElementById("selezioneCostellazione").value
}.png") center no-repeat #071828`;
});
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").forEach((div) => {
div.style.border = `2px solid ${event.target.value}`;
});
}
/*******************************************************************************************************************************************************/
/***********************************************Sezione Stats*******************************************************************************************/
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];
});
// Seleziona il segno, prepara per l'aumento del conteggio
function Segni() {
const segno = document.getElementById("segno").value.toLowerCase();
Conteggio(segno);
}
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;
}
// Prima lettera maiuscola
function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
/*******************************************************************************************************************************************************/
/***********************************************Sezione Content*****************************************************************************************/
async function Oroscopo() {
document.getElementById("output").innerHTML = "";
document.getElementById("bottone").innerHTML =
"Chiedi il tuo pronostico";
//blocca input
document.getElementById('nome').disabled = true;
document.getElementById('segno').disabled = true;
document.getElementById('bottone').disabled = true;
document.getElementById('link').style.display = 'none';
if (!(document.getElementById("nome").value === "")) {
Segni();
const domani = new Date(Date.now() + 86400000); // 86400000 ms = 1 giorno
const url = "http://127.0.0.1:11434/api/generate"; // TODO: sostituirlo con il mio dominio
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,
};
const frasiCaricamento =
[
"L'astrologia si basa sulla posizione degli astri al momento della nascita.",
"Ogni persona ha un oroscopo personale e unico.",
"La posizione delle stelle influenza la personalità e gli eventi della vita.",
"Le previsioni sono fatte con l'aiuto di mappe astronomiche.",
"Il processo di predizione è complesso e richiede tempo ed esperienza.",
"Gli astrologi utilizzano diverse tecniche per fare le previsioni.",
"La posizione del Sole, della Luna e degli altri pianeti influenza il destino.",
"L'oroscopo può aiutare a capire se stiamo andando nella direzione giusta.",
"Le previsioni possono essere utilizzate come strumento di auto-aiuto.",
"Gli astrologi cercano di aiutare le persone a comprendere se stesse e il mondo intorno a loro.",
"La posizione delle stelle può influenzare gli eventi della vita, ma non determinarli.",
"L'astrologia non è una scienza esatta, ma un'arte che richiede creatività e immaginazione.",
"Gli astrologi utilizzano i calcoli matematici per fare le previsioni.",
"La posizione degli astri può influenzare la personalità, ma anche gli eventi della vita.",
"Le previsioni possono essere utilizzate come strumento di consulenza personale.",
"Gli astrologi cercano di aiutare le persone a prendere decisioni informate.",
"La posizione delle stelle può influenzare la carriera e i rapporti personali.",
"L'astrologia non è una scienza, ma un'arte che richiede intuito e immaginazione.",
"Gli astrologi utilizzano diversi metodi per fare le previsioni.",
"La posizione degli astri può influenzare la salute e il benessere generale.",
"Le previsioni possono essere utilizzate come strumento di auto-aiuto per migliorare la vita.",
"Gli astrologi cercano di aiutare le persone a comprendere se stesse e il mondo intorno a loro.",
"La posizione delle stelle può influenzare gli eventi della vita, ma non determinarli.",
"L'astrologia è una disciplina che richiede tempo ed esperienza per essere appresa.",
"Gli astrologi utilizzano i calcoli matematici per fare le previsioni.",
"La posizione degli astri può influenzare la personalità, ma anche gli eventi della vita.",
"Le previsioni possono essere utilizzate come strumento di consulenza personale.",
"Gli astrologi cercano di aiutare le persone a prendere decisioni informate.",
"La posizione delle stelle può influenzare la carriera e i rapporti personali.",
"L'astrologia è una disciplina che richiede intuito e immaginazione per essere appresa.",
"Gli astrologi utilizzano diversi metodi per fare le previsioni.",
"La posizione degli astri può influenzare la salute e il benessere generale.",
"Le previsioni possono essere utilizzate come strumento di auto-aiuto per migliorare la vita.",
"Gli astrologi cercano di aiutare le persone a comprendere se stesse e il mondo intorno a loro.",
"La posizione delle stelle può influenzare gli eventi della vita, ma non determinarli.",
"L'astrologia è una disciplina che richiede tempo ed esperienza per essere appresa.",
"Gli astrologi utilizzano i calcoli matematici per fare le previsioni.",
"La posizione degli astri può influenzare la personalità, ma anche gli eventi della vita.",
"Le previsioni possono essere utilizzate come strumento di consulenza personale.",
"Gli astrologi cercano di aiutare le persone a prendere decisioni informate.",
"La posizione delle stelle può influenzare la carriera e i rapporti personali.",
"L'astrologia è una disciplina che richiede intuito e immaginazione per essere appresa.",
"Gli astrologi utilizzano diversi metodi per fare le previsioni.",
"La posizione degli astri può influenzare la salute e il benessere generale.",
"Le previsioni possono essere utilizzate come strumento di auto-aiuto per migliorare la vita.",
"Gli astrologi cercano di aiutare le persone a comprendere se stesse e il mondo intorno a loro.",
"La posizione delle stelle può influenzare gli eventi della vita, ma non determinarli.",
"L'astrologia è una disciplina che richiede tempo ed esperienza per essere appresa.",
"Gli astrologi utilizzano i calcoli matematici per fare le previsioni.",
"La posizione degli astri può influenzare la personalità, ma anche gli eventi della vita.",
"L'astrologia è una disciplina che richiede creatività e immaginazione per essere appresa.",
"Gli astrologi cercano di aiutare le persone a comprendere se stesse e il mondo intorno a loro.",
"La posizione delle stelle può influenzare la carriera e i rapporti personali.",
"L'astrologia non è una scienza esatta, ma un'arte che richiede intuito e immaginazione.",
"Gli astrologi utilizzano diversi metodi per fare le previsioni.",
"La posizione degli astri può influenzare la salute e il benessere generale.",
"Le previsioni possono essere utilizzate come strumento di auto-aiuto per migliorare la vita.",
"Gli astrologi cercano di aiutare le persone a prendere decisioni informate.",
"La posizione delle stelle può influenzare gli eventi della vita, ma non determinarli.",
"L'astrologia è una disciplina che richiede tempo ed esperienza per essere appresa.",
"Gli astrologi utilizzano i calcoli matematici per fare le previsioni.",
"La posizione degli astri può influenzare la personalità, ma anche gli eventi della vita.",
"Le previsioni possono essere utilizzate come strumento di consulenza personale.",
"Gli astrologi cercano di aiutare le persone a comprendere se stesse e il mondo intorno a loro.",
"La posizione delle stelle può influenzare la carriera e i rapporti personali.",
"L'astrologia è una disciplina che richiede creatività e immaginazione per essere appresa.",
"Gli astrologi utilizzano diversi metodi per fare le previsioni.",
"La posizione degli astri può influenzare la salute e il benessere generale.",
"Le previsioni possono essere utilizzate come strumento di auto-aiuto per migliorare la vita.",
"Gli astrologi cercano di aiutare le persone a prendere decisioni informate.",
"L'astrologia è una disciplina che richiede tempo ed esperienza per essere appresa.",
"Gli astrologi utilizzano i calcoli matematici per fare le previsioni.",
"La posizione degli astri può influenzare la personalità, ma anche gli eventi della vita.",
"Le previsioni possono essere utilizzate come strumento di consulenza personale.",
"Gli astrologi cercano di aiutare le persone a comprendere se stesse e il mondo intorno a loro.",
"La posizione delle stelle può influenzare la carriera e i rapporti personali.",
"L'astrologia è una disciplina che richiede creatività e immaginazione per essere appresa.",
"Gli astrologi utilizzano diversi metodi per fare le previsioni.",
"La posizione degli astri può influenzare la salute e il benessere generale.",
"Le previsioni possono essere utilizzate come strumento di auto-aiuto per migliorare la vita.",
"Gli astrologi cercano di aiutare le persone a prendere decisioni informate.",
"La posizione delle stelle può influenzare gli eventi della vita, ma non determinarli.",
"L'astrologia è una disciplina che richiede tempo ed esperienza per essere appresa.",
"Gli astrologi utilizzano i calcoli matematici per fare le previsioni.",
"La posizione degli astri può influenzare la personalità, ma anche gli eventi della vita.",
"L'astrologia è una disciplina che richiede creatività e immaginazione per essere appresa.",
"Gli astrologi utilizzano diversi metodi per fare le previsioni.",
"La posizione degli astri può influenzare la salute e il benessere generale.",
"Le previsioni possono essere utilizzate come strumento di auto-aiuto per migliorare la vita.",
"Gli astrologi cercano di aiutare le persone a prendere decisioni informate."
];
let i = 0;
document.getElementById("output").innerText = frasiCaricamento[i];
i++;
const loadingInterval = setInterval(() => {
document.getElementById("output").innerText = frasiCaricamento[i];
i = (i + 1) % frasiCaricamento.length; // Ciclo tra le frasi
}, 5000); // Cambia ogni 5 secondi
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();
//Ferma frasi di caricamento
clearInterval(loadingInterval);
//ripristina input
document.getElementById('nome').disabled = false;
document.getElementById('segno').disabled = false;
document.getElementById('bottone').disabled = false;
document.getElementById('link').style.display = '';
document.getElementById("output").innerHTML = marked.parse(
JSON.parse(result)
.response.replace(/\\n/g, "<br>")
.replace(/\\/g, "")
);
document.getElementById("bottone").innerHTML =
"Chiedi un altro pronostico";
} catch (error) {
//Ferma frasi di caricamento
clearInterval(loadingInterval);
//ripristina input
document.getElementById('nome').disabled = false;
document.getElementById('segno').disabled = false;
document.getElementById('bottone').disabled = false;
document.getElementById('link').style.display = '';
console.error("Errore nella richiesta:", error);
}
} else {
alert("Inserire il proprio nome");
//ripristina input
document.getElementById('nome').disabled = false;
document.getElementById('segno').disabled = false;
document.getElementById('bottone').disabled = false;
document.getElementById('link').style.display = '';
}
}
document
.getElementById("segno")
.addEventListener("input", function (event) {
document.getElementById("link").style.display = "none";
});
//mostro la parte per inserire la data e trovare il proprio segno e nascondo defaultInput
document
.getElementById("link")
.addEventListener("click", function (event) {
document.getElementById("output").innerHTML = "";
document.getElementById("link").style.display = "none";
document.getElementById("defaultInput").style.display = "none";
document.getElementById("bottone").style.display = "none";
document
.querySelectorAll("#trovaSegno > :not(#link)")
.forEach((tag) => (tag.style.display = "block"));
});
function trovaSegno() {
let isDateInserted = document.getElementById("date").value !== "";
if (isDateInserted) {
const nascita = document.getElementById("date").value.split("-");
const mese = parseInt(nascita[1]);
const giorno = parseInt(nascita[2]);
const campoSegno = document.getElementById("segno");
switch (mese) {
case 3:
if (giorno >= 20) {
campoSegno.value = capitalize(segniZodiacali[0]);
} else {
campoSegno.value = capitalize(segniZodiacali[11]);
}
break;
case 4:
if (giorno >= 19) {
campoSegno.value = capitalize(segniZodiacali[1]);
} else {
campoSegno.value = capitalize(segniZodiacali[0]);
}
break;
case 5:
if (giorno >= 20) {
campoSegno.value = capitalize(segniZodiacali[2]);
} else {
campoSegno.value = capitalize(segniZodiacali[1]);
}
break;
case 6:
if (giorno >= 20) {
campoSegno.value = capitalize(segniZodiacali[3]);
} else {
campoSegno.value = capitalize(segniZodiacali[2]);
}
break;
case 7:
if (giorno >= 22) {
campoSegno.value = capitalize(segniZodiacali[4]);
} else {
campoSegno.value = capitalize(segniZodiacali[3]);
}
break;
case 8:
if (giorno >= 22) {
campoSegno.value = capitalize(segniZodiacali[5]);
} else {
campoSegno.value = capitalize(segniZodiacali[4]);
}
break;
case 9:
if (giorno >= 22) {
campoSegno.value = capitalize(segniZodiacali[6]);
} else {
campoSegno.value = capitalize(segniZodiacali[5]);
}
break;
case 10:
if (giorno >= 22) {
campoSegno.value = capitalize(segniZodiacali[7]);
} else {
campoSegno.value = capitalize(segniZodiacali[6]);
}
break;
case 11:
if (giorno >= 21) {
campoSegno.value = capitalize(segniZodiacali[8]);
} else {
campoSegno.value = capitalize(segniZodiacali[7]);
}
break;
case 12:
if (giorno >= 21) {
campoSegno.value = capitalize(segniZodiacali[9]);
} else {
campoSegno.value = capitalize(segniZodiacali[8]);
}
break;
case 1:
if (giorno >= 20) {
campoSegno.value = capitalize(segniZodiacali[10]);
} else {
campoSegno.value = capitalize(segniZodiacali[9]);
}
break;
case 2:
if (giorno >= 18) {
campoSegno.value = capitalize(segniZodiacali[11]);
} else {
campoSegno.value = capitalize(segniZodiacali[10]);
}
break;
}
// Reset della UI a prima di premere il link
document.getElementById("link").style.display = "block";
document.getElementById("defaultInput").style.display = "block";
document.getElementById("bottone").style.display = "block";
document
.querySelectorAll("#trovaSegno > :not(#link)")
.forEach((tag) => (tag.style.display = "none"));
campoSegno.disabled = true;
} else {
alert("Inserire una data completa");
}
}
function frasiCaricamento() {
let i = 0;
document.getElementById("output").innerHTML = arrayFrasiCaricamento[i];
}
/*******************************************************************************************************************************************************/
</script>
</body>
</html>
<!-- comando per docker: docker run -v ./Desktop/ollama:/root/.ollama -p 11434:11434 ollama/ollama -->