Pro promos.

master
Nick Sergeant 2013-01-22 00:00:23 -05:00
parent 304a3fdcf7
commit 636255fe07
11 changed files with 126 additions and 44 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -130,13 +130,17 @@ header.main {
float: left;
letter-spacing: -1px;
margin: 11px 0 0 16px;
text-decoration: none;
text-shadow: 0 1px 2px black;
span {
color: #87D2DC;
}
&:focus {
outline: none;
}
span {
color: #87D2DC;
&:hover {
text-shadow: 0 0 100px white;
}
}
}
@ -191,10 +195,10 @@ header.main {
padding: 6px 7px 5px 7px;
margin-right: 16px;
text-decoration: none;
-webkit-transition: border .08s linear;
-moz-transition: border .08s linear;
-o-transition: border .08s linear;
transition: border .08s linear;
-webkit-transition: border .03s linear;
-moz-transition: border .03s linear;
-o-transition: border .03s linear;
transition: border .03s linear;
&:hover {
border-bottom: 2px solid #3A5E67;
@ -748,10 +752,10 @@ article.snipt {
text-overflow: ellipsis;
text-decoration: none;
white-space: nowrap;
-webkit-transition: color .08s linear;
-moz-transition: color .08s linear;
-o-transition: color .08s linear;
transition: color .08s linear;
-webkit-transition: color .03s linear;
-moz-transition: color .03s linear;
-o-transition: color .03s linear;
transition: color .03s linear;
&:hover {
color: #3BAAF3;
@ -1466,6 +1470,41 @@ div.site-notice {
text-decoration: underline;
}
}
a.go-pro {
background: transparent url('/static/images/pro-hero-bg.png') top left repeat;
border: 2px solid white;
border-left: 0;
color: #D4D4D4;
display: block;
font: bold 12px $Helvetica;
margin: 30px 30px 30px 0;
padding: 8px 14px;
text-align: center;
text-decoration: none;
@include multi-border-radius(0, 4px, 4px, 0);
span.snipt {
color: #F9F9F9;
font: normal 14px $Rockwell;
}
span.pro {
color: #3299B7;
font-family: $Helvetica;
font-style: italic;
font-weight: bold;
margin-right: 4px;
}
span.emph {
color: #666;
}
&:hover {
color: #FFF;
span.pro {
color: #3299B7;
}
}
}
// Pages
body.account {
@ -1564,7 +1603,7 @@ body.detail {
div.rochester-made {
width: 840px;
}
div.site-notice {
div.site-notice, a.go-pro {
margin-right: 100px;
}
}
@ -1660,9 +1699,36 @@ body.jobs {
}
}
body.pro {
div.pro-hero {
background: transparent url('/static/images/pro-hero-bg.png') top left repeat;
border-bottom: 2px solid white;
color: #F9F9F9;
font: normal 36px $Rockwell;
padding: 30px 0;
position: relative;
text-align: center;
z-index: 50;
@include box-shadow(0, 2px, 3px, rgba(#DDDDDD, .7));
span {
color: #3299B7;
}
span.pro {
font: bold italic 33px $Helvetica;
}
}
div.static-box {
border-top: 0;
margin-top: 0;
padding-bottom: 0;
padding-top: 10px;
padding-top: 20px;
position: relative;
z-index: 49;
@include multi-border-radius(0px, 0px, 4px, 4px);
p:first-of-type {
margin-top: 10px;
}
}
h2 {
span.pro {
@ -1674,6 +1740,18 @@ body.pro {
h3, h4 {
text-align: center;
}
h3 {
font-size: 23px;
span {
color: #999999;
}
span.pro {
color: #3299B7;
font-style: italic;
font-weight: bold;
}
}
h4 {
margin-bottom: 35px;
}
@ -1777,16 +1855,6 @@ body.pro {
}
}
}
div.pro-hero {
border-bottom: 1px solid #17333A;
color: #3299B7;
font: bold italic 40px $Helvetica;
padding: 30px 0;
text-align: center;
text-shadow: 0 1px 0 black;
@include box-shadow(0, 4px, 5px, #DDDDDD);
@include vertical-gradient(#12313E, #2F4C55);
}
}
body.search {
div.empty-snipts {
@ -1965,6 +2033,12 @@ body.static {
line-height: 20px;
margin: 15px 0;
}
span.pro {
color: #3299B7;
font-family: $Helvetica;
font-style: italic;
font-weight: bold;
}
}
aside.main {
padding-top: 30px;

Binary file not shown.

After

Width:  |  Height:  |  Size: 191 B

View File

@ -58,7 +58,7 @@
{% endif %}
<section class="snipts" id="snipts">
{% if request.user.is_authenticated and not request.user.profile.is_pro %}
<div class="alert alert-info site-notice"><a href="/pro/">Snipt Pro</a>: Get exclusive features and support the development of Snipt for only $3/month.</div>
{% include 'go-pro.html' %}
{% endif %}
{% with 'true' as detail %}
{% include "snipts/snipt-list.html" %}

View File

@ -14,7 +14,7 @@
{% block content %}
<section class="snipts" id="snipts">
{% if request.user.is_authenticated and not request.user.profile.is_pro %}
<div class="alert alert-info site-notice"><a href="/pro/">Snipt Pro</a>: Get exclusive features and support the development of Snipt for only $3/month.</div>
{% include 'go-pro.html' %}
{% endif %}
{% autopaginate snipts 10 %}
{% for snipt in snipts %}

View File

@ -60,9 +60,6 @@
<li>
<a href="/public/" {% if '/public/' in request.path or public %} class="active"{% endif %}>Public snipts</a>
</li>
<!--<li>-->
<!--<a href="/jobs/" {% if '/jobs/' in request.path %} class="active"{% endif %}>Jobs</a>-->
<!--</li>-->
<li>
<a href="/login/?next={{ request.path }}" {% if '/login/' in request.path %} class="active"{% endif %}>Log in</a>
</li>
@ -76,9 +73,6 @@
<li>
<a href="/public/" {% if '/public/' in request.path or public %} class="active"{% endif %}>Public snipts</a>
</li>
<!--<li>-->
<!--<a href="/jobs/" {% if '/jobs/' in request.path %} class="active"{% endif %}>Jobs</a>-->
<!--</li>-->
<li class="add-snipt">
<button class="btn btn-info btn-large" id="add-snipt">
Add {% if request.user.username == 'blog' %}Post{% else %}Snipt{% endif %}

6
templates/go-pro.html Normal file
View File

@ -0,0 +1,6 @@
<a class="go-pro" href="/pro/">
<span class="snipt">snipt</span>
<span class="pro">Pro</span>
<span class="emph">&mdash;</span>
Get exclusive interface features and professional blogging tools.
</a>

View File

@ -11,8 +11,10 @@
{% endblock %}
{% block content %}
<div class="pro-hero">
snip<span>t</span> <span class="pro">Pro</span>
</div>
<div class="static-box">
<h2>Snipt <span class="pro">Pro</span> members</h2>
<p><strong>Congratulations!</strong> You're now a Snipt Pro.</p>
<p>You should <a target="blank" href="http://twitter.com/intent/tweet?text=I'm now a @Snipt Pro. Are you? https://snipt.net/pro/">tell the world</a>. If you ever need anything at all, <a href="mailto:nick@snipt.net">email Nick</a> directly.</p>
<p>Also, you rock. :)</p>

View File

@ -19,8 +19,10 @@
{% endblock %}
{% block content %}
<div class="pro-hero">
snip<span>t</span> <span class="pro">Pro</span>
</div>
<div class="static-box">
<h2>Snipt <span class="pro">Pro</span> signup</h2>
<form class="form-horizontal" id="pro-signup" method="post" action="/pro/signup/complete/">
<fieldset>
<div class="payment-loading"><span>Please wait&hellip;</span></div>

View File

@ -10,27 +10,31 @@
{% block content %}
<div class="pro-hero">
<span>Pro</span>
snip<span>t</span> <span class="pro">Pro</span>
</div>
<div class="static-box">
<h2>Snipt <span class="pro">Pro</span></h2>
<p>Go Pro to get a more streamlined Snipt interface, as well as to unlock powerful blogging features (custom domain, premium themes, etc).</p>
<p>We're always adding new features for Pro users, so check this list often or follow us on <a href="https://twitter.com/snipt/">Twitter</a>.</p>
<h6>Pro features:</h6>
<p>
Go Pro to get a more streamlined Snipt interface, as well as unlock powerful blogging features.<br />
We're always adding new features for Pro users, so check this list often or follow us on <a href="https://twitter.com/snipt/">Twitter</a>.
</p>
<h6>Interface features:</h6>
<ul>
<li>No ads.</li>
<li><span class="pro">Pro</span> badge throughout the site.</li>
<li>Statistics for "views" and "favorites" of your snipts.</li>
<li>&ldquo;Pro&rdquo; badge throughout the site.</li>
<li><a href="https://www.gittip.com/">GitTip</a> integration ("tip" link on every snipt next to your username).</li>
</ul>
<h6>Blogging features:</h6>
<ul>
<li>Custom domain for your <a href="/blogging/">Snipt blog</a>.</li>
<li>Exclusive Pro-only theme for your blog. Here's a <a href="http://nicksergeant.com/">preview of the theme</a>.</li>
<li>Ability to customize CSS in your blog theme.</li>
<li>Exclusive Pro-only theme for your blog. <a href="http://nicksergeant.com/">Here's a preview</a> of the first available theme (working on more).</li>
<li><a href="https://www.gittip.com/">GitTip</a> integration ("tip" link on every snipt next to your username, and on your profile). <a href="https://snipt.net/nick/">Sample</a>.</li>
</ul>
{% if request.user.profile.is_pro %}
<h3>You're already a Pro. You know that ;)</h3>
{% else %}
<h3>Pro is just $3/month.</h3>
<h4><a href="/pro/signup/" class="btn btn-large btn-success">Sign Up Now</a></h4>
<h3><span><span class="pro">Pro</span> is only</span> $3/month.</h3>
<h4><a href="/pro/signup/" class="btn btn-large btn-success">Buy Now</a></h4>
{% endif %}
</div>
{% endblock %}