script.js

document.addEventListener('DOMContentLoaded', function() {
    // Animate timeline items on scroll
const timelineItems = document.querySelectorAll('.timeline-item');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, { threshold: 0.1 });

    timelineItems.forEach(item => {
        observer.observe(item);
    });

    // Download as PNG
    document.getElementById('downloadPng').addEventListener('click', function() {
        const container = document.getElementById('timeline-container');
        
        html2canvas(container, {
            scale: 2,
            backgroundColor: '#F9FAFB',
            logging: false,
            useCORS: true
        }).then(canvas => {
            const link = document.createElement('a');
            link.download = 'huggingface-timeline.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        });
    });

    // Generate GIF
    document.getElementById('generateGif').addEventListener('click', function() {
        const preview = document.getElementById('gif-preview');
        const gifResult = document.getElementById('gif-result');
        const downloadGif = document.getElementById('downloadGif');
        const button = this;
        
        button.disabled = true;
        button.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Generating...';
        feather.replace();
        
        // Initialize GIF.js
        const gif = new GIF({
            workers: 2,
            quality: 10,
            width: 1200,
            height: 500,
            workerScript: 'https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.worker.js'
        });

        // Capture frames for the GIF
        const timelineContainer = document.getElementById('timeline-container');
        const items = timelineContainer.querySelectorAll('.timeline-item');
        
        // Reset animation
        items.forEach(item => item.classList.remove('visible'));
        
        // Capture each frame as items appear
        items.forEach((item, index) => {
            setTimeout(() => {
                item.classList.add('visible');
                
                setTimeout(() => {
                    html2canvas(timelineContainer, {
                        scale: 1,
                        backgroundColor: '#F9FAFB',
                        logging: false,
                        useCORS: true
                    }).then(canvas => {
                        gif.addFrame(canvas, {delay: 500});
                        
                        // If last frame, render the GIF
                        if (index === items.length - 1) {
                            gif.on('finished', function(blob) {
                                const url = URL.createObjectURL(blob);
                                gifResult.src = url;
                                preview.classList.remove('hidden');
                                
                                downloadGif.onclick = function() {
                                    const a = document.createElement('a');
                                    a.href = url;
                                    a.download = 'huggingface-timeline.gif';
                                    a.click();
                                };
                                
                                button.disabled = false;
                                button.innerHTML = '<i data-feather="film" class="mr-2"></i> Generate GIF';
                                feather.replace();
                            });
                            
                            gif.render();
                        }
                    });
                }, 600); // Wait for animation to complete
            }, index * 1000);
        });
    });
});