document.addEventListener('DOMContentLoaded', () => {
    fetch('/data')
        .then(response => response.json())
        .then(data => {
            //set title
            document.getElementById('head-title').textContent = data.tab_title;
            document.getElementById('body-title').textContent = data.page_title;
            //set page style
            document.documentElement.style.setProperty('--background-color', data.page_background);
            document.documentElement.style.setProperty('--background-image', `url(${data.page_background_img})`); 
            //set card style
            document.documentElement.style.setProperty('--card-blur', data.card_blur);
            document.documentElement.style.setProperty('--card-brightness', data.card_brightness);
            document.documentElement.style.setProperty('--card-saturation', data.card_saturation);
            document.documentElement.style.setProperty('--card-background', data.card_background);
            document.documentElement.style.setProperty('--card-border-radius', data.card_border_radius);
            //set shadow style
            document.documentElement.style.setProperty('--shadow-color', data.shadow_color);
            document.documentElement.style.setProperty('--shadow-offset-x', data.shadow_offset_x);
            document.documentElement.style.setProperty('--shadow-offset-y', data.shadow_offset_y);
            document.documentElement.style.setProperty('--shadow-blur', data.shadow_blur);
            document.documentElement.style.setProperty('--shadow-spread', data.shadow_spread);       
        })
        .catch(error => console.error('Error fetching data:', error));
});