Book cg - Posts - OneCompiler

<!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"> <link href="https://fonts.googleapis.com/css2?family=Rubik+Gemstones&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap" rel="stylesheet"> <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;
}

.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 Service Form Styles */
.booking-container {
display: flex;
border: 3px solid;
border-radius: 10px;
width: 70%;
margin: auto;
flex-direction: column;
align-self: center;
padding-top: 20px;
padding-bottom: 60px;
background-color: rgb(167, 163, 159);
}

.booking-container h1 {
font-weight: bold;
font-size: 50px;
margin-bottom: 60px;
text-align: center;
font-family: "Ubuntu", sans-serif;
}

.booking-container form {
text-align: center;
font-family: "Ubuntu", sans-serif;
}

.booking-container form label {
font-size: large;
}

.booking-container form input,
.booking-container form select {
text-align: center;
width: 50%;
padding: 10px;
margin: 5px auto;
font-size: 20px;
border: 1px solid gray !important;
border-radius: 9px;
font-family: "Ubuntu", sans-serif;
}

.booking-container button {
width: 50%;
margin: 5px auto;
border-radius: 9px;
}

.btn {
background-color: black;
color: white;
border-radius: 6px;
border-color: white;
font-size: 18px;
font-family: "Rubik Gemstones", cursive;
cursor: pointer;
margin: 15px 6px;
padding: 6px 9px;
}

.btn:hover {
background-color: rgb(50, 49, 49);
}

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" value="yash patidar" readonly placeholder="Enter your name" required /> </div> <div class="form"> <input type="text" name="address" value="Indore" readonly placeholder="Enter your address" required /> </div> <div class="form"> <input type="number" name="contact" value="9644429272" readonly placeholder="Enter your contact" 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><br> <select name="post" id="post" placeholder="postSpeed"> <option value="saab">standard</option> <option value="volvo">express</option> </select> <br> <label for="pickup">pickup time : </label><br> <input type="date" id="pickup" name="pickup"><br> <label for="dropOff">dropOff time : </label><br> <input type="date" id="dropOff" name="dropOff"><br> </div> <div> <label for="pay">Make a Payment : </label><br> <button class="btn" id="pay" type="submit" value="Submit">Payment</button> </div> <br/> <button class="btn" type="submit" value="Submit">Book a service</button> <button class="btn" type="reset" value="Reset">Reset</button> </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';
}