diff --git a/app/stylesheets/static/_donate.sass b/app/stylesheets/static/_donate.sass index af3f743a..4b9a53dd 100644 --- a/app/stylesheets/static/_donate.sass +++ b/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 - border: $image-mode-preview-border-width solid $module-border-color + $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-outer-width: $image-mode-preview-width + $image-mode-preview-right-margin + + #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 + diff --git a/app/views/static/donate.html.haml b/app/views/static/donate.html.haml index f5e5ae69..52d8d134 100644 --- a/app/views/static/donate.html.haml +++ b/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 - = image_tag 'image_mode_preview.png' - %figcaption - Image Mode ♥ +#campaign-progress-wrapper + #campaign-progress{:style => 'width: 27%'} + #campaign-progress-label + 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 - %header Donate $5 or more for early beta access +%section#image-mode-data + %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} diff --git a/public/javascripts/static/donate.js b/public/javascripts/static/donate.js new file mode 100644 index 00000000..53b56fe4 --- /dev/null +++ b/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 = $('
  • '); + $('', {text: pledge.display_name}).appendTo(pledgeEl); + $('', {text: pledge.date}).appendTo(pledgeEl); + pledgeEl.appendTo(donorsList); + } + + $(document.body).addClass('campaign-loaded'); + }); +})(); + diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css index c482ae6c..f57f9c99 100644 --- a/public/stylesheets/compiled/screen.css +++ b/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 { - border: 1px solid #006600; +body.static-donate #campaign-progress-wrapper { + -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 */ -body.static-donate #image-mode-description { +/* line 132, ../../../app/stylesheets/static/_donate.sass */ +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 {