File size: 4,419 Bytes
b25edb2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | document.addEventListener('DOMContentLoaded', function() {
// Copy button functionality
const copyButton = document.getElementById('copyButton');
const webhookUrl = 'https://webhook-image-generator.com/api/webhook/endpoint';
if (copyButton) {
copyButton.addEventListener('click', function() {
navigator.clipboard.writeText(webhookUrl).then(() => {
const originalText = copyButton.innerHTML;
copyButton.innerHTML = '<i data-feather="check" class="mr-2"></i> Copied!';
feather.replace();
setTimeout(() => {
copyButton.innerHTML = originalText;
feather.replace();
}, 2000);
});
});
}
// Sample images data (in a real app, this would come from an API)
const sampleImages = [
{
id: 1,
title: "User Registration Data",
timestamp: "2023-05-15T14:30:00Z",
imageUrl: "http://static.photos/technology/320x240/1"
},
{
id: 2,
title: "Payment Confirmation",
timestamp: "2023-05-15T13:45:00Z",
imageUrl: "http://static.photos/finance/320x240/2"
},
{
id: 3,
title: "System Alert",
timestamp: "2023-05-15T12:15:00Z",
imageUrl: "http://static.photos/abstract/320x240/3"
},
{
id: 4,
title: "New Order Received",
timestamp: "2023-05-15T11:20:00Z",
imageUrl: "http://static.photos/office/320x240/4"
},
{
id: 5,
title: "API Usage Report",
timestamp: "2023-05-15T10:05:00Z",
imageUrl: "http://static.photos/data/320x240/5"
},
{
id: 6,
title: "Security Notification",
timestamp: "2023-05-15T09:30:00Z",
imageUrl: "http://static.photos/cybersecurity/320x240/6"
}
];
// Render images in gallery
const imageGallery = document.getElementById('imageGallery');
const noImagesMessage = document.getElementById('noImagesMessage');
if (imageGallery && sampleImages.length > 0) {
noImagesMessage.classList.add('hidden');
sampleImages.forEach((img, index) => {
// Add slight delay for staggered animation
setTimeout(() => {
const imageCard = document.createElement('div');
imageCard.className = 'bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow animate-fade-in';
imageCard.innerHTML = `
<div class="relative">
<img src="${img.imageUrl}" alt="${img.title}" class="w-full h-48 object-cover">
<div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">
ID: ${img.id}
</div>
</div>
<div class="p-4">
<h3 class="font-semibold text-gray-800 mb-1">${img.title}</h3>
<p class="text-gray-600 text-sm">${formatDate(img.timestamp)}</p>
<div class="mt-3 flex justify-between">
<a href="${img.imageUrl}" download class="text-indigo-600 hover:text-indigo-800 text-sm flex items-center">
<i data-feather="download" class="mr-1 w-4 h-4"></i> Download
</a>
<a href="#" class="text-gray-500 hover:text-gray-700 text-sm flex items-center">
<i data-feather="share-2" class="mr-1 w-4 h-4"></i> Share
</a>
</div>
</div>
`;
imageGallery.appendChild(imageCard);
feather.replace();
}, index * 150);
});
} else if (noImagesMessage) {
noImagesMessage.classList.remove('hidden');
}
// Format date helper
function formatDate(dateString) {
const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
return new Date(dateString).toLocaleDateString(undefined, options);
}
}); |