<script>
    async function fetchVouches() {
        try {
            const response = await fetch('http://localhost:3000/api/vouches'); // Replace with your server's URL
            const vouches = await response.json();

            const container = document.getElementById('vouches-container');
            container.innerHTML = '';

            vouches.forEach(vouch => {
                const vouchElement = document.createElement('div');
                vouchElement.style.color = '#d9d9d9';
                vouchElement.innerHTML = `
                    <strong>${vouch.user}</strong>: ${vouch.message} <em>(${new Date(vouch.date).toLocaleString()})</em>
                `;
                container.appendChild(vouchElement);
            });
        } catch (error) {
            console.error('Failed to fetch vouches:', error);
        }
    }

    // Fetch vouches on page load
    window.onload = fetchVouches;
</script>

<div id="vouches-container"></div>