finalizzazione del progetto
This commit is contained in:
+156
-123
@@ -1,123 +1,156 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#game-container {
|
||||
width: 1000px;
|
||||
height: 600px;
|
||||
background-color: #000;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 5px solid #333;
|
||||
margin: 0 auto;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Area dei bidoni */
|
||||
#bins-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Effetto bagliore per risposta corretta (Verde) */
|
||||
.glow-success {
|
||||
box-shadow: 0 0 30px 15px rgba(0, 255, 0, 0.6);
|
||||
border-radius: 50%; /* Rende l'effetto ovale/circolare */
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Effetto bagliore per risposta errata (Rosso) */
|
||||
.glow-error {
|
||||
box-shadow: 0 0 30px 15px rgba(255, 0, 0, 0.6);
|
||||
border-radius: 50%;
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.bin img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
|
||||
/* Questa riga è la magia: */
|
||||
mix-blend-mode: screen;
|
||||
|
||||
/* 'screen' mantiene i colori chiari e rende invisibile il nero.
|
||||
In questo modo il bagliore dietro passerà attraverso le zone nere. */
|
||||
}
|
||||
|
||||
|
||||
/* Modifica leggera al bagliore per renderlo più visibile sotto il bidone */
|
||||
.bin::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 60%; /* Abbassato un po' per centrarsi meglio sulla base del bidone */
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 150px;
|
||||
height: 100px; /* Più largo che alto per un effetto ovale perfetto */
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
filter: blur(10px); /* Sfuma i bordi della luce */
|
||||
transition: opacity 0.3s;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Stato Successo (Verde) */
|
||||
.glow-success::after {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 40px 20px rgba(0, 255, 0, 0.7);
|
||||
background-color: rgba(0, 255, 0, 0.2); /* Opzionale: un leggero centro colorato */
|
||||
}
|
||||
|
||||
/* Stato Errore (Rosso) */
|
||||
.glow-error::after {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 40px 20px rgba(255, 0, 0, 0.7);
|
||||
background-color: rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.bin img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
pointer-events: none; /* Impedisce che il mouse "prenda" l'immagine del bidone */
|
||||
}
|
||||
|
||||
/* I rifiuti */
|
||||
.trash {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: contain;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
.trash:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
/* Il bancone marrone in basso */
|
||||
#counter {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-color: #5d4037;
|
||||
/* Colore marrone bancone */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Area UI (Punti e Tempo) */
|
||||
#ui {
|
||||
margin-top: 10px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* --- VARIABILI GLOBALI --- */
|
||||
:root {
|
||||
--bg-light: #f8fafc;
|
||||
--text-dark: #1e293b;
|
||||
--green-eco: #10b981;
|
||||
--red-alert: #ef4444;
|
||||
--counter-top: #334155;
|
||||
}
|
||||
|
||||
/* --- RESET BASE --- */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background-color: var(--bg-light);
|
||||
color: var(--text-dark);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* --- UI SUPERIORE (Punti e Tempo) --- */
|
||||
#ui {
|
||||
margin-top: 20px;
|
||||
padding: 12px 40px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #e2e8f0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#ui span {
|
||||
color: var(--green-eco);
|
||||
}
|
||||
|
||||
/* --- CONTAINER GIOCO --- */
|
||||
#game-container {
|
||||
width: 92vw;
|
||||
height: 82vh;
|
||||
background-color: #000; /* Fondo nero per il mix-blend-mode */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
margin: 20px auto;
|
||||
border: 8px solid white; /* Cornice stile tablet */
|
||||
}
|
||||
|
||||
/* --- AREA DEI BIDONI (Ingranditi) --- */
|
||||
#bins-container {
|
||||
display: flex;
|
||||
justify-content: center; /* Centra i bidoni */
|
||||
gap: 12px; /* Spazio tra i bidoni */
|
||||
align-items: flex-end;
|
||||
padding: 30px 20px;
|
||||
width: 100%;
|
||||
height: 72%; /* Più spazio verticale per cestini grandi */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bin {
|
||||
position: relative;
|
||||
/* Ingrandimento: ora i bidoni occupano fino al 20% della larghezza */
|
||||
width: 20%;
|
||||
max-width: 200px;
|
||||
min-width: 140px;
|
||||
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.bin:hover {
|
||||
transform: scale(1.08) translateY(-10px);
|
||||
}
|
||||
|
||||
/* Gestione immagini con sfondo nero e scritta interna */
|
||||
.bin img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
mix-blend-mode: screen; /* Rende il nero dell'immagine trasparente */
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
|
||||
/* Aumentiamo luminosità e contrasto per far leggere meglio le scritte nere */
|
||||
filter: brightness(1.25) contrast(1.1);
|
||||
}
|
||||
|
||||
/* --- EFFETTI FEEDBACK (Bagliore sotto) --- */
|
||||
.bin::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
filter: blur(25px);
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.glow-success::after {
|
||||
opacity: 0.8;
|
||||
background: var(--green-eco);
|
||||
box-shadow: 0 0 60px 30px var(--green-eco);
|
||||
}
|
||||
|
||||
.glow-error::after {
|
||||
opacity: 0.8;
|
||||
background: var(--red-alert);
|
||||
box-shadow: 0 0 60px 30px var(--red-alert);
|
||||
}
|
||||
|
||||
/* --- I RIFIUTI (Trash) --- */
|
||||
.trash {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
object-fit: contain;
|
||||
position: absolute;
|
||||
z-index: 500;
|
||||
cursor: grab;
|
||||
/* Ombra per farli sembrare sollevati */
|
||||
filter: drop-shadow(0 12px 10px rgba(0,0,0,0.4));
|
||||
}
|
||||
|
||||
.trash:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* --- IL BANCONE (Counter) --- */
|
||||
#counter {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background: var(--counter-top);
|
||||
border-top: 3px solid rgba(255,255,255,0.1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Effetto profondità sul bordo del bancone */
|
||||
#counter::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
|
||||
}
|
||||
Reference in New Issue
Block a user