Added scan-to-input example

2026-08-12 21:21:42 +08:00 · 2016-05-19 21:53:48 +02:00
parent b44dd76a07
commit 6c3772eda3
13 changed files with 402 additions and 170 deletions
@@ -1,16 +0,0 @@
-@charset "UTF-8";
-/* LESS - http://lesscss.org style sheet */
-/* Palette color codes */
-/* Palette URL: http://paletton.com/#uid=31g0q0kHZAviRSkrHLOGomVNzac */
-/* Feel free to copy&paste color codes to your application */
-/* MIXINS */
-/* As hex codes */
-/* Main Primary color */
-/* Main Secondary color (1) */
-/* Main Secondary color (2) */
-/* As RGBa codes */
-/* Main Primary color */
-/* Main Secondary color (1) */
-/* Main Secondary color (2) */
-/* Generated by Paletton.com ├é┬® 2002-2014 */
-/* http://paletton.com */
@@ -1 +1,31 @@
-@import url("http://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
+@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
+
+@font-face {
+    font-family: 'icomoon';
+    src:    url('../fonts/icomoon.eot?tad2ln');
+    src:    url('../fonts/icomoon.eot?tad2ln#iefix') format('embedded-opentype'),
+        url('../fonts/icomoon.ttf?tad2ln') format('truetype'),
+        url('../fonts/icomoon.woff?tad2ln') format('woff'),
+        url('../fonts/icomoon.svg?tad2ln#icomoon') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'icomoon' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-barcode:before {
+    content: "\e937";
+}
@@ -0,0 +1,99 @@
+/*
+
+Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #F0F0F0;
+}
+
+
+/* Base color: saturation 0; */
+
+.hljs,
+.hljs-subst {
+  color: #444;
+}
+
+.hljs-comment {
+  color: #888888;
+}
+
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta-keyword,
+.hljs-doctag,
+.hljs-name {
+  font-weight: bold;
+}
+
+
+/* User color: hue: 0 */
+
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: #880000;
+}
+
+.hljs-title,
+.hljs-section {
+  color: #880000;
+  font-weight: bold;
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #BC6060;
+}
+
+
+/* Language color: hue: 90; */
+
+.hljs-literal {
+  color: #78A960;
+}
+
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: #397300;
+}
+
+
+/* Meta color: hue: 200 */
+
+.hljs-meta {
+  color: #1f7199;
+}
+
+.hljs-meta-string {
+  color: #4d99bf;
+}
+
+
+/* Misc effects */
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
@@ -1,38 +1,91 @@
-@charset "UTF-8";
-/* usual styles */
-/* LESS - http://lesscss.org style sheet */
-/* Palette color codes */
-/* Palette URL: http://paletton.com/#uid=31g0q0kHZAviRSkrHLOGomVNzac */
-/* Feel free to copy&paste color codes to your application */
-/* MIXINS */
-/* As hex codes */
-/* Main Primary color */
-/* Main Secondary color (1) */
-/* Main Secondary color (2) */
-/* As RGBa codes */
-/* Main Primary color */
-/* Main Secondary color (1) */
-/* Main Secondary color (2) */
-/* Generated by Paletton.com ├é┬® 2002-2014 */
-/* http://paletton.com */
-@import url("http://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
-/* line 1, ../sass/_viewport.scss */
 #interactive.viewport {
  width: 640px;
  height: 480px;
 }

-/* line 6, ../sass/_viewport.scss */
 #interactive.viewport canvas, video {
  float: left;
  width: 640px;
  height: 480px;
 }
-/* line 10, ../sass/_viewport.scss */
+
 #interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
  margin-left: -640px;
 }

+.input-field {
+    display: flex;
+    align-items: center;
+    width: 260px;
+}
+
+.input-field label {
+    flex: 0 0 auto;
+    padding-right: 0.5rem;
+}
+
+.input-field input {
+    flex: 1 1 auto;
+    height: 20px;
+}
+
+.input-field button {
+    flex: 0 0 auto;
+    height: 28px;
+    font-size: 20px;
+    width: 40px;
+}
+
+.overlay {
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.overlay__content {
+    top: 50%;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    max-height: 90%;
+}
+
+.overlay__close {
+    position: absolute;
+    right: 0;
+    padding: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    text-align: center;
+    background-color: white;
+    cursor: pointer;
+    border: 3px solid black;
+    font-size: 1.5rem;
+    margin: -1rem;
+    border-radius: 2rem;
+    z-index: 100;
+}
+
+.overlay__content video {
+    width: 100%;
+    height: 100%;
+}
+
+.overlay__content canvas {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+}
+
 /* line 16, ../sass/_viewport.scss */
 .controls fieldset {
  border: none;
@@ -117,98 +170,8 @@
  clear: both;
 }

-/* line 7, ../sass/_overlay.scss */
-.scanner-overlay {
-  display: none;
-  width: 640px;
-  height: 510px;
-  position: absolute;
-  padding: 20px;
-  top: 50%;
-  margin-top: -275px;
-  left: 50%;
-  margin-left: -340px;
-  background-color: #FFF;
-  -moz-box-shadow: #333333 0px 4px 10px;
-  -webkit-box-shadow: #333333 0px 4px 10px;
-  box-shadow: #333333 0px 4px 10px;
-}
-/* line 20, ../sass/_overlay.scss */
-.scanner-overlay > .header {
-  position: relative;
-  margin-bottom: 14px;
-}
-/* line 23, ../sass/_overlay.scss */
-.scanner-overlay > .header h4, .scanner-overlay > .header .close {
-  line-height: 16px;
-}
-/* line 26, ../sass/_overlay.scss */
-.scanner-overlay > .header h4 {
-  margin: 0px;
-  padding: 0px;
-}
-/* line 30, ../sass/_overlay.scss */
-.scanner-overlay > .header .close {
-  position: absolute;
-  right: 0px;
-  top: 0px;
-  height: 16px;
-  width: 16px;
-  text-align: center;
-  font-weight: bold;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-/* line 1, ../sass/_icons.scss */
-i.icon-24-scan {
-  width: 24px;
-  height: 24px;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzFFMjMzNTBFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzFFMjMzNTFFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMUUyMzM0RUU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMUUyMzM0RkU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtQr90wAAAUuSURBVHjanFVLbFRVGP7ua97T9DGPthbamAYYBNSMVbBpjCliWWGIEBMWsnDJxkh8RDeEDW5MDGticMmGBWnSlRSCwgLFNkqmmrRIqzjTznTazkxn5s7c6/efzm0G0Jhwkj/nP+d/nv91tIWFBTQaDQWapkGW67p4ltUub5qmAi0UCqF/a/U2m81tpmddotwwDGSz2dzi4uKSaOucnJycGhsbe1XXdQiIIcdxEAgEtgXq9brySHCht79UXi/8QheawN27d385fPjwuEl6XyKR6LdtW7t06RLK5TKOHj2K/fv3Q87Dw8OYn5/HiRMnMDs7i5mZGQwODiqlPp8PuVwO6XRaOXb16lXl1OnTp5FMJvtosF8M+MWLarWqGJaWlpBKpRRcu3YN4+PjmJ6exsTEhDJw5coVjI6OKgPhcBiZTAbxeBx+vx+XL19Gd3c3Tp48Ka9zqDYgBlTQxYNgMIhIJKLCILkQb+TZsgvdsiyFi+feWRR7oRNZyanQtvW2V4DEUUBiK2eJpeDirSyhCe7F2QPh8fiEp72i9PbsC5G52DbiKZA771yr1dTuGfJ4PQNPFoAyQNR1aNEmsS5eyB3PgjeooMZd2AWvNmzYci/Gea7TeFOcI93jV/K67noGmi4vdRI9gPSDeMLSdKUBZZczlWm1rTtHjLZ24d+WER2tc8N1m+Y+ID74wx0zGYvhg9UNrJdtHJyZRdQfwPsrq9g99xsGlgsYmr6BNzO/IVwsYfjBQ6XYz6JI/72MV366B5/lw0elOkJWGUM3bmKtWjXSLuLaBWhnPnnp0FfoiFi4+TMfVAb2poBkDLjO845uYLEAjL4ALGWBP5YAOsP4AJYBFDaB1HOSVWD2PuV95H2RdV93Lv74/cf6p6Zxq/h6OofeOPJBC39JtONdwOAAViOs4p4OFGTf0Uc8iiyrr9YdQrUnDLsngrVOC0jQib44HlF2RafRZBz1Qy+vfhgK3NJZBlrm+LEm9qWwzFgLU7Ozg0JxZP06jQSRpQ7EerAWDSt6PuhHPmChEAog56fCLvJT5hHTm3OZkz3DyLx7XNWTGEA1GkV14gjWgwbW0ESVjYRwCOuai03L5E7OUBAV4kXSS4auoGIaKOma4m8EA5R1sMEGLh95C+XuLph0WJWpxepYYLtfT0RRgY1KgNODY6BoaChRuEhDCIZQYseuki5KN6hcQHiq7OZNv4/Zq2O6P4Lfkwn46vZjjaYZrIpvWbpzjLErrc4xUGE4avRedpYJalRcIl5hQius/SrPm9xrNOQYJhao6BvNUeWqtY8KaWuNjHOFAr7mM9f4NA4UbKysoUJ8PV9UzVOx6wxDDWUOxnK1pmCD07fOMAvtIsM3l89Dl3HRGhVma9AZMqjOnz2LQqWCxs6dqr3T7x1DTzKJaG8SekcHhg4cgI/56uKdlKnBV/WndqN3YAB/7tyBd3oT6GBIOzs7kc/nDfFdDFT5bS73cp06dQoaPa/Rw/rtO/resTHxxE2m9rCrbSR27UJCcMf1BpiA5rAAGgdfc868fUR1sMwj0cm9Iu9IctweisViB3hhKTHDcHc5jv/LspbyaZrR1OD82/fIlOkuB9LnEWRmDX2TsddUPg3D5gvuc0je0rZaD5EW6G3yjS+A3eeBEWq3XW/Abw1HhUspXADufQb86oW7tZytkYCN//3hHwBvDALPi8EnSOYK8DAOfCc2h4aGcO7cuafkzampqf9UripH12/DtOZbx8ciVGzYy5OO40o25ascGRl5Ssc/AgwAjW3JwqIUjSYAAAAASUVORK5CYII=");
-  display: inline-block;
-  background-repeat: no-repeat;
-  line-height: 24px;
-  margin-top: 1px;
-  vertical-align: text-top;
-}
-
-@media (min-width: 604px) and (max-width: 1024px) {
-  /* tablet styles */
-}
@media (max-width: 603px) {
-  /* line 2, ../sass/phone/_core.scss */
-  #container {
-    width: 300px;
-    margin: 10px auto;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-  }
-  /* line 9, ../sass/phone/_core.scss */
-  #container form.voucher-form input.voucher-code {
-    width: 180px;
-  }
-}
-@media (max-width: 603px) {
-  /* line 5, ../sass/phone/_viewport.scss */
-  #interactive.viewport {
-    width: 300px;
-    height: 300px;
-    overflow: hidden;
-  }
-
-  /* line 11, ../sass/phone/_viewport.scss */
-  #interactive.viewport canvas, video {
-    margin-top: -50px;
-    width: 300px;
-    height: 400px;
-  }
-  /* line 15, ../sass/phone/_viewport.scss */
-  #interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
-    margin-left: -300px;
-  }
-
-  /* line 20, ../sass/phone/_viewport.scss */
+ /* line 20, ../sass/phone/_viewport.scss */
  #result_strip {
    margin-top: 5px;
    padding-top: 5px;
@@ -230,34 +193,14 @@ i.icon-24-scan {
    height: 180px;
  }
 }
-@media (max-width: 603px) {
-  /* line 8, ../sass/phone/_overlay.scss */
-  .overlay.scanner {
-    width: 640px;
-    height: 510px;
-    padding: 20px;
-    margin-top: -275px;
-    margin-left: -340px;
-    background-color: #FFF;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-  }
-  /* line 17, ../sass/phone/_overlay.scss */
-  .overlay.scanner > .header {
-    margin-bottom: 14px;
-  }
-  /* line 19, ../sass/phone/_overlay.scss */
-  .overlay.scanner > .header h4, .overlay.scanner > .header .close {
-    line-height: 16px;
-  }
-  /* line 22, ../sass/phone/_overlay.scss */
-  .overlay.scanner > .header .close {
-    height: 16px;
-    width: 16px;
-  }
+
+html {
+    height: 100%;
 }
-/* line 15, ../sass/styles.scss */
+html, body {
+    min-height: 100%;
+}
+
 body {
  background-color: #FFF;
  margin: 0px;
@@ -265,6 +208,9 @@ body {
  color: #1e1e1e;
  font-weight: normal;
  padding-top: 0;
+  box-sizing: border-box;
+  padding-bottom: 96px;
+  position: relative;
 }

 /* line 24, ../sass/styles.scss */
@@ -279,7 +225,7 @@ header {
 }
 /* line 31, ../sass/styles.scss */
 header .headline {
-  width: 640px;
+  max-width: 640px;
  margin: 0 auto;
 }
 /* line 34, ../sass/styles.scss */
@@ -298,11 +244,15 @@ footer {
  background: #0A4DB7;
  color: #6C9CE8;
  padding: 1em 2em 2em;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }

 /* line 51, ../sass/styles.scss */
 #container {
-  width: 640px;
+  max-width: 640px;
  margin: 20px auto;
  padding: 10px;
 }