.hs-login-wrapper, .hs-login-wrapper *{box-sizing:border-box}
.hs-login-wrapper .hs-input{
width:100%;
padding:12px 14px 12px 42px;
background:#1a1a1f;
border:1px solid #2a2a32;
border-radius:8px;
color:#f5f1e6;
font-size:14px;
font-family:inherit;
outline:none;
transition:border-color .2s ease, box-shadow .2s ease;
}
.hs-login-wrapper .hs-input:focus{
border-color:#c9a24b;
box-shadow:0 0 0 3px rgba(201,162,75,.15);
}
.hs-login-wrapper .hs-input::placeholder{color:#555}
.hs-login-wrapper .hs-label{
display:block;
color:#c9a24b;
font-size:11px;
font-weight:700;
letter-spacing:1.5px;
text-transform:uppercase;
margin-bottom:8px;
}
.hs-login-wrapper .hs-input-icon{
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
color:#666;
pointer-events:none;
display:flex;
}
#hs-login-panel{
transform:translateY(-8px) scale(.98);
transition:opacity .25s ease, transform .25s ease;
}
#hs-login-overlay{
inset:0;
background:rgba(0,0,0,.55);
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
}
.hs-checkbox{
display:flex;
align-items:center;
gap:8px;
color:#8a8578;
font-size:13px;
cursor:pointer;
user-select:none;
margin:0;
}
.hs-checkbox input{
accent-color:#c9a24b;
width:14px;
height:14px;
cursor:pointer;
margin:0;
}
#hs-login-toggle:hover{background:#dbb668 !important}
#hs-login-form button[type=”submit”]{transition:all .2s ease}
#hs-login-form button[type=”submit”]:hover{
box-shadow:0 6px 20px rgba(201,162,75,.45) !important;
transform:translateY(-1px);
}
#hs-login-form button[type=”submit”]:disabled{
opacity:.6;
cursor:not-allowed;
transform:none;
}
.hs-error{
display:none;
background:rgba(220,53,69,.1);
border:1px solid rgba(220,53,69,.4);
color:#f08080;
padding:10px 12px;
border-radius:6px;
font-size:12px;
margin-bottom:14px;
letter-spacing:.3px;
}
.hs-error.show{display:block}
@media (max-width:480px){
#hs-login-panel{
position:fixed !important;
top:auto !important;
bottom:0 !important;
right:0 !important;
left:0 !important;
width:100% !important;
max-width:100% !important;
border-radius:14px 14px 0 0 !important;
}
}
Member Login
Masuk ke akun Hazkun Studio
(function () {
var toggle = document.getElementById(‘hs-login-toggle’);
var panel = document.getElementById(‘hs-login-panel’);
var overlay = document.getElementById(‘hs-login-overlay’);
var togglePass = document.getElementById(‘hs-toggle-pass’);
var form = document.getElementById(‘hs-login-form’);
var passInput = document.getElementById(‘hs-password’);
var userInput = document.getElementById(‘hs-username’);
var eyeIcon = document.getElementById(‘hs-eye-icon’);
var errorBox = document.getElementById(‘hs-login-error’);
var submitBtn = document.getElementById(‘hs-submit-btn’);
var submitLabel = document.getElementById(‘hs-submit-label’);
var isOpen = false;
if (!toggle || !panel || !overlay || !form) return;
// ============================================
// KONFIGURASI BACKEND — GANTI SESUAI ENDPOINT LO
// ============================================
var LOGIN_ENDPOINT = ‘/wp-json/hazkun/v1/login’; // <- ganti ke endpoint lo
var REDIRECT_AFTER_LOGIN = '/dashboard/'; // <- redirect setelah sukses
// ============================================
var EYE_OPEN = '’;
var EYE_OFF = ”;
function showError(msg) {
errorBox.textContent = msg;
errorBox.classList.add(‘show’);
}
function clearError() {
errorBox.textContent = ”;
errorBox.classList.remove(‘show’);
}
function setLoading(loading) {
submitBtn.disabled = loading;
submitLabel.textContent = loading ? ‘MEMPROSES…’ : ‘LOG IN’;
}
function openPanel() {
isOpen = true;
panel.style.display = ‘block’;
overlay.style.display = ‘block’;
toggle.style.background = ‘#dbb668’;
requestAnimationFrame(function () {
panel.style.opacity = ‘1’;
panel.style.transform = ‘translateY(0) scale(1)’;
});
setTimeout(function(){ if (userInput) userInput.focus(); }, 280);
}
function closePanel() {
isOpen = false;
panel.style.opacity = ‘0’;
panel.style.transform = ‘translateY(-8px) scale(.98)’;
toggle.style.background = ‘#c9a24b’;
setTimeout(function () {
if (!isOpen) {
panel.style.display = ‘none’;
overlay.style.display = ‘none’;
}
}, 250);
}
toggle.addEventListener(‘click’, function (e) {
e.stopPropagation();
if (isOpen) { closePanel(); } else { openPanel(); }
});
overlay.addEventListener(‘click’, closePanel);
document.addEventListener(‘keydown’, function (e) {
if (e.key === ‘Escape’ && isOpen) closePanel();
});
// Toggle password visibility
if (togglePass && passInput && eyeIcon) {
togglePass.addEventListener(‘click’, function () {
if (passInput.type === ‘password’) {
passInput.type = ‘text’;
eyeIcon.innerHTML = EYE_OFF;
togglePass.setAttribute(‘aria-label’, ‘Sembunyikan password’);
} else {
passInput.type = ‘password’;
eyeIcon.innerHTML = EYE_OPEN;
togglePass.setAttribute(‘aria-label’, ‘Tampilkan password’);
}
});
}
// Clear error on input
[userInput, passInput].forEach(function(el){
if (el) el.addEventListener(‘input’, clearError);
});
// Form submit handler
form.addEventListener(‘submit’, function (e) {
e.preventDefault();
clearError();
var username = userInput.value.trim();
var password = passInput.value;
var remember = form.remember.checked;
if (!username || !password) {
showError(‘Username dan password wajib diisi.’);
return;
}
if (password.length < 6) {
showError('Password minimal 6 karakter.');
return;
}
setLoading(true);
fetch(LOGIN_ENDPOINT, {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
credentials: 'same-origin',
body: JSON.stringify({ username: username, password: password, remember: remember })
})
.then(function(res){
return res.json().then(function(data){ return { ok: res.ok, status: res.status, data: data }; });
})
.then(function(r){
setLoading(false);
if (r.ok && r.data && r.data.success) {
window.location.href = (r.data.redirect || REDIRECT_AFTER_LOGIN);
} else {
showError((r.data && r.data.message) || 'Username atau password salah.');
}
})
.catch(function(err){
setLoading(false);
showError('Terjadi kesalahan koneksi. Coba lagi.');
console.error('[hs-login]', err);
});
});
// Prevent panel click from closing
panel.addEventListener('click', function (e) {
e.stopPropagation();
});
})();
Hazkun studio 
Leave a comment