-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
115 lines (115 loc) · 6 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
<!DOCTYPE html>
<!-- 1. use /tools/modularscale/index.html?15&px&1.25,1.125&web&text for font size and line height
2. lazyload images
3. remove font face, display block, opacity 1, visibility visible in critical inline css
4. set font display swap in font face in css -->
<html class="no-js" lang="ru">
<head>
<meta charset="utf-8" />
<!-- <meta http-equiv="x-ua-compatible" content="ie=edge" /> -->
<!-- https://content-security-policy.com/ --><meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval' https:; connect-src 'self' 'unsafe-inline' https:; frame-src 'self' https:; media-src 'self' https:; img-src 'self' 'unsafe-inline' https: data:" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>qrjs2 Demo Page</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
<style>
/*!
* @see {@link https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.css}
*/
.github-fork-ribbon{width:12.1em;height:12.1em;position:fixed;overflow:hidden;top:0;right:0;z-index:9999;pointer-events:none;font-size:13px;text-decoration:none;text-indent:-999999px;}.github-fork-ribbon.fixed{position:fixed;}.github-fork-ribbon:before,.github-fork-ribbon:after{position:absolute;display:block;width:15.38em;height:1.54em;top:3.23em;right:-3.23em;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.github-fork-ribbon:before{content:"";padding:.38em 0;background-color:#a00;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.15)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.15));background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.15));background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.15));-webkit-box-shadow:0 .15em .23em 0 rgba(0,0,0,0.5);box-shadow:0 .15em .23em 0 rgba(0,0,0,0.5);pointer-events:auto;}.github-fork-ribbon:after{content:attr(data-ribbon);color:#fff;font:700 1em "Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.54em;text-decoration:none;text-shadow:0 -.08em rgba(0,0,0,0.5);text-align:center;text-indent:0;padding:.15em 0;margin:.15em 0;border-width:.08em 0;border-style:dotted;border-color:#fff;border-color:rgba(255,255,255,0.7);}.github-fork-ribbon.left-top,.github-fork-ribbon.left-bottom{right:auto;left:0;}.github-fork-ribbon.left-bottom,.github-fork-ribbon.right-bottom{top:auto;bottom:0;}.github-fork-ribbon.left-top:before,.github-fork-ribbon.left-top:after,.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.left-bottom:after{right:auto;left:-3.23em;}.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.left-bottom:after,.github-fork-ribbon.right-bottom:before,.github-fork-ribbon.right-bottom:after{top:auto;bottom:3.23em;}.github-fork-ribbon.left-top:before,.github-fork-ribbon.left-top:after,.github-fork-ribbon.right-bottom:before,.github-fork-ribbon.right-bottom:after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
</style>
</head>
<body>
<h1 class="title">qrjs2 Demo</h1>
<p>QR code generating with vanilla js (SVG Element, Data URI SVG String, Data URI PNG String, HTML Table Element)</p>
<h2>Demo</h2>
<p>
<a href="https://codepen.io/englishextra/full/NpwjKW">codepen</a>
<a href="https://fiddle.jshell.net/englishextra/Lp37dL94/show/">jsfiddle</a>
<a href="https://output.jsbin.com/hobetuh/">jsbin</a>
</p>
<h2>CDN</h2>
<h4>jsDelivr</h4>
<p>
<code>https://cdn.jsdelivr.net/gh/englishextra/qrjs2@latest/js/qrjs2.min.js</code>
</p>
<h4>unpkg</h4>
<p>
<code>https://unpkg.com/qrjs2@latest/js/qrjs2.js</code>
</p>
<h2>Install</h2>
<h4>npm</h4>
<p>
<code>npm install qrjs2</code>
</p>
<h2>GitHub</h2>
<p><a href="https://github.com/englishextra/qrjs2">englishextra/qrjs2</a></p>
<h2>License</h2>
<p>Available under <a href="https://opensource.org/licenses/MIT">MIT License</a></p>
<a class="github-fork-ribbon right-top" href="https://github.com/englishextra/qrjs2" title="Fork me on GitHub" data-ribbon="Fork me on GitHub">Fork me on GitHub</a>
<script src="./js/qrjs2.js"></script>
<script>
(function (document) {
"use strict";
var div = document.createElement("div"),
text = "https://github.com",
qr = QRCode.generateSVG(text, {
ecclevel: "M",
fillcolor: "#F2F2F2",
textcolor: "#D13438",
margin: 4,
modulesize: 8
});
div.appendChild(qr);
document.body.appendChild(div);
})(document);
(function (root, document) {
if (document.implementation.hasFeature("http://www.w3.org/2000/svg","1.1")) {
var img = document.createElement("img"),
text = "https://github.com",
qr = QRCode.generateSVG(text, {
ecclevel: "M",
fillcolor: "#E6E6E6",
textcolor: "#486860",
margin: 4,
modulesize: 8
});
var XMLS = new XMLSerializer();
qr = XMLS.serializeToString(qr);
qr = "data:image/svg+xml;base64," + root.btoa(unescape(encodeURIComponent(qr)));
img.src = qr;
document.body.appendChild(img);
}
})("undefined" !== typeof window ? window : this, document);
(function (document) {
var img = document.createElement("img"),
text = "https://github.com",
qr = QRCode.generatePNG(text, {
ecclevel: "M",
format: "html",
fillcolor: "#CCCCCC",
textcolor: "#006F94",
margin: 4,
modulesize: 8
});
img.src = qr;
document.body.appendChild(img);
})(document);
(function (document) {
var div = document.createElement("div"),
text = "https://github.com",
qr = QRCode.generateHTML(text, {
ecclevel: "M",
fillcolor: "#DCDCDC",
textcolor: "#5C2E91",
margin: 4,
modulesize: 8
});
div.appendChild(qr);
document.body.appendChild(div);
})(document);
</script>
</body>
</html>