-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
82 lines (82 loc) · 3.95 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Credit Card Example</title>
<link rel="stylesheet" type="text/css" href="./vendors/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./dist/css/main.css">
<script src="./vendors/rivets.bundled.min.js" type="text/javascript"></script>
<script src="./dist/js/main.js" type="text/javascript"></script>
</head>
<body>
<a href="https://github.com/hsnaydd/credit-card-example"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
<div class="container pt-5" id="rivets-credit-card-container">
<h1>Credit Card Example</h1>
<div class="row py-5">
<div class="col-md-6">
<form>
<div class="row">
<div class="col-sm">
<div class="form-group">
<label for="formExmName">Full Name</label>
<input type="text" class="form-control" id="formExmName" rv-value="creditCard.name">
</div>
</div>
<div class="col-sm">
<label for="formExmCardNo">Card Number</label>
<input type="text" class="form-control" id="formExmCardNo" rv-on-input="masks.creditCard" data-max-char="16">
</div>
</div>
<div class="row">
<div class="col-sm">
<label for="formExpMonth">Month</label>
<select class="form-control" id="formExpMonth" rv-value="creditCard.expireMonth">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="col-sm">
<label for="formExpYear">Year</label>
<select class="form-control" id="formExpYear" rv-value="creditCard.expireYear">
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
</select>
</div>
<div class="col-sm">
<label for="formExpCcv">CCV</label>
<input type="text" class="form-control" id="formExpCcv" rv-on-focus="handlers.turnCard" rv-on-blur="handlers.turnCard" rv-on-input="masks.number" data-max-char="3">
</div>
</div>
</form>
</div>
<div class="col-md-6 text-center">
<div class="c-credit-card">
<div class="c-credit-card__card" rv-class-is-backface="creditCard.isBackface">
<div class="c-credit-card__face c-credit-card__face--front">
<span class="c-credit-card__prop c-credit-card__name">{ creditCard.name | defaultText 'Hasan Aydoğdu' }</span>
<span class="c-credit-card__prop c-credit-card__expire">
{ creditCard.expireMonth | defaultText '3' }
/
{ creditCard.expireYear | defaultText '2017' }
</span>
<span class="c-credit-card__prop c-credit-card__number">{ creditCard.number | defaultText '*** *** *** ***' }</span>
<span class="c-credit-card__prop c-credit-card__chip"></span>
</div>
<div class="c-credit-card__face c-credit-card__face--back">
<span class="c-credit-card__prop c-credit-card__ccv js-credit-card-ccv">{ creditCard.ccv | defaultText '123' }</span>
<span class="c-credit-card__prop c-credit-card__band"></span>
<span class="c-credit-card__prop c-credit-card__ccv-band"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>