From 1014525aea9a56fdd0ba8731c3fd603a28aa3a33 Mon Sep 17 00:00:00 2001
From: Nathan <nathan-h.inf25@ukwms.ac.id>
Date: Sun, 14 Dec 2025 19:28:37 +0700
Subject: [PATCH] processing abominaton (deleting  login dan register, login
 and register now is index and its php was auth) God have mercy on us

---
 register.php => auth.php |  56 +++++-
 index.html               |   4 +-
 login.html               | 404 ---------------------------------------
 login.php                |  40 ----
 register.html            | 321 -------------------------------
 5 files changed, 52 insertions(+), 773 deletions(-)
 rename register.php => auth.php (50%)
 delete mode 100644 login.html
 delete mode 100644 login.php
 delete mode 100644 register.html

diff --git a/register.php b/auth.php
similarity index 50%
rename from register.php
rename to auth.php
index 53fced8..ac25f22 100644
--- a/register.php
+++ b/auth.php
@@ -1,24 +1,32 @@
 <?php
-// Simpan dengan nama file: register.php
-include 'Config.php';
+// Mulai session paling atas (wajib untuk login)
+session_start();
 
+// Panggil koneksi database sekali saja
+require_once "Config.php";
+
+// ==========================================
+// BAGIAN 1: LOGIKA REGISTER
+// ==========================================
 if (isset($_POST['btn-register'])) {
     $username = $_POST['username'];
     $email    = $_POST['email'];
     $password = $_POST['password'];
     $confirm  = $_POST['confirm_password'];
 
+    // Validasi input kosong
     if (empty($username) || empty($email) || empty($password) || empty($confirm)) {
         echo "<script>alert('Semua data harus diisi!'); window.location='index.html';</script>";
         exit;
     }
 
+    // Validasi password match
     if ($password !== $confirm) {
         echo "<script>alert('Password dan Konfirmasi tidak cocok!'); window.location='index.html';</script>";
         exit;
     }
 
-    // Cek Username/Email di tabel 'users'
+    // Cek Username/Email sudah ada atau belum
     $stmt = mysqli_prepare($conn, "SELECT id FROM users WHERE username = ? OR email = ?");
     mysqli_stmt_bind_param($stmt, "ss", $username, $email);
     mysqli_stmt_execute($stmt);
@@ -26,21 +34,57 @@ if (isset($_POST['btn-register'])) {
 
     if (mysqli_stmt_num_rows($stmt) > 0) {
         echo "<script>alert('Username atau Email sudah terpakai!'); window.location='index.html';</script>";
-        exit;
+        exit; // Stop di sini
     }
     mysqli_stmt_close($stmt);
 
+    // Hash password & Insert
     $hashed_password = password_hash($password, PASSWORD_DEFAULT);
-
-    // 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);
 
     if (mysqli_stmt_execute($stmtInsert)) {
+        // Balik ke index.html tapi kasih pesan sukses
         echo "<script>alert('Registrasi Berhasil! Silakan Login.'); window.location='index.html';</script>";
     } 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);
+
+    // Cek user ada ATAU password salah
+    if (!$row || !password_verify($password, $row['password'])) {
+        echo "<script>
+            alert('Username atau Password salah!');
+            window.location.href='index.html';
+        </script>";
+        exit;
+    }
+
+    // Login Sukses
+    $_SESSION['username'] = $row['username'];
+    $_SESSION['login'] = true; 
+
+    echo "<script>
+        alert('Login Berhasil! Selamat Datang, " . $username . "'); 
+        window.location.href='mainboard.html';
+    </script>";
+    exit;
 }
 ?>
\ No newline at end of file
diff --git a/index.html b/index.html
index 1419265..e0609d9 100644
--- a/index.html
+++ b/index.html
@@ -136,7 +136,7 @@ input:focus { outline: none; border-color: purple; background: #fff; box-shadow:
         <div class="form-wrapper">
             <div class="forms-container">
 
-                <form id="loginForm" action="login.php" method="POST">
+                <form id="loginForm" action="auth.php" method="POST">
                     <h2>Selamat Datang! ✨</h2>
                     <p class="subtitle">Login untuk bermain</p>
 
@@ -155,7 +155,7 @@ input:focus { outline: none; border-color: purple; background: #fff; box-shadow:
                     </p>
                 </form>
 
-                <form id="registerForm" action="register.php" method="POST">
+                <form id="registerForm" action="auth.php" method="POST">
                     <h2>Buat Akun Baru ✨</h2>
                     <p class="subtitle">Daftar petualangan baru</p>
 
diff --git a/login.html b/login.html
deleted file mode 100644
index 692d2e6..0000000
--- a/login.html
+++ /dev/null
@@ -1,404 +0,0 @@
-<!DOCTYPE html>
-<html lang="id">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Login</title>
-
-<style>
-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; 
-    padding-bottom: 40px; 
-}
-
-.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;
-}
-
-.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);
-}
-
-</style>
-
-</head>
-<body>
-
-    <!-- Animated Background -->
-    <div class="bg-animated">
-      <div class="bg-circle one"></div>
-      <div class="bg-circle two"></div>
-      <div class="bg-circle three"></div>
-    </div>
-
-    <img src="images/fruit1.png" class="fruit f1">
-    <img src="images/fruit2.png" class="fruit f2">
-    <img src="images/fruit3.png" class="fruit f3">
-    <img src="images/fruit4.png" class="fruit f4">
-    <img src="images/fruit5.png" class="fruit f5">
-    <img src="images/fruit6.png" class="fruit f6">
-    <img src="images/fruit7.png" class="fruit f7">
-    <img src="images/fruit8.png" class="fruit f8">
-    <img src="images/fruit9.png" class="fruit f9">
-    <img src="images/fruit10.png" class="fruit f10">
-
-    <!-- Login Card -->
-    <div class="login-card">
-      <div class="icon-wrapper">
-        <div class="icon-circle">
-        </div>
-      </div>                                                                                                                                                                                                                  
-      <div class="header-text">
-        <h2>Selamat Datang! ✨</h2>
-        <p>Login untuk bermain Memory Flip Card Game</p>
-      </div>
-
-      <form id="loginForm" action="login.php" method="POST">
-        <label>Username</label>
-        <input type="text" name="username" required id="username" placeholder="Masukan Username">
-
-        <label>Password</label>
-        <input type="password" name="password" required id="password" placeholder="Masukan Password">
-
-        <div id="errorBox" class="error"></div>
-
-        <button type="submit" class="btn-login" name="btn-login">Login Sekarang</button>
-      </form>
-
-      <p class="register-text">
-        Belum punya akun?
-        <a href="register.html">Daftar Sekarang</a>
-      </p>
-
-<script>
-/* LOGIN VALIDATION */
-document.getElementById("loginForm").addEventListener("submit", function(e) {
-    e.preventDefault(); // jangan reload halaman
-
-    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 = "";
-
-    // Validasi form ringan
-    if (!username || !password) {
-        showError("Username dan password harus diisi");
-        return;
-    }
-
-    if (password.length < 6) {
-        showError("Password minimal 6 karakter");
-        return;
-    }
-
-    // Ambil data user dari localStorage
-    const usersData = localStorage.getItem("users");
-    const users = usersData ? JSON.parse(usersData) : [];
-
-    // Cari user berdasarkan username
-    const user = users.find(u => u.username === username);
-
-    // Jika user tidak ada atau password salah
-    if (!user || user.password !== password) {
-        showError("Username atau 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";
-}
-
-/* Toggle Demo */
-function toggleDemo() {
-    const box = document.getElementById("demoBox");
-    const btn = document.querySelector(".demo-toggle");
-
-    box.classList.toggle("show");
-
-    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;
-
-    for (let i = 0; i < 20; 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);
-    }
-});
-
-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);
-</script>
-
-
-</body>
-</html>
\ No newline at end of file
diff --git a/login.php b/login.php
deleted file mode 100644
index 8b2a96e..0000000
--- a/login.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-// Simpan dengan nama file: login.php
-session_start();
-require_once "Config.php";
-
-if(isset($_POST['btn-login'])){
-    $username = $_POST['username'];
-    $password = $_POST['password'];
-
-    // 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 "<script>
-            alert('Username atau Password salah!');
-            window.location.href='index.html';
-        </script>";
-        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 "<script>
-        alert('Login Berhasil! Selamat Datang, " . $username . "'); 
-        window.location.href='mainboard.html';
-    </script>";
-    exit;
-}
-?>
\ No newline at end of file
diff --git a/register.html b/register.html
deleted file mode 100644
index 335a183..0000000
--- a/register.html
+++ /dev/null
@@ -1,321 +0,0 @@
-<!DOCTYPE html>
-<html lang="id">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Register Akun</title>
-
-<style>
-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-register {
-    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); }
-}
-</style>
-
-</head>
-<body>
-
-<div class="page">
-    <img src="images/fruit1.png" class="fruit f1">
-    <img src="images/fruit2.png" class="fruit f2">
-    <img src="images/fruit3.png" class="fruit f3">
-    <img src="images/fruit4.png" class="fruit f4">
-    <img src="images/fruit5.png" class="fruit f5">
-    <img src="images/fruit6.png" class="fruit f6">
-    <img src="images/fruit7.png" class="fruit f7">
-    <img src="images/fruit8.png" class="fruit f8">
-    <img src="images/fruit9.png" class="fruit f9">
-    <img src="images/fruit10.png" class="fruit f10">
-
-    <div class="container">
-        <div class="icon-wrapper">
-        </div>
-
-        <h2 class="title">Buat Akun Baru ✨</h2>
-        <p class="subtitle">Daftar untuk bermain Memory Card Game</p>
-
-        <form id="registerForm" action="register.php" method="POST">
-            <label>Username</label>
-            <input type="text" name="username" required id="username" placeholder="Pilih Username">
-
-            <label>Email</label>
-            <input type="email" name="email" required id="email" placeholder="Masukan Email">
-
-            <label>Password</label>
-            <input type="password" name="password" required id="password" placeholder="Minimal 6 karakter">
-
-            <label>Konfirmasi Password</label>
-            <input type="password" name="confirm_password" id="confirm_password" required placeholder="Ketik ulang password">
-
-            <div id="errorBox"></div>
-
-            <button type="submit" class="btn-register" name="btn-register">Daftar Sekarang</button>
-        </form>
-
-        <p class="login-link">
-            Sudah punya akun? <a href="login.html">Login Sekarang</a>
-        </p>
-    </div>
-</div>
-
-<script>
-document.getElementById("registerForm").addEventListener("submit", function(e) {
-    e.preventDefault(); // jangan reload halaman
-
-    const username = document.getElementById("username").value.trim();
-    const email = document.getElementById("email").value.trim();
-    const password = document.getElementById("password").value.trim();
-    const confirmPassword = document.getElementById("confirm_password").value.trim();
-    const errorBox = document.getElementById("errorBox");
-
-    errorBox.style.display = "none";
-    errorBox.innerText = "";
-
-    // Validasi form
-    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;
-    }
-
-    // Kirim ke register.php via AJAX
-    fetch("register.php", {
-        method: "POST",
-        headers: {"Content-Type": "application/x-www-form-urlencoded"},
-        body: `username=${encodeURIComponent(username)}&email=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`
-    })
-    .then(response => response.text())
-    .then(data => {
-        data = data.trim();
-        if (data === "OK") {
-            // registrasi sukses -> redirect ke mainboard.php
-            window.location.href = "mainboard.php";
-        } else {
-            showError(data); // tampilkan error dari PHP
-        }
-    })
-    .catch(err => {
-        showError("Terjadi kesalahan server");
-        console.error(err);
-    });
-});
-
-function showError(msg) {
-    const box = document.getElementById("errorBox");
-    box.innerText = msg;
-    box.style.display = "block";
-}
-</script>
-
-</body>
-</html>