Home ui cg - Posts - OneCompiler

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500&family=Ubuntu:wght@700&display=swap" rel="stylesheet"> <title>Home Page</title> </head> <body> <div class="container"> <div class="welcome"> Welcome <span id="username">User</span> </div> <div class="menu-bar"> <ul> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="booking-service">Booking Service</a></li> <li><a href="#" id="tracking">Tracking</a></li> <li><a href="#" id="previous-booking">Previous Booking</a></li> <li><a href="#" id="contact-support">Contact Support</a></li> <li><a href="#" id="logout">Logout</a></li> </ul> </div> <div class="content"> <h2>Home Page</h2> <p>Welcome to the home page.</p> </div> </div>

<script src="script.js"></script>

</body> </html>

body {
font-family: 'Ubuntu', sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}

.container {
margin: 0 auto;
padding: 20px;
max-width: 800px;
}

.welcome {
text-align: right;
margin-bottom: 20px;
}

.menu-bar {
background-color: #333;
}

.menu-bar ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}

.menu-bar li {
float: left;
}

.menu-bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}

.menu-bar li a:hover {
background-color: #111;
}

.content {
margin-top: 20px;
}
document.addEventListener('DOMContentLoaded', () => {
const username = localStorage.getItem('username') || 'User';
document.getElementById('username').textContent = username;

document.getElementById('home').addEventListener('click', (event) => {
    event.preventDefault();
    loadContent('home');
});

document.getElementById('booking-service').addEventListener('click', (event) => {
    event.preventDefault();
    loadContent('booking');
});

document.getElementById('tracking').addEventListener('click', (event) => {
    event.preventDefault();
    loadContent('tracking');
});

document.getElementById('previous-booking').addEventListener('click', (event) => {
    event.preventDefault();
    loadContent('previous');
});

document.getElementById('contact-support').addEventListener('click', (event) => {
    event.preventDefault();
    loadContent('support');
});

document.getElementById('logout').addEventListener('click', (event) => {
    event.preventDefault();
    logout();
});

// Load home content by default
loadContent('home');

});

function loadContent(page) {
const contentDiv = document.querySelector('.content');
switch(page) {
case 'home':
contentDiv.innerHTML = '<h2>Home Page</h2><p>Welcome to the home page.</p>';
break;
case 'booking':
contentDiv.innerHTML = '<h2>Booking Service</h2><p>Proceed with your booking.</p>';
break;
case 'tracking':
contentDiv.innerHTML = '<h2>Tracking</h2><p>Navigate to the tracking screen.</p>';
break;
case 'previous':
contentDiv.innerHTML = '<h2>Previous Booking</h2><p>View your previous bookings.</p>';
break;
case 'support':
contentDiv.innerHTML = '<h2>Contact Support</h2><p>Redirecting to support page.</p>';
break;
default:
contentDiv.innerHTML = '<h2>Home Page</h2><p>Welcome to the home page.</p>';
break;
}
}

function logout() {
localStorage.removeItem('username');
window.location.href = 'login.html'; // Redirect to login page after logout
}