Working on new signup view.
Nick Sergeant
parent
362334fe14
commit
6873c0944e
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1651,6 +1651,11 @@ a.go-pro {
|
|||
margin: 30px 0;
|
||||
width: 749px;
|
||||
}
|
||||
div.get-support {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
// Pages
|
||||
body.account {
|
||||
|
|
@ -1803,6 +1808,9 @@ body.is-pro {
|
|||
}
|
||||
}
|
||||
}
|
||||
div.get-support {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
body.pro {
|
||||
div.pro-hero {
|
||||
|
|
@ -2085,6 +2093,10 @@ body.signup {
|
|||
span {
|
||||
color: #28C548;
|
||||
}
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
margin-top: 40px;
|
||||
}
|
||||
p.sub {
|
||||
color: #F2F2F2;
|
||||
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 {
|
||||
.static-box {
|
||||
background: rgba(#FFF, .65);
|
||||
|
|
|
|||
|
|
@ -255,6 +255,9 @@
|
|||
{% block main-edit %}
|
||||
<section class="main group hidden" id="main-edit"></section>
|
||||
{% endblock %}
|
||||
<div class="get-support">
|
||||
<a class="btn btn-info" href="/pro/">Get support »</a>
|
||||
</div>
|
||||
{% block keyboard-shortcuts %}
|
||||
<div class="modal hide" id="keyboard-shortcuts">
|
||||
<div class="modal-header">
|
||||
|
|
@ -414,43 +417,43 @@
|
|||
{% include 'snipts/snipt-edit-js-template.html' %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% if request.user.is_authenticated %}
|
||||
{% if request.user.is_authenticated and request.user.is_pro %}
|
||||
{% if not debug %}
|
||||
{% block intercom %}
|
||||
<script id="IntercomSettingsScriptTag">
|
||||
var intercomSettings = {
|
||||
app_id: 'sajf131y',
|
||||
user_id: {{ request.user.id }},
|
||||
user_hash: '{{ request.user.id|intercom_sha_256 }}',
|
||||
email: '{{ request.user.email }}',
|
||||
created_at: {{ request.user.date_joined|date:"U" }},
|
||||
custom_data: {
|
||||
'snipts count': {% snipts_count_for_user %},
|
||||
'profile link': 'https://snipt.net/{{ request.user.username }}/',
|
||||
'is pro': window.user_is_pro,
|
||||
'blog domain': '{{ request.user.profile.blog_domain }}'
|
||||
},
|
||||
widget: {
|
||||
activator: '#IntercomDefaultWidget'
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
(function() {
|
||||
function async_load() {
|
||||
var s = document.createElement('script');
|
||||
s.type = 'text/javascript'; s.async = true;
|
||||
s.src = 'https://static.intercomcdn.com/intercom.v1.js';
|
||||
var x = document.getElementsByTagName('script')[0];
|
||||
x.parentNode.insertBefore(s, x);
|
||||
}
|
||||
if (window.attachEvent) {
|
||||
window.attachEvent('onload', async_load);
|
||||
} else {
|
||||
window.addEventListener('load', async_load, false);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<script id="IntercomSettingsScriptTag">
|
||||
var intercomSettings = {
|
||||
app_id: 'sajf131y',
|
||||
user_id: {{ request.user.id }},
|
||||
user_hash: '{{ request.user.id|intercom_sha_256 }}',
|
||||
email: '{{ request.user.email }}',
|
||||
created_at: {{ request.user.date_joined|date:"U" }},
|
||||
custom_data: {
|
||||
'snipts count': {% snipts_count_for_user %},
|
||||
'profile link': 'https://snipt.net/{{ request.user.username }}/',
|
||||
'is pro': window.user_is_pro,
|
||||
'blog domain': '{{ request.user.profile.blog_domain }}'
|
||||
},
|
||||
widget: {
|
||||
activator: '#IntercomDefaultWidget'
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
(function() {
|
||||
function async_load() {
|
||||
var s = document.createElement('script');
|
||||
s.type = 'text/javascript'; s.async = true;
|
||||
s.src = 'https://static.intercomcdn.com/intercom.v1.js';
|
||||
var x = document.getElementsByTagName('script')[0];
|
||||
x.parentNode.insertBefore(s, x);
|
||||
}
|
||||
if (window.attachEvent) {
|
||||
window.attachEvent('onload', async_load);
|
||||
} else {
|
||||
window.addEventListener('load', async_load, false);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -5,105 +5,105 @@
|
|||
{% block body-class %}{{ block.super }} static pro pro-signup{% endblock %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% block js %}
|
||||
{{ block.super }}
|
||||
{% if debug %}
|
||||
Stripe.setPublishableKey('pk_test_cgknmaWRMQeJt2adEdvH3T9l');
|
||||
{% else %}
|
||||
Stripe.setPublishableKey('pk_live_gUO2nCl7dhx6j0posz6gnbhA');
|
||||
{% endif %}
|
||||
{{ block.super }}
|
||||
{% if debug %}
|
||||
Stripe.setPublishableKey('pk_test_cgknmaWRMQeJt2adEdvH3T9l');
|
||||
{% else %}
|
||||
Stripe.setPublishableKey('pk_live_gUO2nCl7dhx6j0posz6gnbhA');
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block breadcrumb %}
|
||||
<li><a href="/pro/">Snipt Pro</a></li>
|
||||
<li><span class="prompt">/</span> <a href="/pro/signup/">Sign up</a></li>
|
||||
<li><a href="/pro/">Snipt Pro</a></li>
|
||||
<li><span class="prompt">/</span> <a href="/pro/signup/">Sign up</a></li>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="pro-hero">
|
||||
snip<span>t</span> <span class="pro">Pro</span>
|
||||
</div>
|
||||
{% if request.GET.declined %}
|
||||
<div class="alert alert-error" style="margin: 30px;">
|
||||
<strong>Your card was declined.</strong> You have not been charged. Please try again.
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="static-box">
|
||||
<form class="form-horizontal" id="pro-signup" method="post" action="/pro/signup/complete/">
|
||||
<fieldset>
|
||||
<div class="payment-loading"><span>Please wait…</span></div>
|
||||
<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="control-group">
|
||||
<label class="control-label" for="name">Name on card:</label>
|
||||
<div class="controls">
|
||||
<input type="text" class="input-xlarge" id="name" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="number">Card number:</label>
|
||||
<div class="controls cards">
|
||||
<input type="text" class="input-xlarge" id="number" />
|
||||
<img src="/static/img/card-visa.png" alt="Visa" />
|
||||
<img src="/static/img/card-mastercard.png" alt="MasterCard" />
|
||||
<img src="/static/img/card-discover.png" alt="Discover" />
|
||||
<img src="/static/img/card-american-express.png" alt="American Express" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="exp-month">Expiration date:</label>
|
||||
<div class="controls">
|
||||
<select id="exp-month" class="span2 exp-month">
|
||||
<option value="">----</option>
|
||||
<option value="01">01 - January</option>
|
||||
<option value="02">02 - February</option>
|
||||
<option value="03">03 - March</option>
|
||||
<option value="04">04 - April</option>
|
||||
<option value="05">05 - May</option>
|
||||
<option value="06">06 - June</option>
|
||||
<option value="07">07 - July</option>
|
||||
<option value="08">08 - August</option>
|
||||
<option value="09">09 - September</option>
|
||||
<option value="10">10 - October</option>
|
||||
<option value="11">11 - November</option>
|
||||
<option value="12">12 - December</option>
|
||||
</select>
|
||||
<select id="exp-year" class="span1">
|
||||
<option value="">----</option>
|
||||
<option value="2012">2012</option>
|
||||
<option value="2013">2013</option>
|
||||
<option value="2014">2014</option>
|
||||
<option value="2015">2015</option>
|
||||
<option value="2016">2016</option>
|
||||
<option value="2017">2017</option>
|
||||
<option value="2018">2018</option>
|
||||
<option value="2019">2019</option>
|
||||
<option value="2020">2020</option>
|
||||
<option value="2021">2021</option>
|
||||
<option value="2022">2022</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="cvc">Security code (CVC):</label>
|
||||
<div class="controls">
|
||||
<input type="text" class="input-min span1" id="cvc">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn btn-success">Sign up</button>
|
||||
<div class="security">
|
||||
<a href="https://stripe.com/help/security">Secure</a> by default. Every Snipt page is secure.
|
||||
</div>
|
||||
<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.
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="pro-hero">
|
||||
snip<span>t</span> <span class="pro">Pro</span>
|
||||
</div>
|
||||
{% if request.GET.declined %}
|
||||
<div class="alert alert-error" style="margin: 30px;">
|
||||
<strong>Your card was declined.</strong> You have not been charged. Please try again.
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="static-box">
|
||||
<form class="form-horizontal" id="pro-signup" method="post" action="/pro/signup/complete/">
|
||||
<fieldset>
|
||||
<div class="payment-loading"><span>Please wait…</span></div>
|
||||
<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="control-group">
|
||||
<label class="control-label" for="name">Name on card:</label>
|
||||
<div class="controls">
|
||||
<input type="text" class="input-xlarge" id="name" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="number">Card number:</label>
|
||||
<div class="controls cards">
|
||||
<input type="text" class="input-xlarge" id="number" />
|
||||
<img src="/static/img/card-visa.png" alt="Visa" />
|
||||
<img src="/static/img/card-mastercard.png" alt="MasterCard" />
|
||||
<img src="/static/img/card-discover.png" alt="Discover" />
|
||||
<img src="/static/img/card-american-express.png" alt="American Express" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="exp-month">Expiration date:</label>
|
||||
<div class="controls">
|
||||
<select id="exp-month" class="span2 exp-month">
|
||||
<option value="">----</option>
|
||||
<option value="01">01 - January</option>
|
||||
<option value="02">02 - February</option>
|
||||
<option value="03">03 - March</option>
|
||||
<option value="04">04 - April</option>
|
||||
<option value="05">05 - May</option>
|
||||
<option value="06">06 - June</option>
|
||||
<option value="07">07 - July</option>
|
||||
<option value="08">08 - August</option>
|
||||
<option value="09">09 - September</option>
|
||||
<option value="10">10 - October</option>
|
||||
<option value="11">11 - November</option>
|
||||
<option value="12">12 - December</option>
|
||||
</select>
|
||||
<select id="exp-year" class="span1">
|
||||
<option value="">----</option>
|
||||
<option value="2012">2012</option>
|
||||
<option value="2013">2013</option>
|
||||
<option value="2014">2014</option>
|
||||
<option value="2015">2015</option>
|
||||
<option value="2016">2016</option>
|
||||
<option value="2017">2017</option>
|
||||
<option value="2018">2018</option>
|
||||
<option value="2019">2019</option>
|
||||
<option value="2020">2020</option>
|
||||
<option value="2021">2021</option>
|
||||
<option value="2022">2022</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="cvc">Security code (CVC):</label>
|
||||
<div class="controls">
|
||||
<input type="text" class="input-min span1" id="cvc">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn btn-success">Sign up</button>
|
||||
<div class="security">
|
||||
<a href="https://stripe.com/help/security">Secure</a> by default. Every Snipt page is secure.
|
||||
</div>
|
||||
<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.
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -2,28 +2,24 @@
|
|||
|
||||
{% 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 %}
|
||||
<li><a href="/pro/">Snipt Pro</a></li>
|
||||
<li><a href="/pro/">Snipt Pro</a></li>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="pro-hero">
|
||||
snip<span>t</span> <span class="pro">Pro</span>
|
||||
</div>
|
||||
<div class="static-box">
|
||||
<h6>Going Pro gets you:</h6>
|
||||
<ul>
|
||||
<li>Custom domain for your <a href="/blogging/">Snipt blog</a>.</li>
|
||||
<li><span class="pro">Pro</span> badge throughout the site.</li>
|
||||
<li>No ads.</li>
|
||||
</ul>
|
||||
{% if request.user.profile.is_pro %}
|
||||
<h3>You're already a Pro.</h3>
|
||||
{% else %}
|
||||
<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>
|
||||
<div class="info">
|
||||
Subscribe for only <span>$5/month</span>.
|
||||
<p class="sub">
|
||||
We believe the best way to build a superior product is to charge for it.
|
||||
As a paid Snipt member, you'll have unrestricted access to the app, <a href="/api/">API</a>,
|
||||
instant chat support, and more.
|
||||
</p>
|
||||
{% if request.user.profile.is_pro %}
|
||||
<h3>You're already a Pro.</h3>
|
||||
{% else %}
|
||||
<h4><a href="/pro/signup/" class="btn btn-large btn-success">Subscribe</a></h4>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue