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