-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
116 lines (93 loc) · 4.69 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>php-pay-by-square</title>
<link rel="stylesheet" href="/assets/qr.css">
<link rel="stylesheet" href="/assets/qr-demo.css">
</head>
<body>
<a href="https://github.com/slatinsky/php-pay-by-square">
<h1>php-pay-by-square</h1>
</a>
<div class="row">
<div id="inputs">
<label for="price">Price</label>
<input type="text" id="price" name="price" value="5.01" />
<label for="note">Note</label>
<input type="text" id="note" name="note" value="pre jozka" />
<label for="recipient">Recipient</label>
<input type="text" id="recipient" name="recipient" value="jozko mrkvicka" />
<label for="iban">IBAN</label>
<input type="text" id="iban" name="iban" value="SK7700000000000000000000" />
<label for="swift">SWIFT</label>
<input type="text" id="swift" name="swift" value="CEKOSKBX" />
<label for="vs">VS</label>
<input type="text" id="vs" name="vs" value="00000002" />
<label for="ss">SS</label>
<input type="text" id="ss" name="ss" value="2022" />
<label for="cs">CS</label>
<input type="text" id="cs" name="cs" value="0000" />
<label for="cs">pixelsize <span id="pixelsize-preview"></span></label>
<input type="range" id="pixelsize" name="pixelsize" min="1" max="50" value="1" step="1" />
<label for="cs">pixelpadding <span id="pixelpadding-preview"></span></label>
<input type="range" id="pixelpadding" name="pixelpadding" min="0" max="50" value="0" step="1" />
</div>
<div>
<img class="qr-image" src="javascript:void(0)" alt="">
<div class="qr-bottom-txt">
<div><span class="qr-txt-blue">PAY</span> <span class="qr-txt-gray">by square</span></div>
<img class="qr-card" src="/assets/card.svg" alt="">
</div>
</div>
</div>
<pre id="code"></pre>
<script>
const price = document.querySelector('#price');
const note = document.querySelector('#note');
const recipient = document.querySelector('#recipient');
const iban = document.querySelector('#iban');
const swift = document.querySelector('#swift');
const vs = document.querySelector('#vs');
const ss = document.querySelector('#ss');
const cs = document.querySelector('#cs');
const pixelsize = document.querySelector('#pixelsize');
const pixelpadding = document.querySelector('#pixelpadding');
const pixelpaddingpreview = document.querySelector('#pixelpadding-preview');
const pixelsizepreview = document.querySelector('#pixelsize-preview');
pixelsize.addEventListener('focus', () => {
document.querySelector('.qr-image').classList.add('active');
});
pixelsize.addEventListener('blur', () => {
document.querySelector('.qr-image').classList.remove('active');
});
function refreshCode() {
pixelsizepreview.innerText = pixelsize.value;
pixelpaddingpreview.innerText = pixelpadding.value;
const qrCode = `${window.location.origin}/qr.php?price=${encodeURIComponent(price.value)}¬e=${encodeURIComponent(note.value)}&iban=${encodeURIComponent(iban.value)}&swift=${encodeURIComponent(swift.value)}&vs=${encodeURIComponent(vs.value)}&ss=${encodeURIComponent(ss.value)}&cs=${encodeURIComponent(cs.value)}&recipient=${encodeURIComponent(recipient.value)}&pixelsize=${encodeURIComponent(pixelsize.value)}&pixelpadding=${encodeURIComponent(pixelpadding.value)}`;
const qrImage = document.querySelector('.qr-image');
qrImage.src = qrCode;
const code = `<!DOCTYPE html>
<html lang="sk">
<head>
<link rel="stylesheet" href="${window.location.origin}/assets/qr.css">
</head>
<body>
<img class="qr-image" src="${qrCode}" alt="">
<div class="qr-bottom-txt">
<div><span class="qr-txt-blue">PAY</span> <span class="qr-txt-gray">by square</span></div>
<img class="qr-card" src="${window.location.origin}/assets/card.svg" alt="">
</div>
</body>
</html>`;
document.querySelector('pre').innerText = code;
}
refreshCode()
const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
input.addEventListener('input', refreshCode);
});
</script>
</body>
</html>