forked from GithubBackups/healthchecks
191 lines
8.4 KiB
HTML
191 lines
8.4 KiB
HTML
{% extends "base.html" %}
|
|
{% load staticfiles compress %}
|
|
|
|
{% block title %}Pricing - It's Free! - healthchecks.io{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- Plans -->
|
|
<section id="plans">
|
|
<div class="container">
|
|
{% if sub.is_active %}
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div id="subscription-status" class="jumbotron">
|
|
<p>
|
|
You are currently paying <strong>${{ sub.price }}/month</strong>.
|
|
Next billing date will be {{ sub.next_billing_date }}.</p>
|
|
<p>
|
|
Thank you for supporting healthchecks.io!
|
|
</p>
|
|
<a class="btn btn-default" href="#">Update Payment Method</a>
|
|
<form method="post" action="{% url 'hc-cancel-plan' %}">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn btn-default">
|
|
Cancel Subscription
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
<div class="row">
|
|
|
|
<!-- item -->
|
|
<div class="col-sm-4 text-center">
|
|
<div class="panel panel-success panel-pricing">
|
|
<div class="panel-heading">
|
|
<i class="glyphicon glyphicon-heart"></i>
|
|
<h3>Free Plan</h3>
|
|
</div>
|
|
<div class="panel-body text-center">
|
|
<p><strong>$0 / Month</strong></p>
|
|
</div>
|
|
<ul class="list-group text-center">
|
|
<li class="list-group-item"><i class="fa fa-check"></i> Personal or Commercial use</li>
|
|
<li class="list-group-item"><i class="fa fa-check"></i> Unlimited Checks</li>
|
|
<li class="list-group-item"><i class="fa fa-check"></i> Unlimited Alerts</li>
|
|
<li class="list-group-item"> </li>
|
|
</ul>
|
|
<div class="panel-footer">
|
|
{% if request.user.is_authenticated %}
|
|
{% if sub.subscription_id %}
|
|
<form method="post" action="{% url 'hc-cancel-plan' %}">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn btn-lg btn-default">
|
|
Switch To Free
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<a class="btn btn-lg btn-success disabled" href="#">Selected</a>
|
|
{% endif %}
|
|
{% else %}
|
|
<a class="btn btn-lg btn-success" href="{% url 'hc-login' %}">Get Started</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /item -->
|
|
|
|
<!-- item -->
|
|
<div class="col-sm-8 text-center">
|
|
<div class="panel panel-success panel-pricing">
|
|
<div class="panel-heading">
|
|
<div id="piggy">
|
|
<i class="glyphicon glyphicon-piggy-bank"></i>
|
|
</div>
|
|
<h3>Pay What You Want Plan</h3>
|
|
</div>
|
|
<div class="panel-body text-center">
|
|
<p>
|
|
<strong>
|
|
{% if sub.is_active %}
|
|
$<span id="pricing-value">{{ sub.price }}</span> / Month
|
|
{% else %}
|
|
$<span id="pricing-value">10</span> / Month
|
|
{% endif %}
|
|
</strong>
|
|
|
|
<span class="btn-group" role="group">
|
|
<button id="pay-minus" type="button" class="btn btn-default">
|
|
<i class="glyphicon glyphicon-chevron-down"></i>
|
|
</button>
|
|
<button id="pay-plus" type="button" class="btn btn-default">
|
|
<i class="glyphicon glyphicon-chevron-up"></i>
|
|
|
|
</button>
|
|
</span>
|
|
|
|
|
|
</p>
|
|
</div>
|
|
|
|
<ul class="list-group text-center">
|
|
<li class="list-group-item"><i class="fa fa-check"></i> Personal or Commercial use</li>
|
|
<li class="list-group-item"><i class="fa fa-check"></i> Unlimited Checks</li>
|
|
<li class="list-group-item"><i class="fa fa-check"></i> Unlimited Alerts</li>
|
|
<li class="list-group-item"><i class="fa fa-check"></i> Priority Support</li>
|
|
</ul>
|
|
<div class="panel-footer">
|
|
{% if request.user.is_authenticated %}
|
|
{% if sub.is_active %}
|
|
<button id="pww-selected-btn"
|
|
class="btn btn-lg btn-success disabled">Selected</button>
|
|
|
|
<form method="post" action="{% url 'hc-update-plan' %}">
|
|
{% csrf_token %}
|
|
<input class="selected-price" type="hidden" name="price" />
|
|
<button
|
|
id="pww-switch-btn"
|
|
type="submit"
|
|
class="btn btn-lg btn-default">
|
|
Switch To
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
{% if sub.payment_method_token %}
|
|
<form method="post" action="{% url 'hc-create-plan' %}">
|
|
{% csrf_token %}
|
|
<input class="selected-price" type="hidden" name="price" value="10" />
|
|
<button
|
|
type="submit"
|
|
class="btn btn-lg btn-default">
|
|
Select (direct)
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<button
|
|
id="pww-create-payment-method"
|
|
class="btn btn-lg btn-default">Select (form)</button>
|
|
{% endif %}
|
|
|
|
{% endif %}
|
|
{% else %}
|
|
<a class="btn btn-lg btn-primary" href="{% url 'hc-login' %}">Get Started</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /item -->
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
<!-- /Plans -->
|
|
|
|
<div id="payment-method-modal" class="modal" data-client-token="{{ client_token }}">
|
|
<div class="modal-dialog">
|
|
<form method="post" action="{% url 'hc-create-plan' %}">
|
|
{% csrf_token %}
|
|
<input class="selected-price" type="hidden" name="price" value="10" />
|
|
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">×</span></button>
|
|
<h4>Set Up Subscription</h4>
|
|
</div>
|
|
<div class="modal-body" id="payment-method-body">
|
|
<div id="payment-form"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Set Up Subscription</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
|
|
{% compress js %}
|
|
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
|
|
<script src="{% static 'js/bootstrap.min.js' %}"></script>
|
|
<script src="{% static 'js/pricing.js' %}"></script>
|
|
{% endcompress %}
|
|
{% endblock %}
|