OneCompiler

Pay ui

189
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Booking Service</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="welcome"> Welcome <span id="username"></span> <button id="logout">Logout</button> </div> <div class="menu-bar"> <ul> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="booking-service">Booking Service</a></li> <!-- Add more menu items as needed --> </ul> </div> <div class="content"> <!-- Booking Service content goes here --> <h2>Booking Service Page</h2> <p>Details about booking service...</p> <button id="pay-bill">Pay Bill</button> </div> </div> <div class="overlay" id="payment-overlay"> <div class="payment-form"> <h2>Payment Details</h2> <p>Bill Amount: <span id="bill-amount">$100.00</span></p> <label for="mode-of-payment">Mode of Payment:</label> <select id="mode-of-payment"> <option value="debit">Debit Card</option> <option value="credit">Credit Card</option> </select> <button id="pay-now">Pay Now</button> <button id="back-to-home">Back to Home</button> </div> </div> <div class="overlay" id="card-details-overlay"> <div class="payment-form"> <h2>Credit Card Details</h2> <label for="credit-card">Credit Card:</label> <input type="text" id="credit-card" readonly> <label for="card-no">Card No:</label> <input type="text" id="card-no" placeholder="Enter 16-digit card number"> <label for="card-holder-name">Card Holder Name:</label> <input type="text" id="card-holder-name"> <label for="expiry-date">Expiry Date (MM/YY):</label> <input type="text" id="expiry-date" placeholder="MM/YY"> <label for="cvv">CVV (3 digits):</label> <input type="text" id="cvv" placeholder="Enter CVV"> <button id="make-payment">Make Payment</button> </div> </div> <div class="overlay" id="payment-success-overlay"> <div class="payment-form"> <h2>Payment Successful</h2> <p>Booking ID: <span id="booking-id"></span></p> <button id="view-invoice">View Invoice</button> </div> </div> <script src="script.js"></script> </body> </html>

css:

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 8px;
}

.welcome {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}

.menu-bar {
background-color: #333;
color: white;
padding: 10px;
border-radius: 8px;
}

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

.menu-bar li {
margin-right: 20px;
}

.menu-bar li a {
color: white;
text-decoration: none;
}

.content {
margin-top: 20px;
}

.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}

.payment-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 8px;
width: 300px;
text-align: center;
}

.payment-form input,
.payment-form select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
}

.payment-form button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 10px;
cursor: pointer;
border-radius: 5px;
}

.payment-form button:hover {
background-color: #45a049;
}

.payment-form h2 {
margin-bottom: 15px;
}

js:

document.addEventListener('DOMContentLoaded', () => {
const username = localStorage.getItem('username') || 'User';
document.getElementById('username').textContent = username;

// Event listener for Logout button
document.getElementById('logout').addEventListener('click', () => {
    localStorage.removeItem('username');
    window.location.href = 'login.html'; // Redirect to login page after logout
});

// Event listener for Pay Bill button
document.getElementById('pay-bill').addEventListener('click', () => {
    document.getElementById('payment-overlay').style.display = 'block';
});

// Event listener for Back to Home button in Payment Overlay
document.getElementById('back-to-home').addEventListener('click', () => {
    document.getElementById('payment-overlay').style.display = 'none';
});

// Event listener for Pay Now button in Payment Overlay
document.getElementById('pay-now').addEventListener('click', () => {
    document.getElementById('payment-overlay').style.display = 'none';
    document.getElementById('card-details-overlay').style.display = 'block';
});

// Event listener for Make Payment button in Card Details Overlay
document.getElementById('make-payment').addEventListener('click', () => {
    const cardNo = document.getElementById('card-no').value;
    const cardHolderName = document.getElementById('card-holder-name').value;
    const expiryDate = document.getElementById('expiry-date').value;
    const cvv = document.getElementById('cvv').value;

    if (cardNo.length === 16 && cardHolderName !== '' && expiryDate.length === 5 && cvv.length === 3) {
        document.getElementById('card-details-overlay').style.display = 'none';
        document.getElementById('payment-success-overlay').style.display = 'block';

        // Simulating payment successful with a random booking ID (for demo purposes)
        const bookingId = Math.floor(Math.random() * 10000) + 1;
        document.getElementById('booking-id').textContent = bookingId;
    } else {
        alert('Please enter valid card details.');
    }
});

// Event listener for View Invoice button in Payment Success Overlay
document.getElementById('view-invoice').addEventListener('click', () => {
    alert('Viewing invoice...');
    // Redirect to invoice page or show invoice details as per your application logic
});

});