-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathview_ticket.html
101 lines (88 loc) · 3.83 KB
/
view_ticket.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seat Selection</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#ticketInfo {
text-align: center;
background-color: #fff;
border: 2px solid #3199da;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
max-width: 400px;
margin: 0 auto;
}
#flightDetails {
font-size: 16px;
margin-top: 10px;
}
#ticketImage {
max-width: 100%;
margin-bottom: 20px;
}
#logo {
max-width: 80px;
}
#viewTicket {
display: block;
margin-top: 20px;
padding: 10px 20px;
background-color: #3199da;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
#viewTicket:hover {
background-color: #1c87c9;
}
</style>
</head>
<body>
<div id="ticketInfo">
<img id="ticketImage" src="images/ticket.png" alt="Ticket Image">
<h1 class="text-center" style="color:rgb(216, 65, 65)"><span>ℳƴ Ǻ<i class="bi bi-airplane"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-airplane" viewBox="0 0 16 16">
<path d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Zm.894.448C7.111 2.02 7 2.569 7 3v4a.5.5 0 0 1-.276.447l-5.448 2.724a.5.5 0 0 0-.276.447v.792l5.418-.903a.5.5 0 0 1 .575.41l.5 3a.5.5 0 0 1-.14.437L6.708 15h2.586l-.647-.646a.5.5 0 0 1-.14-.436l.5-3a.5.5 0 0 1 .576-.411L15 11.41v-.792a.5.5 0 0 0-.276-.447L9.276 7.447A.5.5 0 0 1 9 7V3c0-.432-.11-.979-.322-1.401C8.458 1.159 8.213 1 8 1c-.213 0-.458.158-.678.599Z"/>
</svg></i>ɾ</span> </h1>
<button id="viewTicket" style="display: block; margin: 0 auto;">View Your Ticket</button>
<div id="flightDetails"></div>
</div>
<script>
document.getElementById("viewTicket").addEventListener("click", function () {
const storedFlightInfo = localStorage.getItem("selectedFlight");
const storedNumberOfSeats = localStorage.getItem("numberOfSeats");
const storedTotalPrice = localStorage.getItem("totalPrice");
if (storedFlightInfo) {
const flightDetails = JSON.parse(storedFlightInfo);
const flightDetailsDiv = document.getElementById("flightDetails");
flightDetailsDiv.innerHTML = `
<h1>Your Flight Ticket</h1>
<p>Flight Name: ${flightDetails.flightName}</p>
<p>Origin: ${flightDetails.origin}</p>
<p>Destination: ${flightDetails.destination}</p>
<p>Departure: ${flightDetails.departure}</p>
<p>Return: ${flightDetails.return}</p>
<p>Total Price: ₹${storedTotalPrice}</p>
`;
ticketInfo.style.display = "block";
} else {
alert("No flight information found.");
}
});
</script>
</body>
</html>