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

"Il sitoh deveh essereh accattivanteh"

Browse Source
This commit is contained in:
La Programmatrice Verde 2025-04-03 18:33:32 +02:00
parent a9b59f1ef6
commit 0e7c262616
16 changed files with 258 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/Acquario.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 MiB

After

Width:  |  Height:  |  Size: 409 KiB

BIN
img/Ariete.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 MiB

After

Width:  |  Height:  |  Size: 362 KiB

BIN
img/Bilancia.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 MiB

After

Width:  |  Height:  |  Size: 410 KiB

BIN
img/Cancro.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 MiB

After

Width:  |  Height:  |  Size: 470 KiB

BIN
img/Capricorno.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 MiB

After

Width:  |  Height:  |  Size: 298 KiB

BIN
img/Gemelli.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 MiB

After

Width:  |  Height:  |  Size: 289 KiB

BIN
img/Leone.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 MiB

After

Width:  |  Height:  |  Size: 222 KiB

BIN
img/Oroscopo.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
img/Pesci.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 MiB

After

Width:  |  Height:  |  Size: 419 KiB

BIN
img/Sagittario.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 MiB

After

Width:  |  Height:  |  Size: 282 KiB

BIN
img/Scorpione.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 MiB

After

Width:  |  Height:  |  Size: 399 KiB

BIN
img/Toro.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 MiB

After

Width:  |  Height:  |  Size: 306 KiB

BIN
img/Vergine.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 MiB

After

Width:  |  Height:  |  Size: 261 KiB

323
index.html
View File

@ -7,7 +7,7 @@
<script src="script.js"></script>
</head>
<body class="griglia">
<div class="titolo">OROSCOPO DEL PORCO</div>
<div class="titolo"><center>˗ˏˋ ★ ˎˊ˗ Oroscopo ˗ˏˋ ★ ˎˊ˗</center></div>
<div class="content">
<center>
<div id="defaultInput">
@ -33,41 +33,26 @@
<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>
<p">Inserisci la tua data di nascita:</p>
<input type="date" id="date" />
<br />
<br />
<button onclick="trovaSegno()">Trova il tuo segno</button>
</div>
<br />
<button onclick="Oroscopo()" id="bottone">
Chiedi il tuo pronostico
</button>
<br />
<br />
<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 class="nomeRiquadro2"><center>Chi ha fatto affidamento a questo sito:</center></div>
<div class="nomi">
<ul>
</ul>
</div>
<div class="nomeRiquadro1"><center>Stats</center></div>
<div class="stats" id="stats">
@ -146,55 +131,6 @@ function Init(){
"Acquario",
"Pesci",
];
/***********************************************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*******************************************************************************************/
stats = {
@ -220,152 +156,115 @@ function Init(){
},
};
/*document.getElementById("segno").value.toLowerCase();
// 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*****************************************************************************************/
function Oroscopo() {
const frasi = [
"Una nuova opportunità lavorativa si presenta, sfruttala!",
"Ascolta i consigli degli amici, potrebbero essere utili.",
"Attento alle spese, non esagerare.",
"La vita sentimentale si anima, aspettati un sorriso!",
"Concentrati sui tuoi obiettivi e non lasciare che le distrazioni ti rallentino.",
"Sii paziente, i risultati non tarderanno.",
"Un cambiamento di programma potrebbe essere necessario.",
"La tua intuizione è acuta, ascoltala!",
"Non lasciare che le preoccupazioni ti consumino.",
"Il tuo amore per la famiglia e gli amici si rafforza.",
"Sii più aperto ai nuovi progetti, potrebbero essere interessanti!",
"Non esitare a chiedere aiuto quando ne hai bisogno.",
"La tua autorità è riconosciuta e apprezzata.",
"Sii cauto con le tue finanze, non spendere troppo!",
"Non lasciare che la pigrizia ti rallenti.",
"Le tue abilità organizzative sono essenziali per un nuovo progetto.",
"Sii più socievole e aperto con gli altri, potresti scoprire nuove amicizie!",
"Non esitare a chiedere chiarimenti quando ne hai bisogno.",
"La tua vita sociale si anima, aspettati un'intrattenimento!",
"Sii più equilibrato e razionale nelle tue decisioni.",
"Non lasciare che la competitività ti consumi.",
"I segreti di cui sei a conoscenza potrebbero essere utili per aiutare qualcuno.",
"Sii più aperto alle novità e non temere il cambiamento!",
"Non esitare a difendere ciò che è giusto.",
"La tua ambizione si rafforza, sfruttala per raggiungere nuovi obiettivi!",
"Sii più paziente e non affrettarti troppo.",
"Non lasciare che la curiosità ti porti a commettere errori.",
"La tua responsabilità è apprezzata e riconosciuta.",
"Sii più aperto alle novità e non temere il cambiamento!",
"Non esitare a chiedere aiuto quando ne hai bisogno.",
"La tua creatività è essenziale per un nuovo progetto.",
"Sii più socievole e aperto con gli altri, potresti scoprire nuove amicizie!",
"Non lasciare che la curiosità ti porti a commettere errori.",
"La tua intuizione è acuta, ascoltala!",
"Sii più aperto alle novità e non temere il cambiamento!",
"Non esitare a chiedere aiuto quando ne hai bisogno.",
];
const frasi = [
"Una nuova opportunità lavorativa si presenta, sfruttala!",
"Ascolta i consigli degli amici, potrebbero essere utili.",
"Attento alle spese, non esagerare.",
"La vita sentimentale si anima, aspettati un sorriso!",
"Concentrati sui tuoi obiettivi e non lasciare che le distrazioni ti rallentino.",
"Sii paziente, i risultati non tarderanno.",
"Un cambiamento di programma potrebbe essere necessario.",
"La tua intuizione è acuta, ascoltala!",
"Non lasciare che le preoccupazioni ti consumino.",
"Il tuo amore per la famiglia e gli amici si rafforza.",
"Sii più aperto ai nuovi progetti, potrebbero essere interessanti!",
"Non esitare a chiedere aiuto quando ne hai bisogno.",
"La tua autorità è riconosciuta e apprezzata.",
"Sii cauto con le tue finanze, non spendere troppo!",
"Non lasciare che la pigrizia ti rallenti.",
"Le tue abilità organizzative sono essenziali per un nuovo progetto.",
"Sii più socievole e aperto con gli altri, potresti scoprire nuove amicizie!",
"Non esitare a chiedere chiarimenti quando ne hai bisogno.",
"La tua vita sociale si anima, aspettati un'intrattenimento!",
"Sii più equilibrato e razionale nelle tue decisioni.",
"Non lasciare che la competitività ti consumi.",
"I segreti di cui sei a conoscenza potrebbero essere utili per aiutare qualcuno.",
"Sii più aperto alle novità e non temere il cambiamento!",
"Non esitare a difendere ciò che è giusto.",
"La tua ambizione si rafforza, sfruttala per raggiungere nuovi obiettivi!",
"Sii più paziente e non affrettarti troppo.",
"Non lasciare che la curiosità ti porti a commettere errori.",
"La tua responsabilità è apprezzata e riconosciuta.",
"Sii più aperto alle novità e non temere il cambiamento!",
"Non esitare a chiedere aiuto quando ne hai bisogno.",
"La tua creatività è essenziale per un nuovo progetto.",
"Sii più socievole e aperto con gli altri, potresti scoprire nuove amicizie!",
"Non lasciare che la curiosità ti porti a commettere errori.",
"La tua intuizione è acuta, ascoltala!",
"Sii più aperto alle novità e non temere il cambiamento!",
"Non esitare a chiedere aiuto quando ne hai bisogno.",
];
document.getElementById("output").innerHTML = "";
if (!(document.getElementById("nome").value === "")) {
if (
!(document.getElementById("segno").value === "Seleziona un segno")
) {
stats.aggiornaStat(0);
stats.aggiornaStat(
stats.contatore.indexOf(
`conteggio${document.getElementById("segno").value}`
)
);
document.getElementById("output").innerHTML =
frasi[Math.floor(Math.random() * frasi.length)];
document.getElementById("bottone").innerHTML =
"Chiedi un altro pronostico";
if (document.getElementById("segno").disabled) {
document.getElementById("segno").disabled = false;
}
document.getElementById("output").innerHTML = "";
if (!(document.getElementById("nome").value === "")) {
if (!(document.getElementById("segno").value === "Seleziona un segno")) {
if (
document.getElementById("bottone").innerHTML ===
"Chiedi un altro pronostico"
) {
let isSegnoDefaultPresent = false;
for (
let i = 0;
i <
let i = 0;
i <
document.getElementById("segno").getElementsByTagName("option")
.length && !isSegnoDefaultPresent;
i++
.length && !isSegnoDefaultPresent;
i++
) {
if (
document.getElementById("segno").getElementsByTagName("option")[
i
] == "Seleziona un segno"
) {
document.getElementById("segno").value = "Seleziona un segno";
isSegnoDefaultPresent = true;
}
if (
document.getElementById("segno").getElementsByTagName("option")[
i
] == "Seleziona un segno"
) {
document.getElementById("segno").value = "Seleziona un segno";
isSegnoDefaultPresent = true;
}
}
if (!isSegnoDefaultPresent) {
aggiungiDefault();
aggiungiDefault();
}
document.getElementById("segno").dispatchEvent(new Event("change"));
document.getElementById("link").style.display = "block";
} else {
alert("Inserire il proprio segno");
}
} else {
alert("Inserire il proprio nome");
document.getElementById("nome").value = "";
document.getElementById("bottone").innerHTML = "Chiedi il tuo pronostico";
}
}
else {
stats.aggiornaStat(0);
stats.aggiornaStat(
stats.contatore.indexOf(
`conteggio${document.getElementById("segno").value}`
)
);
aggiungiNome();
document.getElementById("output").innerHTML =
frasi[Math.floor(Math.random() * frasi.length)];
document.getElementById("bottone").innerHTML =
"Chiedi un altro pronostico";
if (document.getElementById("segno").disabled) {
document.getElementById("segno").disabled = false;
}
}
} else {
alert("Inserire il proprio segno");
}
} else {
alert("Inserire il proprio nome");
}
}
//gestione UI sezione trova segno
document.getElementById("segno").addEventListener("input", function () {
@ -380,7 +279,7 @@ function Init(){
document.getElementById("bottone").style.display = "none";
document
.querySelectorAll("#trovaSegno > :not(#link)")
.forEach((tag) => (tag.style.display = "block"));
.forEach((tag) => (tag.style.display = "inline"));
});
function trovaSegno() {
@ -494,12 +393,27 @@ document.getElementById("segno").dispatchEvent(new Event("change"));
}
}
function aggiungiNome(){
let found = false;
nome = document.createElement('li');
nome.innerHTML = document.getElementById('nome').value;
for(let i = 0; i < document.getElementsByClassName("nomi")[0].getElementsByTagName('ul')[0].getElementsByTagName('li').length && !found; i++){
if(document.getElementsByClassName("nomi")[0].getElementsByTagName('ul')[0].getElementsByTagName('li')[i].innerHTML == nome.innerHTML) {
found = true;
}
}
if (!found){
document.getElementsByClassName("nomi")[0].getElementsByTagName("ul")[0].appendChild(nome);
}
}
//gestione immagine segno
function impostaImmagine() {
const immagine = document.createElement("img");
immagine.setAttribute(
"src",
'img/Tutte.png'
'img/Oroscopo.jpeg'
);
immagine.setAttribute("width", `${document.getElementsByClassName("segno")[0].offsetWidth}`);
document.getElementsByClassName('segno')[0].appendChild(immagine);
@ -514,7 +428,7 @@ document.getElementById("segno").dispatchEvent(new Event("change"));
if(segno == "Seleziona un segno"){
immagine.setAttribute(
"src",
'img/Tutte.png'
'img/Oroscopo.jpeg'
);
}
else{
@ -546,6 +460,7 @@ document.getElementById("segno").dispatchEvent(new Event("change"));
}
});
/*******************************************************************************************************************************************************/
</script>
</body>

0
script.js
View File

161
style.css
View File

@ -3,68 +3,185 @@
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-template-rows: 0.1fr 0.000001fr 0.05fr 0.5fr 0.000001fr 0.6fr;
grid-column-gap: 50px;
grid-row-gap: 50px;
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
background-image: url(img/Tutte.png);
background-color: black;
}
.titolo {
grid-area: 1 / 2 / 2 / 3;
grid-area: 1 / 1 / 2 / 4;
border: 2px solid green;
background-color: black;
font-size: 30pt;
padding-bottom: 5px;
animation: rainbow 2.5s linear;
animation-iteration-count: infinite;
}
@keyframes rainbow{
100%,0%{
color: rgb(255,0,0);
}
8%{
color: rgb(255,127,0);
}
16%{
color: rgb(255,255,0);
}
25%{
color: rgb(127,255,0);
}
33%{
color: rgb(0,255,0);
}
41%{
color: rgb(0,255,127);
}
50%{
color: rgb(0,255,255);
}
58%{
color: rgb(0,127,255);
}
66%{
color: rgb(0,0,255);
}
75%{
color: rgb(127,0,255);
}
83%{
color: rgb(255,0,255);
}
91%{
color: rgb(255,0,127);
}
}
.nomeRiquadro1 {
grid-area: 2 / 1 / 3 / 2;
grid-area: 3 / 1 / 4 / 2;
border: 2px solid green;
background-color: black;
}
.nomeRiquadro2 {
grid-area: 2 / 3 / 3 / 4;
grid-area: 3 / 3 / 4 / 4;
border: 2px solid green;
background-color: black;
}
.nomeRiquadro3 {
grid-area: 4 / 1 / 5 / 2;
grid-area: 5 / 1 / 6 / 2;
border: 2px solid #008000;
background-color: black;
}
.content {
grid-area: 2 / 2 / 6 / 3;
grid-area: 4 / 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 */
background-color: black;
}
.desc {
grid-area: 3 / 3 / 6 / 4;
.nomi {
grid-area: 4 / 3 / 5 / 4;
border: 2px solid green;
background-color: black;
}
.nomi > ul{
overflow-y: scroll;
line-height: 1em; /* altezza di una riga */
height: calc((1em * 15) + (1em / 2)); /* 15 righe */
background-color: black;
}
.stats {
grid-area: 3 / 1 / 4 / 2;
grid-area: 4 / 1 / 5 / 2;
border: 2px solid green;
background-color: black;
}
.segno {
grid-area: 5 / 1 / 6 / 2;
grid-area: 6 / 1 / 7 / 2;
border: 2px solid green;
}
#color{
display: inline;
}
#costellazione{
display: none;
background-color: black;
}
.tabellaColonna2{
padding-left: 40px;
background-color: black;
}
#trovaSegno > :not(#link){
display: none;
}
button {
padding: 0.6em 2em;
border: none;
outline: none;
color: rgb(255, 255, 255);
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
button:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
-webkit-filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing-button 20s linear infinite;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
@keyframes glowing-button {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
button:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #222;
left: 0;
top: 0;
border-radius: 10px;
}