Quintas03/forest-fire-dynamics

1document.addEventListener('DOMContentLoaded', function() {2    // Scroll to content3    const scrollBtn = document.getElementById('scroll-btn');4    if (scrollBtn) {5        scrollBtn.addEventListener('click', function() {6            document.getElementById('methodology').scrollIntoView({7                behavior: 'smooth'8            });9        });10    }11 12    // Methodology card hover effects13    const methodCards = document.querySelectorAll('.method-card');14    methodCards.forEach(card => {15        card.addEventListener('mouseenter', function() {16            this.style.transform = 'translateY(-5px)';17        });18        19        card.addEventListener('mouseleave', function() {20            this.style.transform = 'translateY(0)';21        });22    });23 24    // Before/After Slider25    initComparisonSlider();26 27    // Scrollytelling for results section28    initScrollytelling();29});30 31function initComparisonSlider() {32    const sliders = document.querySelectorAll('.comparison-slider');33    34    sliders.forEach(slider => {35        const handle = slider.querySelector('.slider-handle');36        const afterImg = slider.querySelector('.after-image');37        38        let isDragging = false;39        40        function dragStart(e) {41            isDragging = true;42            updateSliderPosition(e);43        }44        45        function dragMove(e) {46            if (!isDragging) return;47            e.preventDefault();48            updateSliderPosition(e);49        }50        51        function dragEnd() {52            isDragging = false;53        }54        55        function updateSliderPosition(e) {56            const sliderRect = slider.getBoundingClientRect();57            let offsetX;58            59            if (e.type.includes('touch')) {60                offsetX = e.touches[0].clientX - sliderRect.left;61            } else {62                offsetX = e.clientX - sliderRect.left;63            }64            65            // Constrain to slider bounds66            offsetX = Math.max(0, Math.min(offsetX, sliderRect.width));67            68            // Update positions69            const percent = (offsetX / sliderRect.width) * 100;70            handle.style.left = `${percent}%`;71            afterImg.style.width = `${percent}%`;72        }73        74        // Mouse events75        handle.addEventListener('mousedown', dragStart);76        document.addEventListener('mousemove', dragMove);77        document.addEventListener('mouseup', dragEnd);78        79        // Touch events80        handle.addEventListener('touchstart', dragStart);81        document.addEventListener('touchmove', dragMove);82        document.addEventListener('touchend', dragEnd);83    });84}85 86function initScrollytelling() {87    const sections = document.querySelectorAll('#burnt-area, #recurrence, #wui');88    const observerOptions = {89        root: null,90        rootMargin: '0px 0px -70% 0px',91        threshold: 092    };93 94    const observer = new IntersectionObserver((entries) => {95        entries.forEach(entry => {96            if (entry.isIntersecting) {97                // Remove active class from all98                sections.forEach(section => {99                    const indicator = section.querySelector('.step-indicator');100                    if (indicator) indicator.classList.remove('step-indicator');101                });102                103                // Add active class to current104                const indicator = entry.target.querySelector('h3');105                if (indicator) indicator.classList.add('step-indicator');106            }107        });108    }, observerOptions);109 110    sections.forEach(section => {111        observer.observe(section);112    });113}114 115// Smooth scroll for anchor links116document.querySelectorAll('a[href^="#"]').forEach(anchor => {117    anchor.addEventListener('click', function (e) {118        e.preventDefault();119        const target = document.querySelector(this.getAttribute('href'));120        if (target) {121            target.scrollIntoView({122                behavior: 'smooth',123                block: 'start'124            });125        }126    });127});