diff --git a/index.html b/index.html index 3e08308..5a9fa3a 100644 --- a/index.html +++ b/index.html @@ -1,274 +1,220 @@ - - - Login + + + Login & Register - Memory Game - +@keyframes glitter-burst { + 0% { transform: scale(0.4); opacity: 0.9; } + 50% { opacity: 1; } + 100% { transform: scale(1) translate(var(--x), var(--y)); opacity: 0; } +} + -
-
-
-
-
@@ -281,121 +227,160 @@ input:focus { -
-
-
+
+
+
+ +
+

Selamat Datang! ✨

+

Login untuk bermain Memory Flip

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

+ Belum punya akun? + Daftar Sekarang +

+
+ +
+

Buat Akun Baru ✨

+

Daftar untuk memulai petualangan

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

+ Sudah punya akun? + Login Sekarang +

+
+ +
-
-
-

Selamat Datang! ✨

-

Login untuk bermain Memory Flip Card Game

-
- -
- - - - - - -
- - -
- -

- Belum punya akun? - Daftar Sekarang -

+
+ /* --- LOGIC REGISTER --- */ + registerForm.addEventListener("submit", function(e) { + e.preventDefault(); + const username = document.getElementById("regUser").value.trim(); + const email = document.getElementById("regEmail").value.trim(); + const password = document.getElementById("regPass").value.trim(); + const confirm = document.getElementById("regConfirm").value.trim(); + const errorBox = document.getElementById("regError"); + + errorBox.style.display = "none"; + + if (!username || !email || !password || !confirm) return showMsg(errorBox, "Semua kolom wajib diisi!"); + if (password.length < 6) return showMsg(errorBox, "Password minimal 6 karakter!"); + if (password !== confirm) return showMsg(errorBox, "Password tidak cocok!"); + + // Simpan data (Simulasi) + const users = JSON.parse(localStorage.getItem("users") || "[]"); + users.push({ username, password, email }); + localStorage.setItem("users", JSON.stringify(users)); + + alert("Registrasi Berhasil! Silakan Login."); + toggleAuth('login'); + }); + + function showMsg(element, msg) { + element.innerText = msg; + element.style.display = "block"; + setHeight(); + } + + + /* --- GLITTER EFFECT --- */ + document.addEventListener("DOMContentLoaded", function () { + const card = document.querySelector(".auth-card"); + for (let i = 0; i < 15; i++) { + const g = document.createElement("div"); + g.className = "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); + } + }); + + \ No newline at end of file diff --git a/login.html b/login.html index 8fac527..692d2e6 100644 --- a/login.html +++ b/login.html @@ -1,9 +1,9 @@ - - - Login + + +Login + @@ -303,7 +303,7 @@ input:focus {
- +

diff --git a/login.php b/login.php index e28251e..8e7f6bc 100644 --- a/login.php +++ b/login.php @@ -2,15 +2,11 @@ session_start(); require_once "Config.php"; -if (!isset($_POST['username']) || !isset($_POST['password'])) { - echo "Username atau password salah"; - exit; -} +if(isset($_POST['btn-login'])){ + $username = $_POST['username']; + $password = $_POST['password']; -$username = $_POST['username']; -$password = $_POST['password']; - -// Ambil user berdasarkan username + // Ambil user berdasarkan username $stmt = mysqli_prepare($conn, "SELECT * FROM user WHERE username=?"); mysqli_stmt_bind_param($stmt, "s", $username); mysqli_stmt_execute($stmt); @@ -28,4 +24,7 @@ if (!$row || !password_verify($password, $row['password'])) { $_SESSION['username'] = $row['username']; echo ""; exit; +} + + ?> diff --git a/register.html b/register.html index eef7c7d..335a183 100644 --- a/register.html +++ b/register.html @@ -149,7 +149,7 @@ input:focus { } /* Button */ -.btn { +.btn-register { width: 100%; background: linear-gradient(45deg, purple, hotpink); color: white; @@ -245,7 +245,7 @@ input:focus {

- +