-
Notifications
You must be signed in to change notification settings - Fork 84
/
index.html
149 lines (134 loc) · 3.04 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><qr-code></title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 32px;
height: 100vh;
background: #eee;
font-family: Avenir;
}
hr {
margin: 32px 0;
}
.row0 {
display: flex;
justify-content: center;
}
.qr input {
font-size: 1.2em;
width: 300px;
padding: 4px 8px;
}
.options label {
display: inline-block;
width: 150px;
text-align: right;
}
.options input,
.options select {
margin: 4px 4px;
padding: 2px 4px;
font-size: 15px;
}
.options #scalable {
display: none;
}
/* custom styles */
.row1 {
display: flex;
flex-direction: column;
}
.row1 .qr-list {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
/* Rounded QR code */
.row1 .qr-list qr-code:first-child::part(svg) {
border-radius: 30px;
}
/* Rotated QR code */
.row1 .qr-list qr-code:nth-child(2)::part(svg) {
transform: scale(1.2) rotate(-10deg);
}
/* Green QR code */
.row1 .qr-list qr-code:last-child::part(table) {
border-color: #141925;
}
.row1 .qr-list qr-code:last-child::part(module-bg) {
background: #141925;
}
.row1 .qr-list qr-code:last-child::part(module-fg) {
background: #95e6cb;
}
</style>
</head>
<body>
<div class="row0">
<div class="qr">
<input
type="text"
value="Data encoded in the QR code..."
oninput="document.querySelector('qr-code').data = this.value"
autofocus
/>
<br><br>
<!-- Using the Web Component -->
<qr-code data="Data encoded in the QR code..." format="html"></qr-code>
</div>
<div class="options">
<label for="format">Format</label>
<select
id="format"
onchange="document.querySelector('qr-code').format = this.value;
document.querySelector('#scalable').style.display = this.value === 'svg' ? 'inline' : 'none'">
<option value="html" selected>HTML</option>
<option value="png">PNG</option>
<option value="svg">SVG</option>
</select>
<br>
<label for="modulesize">Module size</label>
<input
id="modulesize"
type="number"
value="5"
oninput="document.querySelector('qr-code').modulesize = this.value"
min=0
max=30
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
/>
<small id="scalable">"scalable" size if set to 0</small>
<br>
<label for="margin">Margin</label>
<input
id="margin"
type="number"
value="4"
oninput="document.querySelector('qr-code').margin = this.value"
min=0
max=30
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
/>
</div>
</div>
<hr />
<div class="row1">
<h2>Custom styles</h2>
<div class="qr-list">
<qr-code data="Rounded QR code" format="svg"></qr-code>
<qr-code data="Rotated QR code" format="svg"></qr-code>
<qr-code data="Green QR code" format="html"></qr-code>
</div>
</div>
<!-- Polyfill and Web Component -->
<script src="webcomponents-lite.js"></script>
<script src="../dist/index.js"></script>
</body>
</html>