-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathcard.html
115 lines (104 loc) · 3.53 KB
/
card.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
<!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>Card</title>
<link rel="stylesheet" href="./card.css" />
</head>
<body id="bodyT">
<div id="container">
<div class="left-side">
<div class="nav-logo">
<div>
<span class="material-icons-outlined"></span>
<p onclick="back_page()" >Back</p>
</div>
</div>
<p class="title">Enter new card</p>
<div>
<p>Total Payable Amount <span id="getTotal"></span></p>
</div>
<div><p class="tId">Transaction Id: 307554246</p></div>
</div>
<div class="mid-hr"></div>
<div class="right-side">
<p>Cards (Credit/Debit)</p>
<div class="form">
<label for="">New Card</label><br /><br />
<input
id="input-card-num"
type="text"
placeholder="Enter Card Number"
onfocusout="function_alert('card-num', 'input-card-num')" required/><br />
<span id="card-num">Please Enter card Number</span><br />
<div class="mid-two">
<div>
<label for="">Expiry</label><br /><br />
<input
id="input-date"
type="text"
placeholder="MM/YY"
onfocusout="function_alert('date', 'input-date')"
/><br />
<span id="date">Please Enter Expiry date</span><br />
</div>
<div>
<label for="">CVV</label><br /><br />
<input
id="input-cvv"
type="text"
placeholder="Enter CVV"
onfocusout="function_alert('cvv', 'input-cvv')"
/><br />
<span id="cvv">Please Enter CVV</span><br />
</div>
</div>
<label for="">Name on Card</label><br /><br />
<input type="text" placeholder="Enter Name as on card" /><br /><br />
<div class="check">
<input type="checkbox" /> Save this option securely for
faster payment
</div>
<button onclick="go_to()">PROCEED</button>
</div>
</div>
</div>
<div id="footer">
<img src="https://i.ibb.co/BNHzRfx/Capture.png" alt="" srcset="" />
</div>
</body>
</html>
<script>
let back_page =() =>{
window.location.href = "./cart.html"
}
function function_alert(id, input) {
let check = document.getElementById(input);
let tem = document.getElementById(id);
if (check.value.length == 0) {
// console.log('tem:', tem)
tem.style.display = "block";
check.style.border = "1px solid red";
} else {
tem.style.display = "none";
check.style.border = "1px solid #8e8e8e";
}
}
function go_to() {
alert("Thank you! we are processing your payment");
window.location.href="successPage.html";
}
get_total();
function get_total() {
let checkOutData=JSON.parse(localStorage.getItem("Checkout_Data"))||0;
// console.log(checkOutData)
document.getElementById("getTotal").innerText= `₹ ${checkOutData.Total}`;
}
if(screen.width==1280)
{
let x=document.getElementById("bodyT");
x.style="zoom: 0.69;,-moz-transform: scale(0.69);"
}
</script>