Logina & Pendaftaran
* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
body { background: #f0f0f0; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
.login-box, .register-box, .not-member-box {
background: linear-gradient(180deg, #e62e2e 0%, #cc0000 100%);
color: white; padding: 25px; border-radius: 12px;
box-shadow: 0 8px 20px rgba(0,0,0,0.25); position: relative;
}
.login-box { width: 280px; margin-right: 30px; }
.register-box { width: 320px; }
.not-member-box { width: 280px; margin-top: 20px; text-align: center; }
.close-btn {
position: absolute; top: 12px; right: 12px;
background: rgba(255,255,255,0.2); border: none; color: white;
width: 24px; height: 24px; border-radius: 50%; font-size: 14px;
cursor: pointer; display: flex; align-items: center; justify-content: center;
}
h2 { text-align: center; margin-bottom: 20px; font-size: 22px; letter-spacing: 1px; }
.input-group { margin-bottom: 15px; }
input {
width: 100%; padding: 10px 12px; border: none; border-radius: 6px;
background: white; color: #333; font-size: 14px; outline: none;
}
input::placeholder { color: #999; }
.options {
display: flex; justify-content: space-between; align-items: center;
margin: 12px 0; font-size: 13px;
}
.options label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.options a { color: #ffd700; text-decoration: none; }
button {
width: 100%; padding: 11px; border: none; border-radius: 6px;
background: linear-gradient(180deg, #ff4d4d 0%, #cc0000 100%);
color: white; font-size: 15px; font-weight: bold; cursor: pointer;
box-shadow: 0 3px 6px rgba(0,0,0,0.2); transition: transform 0.2s;
}
button:hover { transform: translateY(-2px); }
.btn-group { display: flex; gap: 10px; margin-top: 15px; }
.main-container { display: flex; align-items: flex-start; flex-wrap: wrap; }
.login-section { display: flex; flex-direction: column; }
function prosesDaftar() {
// Ambil nilai dari medan input
let fn = document.getElementById('fn').value;
let ln = document.getElementById('ln').value;
let pw = document.getElementById('pw').value;
let cpw = document.getElementById('cpw').value;
// Semak jika kosong
if (!fn || !ln || !pw || !cpw) {
alert("⚠️ Sila lengkapkan semua maklumat!");
return;
}
// Semak kata laluan sepadan
if (pw !== cpw) {
alert("⚠️ Kata laluan tidak sepadan! Sila semak semula.");
return;
}
// Berjaya!
alert("✅ Pendaftaran berjaya! Selamat datang, " + fn + "!");
// Pilihan: Tukar ke halaman lain selepas berjaya
// window.location.href = "halaman-log-masuk.html";
}
function resetBorang() {
document.getElementById('fn').value = '';
document.getElementById('ln').value = '';
document.getElementById('un').value = '';
document.getElementById('em').value = '';
document.getElementById('pw').value = '';
document.getElementById('cpw').value = '';
alert("❌ Borang telah dikosongkan.");
}
function tukarKeBorangDaftar() {
document.getElementById('borangDaftar').scrollIntoView({ behavior: 'smooth' });
}
function tutupBorangDaftar() {
alert("Borang ditutup.");
}