forked from daniyal4engg/expedia
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
134 lines (129 loc) · 4.62 KB
/
popup.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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Options</title>
<link rel="shortcut icon" href="https://github.com/daniyal4engg/expedia/blob/main/Images/logo.jpg?raw=true">
<style>
.paymentbox1{
height: 50%;
width: 50%;
margin: auto;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
padding: 20px;
}
.paynowflex{
display: flex;
justify-content: space-between;
}
.logoimageflex{
display: flex;
}
.paymentoption{
/* height: 30px; */
/* margin-top: 20px; */
padding: 20px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.refundablebox{
line-height: 0px;
margin-left: 10px;
}
.hotelfont3{
line-height: 5px;
}
.smallfont2{
font-size: 10px;
margin-left: 30px;
line-height: 1px;
}
.paynowbutton{
color: white;
background-color: blue;
padding: 0px 20px;
border-radius: 10px;
border: none;
cursor: pointer;
}
.paynowflex>div>li{
margin-left: 10px;
}
</style>
</head>
<body>
<div class="paymentbox1">
<div class="paymentoption"><span class="close">×</span>Your payment options</div> <hr>
<div class="logoimageflex">
<div>
<img src="https://a.travel-assets.com/travel-assets-manager/03052020/illustration__free__cancellation__sml.svg" alt="">
</div>
<div class="refundablebox">
<h4>Fully refundable before 5 Jan 2022</h4>
<p>You can change or cancel this stay if plans change. Because flexibility matters.</p>
</div>
</div>
<div>
<div></div>
<div class="paynowflex">
<div>
<h4>Pay now</h4>
<li>We will process your payment in your <br> local currency</li>
<li>You can use a valid Expedia coupon</li>
<li>Please note that Expedia will not issue a <br> tax invoice. You will receive a commercial <br> receipt for the purpose of the transaction</li>
<h4>Pay when you stay</h4>
<li>You will not be charged until your stay</li>
<li>Pay the property directly in their local <br> currency</li>
<li>Please note that Expedia will not issue a <br> tax invoice. You will receive a commercial <br> receipt for the purpose of the <br> transaction. Upon request, a tax invoice <br> would be issued by the property</li>
</div>
<div>
<h1 class="hotelfont3"> Rs. 7,500</h1>
<p class="smallfont2">per night</p>
<p class="smallfont2">Rs.8,400 total</p>
<p class="smallfont2">Includes taxes & fees</p>
<div class="">
<button class="paynowbutton"><h4>Pay Now </h4></button>
</div>
<br> <br> <br> <br> <br>
<h1 class="hotelfont3"> Rs. 7,500</h1>
<p class="smallfont2">per night</p>
<p class="smallfont2">Rs.8,400 total</p>
<p class="smallfont2">Includes taxes & fees</p>
<div class="">
<button class="paynowbutton"><h4>Pay at Property </h4></button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
document.querySelector(".paynowbutton").addEventListener("click",function(){
window.location.href = "payment_page.html";
});
</script>