From 7a207a8c49642afa80ded5e5dc68c28df8a26268 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C4=93teris=20Caune?= Date: Mon, 16 Nov 2015 23:16:38 +0200 Subject: [PATCH] Pricing table, WIP --- static/css/bootstrap.css | 184 +++++++++++++++++++++++++++++++- static/css/pricing.css | 94 +++++++++++++--- static/js/pricing.js | 32 ++++++ stuff/bootstrap/bootstrap.less | 2 +- templates/payments/pricing.html | 59 +++++++++- 5 files changed, 349 insertions(+), 22 deletions(-) create mode 100644 static/js/pricing.js diff --git a/static/css/bootstrap.css b/static/css/bootstrap.css index 668e7384..add848f8 100644 --- a/static/css/bootstrap.css +++ b/static/css/bootstrap.css @@ -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, diff --git a/static/css/pricing.css b/static/css/pricing.css index 6f126402..5bcd2eab 100644 --- a/static/css/pricing.css +++ b/static/css/pricing.css @@ -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; } diff --git a/static/js/pricing.js b/static/js/pricing.js new file mode 100644 index 00000000..22ceb3a1 --- /dev/null +++ b/static/js/pricing.js @@ -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(); + });; + + }); + + +}); \ No newline at end of file diff --git a/stuff/bootstrap/bootstrap.less b/stuff/bootstrap/bootstrap.less index a4333692..ac59f666 100755 --- a/stuff/bootstrap/bootstrap.less +++ b/stuff/bootstrap/bootstrap.less @@ -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"; diff --git a/templates/payments/pricing.html b/templates/payments/pricing.html index 852d3d4c..920f4917 100644 --- a/templates/payments/pricing.html +++ b/templates/payments/pricing.html @@ -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 @@
-
+
- +

Free Plan

@@ -24,9 +24,50 @@
  • Personal or Commercial use
  • Unlimited Checks
  • Unlimited Alerts
    • +
  •  
    • - Get Started + Get Started +
    +
    +
    + + + +
    +
    +
    +
    + +
    +

    Pay What You Want Plan

    +
    +
    +

    + €10 / Month + + + + + + + +

    +
    + +
      +
    • Personal or Commercial use
      • +
    • Unlimited Checks
      • +
    • Unlimited Alerts
      • +
    • Priority Support
      • +
    +
    + Get Started
    @@ -37,4 +78,12 @@ -{% endblock %} \ No newline at end of file +{% endblock %} + +{% block scripts %} +{% compress js %} + + + +{% endcompress %} +{% endblock %}