219 lines
5.5 KiB
PHP
219 lines
5.5 KiB
PHP
<?php
|
|
session_start();
|
|
|
|
// Kalau sudah login, langsung ke mainboard
|
|
if (isset($_SESSION['login'])) {
|
|
header("Location: mainboard.php");
|
|
exit;
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<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: 'Segoe UI', Arial, sans-serif;
|
|
background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* --- 2. CONTAINER KARTU --- */
|
|
.auth-card {
|
|
width: 380px;
|
|
background: rgba(255,255,255,.95);
|
|
backdrop-filter: blur(12px);
|
|
border-radius: 25px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,.2);
|
|
overflow: hidden;
|
|
position: relative;
|
|
transition: height .4s cubic-bezier(.25,1,.5,1);
|
|
}
|
|
.forms-container {
|
|
display: flex;
|
|
width: 200%;
|
|
transition: transform .5s cubic-bezier(.68,-.55,.27,1.55);
|
|
}
|
|
.auth-card.active .forms-container { transform: translateX(-50%); }
|
|
|
|
/* --- FORM --- */
|
|
form {
|
|
width: 50%;
|
|
padding: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
h2 {
|
|
margin-bottom: 10px;
|
|
font-size: 26px;
|
|
background: linear-gradient(45deg,purple,hotpink);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
label { width:100%; font-weight:bold; margin-bottom:6px; }
|
|
input {
|
|
width:100%;
|
|
padding:12px;
|
|
border-radius:12px;
|
|
border:2px solid #ccc;
|
|
margin-bottom:15px;
|
|
}
|
|
.btn-submit {
|
|
width:100%;
|
|
padding:14px;
|
|
border:none;
|
|
border-radius:15px;
|
|
background:linear-gradient(45deg,purple,hotpink);
|
|
color:#fff;
|
|
font-weight:bold;
|
|
cursor:pointer;
|
|
}
|
|
|
|
/* ERROR BOX */
|
|
.error-box {
|
|
width:100%;
|
|
display:none;
|
|
padding:12px;
|
|
border-radius:10px;
|
|
margin-bottom:20px;
|
|
font-size:13px;
|
|
font-weight:bold;
|
|
text-align:center;
|
|
background:#ffbaba;
|
|
border:1px solid #ff7675;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="auth-card" id="authCard">
|
|
<div class="forms-container">
|
|
|
|
<!-- LOGIN -->
|
|
<form id="loginForm" action="auth.php" method="POST">
|
|
<h2>Selamat Datang ✨</h2>
|
|
<div id="loginError" class="error-box"></div>
|
|
|
|
<label>Username</label>
|
|
<input type="text" name="username" required>
|
|
|
|
<label>Password</label>
|
|
<input type="password" name="password" required>
|
|
|
|
<button class="btn-submit" name="btn-login">Login Sekarang</button>
|
|
<p class="switch-text">Belum punya akun?
|
|
<a onclick="toggleAuth('register')">Daftar</a>
|
|
</p>
|
|
</form>
|
|
|
|
<!-- REGISTER -->
|
|
<form id="registerForm" action="auth.php" method="POST">
|
|
<h2>Buat Akun ✨</h2>
|
|
<div id="regError" class="error-box"></div>
|
|
|
|
<label>Username</label>
|
|
<input type="text" id="regUser" name="username" required>
|
|
|
|
<label>Email</label>
|
|
<input type="email" id="regEmail" name="email" required>
|
|
|
|
<label>Password</label>
|
|
<input type="password" id="regPass" name="password" required>
|
|
|
|
<label>Konfirmasi Password</label>
|
|
<input type="password" id="regConfirm" name="confirm_password" required>
|
|
|
|
<button class="btn-submit" name="btn-register">Daftar</button>
|
|
<p class="switch-text">Sudah punya akun?
|
|
<a onclick="toggleAuth('login')">Login</a>
|
|
</p>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const card = document.getElementById("authCard");
|
|
const loginForm = document.getElementById("loginForm");
|
|
const registerForm = document.getElementById("registerForm");
|
|
|
|
function setHeight() {
|
|
const h = card.classList.contains("active")
|
|
? registerForm.offsetHeight
|
|
: loginForm.offsetHeight;
|
|
card.style.height = h + "px";
|
|
}
|
|
|
|
function toggleAuth(mode){
|
|
document.getElementById("loginError").style.display = "none";
|
|
document.getElementById("regError").style.display = "none";
|
|
card.classList.toggle("active", mode === 'register');
|
|
setTimeout(setHeight, 50);
|
|
}
|
|
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
setHeight();
|
|
const params = new URLSearchParams(window.location.search);
|
|
|
|
// LOGIN GAGAL
|
|
if (params.get("error") === "gagal") {
|
|
const box = document.getElementById("loginError");
|
|
box.innerText = "Username atau Password salah!";
|
|
box.style.display = "block";
|
|
setHeight();
|
|
}
|
|
|
|
// REGISTER BERHASIL
|
|
if (params.get("register") === "success") {
|
|
const box = document.getElementById("loginError");
|
|
box.innerText = "Registrasi berhasil! Silakan login 🎉";
|
|
box.style.display = "block";
|
|
box.style.background = "#d4edda";
|
|
box.style.color = "#155724";
|
|
box.style.border = "1px solid #c3e6cb";
|
|
card.classList.remove("active");
|
|
setHeight();
|
|
}
|
|
|
|
window.history.replaceState(null, null, window.location.pathname);
|
|
});
|
|
|
|
// VALIDASI REGISTER
|
|
registerForm.addEventListener("submit", function(e){
|
|
e.preventDefault();
|
|
const u = regUser.value,
|
|
eMail = regEmail.value,
|
|
p = regPass.value,
|
|
c = regConfirm.value;
|
|
|
|
function show(msg){
|
|
const box = regError;
|
|
box.innerText = msg;
|
|
box.style.display = "block";
|
|
setHeight();
|
|
}
|
|
|
|
if (!u || !eMail || !p || !c) return show("Semua field wajib diisi");
|
|
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(eMail)) return show("Email tidak valid");
|
|
if (p.length < 6) return show("Password minimal 6 karakter");
|
|
if (p !== c) return show("Password tidak cocok");
|
|
|
|
this.submit();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|