diff --git a/application.coffee b/application.coffee
new file mode 100644
index 0000000..efbaec8
--- /dev/null
+++ b/application.coffee
@@ -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)
diff --git a/application.js b/application.js
new file mode 100644
index 0000000..6cae806
--- /dev/null
+++ b/application.js
@@ -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);
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..add5736
--- /dev/null
+++ b/index.html
@@ -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>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..bd58d48
--- /dev/null
+++ b/style.css
@@ -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;
+}
+
