Work on for-teams and pro improvements.
Nick Sergeant
parent
b9d45d906c
commit
c4def5555f
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1989,9 +1989,9 @@ body.pro {
|
|||
div.payment-loading {
|
||||
background: rgba(#F2F2F2, .6);
|
||||
display: none;
|
||||
height: 287px;
|
||||
height: 410px;
|
||||
position: absolute;
|
||||
top: 261px;
|
||||
top: 278px;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
|
|
@ -2006,6 +2006,10 @@ body.pro {
|
|||
width: 120px;
|
||||
@include border-radius;
|
||||
}
|
||||
&.-teams {
|
||||
height: 523px;
|
||||
top: 449px;
|
||||
}
|
||||
}
|
||||
div.stripe {
|
||||
color: #C2C2C2;
|
||||
|
|
@ -2030,6 +2034,19 @@ body.pro {
|
|||
}
|
||||
}
|
||||
}
|
||||
div.login-first {
|
||||
background: #FFF;
|
||||
border: 3px solid #3299B7;
|
||||
color: #666;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin: 0 auto 10px auto;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
@include border-radius;
|
||||
}
|
||||
}
|
||||
body.search {
|
||||
div.empty-snipts {
|
||||
|
|
|
|||
|
|
@ -98,7 +98,6 @@
|
|||
var $form = $('form#pro-signup');
|
||||
var $submit = $('button[type="submit"]', $form);
|
||||
|
||||
var $name = $('input#name');
|
||||
var $cardNumber = $('input#number');
|
||||
var $expMonth = $('select#exp-month');
|
||||
var $expYear = $('select#exp-year');
|
||||
|
|
@ -137,7 +136,6 @@
|
|||
$('.payment-loading').show();
|
||||
|
||||
Stripe.createToken({
|
||||
name: $name.val(),
|
||||
number: $cardNumber.val(),
|
||||
cvc: $cvc.val(),
|
||||
exp_month: $expMonth.val(),
|
||||
|
|
|
|||
|
|
@ -40,102 +40,111 @@
|
|||
<li>Plans from $49/month, all with a 7-day free trial.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="name">Team username:</label>
|
||||
<div class="controls">
|
||||
<input maxlength="30" required type="text" class="input-xlarge" name="name" id="name" />
|
||||
<p class="sub" style="margin-top: 3px; color: #999999;">
|
||||
Maximum of 30 characters.
|
||||
</p>
|
||||
{% if not request.user.is_authenticated %}
|
||||
<div class="login-first">
|
||||
<span>
|
||||
To create a team, <a href="/signup/?next=/for-teams/">sign up</a> or <a href="/login/?next=/for-teams/">log in</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="name">Team email:</label>
|
||||
<div class="controls">
|
||||
<input required type="text" class="input-xlarge" name="email" id="email" />
|
||||
<p class="sub" style="margin-top: 3px; color: #999999;">
|
||||
For billing and your team's Gravatar. Will remain private.
|
||||
</p>
|
||||
{% else %}
|
||||
<div class="payment-loading -teams"><span>Please wait…</span></div>
|
||||
<div class="payment-errors alert alert-error"></div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="team-name">Team name:</label>
|
||||
<div class="controls">
|
||||
<input maxlength="30" required type="text" class="input-xlarge" name="team-name" id="team-name" />
|
||||
<p class="sub" style="margin-top: 3px; color: #999999;">
|
||||
Maximum of 30 characters.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="name">Payment plan:</label>
|
||||
<div class="controls">
|
||||
<select name="plan" type="text" class="input-xlarge" id="plan">
|
||||
<option value="snipt-teams-25-monthly">25 users - $49/month</option>
|
||||
<option value="snipt-teams-25-yearly">25 users - $588/year</option>
|
||||
<option value="snipt-teams-100-monthly">100 users - $149/month</option>
|
||||
<option value="snipt-teams-100-yearly">100 users - $1,788/year</option>
|
||||
<option value="snipt-teams-250-monthly">250 users - $299/month</option>
|
||||
<option value="snipt-teams-250-yearly">250 users - $3,588/year</option>
|
||||
<option value="snipt-teams-unlimited-monthly">Unlimited users - $499/month</option>
|
||||
<option value="snipt-teams-unlimited-yearly">Unlimited users - $5,988/year</option>
|
||||
</select>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="email">Team email:</label>
|
||||
<div class="controls">
|
||||
<input required type="text" class="input-xlarge" name="email" id="email" />
|
||||
<p class="sub" style="margin-top: 3px; color: #999999;">
|
||||
For billing and your team's Gravatar. Will remain private.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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 class="control-group">
|
||||
<label class="control-label" for="plan">Payment plan:</label>
|
||||
<div class="controls">
|
||||
<select name="plan" type="text" class="input-xlarge" id="plan">
|
||||
<option value="snipt-teams-25-monthly">25 users - $49/month</option>
|
||||
<option value="snipt-teams-25-yearly">25 users - $588/year</option>
|
||||
<option value="snipt-teams-100-monthly">100 users - $149/month</option>
|
||||
<option value="snipt-teams-100-yearly">100 users - $1,788/year</option>
|
||||
<option value="snipt-teams-250-monthly">250 users - $299/month</option>
|
||||
<option value="snipt-teams-250-yearly">250 users - $3,588/year</option>
|
||||
<option value="snipt-teams-unlimited-monthly">Unlimited users - $499/month</option>
|
||||
<option value="snipt-teams-unlimited-yearly">Unlimited users - $5,988/year</option>
|
||||
</select>
|
||||
</div>
|
||||
</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_URL }}img/card-visa.png" alt="Visa" />
|
||||
<img src="{{ STATIC_URL }}img/card-mastercard.png" alt="MasterCard" />
|
||||
<img src="{{ STATIC_URL }}img/card-discover.png" alt="Discover" />
|
||||
<img src="{{ STATIC_URL }}img/card-american-express.png" alt="American Express" />
|
||||
<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_URL }}img/card-visa.png" alt="Visa" />
|
||||
<img src="{{ STATIC_URL }}img/card-mastercard.png" alt="MasterCard" />
|
||||
<img src="{{ STATIC_URL }}img/card-discover.png" alt="Discover" />
|
||||
<img src="{{ STATIC_URL }}img/card-american-express.png" alt="American Express" />
|
||||
</div>
|
||||
</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="span2">
|
||||
<option value="">----</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>
|
||||
<option value="2022">2023</option>
|
||||
<option value="2022">2024</option>
|
||||
</select>
|
||||
<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="span2">
|
||||
<option value="">----</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>
|
||||
<option value="2023">2023</option>
|
||||
<option value="2024">2024</option>
|
||||
<option value="2025">2025</option>
|
||||
</select>
|
||||
</div>
|
||||
</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 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>
|
||||
<div class="control-group">
|
||||
<div class="form-actions">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn btn-success">Start free trial and create team »</button>
|
||||
<button type="submit" class="btn btn-success">Create team »</button>
|
||||
<div class="security">
|
||||
<a href="https://stripe.com/help/security">Secure</a> by default. Every Snipt page is secure.
|
||||
</div>
|
||||
<div class="stripe" style="margin-left: 125px;">
|
||||
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>
|
||||
{% endif %}
|
||||
</fieldset>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
{% block analytics %}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ def for_teams_complete(request):
|
|||
error_message or
|
||||
'Your card was declined.')
|
||||
|
||||
team = Team(name=request.POST['name'],
|
||||
team = Team(name=request.POST['team-name'],
|
||||
email=request.POST['email'],
|
||||
owner=request.user)
|
||||
team.stripe_id = customer.id
|
||||
|
|
|
|||
|
|
@ -106,25 +106,31 @@
|
|||
</li>
|
||||
{% block add-snipt %}{% endblock %}
|
||||
{% endif %}
|
||||
<li class="teams-nav">
|
||||
<a href="#" class="teams-nav {% if '/for-teams/' in request.path %}active{% endif %}">Teams</a>
|
||||
<ul>
|
||||
{% for team in request.user.profile.teams %}
|
||||
<li>
|
||||
<a href="/{{ team.user.username }}/">
|
||||
<i class="icon-user icon-white"></i>
|
||||
{{ team.user.username }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li>
|
||||
<a href="/for-teams/">
|
||||
<i class="icon-plus icon-white"></i>
|
||||
Create new team
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{% if not request.user.is_authenticated %}
|
||||
<li>
|
||||
<a href="/for-teams/" class="{% if '/for-teams/' in request.path %}active{% endif %}">Teams</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="teams-nav">
|
||||
<a href="#" class="teams-nav {% if '/for-teams/' in request.path %}active{% endif %}">Teams</a>
|
||||
<ul>
|
||||
{% for team in request.user.profile.teams|dictsort:'name' %}
|
||||
<li>
|
||||
<a href="/{{ team.user.username }}/">
|
||||
<i class="icon-user icon-white"></i>
|
||||
{{ team.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li>
|
||||
<a href="/for-teams/">
|
||||
<i class="icon-plus icon-white"></i>
|
||||
Create new team
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% if request.user.is_authenticated %}
|
||||
|
|
|
|||
|
|
@ -40,86 +40,95 @@
|
|||
Group discounts available. Email <a href="mailto:support@snipt.net">support@snipt.net</a> for details.
|
||||
</p>
|
||||
</div>
|
||||
<div class="payment-loading"><span>Please wait…</span></div>
|
||||
<div class="payment-errors alert alert-error"></div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="name">Payment plan:</label>
|
||||
<div class="controls">
|
||||
<select name="plan" type="text" class="input-medium" id="plan">
|
||||
<option value="snipt-pro-monthly">$5/month</option>
|
||||
<option value="snipt-pro-yearly">$60/year</option>
|
||||
</select>
|
||||
{% if not request.user.is_authenticated %}
|
||||
<div class="login-first">
|
||||
<span>
|
||||
To go <span class="pro">Pro</span>, <a href="/signup/?next=/pro/">sign up</a> or <a href="/login/?next=/pro/">log in</a>.
|
||||
</span>
|
||||
</div>
|
||||
</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" />
|
||||
{% elif request.user.profile.is_pro %}
|
||||
<div class="login-first">
|
||||
<span>
|
||||
You're already a <span class="pro">Pro</span>.
|
||||
<a style="display: block; margin-top: 15px;" href="/account/billing/">View details »</a>
|
||||
</span>
|
||||
</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_URL }}img/card-visa.png" alt="Visa" />
|
||||
<img src="{{ STATIC_URL }}img/card-mastercard.png" alt="MasterCard" />
|
||||
<img src="{{ STATIC_URL }}img/card-discover.png" alt="Discover" />
|
||||
<img src="{{ STATIC_URL }}img/card-american-express.png" alt="American Express" />
|
||||
{% else %}
|
||||
<div class="payment-loading"><span>Please wait…</span></div>
|
||||
<div class="payment-errors alert alert-error"></div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="name">Payment plan:</label>
|
||||
<div class="controls">
|
||||
<select name="plan" type="text" class="input-medium" id="plan">
|
||||
<option value="snipt-pro-monthly">$5/month</option>
|
||||
<option value="snipt-pro-yearly">$60/year</option>
|
||||
</select>
|
||||
</div>
|
||||
</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="span2">
|
||||
<option value="">----</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>
|
||||
<option value="2022">2023</option>
|
||||
<option value="2022">2024</option>
|
||||
</select>
|
||||
<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_URL }}img/card-visa.png" alt="Visa" />
|
||||
<img src="{{ STATIC_URL }}img/card-mastercard.png" alt="MasterCard" />
|
||||
<img src="{{ STATIC_URL }}img/card-discover.png" alt="Discover" />
|
||||
<img src="{{ STATIC_URL }}img/card-american-express.png" alt="American Express" />
|
||||
</div>
|
||||
</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 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="span2">
|
||||
<option value="">----</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>
|
||||
<option value="2023">2023</option>
|
||||
<option value="2024">2024</option>
|
||||
<option value="2025">2025</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn btn-success">Subscribe »</button>
|
||||
<div class="security">
|
||||
<a href="https://stripe.com/help/security">Secure</a> by default. Every Snipt page is secure.
|
||||
<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="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 class="form-actions">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn btn-success">Subscribe »</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>
|
||||
</div>
|
||||
<div class="form-actions" style="color: #A2A2A2;">
|
||||
Prefer to pay with PayPal? Email <a href="mailto:support@snipt.net">support@snipt.net</a>.
|
||||
</div>
|
||||
<div class="form-actions" style="color: #A2A2A2;">
|
||||
Prefer to pay with PayPal? Email <a href="mailto:support@snipt.net">support@snipt.net</a>.
|
||||
</div>
|
||||
{% endif %}
|
||||
</fieldset>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue