sukriborneo

QR

Aug 17th, 2018
134
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 2.46 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  6. <title>MIKHMON QR CODE SCANNER</title>
  7.   <style>
  8.     video {
  9.       width: 100%    !important;
  10.       height: auto   !important;
  11.     }
  12.     #reload{
  13.      margin-top:5px;
  14.       margin-bottom:10px;
  15.       padding:5px;
  16.       background-color: #20a8d8;
  17.      color: #f3f4f5;
  18.      border-radius:3px;
  19.       width: 150px;
  20.       cursor: pointer;
  21.     }
  22.     a{
  23.       text-decoration: none;
  24.       color:#20a8d8;
  25.    }
  26.     .progress{
  27.       padding:10px;
  28.       margin-top:5px;
  29.     }
  30.     .progress span{
  31.       transition: all 500ms ease;
  32.       background: grey;
  33.       box-shadow: 1px 2px 3px #999;
  34.      height: 10px;
  35.       width: 10px;  
  36.       display: inline-block;
  37.       border-radius: 10px;
  38.       animation: wave 2s ease  infinite;
  39.     }
  40.     .progress span:nth-child(1){  animation-delay: 0; }
  41.     .progress span:nth-child(2){  animation-delay: 100ms; }
  42.     .progress span:nth-child(3){  animation-delay: 200ms; }
  43.     .progress span:nth-child(4){  animation-delay: 300ms; }
  44.     .progress span:nth-child(5){  animation-delay: 400ms; }
  45.     .progress span:nth-child(6){  animation-delay: 500ms; }
  46.     .progress span:nth-child(7){  animation-delay: 600ms; }
  47.     .progress span:nth-child(8){  animation-delay: 700ms; }
  48.     @keyframes wave{
  49.       0%, 40%, 100% {
  50.         transform: translate(0, 0);
  51.         background-color: grey;    
  52.       }
  53.       10% {    
  54.         transform: translate(0, -15px);
  55.         background-color: #20a8d8;    
  56.      }  
  57.     }
  58.   </style>
  59. <script type="text/javascript" src="llqrcode.js"></script>
  60. <script type="text/javascript" src="webqr.js"></script>
  61. </head>
  62. <body>
  63.   <center>
  64.     <div id="main">
  65.       <div id="mainbody">
  66.         <div class="progress">
  67.           <span></span>
  68.           <span></span>
  69.           <span></span>
  70.           <span></span>
  71.           <span></span>
  72.           <span></span>
  73.           <span></span>
  74.           <span></span>
  75.         </div>
  76.         <div id="reload" onclick="location.reload();">Reload Camera</div>
  77.         <div id="outdiv"></div>
  78.       </div>
  79.     </div>
  80.     <div>MIKHMON QR CODE SCANNER <br>Powered by <a href="http://www.webqr.com">webqr.com</a></div>
  81.   </center>
  82. <canvas style="display:none;" id="qr-canvas" width="800" height="600"></canvas>
  83. <script type="text/javascript">load();</script>
  84. </body>
  85. </html>
Add Comment
Please, Sign In to add comment