Permalink
Browse files

Adding a bit of a description

  • Loading branch information...
PaulKinlan committed Sep 26, 2018
1 parent 1ab4d9a commit e3b58c6821fd97defcd959f7d7f3de10ea4f4b12
@@ -0,0 +1,120 @@
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Capture QR Code</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' data: https://www.googletagmanager.com/">
<meta name="description" content="Instantly snap QR codes on mobile and desktop without installing an app.">
<!-- Add to homescreen -->
<link rel="manifest" href="/manifest.json">
<!-- Fallback to homescreen for Chrome <39 on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Capture QR Code">
<link rel="icon" sizes="192x192" href="/images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Snap QR Code">
<link rel="apple-touch-icon" href="/images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="/images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#212121">
<!-- Origin Trial Token, feature = Shape Detection API, origin = https://qrsnapper.com, expires = 2018-11-05 -->
<meta http-equiv="origin-trial" data-feature="Shape Detection API" data-expires="2018-11-05" content="Ask9b8eaymdcPPFq0xVl/GH4DVDZnMhMiffYEexo9/LiOL21SHQQkToqpAozpULepkOaPlnv8RegP813aA2XAwEAAABVeyJvcmlnaW4iOiJodHRwczovL3Fyc25hcHBlci5jb206NDQzIiwiZmVhdHVyZSI6IlNoYXBlRGV0ZWN0aW9uIiwiZXhwaXJ5IjoxNTQxNDI1NDE1fQ==">
<meta name="theme-color" content="#212121">
<link rel="stylesheet" href="/styles/app.css">
<script src="/scripts/main.mjs" type="module"></script>
<script src="/scripts/main.js" defer nomodule></script>
</head>
<body>
<div class="wsk-layout">
<div class="wsk-layout__content">
<div id="camera" class="Camera">
<canvas class="Camera-display"></canvas>
<img src="/images/help_outline-24px.svg" class="about" />
<div class="CameraRealtime hidden">
<video class="Camera-video" muted autoplay playsinline></video>
<div class="Camera-instructions">Point at a QR code</div>
<div class="Camera-toggle wsk-button wsk-button--fab">
<input type="checkbox" id="checkbox-1" class="Camera-toggle-input" />
<label for="checkbox-1">
<img class="front" src="/images/ic_camera_front_24px.svg">
<img class="rear" src="/images/ic_camera_rear_24px.svg">
</label>
</div>
</div>
<div class="Camera-overlay"></div>
<div id="camera-fallback" class="CameraFallback hidden">
<form method="post" action="/scan-image" class="CameraFallback-form">
<input type="file" accept="image/*" capture="camera" id="qrcode-input" name="qrcode" class="CameraFallback-input">
<label for="qrcode-input"><img src="/images/ic_file_upload_24px.svg"></label>
<img class="CameraFallback-image">
</form>
</div>
</div>
<!-- QR Code found-->
<div id="qrcode" class="wsk-card wsk-shadow--z3 QRCodeSuccessDialog">
<div class="wsk-card--heading">
<span class="wsk-card--heading-text">QR Code found</span>
</div>
<div class="wsk-card--lower QRCodeSuccessDialog-data" >
</div>
<div class="wsk-card--bottom">
<div>
<button class="wsk-button QRCodeSuccessDialog-navigate">Open</button>
<button class="wsk-button QRCodeSuccessDialog-callback hidden">
<div class="QRCodeSuccessDialogCallback-name">Return</div>
<div class="QRCodeSuccessDialogCallback-domain"></div>
</button>
<button class="wsk-button QRCodeSuccessDialog-ignore">Ignore</button>
<button class="wsk-button QRCodeSuccessDialog-share hidden">Share</button>
</div>
</div>
</div>
<!-- About Dialog -->
<div id="about" class="wsk-card wsk-shadow--z3 QRCodeAboutDialog">
<div class="wsk-card--heading">
<span class="wsk-card--heading-text">About QR Snapper</span>
</div>
<div class="wsk-card--lower QRCodeAboutDialog-data">
<p>QR Snapper is the simplest to use QR Scanner available on the web.</p>
<p>If you would like to learn how it was built, visit <a href="https://paul.kinlan.me/projects/qrsnapper/">Paul Kinlan's site</a>.</p>
<p>The code is also available on <a href="https://github.com/PaulKinlan/qrcode/">Github</a>.</p>
</div>
<div class="wsk-card--bottom">
<div>
<button class="wsk-button QRCodeAboutDialog-close">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(function() { console.log("Service Worker Registered"); });
}
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-42052847-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-42052847-1');
</script>
</body>
</html>
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
@@ -5,16 +5,15 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Capture QR Code</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' data: https://www.google-analytics.com">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' data: https://www.googletagmanager.com/">
<meta name="description" content="Instantly snap QR codes on mobile and desktop without installing an app.">
<meta name="google-site-verification" content="N3q910j70fsM6wav0NfyA-xd1uuXIg0IZw0w2lmgI-o">
<!-- Add to homescreen -->
<link rel="manifest" href="/manifest.json">
<!-- Fallback to homescreen for Chrome <39 on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Capture QR Code">
<meta name="application-name" content="Snap QR Code">
<link rel="icon" sizes="192x192" href="/images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
@@ -41,6 +40,7 @@
<div class="wsk-layout__content">
<div id="camera" class="Camera">
<canvas class="Camera-display"></canvas>
<img src="/images/help_outline-24px.svg" class="about" />
<div class="CameraRealtime hidden">
<video class="Camera-video" muted autoplay playsinline></video>
<div class="Camera-instructions">Point at a QR code</div>
@@ -79,6 +79,20 @@
</div>
</div>
</div>
<!-- About Dialog -->
<div id="about" class="wsk-card wsk-shadow--z3 QRCodeAboutDialog">
<div class="wsk-card--heading">
<span class="wsk-card--heading-text">About QR Snapper</span>
</div>
<div class="wsk-card--lower QRCodeAboutDialog-data">
About.
</div>
<div class="wsk-card--bottom">
<div>
<button class="wsk-button QRCodeAboutDialog-close">Close</button>
</div>
</div>
</div>
</div>
</div>
@@ -27,6 +27,13 @@ import { decode } from './qrclient.js'
var cameraManager = new CameraManager('camera');
var qrCodeManager = new QRCodeManager('qrcode');
var qrCodeHelpManager = new QRCodeHelpManager('about');
var helpButton = document.querySelector('.about');
helpButton.onclick = function() {
qrCodeHelpManager.showDialog();
};
var processingFrame = false;
cameraManager.onframe = async function(context) {
@@ -181,6 +188,23 @@ import { decode } from './qrclient.js'
};
let QRCodeHelpManager = function(element) {
let root = document.getElementById(element);
let qrhelpClose = root.querySelector(".QRCodeAboutDialog-close");
this.showDialog = function() {
root.style.display = 'block';
};
this.closeDialog = function() {
root.style.display = 'none';
};
qrhelpClose.addEventListener("click", function() {
this.closeDialog();
}.bind(this));
};
var WebCamManager = function(cameraRoot) {
var width, height;
var cameraToggleInput = cameraRoot.querySelector('.Camera-toggle-input');
@@ -433,7 +457,6 @@ import { decode } from './qrclient.js'
};
};
var CameraManager = function(element) {
// The camera gets a video stream, and adds it to a canvas.
// The canvas is analysed but also displayed to the user.
@@ -551,9 +574,8 @@ import { decode } from './qrclient.js'
this.resize();
};
window.addEventListener('load', function() {
var camera = new QRCodeCamera();
});
// Start the camera without wating for all resources to load.
var camera = new QRCodeCamera();
})();
window.addEventListener('unhandledrejection', function(event) {
@@ -3,6 +3,7 @@ export const requiredFiles = [
'/images/ic_camera_front_24px.svg',
'/images/ic_camera_rear_24px.svg',
'/images/ic_file_upload_24px.svg',
'/images/help_outline-24px.svg',
'/images/touch/ms-touch-icon-144x144-precomposed.png',
'/images/touch/chrome-touch-icon-192x192.png',
'/images/touch/apple-touch-icon.png',
@@ -0,0 +1,14 @@
.QRCodeAboutDialog {
height: auto !important;
display: none;
position: absolute !important;
margin: auto auto;
width: 80%;
top: 0;
left: 0;
right: 0;
z-index: 100 !important;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
}
@@ -13,22 +13,33 @@
.wsk-shadow--z5 {
box-shadow: 0 19px 19px 0 rgba(0, 0, 0, 0.3), 0 15px 6px 0 rgba(0, 0, 0, 0.22); }
/* We're splitting fonts into "preferred" and "performance" in order to optimize
page loading. For important text, such as the body, we want it to load
immediately and not wait for the web font load, whereas for other sections,
such as headers and titles, we're OK with things taking a bit longer to load.
We do have some optional classes and parameters in the mixins, in case you
definitely want to make sure you're using the preferred font and don't mind
the performance hit.
We should be able to improve on this once CSS Font Loading L3 becomes more
widely available.
*/
html, body {
margin: 0px;
}
* {
user-select: none;
}
main {
padding: 20px;
}
html, body {
color: #9e9e9e;
background-color: #424242;
height: 100%;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
h1, h2, h3, h4, h5, h6, p {
color: #424242;
margin: 0;
padding: 0; }
padding: 0;
}
/**
* Styles for HTML elements
@@ -368,16 +379,6 @@ dt {
We should be able to improve on this once CSS Font Loading L3 becomes more
widely available.
*/
html, body {
font-family: "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px; }
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0; }
/* Card dimensions */
/* Cover image */
@@ -1,29 +1,3 @@
body {
margin: 0px;
}
* {
user-select: none;
}
main {
padding: 20px;
}
html, body {
color: #9e9e9e;
background-color: #424242;
height: 100%;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
h1, h2, h3, h4, h5 {
color: #424242;
}
.Camera.debug .Camera-display {
position: absolute;
z-index: 100;
@@ -201,4 +175,10 @@ h1, h2, h3, h4, h5 {
padding: 18px;
border-radius: 2px;
margin: 1em;
}
.Camera .about {
position: absolute;
margin: 1em;
z-index: 100;
}
@@ -27,6 +27,8 @@ self.addEventListener('activate', function(event) {
});
self.addEventListener('install', function(e) {
self.skipWaiting();
e.waitUntil(
caches.open(dataStoreVersion).then(function(cache) {
return cache.addAll(requiredFiles);

1 comment on commit e3b58c6

@now

This comment has been minimized.

now bot commented on e3b58c6 Sep 26, 2018

Successfully aliased the URL https://qrsnappercom-plizlqjoxc.now.sh to the following alias.

Please sign in to comment.