-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
89 lines (73 loc) · 12.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,maximum-scale=2">
<title>How to use it | qrcode-bookmarklet</title>
<link rel="canonical" href="http://stealthefish.com/qrcode-bookmarklet/" />
<meta name="description" content="A bookmarklet that generates a qrcode containing the current URL." />
<meta property="og:description" content="A bookmarklet that generates a qrcode containing the current URL." />
<meta property="og:image" content="http://stealthefish.com/qrcode-bookmarklet/demo-poster.jpg" />
<meta property="og:image:width" content="1694" />
<meta property="og:image:height" content="1404" />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="qrcode-bookmarklet" />
<meta property="og:title" content="qrcode-bookmarklet" />
<meta property="og:url" content="http://stealthefish.com/qrcode-bookmarklet/" />
<script type="application/ld+json">
{"name":"qrcode-bookmarklet","description":"A bookmarklet that generates a qrcode containing the current URL.","@type":"WebSite","url":"http://stealthefish.com/qrcode-bookmarklet/","headline":"How to use it","@context":"http://schema.org"}
</script>
<style>
.highlight table td{padding:5px}.highlight table pre{margin:0}.highlight .cm{color:#777772;font-style:italic}.highlight .cp{color:#797676;font-weight:bold}.highlight .c1{color:#777772;font-style:italic}.highlight .cs{color:#797676;font-weight:bold;font-style:italic}.highlight .c,.highlight .cd{color:#777772;font-style:italic}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .gd{color:#000000;background-color:#ffdddd}.highlight .ge{color:#000000;font-style:italic}.highlight .gr{color:#aa0000}.highlight .gh{color:#797676}.highlight .gi{color:#000000;background-color:#ddffdd}.highlight .go{color:#888888}.highlight .gp{color:#555555}.highlight .gs{font-weight:bold}.highlight .gu{color:#aaaaaa}.highlight .gt{color:#aa0000}.highlight .kc{color:#000000;font-weight:bold}.highlight .kd{color:#000000;font-weight:bold}.highlight .kn{color:#000000;font-weight:bold}.highlight .kp{color:#000000;font-weight:bold}.highlight .kr{color:#000000;font-weight:bold}.highlight .kt{color:#445588;font-weight:bold}.highlight .k,.highlight .kv{color:#000000;font-weight:bold}.highlight .mf{color:#009999}.highlight .mh{color:#009999}.highlight .il{color:#009999}.highlight .mi{color:#009999}.highlight .mo{color:#009999}.highlight .m,.highlight .mb,.highlight .mx{color:#009999}.highlight .sb{color:#d14}.highlight .sc{color:#d14}.highlight .sd{color:#d14}.highlight .s2{color:#d14}.highlight .se{color:#d14}.highlight .sh{color:#d14}.highlight .si{color:#d14}.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .s{color:#d14}.highlight .na{color:#008080}.highlight .bp{color:#797676}.highlight .nb{color:#0086B3}.highlight .nc{color:#445588;font-weight:bold}.highlight .no{color:#008080}.highlight .nd{color:#3c5d5d;font-weight:bold}.highlight .ni{color:#800080}.highlight .ne{color:#990000;font-weight:bold}.highlight .nf{color:#990000;font-weight:bold}.highlight .nl{color:#990000;font-weight:bold}.highlight .nn{color:#555555}.highlight .nt{color:#000080}.highlight .vc{color:#008080}.highlight .vg{color:#008080}.highlight .vi{color:#008080}.highlight .nv{color:#008080}.highlight .ow{color:#000000;font-weight:bold}.highlight .o{color:#000000;font-weight:bold}.highlight .w{color:#bbbbbb}.highlight{background-color:#f8f8f8}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}body{box-sizing:border-box;color:#373737;background:#212121;font-size:16px;font-family:'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6{margin:10px 0;font-weight:700;color:#222222;font-family:'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;letter-spacing:-1px}h1{font-size:36px;font-weight:700}h2{padding-bottom:10px;font-size:32px;background:url("https://pages-themes.github.io/slate/assets/images/bg_hr.png") repeat-x bottom}h3{font-size:24px}h4{font-size:21px}h5{font-size:18px}h6{font-size:16px}p{margin:10px 0 15px 0}footer p{color:#f2f2f2}a{text-decoration:none;color:#0F79D0;text-shadow:none;transition:color 0.5s ease;transition:text-shadow 0.5s ease;-webkit-transition:color 0.5s ease;-webkit-transition:text-shadow 0.5s ease;-moz-transition:color 0.5s ease;-moz-transition:text-shadow 0.5s ease;-o-transition:color 0.5s ease;-o-transition:text-shadow 0.5s ease;-ms-transition:color 0.5s ease;-ms-transition:text-shadow 0.5s ease}a:hover,a:focus{text-decoration:underline}footer a{color:#F2F2F2;text-decoration:underline}em,cite{font-style:italic}strong{font-weight:bold}img{position:relative;margin:0 auto;max-width:739px;padding:5px;margin:10px 0 10px 0;border:1px solid #ebebeb;box-shadow:0 0 5px #ebebeb;-webkit-box-shadow:0 0 5px #ebebeb;-moz-box-shadow:0 0 5px #ebebeb;-o-box-shadow:0 0 5px #ebebeb;-ms-box-shadow:0 0 5px #ebebeb}p img{display:inline;margin:0;padding:0;vertical-align:middle;text-align:center;border:none}pre,code{color:#222;background-color:#fff;font-family:Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;font-size:14px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px}pre{padding:10px;box-shadow:0 0 10px rgba(0,0,0,0.1);overflow:auto}code{padding:3px;margin:0 3px;box-shadow:0 0 10px rgba(0,0,0,0.1)}pre code{display:block;box-shadow:none}blockquote{color:#666;margin-bottom:20px;padding:0 0 0 20px;border-left:3px solid #bbb}ul,ol,dl{margin-bottom:15px}ul{list-style-position:inside;list-style:disc;padding-left:20px}ol{list-style-position:inside;list-style:decimal;padding-left:20px}dl dt{font-weight:bold}dl dd{padding-left:20px;font-style:italic}dl p{padding-left:20px;font-style:italic}hr{height:1px;margin-bottom:5px;border:none;background:url("https://pages-themes.github.io/slate/assets/images/bg_hr.png") repeat-x center}table{border:1px solid #373737;margin-bottom:20px;text-align:left}th{font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;padding:10px;background:#373737;color:#fff}td{padding:10px;border:1px solid #373737}form{background:#f2f2f2;padding:20px}.outer{width:100%}.inner{position:relative;max-width:640px;padding:20px 10px;margin:0 auto}#forkme_banner{display:block;position:absolute;top:0;right:10px;z-index:10;padding:10px 50px 10px 10px;color:#fff;background:url("https://pages-themes.github.io/slate/assets/images/blacktocat.png") #0090ff no-repeat 95% 50%;font-weight:700;box-shadow:0 0 10px rgba(0,0,0,0.5);border-bottom-left-radius:2px;border-bottom-right-radius:2px}#header_wrap{background:#212121;background:-moz-linear-gradient(top, #373737, #212121);background:-webkit-linear-gradient(top, #373737, #212121);background:-ms-linear-gradient(top, #373737, #212121);background:-o-linear-gradient(top, #373737, #212121);background:linear-gradient(to top, #373737, #212121)}#header_wrap .inner{padding:50px 10px 30px 10px}#project_title{margin:0;color:#fff;font-size:42px;font-weight:700;text-shadow:#111 0px 0px 10px}#project_tagline{color:#fff;font-size:24px;font-weight:300;background:none;text-shadow:#111 0px 0px 10px}#downloads{position:absolute;width:210px;z-index:10;bottom:-40px;right:0;height:70px;background:url("https://pages-themes.github.io/slate/assets/images/icon_download.png") no-repeat 0% 90%}.zip_download_link{display:block;float:right;width:90px;height:70px;text-indent:-5000px;overflow:hidden;background:url(https://pages-themes.github.io/slate/assets/images/sprite_download.png) no-repeat bottom left}.tar_download_link{display:block;float:right;width:90px;height:70px;text-indent:-5000px;overflow:hidden;background:url(https://pages-themes.github.io/slate/assets/images/sprite_download.png) no-repeat bottom right;margin-left:10px}.zip_download_link:hover{background:url(https://pages-themes.github.io/slate/assets/images/sprite_download.png) no-repeat top left}.tar_download_link:hover{background:url(https://pages-themes.github.io/slate/assets/images/sprite_download.png) no-repeat top right}#main_content_wrap{background:#f2f2f2;border-top:1px solid #111;border-bottom:1px solid #111}#main_content{padding-top:40px}#footer_wrap{background:#212121}@media screen and (max-width: 992px){img{max-width:100%}}@media screen and (max-width: 480px){body{font-size:14px}#downloads{display:none}.inner{min-width:320px;max-width:480px}#project_title{font-size:32px}h1{font-size:28px}h2{font-size:24px}h3{font-size:21px}h4{font-size:18px}h5{font-size:14px}h6{font-size:12px}code,pre{font-size:11px}}@media screen and (max-width: 320px){body{font-size:14px}#downloads{display:none}.inner{min-width:240px;max-width:320px}#project_title{font-size:28px}h1{font-size:24px}h2{font-size:21px}h3{font-size:18px}h4{font-size:16px}h5{font-size:14px}h6{font-size:12px}code,pre{min-width:240px;max-width:320px;font-size:11px}}
</style>
</head>
<body>
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/NKjoep/qrcode-bookmarklet">View on GitHub</a>
<h1 id="project_title">qrcode-bookmarklet</h1>
<h2 id="project_tagline">A bookmarklet that generates a qrcode containing the current URL.</h2>
</header>
</div>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<h2 id="how-to-use-it">How to use it</h2>
<ol>
<li>
<p>Drag the bookmarket into your bookmarks bar:
<!-- -->
<span style="font-size: 10px;">
<a style=" background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9); background-image: -moz-linear-gradient(top, #3498db, #2980b9); background-image: -ms-linear-gradient(top, #3498db, #2980b9); background-image: -o-linear-gradient(top, #3498db, #2980b9); background-image: linear-gradient(to bottom, #3498db, #2980b9); -webkit-border-radius: 28; -moz-border-radius: 28; border-radius: 1em; color: #ffffff; font-size: 1.2em; padding: 1em 2em 1em 2em; text-decoration: none; "
href="javascript:; (function() { var qriousUrl = 'https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js'; var id = 'qrious-script-id__' + qriousUrl.replace(/[^\w]|\./g, '_'); var $body = document.getElementsByTagName('body')[0]; if (!window.QRious) { var $qriousScript = document.createElement('script'); $qriousScript.setAttribute('src', qriousUrl); $qriousScript.setAttribute('id', id); $qriousScript.addEventListener('load', generate); $body.appendChild($qriousScript); } else { generate(); } function generate() { var $canvas = document.createElement('canvas'); $canvas.addEventListener('click', function() { $canvas.parentNode.removeChild($canvas); }); $canvas.setAttribute('title', 'Click to close'); $canvas.setAttribute('style', [ 'position: fixed;', 'right: 2vw;', 'top: 2vh;', 'height: 500px;', 'width: 500px;', 'box-shadow: -9px 15px 6px 3px rgba(0, 0, 0, 0.51);', 'z-index: 9999999;', 'padding: 1vw;', 'background: #2c62b8;', 'border-radius: 1rem;', 'cursor: pointer;' ].join('')); new QRious({ element: $canvas, value: window.location.href, size: 500, }); $body.appendChild($canvas); }})();;">Qrcode Bookmarket</a>
</span>
<!-- ) -->
</p>
</li>
<li>
<p>Click on it whenever needed.</p>
</li>
</ol>
<h3 id="demo">Demo</h3>
<video controls="" src="demo.mp4" poster="demo-poster.jpg" width="300">
Sorry, your browser doesn't support embedded videos, but don't worry, you can
<a href="demo.mp4">download it</a>
and watch it with your favorite video player!
</video>
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p class="copyright">
qrcode-bookmarklet maintained by
<a href="https://github.com/NKjoep">NKjoep</a>
</p>
<p>
Published with <a href="https://pages.github.com">GitHub Pages</a>
</p>
</footer>
</div>
</body>
</html>