fix: update final code deployment
This commit is contained in:
muthianura
@@ -0,0 +1,127 @@
|
||||
<style>
|
||||
#confirm-overlay {
|
||||
display: none; position: fixed; inset: 0; z-index: 99999;
|
||||
background: rgba(15,23,42,.4); backdrop-filter: blur(2px);
|
||||
align-items: center; justify-content: center; padding: 20px;
|
||||
}
|
||||
#confirm-overlay.show { display: flex; }
|
||||
#confirm-overlay.confirm-top {
|
||||
align-items: flex-start; justify-content: center;
|
||||
padding-top: 72px; background: transparent; backdrop-filter: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
#confirm-box {
|
||||
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
|
||||
width: 100%; max-width: 400px;
|
||||
box-shadow: 0 16px 48px rgba(15,23,42,.14);
|
||||
animation: confirmIn .18s ease; overflow: hidden;
|
||||
}
|
||||
#confirm-overlay.confirm-top #confirm-box {
|
||||
pointer-events: all; max-width: 460px;
|
||||
box-shadow: 0 8px 28px rgba(15,23,42,.12);
|
||||
}
|
||||
@keyframes confirmIn { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform: none; } }
|
||||
#confirm-box .cf-head {
|
||||
display: flex; gap: 14px; padding: 20px 22px 0; align-items: flex-start;
|
||||
}
|
||||
#confirm-box .cf-icon {
|
||||
width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
#confirm-box .cf-icon.warn { background: #fffbeb; border: 1px solid #fde68a; }
|
||||
#confirm-box .cf-icon.danger { background: #fef2f2; border: 1px solid #fecaca; }
|
||||
#confirm-box .cf-icon.info { background: #eff6ff; border: 1px solid #bfdbfe; }
|
||||
#confirm-box .cf-text { flex: 1; min-width: 0; }
|
||||
#confirm-box .cf-title { font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
|
||||
#confirm-box .cf-msg { font-size: 13px; color: #64748b; line-height: 1.55; }
|
||||
#confirm-box .cf-actions {
|
||||
display: flex; gap: 8px; padding: 18px 22px 20px; justify-content: flex-end;
|
||||
}
|
||||
#confirm-box .cf-btn {
|
||||
padding: 9px 16px; border-radius: 8px; font-size: 13px;
|
||||
font-weight: 600; cursor: pointer; border: 1px solid transparent;
|
||||
font-family: inherit; transition: background .15s;
|
||||
}
|
||||
#confirm-box .cf-cancel { background: #fff; color: #475569; border-color: #e2e8f0; }
|
||||
#confirm-box .cf-cancel:hover { background: #f8fafc; }
|
||||
#confirm-box .cf-ok { background: #1d4ed8; color: #fff; }
|
||||
#confirm-box .cf-ok:hover { background: #1e40af; }
|
||||
#confirm-box .cf-ok.danger { background: #dc2626; }
|
||||
#confirm-box .cf-ok.danger:hover { background: #b91c1c; }
|
||||
</style>
|
||||
<div id="confirm-overlay" role="dialog" aria-modal="true">
|
||||
<div id="confirm-box">
|
||||
<div class="cf-head">
|
||||
<div class="cf-icon warn" id="cf-icon"></div>
|
||||
<div class="cf-text">
|
||||
<div class="cf-title" id="cf-title">Konfirmasi</div>
|
||||
<div class="cf-msg" id="cf-msg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cf-actions">
|
||||
<button type="button" class="cf-btn cf-cancel" id="cf-cancel">Batal</button>
|
||||
<button type="button" class="cf-btn cf-ok" id="cf-ok">Lanjutkan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(){
|
||||
var overlay = document.getElementById('confirm-overlay');
|
||||
var iconEl = document.getElementById('cf-icon');
|
||||
var titleEl = document.getElementById('cf-title');
|
||||
var msgEl = document.getElementById('cf-msg');
|
||||
var btnOk = document.getElementById('cf-ok');
|
||||
var btnCancel = document.getElementById('cf-cancel');
|
||||
var resolver = null;
|
||||
|
||||
var icons = {
|
||||
warn: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round"><path d="M12 9v4m0 4h.01"/><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>',
|
||||
danger: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2" stroke-linecap="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/></svg>',
|
||||
info: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg>',
|
||||
move: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round"><path d="M12 2v20M2 12h20"/><circle cx="12" cy="12" r="3"/></svg>'
|
||||
};
|
||||
|
||||
function closeConfirm(result) {
|
||||
overlay.classList.remove('show', 'confirm-top');
|
||||
document.body.style.overflow = '';
|
||||
if (resolver) { var r = resolver; resolver = null; r(result); }
|
||||
}
|
||||
|
||||
btnCancel.addEventListener('click', function(){ closeConfirm(false); });
|
||||
btnOk.addEventListener('click', function(){ closeConfirm(true); });
|
||||
overlay.addEventListener('click', function(e){ if (e.target === overlay && !overlay.classList.contains('confirm-top')) closeConfirm(false); });
|
||||
document.addEventListener('keydown', function(e){
|
||||
if (!overlay.classList.contains('show')) return;
|
||||
if (e.key === 'Escape') closeConfirm(false);
|
||||
});
|
||||
|
||||
window.showConfirm = function(opts) {
|
||||
opts = opts || {};
|
||||
var danger = !!opts.danger;
|
||||
var kind = danger ? 'danger' : (opts.icon || 'warn');
|
||||
iconEl.className = 'cf-icon ' + (kind === 'move' || kind === 'info' ? kind : (danger ? 'danger' : 'warn'));
|
||||
iconEl.innerHTML = icons[kind] || icons.warn;
|
||||
titleEl.textContent = opts.title || 'Konfirmasi';
|
||||
msgEl.innerHTML = opts.message || 'Apakah Anda yakin?';
|
||||
btnOk.textContent = opts.confirmText || (danger ? 'Ya, Hapus' : 'Lanjutkan');
|
||||
btnCancel.textContent = opts.cancelText || 'Batal';
|
||||
btnOk.classList.toggle('danger', danger);
|
||||
overlay.classList.toggle('confirm-top', opts.position === 'top');
|
||||
if (opts.position !== 'top') document.body.style.overflow = 'hidden';
|
||||
overlay.classList.add('show');
|
||||
return new Promise(function(resolve){ resolver = resolve; });
|
||||
};
|
||||
|
||||
document.querySelectorAll('[data-confirm-logout]').forEach(function(el){
|
||||
el.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
showConfirm({
|
||||
title: 'Keluar dari akun',
|
||||
message: 'Sesi Anda akan diakhiri. Lanjutkan keluar?',
|
||||
confirmText: 'Ya, Keluar',
|
||||
danger: true
|
||||
}).then(function(ok){ if (ok) window.location = el.getAttribute('href'); });
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
@@ -0,0 +1,46 @@
|
||||
<?php
|
||||
$nama = htmlspecialchars($_SESSION['nama'] ?? 'Pengguna');
|
||||
$role = $_SESSION['role'] ?? '';
|
||||
$roleLabel = $role === 'superadmin' ? 'Super Admin' : (in_array($role, ['admin','user'], true) ? 'Admin' : ($role ? ucfirst($role) : 'User'));
|
||||
$parts = preg_split('/\s+/', trim($_SESSION['nama'] ?? 'U'));
|
||||
$initials = '';
|
||||
foreach (array_slice($parts, 0, 2) as $p) { $initials .= mb_strtoupper(mb_substr($p, 0, 1)); }
|
||||
if ($initials === '') $initials = 'U';
|
||||
$avatarClass = $role === 'superadmin' ? 'avatar-admin' : 'avatar-user';
|
||||
?>
|
||||
<style>
|
||||
.sb-account {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 10px; margin-bottom: 8px;
|
||||
background: var(--bg, #f0f4f8); border-radius: 10px;
|
||||
border: 1px solid var(--border, #e2e8f0);
|
||||
}
|
||||
.sb-avatar {
|
||||
width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 700; color: #fff;
|
||||
letter-spacing: .3px;
|
||||
}
|
||||
.sb-avatar.avatar-admin { background: linear-gradient(135deg, #7c3aed, #2563eb); }
|
||||
.sb-avatar.avatar-user { background: linear-gradient(135deg, #0891b2, #2563eb); }
|
||||
.sb-account-info { flex: 1; min-width: 0; text-align: left; }
|
||||
.sb-account-name {
|
||||
font-size: 13px; font-weight: 700; color: var(--text, #1e293b);
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.sb-account-role {
|
||||
display: inline-block; margin-top: 3px;
|
||||
font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.sb-account-role.role-admin { background: #ede9fe; color: #7c3aed; }
|
||||
.sb-account-role.role-user { background: #dbeafe; color: #2563eb; }
|
||||
</style>
|
||||
<div class="sb-account">
|
||||
<div class="sb-avatar <?= $avatarClass ?>"><?= $initials ?></div>
|
||||
<div class="sb-account-info">
|
||||
<div class="sb-account-name"><?= $nama ?></div>
|
||||
<span class="sb-account-role <?= $role === 'superadmin' ? 'role-admin' : 'role-user' ?>"><?= htmlspecialchars($roleLabel) ?></span>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user