58 lines
2.0 KiB
HTML
58 lines
2.0 KiB
HTML
{% load i18n %}
|
|
|
|
<!-- Toast Notification -->
|
|
<div id="copyToast" class="fixed bottom-4 right-4 z-50 transform translate-y-2 opacity-0 transition-all duration-300 pointer-events-none" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden pointer-events-auto min-w-[320px]">
|
|
<div class="flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gray-50">
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
|
|
<strong class="text-gray-900">{% trans "Success" %}</strong>
|
|
</div>
|
|
<button type="button" onclick="hideToast()" class="text-gray-400 hover:text-gray-600 transition">
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
<div class="px-4 py-3 text-sm text-gray-700">
|
|
{% blocktrans with text=text %}Copied "{{ text }}" to clipboard!{% endblocktrans %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let toastTimeout;
|
|
|
|
function showToast() {
|
|
const toast = document.getElementById('copyToast');
|
|
if (toast) {
|
|
// Clear any existing timeout
|
|
if (toastTimeout) {
|
|
clearTimeout(toastTimeout);
|
|
}
|
|
|
|
// Show toast
|
|
toast.classList.remove('translate-y-2', 'opacity-0', 'pointer-events-none');
|
|
toast.classList.add('translate-y-0', 'opacity-100');
|
|
|
|
// Auto-hide after 3 seconds
|
|
toastTimeout = setTimeout(() => {
|
|
hideToast();
|
|
}, 3000);
|
|
}
|
|
}
|
|
|
|
function hideToast() {
|
|
const toast = document.getElementById('copyToast');
|
|
if (toast) {
|
|
toast.classList.add('translate-y-2', 'opacity-0', 'pointer-events-none');
|
|
toast.classList.remove('translate-y-0', 'opacity-100');
|
|
}
|
|
}
|
|
|
|
// Show toast on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
showToast();
|
|
});
|
|
|
|
// Initialize icons
|
|
lucide.createIcons();
|
|
</script> |