image mode welcome page

app/stylesheets/screen.sass

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

app/stylesheets/static/_donate.sass

@@ -46,7 +46,9 @@ body.static-donate
 
     img
       border: $image-mode-preview-border-width solid $module-border-color
+      height: $image-mode-preview-image-width
       margin-bottom: .5em
+      width: $image-mode-preview-image-width
 
     figcaption
       display: block

app/stylesheets/static/_image_mode.sass

@@ -0,0 +1,11 @@
+body.static-image_mode
+  h2
+    margin:
+      bottom: .25em
+      top: 1.25em
+
+  ol, ul
+    font-family: $text-font
+    margin-bottom: 1em
+    padding-left: 3em
+

app/views/layouts/application.html.haml

@@ -36,9 +36,9 @@
       #userbar
         - if user_signed_in?
           - if can_use_image_mode?
-            = link_to donate_path, :id => 'userbar-image-mode' do
+            = link_to image_mode_path, :id => 'userbar-image-mode' do
               = image_tag 'image_mode_icon.png', :alt => 'Image Mode'
-              Thank you!
+              Welcome to Image Mode!
           %span
             Hey,
             = succeed '!' do

app/views/static/image_mode.html.haml

@@ -0,0 +1,100 @@
+- title 'Welcome to Image Mode!'
+
+:markdown
+  Thank you so much for helping to support Dress to Impress! From the data on
+  the site to the funds that keep it running, none of it happens without you.
+
+  Here's a quick breakdown of Image Mode, its beta status, and what that means
+  for you.
+
+  What is Image Mode?
+  -------------------
+
+  Image Mode has two main features:
+
+  1. **Save images of your pets!**
+    On supported browsers, you will see a "Download" button. Clicking it will
+    start downloading a PNG image file to your computer.
+  2. **No more Flash!**
+    In Flash Mode, your browser downloads several Flash files and layers them
+    on top of each other. In Image Mode, we layer images, instead.
+
+
+  How do I use it?
+  ----------------
+
+  Start using Dress to Impress normally: type in a pet name or choose a
+  color/species combination from the home page. Then, to the left of the pet's
+  image, you should see Flash highlighted.
+  **Click on the word Image.** Congrats, you're in!
+
+
+  What does "Waiting on X images" mean?
+  -------------------------------------
+
+  This means that some of the images you're trying to view haven't been
+  converted yet. They're waiting in line to be converted, and, in order to keep
+  the site stable, **the server will not convert any more images until the
+  upgrade is ready**. So, in actuality, waiting will do you no good.
+
+  **Once we're out of beta, however, that message shouldn't stay up for very long at
+  all.** Once the images are done converting, they will appear, and the message
+  will disappear. Once we finish converting the thousands of Flash files
+  already in our database, the conversion line will almost always be very short.
+
+  The main reason that Image Mode is not ready for the public yet, and the
+  reason we're raising money for a server upgrade, is that **we're not done
+  converting all of the customization Flash files to images**. There are over
+  100,000 to convert, and each one can take up to 10 seconds or so. We have,
+  however, converted a lot of them already. However, we've also discovered that,
+  when we do the conversion process, we have unacceptable amounts of downtime.
+  You may have run into some of it during the past few weeks. So, the converters
+  are off until the upgrade.
+
+  **Remember, this is just a preview of Image Mode.** You pretty much won't have
+  all of the images you want until the upgrade is all done.
+
+
+  How do I download an image?
+  ---------------------------
+
+  Just click the Download button beneath the Flash/Image switch. If all goes
+  well, a download should begin automatically.
+
+
+  I don't see any Download button.
+  --------------------------------
+
+  Downloading currently only works for modern browsers that support the new
+  canvas feature. It is, however, supported in the latest versions of,
+
+  * [Google Chrome](http://www.google.com/chrome)
+  * [Mozilla Firefox](http://www.firefox.com/)
+  * [Opera](http://www.opera.com/)
+  * [Safari](http://www.apple.com/safari/)
+  * [Internet Explorer](http://www.microsoft.com/ie)
+
+  However, Internet Explorer currently is having trouble running Dress to
+  Impress in general, so is not recommended.
+
+
+  Why is the image so small?
+  --------------------------
+
+  We currently convert images to sizes 600x600, 300x300, 150x150. We use the
+  largest size that fits the space available. If you end up with the 150x150
+  images, searching for a nonsense search query and entering full screen mode
+  are some cheap, easy ways to see what image mode is like. A fix for this
+  issue is coming up soon.
+
+
+  What do I do if I find a problem? Have a suggestion? Just want to talk?
+  -----------------------------------------------------------------------
+
+  Email me at <webmaster@openneo.net>. Report Image Mode problems and broken
+  images, ask questions, give me cool ideas, or just say whatever you want.
+  That's what I'm here for.
+
+  Thanks again! Enjoy Image Mode!
+  -------------------------------
+

config/routes.rb

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

public/stylesheets/compiled/screen.css

@@ -2603,36 +2603,38 @@ body.static-donate #image-mode-preview {
 /* line 47, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #image-mode-preview img {
   border: 1px solid #006600;
+  height: 300px;
   margin-bottom: 0.5em;
+  width: 300px;
 }
-/* line 51, ../../../app/stylesheets/static/_donate.sass */
+/* line 53, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #image-mode-preview figcaption {
   display: block;
   font-family: Calligraffitti;
   font-size: 250%;
   text-align: center;
 }
-/* line 57, ../../../app/stylesheets/static/_donate.sass */
+/* line 59, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #campaign-donors {
   display: none;
   margin-right: 20px;
   width: 344px;
 }
-/* line 62, ../../../app/stylesheets/static/_donate.sass */
+/* line 64, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #campaign-donors ol {
   font-size: 85%;
   padding-left: 2em;
 }
-/* line 66, ../../../app/stylesheets/static/_donate.sass */
+/* line 68, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #campaign-donors ol span {
   color: #448844;
   float: right;
 }
-/* line 70, ../../../app/stylesheets/static/_donate.sass */
+/* line 72, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #campaign-donors.has-donors {
   display: block;
 }
-/* line 79, ../../../app/stylesheets/static/_donate.sass */
+/* line 81, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #image-mode-beta {
   background: #eeffee;
   border: 1px solid #006600;
@@ -2645,35 +2647,35 @@ body.static-donate #image-mode-beta {
   text-align: center;
   width: 404px;
 }
-/* line 89, ../../../app/stylesheets/static/_donate.sass */
+/* line 91, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #image-mode-beta header {
   display: block;
   font-weight: bold;
 }
-/* line 93, ../../../app/stylesheets/static/_donate.sass */
+/* line 95, ../../../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 98, ../../../app/stylesheets/static/_donate.sass */
+/* line 100, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #image-mode-beta form {
   margin: 0.75em 0;
 }
-/* line 101, ../../../app/stylesheets/static/_donate.sass */
+/* line 103, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #image-mode-beta form label {
   font-size: 85%;
   font-weight: bold;
 }
-/* line 105, ../../../app/stylesheets/static/_donate.sass */
+/* line 107, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #image-mode-beta form label:after {
   content: ":";
 }
-/* line 108, ../../../app/stylesheets/static/_donate.sass */
+/* line 110, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #image-mode-beta form input {
   width: 5em;
 }
-/* line 111, ../../../app/stylesheets/static/_donate.sass */
+/* line 113, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #image-mode-beta form button {
   background: #ff5c00 url('/images/alert-overlay.png?1296599919') repeat-x;
 }
@@ -2681,12 +2683,24 @@ body.static-donate #image-mode-beta form button {
 body.static-donate #image-mode-beta form button:hover {
   background-color: #ee4b00;
 }
-/* line 114, ../../../app/stylesheets/static/_donate.sass */
+/* line 116, ../../../app/stylesheets/static/_donate.sass */
 body.static-donate #image-mode-description, body.static-donate #image-mode-comments {
   float: right;
   width: 436px;
 }
 
+/* line 2, ../../../app/stylesheets/static/_image_mode.sass */
+body.static-image_mode h2 {
+  margin-bottom: 0.25em;
+  margin-top: 1.25em;
+}
+/* line 7, ../../../app/stylesheets/static/_image_mode.sass */
+body.static-image_mode ol, body.static-image_mode ul {
+  font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
+  margin-bottom: 1em;
+  padding-left: 3em;
+}
+
 /* line 1, ../../../app/stylesheets/static/_terms.sass */
 body.static-terms {
   text-align: center;