<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Cinema Hall Ticket Booking System</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
main {
padding: 2rem;
}
section {
background: #fff;
padding: 2rem;
margin: 1rem 0;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
margin-top: 0;
}
label {
display: block;
margin: 0.5rem 0 0.2rem;
}
input, select {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #333;
color: #fff;
padding: 0.7rem 1.2rem;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem;
position: fixed;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<div id=”app”>
<header>
<h1>Cinema Hall Ticket Booking</h1>
</header>
<main>
<section id=”booking”>
<h2>Book Your Ticket</h2>
<form id=”bookingForm”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” required>
<label for=”email”>Email:</label>
<input type=”email” id=”email” required>
<label for=”phone”>Phone:</label>
<input type=”tel” id=”phone” required>
<label for=”movie”>Select Movie:</label>
<select id=”movie”>
<option value=”movie1″>Movie 1</option>
<option value=”movie2″>Movie 2</option>
<option value=”movie3″>Movie 3</option>
</select>
<label for=”seats”>Number of Seats:</label>
<input type=”number” id=”seats” min=”1″ required>
<button type=”submit”>Book Now</button>
</form>
</section>
<section id=”ticket” style=”display:none;”>
<h2>Your Ticket</h2>
<div id=”ticketDetails”></div>
<button onclick=”printTicket()”>Print Ticket</button>
</section>
</main>
<footer>
<p>© 2024 Cinema Hall. All rights reserved.</p>
</footer>
</div>
<script>
document.getElementById(‘bookingForm’).addEventListener(‘submit’, function(event) {
event.preventDefault();
const name = document.getElementById(‘name’).value;
const email = document.getElementById(’email’).value;
const phone = document.getElementById(‘phone’).value;
const movie = document.getElementById(‘movie’).value;
const seats = document.getElementById(‘seats’).value;
const ticketDetails = `
<h3>Booking Confirmation</h3>
<p><strong>Name:</strong> ${name}</p>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Phone:</strong> ${phone}</p>
<p><strong>Movie:</strong> ${movie}</p>
<p><strong>Seats:</strong> ${seats}</p>
`;
document.getElementById(‘ticketDetails’).innerHTML = ticketDetails;
document.getElementById(‘booking’).style.display = ‘none’;
document.getElementById(‘ticket’).style.display = ‘block’;
});
function printTicket() {
const ticketDetails = document.getElementById(‘ticketDetails’).innerHTML;
const printWindow = window.open(”, ”, ‘height=600,width=800’);
printWindow.document.write(‘<html><head><title>Print Ticket</title>’);
printWindow.document.write(‘</head><body >’);
printWindow.document.write(ticketDetails);
printWindow.document.write(‘</body></html>’);
printWindow.document.close();
printWindow.focus();
printWindow.print();
}
</script>
</body>
</html>