66 lines
2.3 KiB
PHP
66 lines
2.3 KiB
PHP
<style>
|
|
/* Custom Alert dari atas */
|
|
#customCopyAlert {
|
|
position: fixed;
|
|
top: -100px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: #06c283ff; /* Warna hijau success */
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
z-index: 10000;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
#customCopyAlert.show {
|
|
top: 24px;
|
|
}
|
|
#customCopyAlert svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
</style>
|
|
|
|
<div id="customCopyAlert">
|
|
<div id="customCopyAlertIcon" style="display:flex;">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
</div>
|
|
<span id="customCopyAlertText">Berhasil disalin!</span>
|
|
</div>
|
|
|
|
<script>
|
|
function showCustomAlert(message, type = 'success') {
|
|
var alertBox = document.getElementById("customCopyAlert");
|
|
var alertText = document.getElementById("customCopyAlertText");
|
|
var alertIcon = document.getElementById("customCopyAlertIcon");
|
|
|
|
if (message) {
|
|
alertText.innerHTML = message;
|
|
} else {
|
|
alertText.innerText = "Berhasil disalin!";
|
|
}
|
|
|
|
if (type === 'warning' || type === 'error' || (message && message.toLowerCase().includes('sudah digunakan'))) {
|
|
alertBox.style.backgroundColor = '#f59e0b'; // Amber / Orange elegan
|
|
alertIcon.innerHTML = '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>';
|
|
} else {
|
|
alertBox.style.backgroundColor = '#06c283ff'; // Hijau success
|
|
alertIcon.innerHTML = '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>';
|
|
}
|
|
|
|
alertBox.classList.add("show");
|
|
|
|
setTimeout(function() {
|
|
alertBox.classList.remove("show");
|
|
}, 2800);
|
|
}
|
|
</script>
|