Depassage/feline-focus-heatmap

1 2document.addEventListener('DOMContentLoaded', function() {3    const cells = document.querySelectorAll('.heatmap-cell');4    5    cells.forEach(cell => {6        const weight = parseFloat(cell.getAttribute('data-weight'));7        8        // Calculate color intensity based on weight (0-1)9        let bgClass;10        if (weight <= 0.2) {11            bgClass = 'bg-fuchsia-100';12        } else if (weight <= 0.4) {13            bgClass = 'bg-fuchsia-300';14        } else if (weight <= 0.6) {15            bgClass = 'bg-fuchsia-500';16        } else if (weight <= 0.8) {17            bgClass = 'bg-fuchsia-700';18        } else {19            bgClass = 'bg-fuchsia-900';20        }21        22        cell.classList.add(bgClass);23        24        // Add hover effects25        cell.addEventListener('mouseenter', function() {26            this.classList.add('shadow-lg', 'ring-2', 'ring-fuchsia-400');27        });28        29        cell.addEventListener('mouseleave', function() {30            this.classList.remove('shadow-lg', 'ring-2', 'ring-fuchsia-400');31        });32    });33// Initialize feather icons34    if (typeof feather !== 'undefined') {35        feather.replace();36    }37});