Homepage ui - Posts - OneCompiler

html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home Page</title> <link rel="stylesheet" href="styles.css"> <script defer src="script.js"></script> </head> <body> <div class="container"> <div class="welcome"> Welcome <span id="username"></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">  </div> </div> </body> </html>

css:

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}

.container {
margin: 0 auto;
padding: 20px;
max-width: 800px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

.welcome {
text-align: right;
margin-bottom: 20px;
font-size: 1.1em;
color: #333;
}

.menu-bar {
background-color: #00796b;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
}

.menu-bar ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
}

.menu-bar li {
flex: 1;
}

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

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

.content {
margin-top: 20px;
padding: 20px;
background-color: #fafafa;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

h2 {
color: #00796b;
}

p {
color: #555;
line-height: 1.6;
}

js:

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';
}