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