document.addEventListener('DOMContentLoaded', (event) => {
    const username = localStorage.getItem('username');
    if (username) {
        showWelcomeMessage(username);
    } else {
        document.getElementById('login-form').style.display = 'block';
    }
});

function login() {
    const username = document.getElementById('username').value;
    if (username) {
        localStorage.setItem('username', username);
        showWelcomeMessage(username);
    }
}

function showWelcomeMessage(username) {
    document.getElementById('login-form').style.display = 'none';
    document.getElementById('header').style.display = 'block';
    document.getElementById('menu-bar').style.display = 'block';
    document.getElementById('container').style.display = 'block';
    document.getElementById('welcome-text').textContent = `You are logged in as ${username}`;
}

function logout() {
    localStorage.removeItem('username');
    document.getElementById('login-form').style.display = 'block';
    document.getElementById('header').style.display = 'none';
    document.getElementById('menu-bar').style.display = 'none';
    document.getElementById('container').style.display = 'none';
}
