Improvements to Pro/Teams signup forms.
parent
3266bfd3f6
commit
fc2b5c424d
File diff suppressed because one or more lines are too long
|
@ -3123,3 +3123,8 @@ div.team-controller {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div.payment-form {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 86%;
|
||||||
|
}
|
||||||
|
|
|
@ -41,111 +41,113 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
{% if not request.user.is_authenticated %}
|
{% if not request.user.is_authenticated %}
|
||||||
<div class="login-first">
|
<div class="login-first">
|
||||||
<span>
|
<span>
|
||||||
To create a team, <a href="/signup/?next=/for-teams/">sign up</a> or <a href="/login/?next=/for-teams/">log in</a>.
|
To create a team, <a href="/signup/?next=/for-teams/">sign up</a> or <a href="/login/?next=/for-teams/">log in</a>.
|
||||||
</span>
|
</span>
|
||||||
</div>
|
|
||||||
{% 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>
|
{% else %}
|
||||||
<div class="control-group">
|
<div class="payment-form">
|
||||||
<label class="control-label" for="email">Team email:</label>
|
<div class="payment-loading -teams"><span>Please wait…</span></div>
|
||||||
<div class="controls">
|
<div class="payment-errors alert alert-error"></div>
|
||||||
<input required type="email" class="input-xlarge" name="email" id="email" />
|
<div class="control-group">
|
||||||
<p class="sub" style="margin-top: 3px; color: #999999;">
|
<label class="control-label" for="team-name">Team name:</label>
|
||||||
For billing and your team's Gravatar. Will remain private.
|
<div class="controls">
|
||||||
</p>
|
<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 class="control-group">
|
||||||
|
<label class="control-label" for="email">Team email:</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input required type="email" 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 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-100-monthly">100 users - $149/month</option>
|
||||||
|
<option value="snipt-teams-250-monthly">250 users - $299/month</option>
|
||||||
|
<option value="snipt-teams-unlimited-monthly">Unlimited users - $499/month</option>
|
||||||
|
<option value="snipt-teams-25-yearly">25 users - $588/year</option>
|
||||||
|
<option value="snipt-teams-100-yearly">100 users - $1,788/year</option>
|
||||||
|
<option value="snipt-teams-250-yearly">250 users - $3,588/year</option>
|
||||||
|
<option value="snipt-teams-unlimited-yearly">Unlimited users - $5,988/year</option>
|
||||||
|
</select>
|
||||||
|
<p class="sub" style="margin-top: 3px; color: #999999;">
|
||||||
|
Free 14-day trial (your card won't be charged until then, and you can cancel at any time).
|
||||||
|
</p>
|
||||||
|
</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>
|
||||||
|
</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="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 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>
|
||||||
</div>
|
<div class="form-actions">
|
||||||
<div class="control-group">
|
{% csrf_token %}
|
||||||
<label class="control-label" for="plan">Payment plan:</label>
|
<button type="submit" class="btn btn-success">Create team »</button>
|
||||||
<div class="controls">
|
<div class="security">
|
||||||
<select name="plan" type="text" class="input-xlarge" id="plan">
|
<a href="https://stripe.com/help/security">Secure</a> by default. Every Snipt page is secure.
|
||||||
<option value="snipt-teams-25-monthly">25 users - $49/month</option>
|
</div>
|
||||||
<option value="snipt-teams-100-monthly">100 users - $149/month</option>
|
<div class="stripe" style="margin-left: 125px;">
|
||||||
<option value="snipt-teams-250-monthly">250 users - $299/month</option>
|
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.
|
||||||
<option value="snipt-teams-unlimited-monthly">Unlimited users - $499/month</option>
|
</div>
|
||||||
<option value="snipt-teams-25-yearly">25 users - $588/year</option>
|
|
||||||
<option value="snipt-teams-100-yearly">100 users - $1,788/year</option>
|
|
||||||
<option value="snipt-teams-250-yearly">250 users - $3,588/year</option>
|
|
||||||
<option value="snipt-teams-unlimited-yearly">Unlimited users - $5,988/year</option>
|
|
||||||
</select>
|
|
||||||
<p class="sub" style="margin-top: 3px; color: #999999;">
|
|
||||||
Free 14-day trial (your card won't be charged until then, and you can cancel at any time).
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{% endif %}
|
||||||
<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 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 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">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>
|
|
||||||
{% endif %}
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -49,70 +49,76 @@
|
||||||
{% elif request.user.profile.has_pro %}
|
{% elif request.user.profile.has_pro %}
|
||||||
<div class="login-first">
|
<div class="login-first">
|
||||||
<span>
|
<span>
|
||||||
You're already a <span class="pro">Pro</span>.
|
{% if request.user.profile.is_pro %}
|
||||||
<a style="display: block; margin-top: 15px;" href="/account/billing/">View details »</a>
|
You're already a <span class="pro">Pro</span>.
|
||||||
|
<a style="display: block; margin-top: 15px;" href="/account/billing/">View details »</a>
|
||||||
|
{% else %}
|
||||||
|
<p style="line-height: 26px;">You're a member of a team, and all team members automatically have <span class="pro">Pro</span> access.</p>
|
||||||
|
{% endif %}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="payment-loading"><span>Please wait…</span></div>
|
<div class="payment-form">
|
||||||
<div class="payment-errors alert alert-error"></div>
|
<div class="payment-loading"><span>Please wait…</span></div>
|
||||||
<div class="control-group">
|
<div class="payment-errors alert alert-error"></div>
|
||||||
<label class="control-label" for="name">Payment plan:</label>
|
<div class="control-group">
|
||||||
<div class="controls">
|
<label class="control-label" for="name">Payment plan:</label>
|
||||||
<select name="plan" type="text" class="input-medium" id="plan">
|
<div class="controls">
|
||||||
<option value="snipt-pro-monthly">$5/month</option>
|
<select name="plan" type="text" class="input-medium" id="plan">
|
||||||
<option value="snipt-pro-yearly">$60/year</option>
|
<option value="snipt-pro-monthly">$5/month</option>
|
||||||
</select>
|
<option value="snipt-pro-yearly">$60/year</option>
|
||||||
|
</select>
|
||||||
|
</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_URL }}img/card-visa.png" alt="Visa" />
|
||||||
<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-mastercard.png" alt="MasterCard" />
|
<img src="{{ STATIC_URL }}img/card-discover.png" alt="Discover" />
|
||||||
<img src="{{ STATIC_URL }}img/card-discover.png" alt="Discover" />
|
<img src="{{ STATIC_URL }}img/card-american-express.png" alt="American Express" />
|
||||||
<img src="{{ STATIC_URL }}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="span2">
|
||||||
<select id="exp-year" class="span2">
|
<option value="">----</option>
|
||||||
<option value="">----</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>
|
<option value="2023">2023</option>
|
||||||
<option value="2023">2023</option>
|
<option value="2024">2024</option>
|
||||||
<option value="2024">2024</option>
|
<option value="2025">2025</option>
|
||||||
<option value="2025">2025</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>
|
||||||
<div class="form-actions">
|
<div class="form-actions">
|
||||||
|
|
Loading…
Reference in New Issue