From af1e357df4ae9f06efb68942e24e26000695a64e Mon Sep 17 00:00:00 2001
From: Daniel Evans <danharibo@gmail.com>
Date: Mon, 15 Apr 2013 02:50:50 +0100
Subject: [PATCH] Improved HCI

---
 public/imgurr.css       | 15 +++++++++++++++
 views/imgur/imgurr.jade |  8 ++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 public/imgurr.css

diff --git a/public/imgurr.css b/public/imgurr.css
new file mode 100644
index 0000000..5f169a5
--- /dev/null
+++ b/public/imgurr.css
@@ -0,0 +1,15 @@
+html, body { margin: 0; padding: 0; height: 100%; }
+#container, #image {
+  margin: 0; padding: 0;
+  max-height: 100%;
+}
+#container { text-align: center; }
+#loading { 
+  background: rgba(255, 0, 0, 0.8); 
+  display: none; 
+  position: absolute;
+  top: 50px;
+  left: 30px;
+  padding: 10px;
+  color: #EFEFEF;
+}
diff --git a/views/imgur/imgurr.jade b/views/imgur/imgurr.jade
index cf84303..63148cb 100644
--- a/views/imgur/imgurr.jade
+++ b/views/imgur/imgurr.jade
@@ -3,13 +3,17 @@ html(lang='en')
   head 
     meta(charset='utf-8')
     script(type="text/javascript", src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js")
+    link(rel="stylesheet", href="/imgurr.css")
     title random imgur
     script
       function wat() {
+        $('#loading').show();
+        $('#image').load(function(){$('#loading').hide(); console.log('loaded')});
         $.get("/api/imgur/getRandomImage", function(d) {$('#image').attr('src', d.data[0])}, "json");
       };
       $(wat());
-      $(document).keypress(wat);
+      $(document).on('keydown', function(e){(e.which==32)&&(wat()) });
   body
+    div#loading Loading Image
     div#container
-      img#image(style='width: 100%')
+      img#image