document.addEventListener('DOMContentLoaded', () => {
    // Add color picker to DOM
    const colorPicker = document.createElement('div');
    colorPicker.className = 'color-picker-container';
    colorPicker.innerHTML = `
        <input type="color" id="bgColorPicker" value="#ffffff">
        <label for="bgColorPicker">Change BG Color</label>
    `;
    document.body.appendChild(colorPicker);

    // Color picker functionality
    const bgColorPicker = document.getElementById('bgColorPicker');
    bgColorPicker.addEventListener('input', (e) => {
        document.body.style.backgroundColor = `${e.target.value}33`; // Add transparency
    });

// Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });

    // Add animation class to elements when they come into view
    const animateOnScroll = () => {
        const elements = document.querySelectorAll('.animate-on-scroll');
        elements.forEach(element => {
            const elementPosition = element.getBoundingClientRect().top;
            const screenPosition = window.innerHeight / 1.3;
            
            if (elementPosition < screenPosition) {
                element.classList.add('fade-in');
            }
        });
    };

    window.addEventListener('scroll', animateOnScroll);
    animateOnScroll(); // Run once on page load
});