new app

config.ru

@@ -0,0 +1,2 @@
+require 'landingpad'
+run LandingPad

landingpad.rb

@@ -0,0 +1,57 @@
+require 'rubygems'
+require 'sinatra/base'
+require 'uri'
+require 'mongo'
+require 'erb'
+require 'json'
+
+class LandingPad < Sinatra::Base
+  set :static, true
+  set :public, 'public'
+
+  configure do
+    uri = URI.parse(ENV['MONGOHQ_URL'])
+    conn = Mongo::Connection.from_uri(ENV['MONGOHQ_URL'])
+    db = conn.db(uri.path.gsub(/^\//, ''))
+    $collection = db.collection("contacts")
+  end
+
+  helpers do
+    def protected!
+      unless authorized?
+        response['WWW-Authenticate'] = %(Basic realm="Restricted Area")
+        throw(:halt, [401, "Not authorized\n"])
+      end
+    end
+
+    def authorized?
+      @auth ||=  Rack::Auth::Basic::Request.new(request.env)
+      @auth.provided? && @auth.basic? && @auth.credentials && @auth.credentials == ['admin', 'admin']
+    end
+  end
+
+  get '/' do
+    erb :index
+  end
+
+  get '/contacts' do
+    protected!
+    erb :contacts
+  end
+
+  post '/subscribe' do
+    content_type :json
+    contact = params[:contact]
+    contact_type = contact.start_with?("@") ||
+                  !contact.include?("@") ? "Twitter" : "email"
+
+    doc = {
+      "name" => contact,
+      "type"    => contact_type,
+      "referer" => params[:referer],
+    }
+
+    $collection.insert(doc)
+      {"success" => true, "type" => contact_type}.to_json
+    end
+end

public/css/style.css

@@ -0,0 +1,126 @@
+@font-face { font-family: paola; src: url('paola.ttf'); }
+
+#container {
+  margin-top: 200px;
+}
+
+h1 { 
+  font-family: paola, sans-serif;
+  font-size: 65px;
+  margin-bottom: 5px;
+  margin-top: 10px;
+}
+
+h2 {
+  font-size: 22px;
+  font-weight: bold;
+  margin-top: 5px;
+}
+
+h3 {
+  font-size: 16px;
+  font-style: italic;
+  color: #CCCCCC;
+  font-family: Georgia, serif;
+  font-weight: normal;
+}
+
+h4 {
+}
+
+body {
+  background-color: #2B2F3D;
+  color: white;
+  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+}
+
+.box {
+  width: 480px;
+  background-color: black;
+  margin: 5px auto 0px;
+  padding: 15px;
+  border-radius: 10px;
+  z-index:2;
+  position:relative;
+}
+
+.entry {
+  display: block;
+  float: left;
+  margin: 0px 5px 0px 20px;
+  padding: 5px 5px 6px;
+  width: 360px;
+  font-size: 13px;
+}
+
+#sign_up {
+  background: -moz-linear-gradient(0% 100% 90deg,#63A62F, #7FBF4D);
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7FBF4D), to(#63A62F));
+  border-bottom-color: #5B992B;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-left-color: #63A62F;
+  border-left-style: solid;
+  border-left-width: 1px;
+  border-right-color: #63A62F;
+  border-right-style: solid;
+  border-right-width: 1px;
+  border-top-color: #63A62F;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  border-top-style: solid;
+  border-top-width: 1px;
+  display: block;
+  float: left;
+  color: white;
+  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif;
+  font-size: 13px;
+  font-weight: bold;
+  height: 30px;
+  outline-color: white;
+  outline-style: none;
+  outline-width: 0px;
+  text-shadow: #4C9021 0px -1px 0px;
+  width: 75px;
+}
+
+#sign_up:hover {
+  background: -moz-linear-gradient(0% 100% 90deg,#5e9e2e, #76b347);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#76b347), to(#5e9e2e));
+  -moz-box-shadow: inset 0 1px 0 0 #8dbf67;
+  -webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
+  box-shadow: inset 0 1px 0 0 #8dbf67;
+  cursor: pointer;
+}
+
+.thanks {
+  width: 480px;
+  background: -moz-linear-gradient(0% 100% 90deg,#63A62F, #7FBF4D);
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7FBF4D), to(#63A62F));
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 20px;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  margin-top: -10px;
+  height: 30px;
+  z-index: 1;
+  position:relative;
+}
+
+.yikes {
+  width: 480px;
+  background: -moz-linear-gradient(0% 100% 90deg,#9E080D, #D1080F);
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D1080F), to(#9E080D));
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 20px;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  margin-top: -10px;
+  height: 30px;
+  z-index: 1;
+  position:relative;
+}

views/contacts.erb

@@ -0,0 +1,5 @@
+<html>
+    <% @contacts.each do |contact| %>
+        <%= contact.name %> <%= contact.type %> <%= contact.referer %>
+    <% %>
+</html>

views/index.erb

@@ -0,0 +1,65 @@
+<html>
+    <head>
+        <title>LandingPad.rb | Just add water landing page</title>
+        <script type="text/javascript" src="javascripts/jquery-1.4.4.min.js"></script>
+        <script type="text/javascript" src="javascripts/jquery-ui-1.8.9.custom.min.js">
+        </script>
+        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
+        <script type="text/javascript">
+            $(document).ready(function(){
+              $("#sign_up").click(function(e){
+                var that = $(this);
+                e.preventDefault();
+
+                if ( $('.entry').val().length < 1 ){
+                  $('#form_div').effect('shake', { times: 4, distance: 3}, 40);
+                  return;
+                }
+
+                $.ajax({
+                  type: 'post',
+                  url: '/subscribe',
+                  data: $('#subscribe').serialize(),
+                  datatype: 'json',
+                  success: function(data){
+                    $('.entry').val('');
+                    $("<div class='thanks'>Thanks! We'll update you through " + 
+                      data.type + "!</div>")
+                      .hide()
+                      .appendTo('#container')
+                      .slideDown('fast');
+
+                    $('.sign_up').attr('disabled', true);
+                    that.unbind();
+                  },
+                  error: function(data){
+                    $("<div class='yikes'>Yikes! Something messed up, try again.</div>")
+                      .hide()
+                      .appendTo('#container')
+                      .slideDown('fast');
+                  },
+                });
+              });
+            });
+        </script>
+
+</head>
+  <body>
+    <center id="container">
+      <h1>LandingPad.rb</h1>
+      <div class="box">
+        <h2>Just add water landing pages. <br />  
+          Get a page up in running minutes and startcollecting contact information!
+        </h2>
+        <h3>Enter your email or Twitter and we'll tell you when it's ready.</h3>
+        <div id="form_div">
+          <form id="subscribe" novalidate>
+            <input class="entry" type="email" name="contact" />
+            <button id="sign_up">Sign up</button>
+          </form>
+        </div>
+        <h4>Powered by Heroku and MongoHQ</h4>
+      </div>
+    </center>
+  </body>
+</html>