FubarKhaled/double-helix-deck

1document.addEventListener('DOMContentLoaded', () => {2    // Initialize Feather Icons3    feather.replace();4 5    // Slider Logic6    const slides = document.querySelectorAll('.slide');7    const prevBtn = document.getElementById('prevBtn');8    const nextBtn = document.getElementById('nextBtn');9    const currentSlideNum = document.getElementById('currentSlide');10    const totalSlidesNum = document.getElementById('totalSlides');11    const progressBar = document.getElementById('progressBar');12 13    let currentSlide = 0;14    const total = slides.length;15 16    // Set total slides display17    if(totalSlidesNum) totalSlidesNum.textContent = total;18 19    function showSlide(index) {20        // Bounds check21        if (index < 0) index = 0;22        if (index >= total) index = total - 1;23        24        currentSlide = index;25 26        // Hide all slides27        slides.forEach(slide => {28            slide.classList.add('hidden');29            slide.classList.remove('flex'); // Remove flex to reset layout if needed30        });31 32        // Show current slide33        const activeSlide = slides[currentSlide];34        activeSlide.classList.remove('hidden');35        36        // Ensure flex is applied if the slide has it in class list (from HTML definition)37        if (activeSlide.classList.contains('flex')) {38            activeSlide.classList.add('flex');39        }40 41        // Update text42        if(currentSlideNum) currentSlideNum.textContent = currentSlide + 1;43 44        // Update Progress Bar45        const progressPercentage = ((currentSlide + 1) / total) * 100;46        if(progressBar) progressBar.style.width = `${progressPercentage}%`;47 48        // Update Button States49        if(prevBtn) prevBtn.disabled = currentSlide === 0;50        if(nextBtn) nextBtn.disabled = currentSlide === total - 1;51 52        // Visual style update for disabled buttons53        if(prevBtn) prevBtn.style.opacity = currentSlide === 0 ? '0.5' : '1';54        if(nextBtn) nextBtn.style.opacity = currentSlide === total - 1 ? '0.5' : '1';55    }56 57    // Event Listeners58    if(nextBtn) {59        nextBtn.addEventListener('click', () => {60            showSlide(currentSlide + 1);61        });62    }63 64    if(prevBtn) {65        prevBtn.addEventListener('click', () => {66            showSlide(currentSlide - 1);67        });68    }69 70    // Keyboard Navigation71    document.addEventListener('keydown', (e) => {72        if (e.key === 'ArrowRight' || e.key === ' ') {73            if (currentSlide < total - 1) showSlide(currentSlide + 1);74        } else if (e.key === 'ArrowLeft') {75            if (currentSlide > 0) showSlide(currentSlide - 1);76        }77    });78 79    // Initialize first slide80    showSlide(0);81});