Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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
You can’t perform that action at this time.