document.addEventListener('DOMContentLoaded', function() {
    const targetSlope = document.getElementById('target-slope');

    targetSlope.addEventListener('change', function() {
        const selected = this.options[this.selectedIndex];
        const title = document.getElementById('target-slope-title');
        const desc = document.getElementById('target-slope-desc');
        const img = document.getElementById('rampImg');

        title.querySelector('span').textContent = selected.dataset.slope;
        desc.innerHTML = selected.dataset.desc;
        img.src = 'images/slopes/' + selected.dataset.img;
    });
});
