- 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.
+ Chi ha fatto affidamento a questo sito:
+ 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"));
}
});
+
/*******************************************************************************************************************************************************/
diff --git a/script.js b/script.js
deleted file mode 100644
index e69de29..0000000
diff --git a/style.css b/style.css
index 23c9139..f6f1cc5 100644
--- a/style.css
+++ b/style.css
@@ -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;
+ }
+