diff --git a/r2/Makefile b/r2/Makefile index 3bd992c69..f1d4e6d3f 100644 --- a/r2/Makefile +++ b/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 diff --git a/r2/r2/config/routing.py b/r2/r2/config/routing.py index 6eab4c2f3..0feeb7437 100644 --- a/r2/r2/config/routing.py +++ b/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') diff --git a/r2/r2/controllers/front.py b/r2/r2/controllers/front.py index e94911fa2..d92700765 100755 --- a/r2/r2/controllers/front.py +++ b/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): diff --git a/r2/r2/lib/pages/pages.py b/r2/r2/lib/pages/pages.py index 8fff69989..7f03840f2 100755 --- a/r2/r2/lib/pages/pages.py +++ b/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 diff --git a/r2/r2/public/static/css/goldinfo.less b/r2/r2/public/static/css/goldinfo.less new file mode 100644 index 000000000..e01dc0eb8 --- /dev/null +++ b/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; + } +} diff --git a/r2/r2/public/static/gold/footer-bg.jpg b/r2/r2/public/static/gold/footer-bg.jpg new file mode 100644 index 000000000..8ddd1838e Binary files /dev/null and b/r2/r2/public/static/gold/footer-bg.jpg differ diff --git a/r2/r2/public/static/gold/gold-button-bg.png b/r2/r2/public/static/gold/gold-button-bg.png new file mode 100644 index 000000000..404475ddb Binary files /dev/null and b/r2/r2/public/static/gold/gold-button-bg.png differ diff --git a/r2/r2/public/static/gold/gold-insignia-big.png b/r2/r2/public/static/gold/gold-insignia-big.png new file mode 100644 index 000000000..a1858b605 Binary files /dev/null and b/r2/r2/public/static/gold/gold-insignia-big.png differ diff --git a/r2/r2/public/static/gold/header-bg.jpg b/r2/r2/public/static/gold/header-bg.jpg new file mode 100644 index 000000000..13574e454 Binary files /dev/null and b/r2/r2/public/static/gold/header-bg.jpg differ diff --git a/r2/r2/public/static/gold/inner-bg.jpg b/r2/r2/public/static/gold/inner-bg.jpg new file mode 100644 index 000000000..96b32a387 Binary files /dev/null and b/r2/r2/public/static/gold/inner-bg.jpg differ diff --git a/r2/r2/public/static/gold/postcard.jpg b/r2/r2/public/static/gold/postcard.jpg new file mode 100644 index 000000000..0a5917675 Binary files /dev/null and b/r2/r2/public/static/gold/postcard.jpg differ diff --git a/r2/r2/public/static/gold/reddit-gold.png b/r2/r2/public/static/gold/reddit-gold.png new file mode 100644 index 000000000..02ab262b9 Binary files /dev/null and b/r2/r2/public/static/gold/reddit-gold.png differ diff --git a/r2/r2/public/static/gold/sample-adsoptions.png b/r2/r2/public/static/gold/sample-adsoptions.png new file mode 100644 index 000000000..e5d3438ad Binary files /dev/null and b/r2/r2/public/static/gold/sample-adsoptions.png differ diff --git a/r2/r2/public/static/gold/sample-commenthighlighting.png b/r2/r2/public/static/gold/sample-commenthighlighting.png new file mode 100644 index 000000000..c8c2653cb Binary files /dev/null and b/r2/r2/public/static/gold/sample-commenthighlighting.png differ diff --git a/r2/r2/public/static/gold/sample-friends.png b/r2/r2/public/static/gold/sample-friends.png new file mode 100644 index 000000000..0ce70cd3b Binary files /dev/null and b/r2/r2/public/static/gold/sample-friends.png differ diff --git a/r2/r2/public/static/gold/sample-karma.png b/r2/r2/public/static/gold/sample-karma.png new file mode 100644 index 000000000..76299ec34 Binary files /dev/null and b/r2/r2/public/static/gold/sample-karma.png differ diff --git a/r2/r2/public/static/gold/sample-morecomments.png b/r2/r2/public/static/gold/sample-morecomments.png new file mode 100644 index 000000000..6e0cf29d4 Binary files /dev/null and b/r2/r2/public/static/gold/sample-morecomments.png differ diff --git a/r2/r2/public/static/gold/sample-savecomments.png b/r2/r2/public/static/gold/sample-savecomments.png new file mode 100644 index 000000000..fc2659597 Binary files /dev/null and b/r2/r2/public/static/gold/sample-savecomments.png differ diff --git a/r2/r2/public/static/gold/shiny.png b/r2/r2/public/static/gold/shiny.png new file mode 100644 index 000000000..2d9ec1add Binary files /dev/null and b/r2/r2/public/static/gold/shiny.png differ diff --git a/r2/r2/public/static/gold/stamp.png b/r2/r2/public/static/gold/stamp.png new file mode 100644 index 000000000..9f98326c4 Binary files /dev/null and b/r2/r2/public/static/gold/stamp.png differ diff --git a/r2/r2/public/static/gold/sticker.png b/r2/r2/public/static/gold/sticker.png new file mode 100644 index 000000000..3ebaf0a25 Binary files /dev/null and b/r2/r2/public/static/gold/sticker.png differ diff --git a/r2/r2/templates/goldinfopage.html b/r2/r2/templates/goldinfopage.html new file mode 100644 index 000000000..6fe99e580 --- /dev/null +++ b/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 name="feature_item(img_src, description_md, extra_class='')"> +
+
+
+ %if 'new' in extra_class.split(): +
${_('New!')}
+ %endif + ${_md(description_md)} +
+
+ + +<%def name="content()"> +
+
+ +

${_('Make reddit better.')}

+

${_('reddit gold adds shiny extra features to your account that are made possible thanks to support from people like you.')}

+
+ ${_('buy reddit gold')} + ${_('or')} + ${_('send us a postcard')} +
+
+ ${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.' + ))} +
+

Last, but not least:

+ +
+ +
+
${_('or')}
+ +
+ ## 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('|') %> +

+ % if len(parts) == 5: + ${parts[0]} + ${parts[1]} + ${parts[2]} + ——${parts[3]}—— + ${parts[4]} + % else: + ${parts[0]} + % endif +

+
+
${_('view the postcard gallery')}
+
+
+ +