Merge branch 'main' of https://git-eng.ukwms.ac.id/2526-web/Kelompok02-Memory-Card

2025-12-14 15:16:34 +07:00 · 2025-12-14 15:16:31 +07:00
5 changed files with 312 additions and 332 deletions
--- a/index.html
+++ b/index.html
@ -1,63 +1,75 @@
 <!DOCTYPE html>
 <html lang="id">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Login</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login & Register - Memory Game</title>

 <style>
+/* --- 1. RESET & BACKGROUND UTAMA --- */
+* { box-sizing: border-box; }
+
 body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
    min-height: 100vh;
-  overflow-y: auto;      
+    display: flex;
+    justify-content: center;
+    align-items: center;
    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;
+/* --- 2. CONTAINER KARTU (LOGIC SLIDING) --- */
+.auth-card {
+    width: 380px;
+    background: rgba(255, 255, 255, 0.75);
+    backdrop-filter: blur(12px);
    border-radius: 25px;
-  width: 350px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    overflow: hidden; /* Sembunyikan form yang ada di luar area */
+    position: relative;
    z-index: 10;
-  box-shadow: 0 10px 28px rgba(0,0,0,0.2);
-  position: relative;
+    transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s ease;
 }

-.icon-wrapper {
+.auth-card:hover {
+    transform: scale(1.01);
+}
+
+.form-wrapper {
+    width: 100%;
+    overflow: hidden;
+}
+
+/* Container Form (Lebar 200% untuk 2 form) */
+.forms-container {
    display: flex;
-  justify-content: center;
-  margin-bottom: 20px;
-  position: relative;
+    width: 200%;
+    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }

-.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;
+/* Geser ke kanan (Register) saat active */
+.auth-card.active .forms-container {
+    transform: translateX(-50%);
 }

-.icon {
-  width: 70px; height: 70px;
-  border-radius: 50%;
-  background: linear-gradient(45deg, purple, hotpink);
+/* --- 3. STYLING FORM INDIVIDUAL --- */
+form {
+    width: 50%;
+    flex-shrink: 0;
+    padding: 40px;
    display: flex;
-  justify-content: center;
+    flex-direction: column;
    align-items: center;
+    justify-content: center; /* Center content vertically if height allows */
 }

-.title {
+/* Typography */
+h2 {
+    margin: 10px 0 10px; /* Adjusted margin since icon is gone */
    text-align: center;
-  font-size: 22px;
-  margin-bottom: 10px;
+    font-size: 26px;
    background: linear-gradient(45deg, purple, hotpink);
    -webkit-background-clip: text;
    background-clip: text;
@ -67,13 +79,16 @@ body {
 .subtitle {
    text-align: center;
    color: gray;
-  margin-bottom: 20px;
-  animation:appear 3s ease-out;
+    font-size: 14px;
+    margin-bottom: 25px;
 }

 label {
    font-size: 14px;
    color: #444;
+    width: 100%;
+    margin-bottom: 6px;
+    font-weight: bold;
 }

 input {
@ -83,41 +98,19 @@ input {
    border: 2px solid #ccc;
    background: #fafafa;
    margin-bottom: 15px;
+    font-size: 14px;
+    transition: 0.3s;
 }

-
 input:focus {
    outline: none;
    border-color: purple;
+    background: #fff;
+    box-shadow: 0 0 8px rgba(128, 0, 128, 0.1);
 }

-#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 {
+/* Tombol */
+.btn-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(45deg, purple, hotpink);
@ -126,119 +119,68 @@ input:focus {
    border: none;
    cursor: pointer;
    font-size: 16px;
+    font-weight: bold;
    transition: 0.25s ease;
+    margin-top: 10px;
+    box-shadow: 0 4px 15px rgba(128, 0, 128, 0.2);
 }

-.btn-login:hover {
-  transform: scale(1.03);
-  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
+.btn-submit:hover {
+    transform: scale(1.02);
+    box-shadow: 0 6px 20px rgba(128, 0, 128, 0.35);
 }

-.login-container {
-    max-height: none;
-    height: auto;
-    overflow: visible; 
-    padding-bottom: 40px; 
+/* Link Switch */
+.switch-text {
+    margin-top: 20px;
+    font-size: 14px;
+    color: #555;
 }

-.login-link {
-  text-align: center;
-  margin-top: 15px;
-}
-
-.login-link a {
+.switch-text a {
    color: purple;
+    text-decoration: none;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.switch-text a:hover {
    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;
+/* Error Box */
+.error-box {
    width: 100%;
+    color: #d8000c;
+    background: #ffbaba;
    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; }
+    border-radius: 10px;
+    margin-bottom: 15px;
+    font-size: 13px;
+    text-align: center;
+    display: none;
 }

+/* --- 4. DEKORASI (BUAH & GLITTER) --- */
 .fruit {
    position: absolute;
-  width: 95px;
-  opacity: .85;
+    width: 90px;
+    opacity: 0.85;
    animation: float 6s infinite ease-in-out, drift 15s infinite linear;
    pointer-events: none;
+    z-index: 1;
 }

-.f1 { top: 8%; left: 10%; animation-delay: .3s; }
+/* Posisi Buah */
+.f1 { top: 8%; left: 10%; animation-delay: .3s; width: 80px; }
 .f2 { top: 65%; right: 12%; animation-delay: .7s; }
-.f3 { top: 22%; right: 55%; animation-delay: 1.1s; }
+.f3 { top: 22%; right: 55%; animation-delay: 1.1s; width: 60px; }
 .f4 { bottom: 15%; left: 28%; animation-delay: .9s; }
-.f5 { bottom: 10%; right: 30%; animation-delay: 1.4s; }
+.f5 { bottom: 10%; right: 30%; animation-delay: 1.4s; width: 70px; }
 .f6 { top: 40%; left: 50%; animation-delay: .5s; }
-.f7 { bottom: 30%; left: 15%; animation-delay: 1.2s; }
+.f7 { bottom: 30%; left: 15%; animation-delay: 1.2s; width: 50px; }
 .f8 { top: 75%; right: 40%; animation-delay: .8s; }
-.f9 { top: 50%; left: 80%; animation-delay: 1s; }
+.f9 { top: 50%; left: 80%; animation-delay: 1s; width: 85px; }
 .f10 { bottom: 20%; right: 5%; animation-delay: 1.3s; }

@keyframes float {
@ -253,22 +195,26 @@ input:focus {
    100% { transform: translateX(0); }
 }

-.login-card, .container {
-  transition: transform .4s ease;
-}
-.login-card:hover, .container:hover {
-  transform: scale(1.012);
+.glitter {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background: purple;
+    border-radius: 50%;
+    opacity: 0;
+    animation: glitter-burst 2s infinite ease-out;
+    pointer-events: none;
+    z-index: 11;
 }

+@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; }
+}
 </style>
-
 </head>
 <body>
-    <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">
@ -281,100 +227,149 @@ input:focus {
    <img src="images/fruit9.png" class="fruit f9">
    <img src="images/fruit10.png" class="fruit f10">

-    <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>
+    <div class="auth-card" id="authCard">
+        <div class="form-wrapper">
+            <div class="forms-container">

                <form id="loginForm" action="login.php" method="POST">
-        <label>E-mail</label>
-        <input type="text" name="username" required id="username" placeholder="Masukan Username">
+                    <h2>Selamat Datang! ✨</h2>
+                    <p class="subtitle">Login untuk bermain Memory Flip</p>
+
+                    <div id="loginError" class="error-box"></div>
+
+                    <label>Username</label>
+                    <input type="text" id="loginUser" name="username" placeholder="Masukan Username" required>

                    <label>Password</label>
-        <input type="password" name="password" required id="password" placeholder="Masukan Password">
+                    <input type="password" id="loginPass" name="password" placeholder="Masukan Password" required>

-        <div id="errorBox" class="error"></div>
+                    <button type="submit" class="btn-submit" name="btn-login">Login Sekarang</button>

-        <button class="btn-login">Login Sekarang</button>
+                    <p class="switch-text">
+                        Belum punya akun? 
+                        <a onclick="toggleAuth('register')">Daftar Sekarang</a>
+                    </p>
                </form>

-      <p class="register-text">
-        Belum punya akun?
-        <a href="register.html">Daftar Sekarang</a>
+                <form id="registerForm" action="register.php" method="POST">
+                    <h2>Buat Akun Baru ✨</h2>
+                    <p class="subtitle">Daftar untuk memulai petualangan</p>
+
+                    <div id="regError" class="error-box"></div>
+
+                    <label>Username</label>
+                    <input type="text" id="regUser" name="username" placeholder="Pilih Username" required>
+
+                    <label>Email</label>
+                    <input type="email" id="regEmail" name="email" placeholder="Masukan Email" required>
+
+                    <label>Password</label>
+                    <input type="password" id="regPass" name="password" placeholder="Minimal 6 karakter" required>
+
+                    <label>Konfirmasi Password</label>
+                    <input type="password" id="regConfirm" name="confirm_password" placeholder="Ketik ulang password" required>
+
+                    <button type="submit" class="btn-submit" name="btn-register">Daftar Sekarang</button>
+
+                    <p class="switch-text">
+                        Sudah punya akun? 
+                        <a onclick="toggleAuth('login')">Login Sekarang</a>
                    </p>
+                </form>
+
+            </div>
+        </div>
+    </div>

 <script>
-/* LOGIN VALIDATION */
-document.getElementById("loginForm").addEventListener("submit", function(e) {
-    e.preventDefault(); // jangan reload halaman
+    /* --- LOGIC SLIDING & HEIGHT ADJUSTMENT --- */
+    const card = document.getElementById("authCard");
+    const loginForm = document.getElementById("loginForm");
+    const registerForm = document.getElementById("registerForm");

-    const username = document.getElementById("username").value.trim();
-    const password = document.getElementById("password").value.trim();
-    const errorBox = document.getElementById("errorBox");
+    function setHeight() {
+        const isActive = card.classList.contains("active");
+        const formHeight = isActive ? registerForm.offsetHeight : loginForm.offsetHeight;
+        card.style.height = formHeight + "px";
+    }
+
+    function toggleAuth(mode) {
+        // Sembunyikan pesan error saat pindah
+        document.getElementById("loginError").style.display = "none";
+        document.getElementById("regError").style.display = "none";
+
+        if (mode === 'register') {
+            card.classList.add("active");
+        } else {
+            card.classList.remove("active");
+        }
+        
+        setTimeout(setHeight, 50); 
+    }
+
+    window.addEventListener("load", setHeight);
+    window.addEventListener("resize", setHeight);
+
+
+    /* --- LOGIC LOGIN --- */
+    loginForm.addEventListener("submit", function(e) {
+        e.preventDefault(); 
+        const username = document.getElementById("loginUser").value.trim();
+        const password = document.getElementById("loginPass").value.trim();
+        const errorBox = document.getElementById("loginError");

        errorBox.style.display = "none";
-    errorBox.innerText = "";

-    // Validasi form ringan
-    if (!username || !password) {
-        showError("Username dan password harus diisi");
-        return;
-    }
+        if (!username || !password) return showMsg(errorBox, "Isi semua data!");

-    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;
+            return showMsg(errorBox, "Username atau password salah");
        }

-    // 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";
+
+    /* --- 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();
    }

-/* 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 */
+    /* --- GLITTER EFFECT --- */
    document.addEventListener("DOMContentLoaded", function () {
-    const card = document.querySelector(".login-card");
-    if (!card) return;
-
-    for (let i = 0; i < 20; i++) {
+        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");
@ -385,17 +380,7 @@ document.addEventListener("DOMContentLoaded", function () {
            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>
--- a/login.html
+++ b/login.html
@ -303,7 +303,7 @@ input:focus {

        <div id="errorBox" class="error"></div>

-        <button class="btn-login">Login Sekarang</button>
+        <button type="submit" class="btn-login" name="btn-login">Login Sekarang</button>
      </form>

      <p class="register-text">
--- a/login.php
+++ b/login.php
@ -2,11 +2,7 @@
 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'];

@ -28,4 +24,7 @@ if (!$row || !password_verify($password, $row['password'])) {
 $_SESSION['username'] = $row['username'];
 echo "<script>alert('Silakan login.'); window.location.href='mainboard.html';</script>";
 exit;
+}
+
+
 ?>
--- 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 {

            <div id="errorBox"></div>

-            <button type="submit" class="btn">Daftar Sekarang</button>
+            <button type="submit" class="btn-register" name="btn-register">Daftar Sekarang</button>
        </form>

        <p class="login-link">
--- a/register.php
+++ b/register.php
@ -2,11 +2,11 @@
 session_start();
 require_once "Config.php";

-if ($_SERVER['REQUEST_METHOD'] === 'POST') {
-    $username = trim($_POST['username']);
-    $email = trim($_POST['email']);
-    $password = trim($_POST['password']);
-    $confirmPassword = trim($_POST['confirm_password']);
+if(isset($_POST['btn-register'])) {
+    $username = $_POST['username'];
+    $email = $_POST['email'];
+    $password = $_POST['password'];
+    $confirmPassword = password_hash($_POST['confirm_password'],PASSWORD_DEFAULT);

    if (!$username || !$email || !$password || !$confirmPassword) {
        echo "<script>alert('Semua field harus diisi'); window.history.back();</script>";
@ -28,7 +28,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        exit;
    }

-    // cek username & email di database
+
    $stmt = mysqli_prepare($conn, "SELECT id FROM user WHERE username=? OR email=?");
    mysqli_stmt_bind_param($stmt, "ss", $username, $email);
    mysqli_stmt_execute($stmt);
@ -39,10 +39,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        exit;
    }

-    // hash password
-    $hash = password_hash($password, PASSWORD_DEFAULT);
-
-    // insert user
    $stmt = mysqli_prepare($conn, "INSERT INTO user (username, email, password, role) VALUES (?, ?, ?, 'player')");
    mysqli_stmt_bind_param($stmt, "sss", $username, $email, $hash);
    mysqli_stmt_execute($stmt);
Author	SHA1	Message	Date
Nathan	556ef5ee5f	Merge branch 'main' of https://git-eng.ukwms.ac.id/2526-web/Kelompok02-Memory-Card	2025-12-14 15:16:34 +07:00
Nathan	6dd1c9d93b	Merge branch 'main' of https://git-eng.ukwms.ac.id/2526-web/Kelompok02-Memory-Card	2025-12-14 15:16:31 +07:00