diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..2ba986f --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/Config.php b/Config.php new file mode 100644 index 0000000..867a243 --- /dev/null +++ b/Config.php @@ -0,0 +1,12 @@ +connect_error) { + die("Koneksi gagal: " . mysqli_connect_error()); +} +?> diff --git a/Leaderboard.html b/Leaderboard.html new file mode 100644 index 0000000..494faa5 --- /dev/null +++ b/Leaderboard.html @@ -0,0 +1,178 @@ + + + + + Leaderboard + + + + + + +
+ + +
+ +

🏆 Leaderboard

+

Top skor dari semua pemain

+ + +
+ Filter: + + + + +
+ +
+
+ 🎮 +

Total Game Dimainkan

+ 0

+
+ +
+ 👑 +

Top Player

+ 0

+
+ +
+ ⭐ +

Skor Tertinggi

+ 0

+
+
+ + + + + diff --git a/auth.php b/auth.php new file mode 100644 index 0000000..40f6f6d --- /dev/null +++ b/auth.php @@ -0,0 +1,97 @@ +alert('Semua data wajib diisi!'); window.location='index.html';"; + exit; + } + + // Cek Format Email (Biar gak ngawur) + if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { + echo ""; + exit; + } + + // Cek Panjang Password (Minimal 6) + if (strlen($password) < 6) { + echo ""; + exit; + } + + // Cek Kesamaan Password + if ($password !== $confirm) { + echo ""; + exit; + } + + // --- 2. CEK DUPLIKAT DI DATABASE --- + $stmt = mysqli_prepare($conn, "SELECT id FROM users WHERE username = ? OR email = ?"); + mysqli_stmt_bind_param($stmt, "ss", $username, $email); + mysqli_stmt_execute($stmt); + mysqli_stmt_store_result($stmt); + + if (mysqli_stmt_num_rows($stmt) > 0) { + echo ""; + exit; + } + mysqli_stmt_close($stmt); + + // --- 3. SIMPAN DATA --- + $hashed_password = password_hash($password, PASSWORD_DEFAULT); + $stmtInsert = mysqli_prepare($conn, "INSERT INTO users (username, email, password) VALUES (?, ?, ?)"); + mysqli_stmt_bind_param($stmtInsert, "sss", $username, $email, $hashed_password); + + if (mysqli_stmt_execute($stmtInsert)) { + echo ""; + } else { + echo "Error: " . mysqli_error($conn); + } + mysqli_stmt_close($stmtInsert); + +} + +// ========================================== +// BAGIAN 2: LOGIKA LOGIN +// ========================================== +else if (isset($_POST['btn-login'])) { + + $username = $_POST['username']; + $password = $_POST['password']; + + $stmt = mysqli_prepare($conn, "SELECT * FROM users WHERE username=?"); + mysqli_stmt_bind_param($stmt, "s", $username); + mysqli_stmt_execute($stmt); + + $result = mysqli_stmt_get_result($stmt); + $row = mysqli_fetch_assoc($result); + + // JIKA GAGAL + if (!$row || !password_verify($password, $row['password'])) { + // Kirim sinyal error ke HTML (Kotak Merah) + header("Location: index.html?error=gagal"); + exit; + } + + // JIKA SUKSES + $_SESSION['username'] = $row['username']; + $_SESSION['login'] = true; + + header("Location: mainboard.html"); + exit; +} +?> \ No newline at end of file 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 891dbd3..0000000 --- a/homestyle.css +++ /dev/null @@ -1,146 +0,0 @@ -/* === BACKGROUND === */ -body { - margin: 0; - font-family: Poppins, Arial, sans-serif; - height: 100vh; - overflow: hidden; - display: flex; - justify-content: center; - align-items: center; - 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/index.html b/index.html new file mode 100644 index 0000000..58a3d15 --- /dev/null +++ b/index.html @@ -0,0 +1,321 @@ + + + + + + Login & Register - Memory Game + + + + + + + + + + + +
+
+
+ +
+

Selamat Datang! ✨

+

Login untuk bermain

+ +
+ + + + + + + + + +

+ Belum punya akun? Daftar Sekarang +

+
+ +
+

Buat Akun Baru ✨

+

Daftar petualangan baru

+ +
+ + + + + + + + + + + + + + +

+ Sudah punya akun? Login Sekarang +

+
+ +
+
+
+ + + + + \ No newline at end of file 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..692d2e6 100644 --- a/login.html +++ b/login.html @@ -1,14 +1,270 @@ - - - Login - + + +Login + + + -
@@ -38,16 +294,16 @@

Login untuk bermain Memory Flip Card Game

-
+ - + - +
- +

@@ -55,6 +311,94 @@ 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); diff --git a/login.php b/login.php index 4832e8c..8b2a96e 100644 --- a/login.php +++ b/login.php @@ -1,45 +1,40 @@ ";//kalo di file yang sama - echo "lastname:".$row['lastname']."
"; - } - else echo "Username/password salah"; -} -?> +if(isset($_POST['btn-login'])){ + $username = $_POST['username']; + $password = $_POST['password']; - - -
- Username:
- Password:
- -
- - \ No newline at end of file + // PERBAIKAN 1: Nama tabel disamakan jadi 'users' (pakai s) + $stmt = mysqli_prepare($conn, "SELECT * FROM users WHERE username=?"); + mysqli_stmt_bind_param($stmt, "s", $username); + mysqli_stmt_execute($stmt); + + $result = mysqli_stmt_get_result($stmt); + $row = mysqli_fetch_assoc($result); + + // Kalau username tidak ditemukan ATAU password salah + if (!$row || !password_verify($password, $row['password'])) { + // PERBAIKAN 2: Pakai Script Alert biar user dikembalikan ke index + echo ""; + exit; + } + + // Login sukses + $_SESSION['username'] = $row['username']; + $_SESSION['login'] = true; // Tambahan untuk cek status login nanti + + // PERBAIKAN 3: Arahkan ke file game kamu (sesuaikan nama filenya) + // Di screenshot ada mainboard.html, pakai itu. + echo ""; + exit; +} +?> \ No newline at end of file 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 cfcc102..51ab506 100644 --- a/mainboard.html +++ b/mainboard.html @@ -4,7 +4,216 @@ Memory Flip Card Game - + + + @@ -32,7 +241,7 @@
- +
@@ -65,6 +274,23 @@ - + diff --git a/mainboard.js b/mainboard.js deleted file mode 100644 index 9b16bb8..0000000 --- a/mainboard.js +++ /dev/null @@ -1,16 +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", () => { - alert("Menuju Leaderboard"); -}); - -document.getElementById("logoutBtn").addEventListener("click", () => { - alert("Logout berhasil!"); -}); 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..335a183 100644 --- a/register.html +++ b/register.html @@ -4,7 +4,210 @@ Register Akun - + + + @@ -27,22 +230,22 @@

Buat Akun Baru ✨

Daftar untuk bermain Memory Card Game

-
+ - + - + - + - +
- +

@@ -51,6 +254,68 @@ - + + 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"; -} diff --git a/register.php b/register.php index 98178df..53fced8 100644 --- a/register.php +++ b/register.php @@ -1,55 +1,46 @@ alert('Semua data harus diisi!'); window.location='index.html';"; exit; } if ($password !== $confirm) { - echo "Password tidak cocok"; + echo ""; exit; } - $file = "users.json"; - $users = file_exists($file) ? json_decode(file_get_contents($file), true) : []; + // Cek Username/Email di tabel 'users' + $stmt = mysqli_prepare($conn, "SELECT id FROM users WHERE username = ? OR email = ?"); + mysqli_stmt_bind_param($stmt, "ss", $username, $email); + mysqli_stmt_execute($stmt); + mysqli_stmt_store_result($stmt); - // 🔍 Cek username & email duplikat - foreach ($users as $u) { - if (strtolower($u["username"]) === strtolower($username)) { - echo "Username sudah digunakan"; - exit; - } - if (strtolower($u["email"]) === strtolower($email)) { - echo "Email sudah digunakan"; - exit; - } + if (mysqli_stmt_num_rows($stmt) > 0) { + echo ""; + exit; } + mysqli_stmt_close($stmt); - // 🔐 Enkripsi password - $hashedPassword = password_hash($password, PASSWORD_BCRYPT); + $hashed_password = password_hash($password, PASSWORD_DEFAULT); - // 📌 tambah user baru - $users[] = [ - "id" => uniqid(), - "username" => $username, - "email" => $email, - "password" => $hashedPassword, - "role" => "player", - "created_at" => date("Y-m-d H:i:s") - ]; + // Insert ke tabel 'users' + $stmtInsert = mysqli_prepare($conn, "INSERT INTO users (username, email, password) VALUES (?, ?, ?)"); + mysqli_stmt_bind_param($stmtInsert, "sss", $username, $email, $hashed_password); - file_put_contents($file, json_encode($users, JSON_PRETTY_PRINT)); - echo "success"; + if (mysqli_stmt_execute($stmtInsert)) { + echo ""; + } else { + echo "Error: " . mysqli_error($conn); + } + mysqli_stmt_close($stmtInsert); } -?> +?> \ No newline at end of file