2526-web/Kelompok02-Memory-Card
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

endscreen ilang

Browse Source
This commit is contained in:
Nathan 2025-12-18 03:12:17 +07:00
parent 9de14616c8
commit 4a84e48b30
1 changed files with 23 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
assets/gameboard-hard.css
View File

@ -1,7 +1,7 @@
html, body {
margin: 0;
height: 100vh;
overflow: hidden; /* Layar dikunci, tidak bisa scroll */
overflow: hidden; /* Wajib: Kunci layar biar gak bisa discroll */
font-family: "Poppins", sans-serif;
}
@ -14,7 +14,7 @@ body {
/* --- TOPBAR --- */
.topbar {
width: 100%;
height: 60px; /* Tinggi fix */
height: 60px; /* Tinggi header kita kunci */
box-sizing: border-box;
display: flex;
justify-content: space-between;
@ -23,7 +23,7 @@ body {
background: rgba(255, 255, 255, 0.9);
border-bottom: 2px solid rgba(0,0,0,0.1);
z-index: 50;
flex-shrink: 0;
flex-shrink: 0;
}
.back-btn { font-size: 26px; border: none; background: none; cursor: pointer; color: #222; }
@ -35,20 +35,22 @@ body {
}
.icon { font-size: 18px; }
/* --- GAMEBOARD (FULL SCREEN) --- */
/* --- GAMEBOARD FULL SCREEN --- */
.gameboard {
/* Memenuhi sisa tinggi layar */
/* 1. Ambil SEMUA sisa tinggi layar (100% layar - 60px header) */
height: calc(100vh - 60px);
/* Memenuhi seluruh lebar layar */
/* 2. Ambil SEMUA lebar layar */
width: 100%;
max-width: none;
max-width: none; /* Hapus batasan lebar yang bikin kecil kemarin */
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 Kolom */
grid-template-rows: repeat(5, 1fr); /* 5 Baris */
/* Grid 4 Kolom x 5 Baris */
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 10px;
padding: 10px;
gap: 10px; /* Jarak antar kartu sedikit dilonggarkan */
padding: 10px; /* Jarak dari pinggir layar */
box-sizing: border-box;
}
@ -58,6 +60,7 @@ body {
height: 100%;
perspective: 1000px;
cursor: pointer;
/* PENTING: min-height 0 supaya kartu mau mengecil/memipih menyesuaikan grid */
min-height: 0;
min-width: 0;
}
@ -68,10 +71,9 @@ body {
position: relative;
transform-style: preserve-3d;
transition: transform 0.4s;
border-radius: 12px;
border-radius: 10px;
}
/* Settingan Umum Depan & Belakang */
.front, .back {
position: absolute;
width: 100%;
@ -80,45 +82,38 @@ body {
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
/* Border putih transparan biar cantik */
border: 2px solid rgba(255,255,255,0.5);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
border-radius: 10px;
border: 2px solid rgba(255,255,255,0.6);
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
/* --- BAGIAN DEPAN (Tanda Tanya) --- */
.front {
background: linear-gradient(135deg, #7a28ff 20%, #eb2bbf 80%);
color: #ff6a4d;
/* Font ? dibuat besar tapi responsif */
font-size: 5vh;
font-weight: 800;
}
/* --- BAGIAN BELAKANG (Gambar) --- */
.back {
/* INI PERUBAHANNYA: Background dibuat gradient juga, bukan putih lagi */
background: linear-gradient(135deg, #7a28ff 20%, #eb2bbf 80%);
background: white;
transform: rotateY(180deg);
}
/* Gambar di dalam kartu */
/* Agar gambar di dalam kartu tetap proporsional (tidak gepeng) */
.back img {
width: 70%;
height: 70%;
object-fit: contain;
filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3)); /* Efek bayangan pada buah */
}
/* Efek Balik */
.card.flipped .inner { transform: rotateY(180deg); }
/* Efek Cocok (Matched) - Bersinar Hijau */
.card.matched .front, .card.matched .back {
border-color: #7affd6;
box-shadow: 0 0 15px #7affd6, inset 0 0 10px rgba(122, 255, 214, 0.5);
box-shadow: 0 0 15px #7affd6;
}
/* --- LAINNYA --- */
/* --- ELEMENTS LAINNYA --- */
#countdown-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.85); display: none;