740 lines
15 KiB
CSS
740 lines
15 KiB
CSS
.all {
|
|
position: relative;
|
|
text-align: center;
|
|
font-size: var(--font-size-xl);
|
|
color: var(--color-white);
|
|
font-family: var(--font);
|
|
/* height: 98vh; */
|
|
overflow-y: none;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
padding: 2vw;
|
|
}
|
|
|
|
.all::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.title {
|
|
position: relative;
|
|
top: 1vh;
|
|
font-size: 6.5vh;
|
|
display: flex;
|
|
color: var(--color-black);
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
line-height: 65%;
|
|
}
|
|
|
|
/* --------------------------------page-scan------------------------------------ */
|
|
.blur {
|
|
filter: blur(3px);
|
|
}
|
|
|
|
#scanqr-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
z-index: 100;
|
|
position: absolute;
|
|
padding-top: 50%;
|
|
width: 100%;
|
|
}
|
|
|
|
#video-scan {
|
|
max-width: 100%;
|
|
border-radius: 25px;
|
|
width: 60%;
|
|
aspect-ratio: 1 / 1;
|
|
background-color: var(--color-white);
|
|
border: 0.5px solid var(--color-black);
|
|
}
|
|
|
|
.qr-box img {
|
|
position: absolute;
|
|
width: 40%;
|
|
height: 40%;
|
|
padding: 8%;
|
|
}
|
|
|
|
|
|
/* --------------------------------page-tutorial------------------------------------ */
|
|
.tutorial-box{
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
z-index: 100;
|
|
padding-top: 50%;
|
|
}
|
|
|
|
.tutorial {
|
|
background-color: var(--color-white);
|
|
border: 0.5px solid var(--color-black);
|
|
border-radius: 25px;
|
|
padding: 20px;
|
|
width: 60vw;
|
|
}
|
|
|
|
.tutorial-box p, b {
|
|
color: var(--color-black);
|
|
font-size: 25px;
|
|
line-height: 10%;
|
|
}
|
|
|
|
.tutorial-box img{
|
|
width: 80%;
|
|
}
|
|
|
|
/* -------------------------------- page-group---------------------------------*/
|
|
|
|
.page-group {
|
|
padding-top: 5vh;
|
|
}
|
|
|
|
|
|
/* --------------------------------page-select---------------------------------- */
|
|
.page {
|
|
display: none;
|
|
}
|
|
|
|
.page.active {
|
|
display: block;
|
|
}
|
|
|
|
.page.fade-in {
|
|
animation: fadeIn 1s forwards;
|
|
}
|
|
|
|
.page.fade-out {
|
|
animation: fadeOut 1s forwards;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.page-select {
|
|
padding-top: 5vh;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2.5vw;
|
|
font-family: var(--font);
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1vw;
|
|
padding: 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.card.group {
|
|
|
|
padding: 10px;
|
|
}
|
|
|
|
.card.selected {
|
|
background-color: var(--color-black);
|
|
border-radius: 27px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.card .name-tag {
|
|
background-color: var(--color-black);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.card.selected .name-tag {
|
|
background-color: var(--color-white);
|
|
color: var(--color-black);
|
|
}
|
|
|
|
|
|
.box {
|
|
width: 26vw;
|
|
border-radius: 25px;
|
|
background-color: var(--color-background-content-trasparent);
|
|
}
|
|
|
|
.box img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 25px;
|
|
aspect-ratio: 7/9;
|
|
}
|
|
|
|
.box .box-images {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 25px;
|
|
aspect-ratio: 7/9;
|
|
}
|
|
|
|
.box .box-images img {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
object-fit: cover;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
/* Ruota e posiziona le immagini */
|
|
.box-images img:nth-child(1) {
|
|
transform: rotate(0deg); /* Ruota la prima immagine */
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.box-images img:nth-child(2) {
|
|
transform: rotate(0deg); /* Ruota la seconda immagine */
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1; /* Sovrapponi la seconda immagine alla prima */
|
|
}
|
|
|
|
.box-images img:nth-child(3) {
|
|
transform: rotate(0deg); /* Ruota la terza immagine */
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 2; /* Sovrapponi la terza immagine alle altre */
|
|
}
|
|
|
|
/* Effetto hover per un'interazione aggiuntiva */
|
|
.card.group.selected .box-images img:nth-child(1) {
|
|
transform: rotate(-15deg) translateY(-15px); /* Aumenta la rotazione e alza l'immagine */
|
|
}
|
|
|
|
.card.group.selected .box-images img:nth-child(2) {
|
|
transform: rotate(0deg) translateY(-15px); /* Alza leggermente la seconda immagine */
|
|
}
|
|
|
|
.card.group.selected .box-images img:nth-child(3) {
|
|
transform: rotate(15deg) translateY(-15px); /* Aumenta la rotazione e alza l'immagine */
|
|
}
|
|
|
|
|
|
.name-tag {
|
|
color: var(--color-black);
|
|
padding: 1vw 3vw;
|
|
border-radius: 25px;
|
|
font-size: 20px;
|
|
width: 20.5vw;
|
|
align-content: center;
|
|
height: 35px;
|
|
font-family: var(--font-helvetica-now-display);
|
|
}
|
|
|
|
/* --------------------------page-input-img_video---------------------------- */
|
|
.page-input-image_video {
|
|
padding-top: 5vh;
|
|
}
|
|
|
|
video {
|
|
-webkit-transform: scaleX(-1);
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.box-camera {
|
|
display: flex;
|
|
margin: 1vw;
|
|
aspect-ratio: 7/9;
|
|
border-radius: 25px;
|
|
border: 0.5px solid var(--color-black);
|
|
background-color: var(--color-background-content-trasparent);
|
|
|
|
}
|
|
|
|
.box-camera video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 25px;
|
|
}
|
|
|
|
.box-camera img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 25px;
|
|
}
|
|
|
|
.button {
|
|
padding-top: 5vh;
|
|
display: flex;
|
|
gap: 5vw;
|
|
flex-wrap: wrap;
|
|
margin: 1vw;
|
|
}
|
|
|
|
.button-content.active {
|
|
background-color: var(--color-black);
|
|
color: var(--color-white);
|
|
padding: 1vw 3vw;
|
|
border-radius: 25px;
|
|
font-size: 40px;
|
|
width: 30vw;
|
|
font-family: var(--font-helvetica-now-display);
|
|
}
|
|
|
|
.button-content:hover {
|
|
transform: scale(0.95);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button-content {
|
|
background-color: var(--color-white);
|
|
color: var(--color-black);
|
|
padding: 1vw 3vw;
|
|
border-radius: 25px;
|
|
font-size: 40px;
|
|
width: 30vw;
|
|
font-family: var(--font-helvetica-now-display);
|
|
border: 0.5px solid var(--color-black);
|
|
text-align: center;
|
|
}
|
|
|
|
.button-secondary:hover {
|
|
transform: scale(0.95);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.l {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.r {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.re {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 5vw;
|
|
background-color: var(--color-black);
|
|
color: var(--color-white);
|
|
padding: 1vw 3vw;
|
|
border-radius: 25px;
|
|
font-size: 40px;
|
|
width: 50vw;
|
|
font-family: var(--font-helvetica-now-display);
|
|
align-items: center;
|
|
}
|
|
|
|
.red-dot {
|
|
color: var(--color-red);
|
|
font-size: 20px;
|
|
position: absolute;
|
|
padding-top: 13px;
|
|
margin-left: -25px;
|
|
}
|
|
|
|
.number {
|
|
font-size: 150px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
color: var(--color-black);
|
|
text-shadow:
|
|
1px 1px 0 var(--color-white),
|
|
-1px 1px 0 var(--color-white),
|
|
1px -1px 0 var(--color-white),
|
|
-1px -1px 0 var(--color-white);
|
|
transform: translate(-50%, -50%);
|
|
opacity: 0;
|
|
transition: all 0.3s;
|
|
z-index: 500;
|
|
}
|
|
|
|
.number.active {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%) scale(1.2);
|
|
}
|
|
|
|
.number.fade-out {
|
|
opacity: 0;
|
|
transform: translate(-50%, -50%) scale(0.8);
|
|
}
|
|
|
|
/* --------------------------------page-loading-------------------------------- */
|
|
.page-loading {
|
|
padding-top: 5vh;
|
|
}
|
|
|
|
#progress-bar-container {
|
|
padding-top: 5vh;
|
|
}
|
|
|
|
.progress-container {
|
|
width: 100%;
|
|
max-width: 98vw;
|
|
height: 50px;
|
|
background-color: var(--color-background-content-trasparent-dark);
|
|
border-radius: 25px;
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
background-color: var(--color-black);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
|
|
/* --------------------------------page-result--------------------------------- */
|
|
.page-result {
|
|
padding-top: 5vh;
|
|
}
|
|
|
|
.dida {
|
|
display: flex;
|
|
color: var(--color-black);
|
|
font-size: 32px;
|
|
width: 100%;
|
|
font-family: var(--font-helvetica-now-display);
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 3vw;
|
|
flex-wrap: wrap;
|
|
line-height: 100%;
|
|
padding-top: 5vw;
|
|
}
|
|
|
|
.qr {
|
|
padding-top: 1.5vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
#qr-content {
|
|
display: none;
|
|
}
|
|
|
|
.qr-content {
|
|
background-color: var(--color-black);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 5vw;
|
|
color: var(--color-white);
|
|
padding: 1vw 3vw;
|
|
border-radius: 25px;
|
|
font-size: 40px;
|
|
width: 15vw;
|
|
height: 22vw;
|
|
font-family: var(--font-helvetica-now-display);
|
|
align-items: center;
|
|
}
|
|
|
|
.qr-content img {
|
|
scale: 0.5;
|
|
}
|
|
|
|
.qr-content p {
|
|
position: absolute;
|
|
font-size: 20px;
|
|
color: var(--color-white);
|
|
top: 11.5vh;
|
|
}
|
|
|
|
/* -------------------------------page screensaver--------------------------*/
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1vw;
|
|
}
|
|
|
|
.photo {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
.photo img {
|
|
width: 100%;
|
|
opacity: 1;
|
|
transition: opacity 1s ease-in-out;
|
|
object-fit: cover;
|
|
aspect-ratio: 7/9;
|
|
padding: 5px;
|
|
border-radius: 27px;
|
|
}
|
|
|
|
#page-screensaver {
|
|
display: none;
|
|
transition: opacity 1.5s ease-in-out
|
|
}
|
|
|
|
/* --------------------------------effects--------------------------------- */
|
|
.flash {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
pointer-events: none;
|
|
z-index: -1000;
|
|
}
|
|
|
|
.flash.active {
|
|
opacity: 1;
|
|
animation: flash 0.3s;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@keyframes flash {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/*---------------------------personalizeitsion------------------------*/
|
|
|
|
@font-face {
|
|
font-family: 'RomanEmpire';
|
|
src: url('fonts/Constantine.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'Cinema';
|
|
src: url('fonts/NeonLight-Regular.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
.logo-image{
|
|
width: 80%;
|
|
object-fit: contain;
|
|
height: 100%;
|
|
margin: auto;
|
|
display: block;
|
|
}
|
|
|
|
|
|
|
|
#group_1.card.group.selected {
|
|
background: linear-gradient(45deg, #F0131E 25%, #70040a, #560000 95%);
|
|
border-radius: 27px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#group_1 .name-tag{
|
|
background: linear-gradient(45deg,#F0131E 25%, #70040a, #560000 95%);
|
|
color: var(--color-black);
|
|
font-family: 'Marvel', monospace;
|
|
}
|
|
|
|
#group_1.card.selected .name-tag{
|
|
background: var(--color-white);
|
|
color: var(--color-black);
|
|
background-color: white;
|
|
border-color: white;
|
|
font-family: var(--font-helvetica-now-display);
|
|
color: red;
|
|
}
|
|
|
|
#group_2.card.group.selected {
|
|
background: linear-gradient(45deg, #002f49 15%, #002d8e, #bdc3fe 95%) ;
|
|
border-radius: 27px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#group_2 .name-tag{
|
|
background: linear-gradient(45deg, #002f49 15%, #002d8e, #bdc3fe 95%);
|
|
color: var(--color-black);
|
|
font-family: var(--font-helvetica-now-display);
|
|
}
|
|
|
|
#group_2.card.selected .name-tag{
|
|
background: var(--color-white);
|
|
color: var(--color-black);
|
|
background-color: white;
|
|
|
|
font-family: var(--font-helvetica-now-display);
|
|
color: rgb(47, 0, 255);
|
|
}
|
|
|
|
#group_3.card.group.selected {
|
|
background: linear-gradient(45deg, #00404f 25%, #01738d, #00d0d4 95%);
|
|
border-radius: 27px;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
#group_3 .name-tag{
|
|
background: linear-gradient(45deg, #00404f 25%, #01738d, #00d0d4 95%);
|
|
color: var(--color-black);
|
|
font-family: var(--font-helvetica-now-display);
|
|
}
|
|
|
|
#group_3.card.selected .name-tag{
|
|
background: var(--color-white);
|
|
color: var(--color-black);
|
|
background-color: white;
|
|
font-family: var(--font-helvetica-now-display);
|
|
color: rgb(47, 0, 255);
|
|
}
|
|
|
|
#group_3.card.selected .name-tag .logo-image{
|
|
filter: invert();
|
|
}
|
|
|
|
.random-character{
|
|
border: 0.5px solid white;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
#group_4.card.group.selected {
|
|
background: linear-gradient(45deg, #8B4513 15%, #D2B48C, #CD853F 95%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#group_4 .name-tag{
|
|
background: linear-gradient(45deg, #8B4513 15%, #D2B48C, #CD853F 95%);
|
|
color: var(--color-black);
|
|
font-family: "RomanEmpire", sans-serif;
|
|
font-size: 25px;
|
|
}
|
|
|
|
#group_4.card.selected .name-tag{
|
|
background: var(--color-white);
|
|
color: var(--color-black);
|
|
background-color: white;
|
|
font-family: "RomanEmpire", sans-serif;
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
|
|
#group_5.card.group.selected {
|
|
background: linear-gradient(45deg, #000033 15%, #6600CC, #FF00FF 95%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#group_5 .name-tag{
|
|
background: linear-gradient(45deg, #000033 15%, #6600CC, #FF00FF 95%);
|
|
color: white;
|
|
font-family: "Cinema", sans-serif;
|
|
font-size: 25px;
|
|
text-shadow: 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 1vh var(--lights);
|
|
animation: flicker 7s infinite;
|
|
filter:brightness(1);
|
|
}
|
|
|
|
#group_5.card.selected .name-tag{
|
|
background: var(--color-white);
|
|
color: var(--color-black);
|
|
background-color: white;
|
|
font-family: "Cinema", sans-serif;
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
|
|
@keyframes flicker{
|
|
9%{
|
|
text-shadow: 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 1vh var(--lights);;
|
|
filter:brightness(1)
|
|
}
|
|
10%{
|
|
text-shadow:none;
|
|
filter:brightness(.4);
|
|
}
|
|
11%{
|
|
text-shadow: 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 1vh var(--lights);;
|
|
filter:brightness(1)
|
|
}
|
|
12%{
|
|
text-shadow:none;
|
|
filter:brightness(.4);
|
|
}
|
|
13%{
|
|
text-shadow: 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 1vh var(--lights);;
|
|
filter:brightness(1)
|
|
}
|
|
66%{
|
|
text-shadow: 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 1vh var(--lights);;
|
|
filter:brightness(1)
|
|
}
|
|
67%{
|
|
text-shadow:none;
|
|
filter:brightness(.4);
|
|
}
|
|
75%{
|
|
text-shadow:none;
|
|
filter:brightness(.4);
|
|
}
|
|
76%{
|
|
text-shadow: 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 .5vh var(--lights), 0 0 1vh var(--lights);;
|
|
filter:brightness(1)
|
|
}
|
|
}
|
|
|
|
#group_6.card.group.selected {
|
|
background: linear-gradient(45deg, #50b1de 15%, #a7dff9, #def0f9 95%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#group_6 .name-tag{
|
|
background: linear-gradient(45deg, #50b1de 15%, #a7dff9, #def0f9 95%);
|
|
color: var(--color-black);
|
|
}
|
|
|
|
#group_6.card.selected .name-tag{
|
|
background: var(--color-white);
|
|
color: var(--color-black);
|
|
background-color: white;
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
|
|
|
|
|