marrub
/
snipt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Working on new signup view.

master
Nick Sergeant 2014-05-02 16:36:51 -05:00
parent 362334fe14
commit 6873c0944e
6 changed files with 168 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
media/css/snipt.css
View File

File diff suppressed because one or more lines are too long

2
media/css/style.css
View File

File diff suppressed because one or more lines are too long

21
media/css/style.scss
View File

@ -1651,6 +1651,11 @@ a.go-pro {
margin: 30px 0; margin: 30px 0;
width: 749px; width: 749px;
} }
div.get-support {
bottom: 20px;
right: 20px;
position: fixed;
}
// Pages // Pages
body.account { body.account {
@ -1803,6 +1808,9 @@ body.is-pro {
} }
} }
} }
div.get-support {
display: none;
}
} }
body.pro { body.pro {
div.pro-hero { div.pro-hero {
@ -2085,6 +2093,10 @@ body.signup {
span { span {
color: #28C548; color: #28C548;
} }
h4 {
margin-bottom: 0;
margin-top: 40px;
}
p.sub { p.sub {
color: #F2F2F2; color: #F2F2F2;
font: normal 18px/24px $Helvetica; font: normal 18px/24px $Helvetica;
@ -2099,6 +2111,15 @@ body.signup {
} }
} }
} }
body.signup.pro {
div.info {
@include border-radius(0);
p.sub {
padding: 0 80px;
}
}
}
body.static { body.static {
.static-box { .static-box {
background: rgba(#FFF, .65); background: rgba(#FFF, .65);

73
templates/base.html
View File

@ -255,6 +255,9 @@
{% block main-edit %} {% block main-edit %}
<section class="main group hidden" id="main-edit"></section> <section class="main group hidden" id="main-edit"></section>
{% endblock %} {% endblock %}
<div class="get-support">
<a class="btn btn-info" href="/pro/">Get support &raquo;</a>
</div>
{% block keyboard-shortcuts %} {% block keyboard-shortcuts %}
<div class="modal hide" id="keyboard-shortcuts"> <div class="modal hide" id="keyboard-shortcuts">
<div class="modal-header"> <div class="modal-header">
@ -414,43 +417,43 @@
{% include 'snipts/snipt-edit-js-template.html' %} {% include 'snipts/snipt-edit-js-template.html' %}
</div> </div>
{% endblock %} {% endblock %}
{% if request.user.is_authenticated %} {% if request.user.is_authenticated and request.user.is_pro %}
{% if not debug %} {% if not debug %}
{% block intercom %} {% block intercom %}
<script id="IntercomSettingsScriptTag"> <script id="IntercomSettingsScriptTag">
var intercomSettings = { var intercomSettings = {
app_id: 'sajf131y', app_id: 'sajf131y',
user_id: {{ request.user.id }}, user_id: {{ request.user.id }},
user_hash: '{{ request.user.id|intercom_sha_256 }}', user_hash: '{{ request.user.id|intercom_sha_256 }}',
email: '{{ request.user.email }}', email: '{{ request.user.email }}',
created_at: {{ request.user.date_joined|date:"U" }}, created_at: {{ request.user.date_joined|date:"U" }},
custom_data: { custom_data: {
'snipts count': {% snipts_count_for_user %}, 'snipts count': {% snipts_count_for_user %},
'profile link': 'https://snipt.net/{{ request.user.username }}/', 'profile link': 'https://snipt.net/{{ request.user.username }}/',
'is pro': window.user_is_pro, 'is pro': window.user_is_pro,
'blog domain': '{{ request.user.profile.blog_domain }}' 'blog domain': '{{ request.user.profile.blog_domain }}'
}, },
widget: { widget: {
activator: '#IntercomDefaultWidget' activator: '#IntercomDefaultWidget'
} }
}; };
</script> </script>
<script> <script>
(function() { (function() {
function async_load() { function async_load() {
var s = document.createElement('script'); var s = document.createElement('script');
s.type = 'text/javascript'; s.async = true; s.type = 'text/javascript'; s.async = true;
s.src = 'https://static.intercomcdn.com/intercom.v1.js'; s.src = 'https://static.intercomcdn.com/intercom.v1.js';
var x = document.getElementsByTagName('script')[0]; var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x); x.parentNode.insertBefore(s, x);
} }
if (window.attachEvent) { if (window.attachEvent) {
window.attachEvent('onload', async_load); window.attachEvent('onload', async_load);
} else { } else {
window.addEventListener('load', async_load, false); window.addEventListener('load', async_load, false);
} }
})(); })();
</script> </script>
{% endblock %} {% endblock %}
{% endif %} {% endif %}
{% endif %} {% endif %}

184
templates/pro-signup.html
View File

@ -5,105 +5,105 @@
{% block body-class %}{{ block.super }} static pro pro-signup{% endblock %} {% block body-class %}{{ block.super }} static pro pro-signup{% endblock %}
{% block extra-scripts %} {% block extra-scripts %}
<script type="text/javascript" src="https://js.stripe.com/v1/"></script> <script type="text/javascript" src="https://js.stripe.com/v1/"></script>
{% endblock %} {% endblock %}
{% block js %} {% block js %}
{{ block.super }} {{ block.super }}
{% if debug %} {% if debug %}
Stripe.setPublishableKey('pk_test_cgknmaWRMQeJt2adEdvH3T9l'); Stripe.setPublishableKey('pk_test_cgknmaWRMQeJt2adEdvH3T9l');
{% else %} {% else %}
Stripe.setPublishableKey('pk_live_gUO2nCl7dhx6j0posz6gnbhA'); Stripe.setPublishableKey('pk_live_gUO2nCl7dhx6j0posz6gnbhA');
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block breadcrumb %} {% block breadcrumb %}
<li><a href="/pro/">Snipt Pro</a></li> <li><a href="/pro/">Snipt Pro</a></li>
<li><span class="prompt">/</span> <a href="/pro/signup/">Sign up</a></li> <li><span class="prompt">/</span> <a href="/pro/signup/">Sign up</a></li>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="pro-hero"> <div class="pro-hero">
snip<span>t</span> <span class="pro">Pro</span> snip<span>t</span> <span class="pro">Pro</span>
</div> </div>
{% if request.GET.declined %} {% if request.GET.declined %}
<div class="alert alert-error" style="margin: 30px;"> <div class="alert alert-error" style="margin: 30px;">
<strong>Your card was declined.</strong> You have not been charged. Please try again. <strong>Your card was declined.</strong> You have not been charged. Please try again.
</div> </div>
{% endif %} {% endif %}
<div class="static-box"> <div class="static-box">
<form class="form-horizontal" id="pro-signup" method="post" action="/pro/signup/complete/"> <form class="form-horizontal" id="pro-signup" method="post" action="/pro/signup/complete/">
<fieldset> <fieldset>
<div class="payment-loading"><span>Please wait&hellip;</span></div> <div class="payment-loading"><span>Please wait&hellip;</span></div>
<legend>$5 USD will be charged to your card monthly. Also, you rock. Tell yourself that every month, too.</legend> <legend>$5 USD will be charged to your card monthly. Also, you rock. Tell yourself that every month, too.</legend>
<div class="payment-errors alert alert-error"></div> <div class="payment-errors alert alert-error"></div>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="name">Name on card:</label> <label class="control-label" for="name">Name on card:</label>
<div class="controls"> <div class="controls">
<input type="text" class="input-xlarge" id="name" /> <input type="text" class="input-xlarge" id="name" />
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="number">Card number:</label> <label class="control-label" for="number">Card number:</label>
<div class="controls cards"> <div class="controls cards">
<input type="text" class="input-xlarge" id="number" /> <input type="text" class="input-xlarge" id="number" />
<img src="/static/img/card-visa.png" alt="Visa" /> <img src="/static/img/card-visa.png" alt="Visa" />
<img src="/static/img/card-mastercard.png" alt="MasterCard" /> <img src="/static/img/card-mastercard.png" alt="MasterCard" />
<img src="/static/img/card-discover.png" alt="Discover" /> <img src="/static/img/card-discover.png" alt="Discover" />
<img src="/static/img/card-american-express.png" alt="American Express" /> <img src="/static/img/card-american-express.png" alt="American Express" />
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="exp-month">Expiration date:</label> <label class="control-label" for="exp-month">Expiration date:</label>
<div class="controls"> <div class="controls">
<select id="exp-month" class="span2 exp-month"> <select id="exp-month" class="span2 exp-month">
<option value="">----</option> <option value="">----</option>
<option value="01">01 - January</option> <option value="01">01 - January</option>
<option value="02">02 - February</option> <option value="02">02 - February</option>
<option value="03">03 - March</option> <option value="03">03 - March</option>
<option value="04">04 - April</option> <option value="04">04 - April</option>
<option value="05">05 - May</option> <option value="05">05 - May</option>
<option value="06">06 - June</option> <option value="06">06 - June</option>
<option value="07">07 - July</option> <option value="07">07 - July</option>
<option value="08">08 - August</option> <option value="08">08 - August</option>
<option value="09">09 - September</option> <option value="09">09 - September</option>
<option value="10">10 - October</option> <option value="10">10 - October</option>
<option value="11">11 - November</option> <option value="11">11 - November</option>
<option value="12">12 - December</option> <option value="12">12 - December</option>
</select> </select>
<select id="exp-year" class="span1"> <select id="exp-year" class="span1">
<option value="">----</option> <option value="">----</option>
<option value="2012">2012</option> <option value="2012">2012</option>
<option value="2013">2013</option> <option value="2013">2013</option>
<option value="2014">2014</option> <option value="2014">2014</option>
<option value="2015">2015</option> <option value="2015">2015</option>
<option value="2016">2016</option> <option value="2016">2016</option>
<option value="2017">2017</option> <option value="2017">2017</option>
<option value="2018">2018</option> <option value="2018">2018</option>
<option value="2019">2019</option> <option value="2019">2019</option>
<option value="2020">2020</option> <option value="2020">2020</option>
<option value="2021">2021</option> <option value="2021">2021</option>
<option value="2022">2022</option> <option value="2022">2022</option>
</select> </select>
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="cvc">Security code (CVC):</label> <label class="control-label" for="cvc">Security code (CVC):</label>
<div class="controls"> <div class="controls">
<input type="text" class="input-min span1" id="cvc"> <input type="text" class="input-min span1" id="cvc">
</div> </div>
</div> </div>
<div class="form-actions"> <div class="form-actions">
{% csrf_token %} {% csrf_token %}
<button type="submit" class="btn btn-success">Sign up</button> <button type="submit" class="btn btn-success">Sign up</button>
<div class="security"> <div class="security">
<a href="https://stripe.com/help/security">Secure</a> by default. Every Snipt page is secure. <a href="https://stripe.com/help/security">Secure</a> by default. Every Snipt page is secure.
</div> </div>
<div class="stripe"> <div class="stripe">
Your credit card is stored securely with <a href="https://stripe.com">Stripe</a> and we use <a href="https://stripe.com/docs/stripe.js">Stripe.js</a> for maximum security. Your credit card is stored securely with <a href="https://stripe.com">Stripe</a> and we use <a href="https://stripe.com/docs/stripe.js">Stripe.js</a> for maximum security.
</div> </div>
</div> </div>
</fieldset> </fieldset>
</form> </form>
</div> </div>
{% endblock %} {% endblock %}

34
templates/pro.html
View File

@ -2,28 +2,24 @@
{% block page-title %}Snipt Pro{% endblock %} {% block page-title %}Snipt Pro{% endblock %}
{% block body-class %}{{ block.super }} static pro{% endblock %} {% block body-class %}{{ block.super }} static pro signup{% endblock %}
{% block breadcrumb %} {% block breadcrumb %}
<li><a href="/pro/">Snipt Pro</a></li> <li><a href="/pro/">Snipt Pro</a></li>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="pro-hero"> <div class="info">
snip<span>t</span> <span class="pro">Pro</span> Subscribe for only <span>$5/month</span>.
</div> <p class="sub">
<div class="static-box"> We believe the best way to build a superior product is to charge for it.
<h6>Going Pro gets you:</h6> As a paid Snipt member, you'll have unrestricted access to the app, <a href="/api/">API</a>,
<ul> instant chat support, and more.
<li>Custom domain for your <a href="/blogging/">Snipt blog</a>.</li> </p>
<li><span class="pro">Pro</span> badge throughout the site.</li> {% if request.user.profile.is_pro %}
<li>No ads.</li> <h3>You're already a Pro.</h3>
</ul> {% else %}
{% if request.user.profile.is_pro %} <h4><a href="/pro/signup/" class="btn btn-large btn-success">Subscribe</a></h4>
<h3>You're already a Pro.</h3> {% endif %}
{% else %} </div>
<h3><span><span class="pro">Pro</span> is only</span> $5/month.</h3>
<h4><a href="/pro/signup/" class="btn btn-large btn-success">Buy Now</a></h4>
{% endif %}
</div>
{% endblock %} {% endblock %}