Added a logo to the build; Added some suggested base URLs for first-time visitors.

source/index.html.haml

@@ -1,13 +1,6 @@
-%form#api_selector
-  .input= text_field_tag :baseUrl, :placeholder => "http://example.com/api", :id => 'input_baseUrl'
-  .input= text_field_tag :apiKey, :placeholder => "api_key", :id => 'input_apiKey'
-  .input= link_to('Explore', "#", :id => "explore")
-
 #resources_container.container
   %ul#resources
 
-#content_message
-
 = jquery_template :resourceTemplate do
   %li.resource{:id => "resource_${name}"}
     .heading

source/javascripts/swagger-ui.js

@@ -1,7 +1,9 @@
 jQuery(function($) {
 
-   // this.baseUrl = "http://swagr.api.wordnik.com/v4";
-  //  this.apiKey = "my-api-key";
+  // this.baseUrl = "http://swagr.api.wordnik.com/v4";
+
+  // this.baseUrl = "http://petstore.swagger.wordnik.com/api";
+  // this.apiKey = "special-key";
   
   var ApiSelectionController = Spine.Controller.create({
     proxied: ["showApi"],
@@ -33,17 +35,19 @@ jQuery(function($) {
     },
     
     adaptToScale: function() {
-      var form_width = $('form#api_selector').width();
-      var inputs_width = 0;
-      $('form#api_selector div.input').each( function(){ inputs_width += $(this).outerWidth(); });
-
-      // Update with of baseUrl input
-      var free_width = form_width - inputs_width;
-      $('#input_baseUrl').width($('#input_baseUrl').width() + free_width - 50);
+      // var form_width = $('form#api_selector').width();
+      // var inputs_width = 0;
+      // $('form#api_selector div.input').each( function(){ inputs_width += $(this).outerWidth(); });
+      // 
+      // // Update with of baseUrl input
+      // var free_width = form_width - inputs_width;
+      // $('#input_baseUrl').width($('#input_baseUrl').width() + free_width - 50);
     },
 
     slapOn: function() {
-      messageController.showMessage("Please enter the base URL of the API that you wish to explore.");
+      // messageController.showMessage("Please enter the base URL of the API that you wish to explore.");
+      $("#content_message").show();
+      
       $("#resources_container").hide();
       this.showApi();
     },
@@ -174,6 +178,7 @@ jQuery(function($) {
 
     render: function() {
       $(this.templateName).tmpl(this.item).appendTo(this.container);
+      $('#colophon').fadeIn();
     },
 
     renderApi: function(api) {

source/layout.haml

@@ -16,8 +16,23 @@
     %script{:src => "javascripts/swagger-ui.js", :type => "text/javascript"}
     
   %body
+    
+    #header
+      = link_to("swagger", "http://swagger.wordnik.com", :id => "logo")
+      
+      %form#api_selector
+        .input= text_field_tag :baseUrl, :placeholder => "http://example.com/api", :id => 'input_baseUrl'
+        .input= text_field_tag :apiKey, :placeholder => "api_key", :id => 'input_apiKey'
+        .input= link_to('Explore', "#", :id => "explore")
+  
     = yield
     
-    %p#colophon
+    #content_message
+      Enter the base URL of the API that you wish to explore, or try 
+      = link_to("swagr.api.wordnik.com/v4", "#", :onclick => "$('#input_baseUrl').val('http://swagr.api.wordnik.com/v4'); apiSelectionController.showApi(); return false;")
+      or
+      = link_to("petstore.swagger.wordnik.com/api", "#", :onclick => "$('#input_baseUrl').val('http://petstore.swagger.wordnik.com/api'); apiSelectionController.showApi(); return false;") + "."
+    
+    %p#colophon{:style => 'display:none'}
       Sexy API documentation from
       = link_to("Swagger", "http://swagger.wordnik.com") + "."

source/stylesheets/screen.css.sass

@@ -30,31 +30,42 @@ body
     font-style: italic
     color: #999
   
-  form#api_selector
+  #header
     background-color: $main_color_light
-    padding: 15px
-    @include no_float
-    .input
-      @include float_left
-      margin: 0 10px 0 0
-      input
-        font-size: 1em
-        padding: 3px
-      input#input_baseUrl
-        width: 500px
-      input#input_apiKey
-        width: 250px
-      a#explore
-        display: block
-        text-decoration: none
-        font-weight: bold
-        padding: 8px 8px
-        font-size: .9em
-        color: white
-        background-color: $main_color_dark
-        @include border-radius(4px)
-        &:hover
+    padding: 14px
+
+    a#logo
+      font-size: 1.5em
+      font-weight: bold
+      text-decoration: none
+      background: transparent image_url('http://local.wordnik.com:3000/images/logo_small.png') no-repeat left center
+      padding: 20px 0 20px 40px
+      color: white
+  
+    form#api_selector
+      @include float_right
+      .input
+        @include float_left
+        margin: 0 10px 0 0
+        input
+          font-size: .9em
+          padding: 3px
+          margin: 0
+        input#input_baseUrl
+          width: 400px
+        input#input_apiKey
+          width: 200px
+        a#explore
+          display: block
+          text-decoration: none
+          font-weight: bold
+          padding: 6px 8px
+          font-size: .9em
+          color: white
           background-color: $main_color_dark
+          @include border-radius(4px)
+          &:hover
+            background-color: $main_color_dark
   
   p#colophon
     margin: 0 15px 40px 15px