-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathpayment.html
143 lines (114 loc) · 4.32 KB
/
payment.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
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secure Payment - EasyShop.com</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1000px; /* Increased max-width for wider design */
margin: 0 auto;
padding: 40px;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
border-radius: 20px;
text-align: left;
}
h1 {
color: #3498db;
margin-bottom: 30px; /* Increased margin-bottom */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.qr-code {
width: 400px; /* Increased width */
height: 400px; /* Increased height */
background-size: cover;
background-position: center;
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Increased box-shadow */
cursor: pointer; /* Added cursor pointer */
}
.payment-info {
padding-left: 40px;
}
p {
margin-bottom: 20px;
line-height: 1.8;
color: #555;
}
.refund-link {
color: #e74c3c;
text-decoration: none;
font-weight: bold;
}
.refund-link:hover {
text-decoration: underline;
}
.security-info {
margin-top: 30px; /* Increased margin-top */
padding: 20px; /* Increased padding */
background-color: #2ecc71;
color: #fff;
border-radius: 10px; /* Adjusted border-radius */
}
.additional-feature {
margin-top: 40px; /* Increased margin-top */
font-size: 20px; /* Increased font-size */
color: #3498db;
text-decoration: underline;
cursor: pointer;
}
.additional-content {
margin-top: 20px;
color: #555;
display: none;
}
@media (max-width: 800px) {
.container {
padding: 30px; /* Adjusted padding */
}
.payment-details {
flex-direction: column;
align-items: center;
}
.qr-code {
width: 300px;
height: 300px;
margin-bottom: 20px;
}
.additional-feature {
margin-top: 30px;
font-size: 18px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Experience Secure Payment with EasyShop</h1>
<div class="payment-details">
<!-- Replace the background image URL with your Fampay or GPay or PayPal QR code URL -->
<div class="qr-code" style="background-image: url('your_qr_code_url_here.jpg');"></div>
<div class="payment-info">
<p>Embark on a seamless and secure shopping journey with EasyShop's enhanced payment process. Simply scan the updated QR code using your preferred payment app to complete your purchase.</p>
<p>For a detailed overview of our refund policy, please explore the <a href="refund.html" class="refund-link"
onclick="handleRefundLinkClick()">Refund Policy</a> page.</p>
<div class="security-info">Rest easy knowing your payment is encrypted and secure. Trust EasyShop for a worry-free shopping experience. We prioritize your security and confidentiality.</div>
<div class="additional-feature" onclick="toggleAdditionalContent()">Unlock Additional Features</div>
<div class="additional-content">
<p>Discover the latest features, including real-time transaction updates and personalized security settings, to enhance your shopping experience.</p>
<p>Need assistance? Our 24/7 customer support team is ready to help. Reach out at support@easyshop.com.</p>
</div>
</div>
</div>
</div>
</body>
</html>