donate page noninteractive

app/helpers/application_helper.rb

@@ -14,10 +14,6 @@ module ApplicationHelper
     end
   end
 
-  def donate_url
-    '/donate'
-  end
-
   def flashes
     raw(flash.inject('') do |html, pair|
       key, value = pair

app/helpers/static_helper.rb

@@ -0,0 +1,11 @@
+module StaticHelper
+  def pledgie_link(options={})
+    options[:class] ||= "pledgie-link"
+    link_to 'Donate now!', pledgie_url, options
+  end
+
+  def pledgie_url
+    "http://pledgie.com/campaigns/#{PLEDGIE_CAMPAIGN_ID}"
+  end
+end
+

app/stylesheets/_layout.sass

@@ -241,3 +241,10 @@ dd
   font-style: normal
   font-weight: normal
   src: local("Droid Sans"), url("http://themes.googleusercontent.com/font?kit=POVDFY-UUf0WFR9DIMCU8g") format("truetype")
+
+@font-face
+  font-family: 'Calligraffitti'
+  font-style: normal
+  font-weight: normal
+  src: local('Calligraffiti'), url('http://themes.googleusercontent.com/font?kit=vLVN2Y-z65rVu1R7lWdvyKIZAuDcNtpCWuPSaIR0Ie8') format('woff')
+

app/stylesheets/screen.sass

@@ -15,6 +15,7 @@
 @import outfits/new
 @import outfits/show
 @import pets/bulk
+@import static/donate
 @import static/terms
 @import users/top_contributors
 

app/stylesheets/static/_donate.sass

@@ -0,0 +1,81 @@
+body.static-donate
+  #title
+    margin-bottom: 0
+
+  h2
+    font-style: italic
+    font-weight: normal
+
+  #title, h2
+    float: left
+
+  .pledgie-link
+    +awesome-button
+    +loud-awesome-button-color
+
+  #pledgie-link-with-title
+    float: right
+    font-size: 150%
+    margin-top: .5em
+    padding: .75em
+
+  $image-mode-preview-image-width: 300px
+  $image-mode-preview-image-border-width: 1px
+  $image-mode-preview-h-padding: 20px
+  $image-mode-preview-border-width: 1px
+  $image-mode-preview-right-margin: 20px
+  $image-mode-preview-outer-width: $image-mode-preview-image-width + $image-mode-preview-right-margin + 2 * ($image-mode-preview-image-border-width + $image-mode-preview-h-padding + $image-mode-preview-border-width)
+  #image-mode-preview
+    border: $image-mode-preview-border-width solid $module-border-color
+    clear: both
+    display: block
+    float: left
+    margin: 0 $image-mode-preview-right-margin 0 0
+    padding:
+      top: $image-mode-preview-h-padding
+      right: $image-mode-preview-h-padding
+      bottom: $image-mode-preview-h-padding / 1.5
+      left: $image-mode-preview-h-padding
+
+    img
+      border: $image-mode-preview-border-width solid $module-border-color
+      margin-bottom: .5em
+
+    figcaption
+      display: block
+      font-family: Calligraffitti
+      font-size: 250%
+      text-align: center
+
+  $image-mode-description-width: $container-width - $image-mode-preview-outer-width
+
+  $image-mode-beta-h-padding: 15px
+  $image-mode-beta-border-width: 1px
+  $image-mode-beta-inner-width: $image-mode-description-width - 2 * ($image-mode-beta-h-padding + $image-mode-beta-border-width)
+
+  #image-mode-beta
+    +module
+    border-width: $image-mode-beta-border-width
+    display: block
+    float: left
+    margin-bottom: 1em
+    padding: ($image-mode-beta-h-padding / 1.5) $image-mode-beta-h-padding
+    text-align: center
+    width: $image-mode-beta-inner-width
+
+    header
+      display: block
+      font-weight: bold
+
+    p
+      font-family: $main-font
+      font-size: 75%
+      margin: 0
+
+    .pledgie-link
+      margin: .75em 0
+
+  #image-mode-description
+    float: left
+    width: $image-mode-description-width
+

app/views/outfits/edit.html.haml

@@ -42,7 +42,7 @@
           - if can_use_image_mode?
             %li#preview-mode-image Image
         - unless can_use_image_mode?
-          = link_to(donate_url, :id => 'preview-mode-image-access-denied', :target => '_blank') do
+          = link_to(donate_path, :id => 'preview-mode-image-access-denied', :target => '_blank') do
             %strong Image mode
             is available for early beta testing to users who
             %em donate

app/views/static/donate.html.haml

@@ -0,0 +1,40 @@
+- title "Support Dress to Impress"
+= pledgie_link :id => 'pledgie-link-with-title'
+%h2 Image Mode is almost here, but we need your help!
+
+%figure#image-mode-preview
+  = image_tag 'image_mode_preview.png'
+  %figcaption
+    Image Mode ♥
+
+%article#image-mode-beta
+  %header Donate $5 or more for early beta access
+  = pledgie_link
+  %p
+    Include your
+    = link_to 'Dress to Impress username', login_path_with_return_to
+    in Special Instructions.
+  %p We'll email you soon!
+
+%article#image-mode-description
+  :markdown
+    **Soon, Dress to Impress will be able to both save outfits as images and
+    even run entirely without Flash**. Image Mode. It's taken months to put
+    together, and it's pretty darn exciting. It's the most requested feature
+    for Dress to Impress, ever.
+
+    **To get there, though, we need a server upgrade.** We've done our best to
+    cut back on memory usage on the server we have now, but ultimately found
+    that, when we run the processes that convert the Flash files to images, we
+    lose stability, and the site goes down.
+
+    **So, we're moving from about $20 to $30 a month.** We'll be moving from
+    [Linode's 512 server to the 768 server](http://linode.com). It's what we
+    need to do in order to have enough RAM to both convert Flash to image and
+    also run a website with thousands of users a day.
+
+    **Thank you for your continued support.** Dress to Impress is 100%
+    user-funded, and we hope to stay that way. Our goal is to raise enough
+    money to guarantee that we'll be up and running for the next 12 months. I
+    think we can do it.
+

config/initializers/pledgie.rb

@@ -0,0 +1,2 @@
+PLEDGIE_CAMPAIGN_ID = 13904
+

config/routes.rb

@@ -41,6 +41,7 @@ OpenneoImpressItems::Application.routes.draw do |map|
 
   match '/wardrobe' => 'outfits#edit', :as => :wardrobe
 
+  match '/donate' => 'static#donate', :as => :donate
   match '/terms' => 'static#terms', :as => :terms
 
   match '/sitemap.xml' => 'sitemap#index', :as => :sitemap, :format => :xml

public/stylesheets/compiled/screen.css

@@ -385,6 +385,13 @@ dd {
   src: local("Droid Sans"), url("http://themes.googleusercontent.com/font?kit=POVDFY-UUf0WFR9DIMCU8g") format("truetype");
 }
 
+@font-face {
+  font-family: "Calligraffitti";
+  font-style: normal;
+  font-weight: normal;
+  src: local("Calligraffiti"), url("http://themes.googleusercontent.com/font?kit=vLVN2Y-z65rVu1R7lWdvyKIZAuDcNtpCWuPSaIR0Ie8") format("woff");
+}
+
 /* line 2, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
 div.jGrowl {
   padding: 10px;
@@ -2456,6 +2463,120 @@ body.pets-bulk .script-only {
   display: none;
 }
 
+/* line 2, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #title {
+  margin-bottom: 0;
+}
+/* line 5, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate h2 {
+  font-style: italic;
+  font-weight: normal;
+}
+/* line 9, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #title, body.static-donate h2 {
+  float: left;
+}
+/* line 12, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate .pledgie-link {
+  /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  background: #006400 url('/images/alert-overlay.png?1296599919') repeat-x;
+  border: 0;
+  display: inline-block;
+  padding: 0.5em 0.75em 0.45em;
+  color: white;
+  text-decoration: none;
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+  position: relative;
+  font-weight: bold;
+  line-height: 1;
+  background: #ff5c00 url('/images/alert-overlay.png?1296599919') repeat-x;
+}
+/* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */
+body.static-donate .pledgie-link:hover {
+  background-color: #005300;
+}
+/* line 53, ../../../app/stylesheets/partials/clean/_mixins.sass */
+body.static-donate .pledgie-link:hover {
+  color: white;
+}
+/* line 55, ../../../app/stylesheets/partials/clean/_mixins.sass */
+body.static-donate .pledgie-link:active {
+  top: 1px;
+}
+/* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */
+body.static-donate .pledgie-link:hover {
+  background-color: #ee4b00;
+}
+/* line 16, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #pledgie-link-with-title {
+  float: right;
+  font-size: 150%;
+  margin-top: 0.5em;
+  padding: 0.75em;
+}
+/* line 28, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #image-mode-preview {
+  border: 1px solid #006600;
+  clear: both;
+  display: block;
+  float: left;
+  margin: 0 20px 0 0;
+  padding-top: 20px;
+  padding-right: 20px;
+  padding-bottom: 13.333px;
+  padding-left: 20px;
+}
+/* line 40, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #image-mode-preview img {
+  border: 1px solid #006600;
+  margin-bottom: 0.5em;
+}
+/* line 44, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #image-mode-preview figcaption {
+  display: block;
+  font-family: Calligraffitti;
+  font-size: 250%;
+  text-align: center;
+}
+/* line 56, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #image-mode-beta {
+  background: #eeffee;
+  border: 1px solid #006600;
+  padding: 1em;
+  border-width: 1px;
+  display: block;
+  float: left;
+  margin-bottom: 1em;
+  padding: 10px 15px;
+  text-align: center;
+  width: 404px;
+}
+/* line 66, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #image-mode-beta header {
+  display: block;
+  font-weight: bold;
+}
+/* line 70, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #image-mode-beta p {
+  font-family: "Droid Sans", Helvetica, Arial, Verdana, sans-serif;
+  font-size: 75%;
+  margin: 0;
+}
+/* line 75, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #image-mode-beta .pledgie-link {
+  margin: 0.75em 0;
+}
+/* line 78, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #image-mode-description {
+  float: left;
+  width: 436px;
+}
+
 /* line 1, ../../../app/stylesheets/static/_terms.sass */
 body.static-terms {
   text-align: center;