From bd0d137ea12cc9ab975f45fd843a06d4f5063f2d Mon Sep 17 00:00:00 2001 From: Nathan Date: Mon, 8 Dec 2025 22:13:00 +0700 Subject: [PATCH 01/18] combining home --- home.html | 162 +++++++++++++++++++++++++++++++++++++++++++++++++- home.js | 8 --- homestyle.css | 148 --------------------------------------------- 3 files changed, 160 insertions(+), 158 deletions(-) delete mode 100644 home.js delete mode 100644 homestyle.css diff --git a/home.html b/home.html index 0cc82c2..b654c07 100644 --- a/home.html +++ b/home.html @@ -4,7 +4,155 @@ Login Memory Cards - + @@ -35,5 +183,15 @@ - + \ No newline at end of file diff --git a/home.js b/home.js deleted file mode 100644 index 485fe5c..0000000 --- a/home.js +++ /dev/null @@ -1,8 +0,0 @@ -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 deleted file mode 100644 index 577e5bc..0000000 --- a/homestyle.css +++ /dev/null @@ -1,148 +0,0 @@ -/* === 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; -} From 8b6c95713b000e7149162bcc18a089f8106636f7 Mon Sep 17 00:00:00 2001 From: Nathan Date: Mon, 8 Dec 2025 22:15:50 +0700 Subject: [PATCH 02/18] combining login, separating php for sql connection --- login.css | 256 ------------------------------------- login.html | 360 ++++++++++++++++++++++++++++++++++++++++++++++++++++- login.js | 95 -------------- 3 files changed, 357 insertions(+), 354 deletions(-) delete mode 100644 login.css delete mode 100644 login.js diff --git a/login.css b/login.css deleted file mode 100644 index 01c44d2..0000000 --- a/login.css +++ /dev/null @@ -1,256 +0,0 @@ -body { - margin: 0; - font-family: Arial, sans-serif; - background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd); - min-height: 100vh; - overflow-y: auto; - overflow-x: hidden; - display: flex; - justify-content: center; - align-items: center; -} - -.container, .login-card { - background: rgba(255,255,255,0.7); - backdrop-filter: blur(10px); - padding: 40px; - border-radius: 25px; - width: 350px; - z-index: 10; - box-shadow: 0 10px 28px rgba(0,0,0,0.2); - position: relative; -} - -.icon-wrapper { - display: flex; - justify-content: center; - margin-bottom: 20px; - position: relative; -} - -.icon-bg { - width: 90px; height: 90px; - background: linear-gradient(45deg, purple, hotpink); - border-radius: 50%; - filter: blur(12px); - position: absolute; - animation: glow 3s infinite alternate; -} - -.icon { - width: 70px; height: 70px; - border-radius: 50%; - background: linear-gradient(45deg, purple, hotpink); - display: flex; - justify-content: center; - align-items: center; -} - -.title { - text-align: center; - font-size: 22px; - margin-bottom: 10px; - background: linear-gradient(45deg, purple, hotpink); - -webkit-background-clip: text; - background-clip: text; - color: transparent; -} - -.subtitle { - text-align: center; - color: gray; - margin-bottom: 20px; - animation:appear 3s ease-out; -} - -label { - font-size: 14px; - color: #444; -} - -input { - width: 100%; - padding: 12px; - border-radius: 12px; - border: 2px solid #ccc; - background: #fafafa; - margin-bottom: 15px; -} - - -input:focus { - outline: none; - border-color: purple; -} - -#errorBox { - color: red; - background: #ffe5e5; - padding: 10px; - border-radius: 10px; - margin-bottom: 10px; - display: none; -} - -.btn { - width: 100%; - padding: 14px; - background: linear-gradient(45deg, purple, hotpink); - color: white; - border-radius: 15px; - border: none; - cursor: pointer; - font-size: 16px; - transition: 0.2s; -} - -.btn:hover { - transform: scale(1.02); - box-shadow: 0 4px 15px rgba(0,0,0,0.3); -} - -.btn-login { - width: 100%; - padding: 14px; - background: linear-gradient(45deg, purple, hotpink); - color: white; - border-radius: 15px; - border: none; - cursor: pointer; - font-size: 16px; - transition: 0.25s ease; -} - -.btn-login:hover { - transform: scale(1.03); - box-shadow: 0 4px 15px rgba(0,0,0,0.25); -} - -.login-container { - max-height: none; - height: auto; - overflow: visible; /* Penting */ - padding-bottom: 40px; /* Biar bagian bawah tidak kepotong */ -} - -.login-link { - text-align: center; - margin-top: 15px; -} - -.login-link a { - color: purple; - text-decoration: underline; -} - -.glitter { - position: absolute; - width: 4px; - height: 4px; - background: purple; - border-radius: 50%; - opacity: 0; - animation: glitter-burst 2s infinite ease-out; - pointer-events: none; -} - -/* Tombol Toggle Demo */ -.demo-toggle { - margin-top: 10px; - width: 100%; - padding: 10px; - border: none; - border-radius: 12px; - background: rgba(255,255,255,0.6); - cursor: pointer; - font-size: 15px; - transition: 0.3s; -} - -.demo-section { - margin-top: 20px; - padding-bottom: 20px; - overflow: visible; -} - -.demo-toggle:hover { - background: rgba(255,255,255,0.85); -} - -.demo-box { - overflow: hidden; - max-height: 0; - opacity: 0; - transition: max-height 0.5s ease, opacity 0.4s ease; - background: rgba(255, 255, 255, 0.6); - padding: 15px; - border-radius: 12px; - line-height: 1.6; -} - -.demo-box.show { - max-height: 1000px; - opacity: 1; -} - -.hidden { - display: none !important; -} - - - -@keyframes glitter-burst { - 0% { - transform: scale(0.4) translate(0,0); - opacity: 0.9; - } - 50% { - opacity: 1; - } - 100% { - transform: scale(1) translate(var(--x), var(--y)); - opacity: 0; - } -} -@keyframes glow { - 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 691fcfb..96b971c 100644 --- a/login.html +++ b/login.html @@ -4,11 +4,268 @@ Login - + + + -
@@ -55,6 +312,103 @@ Daftar Sekarang

- + \ No newline at end of file diff --git a/login.js b/login.js deleted file mode 100644 index e41d77a..0000000 --- a/login.js +++ /dev/null @@ -1,95 +0,0 @@ -/*LOGIN VALIDATION*/ -document.getElementById("loginForm").addEventListener("submit", function(e) { - e.preventDefault(); - - const username = document.getElementById("username").value.trim(); - const password = document.getElementById("password").value.trim(); - const errorBox = document.getElementById("errorBox"); - - errorBox.style.display = "none"; - errorBox.innerText = ""; - - if (!username || !password) { - showError("Username dan password harus diisi"); - return; - } - - if (password.length < 6) { - showError("Password minimal 6 karakter"); - return; - } - - const usersData = localStorage.getItem("users"); - const users = usersData ? JSON.parse(usersData) : []; - - const user = users.find(u => u.username === username); - - if (!user) { - showError("Username tidak ditemukan"); - return; - } - - if (user.password !== password) { - showError("Password salah"); - return; - } - - // Login sukses - localStorage.setItem("loggedInUser", JSON.stringify(user)); - window.location.href = "mainboard.html"; -}); - -function showError(msg) { - const errorBox = document.getElementById("errorBox"); - errorBox.innerText = msg; - errorBox.style.display = "block"; -} - -function toggleDemo() { - const box = document.getElementById("demoBox"); - const btn = document.querySelector(".demo-toggle"); - - box.classList.toggle("show"); - - // Ubah teks tombol - if (box.classList.contains("show")) { - btn.textContent = "Sembunyikan Demo Akun ▲"; - } else { - btn.textContent = "Lihat Demo Akun ▼"; - } -} - - -/* GLITTER EFFECT*/ - -document.addEventListener("DOMContentLoaded", function () { - const card = document.querySelector(".login-card"); - - if (!card) return; - - // Tambah glitter 20x - for (let i = 0; i < 20; i++) { - const g = document.createElement("div"); - g.className = "glitter"; - - // Random posisi ledakan glitter - g.style.setProperty("--x", (Math.random() * 200 - 100) + "px"); - g.style.setProperty("--y", (Math.random() * 200 - 100) + "px"); - - g.style.left = (Math.random() * 100) + "%"; - g.style.top = (Math.random() * 100) + "%"; - - g.style.animationDelay = (Math.random() * 2) + "s"; - - 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); From 988fc8be0f97a4afcd528a1b1aadfd44191197e0 Mon Sep 17 00:00:00 2001 From: Nathan Date: Mon, 8 Dec 2025 22:19:13 +0700 Subject: [PATCH 03/18] combining mainboard, preparing for sql integration --- mainboard.css | 205 ------------------------------------------- mainboard.html | 230 ++++++++++++++++++++++++++++++++++++++++++++++++- mainboard.js | 15 ---- 3 files changed, 228 insertions(+), 222 deletions(-) delete mode 100644 mainboard.css delete mode 100644 mainboard.js diff --git a/mainboard.css b/mainboard.css deleted file mode 100644 index c7c7d86..0000000 --- a/mainboard.css +++ /dev/null @@ -1,205 +0,0 @@ -/* ================================ -BODY & BACKGROUND STYLES -================================== */ - -body { - margin: 0; - font-family: Poppins, Arial, sans-serif; - background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd); - min-height: 100vh; - overflow-x: hidden; - overflow-y: auto; - display: flex; - justify-content: center; - padding: 50px 0; - position: relative; -} - - -/* Glow Background Floating */ -.bg-circle { - position: absolute; - border-radius: 50%; - filter: blur(70px); - opacity: 0.7; - animation: float 6s infinite ease-in-out; -} - -.circle-one { top: 10%; left: 5%; width: 250px; height: 250px; background: rgba(255,255,255,0.25); } -.circle-two { bottom: 15%; right: 8%; width: 300px; height: 300px; background: rgba(255,192,203,0.35); animation-delay: 1s; } -.circle-three { top: 45%; left: 60%; width: 260px; height: 260px; background: rgba(180,120,255,0.35); animation-delay: 2s; } - -@keyframes float { - 0%,100% { transform: translateY(0); } - 50% { transform: translateY(-25px); } -} - -/* ================================ - CONTAINER CARD -================================== */ - -.container { - width: 750px; - background: rgba(255,255,255,0.7); - backdrop-filter: blur(15px); - padding: 45px; - border-radius: 28px; - box-shadow: 0 15px 35px rgba(0,0,0,0.2); - z-index: 10; - animation: fadeIn 0.6s ease-out; -} - -@keyframes fadeIn { - from { opacity: 0; transform: translateY(20px); } - to { opacity: 1; transform: translateY(0); } -} - -/* ================================ - HEADER PROFILE -================================== */ - -.header { - background: rgba(255,255,255,0.65); - backdrop-filter: blur(15px); - padding: 22px; - border-radius: 20px; - display: flex; - justify-content: space-between; - align-items: center; - box-shadow: 0 10px 30px rgba(0,0,0,0.08); - margin-bottom: 35px; -} - -.user-info { - display: flex; - align-items: center; - gap: 15px; -} - -.user-icon { - width: 60px; - height: 60px; - border-radius: 50%; - background: linear-gradient(135deg, purple, hotpink); - display: flex; - align-items: center; - justify-content: center; - color: white; - font-size: 25px; - font-weight: bold; - box-shadow: 0 5px 18px rgba(0,0,0,0.22); -} - -/* ================================ - 🎀 BUTTONS -================================== */ - -.btn { - padding: 12px 25px; - border: none; - border-radius: 14px; - cursor: pointer; - font-size: 16px; - transition: .25s; -} - -.gold { - background: linear-gradient(to right, gold, orange); - color: white; -} -.gold:hover { - transform: scale(1.07); - box-shadow: 0 4px 12px rgba(255,165,0,0.4); -} - -.gray { - background: #444; - color: white; -} -.gray:hover { - background: #222; - transform: scale(1.05); -} - -/* ================================ - 📝 TITLE -================================== */ - -.title { - text-align: center; - margin: 40px 0; -} - -.title h1 { - font-size: 46px; - background: linear-gradient(purple, hotpink); - background-clip: text; /* Standar */ - -webkit-background-clip: text; - color: transparent; - font-weight: bold; - text-shadow: 0 0 10px rgba(255,255,255,0.2); -} - -/* ================================ - 🎮 STAGE SELECTION GRID -================================== */ - -.stage-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 30px; -} - -.stage-btn { - background: rgba(255,255,255,0.65); - backdrop-filter: blur(10px); - padding: 35px; - border-radius: 25px; - text-align: center; - cursor: pointer; - transition: .25s ease; - box-shadow: 0 12px 25px rgba(0,0,0,0.12); -} - -.stage-btn:hover { - transform: scale(1.08); - background: rgba(255,255,255,0.88); - box-shadow: 0 10px 20px rgba(0,0,0,0.25); -} - -.icon { - font-size: 48px; - 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 71ef4f0..51ab506 100644 --- a/mainboard.html +++ b/mainboard.html @@ -4,7 +4,216 @@ Memory Flip Card Game - + + + @@ -65,6 +274,23 @@
- + diff --git a/mainboard.js b/mainboard.js deleted file mode 100644 index 83dfd75..0000000 --- a/mainboard.js +++ /dev/null @@ -1,15 +0,0 @@ -function selectStage(stage) { - if (stage === "easy") { - window.location.href = "gameboard-easy.html"; - } else if (stage === "medium") { - window.location.href = "gameboard-medium.html"; - } else if (stage === "hard") { - window.location.href = "gameboard-hard.html"; - } -} - -document.getElementById("leaderboardBtn").addEventListener("click", () => {window.location.href = "Leaderboard.html"}); - -document.getElementById("logoutBtn").addEventListener("click", () => { - alert("Logout berhasil!"); -}); From 0a3103197e468a8486f53a57bdbc813ca3e576b3 Mon Sep 17 00:00:00 2001 From: Nathan Date: Mon, 8 Dec 2025 22:21:20 +0700 Subject: [PATCH 04/18] combining register, preparing sql --- register.css | 200 ------------------------------------ register.html | 273 +++++++++++++++++++++++++++++++++++++++++++++++++- register.js | 64 ------------ 3 files changed, 271 insertions(+), 266 deletions(-) delete mode 100644 register.css delete mode 100644 register.js diff --git a/register.css b/register.css deleted file mode 100644 index d102af1..0000000 --- a/register.css +++ /dev/null @@ -1,200 +0,0 @@ -body { - margin: 0; - font-family: Arial, sans-serif; - background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);; -} - -.page { - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - position: relative; -} - -/* Background Animasi */ -.bg-1, .bg-2, .bg-3 { - position: absolute; - border-radius: 50%; - filter: blur(70px); - opacity: 0.4; -} - -.bg-1 { - width: 300px; height: 300px; - background: rgba(255,255,255,0.3); - top: 10%; left: 10%; - animation: glow 4s infinite alternate; -} - -.bg-2 { - width: 400px; height: 400px; - background: rgba(255,120,200,0.3); - bottom: 10%; right: 10%; - animation: float 6s infinite; -} - -.bg-3 { - width: 250px; height: 250px; - background: rgba(200,100,255,0.3); - top: 50%; left: 50%; - transform: translate(-50%, -50%); - animation: glow 5s infinite alternate; -} - -@keyframes glow { - 0% { opacity: 0.2; } - 100% { opacity: 0.55; } -} - -@keyframes float { - 0% { transform: translateY(0); } - 50% { transform: translateY(-20px); } - 100% { transform: translateY(0); } -} - -/* Container */ -.container { - background: rgba(255,255,255,0.7); - backdrop-filter: blur(10px); - padding: 40px; - border-radius: 25px; - width: 350px; - z-index: 10; - box-shadow: 0 10px 28px rgba(0,0,0,0.2); -} - -/* Icon */ -.icon-wrapper { - display: flex; - justify-content: center; - margin-bottom: 20px; -} - -.icon-bg { - width: 90px; height: 90px; - background: linear-gradient(45deg, purple, hotpink); - border-radius: 50%; - filter: blur(12px); - position: absolute; - animation: glow 3s infinite alternate; -} - -.icon { - background: linear-gradient(45deg, purple, hotpink); - border-radius: 50%; - width: 70px; height: 70px; - display: flex; - justify-content: center; - align-items: center; - position: relative; -} - -/* Text */ -.title { - text-align: center; - font-size: 22px; - margin-bottom: 10px; - color: white; - padding: 10px; - border-radius: 40px; - background: linear-gradient(45deg, purple, hotpink);; - font-family: 'Segoe UI', Tahoma, Verdana, sans-serif; - text-shadow: - 0 0 10px #000000, -} - - -.subtitle { - text-align: center; - color: gray; - margin-bottom: 20px; -} - -/* Form */ -label { - font-size: 14px; - color: #444; -} - -input { - width: 100%; - padding: 12px; - border-radius: 12px; - border: 2px solid #ccc; - background: #fafafa; - margin-bottom: 15px; -} - -input:focus { - outline: none; - border-color: purple; -} - -#errorBox { - color: red; - background: #ffe5e5; - padding: 10px; - border-radius: 10px; - margin-bottom: 10px; - display: none; -} - -/* Button */ -.btn { - width: 100%; - background: linear-gradient(45deg, purple, hotpink); - color: white; - padding: 14px; - border: none; - border-radius: 15px; - font-size: 16px; - cursor: pointer; - transition: 0.2s; -} - -.btn:hover { - transform: scale(1.02); - box-shadow: 0 4px 15px rgba(0,0,0,0.3); -} - -.login-link { - text-align: center; - margin-top: 15px; -} - -.login-link a { - color: purple; - text-decoration: underline; -} - -.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/register.html b/register.html index 0d277a2..d8305a0 100644 --- a/register.html +++ b/register.html @@ -4,7 +4,210 @@ Register Akun - + + + @@ -51,6 +254,72 @@ - + diff --git a/register.js b/register.js deleted file mode 100644 index 56f5a48..0000000 --- a/register.js +++ /dev/null @@ -1,64 +0,0 @@ -document.getElementById("registerForm").addEventListener("submit", function (e) { - e.preventDefault(); - - let username = document.getElementById("username").value.trim(); - let email = document.getElementById("email").value.trim(); - let password = document.getElementById("password").value.trim(); - let confirmPassword = document.getElementById("confirmPassword").value.trim(); - let errorBox = document.getElementById("errorBox"); - - errorBox.style.display = "none"; - - // Validasi - if (!username || !email || !password || !confirmPassword) { - showError("Semua field harus diisi"); - return; - } - - if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { - showError("Format email tidak valid"); - return; - } - - if (password.length < 6) { - showError("Password minimal 6 karakter"); - return; - } - - if (password !== confirmPassword) { - showError("Password dan konfirmasi password tidak cocok"); - return; - } - - let users = JSON.parse(localStorage.getItem("users") || "[]"); - - if (users.some(u => u.username === username)) { - showError("Username sudah digunakan"); - return; - } - - if (users.some(u => u.email === email)) { - showError("Email sudah digunakan"); - return; - } - - // Simpan user baru - users.push({ - id: Date.now().toString(), - username, - email, - password, - role: "player" - }); - - localStorage.setItem("users", JSON.stringify(users)); - - alert("Registrasi berhasil! Silakan login."); - window.location.href = "login.html"; -}); - -function showError(msg) { - let box = document.getElementById("errorBox"); - box.innerText = msg; - box.style.display = "block"; -} From 17de4f3db8b3010dbb23927bb919af6a72626aa3 Mon Sep 17 00:00:00 2001 From: Nathan Date: Mon, 8 Dec 2025 22:21:20 +0700 Subject: [PATCH 05/18] combining register, preparing sql --- register.css | 200 ------------------------------------ register.html | 273 +++++++++++++++++++++++++++++++++++++++++++++++++- register.js | 64 ------------ 3 files changed, 271 insertions(+), 266 deletions(-) delete mode 100644 register.css delete mode 100644 register.js diff --git a/register.css b/register.css deleted file mode 100644 index d102af1..0000000 --- a/register.css +++ /dev/null @@ -1,200 +0,0 @@ -body { - margin: 0; - font-family: Arial, sans-serif; - background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);; -} - -.page { - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - position: relative; -} - -/* Background Animasi */ -.bg-1, .bg-2, .bg-3 { - position: absolute; - border-radius: 50%; - filter: blur(70px); - opacity: 0.4; -} - -.bg-1 { - width: 300px; height: 300px; - background: rgba(255,255,255,0.3); - top: 10%; left: 10%; - animation: glow 4s infinite alternate; -} - -.bg-2 { - width: 400px; height: 400px; - background: rgba(255,120,200,0.3); - bottom: 10%; right: 10%; - animation: float 6s infinite; -} - -.bg-3 { - width: 250px; height: 250px; - background: rgba(200,100,255,0.3); - top: 50%; left: 50%; - transform: translate(-50%, -50%); - animation: glow 5s infinite alternate; -} - -@keyframes glow { - 0% { opacity: 0.2; } - 100% { opacity: 0.55; } -} - -@keyframes float { - 0% { transform: translateY(0); } - 50% { transform: translateY(-20px); } - 100% { transform: translateY(0); } -} - -/* Container */ -.container { - background: rgba(255,255,255,0.7); - backdrop-filter: blur(10px); - padding: 40px; - border-radius: 25px; - width: 350px; - z-index: 10; - box-shadow: 0 10px 28px rgba(0,0,0,0.2); -} - -/* Icon */ -.icon-wrapper { - display: flex; - justify-content: center; - margin-bottom: 20px; -} - -.icon-bg { - width: 90px; height: 90px; - background: linear-gradient(45deg, purple, hotpink); - border-radius: 50%; - filter: blur(12px); - position: absolute; - animation: glow 3s infinite alternate; -} - -.icon { - background: linear-gradient(45deg, purple, hotpink); - border-radius: 50%; - width: 70px; height: 70px; - display: flex; - justify-content: center; - align-items: center; - position: relative; -} - -/* Text */ -.title { - text-align: center; - font-size: 22px; - margin-bottom: 10px; - color: white; - padding: 10px; - border-radius: 40px; - background: linear-gradient(45deg, purple, hotpink);; - font-family: 'Segoe UI', Tahoma, Verdana, sans-serif; - text-shadow: - 0 0 10px #000000, -} - - -.subtitle { - text-align: center; - color: gray; - margin-bottom: 20px; -} - -/* Form */ -label { - font-size: 14px; - color: #444; -} - -input { - width: 100%; - padding: 12px; - border-radius: 12px; - border: 2px solid #ccc; - background: #fafafa; - margin-bottom: 15px; -} - -input:focus { - outline: none; - border-color: purple; -} - -#errorBox { - color: red; - background: #ffe5e5; - padding: 10px; - border-radius: 10px; - margin-bottom: 10px; - display: none; -} - -/* Button */ -.btn { - width: 100%; - background: linear-gradient(45deg, purple, hotpink); - color: white; - padding: 14px; - border: none; - border-radius: 15px; - font-size: 16px; - cursor: pointer; - transition: 0.2s; -} - -.btn:hover { - transform: scale(1.02); - box-shadow: 0 4px 15px rgba(0,0,0,0.3); -} - -.login-link { - text-align: center; - margin-top: 15px; -} - -.login-link a { - color: purple; - text-decoration: underline; -} - -.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/register.html b/register.html index 0d277a2..d8305a0 100644 --- a/register.html +++ b/register.html @@ -4,7 +4,210 @@ Register Akun - + + + @@ -51,6 +254,72 @@ - + diff --git a/register.js b/register.js deleted file mode 100644 index 56f5a48..0000000 --- a/register.js +++ /dev/null @@ -1,64 +0,0 @@ -document.getElementById("registerForm").addEventListener("submit", function (e) { - e.preventDefault(); - - let username = document.getElementById("username").value.trim(); - let email = document.getElementById("email").value.trim(); - let password = document.getElementById("password").value.trim(); - let confirmPassword = document.getElementById("confirmPassword").value.trim(); - let errorBox = document.getElementById("errorBox"); - - errorBox.style.display = "none"; - - // Validasi - if (!username || !email || !password || !confirmPassword) { - showError("Semua field harus diisi"); - return; - } - - if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { - showError("Format email tidak valid"); - return; - } - - if (password.length < 6) { - showError("Password minimal 6 karakter"); - return; - } - - if (password !== confirmPassword) { - showError("Password dan konfirmasi password tidak cocok"); - return; - } - - let users = JSON.parse(localStorage.getItem("users") || "[]"); - - if (users.some(u => u.username === username)) { - showError("Username sudah digunakan"); - return; - } - - if (users.some(u => u.email === email)) { - showError("Email sudah digunakan"); - return; - } - - // Simpan user baru - users.push({ - id: Date.now().toString(), - username, - email, - password, - role: "player" - }); - - localStorage.setItem("users", JSON.stringify(users)); - - alert("Registrasi berhasil! Silakan login."); - window.location.href = "login.html"; -}); - -function showError(msg) { - let box = document.getElementById("errorBox"); - box.innerText = msg; - box.style.display = "block"; -} From 638a81a17f7650479a10bf0281af7a3b479d2c6a Mon Sep 17 00:00:00 2001 From: Nathan Date: Tue, 9 Dec 2025 01:36:58 +0700 Subject: [PATCH 06/18] database created, commencing integration --- Leaderboard.html | 15 +++++++++------ koneksi.php | 12 ++++++++++++ login.html | 4 ++-- 3 files changed, 23 insertions(+), 8 deletions(-) create mode 100644 koneksi.php diff --git a/Leaderboard.html b/Leaderboard.html index fb1b76f..494faa5 100644 --- a/Leaderboard.html +++ b/Leaderboard.html @@ -137,25 +137,28 @@ thead {
Filter: - - - + + +
🎮 -

Total Game Dimainkan

+

Total Game Dimainkan

+ 0

👑 -

Top Player

+

Top Player

+ 0

⭐ -

Highest Score

+

Skor Tertinggi

+ 0

diff --git a/koneksi.php b/koneksi.php new file mode 100644 index 0000000..75c862e --- /dev/null +++ b/koneksi.php @@ -0,0 +1,12 @@ + diff --git a/login.html b/login.html index 96b971c..2d8fe22 100644 --- a/login.html +++ b/login.html @@ -5,8 +5,8 @@ Login - + + + +
+
+
+
+
+ + + + + + + + + + + + +