Book ui3 - 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">  </div> </div>

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

</body> </html> css: 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;
}

.booking-container {
background-color: #ffffff;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 100%;
max-width: 600px;
text-align: center;
margin: 0 auto;
}

.booking-container h1 {
font-weight: bold;
font-size: 36px;
margin-bottom: 20px;
font-family: 'Rubik', sans-serif;
color: #333333;
}

.booking-container form {
display: flex;
flex-direction: column;
align-items: center;
}

.booking-container .form {
margin-bottom: 15px;
width: 100%;
}

.booking-container form input,
.booking-container form select {
width: 100%;
padding: 12px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
margin-top: 5px;
}

.booking-container form label {
text-align: left;
display: block;
margin-bottom: 5px;
font-size: 16px;
color: #333333;
}

.booking-container .btn {
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
width: 100%;
max-width: 200px;
transition: background-color 0.3s ease;
}

.booking-container .btn:hover {
background-color: #0056b3;
}

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 = <div class="booking-container"> <h1>Book a Service</h1> <form action="/submit" method="POST"> <div class="form"> <input type="text" name="name" placeholder="Enter your name" required /> </div> <div class="form"> <input type="text" name="address" placeholder="Enter your address" required /> </div> <div class="form"> <input type="number" name="contact" placeholder="Enter your contact number" required /> </div> <div class="form"> <input type="text" name="content_description" placeholder="Enter your parcel content description" required /> </div> <div class="form"> <label for="post">Choose a delivery speed:</label> <select name="post" id="post" required> <option value="" disabled selected>Select delivery speed</option> <option value="standard">Standard</option> <option value="express">Express</option> </select> </div> <div class="form"> <label for="pickup">Pickup time:</label> <input type="date" id="pickup" name="pickup" required> </div> <div class="form"> <label for="dropOff">Drop-off time:</label> <input type="date" id="dropOff" name="dropOff" required> </div> <div> <button class="btn" id="pay" type="submit">Make a Payment</button> </div> <div> <button class="btn" type="submit">Book a Service</button> <button class="btn" type="reset">Reset</button> </div> </form> </div> ;
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';
}