connect /donate to pledgie via jsonp

app/stylesheets/static/_donate.sass

@@ -1,3 +1,6 @@
+@import "compass/css3/gradient"
+@import "compass/css3/text-shadow"
+
 body.static-donate
   #title
     margin-bottom: 0
@@ -9,6 +12,9 @@ body.static-donate
   #title, h2
     float: left
 
+  h2
+    margin-bottom: .25em
+
   .pledgie-link
     +awesome-button
     +loud-awesome-button-color
@@ -19,18 +25,53 @@ body.static-donate
     margin-top: .5em
     padding: .75em
 
+  #campaign-progress-wrapper
+    +border-radius(8px)
+    background: #aaa
+    +linear-gradient(color-stops(#ccc, #aaa))
+
+    border: 4px solid $module-border-color
+    clear: both
+    margin-bottom: 1.5em
+    position: relative
+    visibility: hidden
+
+  #campaign-progress
+    background: $module-border-color
+    +linear-gradient(color-stops($module-border-color + #222, $module-border-color))
+    border-right: 1px solid $module-border-color
+
+  #campaign-progress-wrapper, #campaign-progress
+    height: 2.5em
+
+  #campaign-progress-label
+    +text-shadow(#777, -1px, -1px, 0)
+    color: white
+    font-size: 150%
+    left: 0
+    position: absolute
+    top: 0
+    text-align: center
+    width: 100%
+
   $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-width: $image-mode-preview-image-width + 2 * ($image-mode-preview-image-border-width + $image-mode-preview-h-padding + $image-mode-preview-border-width)
-  #image-mode-preview
+  $image-mode-preview-outer-width: $image-mode-preview-width + $image-mode-preview-right-margin
-    border: $image-mode-preview-border-width solid $module-border-color
+
+  #image-mode-data
     clear: both
     display: block
     float: left
-    margin: 0 $image-mode-preview-right-margin 0 0
+    margin-right: $image-mode-preview-right-margin
+    width: $image-mode-preview-width
+
+  #image-mode-preview
+    border: $image-mode-preview-border-width solid $module-border-color
+    margin: 0 0 2em 0
     padding:
       top: $image-mode-preview-h-padding
       right: $image-mode-preview-h-padding
@@ -47,6 +88,19 @@ body.static-donate
       font-size: 250%
       text-align: center
 
+  #campaign-donors
+    display: none
+    margin-right: $image-mode-preview-right-margin
+    width: $image-mode-preview-width
+
+    ol
+      font-size: 85%
+      padding-left: 2em
+
+      span
+        color: $soft-text-color
+        float: right
+
   $image-mode-description-width: $container-width - $image-mode-preview-outer-width
 
   $image-mode-beta-h-padding: 15px
@@ -75,7 +129,14 @@ body.static-donate
     .pledgie-link
       margin: .75em 0
 
-  #image-mode-description
+  #image-mode-description, #image-mode-comments
     float: left
     width: $image-mode-description-width
 
+  &.campaign-loaded
+    #campaign-progress-wrapper
+      visibility: visible
+
+    #campaign-donors
+      display: block
+

app/views/static/donate.html.haml

@@ -2,21 +2,36 @@
 = pledgie_link :id => 'pledgie-link-with-title'
 %h2 Image Mode is almost here, but we need your help!
 
-%figure#image-mode-preview
+#campaign-progress-wrapper
-  = image_tag 'image_mode_preview.png'
+  #campaign-progress{:style => 'width: 27%'}
-  %figcaption
+  #campaign-progress-label
-    Image Mode ♥
+    We have
+    = surround '$', ',' do
+      %span.campaign-raised 100
+    and need
+    = precede '$' do
+      %span.campaign-goal 360
+    to run the upgraded server for a year
 
-%article#image-mode-beta
+%section#image-mode-data
-  %header Donate $5 or more for early beta access
+  %figure#image-mode-preview
+    = image_tag 'image_mode_preview.png'
+    %figcaption
+      Image Mode ♥
+  #campaign-donors
+    %h3 Thank you!
+    %ol
+
+#image-mode-beta
+  %header Donate at least $5 for early beta access
   = pledgie_link
   %p
     Include your
     = link_to 'Dress to Impress username', login_path_with_return_to
-    in Special Instructions.
+    in PayPal's Special Instructions field.
   %p We'll email you soon!
 
-%article#image-mode-description
+#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
@@ -33,8 +48,44 @@
     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.
 
+    **As a little treat, those who give at least $5 will get early access
+    to Image Mode.** Though we're still missing quite a few converted SWFs,
+    you'll be able to get a feel for what Image Mode will be when it's ready
+    for prime time, and help make sure it's exactly as simple and powerful as
+    it needs to be.
+
     **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.
+    know we can do it.
+
+#image-mode-comments
+  #disqus_thread
+  :javascript
+    var disqus_shortname = 'dresstoimpress';
+
+    // The following are highly recommended additional parameters. Remove the slashes in front to use.
+    var disqus_identifier = 'dresstoimpress_donate';
+
+    /* * * DON'T EDIT BELOW THIS LINE * * */
+    (function() {
+        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+
+        var s = document.createElement('script'); s.async = true;
+        s.type = 'text/javascript';
+        s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
+        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
+    }());
+  %a.dsq-brlink{:href => "http://disqus.com"}
+    blog comments powered by
+    %span.logo-disqus Disqus
+
+- content_for :javascripts do
+  = include_javascript_libraries :jquery
+  = javascript_include_tag 'static/donate'
+
+- content_for :meta do
+  %meta{:name => 'pledgie-campaign-id', :content => PLEDGIE_CAMPAIGN_ID}
 

public/javascripts/static/donate.js

@@ -0,0 +1,23 @@
+(function () {
+  var PLEDGIE_CAMPAIGN_ID = $('meta[name=pledgie-campaign-id]').attr('content');
+
+  var pledgieURL = 'http://pledgie.com/campaigns/' + PLEDGIE_CAMPAIGN_ID + '.json?callback=?';
+  $.getJSON(pledgieURL, function (data) {
+    var donorsEl = $('#campaign-donors');
+    var donorsList = donorsEl.children('ol');
+    var campaign = data.campaign;
+    var pledges = campaign.pledges;
+
+    var pledge, pledgeEl;
+    for(var i in pledges) {
+      pledge = pledges[i];
+      pledgeEl = $('<li/>');
+      $('<strong/>', {text: pledge.display_name}).appendTo(pledgeEl);
+      $('<span/>', {text: pledge.date}).appendTo(pledgeEl);
+      pledgeEl.appendTo(donorsList);
+    }
+
+    $(document.body).addClass('campaign-loaded');
+  });
+})();
+

public/stylesheets/compiled/screen.css

@@ -2463,20 +2463,24 @@ body.pets-bulk .script-only {
   display: none;
 }
 
-/* line 2, ../../../app/stylesheets/static/_donate.sass */
+/* line 5, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #title {
   margin-bottom: 0;
 }
-/* line 5, ../../../app/stylesheets/static/_donate.sass */
+/* line 8, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate h2 {
   font-style: italic;
   font-weight: normal;
 }
-/* line 9, ../../../app/stylesheets/static/_donate.sass */
+/* line 12, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #title, body.static-donate h2 {
   float: left;
 }
-/* line 12, ../../../app/stylesheets/static/_donate.sass */
+/* line 15, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate h2 {
+  margin-bottom: 0.25em;
+}
+/* line 18, ../../../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;
@@ -2512,7 +2516,7 @@ body.static-donate .pledgie-link:active {
 body.static-donate .pledgie-link:hover {
   background-color: #ee4b00;
 }
-/* line 16, ../../../app/stylesheets/static/_donate.sass */
+/* line 22, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #pledgie-link-with-title {
   float: right;
   font-size: 150%;
@@ -2520,30 +2524,88 @@ body.static-donate #pledgie-link-with-title {
   padding: 0.75em;
 }
 /* line 28, ../../../app/stylesheets/static/_donate.sass */
-body.static-donate #image-mode-preview {
+body.static-donate #campaign-progress-wrapper {
-  border: 1px solid #006600;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  background: #aaaaaa;
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa));
+  background-image: -moz-linear-gradient(top, #cccccc 0%, #aaaaaa 100%);
+  background-image: linear-gradient(top, #cccccc 0%, #aaaaaa 100%);
+  border: 4px solid #006600;
+  clear: both;
+  margin-bottom: 1.5em;
+  position: relative;
+  visibility: hidden;
+}
+/* line 39, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #campaign-progress {
+  background: #006600;
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #228822), color-stop(100%, #006600));
+  background-image: -moz-linear-gradient(top, #228822 0%, #006600 100%);
+  background-image: linear-gradient(top, #228822 0%, #006600 100%);
+  border-right: 1px solid #006600;
+}
+/* line 44, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #campaign-progress-wrapper, body.static-donate #campaign-progress {
+  height: 2.5em;
+}
+/* line 47, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #campaign-progress-label {
+  text-shadow: #777777 -1px -1px 0;
+  color: white;
+  font-size: 150%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  text-align: center;
+  width: 100%;
+}
+/* line 65, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #image-mode-data {
   clear: both;
   display: block;
   float: left;
-  margin: 0 20px 0 0;
+  margin-right: 20px;
+  width: 344px;
+}
+/* line 72, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #image-mode-preview {
+  border: 1px solid #006600;
+  margin: 0 0 2em 0;
   padding-top: 20px;
   padding-right: 20px;
   padding-bottom: 13.333px;
   padding-left: 20px;
 }
-/* line 40, ../../../app/stylesheets/static/_donate.sass */
+/* line 81, ../../../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 */
+/* line 85, ../../../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 */
+/* line 91, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #campaign-donors {
+  display: none;
+  margin-right: 20px;
+  width: 344px;
+}
+/* line 96, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #campaign-donors ol {
+  font-size: 85%;
+  padding-left: 2em;
+}
+/* line 100, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate #campaign-donors ol span {
+  color: #448844;
+  float: right;
+}
+/* line 110, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #image-mode-beta {
   background: #eeffee;
   border: 1px solid #006600;
@@ -2556,26 +2618,34 @@ body.static-donate #image-mode-beta {
   text-align: center;
   width: 404px;
 }
-/* line 66, ../../../app/stylesheets/static/_donate.sass */
+/* line 120, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #image-mode-beta header {
   display: block;
   font-weight: bold;
 }
-/* line 70, ../../../app/stylesheets/static/_donate.sass */
+/* line 124, ../../../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 */
+/* line 129, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #image-mode-beta .pledgie-link {
   margin: 0.75em 0;
 }
-/* line 78, ../../../app/stylesheets/static/_donate.sass */
+/* line 132, ../../../app/stylesheets/static/_donate.sass */
-body.static-donate #image-mode-description {
+body.static-donate #image-mode-description, body.static-donate #image-mode-comments {
   float: left;
   width: 436px;
 }
+/* line 137, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate.campaign-loaded #campaign-progress-wrapper {
+  visibility: visible;
+}
+/* line 140, ../../../app/stylesheets/static/_donate.sass */
+body.static-donate.campaign-loaded #campaign-donors {
+  display: block;
+}
 
 /* line 1, ../../../app/stylesheets/static/_terms.sass */
 body.static-terms {