Compare commits
No commits in common. "82589d2bb4aebe444ee42a41fde3298ff3b9f6de" and "3a31cad1b32ce9ebc01f899b1a251539854ffa2e" have entirely different histories.
82589d2bb4
...
3a31cad1b3
BIN
img/Acquario.png
BIN
img/Acquario.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 MiB |
BIN
img/Ariete.png
BIN
img/Ariete.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB |
BIN
img/Bilancia.png
BIN
img/Bilancia.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB |
BIN
img/Cancro.png
BIN
img/Cancro.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 MiB |
BIN
img/Gemelli.png
BIN
img/Gemelli.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 MiB |
BIN
img/Leone.png
BIN
img/Leone.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 MiB |
BIN
img/Pesci.png
BIN
img/Pesci.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 MiB |
BIN
img/Toro.png
BIN
img/Toro.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 MiB |
BIN
img/Tutte.png
BIN
img/Tutte.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 MiB |
BIN
img/Vergine.png
BIN
img/Vergine.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 MiB |
605
index.html
605
index.html
@ -1,601 +1,12 @@
|
|||||||
<!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">
|
</body>
|
||||||
<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>
|
</html>
|
||||||
<!-- comando per docker: docker run -v ./Desktop/ollama:/root/.ollama -p 11434:11434 ollama/ollama -->
|
|
||||||
|
|||||||
70
style.css
70
style.css
@ -1,70 +0,0 @@
|
|||||||
.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;
|
|
||||||
overflow-y: scroll;
|
|
||||||
line-height: 1.5em; /* altezza di una riga */
|
|
||||||
height: calc((1.5em * 24) + (1.5em / 2)); /* 24 righe */
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabellaColonna2{
|
|
||||||
padding-left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#trovaSegno > :not(#link){
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user