-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
executable file
·169 lines (163 loc) · 6.45 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
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This is a wide open CSP declaration. Lock this down for production. -->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Spark Payments</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="app">
<!-- loader div -->
<transition name="fade">
<div id="loader" v-show="route === 'loader'"><span id="status" class="dark">loading...</span></div>
</transition>
<div id='content'>
<img class='logo' src='img/logo.png'>
<!-- CONNECTION -->
<transition name="fade">
<div id="connection" v-show="route === 'connection'">
<h1 class='red'>Not connected</h1>
<h1 class='dark'>Please check internet</h1>
</div>
</transition>
<!-- HOME SCREEN -->
<transition name="fade">
<div id="home" v-show="route === 'home'">
<div class="center">
<br>
<br>
<br>
<button @click="route = 'sale'">new sale</button>
<br>
<br>
<button @click="recentSales">recent sales</button>
<br>
<br>
<button @click="route = 'settings'">settings</button>
</div>
</div>
</transition>
<!-- SALE PAGE -->
<transition name="fade">
<div id="sale" v-show="route === 'sale'">
<div class="center">
<form autocomplete='off'>
<input v-model='usd' type='text' class='input pad' value='' disabled>
<br>
<input @click="add('1')" type='button' class='button number' value='1'>
<input @click="add('2')" type='button' class='button number' value='2'>
<input @click="add('3')" type='button' class='button number' value='3'>
<br>
<input @click="add('4')" type='button' class='button number' value='4'>
<input @click="add('5')" type='button' class='button number' value='5'>
<input @click="add('6')" type='button' class='button number' value='6'>
<br>
<input @click="add('7')" type='button' class='button number' value='7'>
<input @click="add('8')" type='button' class='button number' value='8'>
<input @click="add('9')" type='button' class='button number' value='9'>
<br>
<input @click="add('.')" type='button' class='button number' value='.'>
<input @click="add('0')" type='button' class='button number' value='0'>
<input @click="add('00')" type='button' class='button number' value='00'>
<br>
<input @click="cancel" type='button' class='button clear' value='cancel'>
<input @click="clear" type='button' class='button clear' value='clear'>
<input @click="purchase" type='button' class='button enter' value='enter'>
</form>
</div>
</div>
</transition>
<!-- PURCHASE PAGE -->
<transition name="fade">
<div id="purchase" v-show="route === 'nfc'">
<div class="secondary maintext info"><span class='price'>{{ price }}</span></div>
<img class="nfc" src='img/nfc.png'>
<p class="secondary maintext confirm">tap card to purchase</p>
<br>
<p class="secondary subtext">or send the amount above to <span class='dark'>@{{ account }}</span> with the following memo:<br>
<code class='dark memo'>{{ memo }}</code>
</p>
<br>
<div class='center'>
<button @click="cancel">cancel</button>
</div>
</div>
</transition>
<!-- CONFIRM -->
<transition name="fade">
<div id="confirm" v-show="route === 'confirmed'">
<br>
<p class="dark maintext confirm">Payment Confirmed!</p>
<br>
<br>
<img src='img/confirm_large.png'>
<br>
<br>
<p class="dark maintext confirm">Thank you!</p>
</div>
</transition>
<!-- PARTIAL -->
<transition name="fade">
<div id="partial" v-show="route === 'partial'">
<br>
<br>
<div class="primary maintext info"><span id='partialPrice'>partial price</span> remaining</div>
<p class="dark maintext confirm">Partial Payment!</p>
</div>
</transition>
<!-- RECENT SALES -->
<transition name="fade">
<div id="recent" v-show="route === 'recent'">
<br>
<br>
<div v-for="item in recent">
<div v-if="item.details.to === account && item.details.amount.includes('STEEM')" class="tx-wrap">
<p>
<span class="left">{{ `@${item.details.from}` }}</span>
<span class="right">{{ item.details.amount }}</span>
</p>
<br>
<p>
<span class="tx-detail left">{{ `id: ${item.details.memo}` }}</span>
<span class="tx-detail right">{{ `${item.timestamp.split('T')[0]} @ ${item.timestamp.split('T')[1]}` }}</span>
</p>
<br>
</div>
</div>
<div class='center'>
<button @click="cancel">back</button>
</div>
</div>
</transition>
<!-- SETTINGS PAGE -->
<transition name="fade">
<div id="settings" v-show="route === 'settings'">
<div class="center">
<form autocomplete='off'>
<p class="dark formtext" align="left">account</p>
<input v-model='account' type='text' class='input settings' value=''>
<button @click.prevent="save">save</button>
</form>
</div>
</div>
</transition>
</div>
</div>
<!-- LIBS -->
<script type="text/javascript" src="cordova.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="js/lib/steem.min.js"></script>
<script src="js/lib/aes.js"></script>
<script src="js/lib/utils.js"></script>
<script src="js/lib/steempay.api.js"></script>
<script src="js/lib/steempay.nfc.js"></script>
<!-- SCRIPTS -->
<script src="js/config.js"></script>
<script src="js/app.js"></script>
</body>
</html>