Skip to content

Instantly share code, notes, and snippets.

@agusibrahim

agusibrahim/web_qr_code.html

Last active December 13, 2017 07:56
Show Gist options
  • Save agusibrahim/116e704ad7e378e768f67a9c91135e68 to your computer and use it in GitHub Desktop.
Save agusibrahim/116e704ad7e378e768f67a9c91135e68 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
web_qr_code.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>WEB QR Code Test</title>
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<script defer src="/__/firebase/4.8.0/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/4.8.0/firebase-database.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);.content,.header{text-align:center}.content p,.header h1,.header h2{font-weight:300}body{background:#eee;font-family:'Open Sans',sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}*{-webkit-box-sizing:inherit;box-sizing:inherit;margin:0;padding:0}.container{width:400px;margin:10% auto 0;background:#fefefe;border-radius:3px}.container:hover .social li,.header h1{margin:0}.header{padding:40px 30px 0}.header h4{margin:0 0 15px;color:#329696}.profile{width:130px;height:130px;border-radius:50%;margin:20px 0 -70px;border:3px solid #2e95ad;-webkit-transition:all 1.5s ease;transition:all 1.5s ease}.profile:hover{border:3px solid #FF5722}.content{background:#fefefe;color:#f0f0f0;padding:75px 0 0;height:auto}.content p{padding:20px 40px}#qrcode{width:160px;height:160px;border-radius:0;margin:50px}</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 id="name">Scan Me
<h1>
<h4 id="email"></h4>
<img src="" class="profile" />
<div id="qrcode"></div>
</div>
<div class="content">
<h3></h3>
<p id="aboutme"></p>
<br><br>
</div>
</div>
<script>
let randval="";
let current_ref=null;
let qrcode=new QRCode("qrcode");
let tout;
function refreshQRCode(){
if(current_ref!=null){
current_ref.off();
}
randval=Math.random().toString(16).slice(2);
current_ref=firebase.database().ref().child('/qrcode/'+randval);
console.log("listen: "+'/qrcode/'+randval);
current_ref.on('value', snapshot => {
if(snapshot.val()!=null){
$(".content").css("background", "#39B5D1");
$("#name").html("<b>"+snapshot.val()["name"]+"</b>");
$(".profile").show();
$(".profile").attr("src", snapshot.val()["pic"]);
$("#qrcode").hide();
$("#email").text(snapshot.val()["email"]);
$("#aboutme").text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non dui quis diam dictum commodo nec sit amet urna. Morbi imperdiet arcu et odio dictum, vitae dapibus elit posuere. Nullam placerat risus fermentum ex vestibulum rhoncus. App By Agus Ibrahim");
clearTimeout(tout);
current_ref.off();
current_ref.remove();
}
});
qrcode.makeCode(randval);
tout=setTimeout(refreshQRCode, 1000*10);
}
$(document).ready(function() {
$(".profile").hide();
refreshQRCode();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment