Add some basic design, and the UI server skeleton.

.gitignore

@@ -2,3 +2,4 @@
 .bundle
 Gemfile.lock
 pkg/*
+.sass-cache

Rakefile

@@ -2,5 +2,5 @@ require 'bundler'
 Bundler::GemHelper.install_tasks
 
 task :spec do
-  exec "rspec spec"
+  exec "bundle exec rspec spec"
 end

config.ru

@@ -1,6 +1,5 @@
 require "rubygems"
 require "bundler/setup"
-require "copycat/api_server"
+require "copycat"
 
-run Rack::URLMap.new \
-  "/api/v2/projects" => Copycat::ApiServer.new
+run Copycat.application

copycat.gemspec

@@ -16,7 +16,9 @@ Gem::Specification.new do |s|
   s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
   s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
   s.require_paths = ["lib"]
-
+
+  s.add_dependency "haml"
+  s.add_dependency "sass"
   s.add_dependency "sinatra"
   s.add_dependency "json"
   s.add_dependency "redis"
@@ -25,4 +27,5 @@ Gem::Specification.new do |s|
   s.add_development_dependency "rake"
   s.add_development_dependency "rspec"
   s.add_development_dependency "rack-test"
+  s.add_development_dependency "capybara"
 end

lib/copycat.rb

@@ -1,5 +1,11 @@
 require 'copycat/version'
 require 'copycat/api_server'
+require 'copycat/ui_server'
 
 module Copycat
+  def self.application
+    Rack::URLMap.new \
+      "/" => Copycat::UiServer.new,
+      "/api/v2/projects" => Copycat::ApiServer.new
+  end
 end

lib/copycat/ui_server.rb

@@ -0,0 +1,30 @@
+require 'haml'
+require 'sass'
+
+module Copycat
+  class UiServer < Sinatra::Application
+    use Rack::Auth::Basic do |username, password|
+      username == settings.default_username && password == settings.default_password
+    end
+
+    set :default_username, "admin"
+    set :default_password, "password"
+
+    set :redis, {
+      :ns => "copycat",
+      :host => "localhost",
+      :port => 6379
+    }
+
+    set :public, File.expand_path("../../../assets", __FILE__)
+    set :views, File.expand_path("../../../views", __FILE__)
+
+    get '/' do
+      haml :index
+    end
+
+    get '/styles.css' do
+      scss :styles
+    end
+  end
+end

spec/api_server_spec.rb

@@ -1,14 +1,6 @@
 require 'spec_helper'
 require 'json'
 
-Copycat::ApiServer.set :environment, :test
-Copycat::ApiServer.set :redis, {
-  :ns => "copycat-test",
-  :host => "localhost",
-  :port => 6379,
-  :db => 8
-}
-
 describe "the API server" do
   def app
     Copycat::ApiServer

spec/spec_helper.rb

@@ -1,7 +1,17 @@
 require 'rspec'
 require 'rack/test'
+require 'capybara/rspec'
 require 'copycat'
 
 RSpec.configure do |conf|
   conf.include Rack::Test::Methods
+  conf.include Capybara
+
+  def app
+    Copycat.application
+  end
+
+  def login
+    basic_authorize Copycat::UiServer.settings.default_username, Copycat::UiServer.settings.default_password
+  end
 end

spec/ui_server/authenticatoin_spec.rb

@@ -0,0 +1,18 @@
+require 'spec_helper'
+
+describe "authentication" do
+  it "rejects the request if no authentication was provided" do
+    get "/"
+    last_response.status.should eq 401
+  end
+
+  it "allows access if logging in with the default credentials" do
+    Copycat::UiServer.set :default_username, "admin"
+    Copycat::UiServer.set :default_password, "password"
+
+    basic_authorize "admin", "password"
+
+    get "/"
+    last_response.status.should eq 200
+  end
+end

spec/ui_server_spec.rb

@@ -0,0 +1,16 @@
+require 'spec_helper'
+require 'json'
+
+describe "the UI server" do
+  def app
+    Copycat::UiServer
+  end
+
+  def redis
+    @redis ||= Redis::Namespace.new(app.redis[:ns], :redis => Redis.new(app.redis))
+  end
+
+  before(:each) do
+    redis.flushdb
+  end
+end

views/index.haml

@@ -0,0 +1,4 @@
+%h1 Projects
+
+%section#projects
+  %p It doesn't look like you've got any projects yet.

views/layout.haml

@@ -0,0 +1,22 @@
+!!! 5
+%html
+  %head
+    %title Copycat
+    %link{ rel: "stylesheet", href: "/styles.css"}
+
+  %body
+    %header
+      %ul#navigation
+        %li
+          %a{ href: "/users" } Users
+        %li 
+          %a{ href: "/" } Projects
+
+      %h1 Copycat
+
+    %section#content
+      =yield
+
+    %footer
+      %a{ href: "http://blankpad.net", target: "_top" }
+        %img{ src: "/images/blankpad.png", alt: "Blank Pad Development", title: "Developed by Blank Pad Development" }

views/styles.scss

@@ -0,0 +1,93 @@
+/* Reset */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/* The real deal */
+body {
+  background-color: #f5f5f5;
+  font-family: "Georgia", serif;
+  padding: 0;
+  margin: 0;
+
+  header {
+    margin: 0;
+    padding: 0.5em 1em;
+    background-color: darken(#f5f5f5, 50%);
+
+    h1 {
+      margin-top: 0;
+      margin-bottom: 0.2em;
+      font-size: 2em;
+      font-weight: bold;
+    }
+
+    ul#navigation {
+      li {
+        float: right;
+        font-weight: bold;
+        display: inline;
+        margin-top: 0.5em;
+        margin-left: 1em;
+
+        a {
+          color: black;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  section#content {
+    padding: 0.5em 1em;
+
+    h1 {
+      font-size: 1.5em;
+    }
+  }
+
+  footer {
+    padding: 0.5em 1em;
+    text-align: right;
+  }
+}