luzifer/qrdisplay
1
0
Fork 0
mirror of https://github.com/Luzifer/qrdisplay.git synced 2024-12-22 20:31:18 +00:00
Code Issues Releases Wiki Activity

Added first working version

Browse source
This commit is contained in:
Knut Ahlers 2013-04-22 00:09:36 +02:00
parent 9da48d337a
commit 5c228fe537
4 changed files with 137 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
application.coffee Normal file
View file

@ -0,0 +1,15 @@
$ ->
$('textarea').bind 'keyup', generateQRCode
$('#triggerCreate').bind 'click', generateQRCode
$(window).bind 'hashchange', ->
text = window.location.hash.substring 1
$('textarea').val text
generateQRCode()
if window.location.hash
$(window).trigger 'hashchange'
generateQRCode()
generateQRCode = ->
text = $('textarea').val()
$('#qrarea').empty()
$('#qrarea').qrcode(text)

24
application.js Normal file
View file

@ -0,0 +1,24 @@
(function() {
var generateQRCode;
$(function() {
$('textarea').bind('keyup', generateQRCode);
$('#triggerCreate').bind('click', generateQRCode);
$(window).bind('hashchange', function() {
var text;
text = window.location.hash.substring(1);
$('textarea').val(text);
return generateQRCode();
});
if (window.location.hash) $(window).trigger('hashchange');
return generateQRCode();
});
generateQRCode = function() {
var text;
text = $('textarea').val();
$('#qrarea').empty();
return $('#qrarea').qrcode(text);
};
}).call(this);

24
index.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>QRDisplay on GitHub</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery-qrcode/jquery.qrcode.min.js"></script>
<script src="application.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<h1>QRDisplay on GitHub</h1>
<div id="infield">
<p><label for="encode">Tell me what to put into the QRCode:</label></p>
<p><textarea id="encode">http://blog.knut.me/</textarea></p>
<p><input type="submit" value="Get my QRCode!" id="triggerCreate" /></p>
</div>
<div id="qrarea"></div>
<div id="footer">Quickly put together by <a href="http://blog.knut.me/">Knut Ahlers</a> using <a href="http://jeromeetienne.github.io/jquery-qrcode/">jquery-qrcode</a></div>
<a href="https://github.com/Luzifer/qrdisplay"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_white_ffffff.png" alt="Fork me on GitHub"></a>
</div>
</body>
</html>

74
style.css Normal file
View file

@ -0,0 +1,74 @@
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
* {
font-family: "Open Sans";
font-size: 14px;
outline: none;
}
body{
background-color: #22252a;
color: #eee;
}
#container {
margin: 10px auto;
width: 900px;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding: 20px;
}
h1 {
color: #cd5;
font-size: 3em;
text-align: center;
margin: 0 0 1.5em 0;
}
#infield {
border-top: 1px dotted #eee;
border-bottom: 1px dotted #eee;
margin-bottom: 1em;
}
textarea {
background-color: rgba(255, 255, 255, 0.07);
border: none;
color: #eee;
padding: 10px;
width: 880px;
}
input {
background-color: rgba(255, 255, 255, 0.07);
border: none;
color: #eee;
cursor: pointer;
font-weight: bold;
margin-left: 350px;
width: 200px;
}
#qrarea {
border: 10px solid #fff;
margin-left: 322px;
height: 256px;
overflow: hidden;
width: 256px;
}
#footer {
border-top: 1px dotted #eee;
color: rgba(204, 204, 204, 0.8);
font-size: 0.7em;
margin-top: 1em;
padding: 10px;
text-align: center;
}
a, a:active, a:visited, a:hover {
color: rgba(204, 204, 204, 0.8);
font-size: 1em;
}