document.addEventListener('DOMContentLoaded', function() {
    fetch('/api/wps-table')
        .then(response => response.json())
        .then(data => {
            document.getElementById('intro-text').textContent = data.introduction;
            const functionsList = document.getElementById('functions-list');
            data.functions.forEach(functionItem => {
                const li = document.createElement('li');
                li.textContent = functionItem;
                functionsList.appendChild(li);
            });
            const tipsList = document.getElementById('tips-list');
            data.tips.forEach(tip => {
                const li = document.createElement('li');
                li.textContent = tip;
                tipsList.appendChild(li);
            });
        })
        .catch(error => console.error('Error fetching data:', error));
});