diff --git a/login.css b/login.css
index 2795fbc..8879354 100644
--- a/login.css
+++ b/login.css
@@ -1,4 +1,5 @@
 body {
+<<<<<<< HEAD
     font-family: Arial, sans-serif;
     background: #1e90ff;
     display: flex;
@@ -41,3 +42,98 @@ button:hover {
     color: red;
     margin-top: 10px;
 }
+=======
+  font-family: Arial, sans-serif;
+  background: #f7f6ff;
+}
+
+/* Background animation */
+.bg-animated .bg-circle {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(60px);
+  animation: float 6s infinite ease-in-out;
+}
+.one { top: 20%; left: 10%; width: 180px; height: 180px; background: rgba(255,255,255,0.1); }
+.two { bottom: 15%; right: 10%; width: 250px; height: 250px; background: rgba(255,192,203,0.2); animation-delay: 1s; }
+.three { top: 50%; left: 50%; width: 160px; height: 160px; background: rgba(200,120,255,0.2); animation-delay: 2s; }
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-20px); }
+}
+
+/* Card */
+.login-card {
+  background: rgba(255,255,255,0.6);
+  backdrop-filter: blur(15px);
+  padding: 30px;
+  max-width: 400px;
+  width: 100%;
+  border-radius: 20px;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+  position: relative;
+  z-index: 10;
+}
+
+/* Icon */
+.icon-wrapper { display: flex; justify-content: center; margin-bottom: 20px; }
+.icon-circle {
+  background: linear-gradient(45deg, purple, hotpink);
+  padding: 20px;
+  border-radius: 50%;
+}
+.login-icon { width: 40px; height: 40px; }
+
+/* Text */
+.header-text { text-align: center; margin-bottom: 20px; }
+.header-text h2 { background: -webkit-linear-gradient(purple, hotpink); 
+
+/* Input */
+input {
+  width: 100%;
+  padding: 12px;
+  margin-bottom: 15px;
+  border-radius: 10px;
+  border: 2px solid #ddd;
+  background: #fafafa;
+}
+
+/* Button */
+.btn-login {
+  width: 100%;
+  padding: 12px;
+  background: linear-gradient(to right, purple, hotpink);
+  color: white;
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+}
+
+/* Error */
+.error {
+  background: #ffe5e5;
+  border: 1px solid #ffb2b2;
+  color: #b00000;
+  padding: 10px;
+  border-radius: 10px;
+  margin-bottom: 10px;
+  display: none;
+}
+
+/* Demo Box */
+.demo-box {
+  background: #eef3ff;
+  padding: 15px;
+  margin-top: 20px;
+  border-radius: 15px;
+  border: 1px solid #d8e0ff;
+}
+.demo-item {
+  background: white;
+  padding: 10px;
+  margin-top: 10px;
+  border-radius: 10px;
+}
+}
+>>>>>>> 034e71546358d1709edc3df62da8342c7a9fa647
diff --git a/login.js b/login.js
new file mode 100644
index 0000000..3b43ed3
--- /dev/null
+++ b/login.js
@@ -0,0 +1,45 @@
+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 success
+  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";
+}
diff --git a/login.php b/login.php
index 1c3ba62..0ced915 100644
--- a/login.php
+++ b/login.php
@@ -1,4 +1,5 @@
 <?php
+<<<<<<< HEAD
 session_start();
 
 // untuk halaman login
@@ -52,4 +53,32 @@ if ($username != '' && $password != '') {
 	<input type="submit">
  </form>
 </body>
-</html>
\ No newline at end of file
+</html>
+=======
+include "koneksi.php";
+
+$username = $_POST['username'];
+$password = $_POST['password'];
+
+$query = mysqli_query($conn, "SELECT * FROM users WHERE username='$username'");
+$user = mysqli_fetch_assoc($query);
+
+if (!$user) {
+    echo json_encode(["status" => "error", "msg" => "Username tidak ditemukan"]);
+    exit;
+}
+
+if ($user["password"] !== $password) {
+    echo json_encode(["status" => "error", "msg" => "Password salah"]);
+    exit;
+}
+
+echo json_encode([
+    "status" => "success",
+    "id" => $user["id"],
+    "username" => $user["username"],
+    "email" => $user["email"],
+    "role" => $user["role"]
+]);
+?>
+>>>>>>> 034e71546358d1709edc3df62da8342c7a9fa647
diff --git a/register.css b/register.css
new file mode 100644
index 0000000..4525b5d
--- /dev/null
+++ b/register.css
@@ -0,0 +1,163 @@
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background: #f7f7ff;
+}
+
+.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;
+    background: linear-gradient(45deg, purple, hotpink);
+    color: transparent;
+}
+
+.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;
+}
diff --git a/register.html b/register.html
new file mode 100644
index 0000000..cd3e754
--- /dev/null
+++ b/register.html
@@ -0,0 +1,54 @@
+<!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>
+    <link rel="stylesheet" href="register.css" />
+</head>
+<body>
+
+<div class="page">
+    <!-- Background animasi -->
+    <div class="bg-1"></div>
+    <div class="bg-2"></div>
+    <div class="bg-3"></div>
+
+    <div class="container">
+        <div class="icon-wrapper">
+            <div class="icon-bg"></div>
+            <div class="icon">
+                <img src="userplus.png" width="45" />
+            </div>
+        </div>
+
+        <h2 class="title">Buat Akun Baru ✨</h2>
+        <p class="subtitle">Daftar untuk bermain Memory Card Game</p>
+
+        <form id="registerForm">
+            <label>Username</label>
+            <input type="text" id="username" placeholder="Pilih username">
+
+            <label>Email</label>
+            <input type="email" id="email" placeholder="email@example.com">
+
+            <label>Password</label>
+            <input type="password" id="password" placeholder="Minimal 6 karakter">
+
+            <label>Konfirmasi Password</label>
+            <input type="password" id="confirmPassword" placeholder="Ketik ulang password">
+
+            <div id="errorBox"></div>
+
+            <button type="submit" class="btn">Daftar Sekarang</button>
+        </form>
+
+        <p class="login-link">
+            Sudah punya akun? <a href="login.html">Login Sekarang</a>
+        </p>
+    </div>
+</div>
+
+<script src="register.js"></script>
+</body>
+</html>
diff --git a/register.js b/register.js
new file mode 100644
index 0000000..e69de29
diff --git a/register.php b/register.php
new file mode 100644
index 0000000..3b20473
--- /dev/null
+++ b/register.php
@@ -0,0 +1,50 @@
+<?php
+if ($_SERVER["REQUEST_METHOD"] === "POST") {
+
+    $username = $_POST["username"];
+    $email = $_POST["email"];
+    $password = $_POST["password"];
+    $confirm = $_POST["confirm"];
+
+    if (!$username || !$email || !$password || !$confirm) {
+        echo "Semua field wajib diisi";
+        exit;
+    }
+
+    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+        echo "Email tidak valid";
+        exit;
+    }
+
+    if ($password !== $confirm) {
+        echo "Password tidak cocok";
+        exit;
+    }
+
+    // contoh simpan ke file JSON
+    $file = "users.json";
+    $users = file_exists($file) ? json_decode(file_get_contents($file), true) : [];
+
+    foreach ($users as $u) {
+        if ($u["username"] === $username) {
+            echo "Username sudah digunakan";
+            exit;
+        }
+        if ($u["email"] === $email) {
+            echo "Email sudah digunakan";
+            exit;
+        }
+    }
+
+    $users[] = [
+        "id" => time(),
+        "username" => $username,
+        "email" => $email,
+        "password" => $password,
+        "role" => "player"
+    ];
+
+    file_put_contents($file, json_encode($users, JSON_PRETTY_PRINT));
+    echo "success";
+}
+?>