nielsperetzke
/
healthchecks
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 32 Wiki Activity
Browse Source

Pricing table, WIP

pull/14/head
Pēteris Caune 9 years ago
parent
7039188482
commit
7a207a8c49
5 changed files with 349 additions and 22 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +181
    -3
      static/css/bootstrap.css
  2. +81
    -13
      static/css/pricing.css
  3. +32
    -0
      static/js/pricing.js
  4. +1
    -1
      stuff/bootstrap/bootstrap.less
  5. +54
    -5
      templates/payments/pricing.html

+ 181
- 3
static/css/bootstrap.css View File

@ -3466,19 +3466,22 @@ fieldset[disabled] .btn-link:focus {
color: #777777;
text-decoration: none;
}
.btn-lg {
.btn-lg,
.btn-group-lg > .btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
.btn-sm {
.btn-sm,
.btn-group-sm > .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs {
.btn-xs,
.btn-group-xs > .btn {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
@ -3670,6 +3673,175 @@ tbody.collapse.in {
right: auto;
}
}
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
position: relative;
float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
z-index: 2;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: -1px;
}
.btn-toolbar {
margin-left: -5px;
}
.btn-toolbar .btn,
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
margin-left: 5px;
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
.btn-group > .btn:first-child {
margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
}
.btn-group.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-group.open .dropdown-toggle.btn-link {
-webkit-box-shadow: none;
box-shadow: none;
}
.btn .caret {
margin-left: 0;
}
.btn-lg .caret {
border-width: 5px 5px 0;
border-bottom-width: 0;
}
.dropup .btn-lg .caret {
border-width: 0 5px 5px;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
border-bottom-left-radius: 4px;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
float: none;
display: table-cell;
width: 1%;
}
.btn-group-justified > .btn-group .btn {
width: 100%;
}
.btn-group-justified > .btn-group .dropdown-menu {
left: auto;
}
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
.input-group {
position: relative;
display: table;
@ -5743,6 +5915,10 @@ button.close {
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
@ -5764,6 +5940,8 @@ button.close {
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,


+ 81
- 13
static/css/pricing.css View File

@ -1,11 +1,3 @@
.panel-pricing {
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-webkit-transition: all .3s ease;
}
.panel-pricing:hover {
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
}
.panel-pricing .panel-heading {
padding: 20px 10px;
}
@ -26,9 +18,85 @@
border-top-left-radius: 0px;
}
.panel-pricing .panel-body {
background-color: #f0f0f0;
font-size: 40px;
color: #777777;
padding: 20px;
margin: 0px;
font-size: 40px;
color: #777777;
padding: 20px;
margin: 0px;
background-color: #f0f0f0;
}
.panel-slider {
padding: 20px 20px 40px 20px;
height: 78px;
background-color: #f0f0f0;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%, 20% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
}
@keyframes tadaIn {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%, 20% {
-webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.tadaIn {
-webkit-animation-name: tadaIn;
animation-name: tadaIn;
}

+ 32
- 0
static/js/pricing.js View File

@ -0,0 +1,32 @@
$(function () {
var prices = [2, 5, 10, 15, 20, 25, 50, 75, 100, 125, 150, 175, 200];
var priceIdx = 2;
$("#pay-plus").click(function() {
if (priceIdx >= 12)
return;
priceIdx += 1;
$("#pricing-value").text(prices[priceIdx]);
$("#piggy").removeClass().addClass("tada animated").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});;
});
$("#pay-minus").click(function() {
if (priceIdx <= 0)
return;
priceIdx -= 1;
$("#pricing-value").text(prices[priceIdx]);
$("#piggy").removeClass().addClass("tadaIn animated").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});;
});
});

+ 1
- 1
stuff/bootstrap/bootstrap.less View File

@ -25,7 +25,7 @@
// Components
@import "component-animations.less";
@import "dropdowns.less";
// @import "button-groups.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";


+ 54
- 5
templates/payments/pricing.html View File

@ -1,5 +1,5 @@
{% extends "base.html" %}
{% load staticfiles %}
{% load staticfiles compress %}
{% block title %}Pricing - It's Free! - healthchecks.io{% endblock %}
@ -11,10 +11,10 @@
<div class="row">
<!-- item -->
<div class="col-md-4 text-center col-md-offset-4">
<div class="col-md-4 text-center">
<div class="panel panel-success panel-pricing">
<div class="panel-heading">
<i class="glyphicon glyphicon-heart-empty"></i>
<i class="glyphicon glyphicon-heart"></i>
<h3>Free Plan</h3>
</div>
<div class="panel-body text-center">
@ -24,9 +24,50 @@
<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">&nbsp;</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-success" href="{% url 'hc-login' %}">Get Started</a>
<a class="btn btn-lg btn-success" href="{% url 'hc-login' %}">Get Started</a>
</div>
</div>
</div>
<!-- /item -->
<!-- item -->
<div class="col-md-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>€<span id="pricing-value">10</span> / Month</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">
<a class="btn btn-lg btn-primary" href="{% url 'hc-login' %}">Get Started</a>
</div>
</div>
</div>
@ -37,4 +78,12 @@
</section>
<!-- /Plans -->
{% endblock %}
{% endblock %}
{% block scripts %}
{% 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 %}

Write Preview
Loading…
Cancel
Save