jsbin/views/upgrade.html
Remy Sharp 72653332f5 Simplify the new upgrade page
This way we're able to put the features and the upgrade process together, but benefit from all the error handling that's already in the login & reg pages without a complete rewrite.

This is not proposed as the final solution, but a mid-way point to allow us to test.
2014-08-13 17:41:44 +01:00

106 lines
3.9 KiB
HTML

<link rel="stylesheet" href="{{static}}/css/login.css{{cacheBust}}">
<link rel="stylesheet" type="text/css" href="{{static}}/css/upgrade.css{{cacheBust}}"/>
<div class="upgrade-wrapper">
<div class="upgrade-form-wrapper form-container">
<h1>Pro Upgrade</h1>
<form action="/upgrade" method="post" id="payment-form">
{{#unless user}}
<div class="upgrade-details">
<h3>1. Sign in</h3>
<div class="upgrade-signin-wrapper">
<a class="btn-github" href="{{root}}/auth/github">
<img src="{{static}}/images/github-32.png">
Login or Register via GitHub
</a>
<span class="login-group">
or
<a class="btn-login" href="{{root}}/login" id="btn-login">sign in with your email address</a>
</span>
</div>
<div class="form-container login" id="form-login">
<div class="tabs">
<a class="tab register" href="{{root}}/register">
<span>New to JS Bin</span>
Register
</a>
<a class="tab login" href="#">
<span>Existing users</span>
Login
</a>
</div>
<fieldset class="upgrade-fieldset register" disabled="disabled">
{{> register}}
<input type="hidden" value="1" name="register">
</fieldset>
<fieldset class="upgrade-fieldset login">
{{> login}}
<input type="hidden" value="1" name="login">
</fieldset>
<div class="upgrade-next">
<input type="button" value="next" class="upgrade-details-button upgrade-details-next">
</div>
<div class="upgrade-center">
<span class="login-group">
or
<a class="btn-login" href="{{root}}/auth/github">sign in via GitHub</a>
</span>
</div>
</div>
</div>
{{/unless}}
{{#if user}}
<input type="hidden" value="1" name="logged">
{{/if}}
<div class="upgrade-details">
{{#unless user}}<h3>2. Payment</h3>{{/unless}}
<div class="upgrade-payment-wrapper">
{{> payment}}
</div>
</div>
</form>
</div>
<div class="upgrade-feature-wrapper">
<h1>Features</h1>
{{> features}}
</div>
<div class="upgrade-info-wrapper">
<h2>Your Pro accounts keep JS Bin 100% free for education</h2>
<p>Aside from the features listed above, your pro account will help keep JS Bin 100% free for educational uses (schools, universities and community training). Those good people can get free training accounts so they can continue to help young students and new-comers with JS Bin in their tool belt.</p>
<p>Education is dear to our hearts, and pro accounts allows us to keep developing JS Bin with features we want to see land, and to help fix issues that cause problems for the general users and those students stuck working with limited access to technology (like the version of JS Bin that works without a web connection and entirely from a usb stick with zero install).</p>
<p><a href="http://github.com/jsbin/jsbin/issues/new" class="issue">Problem? Feedback? Let us know!</a></p>
</div>
</div>
<!-- <h2> Supporters </h2>
<div class="backers">
{{#each backersList}}
<a href="{{url}}">
<img class="backer-img" src="{{image}}"/>
</a>
{{/each}}
</div>
-->
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
// This identifies your website in the createToken call below
Stripe.setPublishableKey('{{stripe.key}}');
// ...
</script>
<script src="{{static}}/js/vendor/polyfills.js{{cacheBust}}"></script>
<script src="{{static}}/js/vendor/jquery-1.11.0.min.js"></script>
<script src="{{static}}/js/vendor/jquery.payment.js{{cacheBust}}"></script>
<script src="{{static}}/js/account/pay.js{{cacheBust}}"></script>