"Il sitoh deveh essereh accattivanteh"
This commit is contained in:
La Programmatrice Verde
parent
a9b59f1ef6
commit
0e7c262616
BIN
img/Acquario.png
BIN
img/Acquario.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 409 KiB |
BIN
img/Ariete.png
BIN
img/Ariete.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 362 KiB |
BIN
img/Bilancia.png
BIN
img/Bilancia.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 410 KiB |
BIN
img/Cancro.png
BIN
img/Cancro.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 MiB After Width: | Height: | Size: 470 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 298 KiB |
BIN
img/Gemelli.png
BIN
img/Gemelli.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 MiB After Width: | Height: | Size: 289 KiB |
BIN
img/Leone.png
BIN
img/Leone.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 MiB After Width: | Height: | Size: 222 KiB |
BIN
img/Oroscopo.jpeg
Normal file
BIN
img/Oroscopo.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
img/Pesci.png
BIN
img/Pesci.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 MiB After Width: | Height: | Size: 419 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 MiB After Width: | Height: | Size: 282 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 399 KiB |
BIN
img/Toro.png
BIN
img/Toro.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 MiB After Width: | Height: | Size: 306 KiB |
BIN
img/Vergine.png
BIN
img/Vergine.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 MiB After Width: | Height: | Size: 261 KiB |
323
index.html
323
index.html
@ -7,7 +7,7 @@
|
|||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="griglia">
|
<body class="griglia">
|
||||||
<div class="titolo">OROSCOPO DEL PORCO</div>
|
<div class="titolo"><center>˗ˏˋ ★ ˎˊ˗ Oroscopo ˗ˏˋ ★ ˎˊ˗</center></div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<center>
|
<center>
|
||||||
<div id="defaultInput">
|
<div id="defaultInput">
|
||||||
@ -33,41 +33,26 @@
|
|||||||
<br />
|
<br />
|
||||||
<div id="trovaSegno">
|
<div id="trovaSegno">
|
||||||
<a href="javascript: void(0)" id="link">Non conosci il tuo segno?</a>
|
<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" />
|
<input type="date" id="date" />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
<button onclick="trovaSegno()">Trova il tuo segno</button>
|
<button onclick="trovaSegno()">Trova il tuo segno</button>
|
||||||
</div>
|
</div>
|
||||||
|
<br />
|
||||||
<button onclick="Oroscopo()" id="bottone">
|
<button onclick="Oroscopo()" id="bottone">
|
||||||
Chiedi il tuo pronostico
|
Chiedi il tuo pronostico
|
||||||
</button>
|
</button>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
<div id="output"></div>
|
<div id="output"></div>
|
||||||
</center>
|
</center>
|
||||||
</div>
|
</div>
|
||||||
<div class="nomeRiquadro2"><center>Descrizione</center></div>
|
<div class="nomeRiquadro2"><center>Chi ha fatto affidamento a questo sito:</center></div>
|
||||||
<div class="desc">
|
<div class="nomi">
|
||||||
L'oroscopo è un sistema astronomico e astrologico che associa a ogni
|
<ul>
|
||||||
persona nata in un giorno preciso del mese di gennaio, il simbolo
|
|
||||||
zodiacale corrispondente. Esistono due tipi principali di oroscopi: quelli
|
</ul>
|
||||||
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>
|
||||||
<div class="nomeRiquadro1"><center>Stats</center></div>
|
<div class="nomeRiquadro1"><center>Stats</center></div>
|
||||||
<div class="stats" id="stats">
|
<div class="stats" id="stats">
|
||||||
@ -146,55 +131,6 @@ function Init(){
|
|||||||
"Acquario",
|
"Acquario",
|
||||||
"Pesci",
|
"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*******************************************************************************************/
|
/***********************************************Sezione Stats*******************************************************************************************/
|
||||||
|
|
||||||
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*****************************************************************************************/
|
/***********************************************Sezione Content*****************************************************************************************/
|
||||||
|
|
||||||
function Oroscopo() {
|
function Oroscopo() {
|
||||||
const frasi = [
|
const frasi = [
|
||||||
"Una nuova opportunità lavorativa si presenta, sfruttala!",
|
"Una nuova opportunità lavorativa si presenta, sfruttala!",
|
||||||
"Ascolta i consigli degli amici, potrebbero essere utili.",
|
"Ascolta i consigli degli amici, potrebbero essere utili.",
|
||||||
"Attento alle spese, non esagerare.",
|
"Attento alle spese, non esagerare.",
|
||||||
"La vita sentimentale si anima, aspettati un sorriso!",
|
"La vita sentimentale si anima, aspettati un sorriso!",
|
||||||
"Concentrati sui tuoi obiettivi e non lasciare che le distrazioni ti rallentino.",
|
"Concentrati sui tuoi obiettivi e non lasciare che le distrazioni ti rallentino.",
|
||||||
"Sii paziente, i risultati non tarderanno.",
|
"Sii paziente, i risultati non tarderanno.",
|
||||||
"Un cambiamento di programma potrebbe essere necessario.",
|
"Un cambiamento di programma potrebbe essere necessario.",
|
||||||
"La tua intuizione è acuta, ascoltala!",
|
"La tua intuizione è acuta, ascoltala!",
|
||||||
"Non lasciare che le preoccupazioni ti consumino.",
|
"Non lasciare che le preoccupazioni ti consumino.",
|
||||||
"Il tuo amore per la famiglia e gli amici si rafforza.",
|
"Il tuo amore per la famiglia e gli amici si rafforza.",
|
||||||
"Sii più aperto ai nuovi progetti, potrebbero essere interessanti!",
|
"Sii più aperto ai nuovi progetti, potrebbero essere interessanti!",
|
||||||
"Non esitare a chiedere aiuto quando ne hai bisogno.",
|
"Non esitare a chiedere aiuto quando ne hai bisogno.",
|
||||||
"La tua autorità è riconosciuta e apprezzata.",
|
"La tua autorità è riconosciuta e apprezzata.",
|
||||||
"Sii cauto con le tue finanze, non spendere troppo!",
|
"Sii cauto con le tue finanze, non spendere troppo!",
|
||||||
"Non lasciare che la pigrizia ti rallenti.",
|
"Non lasciare che la pigrizia ti rallenti.",
|
||||||
"Le tue abilità organizzative sono essenziali per un nuovo progetto.",
|
"Le tue abilità organizzative sono essenziali per un nuovo progetto.",
|
||||||
"Sii più socievole e aperto con gli altri, potresti scoprire nuove amicizie!",
|
"Sii più socievole e aperto con gli altri, potresti scoprire nuove amicizie!",
|
||||||
"Non esitare a chiedere chiarimenti quando ne hai bisogno.",
|
"Non esitare a chiedere chiarimenti quando ne hai bisogno.",
|
||||||
"La tua vita sociale si anima, aspettati un'intrattenimento!",
|
"La tua vita sociale si anima, aspettati un'intrattenimento!",
|
||||||
"Sii più equilibrato e razionale nelle tue decisioni.",
|
"Sii più equilibrato e razionale nelle tue decisioni.",
|
||||||
"Non lasciare che la competitività ti consumi.",
|
"Non lasciare che la competitività ti consumi.",
|
||||||
"I segreti di cui sei a conoscenza potrebbero essere utili per aiutare qualcuno.",
|
"I segreti di cui sei a conoscenza potrebbero essere utili per aiutare qualcuno.",
|
||||||
"Sii più aperto alle novità e non temere il cambiamento!",
|
"Sii più aperto alle novità e non temere il cambiamento!",
|
||||||
"Non esitare a difendere ciò che è giusto.",
|
"Non esitare a difendere ciò che è giusto.",
|
||||||
"La tua ambizione si rafforza, sfruttala per raggiungere nuovi obiettivi!",
|
"La tua ambizione si rafforza, sfruttala per raggiungere nuovi obiettivi!",
|
||||||
"Sii più paziente e non affrettarti troppo.",
|
"Sii più paziente e non affrettarti troppo.",
|
||||||
"Non lasciare che la curiosità ti porti a commettere errori.",
|
"Non lasciare che la curiosità ti porti a commettere errori.",
|
||||||
"La tua responsabilità è apprezzata e riconosciuta.",
|
"La tua responsabilità è apprezzata e riconosciuta.",
|
||||||
"Sii più aperto alle novità e non temere il cambiamento!",
|
"Sii più aperto alle novità e non temere il cambiamento!",
|
||||||
"Non esitare a chiedere aiuto quando ne hai bisogno.",
|
"Non esitare a chiedere aiuto quando ne hai bisogno.",
|
||||||
"La tua creatività è essenziale per un nuovo progetto.",
|
"La tua creatività è essenziale per un nuovo progetto.",
|
||||||
"Sii più socievole e aperto con gli altri, potresti scoprire nuove amicizie!",
|
"Sii più socievole e aperto con gli altri, potresti scoprire nuove amicizie!",
|
||||||
"Non lasciare che la curiosità ti porti a commettere errori.",
|
"Non lasciare che la curiosità ti porti a commettere errori.",
|
||||||
"La tua intuizione è acuta, ascoltala!",
|
"La tua intuizione è acuta, ascoltala!",
|
||||||
"Sii più aperto alle novità e non temere il cambiamento!",
|
"Sii più aperto alle novità e non temere il cambiamento!",
|
||||||
"Non esitare a chiedere aiuto quando ne hai bisogno.",
|
"Non esitare a chiedere aiuto quando ne hai bisogno.",
|
||||||
];
|
];
|
||||||
|
|
||||||
document.getElementById("output").innerHTML = "";
|
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
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;
|
let isSegnoDefaultPresent = false;
|
||||||
|
|
||||||
for (
|
for (
|
||||||
let i = 0;
|
let i = 0;
|
||||||
i <
|
i <
|
||||||
document.getElementById("segno").getElementsByTagName("option")
|
document.getElementById("segno").getElementsByTagName("option")
|
||||||
.length && !isSegnoDefaultPresent;
|
.length && !isSegnoDefaultPresent;
|
||||||
i++
|
i++
|
||||||
) {
|
) {
|
||||||
if (
|
if (
|
||||||
document.getElementById("segno").getElementsByTagName("option")[
|
document.getElementById("segno").getElementsByTagName("option")[
|
||||||
i
|
i
|
||||||
] == "Seleziona un segno"
|
] == "Seleziona un segno"
|
||||||
) {
|
) {
|
||||||
document.getElementById("segno").value = "Seleziona un segno";
|
document.getElementById("segno").value = "Seleziona un segno";
|
||||||
isSegnoDefaultPresent = true;
|
isSegnoDefaultPresent = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!isSegnoDefaultPresent) {
|
if (!isSegnoDefaultPresent) {
|
||||||
aggiungiDefault();
|
aggiungiDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById("segno").dispatchEvent(new Event("change"));
|
document.getElementById("segno").dispatchEvent(new Event("change"));
|
||||||
|
|
||||||
document.getElementById("link").style.display = "block";
|
document.getElementById("link").style.display = "block";
|
||||||
} else {
|
|
||||||
alert("Inserire il proprio segno");
|
document.getElementById("nome").value = "";
|
||||||
}
|
|
||||||
} else {
|
document.getElementById("bottone").innerHTML = "Chiedi il tuo pronostico";
|
||||||
alert("Inserire il proprio nome");
|
|
||||||
}
|
}
|
||||||
}
|
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
|
//gestione UI sezione trova segno
|
||||||
document.getElementById("segno").addEventListener("input", function () {
|
document.getElementById("segno").addEventListener("input", function () {
|
||||||
@ -380,7 +279,7 @@ function Init(){
|
|||||||
document.getElementById("bottone").style.display = "none";
|
document.getElementById("bottone").style.display = "none";
|
||||||
document
|
document
|
||||||
.querySelectorAll("#trovaSegno > :not(#link)")
|
.querySelectorAll("#trovaSegno > :not(#link)")
|
||||||
.forEach((tag) => (tag.style.display = "block"));
|
.forEach((tag) => (tag.style.display = "inline"));
|
||||||
});
|
});
|
||||||
|
|
||||||
function trovaSegno() {
|
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
|
//gestione immagine segno
|
||||||
function impostaImmagine() {
|
function impostaImmagine() {
|
||||||
const immagine = document.createElement("img");
|
const immagine = document.createElement("img");
|
||||||
immagine.setAttribute(
|
immagine.setAttribute(
|
||||||
"src",
|
"src",
|
||||||
'img/Tutte.png'
|
'img/Oroscopo.jpeg'
|
||||||
);
|
);
|
||||||
immagine.setAttribute("width", `${document.getElementsByClassName("segno")[0].offsetWidth}`);
|
immagine.setAttribute("width", `${document.getElementsByClassName("segno")[0].offsetWidth}`);
|
||||||
document.getElementsByClassName('segno')[0].appendChild(immagine);
|
document.getElementsByClassName('segno')[0].appendChild(immagine);
|
||||||
@ -514,7 +428,7 @@ document.getElementById("segno").dispatchEvent(new Event("change"));
|
|||||||
if(segno == "Seleziona un segno"){
|
if(segno == "Seleziona un segno"){
|
||||||
immagine.setAttribute(
|
immagine.setAttribute(
|
||||||
"src",
|
"src",
|
||||||
'img/Tutte.png'
|
'img/Oroscopo.jpeg'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
@ -546,6 +460,7 @@ document.getElementById("segno").dispatchEvent(new Event("change"));
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
/*******************************************************************************************************************************************************/
|
/*******************************************************************************************************************************************************/
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
161
style.css
161
style.css
@ -3,68 +3,185 @@
|
|||||||
margin-right: 10%;
|
margin-right: 10%;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
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-column-gap: 50px;
|
||||||
grid-row-gap: 50px;
|
grid-row-gap: 50px;
|
||||||
background-color: black;
|
|
||||||
color: white;
|
color: white;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
background-image: url(img/Tutte.png);
|
||||||
|
background-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.titolo {
|
.titolo {
|
||||||
grid-area: 1 / 2 / 2 / 3;
|
grid-area: 1 / 1 / 2 / 4;
|
||||||
border: 2px solid green;
|
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 {
|
.nomeRiquadro1 {
|
||||||
grid-area: 2 / 1 / 3 / 2;
|
grid-area: 3 / 1 / 4 / 2;
|
||||||
border: 2px solid green;
|
border: 2px solid green;
|
||||||
|
background-color: black;
|
||||||
}
|
}
|
||||||
.nomeRiquadro2 {
|
.nomeRiquadro2 {
|
||||||
grid-area: 2 / 3 / 3 / 4;
|
grid-area: 3 / 3 / 4 / 4;
|
||||||
border: 2px solid green;
|
border: 2px solid green;
|
||||||
|
background-color: black;
|
||||||
}
|
}
|
||||||
.nomeRiquadro3 {
|
.nomeRiquadro3 {
|
||||||
grid-area: 4 / 1 / 5 / 2;
|
grid-area: 5 / 1 / 6 / 2;
|
||||||
border: 2px solid #008000;
|
border: 2px solid #008000;
|
||||||
|
background-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
grid-area: 2 / 2 / 6 / 3;
|
grid-area: 4 / 2 / 6 / 3;
|
||||||
border: 2px solid green;
|
border: 2px solid green;
|
||||||
overflow-y: scroll;
|
background-color: black;
|
||||||
line-height: 1.5em; /* altezza di una riga */
|
|
||||||
height: calc((1.5em * 24) + (1.5em / 2)); /* 24 righe */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc {
|
.nomi {
|
||||||
grid-area: 3 / 3 / 6 / 4;
|
grid-area: 4 / 3 / 5 / 4;
|
||||||
border: 2px solid green;
|
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 {
|
.stats {
|
||||||
grid-area: 3 / 1 / 4 / 2;
|
grid-area: 4 / 1 / 5 / 2;
|
||||||
border: 2px solid green;
|
border: 2px solid green;
|
||||||
|
background-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.segno {
|
.segno {
|
||||||
grid-area: 5 / 1 / 6 / 2;
|
grid-area: 6 / 1 / 7 / 2;
|
||||||
border: 2px solid green;
|
border: 2px solid green;
|
||||||
}
|
background-color: black;
|
||||||
|
|
||||||
#color{
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#costellazione{
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabellaColonna2{
|
.tabellaColonna2{
|
||||||
padding-left: 40px;
|
padding-left: 40px;
|
||||||
|
background-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
#trovaSegno > :not(#link){
|
#trovaSegno > :not(#link){
|
||||||
display: none;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user