Shiny new gold info page.

r2/Makefile

@@ -95,7 +95,7 @@ clean_ini:
 
 #################### CSS file lists
 SPRITED_STYLESHEETS += reddit.css compact.css
-LESS_STYLESHEETS :=
+LESS_STYLESHEETS := goldinfo.less
 OTHER_STYLESHEETS := reddit-ie6-hax.css reddit-ie7-hax.css mobile.css highlight.css
 
 #################### Static Files

r2/r2/config/routing.py

@@ -182,6 +182,7 @@ def make_map():
     mc('/thanks/:secret', controller='forms', action="claim")
 
     mc('/gold', controller='forms', action="gold")
+    mc('/gold/about', controller='front', action='gold_info')
     mc('/gold/thanks', controller='front', action='goldthanks')
 
     mc('/password', controller='forms', action="password")
@@ -189,6 +190,7 @@ def make_map():
        requirements=dict(action="random|framebuster|selfserviceoatmeal"))
     mc('/:action', controller='embed',
        requirements=dict(action="help|blog|faq"))
+    mc('/help/gold', controller='redirect', action='redirect', dest='/gold/about')
     mc('/help/*anything', controller='embed', action='help')
     
     mc('/wiki/create/*page', controller='wiki', action='wiki_create')

r2/r2/controllers/front.py

@@ -1051,6 +1051,10 @@ class FrontController(RedditController, OAuth2ResourceController):
                                              lounge_md=lounge_md)).render()
 
 
+    def GET_gold_info(self):
+        return GoldInfoPage(_("gold"), show_sidebar=False).render()
+
+
 class FormsController(RedditController):
 
     def GET_password(self):

r2/r2/lib/pages/pages.py

@@ -3770,3 +3770,6 @@ class InterestBar(Templated):
     def __init__(self, has_subscribed):
         self.has_subscribed = has_subscribed
         Templated.__init__(self)
+
+class GoldInfoPage(BoringPage):
+    pass

r2/r2/public/static/css/goldinfo.less

@@ -0,0 +1,324 @@
+.transform(...) {
+    -webkit-transform: @arguments;
+    -moz-transform: @arguments;
+    -o-transform: @arguments;
+    -ms-transform: @arguments;
+    transform: @arguments;
+}
+
+section#about-gold, section#postcard, .or-box {
+    font-family: "Bitstream Charter", serif;
+}
+
+section#about-gold {
+    width: 960px;
+    margin: 40px auto;
+    background: url(../gold/inner-bg.jpg) 11px repeat-y;
+
+    h1 {
+        font-weight: bold;
+    }
+
+    p {
+        font-size: 18px;
+    }
+
+    .buy-gold-button, .postcard-button {
+        position: relative;
+        border-radius: 5px;
+        box-shadow: 0 3px 0 #bca88b;
+
+        &:active {
+            top: 2px;
+            box-shadow: none;
+            outline: none;
+        }
+    }
+
+    .buy-gold-button {
+        display: inline-block;
+        padding: 4px 14px;
+        color: #e3d2a2;
+        font-size: 22px;
+        font-weight: bold;
+        line-height: 26px;
+        background: url(../gold/gold-button-bg.png) left top repeat-x;
+        border: 3px solid #5a3f1a;
+        text-shadow: 0 1px 1px #2c2c2c;
+
+        &:after {
+            content: '';
+            position: absolute;
+            right: -3px;
+            top: -4px;
+            display: block;
+            width: 18px;
+            height: 18px;
+            background: url(../gold/shiny.png) no-repeat;
+            opacity: .6;
+        }
+
+        &:hover {
+            background-position: left bottom;
+            color: #f2ead4;
+            &:after {
+                opacity: 1;
+            }
+        }
+    }
+
+    .postcard-button {
+        padding: 4px 10px 4px 5px;
+        color: #424242;
+        font-size: 18px;
+        background: #f5f0e6;
+        border: 3px solid #656158;
+        text-shadow: 0 1px 1px #bbb;
+
+        img {
+            margin-right: 9px;
+            width: 48px;
+            height: 58px;
+            vertical-align: middle;
+        }
+
+        &:hover {
+            border-color: #8d6411;
+            text-shadow: 0 1px #ecbe61;
+            img {
+                .transform(rotate(-8deg));
+            }
+        }
+    }
+
+    header {
+        // could use box-sizing here, but want to look semi-decent in IE7
+        @width: 960px;
+        @height: 164px;
+        @padding-left: 242px;
+        @padding-right: 50px;
+        @padding-top: 23px;
+        position: relative;
+        top: -10px;
+        width: @width - @padding-left - @padding-right;
+        height: @height - @padding-top;
+        padding-top: @padding-top;
+        padding-left: @padding-left;
+        padding-right: @padding-right;
+        background: url(../gold/header-bg.jpg) no-repeat center top;
+
+        .insignia {
+            position: absolute;
+            left: 38px;
+            top: 6px;
+        }
+
+        h1, p {
+            display: inline;
+        }
+
+        h1 {
+            font-size: 24px;
+            margin-right: .5em;
+        }
+
+        .actions {
+            margin-top: 10px;
+        }
+
+        .or {
+            font-size: 18px;
+            margin: 0 16px;
+        }
+    }
+
+    section {
+        @section-height: 135px;
+        height: @section-height;
+        line-height: @section-height;
+        margin: 0 45px;
+        padding: 30px 25px;
+        border-bottom: 1px solid rgba(255,255,255,.65);
+        &.last {
+            border-bottom: none;
+        }
+
+        h1 {
+            font-size: 24px;
+            font-weight: normal;
+            margin: 0;
+            margin-bottom: .25em;
+        }
+
+        p, ul {
+            color: #555;
+            font-size: 16px;
+        }
+
+        .description, .sample {
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        .description {
+            position: relative;
+            width: 460px;
+            line-height: normal;
+
+            .new-mark {
+                position: absolute;
+                top: -24px;
+                color: #9a7d2e;
+                font-size: 17px;
+                font-weight: bold;
+                font-style: italic;
+            }
+        }
+
+        .sample {
+            @border-radius: 6px;
+            position: relative;
+            float: right;
+            width: 315px;
+            height: @section-height;
+            margin: 0;
+            background: white;
+            border-radius: @border-radius;
+            text-align: center;
+
+            & img {
+                vertical-align: middle;
+            }
+
+            &:after {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                border-radius: @border-radius;
+                box-shadow: 0 1px 5px #735121 inset;
+            }
+        }
+
+        &.lounge .sample {
+            background: white url(../gold/gold-pattern.png)
+        }
+    }
+
+    section.etc {
+        height: auto;
+        line-height: normal;
+        strong {
+            color: black;
+            font-size: 18px;
+            margin-right: .5em;
+        }
+    }
+
+    footer {
+        @height: 169px;
+        @padding-top: 18px;
+        position: relative;
+        top: 10px;
+        width: 960px;
+        height: @height - @padding-top;
+        padding-top: @padding-top;
+        background: url(../gold/footer-bg.jpg) no-repeat;
+        text-align: center;
+
+        h1 {
+            font-size: 26px;
+        }
+
+        p {
+            margin-bottom: 18px;
+        }
+    }
+
+    header, footer {
+        text-shadow: 0 2px 1px rgba(255,255,255,.5);
+    }
+}
+
+.or-box {
+    background: #817461;
+    margin: 0 auto;
+    padding: 3px 0;
+    width: 48px;
+    border-radius: 4px;
+    color: white;
+    font-size: 16px;
+    text-align: center;
+}
+
+a.postcard {
+    display: block;
+    width: 765px;
+    height: 502px;
+    margin: 20px auto;
+}
+
+section#postcard {
+    @height: 502px;
+    @padding-top: 78px;
+    position: relative;
+    height: @height - @padding-top;
+    padding-left: 34px;
+    padding-right: 390px;
+    padding-top: @padding-top;
+    margin-left: 32px;
+    background: url(../gold/postcard.jpg);
+    color: #444;
+    text-align: center;
+
+    h1 {
+        span, strong {
+            display: block;
+            font-size: 22px;
+        }
+
+        strong {
+            font-size: 32px;
+        }
+
+        .for {
+            margin-top: 8px;
+            margin-bottom: 0px;
+        }
+
+        .of {
+            font-size: 17px;
+            margin: 20px 0;
+        }
+
+        .gold-typo {
+            display: inline-block;
+            width: 170px;
+            height: 40px;
+            background: url(../gold/reddit-gold.png) no-repeat;
+            text-indent: -9999px;
+        }
+    }
+
+    .sticker {
+        position: absolute;
+        top: 174px;
+        left: 306px;
+        width: 85px;
+        height: 86px;
+        background: url(../gold/sticker.png) no-repeat;
+
+        div {
+            color: white;
+            padding: 20px 0;
+            font: bold 13px sans-serif;
+            .transform(rotate(-15deg));
+        }
+    }
+
+    &:hover .sticker {
+        background-position: 0 bottom;
+    }
+}

r2/r2/templates/goldinfopage.html

@@ -0,0 +1,134 @@
+## The contents of this file are subject to the Common Public Attribution
+## License Version 1.0. (the "License"); you may not use this file except in
+## compliance with the License. You may obtain a copy of the License at
+## http://code.reddit.com/LICENSE. The License is based on the Mozilla Public
+## License Version 1.1, but Sections 14 and 15 have been added to cover use of
+## software over a computer network and provide for limited attribution for the
+## Original Developer. In addition, Exhibit A has been modified to be
+## consistent with Exhibit B.
+##
+## Software distributed under the License is distributed on an "AS IS" basis,
+## WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for
+## the specific language governing rights and limitations under the License.
+##
+## The Original Code is reddit.
+##
+## The Original Developer is the Initial Developer.  The Initial Developer of
+## the Original Code is reddit Inc.
+##
+## All portions of the code written by reddit are Copyright (c) 2006-2012
+## reddit Inc. All Rights Reserved.
+###############################################################################
+<%!
+  from r2.lib.template_helpers import static
+%>
+<%namespace file="less.html" import="less_stylesheet"/>
+<%namespace file="utils.html" import="tags, _md"/>
+<%inherit file="reddit.html"/>
+
+<%def name="stylesheet()">
+  ${parent.stylesheet()}
+  ${less_stylesheet('goldinfo.less')}
+</%def>
+
+<%def name="feature_item(img_src, description_md, extra_class='')">
+  <section ${tags(_class=extra_class)}>
+    <div class="sample"><img src="${img_src}" alt=""></div>
+    <div class="description">
+      %if 'new' in extra_class.split():
+        <div class="new-mark">${_('New!')}</div>
+      %endif
+      ${_md(description_md)}
+    </div>
+  </section>
+</%def>
+
+<%def name="content()">
+  <section id="about-gold">
+    <header>
+      <img class="insignia" src="${static('gold/gold-insignia-big.png')}" alt="">
+      <h1>${_('Make reddit better.')}</h1>
+      <p>${_('reddit gold adds shiny extra features to your account that are made possible thanks to support from people like you.')}</p>
+      <div class="actions">
+        <a class="buy-gold-button" href="/gold">${_('buy reddit gold')}</a>
+        <span class="or">${_('or')}</span>
+        <a class="postcard-button" href="#postcard"><img src="${static('gold/stamp.png')}" alt=""> ${_('send us a postcard')}</a>
+      </div>
+    </header>
+    ${feature_item(static('gold/sample-morecomments.png'),
+      _(
+        '# More subreddits and comments per page.\n'
+        'Our servers work harder for gold members.  \n'
+        'Subscribe to up to 100 subreddits on your front page.  \n'
+        'Read comment threads 1500 comments at a time.'
+      ))}
+    ${feature_item(static('gold/sample-commenthighlighting.png'),
+      _(
+        '# New comment highlighting.\n'
+        "What's new? Highlight which comments are new since the last time you viewed a thread."
+      ))}
+    ${feature_item(static('gold/sample-savecomments.png'),
+    _(
+        '# Save comments and view by subreddit.\n'
+        "Save the great comments you'd like to revisit later.  \n"
+        'Filter your favorite posts and comments by subreddit.'
+      ), 'new')}
+    ${feature_item(static('gold/sample-adsoptions.png'),
+      _(
+        '# Turn off ads.\n'
+        'Advertisements are optional to gold members.'
+      ))}
+    ${feature_item(static('gold/sample-friends.png'),
+      _(
+        '# Friends with benefits.\n'
+        'Add notes to keep track of them all.'
+      ))}
+    ${feature_item(static('gold/sample-karma.png'),
+      _(
+        '# More stats.\n'
+        'View your karma broken down by the communities you take part in.'
+      ))}
+    <section class="etc last">
+      <h1>Last, but not least:</h1>
+      <ul>
+        <li><strong>${_('The Lounge.')}</strong>&#32;${_('Access to a super-secret members-only community that may or may not exist.')}</li>
+        <li><strong>${_('Beta test new features.')}</strong>&#32;${_('We occasionally invite gold members to try out new features first.')}</li>
+        <li><strong>${_('A trophy on your user page.')}</strong>&#32;${_('As thanks for supporting reddit gold.')}</li>
+        <li><strong>${_('More to come.')}</strong>&#32;${_("We have many more ideas for gold features, and will add to this list in the future.")}</li>
+      </ul>
+    </section>
+    <footer>
+      <h1>${_('become a member today.')}</h1>
+      <p>${_('reddit gold is $3.99 / month, or $29.99 for a year.')}</p>
+      <a class="buy-gold-button" href="/gold">${_('buy reddit gold')}</a>
+    </footer>
+  </section>
+  <div class="or-box">${_('or')}</div>
+  <a class="postcard" href="/about/postcards" target="_blank">
+    <section id="postcard">
+      ## TRANSLATORS: this string is displayed as the content of a postcard
+      ## with pretty typographical formatting.
+      ## If you use '|' characters to split the translated string into 5 parts,
+      ## the parts will be split onto separate lines with fancy typographic
+      ## formatting specific to each line (see the site for an example).
+      ## If this fancy formatting isn't a good fit for your language, omit the
+      ## '|' characters. The translated string will be displayed in full size
+      ## without any typographic effects.
+      <% parts = _('send us a postcard | for | 1 free month | of | reddit gold').split('|') %>
+      <h1>
+        % if len(parts) == 5:
+          <strong>${parts[0]}</strong>
+          <span class="for">${parts[1]}</span>
+          <strong>${parts[2]}</strong>
+          <span class="of">&mdash;&mdash;${parts[3]}&mdash;&mdash;</span>
+          <span class="gold-typo">${parts[4]}</span>
+        % else:
+          <strong>${parts[0]}</strong>
+        % endif
+      </h1>
+      <div class="sticker">
+        <div>${_('view the postcard gallery')}</div>
+      </div>
+    </section>
+  </a>
+</%def>