html+js
Uploaded by
subhashmanju005html+js
Uploaded by
subhashmanju005<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customer Registration</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Customer Registration</h2>
<form id="registrationForm">
<div class="form-group">
<label for="customerName">Customer Name:</label>
<input type="text" id="customerName" name="customerName"
maxlength="50" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="mobileNumber">Mobile Number:</label>
<select id="countryCode" name="countryCode" required>
<option value="+91">+91</option>
<option value="+1">+1</option>
<!-- Add more country codes as needed -->
</select>
<input type="text" id="mobileNumber" name="mobileNumber" pattern="\
d{10}" required>
</div>
<div class="form-group">
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
</div>
<div class="form-group">
<label for="customerId">Customer ID:</label>
<input type="text" id="customerId" name="customerId" minlength="5"
maxlength="20" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" maxlength="30"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,}" required>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword"
maxlength="30" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,}" required>
</div>
<div class="form-group">
<input type="submit" value="Register">
<input type="reset" value="Reset">
</div>
</form>
<!-- Login Button -->
<div class="form-group">
<button id="loginButton">Already Registered? Login</button>
</div>
<div id="successMessage" class="success-message" style="display: none;">
Registration successful! You will be redirected to the login page
shortly.
</div>
</div>
<script>
// Handle registration form submission
document.getElementById('registrationForm').addEventListener('submit',
function(event) {
event.preventDefault();
// Show success message
document.getElementById('successMessage').style.display = 'block';
// Redirect to login page after 3 seconds
setTimeout(function() {
window.location.href = 'login.html'; // Redirect to login page
}, 3000);
});
// Handle login button click to redirect to login page
document.getElementById('loginButton').addEventListener('click', function()
{
window.location.href = 'login.html'; // Redirect to login page
});
</script>
</body>
</html>
-----------------------------------------------------------------------------------
-------------------------------------------------------
//login.html//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Login</h2>
<form id="loginForm">
<div class="form-group">
<label for="userId">User ID:</label>
<input type="text" id="userId" name="userId" minlength="5"
maxlength="20" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" maxlength="30"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,}" required>
</div>
<div class="form-group">
<input type="submit" value="Login">
</div>
</form>
<div id="errorMessage" class="error-message" style="display: none;">
Invalid input. Please check your User ID and Password.
</div>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit',
function(event) {
event.preventDefault();
const userId = document.getElementById('userId').value;
const password = document.getElementById('password').value;
// Hardcoded admin credentials for this example
const validAdminId = "admin123";
const validAdminPassword = "Admin@123";
// Check if the user is admin
if (userId === validAdminId && password === validAdminPassword) {
localStorage.setItem('userType', 'admin');
localStorage.setItem('username', userId);
window.location.href = 'admin-home.html'; // Redirect to Admin Home
Page
}
// Validate customer login based on pattern or use a back-end API
else if (userId.length >= 5 && userId.length <= 20 &&
password.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,}/)) {
localStorage.setItem('userType', 'customer');
localStorage.setItem('username', userId);
window.location.href = 'home.html'; // Redirect to Customer Home
Page
} else {
document.getElementById('errorMessage').style.display = 'block';
}
});
</script>
</body>
</html>
-----------------------------------------------------------------------------------
--------------------------------------------------------//home.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">
</head>
<body>
<header>
<div class="top-bar">
<div class="welcome-message">Welcome, <span
id="username">Customer</span></div>
<nav class="menu">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="reservation.html">Reservation</a></li>
<li><a href="billing.html">Billing Page</a></li>
<li><a href="history.html">History</a></li>
<li><a href="bookings.html">Bookings</a></li>
<li><a href="support.html">Contact Support</a></li>
<li><a href="index.html" id="logout">Logout</a></li>
</ul>
</nav>
</div>
</header>
<main>
<h1>Home Page</h1>
<p>Welcome to the customer dashboard. Here you can manage your
reservations, view billing information, check your booking history, and contact
support.</p>
</main>
<script>
// Fetch username from localStorage and update welcome message
const username = localStorage.getItem('username') || 'Customer';
document.getElementById('username').innerText = username;
// Logout functionality
document.getElementById('logout').addEventListener('click', function() {
localStorage.clear();
window.location.href = 'index.html'; // Redirect to login page
});
</script>
</body>
</html>
-----------------------------------------------------------------------------------
-------------------------------------------------------
//support.html//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customer Support</title>
<link rel="stylesheet" href="styles.css">
<script>
function logout() {
// Implement logout functionality
alert('Logged out successfully');
// Redirect to login page
window.location.href = 'login.html';
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('feedbackForm').addEventListener('submit',
function(event) {
event.preventDefault();
const feedback = document.getElementById('feedback').value;
if (feedback.trim() === '') {
alert('Please enter your feedback');
return;
}
// Simulate feedback submission
alert('Thank you for your feedback!');
document.getElementById('feedbackForm').reset();
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<span>Welcome, <span id="username">Username</span></span>
<button onclick="logout()">Logout</button>
</div>
<h1>Customer Support</h1>
<div class="contact-details">
<p><strong>Contact Number:</strong> +1-234-567-890</p>
<p><strong>Email:</strong> [email protected]</p>
<p><strong>Address:</strong> 123 Main Street, City, Country</p>
</div>
<div class="feedback-form">
<h2>Feedback</h2>
<form id="feedbackForm">
<div class="form-group">
<label for="feedback">Your Feedback:</label>
<textarea id="feedback" rows="4" placeholder="Enter your
feedback here..."></textarea>
</div>
<button type="submit">Submit Feedback</button>
</form>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------
-------------------------------------------------------
//bookings.html//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upcoming Bookings</title>
<link rel="stylesheet" href="styles.css">
<script>
document.addEventListener('DOMContentLoaded', () => {
const bookings = [
{ id: '001', checkIn: '2024-10-01', checkOut: '2024-10-05', room:
'101' },
{ id: '002', checkIn: '2024-11-10', checkOut: '2024-11-15', room:
'102' },
// Add more bookings as needed
];
const tableBody = document.querySelector('#bookingsTable tbody');
bookings.forEach(booking => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${booking.id}</td>
<td>${booking.checkIn}</td>
<td>${booking.checkOut}</td>
<td>${booking.room}</td>
`;
tableBody.appendChild(row);
});
});
</script>
</head>
<body>
<div class="container">
<h1>Upcoming Bookings</h1>
<table id="bookingsTable">
<thead>
<tr>
<th>Reservation ID</th>
<th>Check-in Date</th>
<th>Check-out Date</th>
<th>Room Number</th>
</tr>
</thead>
<tbody>
<!-- Booking entries will be dynamically added here -->
</tbody>
</table>
</div>
</body>
</html>
-----------------------------------------------------------------------------------
-------------------------------------------------------//index.html//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">
<span>Welcome, <span id="username">Username</span></span>
<button onclick="logout()">Logout</button>
</div>
<h1>Payment Page</h1>
<div class="form-group">
<label for="billAmount">Bill Amount:</label>
<input type="text" id="billAmount" value="$500" readonly>
</div>
<div class="form-group">
<label for="paymentMode">Mode of Payment:</label>
<select id="paymentMode">
<option value="debit">Debit</option>
<option value="credit">Credit</option>
</select>
</div>
<button onclick="proceedToPayment()">Pay Now</button>
<button onclick="goToHome()">Back to Home</button>
</div>
<div class="container hidden" id="cardDetails">
<h1>Enter Card Details</h1>
<div class="form-group">
<label for="cardNumber">Card Number:</label>
<input type="number" id="cardNumber" minlength="16" required>
</div>
<div class="form-group">
<label for="cardHolderName">Card Holder Name:</label>
<input type="text" id="cardHolderName" minlength="10" required>
</div>
<div class="form-group">
<label for="expiryDate">Expiry Date (MM/YY):</label>
<input type="text" id="expiryDate" placeholder="MM/YY" required>
</div>
<div class="form-group">
<label for="cvv">CVV:</label>
<input type="number" id="cvv" minlength="3" required>
</div>
<button onclick="makePayment()">Make Payment</button>
</div>
<script>
function logout() {
// Implement logout functionality
alert('Logged out successfully');
// Redirect to login page
window.location.href = 'login.html';
}
function proceedToPayment() {
document.querySelector('.container').classList.add('hidden');
document.getElementById('cardDetails').classList.remove('hidden');
}
function goToHome() {
// Redirect to home page
window.location.href = 'home.html';
}
function makePayment() {
const cardNumber = document.getElementById('cardNumber').value;
const cardHolderName = document.getElementById('cardHolderName').value;
const expiryDate = document.getElementById('expiryDate').value;
const cvv = document.getElementById('cvv').value;
if (cardNumber.length !== 16 || cardHolderName.length < 10 || !
expiryDate.match(/^\d{2}\/\d{2}$/) || cvv.length !== 3) {
alert('Please enter valid card details');
return;
}
// Simulate payment processing
alert('Payment Successful! Transaction ID: 1234567890');
// Redirect to invoice page or display invoice
window.location.href = 'invoice.html';
}
</script>
</body>
</html>
-----------------------------------------------------------------------------------
--------------------------------------------------------//history.html//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Booking History</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Booking History</h1>
<table id="bookingTable">
<thead>
<tr>
<th>Reservation ID</th>
<th>Check-in Date</th>
<th>Check-out Date</th>
<th>Room Number</th>
<th>Bill Amount</th>
<th>Booking Date</th>
</tr>
</thead>
<tbody>
<!-- Booking entries will be dynamically added here -->
</tbody>
</table>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const bookings = [
{ id: '001', checkIn: '2024-01-01', checkOut: '2024-01-05', room:
'101', bill: '500', bookingDate: '2023-12-01' },
{ id: '002', checkIn: '2024-02-10', checkOut: '2024-02-15', room:
'102', bill: '600', bookingDate: '2024-01-10' },
// Add more bookings as needed
];
const tableBody = document.querySelector('#bookingTable tbody');
bookings.forEach(booking => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${booking.id}</td>
<td>${booking.checkIn}</td>
<td>${booking.checkOut}</td>
<td>${booking.room}</td>
<td>${booking.bill}</td>
<td>${booking.bookingDate}</td>
`;
tableBody.appendChild(row);
});
});
</script>
</body>
</html>
-----------------------------------------------------------------------------------
-------------------------------------------------------//billing.html//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hotel Management System</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Hotel Management System</h1>
<div id="dashboard">
<button onclick="showBillingPage()">Billing</button>
</div>
<div id="billing-page" class="hidden">
<h2>Billing Page</h2>
<form id="billing-form">
<div class="form-group">
<label for="room-charges">Room Charges:</label>
<input type="number" id="room-charges" required>
</div>
<div class="form-group">
<label for="additional-services">Additional Services:</label>
<input type="number" id="additional-services" required>
</div>
<div class="form-group">
<label for="total">Total:</label>
<input type="number" id="total" readonly>
</div>
<div class="form-group">
<input type="button" value="Calculate Total"
onclick="calculateTotal()">
</div>
<div class="form-group">
<button type="button" onclick="showPaymentPage()">Pay
Bill</button>
</div>
</form>
</div>
<div id="payment-page" class="hidden">
<h2>Payment Page</h2>
<form id="payment-form">
<div class="form-group">
<label for="card-name">Name on Card:</label>
<input type="text" id="card-name" required>
</div>
<div class="form-group">
<label for="card-number">Card Number:</label>
<input type="text" id="card-number" required>
</div>
<div class="form-group">
<label for="expiry-date">Expiry Date:</label>
<input type="text" id="expiry-date" required>
</div>
<div class="form-group">
<label for="cvv">CVV:</label>
<input type="text" id="cvv" required>
</div>
<div class="form-group">
<input type="submit" value="Pay Now">
</div>
</form>
</div>
</div>
<script>
function showBillingPage() {
document.getElementById('dashboard').classList.add('hidden');
document.getElementById('billing-page').classList.remove('hidden');
}
function showPaymentPage() {
document.getElementById('billing-page').classList.add('hidden');
document.getElementById('payment-page').classList.remove('hidden');
}
function calculateTotal() {
const roomCharges = parseFloat(document.getElementById('room-
charges').value);
const additionalServices =
parseFloat(document.getElementById('additional-services').value);
const total = roomCharges + additionalServices;
document.getElementById('total').value = total;
}
</script>
</body>
</html>
-----------------------------------------------------------------------------------
--------------------------------------------------------//reservation.html//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reservation Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Make a Reservation</h2>
<form id="reservationForm">
<div class="form-group">
<label for="checkin">Check-in Date:</label>
<input type="date" id="checkin" name="checkin" required>
</div>
<div class="form-group">
<label for="checkout">Check-out Date:</label>
<input type="date" id="checkout" name="checkout" required>
</div>
<div class="form-group">
<label for="roomPreference">Room Preference:</label>
<select id="roomPreference" name="roomPreference" required>
<option value="">Select a room</option>
<option value="single">Single</option>
<option value="double">Double</option>
<option value="suite">Suite</option>
</select>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="contact">Contact:</label>
<input type="number" id="contact" name="contact" required>
</div>
<div class="form-group">
<input type="submit" value="Submit">
</div>
</form>
<div id="successMessage" class="success-message" style="display: none;">
Reservation Successful! Your Booking ID is <span
id="bookingId"></span>.
</div>
</div>
<script>
document.getElementById('reservationForm').addEventListener('submit',
function(event) {
event.preventDefault();
const bookingId = 'BKG' + Math.floor(Math.random() * 10000);
document.getElementById('bookingId').textContent = bookingId;
document.getElementById('successMessage').style.display = 'block';
});
</script>
</body>
</html>
-----------------------------------------------------------------------------------
-------------------------------------------------------
//admin-reservation//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reservation System</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Reservation System</h1>
<form id="reservation-form">
<div class="form-group">
<label for="reservation-status">Reservation Approval:</label>
<select id="reservation-status" name="reservation-status">
<option value="approved">Approve</option>
<option value="rejected">Reject</option>
</select>
</div>
<div class="form-group">
<input type="button" value="Submit" onclick="handleReservation()">
</div>
</form>
<div id="checkin-info" class="hidden">
<h2>User Check-In</h2>
<p id="user-checkin">User: John Doe</p>
<p id="room-type">Room Type: Deluxe</p>
</div>
</div>
<script>
function handleReservation() {
const status = document.getElementById('reservation-status').value;
const checkinInfo = document.getElementById('checkin-info');
if (status === 'approved') {
checkinInfo.classList.remove('hidden');
} else {
checkinInfo.classList.add('hidden');
}
}
</script>
</body>
</html>
-----------------------------------------------------------------------------------
-------------------------------------------------------
//admin-home.html//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Home Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="top-bar">
<div class="welcome-message">Welcome, Admin</div>
<div class="menu">
<ul>
<li><a href="admin-home.html">Admin Home</a></li>
<li><a href="admin-reservation.html">Reservation</a></li>
<li><a href="admin-billing.html">Billing Page</a></li>
<li><a href="admin-history.html">History</a></li>
<li><a href="admin-roomstatus.html">Room Status</a></li>
<li><a href="bookings.html">Bookings</a></li>
<li><a href="support.html">Contact Support/Feedback</a></li>
<li><a href="index.html" id="logout">Logout</a></li>
</ul>
</div>
</div>
<main>
<h1>Admin Dashboard</h1>
<p>Welcome to the admin dashboard. Use the menu to navigate through the
different sections.</p>
</main>
<script>
// Fetch admin username from localStorage and update welcome message
const username = localStorage.getItem('username') || 'Admin';
document.querySelector('.welcome-message').innerText = 'Welcome, ' +
username;
// Logout functionality
document.getElementById('logout').addEventListener('click', function() {
localStorage.clear();
window.location.href = 'index.html'; // Redirect to login page
});
</script>
</body>
</html>
-----------------------------------------------------------------------------------
-------------------------------------------------------
//admin-roomstatus.html//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - View Room Status</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>View Room Status</h1>
<div class="form-group">
<label for="customerId">Enter Customer ID:</label>
<input type="text" id="customerId" placeholder="Customer ID (13
digits)">
<button onclick="fetchRoomStatus()">Submit</button>
</div>
<table id="roomStatusTable" class="hidden">
<thead>
<tr>
<th>Room Number</th>
<th>Availability</th>
<th>Subfloor</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<!-- Room status entries will be dynamically added here -->
</tbody>
</table>
</div>
<script>
function fetchRoomStatus() {
const customerId = document.getElementById('customerId').value;
if (!customerId || customerId.length !== 13 || isNaN(customerId)) {
alert('Please enter a valid 13-digit Customer ID');
return;
}
// Simulated room status data for demonstration purposes
const roomStatus = [
{ roomNumber: '101', availability: 'vacant', subfloor: '1', price:
'$100' },
{ roomNumber: '102', availability: 'booked', subfloor: '1', price:
'$120' },
// Add more room statuses as needed
];
const tableBody = document.querySelector('#roomStatusTable tbody');
tableBody.innerHTML = ''; // Clear previous entries
roomStatus.forEach(room => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${room.roomNumber}</td>
<td style="color: ${room.availability === 'vacant' ? 'green' :
'red'};">${room.availability}</td>
<td>${room.subfloor}</td>
<td>${room.price}</td>
`;
tableBody.appendChild(row);
});
document.getElementById('roomStatusTable').classList.remove('hidden');
}
</script>
</body>
</html>
-----------------------------------------------------------------------------------
-------------------------------------------------------//admin-history.html//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - View User Booking History</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>View User Booking History</h1>
<div class="form-group">
<label for="userId">Enter UserID:</label>
<input type="text" id="userId" placeholder="UserID">
<button onclick="fetchBookingHistory()">View History</button>
</div>
<table id="bookingTable" class="hidden">
<thead>
<tr>
<th>Reservation ID</th>
<th>Check-in Date</th>
<th>Check-out Date</th>
<th>Room Number</th>
<th>Bill Amount</th>
<th>Booking Date</th>
</tr>
</thead>
<tbody>
<!-- Booking entries will be dynamically added here -->
</tbody>
</table>
</div>
<script>
function fetchBookingHistory() {
const userId = document.getElementById('userId').value;
if (!userId) {
alert('Please enter a UserID');
return;
}
// Simulated booking data for demonstration purposes
const bookings = [
{ id: '001', checkIn: '2024-01-01', checkOut: '2024-01-05', room:
'101', bill: '$500', bookingDate: '2023-12-01' },
{ id: '002', checkIn: '2024-02-10', checkOut: '2024-02-15', room:
'102', bill: '$600', bookingDate: '2024-01-10' },
// Add more bookings as needed
];
const tableBody = document.querySelector('#bookingTable tbody');
tableBody.innerHTML = ''; // Clear previous entries
bookings.forEach(booking => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${booking.id}</td>
<td>${booking.checkIn}</td>
<td>${booking.checkOut}</td>
<td>${booking.room}</td>
<td>${booking.bill}</td>
<td>${booking.bookingDate}</td>
`;
tableBody.appendChild(row);
});
document.getElementById('bookingTable').classList.remove('hidden');
}
</script>
</body>
</html>
-----------------------------------------------------------------------------------
-------------------------------------------------------
//admin-billing.html//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Billing System</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Admin Billing System</h1>
<div id="dashboard">
<button onclick="showBillingPage()">Billing</button>
</div>
<div id="billing-page" class="hidden">
<h2>Enter UserID for Invoice Generation</h2>
<form id="user-id-form">
<div class="form-group">
<label for="user-id">UserID:</label>
<input type="text" id="user-id" required>
</div>
<div class="form-group">
<input type="button" value="Generate Invoice"
onclick="generateInvoice()">
</div>
</form>
</div>
<div id="invoice-page" class="hidden">
<h2>Invoice Details</h2>
<p id="reservation-id">Reservation ID: 12345</p>
<p id="user-details">User: John Doe</p>
<p id="room-charges">Room Charges: ₹5000</p>
<p id="additional-services">Additional Services: ₹2000</p>
<p id="total">Total: ₹7000</p>
<button onclick="finalizeInvoice()">Finalize and Generate
Invoice</button>
</div>
</div>
<script>
function showBillingPage() {
document.getElementById('dashboard').classList.add('hidden');
document.getElementById('billing-page').classList.remove('hidden');
}
function generateInvoice() {
const userId = document.getElementById('user-id').value;
if (userId) {
// Simulate fetching invoice details based on UserID
document.getElementById('billing-page').classList.add('hidden');
document.getElementById('invoice-page').classList.remove('hidden');
} else {
alert('Please enter a valid UserID');
}
}
function finalizeInvoice() {
alert('Invoice has been finalized and generated.');
// Add logic to finalize and generate the invoice
}
</script>
</body>
</html>
You might also like
- QLD Police Service - Recruit Training ProgramNo ratings yetQLD Police Service - Recruit Training Program82 pages
- The Yellow Highlights Is The Comment of The CodeNo ratings yetThe Yellow Highlights Is The Comment of The Code6 pages
- Materi Workshop Laravel Stmik Widuri by WCC (Front End)No ratings yetMateri Workshop Laravel Stmik Widuri by WCC (Front End)19 pages
- 20-CP-09 FB and Gmail Sign Up and Sign inNo ratings yet20-CP-09 FB and Gmail Sign Up and Sign in19 pages
- Popular Delusions Issue December 2019 PDFNo ratings yetPopular Delusions Issue December 2019 PDF16 pages
- The Concept of Labor in Marx: International Journal of Political EconomyNo ratings yetThe Concept of Labor in Marx: International Journal of Political Economy32 pages
- ME 417/517 Spring 2010: Advanced Machine DesignNo ratings yetME 417/517 Spring 2010: Advanced Machine Design55 pages
- Experiment 1: Capacitor Course Learning Outcome:: SP025 Pre-Lab ModuleNo ratings yetExperiment 1: Capacitor Course Learning Outcome:: SP025 Pre-Lab Module20 pages
- CASE #19 Consolacion P. Chavez, Et - Al. Vs Maybank Philippines, Inc. G.R. No. 242852, July 29, 2019 FactsNo ratings yetCASE #19 Consolacion P. Chavez, Et - Al. Vs Maybank Philippines, Inc. G.R. No. 242852, July 29, 2019 Facts1 page
- The Jaguar The Aztecs Dark Side of PowerNo ratings yetThe Jaguar The Aztecs Dark Side of Power3 pages
- Pcnse7 Palo Alto Networks Network Security Engineer On Pan Os7No ratings yetPcnse7 Palo Alto Networks Network Security Engineer On Pan Os74 pages
- Organization Development and Change 10th 2015 BAB 1No ratings yetOrganization Development and Change 10th 2015 BAB 154 pages
- FL - Eternal Legions - Part2 - CompressedNo ratings yetFL - Eternal Legions - Part2 - Compressed37 pages
- Bray Adiel Angulo Alvan: Profile LanguagesNo ratings yetBray Adiel Angulo Alvan: Profile Languages2 pages
- G.R. No. L-32066. August 06, 1979 (Case Brief - Digest)No ratings yetG.R. No. L-32066. August 06, 1979 (Case Brief - Digest)2 pages
- Floor Installation of The Agru Sure Grip Concrete Protective Liner Floor Standard MethodNo ratings yetFloor Installation of The Agru Sure Grip Concrete Protective Liner Floor Standard Method6 pages
- Materi Workshop Laravel Stmik Widuri by WCC (Front End)Materi Workshop Laravel Stmik Widuri by WCC (Front End)
- The Concept of Labor in Marx: International Journal of Political EconomyThe Concept of Labor in Marx: International Journal of Political Economy
- Experiment 1: Capacitor Course Learning Outcome:: SP025 Pre-Lab ModuleExperiment 1: Capacitor Course Learning Outcome:: SP025 Pre-Lab Module
- CASE #19 Consolacion P. Chavez, Et - Al. Vs Maybank Philippines, Inc. G.R. No. 242852, July 29, 2019 FactsCASE #19 Consolacion P. Chavez, Et - Al. Vs Maybank Philippines, Inc. G.R. No. 242852, July 29, 2019 Facts
- Pcnse7 Palo Alto Networks Network Security Engineer On Pan Os7Pcnse7 Palo Alto Networks Network Security Engineer On Pan Os7
- Organization Development and Change 10th 2015 BAB 1Organization Development and Change 10th 2015 BAB 1
- G.R. No. L-32066. August 06, 1979 (Case Brief - Digest)G.R. No. L-32066. August 06, 1979 (Case Brief - Digest)
- Floor Installation of The Agru Sure Grip Concrete Protective Liner Floor Standard MethodFloor Installation of The Agru Sure Grip Concrete Protective Liner Floor Standard Method