diff --git a/home.html b/home.html new file mode 100644 index 0000000..0cc82c2 --- /dev/null +++ b/home.html @@ -0,0 +1,39 @@ + + + + + + Login Memory Cards + + + + + + + + + + + + + + + + + +
+

MEMORY
CARDS

+ + + +
+
+ OR +
+
+ + +
+ + + \ 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..3f76c58 --- /dev/null +++ b/homestyle.css @@ -0,0 +1,147 @@ +/* === 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(#ffe08a, #f5c654); + box-shadow: 0 6px 0 #c99a00; + transition: transform .2s ease-in-out; +} + +/* === 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..9bfaca7 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,28 @@ 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; } + +@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/login.html b/login.html index 503efcf..1c64573 100644 --- a/login.html +++ b/login.html @@ -8,7 +8,6 @@ -
@@ -45,24 +44,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..54a4059 100644 --- a/login.js +++ b/login.js @@ -84,3 +84,4 @@ document.addEventListener("DOMContentLoaded", function () { card.appendChild(g); } }); +