diff --git a/asset/alpukat.jpg b/asset/alpukat.jpg deleted file mode 100644 index b66130c..0000000 Binary files a/asset/alpukat.jpg and /dev/null differ diff --git a/asset/anggur.jpg b/asset/anggur.jpg deleted file mode 100644 index 87ac741..0000000 Binary files a/asset/anggur.jpg and /dev/null differ diff --git a/asset/apel.jpg b/asset/apel.jpg deleted file mode 100644 index 3e23f4e..0000000 Binary files a/asset/apel.jpg and /dev/null differ diff --git a/asset/buah naga.jpg b/asset/buah naga.jpg deleted file mode 100644 index 17ae433..0000000 Binary files a/asset/buah naga.jpg and /dev/null differ diff --git a/asset/jambu.jpg b/asset/jambu.jpg deleted file mode 100644 index f225791..0000000 Binary files a/asset/jambu.jpg and /dev/null differ diff --git a/asset/jeruk.jpg b/asset/jeruk.jpg deleted file mode 100644 index f98d7db..0000000 Binary files a/asset/jeruk.jpg and /dev/null differ diff --git a/asset/lemon.jpg b/asset/lemon.jpg deleted file mode 100644 index 0da36ff..0000000 Binary files a/asset/lemon.jpg and /dev/null differ diff --git a/asset/nanas.jpg b/asset/nanas.jpg deleted file mode 100644 index 9332e56..0000000 Binary files a/asset/nanas.jpg and /dev/null differ diff --git a/asset/pisang.jpg b/asset/pisang.jpg deleted file mode 100644 index 775cede..0000000 Binary files a/asset/pisang.jpg and /dev/null differ diff --git a/asset/semangka.jpg b/asset/semangka.jpg deleted file mode 100644 index 6c1c834..0000000 Binary files a/asset/semangka.jpg and /dev/null differ diff --git a/gameboard-easy.html b/gameboard-easy.html index d3448cc..44cb748 100644 --- a/gameboard-easy.html +++ b/gameboard-easy.html @@ -9,7 +9,8 @@ html, body { margin: 0; height: 100%; - overflow: hidden; + overflow-x: hidden; + overflow-y: auto; font-family: "Poppins", sans-serif; } @@ -73,6 +74,7 @@ body { width: 100%; height: 100%; perspective: 1000px; + max-height: 160px; cursor: pointer; } @@ -198,14 +200,50 @@ body { font-weight: 600; } +.gameboard { + flex: 1; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + padding: 25px 40px; + box-sizing: border-box; + place-items: center; +} + +.card { + width: 100%; + aspect-ratio: 4 / 3; + perspective: 1000px; + cursor: pointer; +} + + + .play-again { background: #b700ff; color: white; } .leaderboard { background: gold; } -.back-menu { background: #444; color: white; } /* ← DITAMBAHKAN */ +.back-menu { background: #444; color: white; } @keyframes fadeIn { from { opacity:0; transform: scale(0.8); } to { opacity:1; transform: scale(1); } } + +@media (max-width: 700px) { + .gameboard { + grid-template-columns: repeat(3, 1fr); + padding: 12px; + gap: 10px; + } +} + +@media (max-width: 700px) { + .gameboard { + grid-template-columns: repeat(2, 1fr); + padding: 12px; + gap: 10px; + } +} + @@ -244,12 +282,12 @@ body { + + + diff --git a/gameboard-medium.html b/gameboard-medium.html index a8e5fee..7f67bf5 100644 --- a/gameboard-medium.html +++ b/gameboard-medium.html @@ -56,7 +56,6 @@ body { box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 0 6px rgba(255,255,255,0.6); } -/* === 4×4 GRID === */ .gameboard { flex: 1; display: grid; @@ -67,7 +66,6 @@ body { box-sizing: border-box; } -/* === CARDS === */ .card { width: 100%; height: 100%; @@ -84,7 +82,6 @@ body { border-radius: 10px; } -/* Face */ .front, .back { position: absolute; width: 100%; @@ -116,7 +113,6 @@ body { filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45)); } -/* Hover & Flip */ .card:not(.flipped):hover .front { transform: scale(1.05); transition: 0.25s; @@ -124,14 +120,12 @@ body { .card.flipped .inner { transform: rotateY(180deg); } -/* Match Shine */ .card.matched .front, .card.matched .back { border-color: #7affd6; box-shadow: 0 0 15px #7affd6, 0 0 30px rgba(122,255,214,0.8); } -/* === COMBO POPUP === */ .combo-popup { position: absolute; padding: 12px 20px; @@ -200,10 +194,36 @@ body { font-weight: 600; } +.gameboard { + flex: 1; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + padding: 25px 40px; + box-sizing: border-box; + place-items: center; +} + + .play-again { background: #b700ff; color: white; } .leaderboard { background: gold; } .back-menu { background: #444; color: white; } +@media (max-width: 900px) { + .gameboard { + grid-template-columns: repeat(3, 1fr); + padding: 20px; + gap: 12px; + } +} + +@media (max-width: 600px) { + .gameboard { + grid-template-columns: repeat(2, 1fr); + padding: 14px; + gap: 10px; + } +} @@ -222,7 +242,6 @@ body {
🎉 Selamat!

Anda berhasil menyelesaikan permainan!

-
Skor Base: 0
Time Bonus: 0
Move Bonus: 0
@@ -241,16 +260,16 @@ body {
+ \ No newline at end of file diff --git a/home.js b/home.js new file mode 100644 index 0000000..485fe5c --- /dev/null +++ b/home.js @@ -0,0 +1,8 @@ +function goToLoginCard() { + document.querySelector(".memory").classList.add("hidden"); + document.querySelector(".login-wrapper").classList.remove("hidden"); +} +function goToLoginCard() { + window.location.href = "login.html"; // atau page tujuan lain +} + diff --git a/homestyle.css b/homestyle.css new file mode 100644 index 0000000..577e5bc --- /dev/null +++ b/homestyle.css @@ -0,0 +1,148 @@ +/* === BACKGROUND === */ +body { + margin: 0; + font-family: Poppins, Arial, sans-serif; + height: 100vh; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + + /* Pink → Ungu Gradient */ + background: linear-gradient(135deg, #ff9ed1, #d784ff); +} + +/* === ANIMATED FLOATING FRUITS === */ +.fruit { + position: absolute; + width: 95px; + opacity: 0.85; + animation: float 7s infinite ease-in-out; + pointer-events: none; /* supaya tidak ganggu klik */ + filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12)); +} + +/* Posisi lebih seimbang & tidak menutupi teks */ +.f1 { top: 6%; left: 12%; animation-delay: .3s; } +.f2 { top: 12%; right: 18%; animation-delay: 1.2s; } +.f3 { top: 48%; right: 8%; animation-delay: .7s; } +.f4 { top: 72%; left: 20%; animation-delay: 1.6s; } +.f5 { top: 28%; left: 60%; animation-delay: .5s; } +.f6 { top: 68%; right: 22%; animation-delay: 1s; } +.f7 { top: 40%; left: 10%; animation-delay: .9s; } +.f8 { top: 82%; left: 70%; animation-delay: 1.4s; } +.f9 { top: 18%; right: 46%; animation-delay: .6s; } +.f10 { top: 80%; right: 10%; animation-delay: 1.8s; } + +/* Smooth floating animation */ +@keyframes float { + 0% { transform: translateY(0) rotate(0deg); } + 50% { transform: translateY(-18px) rotate(6deg); } + 100% { transform: translateY(0) rotate(0deg); } +} + +@keyframes drift { + 0% { transform: translateX(0); } + 50% { transform: translateX(22px); } + 100% { transform: translateX(0); } +} + +.fruit { + width: clamp(70px, 7vw, 105px); +} + +/* === CENTRAL CONTAINER === */ +.container { + text-align: center; +} + +/* === TITLE WITH GLOW ANIMATION === */ +.title { + font-size: 70px; + font-weight: 900; + color: #ffffff; + line-height: 0.9; + text-shadow: + 0 0 10px #ab2cff, + 0 0 25px #ff54de, + 0 0 35px #a639ff; + + animation: glow 2s infinite alternate; +} + +@keyframes glow { + 0% { + text-shadow: + 0 0 10px #ab2cff, + 0 0 25px #ff54de, + 0 0 40px #a639ff; + } + 100% { + text-shadow: + 0 0 20px #ffb3f9, + 0 0 45px #ff7df3, + 0 0 60px #bb5bff; + } +} + +/* === BUTTONS === */ +.btn { + width: 260px; + padding: 18px 0; + font-size: 22px; + font-weight: bold; + border: none; + border-radius: 40px; + cursor: pointer; + background: linear-gradient(45deg, purple, hotpink); + box-shadow: 0 6px 0 rgb(90, 1, 90); + transition: transform .2s ease-in-out; + color: white; +} + +/* === BUTTON SHAKE ON HOVER === */ +.btn:hover { + animation: shake 0.4s ease-in-out; +} + +@keyframes shake { + 0% { transform: translateX(0); } + 25% { transform: translateX(-3px); } + 50% { transform: translateX(3px); } + 75% { transform: translateX(-2px); } + 100% { transform: translateX(0); } +} + + +/* === OR LINE === */ +.or-line { + display: flex; + align-items: center; + justify-content: center; + margin: 25px 0; +} + +.line { + width: 80px; + height: 2px; + background: rgba(255,255,255,0.8); +} + +.or-line span { + margin: 0 10px; + font-weight: bold; +} + +/* === HOW TO PLAY === */ +.how { + margin-top: 5px; + font-size: 22px; + color: #fff; + opacity: 0.9; + padding: 2px 0; + cursor: pointer; + +} + + .hidden { display: none !important; +} diff --git a/images/fruit1.png b/images/fruit1.png new file mode 100644 index 0000000..4b6169e Binary files /dev/null and b/images/fruit1.png differ diff --git a/images/fruit10.png b/images/fruit10.png new file mode 100644 index 0000000..39bf65c Binary files /dev/null and b/images/fruit10.png differ diff --git a/images/fruit2.png b/images/fruit2.png new file mode 100644 index 0000000..4fffb92 Binary files /dev/null and b/images/fruit2.png differ diff --git a/images/fruit3.png b/images/fruit3.png new file mode 100644 index 0000000..2deedef Binary files /dev/null and b/images/fruit3.png differ diff --git a/images/fruit4.png b/images/fruit4.png new file mode 100644 index 0000000..c1d373c Binary files /dev/null and b/images/fruit4.png differ diff --git a/images/fruit5.png b/images/fruit5.png new file mode 100644 index 0000000..e9493d2 Binary files /dev/null and b/images/fruit5.png differ diff --git a/images/fruit6.png b/images/fruit6.png new file mode 100644 index 0000000..6df4e13 Binary files /dev/null and b/images/fruit6.png differ diff --git a/images/fruit7.png b/images/fruit7.png new file mode 100644 index 0000000..5d5a2aa Binary files /dev/null and b/images/fruit7.png differ diff --git a/images/fruit8.png b/images/fruit8.png new file mode 100644 index 0000000..c47aab2 Binary files /dev/null and b/images/fruit8.png differ diff --git a/images/fruit9.png b/images/fruit9.png new file mode 100644 index 0000000..0807ad5 Binary files /dev/null and b/images/fruit9.png differ diff --git a/login.css b/login.css index 171f6e9..01c44d2 100644 --- a/login.css +++ b/login.css @@ -60,6 +60,7 @@ body { text-align: center; color: gray; margin-bottom: 20px; + animation:appear 3s ease-out; } label { @@ -76,6 +77,7 @@ input { margin-bottom: 15px; } + input:focus { outline: none; border-color: purple; @@ -191,6 +193,11 @@ input:focus { opacity: 1; } +.hidden { + display: none !important; +} + + @keyframes glitter-burst { 0% { @@ -209,3 +216,41 @@ input:focus { 0% { opacity: 0.2; } 100% { opacity: 0.55; } } + +.fruit { + position: absolute; + width: 95px; + opacity: .85; + animation: float 6s infinite ease-in-out, drift 15s infinite linear; + pointer-events: none; +} + +.f1 { top: 8%; left: 10%; animation-delay: .3s; } +.f2 { top: 65%; right: 12%; animation-delay: .7s; } +.f3 { top: 22%; right: 55%; animation-delay: 1.1s; } +.f4 { bottom: 15%; left: 28%; animation-delay: .9s; } +.f5 { bottom: 10%; right: 30%; animation-delay: 1.4s; } +.f6 { top: 40%; left: 50%; animation-delay: .5s; } +.f7 { bottom: 30%; left: 15%; animation-delay: 1.2s; } +.f8 { top: 75%; right: 40%; animation-delay: .8s; } +.f9 { top: 50%; left: 80%; animation-delay: 1s; } +.f10 { bottom: 20%; right: 5%; animation-delay: 1.3s; } + +@keyframes float { + 0% { transform: translateY(0) rotate(0deg); } + 50% { transform: translateY(-20px) rotate(6deg); } + 100% { transform: translateY(0) rotate(0deg); } +} + +@keyframes drift { + 0% { transform: translateX(0); } + 50% { transform: translateX(15px); } + 100% { transform: translateX(0); } +} + +.login-card, .container { + transition: transform .4s ease; +} +.login-card:hover, .container:hover { + transform: scale(1.012); +} diff --git a/login.html b/login.html index 503efcf..691fcfb 100644 --- a/login.html +++ b/login.html @@ -8,7 +8,6 @@ -
@@ -17,6 +16,17 @@
+ + + + + + + + + + +
@@ -45,24 +55,6 @@ Daftar Sekarang

- - -
-

🎮 Demo Akun

- -
-

Player:

-

Username: player

-

Password: player123

-
- -
-

Admin:

-

Username: admin

-

Password: admin123

-
-
- \ No newline at end of file diff --git a/login.js b/login.js index f00a5f1..e41d77a 100644 --- a/login.js +++ b/login.js @@ -84,3 +84,12 @@ document.addEventListener("DOMContentLoaded", function () { card.appendChild(g); } }); + +setInterval(() => { + document.querySelectorAll(".glitter").forEach(g => { + g.style.setProperty("--x", (Math.random() * 200 - 100) + "px"); + g.style.setProperty("--y", (Math.random() * 200 - 100) + "px"); + g.style.left = Math.random() * window.innerWidth + "px"; + g.style.top = Math.random() * window.innerHeight + "px"; + }); +}, 900); diff --git a/mainboard.css b/mainboard.css index 6759e35..c7c7d86 100644 --- a/mainboard.css +++ b/mainboard.css @@ -1,5 +1,5 @@ /* ================================ - 🌈 GLOBAL THEME (SAMA DENGAN LOGIN/REGISTER) +BODY & BACKGROUND STYLES ================================== */ body { @@ -15,6 +15,7 @@ body { position: relative; } + /* Glow Background Floating */ .bg-circle { position: absolute; @@ -34,7 +35,7 @@ body { } /* ================================ - 🌟 CONTAINER CARD + CONTAINER CARD ================================== */ .container { @@ -54,7 +55,7 @@ body { } /* ================================ - 👤 HEADER PROFILE + HEADER PROFILE ================================== */ .header { @@ -171,3 +172,34 @@ body { display: block; margin-bottom: 12px; } + +.fruit { + position: absolute; + width: 95px; + opacity: .85; + animation: float 6s infinite ease-in-out, drift 15s infinite linear; + pointer-events: none; +} + +.f1 { top: 8%; left: 10%; animation-delay: .3s; } +.f2 { top: 65%; right: 12%; animation-delay: .7s; } +.f3 { top: 22%; right: 55%; animation-delay: 1.1s; } +.f4 { bottom: 15%; left: 28%; animation-delay: .9s; } +.f5 { bottom: 10%; right: 30%; animation-delay: 1.4s; } +.f6 { top: 40%; left: 50%; animation-delay: .5s; } +.f7 { bottom: 30%; left: 15%; animation-delay: 1.2s; } +.f8 { top: 75%; right: 40%; animation-delay: .8s; } +.f9 { top: 50%; left: 80%; animation-delay: 1s; } +.f10 { bottom: 20%; right: 5%; animation-delay: 1.3s; } + +@keyframes float { + 0% { transform: translateY(0) rotate(0deg); } + 50% { transform: translateY(-20px) rotate(6deg); } + 100% { transform: translateY(0) rotate(0deg); } +} + +@keyframes drift { + 0% { transform: translateX(0); } + 50% { transform: translateX(15px); } + 100% { transform: translateX(0); } +} \ No newline at end of file diff --git a/mainboard.html b/mainboard.html index 9372ce9..cfcc102 100644 --- a/mainboard.html +++ b/mainboard.html @@ -10,6 +10,18 @@
+ + + + + + + + + + + +