Fixed a couple of UI related things.

pub/index.css

@@ -41,7 +41,6 @@ form {
 }
 
 #cmp {
-  background-color: #eee;
   padding: 25px;
   width: 560px;
   margin: 0 auto;
@@ -55,11 +54,26 @@ form {
   border: 1px solid #ccc;
 }
 
+#cmp.link {
+  background-color: #f6f6f6;
+}
+
+#cmp.fuck {
+  background-color: #fee;
+  color: #999;
+}
+
 #cmp > a {
   color: #09f;
   text-decoration: none;
 }
 
+#cmp > .hnt {
+  float: right;
+  color: #ddd;
+  text-shadow: 1px 1px 0 #fff;
+}
+
 #cls {
   position: absolute;
   top: 0;

pub/index.js

@@ -4,8 +4,13 @@ var $frm = $('form'),
     $cmp = $('#cmp'),
     $cls = $('#cls'),
     $url = $('#url'),
+    copyKey = navigator.userAgent.indexOf('Macintosh') >= 0 ? '⌘-C' : 'Ctrl-C',
     lastUrl;
 
+var $e = function(name) {
+  return $(document.createElement(name));
+};
+
 var resize = function() {
   var rect = $frm.get(0).getBoundingClientRect();
   $frm.css('margin-top', window.innerHeight/3 - rect.height/2);
@@ -23,7 +28,7 @@ var load = function() {
     dataType: 'json'
   }).always(function(data) {
     if (!data.ok) {
-      // TODO(knorton): Error
+      showError(data.error);
       return;
     }
 
@@ -37,19 +42,37 @@ var load = function() {
 var showLink = function(name) {
   var lnk = location.origin + '/' + name;
 
-  $cmp.find('a').remove();
+  $cmp.text('')
+    .removeClass('fuck')
+    .addClass('link');
 
   var a = $(document.createElement('a'))
     .attr('href', lnk)
     .text(lnk)
-    .appendTo($cmp.text(''));
+    .appendTo($cmp);
+
+  var h = $(document.createElement('span'))
+    .addClass('hnt')
+    .text(copyKey)
+    .appendTo($cmp);
 
   $cmp.css('transform', 'scaleY(1)');
 
   getSelection().setBaseAndExtent(a.get(0), 0, a.get(0), 1);
 };
 
-var hideLink = function() {
+var showError = function(message) {
+  $cmp.text('')
+    .removeClass('link')
+    .addClass('fuck');
+
+  $e('span').text('ERROR: ' + message)
+    .appendTo($cmp);
+
+  $cmp.css('transform', 'scaleY(1)');
+};
+
+var hideDrawer = function() {
   $cmp.css('transform', 'scaleY(0)');
 };
 
@@ -61,6 +84,7 @@ var urlDidChange = function() {
 
   lastUrl = url;
 
+  hideDrawer();
   if (url) {
     $cls.fadeIn(200);
   } else {
@@ -80,13 +104,13 @@ $frm.on('submit', function(e) {
     dataType : 'json'
   }).always(function(data) {
     if (!data.ok) {
-      hideLink();
+      showError(data.error);
       return;
     }
 
     var route = data.route;
     if (!route) {
-      hideLink();
+      hideDrawer();
       return;
     }