Skip to content

Commit 44e5ebf

Browse files
ariyaltharunariyaltharun
committed
Add UI
1 parent 4246f97 commit 44e5ebf

File tree

130 files changed

+63780
-174
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

130 files changed

+63780
-174
lines changed

‎Credit Card Validation Demo.html

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!DOCTYPE html>
2+
<!-- saved from url=(0032)http://127.0.0.1:5500/index.html -->
3+
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4+
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Credit Card Validation Demo</title>
7+
<link href="./Credit Card Validation Demo_files/css" rel="stylesheet">
8+
<link rel="stylesheet" href="./Credit Card Validation Demo_files/bootstrap.min.css">
9+
<link rel="stylesheet" type="text/css" href="./Credit Card Validation Demo_files/styles.css">
10+
<link rel="stylesheet" type="text/css" href="./Credit Card Validation Demo_files/demo.css">
11+
</head>
12+
13+
<body>
14+
<div class="container-fluid">
15+
16+
<div class="creditCardForm">
17+
<div class="heading">
18+
<h1>Confirm Purchase</h1>
19+
</div>
20+
<div class="payment">
21+
<form>
22+
<div class="form-group owner">
23+
<label for="owner">Owner</label>
24+
<input type="text" class="form-control" id="owner">
25+
</div>
26+
<div class="form-group CVV">
27+
<label for="cvv">CVV</label>
28+
<input type="text" class="form-control" id="cvv">
29+
</div>
30+
<div class="form-group" id="card-number-field">
31+
<label for="cardNumber">Card Number</label>
32+
<input type="text" class="form-control" id="cardNumber">
33+
</div>
34+
<div class="form-group" id="expiration-date">
35+
<label>Expiration Date</label>
36+
<select>
37+
<option value="01">January</option>
38+
<option value="02">February </option>
39+
<option value="03">March</option>
40+
<option value="04">April</option>
41+
<option value="05">May</option>
42+
<option value="06">June</option>
43+
<option value="07">July</option>
44+
<option value="08">August</option>
45+
<option value="09">September</option>
46+
<option value="10">October</option>
47+
<option value="11">November</option>
48+
<option value="12">December</option>
49+
</select>
50+
<select>
51+
<option value="16"> 2016</option>
52+
<option value="17"> 2017</option>
53+
<option value="18"> 2018</option>
54+
<option value="19"> 2019</option>
55+
<option value="20"> 2020</option>
56+
<option value="21"> 2021</option>
57+
</select>
58+
</div>
59+
<div class="form-group" id="credit_cards">
60+
<img src="./Credit Card Validation Demo_files/visa.jpg" id="visa">
61+
<img src="./Credit Card Validation Demo_files/mastercard.jpg" id="mastercard">
62+
<img src="./Credit Card Validation Demo_files/amex.jpg" id="amex">
63+
</div>
64+
<div class="form-group" id="pay-now">
65+
<button type="submit" class="btn btn-default" id="confirm-purchase">Confirm</button>
66+
</div>
67+
</form>
68+
</div>
69+
</div>
70+
71+
72+
73+
74+
</div>
75+
<script src="./Credit Card Validation Demo_files/jquery.min.js.download"></script>
76+
<script src="./Credit Card Validation Demo_files/bootstrap.min.js.download"></script>
77+
<script src="./Credit Card Validation Demo_files/jquery.payform.min.js.download" charset="utf-8"></script>
78+
<script src="./Credit Card Validation Demo_files/script.js.download"></script>
79+
<!-- Code injected by live-server -->
80+
<script>
81+
// <![CDATA[ <-- For SVG support
82+
if ('WebSocket' in window) {
83+
(function () {
84+
function refreshCSS() {
85+
var sheets = [].slice.call(document.getElementsByTagName("link"));
86+
var head = document.getElementsByTagName("head")[0];
87+
for (var i = 0; i < sheets.length; ++i) {
88+
var elem = sheets[i];
89+
var parent = elem.parentElement || head;
90+
parent.removeChild(elem);
91+
var rel = elem.rel;
92+
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
93+
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
94+
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
95+
}
96+
parent.appendChild(elem);
97+
}
98+
}
99+
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
100+
var address = protocol + window.location.host + window.location.pathname + '/ws';
101+
var socket = new WebSocket(address);
102+
socket.onmessage = function (msg) {
103+
if (msg.data == 'reload') window.location.reload();
104+
else if (msg.data == 'refreshcss') refreshCSS();
105+
};
106+
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
107+
console.log('Live reload enabled.');
108+
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
109+
}
110+
})();
111+
}
112+
else {
113+
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
114+
}
115+
// ]]>
116+
</script>
117+
118+
119+
120+
</body></html>

‎Credit Card Validation Demo_files/amex.jpg

2.53 KB
Loading

‎Credit Card Validation Demo_files/bootstrap.min.css

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Credit Card Validation Demo_files/bootstrap.min.js.download

Lines changed: 7 additions & 0 deletions
Large diffs are not rendered by default.

‎Credit Card Validation Demo_files/css

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/* cyrillic-ext */
2+
@font-face {
3+
font-family: 'Open Sans';
4+
font-style: normal;
5+
font-weight: 400;
6+
font-stretch: 100%;
7+
src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVIGxA.woff2) format('woff2');
8+
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
9+
}
10+
/* cyrillic */
11+
@font-face {
12+
font-family: 'Open Sans';
13+
font-style: normal;
14+
font-weight: 400;
15+
font-stretch: 100%;
16+
src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4kaVIGxA.woff2) format('woff2');
17+
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
18+
}
19+
/* greek-ext */
20+
@font-face {
21+
font-family: 'Open Sans';
22+
font-style: normal;
23+
font-weight: 400;
24+
font-stretch: 100%;
25+
src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4saVIGxA.woff2) format('woff2');
26+
unicode-range: U+1F00-1FFF;
27+
}
28+
/* greek */
29+
@font-face {
30+
font-family: 'Open Sans';
31+
font-style: normal;
32+
font-weight: 400;
33+
font-stretch: 100%;
34+
src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4jaVIGxA.woff2) format('woff2');
35+
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
36+
}
37+
/* hebrew */
38+
@font-face {
39+
font-family: 'Open Sans';
40+
font-style: normal;
41+
font-weight: 400;
42+
font-stretch: 100%;
43+
src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4iaVIGxA.woff2) format('woff2');
44+
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
45+
}
46+
/* math */
47+
@font-face {
48+
font-family: 'Open Sans';
49+
font-style: normal;
50+
font-weight: 400;
51+
font-stretch: 100%;
52+
src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B5caVIGxA.woff2) format('woff2');
53+
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0330, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2034-2037, U+2057, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2102, U+210A-210E, U+2110-2112, U+2115, U+2119-211D, U+2124, U+2128, U+212C-212D, U+212F-2131, U+2133-2138, U+213C-2140, U+2145-2149, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B6, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
54+
}
55+
/* symbols */
56+
@font-face {
57+
font-family: 'Open Sans';
58+
font-style: normal;
59+
font-weight: 400;
60+
font-stretch: 100%;
61+
src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B5OaVIGxA.woff2) format('woff2');
62+
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8B1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA88, U+1FA90-1FABD, U+1FABF-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8, U+1FB00-1FBFF;
63+
}
64+
/* vietnamese */
65+
@font-face {
66+
font-family: 'Open Sans';
67+
font-style: normal;
68+
font-weight: 400;
69+
font-stretch: 100%;
70+
src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4vaVIGxA.woff2) format('woff2');
71+
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
72+
}
73+
/* latin-ext */
74+
@font-face {
75+
font-family: 'Open Sans';
76+
font-style: normal;
77+
font-weight: 400;
78+
font-stretch: 100%;
79+
src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVIGxA.woff2) format('woff2');
80+
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
81+
}
82+
/* latin */
83+
@font-face {
84+
font-family: 'Open Sans';
85+
font-style: normal;
86+
font-weight: 400;
87+
font-stretch: 100%;
88+
src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format('woff2');
89+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
90+
}

‎Credit Card Validation Demo_files/demo.css

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
font: normal 18px sans-serif;
9+
color: #333;
10+
background-color: #eee;
11+
}
12+
13+
.container-fluid{
14+
padding:0;
15+
margin:0;
16+
}
17+
18+
header{
19+
box-sizing: border-box;
20+
text-align: center;
21+
width: 100%;
22+
padding: 25px 40px;
23+
background-color: #3A56B7;
24+
overflow: hidden;
25+
}
26+
27+
header .limiter{
28+
max-width: 1000px;
29+
margin: 0px auto;
30+
}
31+
32+
header h3{
33+
font: normal 24px/1.5 'Open Sans', sans-serif;
34+
float: left;
35+
color: #fff;
36+
margin:0;
37+
}
38+
39+
header a{
40+
color:#fff;
41+
float: right;
42+
text-decoration: none;
43+
display: inline-block;
44+
padding: 13px 50px;
45+
border-radius: 3px;
46+
font: bold 14px/1 'Open Sans', sans-serif;
47+
text-transform: uppercase;
48+
background-color:#F05283;
49+
opacity: 0.9;
50+
}
51+
52+
header a:hover{
53+
color: #fff;
54+
text-decoration: none;
55+
opacity: 1;
56+
}
57+
58+
@media (max-width: 850px) {
59+
60+
header h3{
61+
float: none;
62+
text-align: center;
63+
}
64+
65+
header a{
66+
margin-top: 20px;
67+
float: none;
68+
}
69+
70+
}

‎Credit Card Validation Demo_files/jquery.min.js.download

Lines changed: 5 additions & 0 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)