Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
body {
background-color: #eeeeee;
width: 80%;
max-width: 1080px;
margin: auto;
}
#pricing-container .price-card--cta--button {
margin: 0 16px;
display: block;
padding: 11px 23px;
letter-spacing: 1px;
font-family: Raleway, Open Sans;
font-size: 12.5px;
font-weight: 700;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
touch-action: manipulation;
user-select: none;
background: #71b38b;
color: #fff;
text-transform: uppercase;
transition: all 0.4s ease-in-out;
text-decoration: none;
}
#pricing-container .price-card--cta--button:hover {
background: #3f9b63;
border-color: #3f9b63;
}
#elite-pricing-container{
margin-top:50px;
position:relative;
display: flex;
align-items:flex-start;
justify-content: center;
flex-wrap:wrap;
box-sizing:border-box;
}
#elite-pricing-sales-text{
padding-right:80px;
text-align:right;
font-size:24px;
font-family: 'Raleway',Helvetica,Arial,Lucida,sans-serif;
color: #555555;
line-height: 1.5;
font-weight: 700;
max-width:450px;
padding-top:90px;
}
#elite-pricing-card.price-card {
max-width: 330px;
color: white;
position: relative;
margin: 0 6px;
padding: 30px 40px 10px 40px;
background: url('http://www.devanswer.com/img/img.jpg') left top no-repeat black;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
#elite-pricing-card.price-card .price-card--header{
padding:0;
background-color:transparent;
}
#elite-pricing-card.price-card .price-card--header h4{
font-size: 36px;
font-weight: 600;
padding-bottom:16px;
margin-bottom:16px;
border-bottom: 1px solid #f0c328;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(top left, #efd100 0, #e2a233 38%, #f0c328 60%, #fff1a3 86%, #ffe13e 100%);
background-size: 1em 1em;
color: #fff1a3;
}
#elite-pricing-card.price-card #elite-pricing-card--desc{
padding-bottom:25px;
}
#elite-pricing-card.price-card .price-card--features{
border-top: 1px solid #f0c328;
}
#elite-pricing-card.price-card ul.price-card--features--list{
padding:0 11px;
}
#elite-pricing-card.price-card .price-card--features--item{
padding-bottom:16px;
}
#elite-pricing-card.price-card .price-card--features--item:before{
color:#f0c328 !important;
left:-12px !important;
}
#elite-pricing-card.price-card .price-card--cta--button.btn{
background-color: #f0c328;
color:black;
margin:0 auto;
}
#elite-pricing-card.price-card .price-card--cta--button.btn:hover{
background-color:white;
}
#elite-pricing-card--desc{
font-size:16px;
line-height:1.5;
max-width:400px;
}
/* - - - - - - - - - Tooltips - - - */
.has-tooltip:not(.tooltip-disabled) {
cursor: help;
position:relative;
}
.has-tooltip:not(.tooltip-disabled):hover
.tooltip-container {
display: block;
}
.has-tooltip .tooltip-container {
display: none;
position: absolute;
background-color: white;
z-index: 20;
bottom: calc(100% + 13px);
left: -10px;
right: -10px;
padding: 16px 20px;
border-radius: 8px;
box-shadow: 0 6px 55px -10px #777;
}
.has-tooltip .tooltip-container:after {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;
font-size: 0;
line-height: 0;
content: "";
position: absolute;
bottom: -10px;
}
.has-tooltip .tooltip-container h6 {
font-weight: 600;
font-size: 16px;
margin: 0px;
}
.has-tooltip .tooltip-container p {
color: #555;
margin-top:4px;
}
/* - - - - - - - End Tooltips - - - */
#pricing-container * {
box-sizing:border-box;
}
#pricing-container {
font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
-webkit-font-smoothing: antialiased;
max-width: 1080px;
margin: 0 auto 50px;
justify-content: center;
line-height: 1;
color: #000;
}
/* Cards */
#pricing-cards {
display: flex;
font-size: 14px;
}
#pricing-container .price-card {
background-color: white;
font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
display: block;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
transition: all 0.25s;
position: relative;
margin: 0 6px;
flex-grow: 1;
flex-shrink:1;
}
#pricing-container .price-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
/* - - - - - - - - - Header Section - - - */
#pricing-container .price-card--header {
background-color: #daf1df;
margin: 0;
padding: 20px 0;
text-align: center;
}
#pricing-container .price-card--header h4 {
margin: 0;
padding: 0;
font-size: 28px;
color: #1b5e20;
font-family: "Raleway", Helvetica, Arial, Lucida, sans-serif;
font-weight: 700;
}
/* - - - - - - - - - Price Section - - - */
#pricing-container .price-card--price {
text-align: center;
padding: 28px 0 6px 0;
}
#pricing-container .price-card--price-text {
font-size: 48px;
}
#pricing-container .price-card--price-number {
font-weight: 500;
opacity: 0.89;
}
.odometer div {
display: inline-block;
}
#pricing-container .price-card--price-number:before {
content: "$";
font-size: 24px;
top: -16px;
display: inline-block;
position: relative;
}
#pricing-container .price-card--price-number:after {
content: "/month";
font-size: 12px;
display: inline-block;
color: grey;
}
#pricing-container .price-card--price-conditions {
padding: 14px 0;
color: #888;
line-height: 1.5;
}
#pricing-container .price-card--onboarding-fee {
color: green;
}
#pricing-container .price-card--onboarding-fee.has-fee {
color: #888;
}
/* - - - - - - - - - CTA Button Section - - - */
#pricing-container .price-card--cta {
padding: 0 20px 24px;
text-align: center;
}
#pricing-container .price-card--cta--button.btn{
min-width:20px;
display:block;
max-width:183px;
margin:0 auto;
}
/* - - - - - - - - - Features Section - - - */
#pricing-container .price-card--features {
border-top: 1px solid #ddd;
padding: 16px 0 20px;
}
#pricing-container ul.price-card--features--list {
padding: 0 32px;
list-style: none;
margin: 0;
}
#pricing-container li.price-card--features--item {
margin: 8px 0;
padding-left: 8px;
line-height: 1.5;
position: relative;
}
#pricing-container
li.price-card--features--item:not(.features-disabled):before {
content: "✓";
color: green;
display: block;
position: absolute;
left: -8px;
}
#pricing-container li.price-card--features--item.features-highlight {
/* font-weight: 600; */
}
#pricing-container li.price-card--features--item.features-disabled {
opacity: 0.1;
/* text-decoration: line-through; */
}
/* - - - - - - - - - Mobile Features Toggle - - - */
#pricing-container .price-card--mobile-features-toggle {
text-align: center;
border-top: 1px solid #ddd;
margin: 24px 0 0;
padding: 16px 0;
cursor: pointer;
display: none;
color: green;
}
#pricing-container .price-card--mobile-features-toggle:after {
content: "Show All Features ▾";
}
#pricing-container .price-card--mobile-features-toggle.hideall:after {
content: "Hide Features ▴";
}
/* - - - - - - - - - Hero Card Styles - - - */
#pricing-container .price-card--hero {
margin: -38px 6px 0;
/* width:31%; */
z-index: 10;
}
#pricing-container .price-card--hero-text {
background-color: #3f9b63;
height: 38px;
color: white;
line-height: 38px;
text-align: center;
font-weight: 600;
}
/* - - - - - - - - - Only Yearly Basic Styles - - - */
#pricing-container .only-yearly {
position: relative;
}
#pricing-container .only-yearly .price-card--price-number {
transition: opacity 0.2s;
}
#pricing-container .only-yearly .only-yearly--text {
position: absolute;
top: -0.2em;
left: 0;
right: 0;
display: none;
}
#pricing-container .only-yearly .only-yearly--text span {
font-size: 14px;
}
#pricing-container .only-yearly.if-monthly .price-card--price-number {
opacity: 0;
}
#pricing-container .only-yearly.if-monthly .only-yearly--text {
display: block;
}
/* - - - - - - - - - Switch Section - - - */
#pricing-switch {
margin: 80px auto 100px;
text-align: center;
line-height: 1.4;
position: relative;
max-width: 1080px;
}
#pricing-switch .switch-label {
display: inline-block;
width: 200px;
text-align: center;
opacity: 0.4;
font-size: 16px;
cursor: pointer;
padding: 0 20px;
}
#pricing-switch .switch-label .save-money {
color: #4caf50;
font-style: italic;
padding-left: 8px;
}
#pricing-switch .save-money--mobile {
color: #4caf50;
font-style: italic;
padding-top: 22px;
display: none;
}
#pricing-switch .switch-label.active {
font-size: 18px;
opacity: 1;
}
#pricing-switch .switch-label-monthly {
text-align: right;
}
#pricing-switch .switch-label-yearly {
text-align: left;
}
#pricing-switch .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
vertical-align: -50%;
margin: 0;
}
#pricing-switch .switch input {
display: none;
}
#pricing-switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #3f9b63;
border-radius: 34px;
transition: 0.1s;
}
#pricing-switch .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
border-radius: 50%;
transition: 0.1s;
}
/* #pricing-switch input:checked + .slider {
background-color: green;
} */
#pricing-switch input:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}
#pricing-switch input:checked + .slider:before {
transform: translateX(26px);
}
@media (max-width: 1280px) {
#pricing-cards{
/*display:block !important; */
}
}
@media (max-width: 767px) {
}
/* - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - Media Queries - - - */
/* - - - - - - - - - - - - - - - - - - - */
@media (max-width: 980px) {
/* Tweak the card price font size */
#pricing-container .price-card--price-text {
font-size: 32px;
}
#pricing-container .price-card--price-number:before {
top: -10px;
font-size: 18px;
}
}
@media (min-width: 980px) {
/* always show features when not in mobile view */
#pricing-container .price-card--features {
display: block !important;
}
}
@media (max-width: 980px) {
#pricing-cards {
display: block;
padding: 0 24px;
}
#pricing-container .price-card {
max-width: 360px;
margin: 0 auto 48px;
}
#pricing-container .price-card:hover {
transform: none;
}
#pricing-container .price-card-full-width {
display: block;
}
#pricing-container .price-card-full-width .price-card--features--list {
-moz-columns: 1;
columns: 1;
}
#pricing-container .price-card--price {
padding: 28px 0 0;
}
#pricing-container .price-card--features {
display: none;
margin: 26px 0 0 0;
padding-bottom:0;
}
#pricing-container ul.price-card--features--list {
max-width: 250px;
margin: 0 auto;
}
#pricing-container li.price-card--features--item.features-disabled {
display: none;
}
#pricing-container .price-card--mobile-features-toggle {
display: block;
}
/* Pricing Switch */
#pricing-switch {
margin: 26px 0 52px;
}
#pricing-switch .switch-label {
display: inline-block;
width: auto;
font-size:15px;
}
#pricing-switch .switch-label.active{
font-size:16px;
}
#pricing-switch .switch-label .save-money {
display: none;
}
#pricing-switch .save-money--mobile {
display: block;
}
/* Elite Pricing */
#elite-pricing-container{
display:block;
padding: 0 24px
}
#elite-pricing-sales-text{
padding-right: 0;
padding-bottom: 32px;
padding-top:0;
width:auto;
max-width:360px;
margin: 0 auto;
text-align: left;
font-size:18px;
line-height:1.5;
}
#elite-pricing-card.price-card .price-card--mobile-features-toggle{
border-top:none;
color: #f0c328;
display:none;
}
#elite-pricing-card.price-card .price-card--features{
display:block;
}
}
@media (max-width: 480px) {
#pricing-container .price-card {
max-width: 360px;
margin: 0 auto 36px;
}
#pricing-switch {
margin: 26px 0 36px;
}
#elite-pricing-card.price-card{
padding: 30px 20px 10px 20px;
}
}
.odometer.odometer-auto-theme,
.odometer.odometer-theme-default {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit,
.odometer.odometer-theme-default .odometer-digit {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,
.odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,
.odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
text-align: left;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner,
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
display: block;
-webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value,
.odometer.odometer-theme-default .odometer-digit .odometer-value {
display: block;
-webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme
.odometer-digit
.odometer-value.odometer-last-value,
.odometer.odometer-theme-default
.odometer-digit
.odometer-value.odometer-last-value {
position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating
.odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-up.odometer-animating
.odometer-ribbon-inner {
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-down
.odometer-ribbon-inner {
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating
.odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-down.odometer-animating
.odometer-ribbon-inner {
transition: transform 2s;
transform: translateY(0);
}
.odometer.odometer-auto-theme,
.odometer.odometer-theme-default {
font-family: "Helvetica Neue", sans-serif;
line-height: 1.1em;
}
.odometer.odometer-auto-theme .odometer-value,
.odometer.odometer-theme-default .odometer-value {
text-align: center;
}
/* ************************** */
/* UPDATES TO CHANGE DURATION */
/* ************************** */
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating
.odometer-ribbon-inner,
.odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating
.odometer-ribbon-inner {
transition: transform 0.4s;
will-change: auto;
}
</style>
</head>
<body>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7COpen+Sans%3A300%2C300italic%2Cregular%2Citalic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic&ver=4.9.1#038;subset=latin,latin-ext,cyrillic,greek,vietnamese,greek-ext,cyrillic-ext' type='text/css' media='all' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/themes/odometer-theme-minimal.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<section id="pricing-container">
<div id="pricing-switch">
<span class="switch-label switch-label-monthly">Monthly</span>
<label class="switch" id="">
<input type="checkbox" checked="checked">
<span class="slider"></span>
</label>
<span class="switch-label switch-label-yearly active">Yearly <span class="save-money">Save 10%</span></span>
<div class="save-money--mobile">Save 10% on Yearly Plans</div>
</div>
<!-- end of pricing-switch -->
<div id="pricing-cards">
<!-- ============================= -->
<!-- = Premium Subscription Card = -->
<!-- ============================= -->
<div class="price-card">
<div class="price-card--header">
<h4>Premium</h4>
<!-- <p>for growing your business</p> -->
</div>
<div class="price-card--price">
<div class="price-card--price-text">
<div class="price-card--price-number toggle-price-content odometer" data-price-monthly="2,499" data-price-yearly="2,250">2,250</div>
</div>
<div class="price-card--price-conditions">
<div class="toggle-price-content" data-price-monthly="Billed Monthly" data-price-yearly="Billed Annually">Billed Annually</div>
<div class="price-card--onboarding-fee toggle-price-content" data-price-monthly="+ $7,500 Onboarding Fee" data-price-yearly="No Onboarding Fee">No Onboarding Fee</div>
</div>
</div>
<div class="price-card--cta">
<a class="price-card--cta--button btn" href="/get-started-today">Get Started</a>
</div>
<div class="price-card--features">
<ul class="price-card--features--list">
<li class="price-card--features--item has-tooltip">Sales & Marketing Platform
<div class="tooltip-container"><strong>Sales & Marketing Platform</strong>
<p>Vendasta's end-to-end sales solution for companies that serve local businesses, and want to grow digital revenue.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Snapshot & Campaigns
<div class="tooltip-container"><strong>Snapshot & Campaigns</strong>
<p>Access to award-winning automated needs-assessment and email marketing automation. Unlimited emails sent to unlimited accounts.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Marketplace
<div class="tooltip-container"><strong>Marketplace</strong>
<p>Access to world-class resellable products & services, aimed to fulfilling the digital marketing needs of your small & medium sized business clients.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Business Center & Store
<div class="tooltip-container"><strong>Business Center & Store</strong>
<p>Portal for your local business clients, featuring your agency’s branding. They can access the products purchased from your Marketplace.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Tech support
<div class="tooltip-container"><strong>Tech support</strong>
<p>Phone, Email and Web Chat support, <br/>9am-9pm EST Mon-Fri, <br/>2pm-7pm EST Sat-Sun</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Partner Success Manager
<div class="tooltip-container"><strong>Partner Success Manager</strong>
<p>One-on-one with a Vendasta Success Manager, who will provide sales training so you reach your goals quickly.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Custom domains
<div class="tooltip-container"><strong>Custom domains</strong>
<p>Fully white-label the platform on your agency's own domains.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Concierge
<div class="tooltip-container"><strong>Concierge</strong>
<p>Multi-client agency fulfillment & task management app for teams.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Brand Analytics
<div class="tooltip-container"><strong>Brand Analytics</strong>
<p>Access to multi-location brand management app.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Managed Digital Ads
<div class="tooltip-container"><strong>Managed Digital Ads</strong>
<p>Access to our managed advertising service. Drive store visits, calls, texts & form fills for your clients.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Access to in-market seminars
<div class="tooltip-container"><strong>Access to in-market seminars</strong>
<p>Face to face training from our experts to yours.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">APIs & SSO
<div class="tooltip-container"><strong>APIs & SSO</strong>
<p>APIs to use our products in your dashboards.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Digital Agency
<div class="tooltip-container"><strong>Digital Agency</strong>
<p>Outsource your work to our fulfillment team.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">100% white-label
<div class="tooltip-container"><strong>100% white-label</strong>
<p>Digital Agency Email and phone communication under your brand. Customized workflows and toll-free numbers.</p>
</div>
</li>
</ul>
</div>
<div class="price-card--mobile-features-toggle"></div>
</div>
<!-- End of Card -->
<!-- ================================ -->
<!-- = Enterprise Subscription Card = -->
<!-- ================================ -->
<div class="price-card price-card--hero">
<div class="price-card--header">
<h4>Enterprise</h4>
<!-- <p>for growing your business</p> -->
</div>
<div class="price-card--hero-text">
Most Popular Plan
</div>
<div class="price-card--price">
<div class="price-card--price-text">
<div class="price-card--price-number toggle-price-content odometer" data-price-monthly="999" data-price-yearly="900">900</div>
</div>
<div class="price-card--price-conditions">
<div class="toggle-price-content" data-price-monthly="Billed Monthly" data-price-yearly="Billed Annually">Billed Annually</div>
<div class="price-card--onboarding-fee toggle-price-content" data-price-monthly="+ $2,500 Onboarding Fee" data-price-yearly="No Onboarding Fee">No Onboarding Fee</div>
</div>
</div>
<div class="price-card--cta">
<a class="price-card--cta--button btn" href="/get-started-today">Get Started</a>
</div>
<div class="price-card--features">
<ul class="price-card--features--list">
<li class="price-card--features--item has-tooltip">Sales & Marketing Platform
<div class="tooltip-container"><strong>Sales & Marketing Platform</strong>
<p>Vendasta's end-to-end sales solution for companies that serve local businesses, and want to grow digital revenue.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Snapshot & Campaigns
<div class="tooltip-container"><strong>Snapshot & Campaigns</strong>
<p>Access to award-winning automated needs-assessment and email marketing automation. Unlimited emails sent to unlimited accounts.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Marketplace
<div class="tooltip-container"><strong>Marketplace</strong>
<p>Access to world-class resellable products & services, aimed to fulfilling the digital marketing needs of your small & medium sized business clients.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Business Center & Store
<div class="tooltip-container"><strong>Business Center & Store</strong>
<p>Portal for your local business clients, featuring your agency’s branding. They can access the products purchased from your Marketplace.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Tech support
<div class="tooltip-container"><strong>Tech support</strong>
<p>Phone, Email and Web Chat support, <br/>9am-9pm EST Mon-Fri, <br/>2pm-7pm EST Sat-Sun</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Partner Success Manager
<div class="tooltip-container"><strong>Partner Success Manager</strong>
<p>One-on-one with a Vendasta Success Manager, who will provide sales training so you reach your goals quickly.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Custom domains
<div class="tooltip-container"><strong>Custom domains</strong>
<p>Fully white-label the platform on your agency's own domains.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Concierge
<div class="tooltip-container"><strong>Concierge</strong>
<p>Multi-client agency fulfillment & task management app for teams.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Brand Analytics
<div class="tooltip-container"><strong>Brand Analytics</strong>
<p>Access to multi-location brand management app.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Managed Digital Ads
<div class="tooltip-container"><strong>Managed Digital Ads</strong>
<p>Access to our managed advertising service. Drive store visits, calls, texts & form fills for your clients.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Access to in-market seminars
<div class="tooltip-container"><strong>Access to in-market seminars</strong>
<p>Face to face training from our experts to yours.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">APIs & SSO
<div class="tooltip-container"><strong>APIs & SSO</strong>
<p>APIs to use our products in your dashboards.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Digital Agency
<div class="tooltip-container"><strong>Digital Agency</strong>
<p>Outsource your work to our fulfillment team.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">100% white-label
<div class="tooltip-container"><strong>100% white-label</strong>
<p>Digital Agency Email and phone communication under your brand. Customized workflows and toll-free numbers.</p>
</div>
</li>
</ul>
</div>
<div class="price-card--mobile-features-toggle"></div>
</div>
<!-- End of Card -->
<!-- ========================= -->
<!-- = Pro Subscription Card = -->
<!-- ========================= -->
<div class="price-card">
<div class="price-card--header">
<h4>Pro</h4>
<!-- <p>growing your business</p> -->
</div>
<div class="price-card--price">
<div class="price-card--price-text">
<div class="price-card--price-number toggle-price-content odometer" data-price-monthly="499" data-price-yearly="450">450</div>
</div>
<div class="price-card--price-conditions">
<div class="toggle-price-content" data-price-monthly="Billed Monthly" data-price-yearly="Billed Annually">Billed Annually</div>
<div class="price-card--onboarding-fee toggle-price-content" data-price-monthly="+ $1,500 Onboarding Fee" data-price-yearly="No Onboarding Fee">No Onboarding Fee</div>
</div>
</div>
<div class="price-card--cta">
<a class="price-card--cta--button btn" href="/get-started-today">Get Started</a>
</div>
<div class="price-card--features">
<ul class="price-card--features--list">
<li class="price-card--features--item has-tooltip">Sales & Marketing Platform
<div class="tooltip-container"><strong>Sales & Marketing Platform</strong>
<p>Vendasta's end-to-end sales solution for companies that serve local businesses, and want to grow digital revenue.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Snapshot & Campaigns
<div class="tooltip-container"><strong>Snapshot & Campaigns</strong>
<p>Access to award-winning automated needs-assessment and email marketing automation. Unlimited emails sent to unlimited accounts.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Marketplace
<div class="tooltip-container"><strong>Marketplace</strong>
<p>Access to world-class resellable products & services, aimed to fulfilling the digital marketing needs of your small & medium sized business clients.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Business Center & Store
<div class="tooltip-container"><strong>Business Center & Store</strong>
<p>Portal for your local business clients, featuring your agency’s branding. They can access the products purchased from your Marketplace.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Tech support
<div class="tooltip-container"><strong>Tech support</strong>
<p>Phone, Email and Web Chat support, <br/>9am-9pm EST Mon-Fri, <br/>2pm-7pm EST Sat-Sun</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Partner Success Manager
<div class="tooltip-container"><strong>Partner Success Manager</strong>
<p>One-on-one with a Vendasta Success Manager, who will provide sales training so you reach your goals quickly.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Custom domains
<div class="tooltip-container"><strong>Custom domains</strong>
<p>Fully white-label the platform on your agency's own domains.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Concierge
<div class="tooltip-container"><strong>Concierge</strong>
<p>Multi-client agency fulfillment & task management app for teams.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Brand Analytics
<div class="tooltip-container"><strong>Brand Analytics</strong>
<p>Access to multi-location brand management app.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Managed Digital Ads
<div class="tooltip-container"><strong>Managed Digital Ads</strong>
<p>Access to our managed advertising service. Drive store visits, calls, texts & form fills for your clients.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Access to in-market seminars
<div class="tooltip-container"><strong>Access to in-market seminars</strong>
<p>Face to face training from our experts to yours.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">APIs & SSO
<div class="tooltip-container"><strong>APIs & SSO</strong>
<p>APIs to use our products in your dashboards.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Digital Agency
<div class="tooltip-container"><strong>Digital Agency</strong>
<p>Outsource your work to our fulfillment team.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">100% white-label
<div class="tooltip-container"><strong>100% white-label</strong>
<p>Digital Agency Email and phone communication under your brand. Customized workflows and toll-free numbers.</p>
</div>
</li>
</ul>
</div>
<div class="price-card--mobile-features-toggle"></div>
</div>
<!-- End of Card -->
<!-- =========================== -->
<!-- = Basic Subscription Card = -->
<!-- =========================== -->
<div class="price-card">
<div class="price-card--header">
<h4>Basic</h4>
<!-- <p>getting started</p> -->
</div>
<div class="price-card--price">
<div class="price-card--price-text only-yearly">
<div class="price-card--price-number odometer">249</div>
<div class="only-yearly--text"><span>Only Available Yearly</span></div>
</div>
<div class="price-card--price-conditions">
<div>Billed Annually</div>
<div class="price-card--onboarding-fee">No Onboarding Fee</div>
</div>
</div>
<div class="price-card--cta">
<a class="price-card--cta--button btn" href="/get-started-today">Get Started</a>
</div>
<div class="price-card--features">
<ul class="price-card--features--list">
<li class="price-card--features--item has-tooltip">Sales & Marketing Platform
<div class="tooltip-container"><strong>Sales & Marketing Platform</strong>
<p>Vendasta's end-to-end sales solution for companies that serve local businesses, and want to grow digital revenue.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Snapshot & Campaigns
<div class="tooltip-container"><strong>Snapshot & Campaigns</strong>
<p>Access to award-winning automated needs-assessment and email marketing automation. Unlimited emails sent to unlimited accounts.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Marketplace
<div class="tooltip-container"><strong>Marketplace</strong>
<p>Access to world-class resellable products & services, aimed to fulfilling the digital marketing needs of your small & medium sized business clients.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Business Center & Store
<div class="tooltip-container"><strong>Business Center & Store</strong>
<p>Portal for your local business clients, featuring your agency’s branding. They can access the products purchased from your Marketplace.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip">Tech support (limited)
<div class="tooltip-container"><strong>Tech support (limited)</strong>
<p>Email and Web Chat support, <br/>9am-9pm EST Mon-Fri, <br/>2pm-7pm EST Sat-Sun</p>
</div>
</li>
<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Partner Success Manager
<div class="tooltip-container"><strong>Partner Success Manager</strong>
<p>One-on-one with a Vendasta Success Manager, who will provide sales training so you reach your goals quickly.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Custom domains
<div class="tooltip-container"><strong>Custom domains</strong>
<p>Fully white-label the platform on your agency's own domains.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Concierge
<div class="tooltip-container"><strong>Concierge</strong>
<p>Multi-client agency fulfillment & task management app for teams.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Brand Analytics
<div class="tooltip-container"><strong>Brand Analytics</strong>
<p>Access to multi-location brand management app.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Managed Digital Ads
<div class="tooltip-container"><strong>Managed Digital Ads</strong>
<p>Access to our managed advertising service. Drive store visits, calls, texts & form fills for your clients.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Access to in-market seminars
<div class="tooltip-container"><strong>Access to in-market seminars</strong>
<p>Face to face training from our experts to yours.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">APIs & SSO
<div class="tooltip-container"><strong>APIs & SSO</strong>
<p>APIs to use our products in your dashboards.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Digital Agency
<div class="tooltip-container"><strong>Digital Agency</strong>
<p>Outsource your work to our fulfillment team.</p>
</div>
</li>
<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">100% white-label
<div class="tooltip-container"><strong>100% white-label</strong>
<p>Digital Agency Email and phone communication under your brand. Customized workflows and toll-free numbers.</p>
</div>
</li>
</ul>
</div>
<div class="price-card--mobile-features-toggle"></div>
</div>
<!-- End of Card -->
</div>
<!-- end of pricing-cards -->
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
jQuery.noConflict();
(function($) {
$(function() {
var toggleSwitch = $("#pricing-switch input");
(function() {
$(toggleSwitch).change(function() {
// Change prices for plans
togglePriceContent();
// Toggle monthly/yearly style
$(".switch-label-monthly, .switch-label-yearly").toggleClass("active");
// Basic is only available yearly message
$(".only-yearly").toggleClass("if-monthly");
// Highlight "No Onboarding" fee
$(".price-card--onboarding-fee").toggleClass("has-fee");
});
$(".switch-label-monthly, .switch-label-yearly").click(function() {
// Toggle switch when monthly/yearly is clicked
$(toggleSwitch).click();
});
$(".price-card--mobile-features-toggle").click(function() {
// Show/Hide features while in mobile
$(this)
.siblings(".price-card--features")
.slideToggle(200);
$(this).toggleClass("hideall");
});
})();
function togglePriceContent() {
if ($(toggleSwitch).is(":checked") === true) {
// if toggle is yearly
$(".toggle-price-content").each(function() {
$(this).html($(this).data("price-yearly"));
});
} else {
// if toggle is monthly
$(".toggle-price-content").each(function() {
$(this).html($(this).data("price-monthly"));
});
}
}
});
})(jQuery);
window.odometerOptions = {
duration: 400
};
(function() {
var COUNT_FRAMERATE,
COUNT_MS_PER_FRAME,
DIGIT_FORMAT,
DIGIT_HTML,
DIGIT_SPEEDBOOST,
DURATION,
FORMAT_MARK_HTML,
FORMAT_PARSER,
FRAMERATE,
FRAMES_PER_VALUE,
MS_PER_FRAME,
MutationObserver,
Odometer,
RIBBON_HTML,
TRANSITION_END_EVENTS,
TRANSITION_SUPPORT,
VALUE_HTML,
addClass,
createFromHTML,
fractionalPart,
now,
removeClass,
requestAnimationFrame,
round,
transitionCheckStyles,
trigger,
truncate,
wrapJQuery,
_jQueryWrapped,
_old,
_ref,
_ref1,
__slice = [].slice;
VALUE_HTML = '<span class="odometer-value"></span>';
RIBBON_HTML =
'<span class="odometer-ribbon"><span class="odometer-ribbon-inner">' +
VALUE_HTML +
"</span></span>";
DIGIT_HTML =
'<span class="odometer-digit"><span class="odometer-digit-spacer">8</span><span class="odometer-digit-inner">' +
RIBBON_HTML +
"</span></span>";
FORMAT_MARK_HTML = '<span class="odometer-formatting-mark"></span>';
DIGIT_FORMAT = "(,ddd).dd";
FORMAT_PARSER = /^\(?([^)]*)\)?(?:(.)(d+))?$/;
FRAMERATE = 30;
DURATION = 2000;
COUNT_FRAMERATE = 20;
FRAMES_PER_VALUE = 2;
DIGIT_SPEEDBOOST = 0.5;
MS_PER_FRAME = 1000 / FRAMERATE;
COUNT_MS_PER_FRAME = 1000 / COUNT_FRAMERATE;
TRANSITION_END_EVENTS =
"transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd";
transitionCheckStyles = document.createElement("div").style;
TRANSITION_SUPPORT =
transitionCheckStyles.transition != null ||
transitionCheckStyles.webkitTransition != null ||
transitionCheckStyles.mozTransition != null ||
transitionCheckStyles.oTransition != null;
requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
MutationObserver =
window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver;
createFromHTML = function(html) {
var el;
el = document.createElement("div");
el.innerHTML = html;
return el.children[0];
};
removeClass = function(el, name) {
return (el.className = el.className.replace(
new RegExp("(^| )" + name.split(" ").join("|") + "( |$)", "gi"),
" "
));
};
addClass = function(el, name) {
removeClass(el, name);
return (el.className += " " + name);
};
trigger = function(el, name) {
var evt;
if (document.createEvent != null) {
evt = document.createEvent("HTMLEvents");
evt.initEvent(name, true, true);
return el.dispatchEvent(evt);
}
};
now = function() {
var _ref, _ref1;
return (_ref =
(_ref1 = window.performance) != null
? typeof _ref1.now === "function" ? _ref1.now() : void 0
: void 0) != null
? _ref
: +new Date();
};
round = function(val, precision) {
if (precision == null) {
precision = 0;
}
if (!precision) {
return Math.round(val);
}
val *= Math.pow(10, precision);
val += 0.5;
val = Math.floor(val);
return (val /= Math.pow(10, precision));
};
truncate = function(val) {
if (val < 0) {
return Math.ceil(val);
} else {
return Math.floor(val);
}
};
fractionalPart = function(val) {
return val - round(val);
};
_jQueryWrapped = false;
(wrapJQuery = function() {
var property, _i, _len, _ref, _results;
if (_jQueryWrapped) {
return;
}
if (window.jQuery != null) {
_jQueryWrapped = true;
_ref = ["html", "text"];
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
property = _ref[_i];
_results.push(
(function(property) {
var old;
old = window.jQuery.fn[property];
return (window.jQuery.fn[property] = function(val) {
var _ref1;
if (
val == null ||
((_ref1 = this[0]) != null ? _ref1.odometer : void 0) == null
) {
return old.apply(this, arguments);
}
return this[0].odometer.update(val);
});
})(property)
);
}
return _results;
}
})();
setTimeout(wrapJQuery, 0);
Odometer = (function() {
function Odometer(options) {
var e,
k,
property,
v,
_base,
_i,
_len,
_ref,
_ref1,
_ref2,
_this = this;
this.options = options;
this.el = this.options.el;
if (this.el.odometer != null) {
return this.el.odometer;
}
this.el.odometer = this;
_ref = Odometer.options;
for (k in _ref) {
v = _ref[k];
if (this.options[k] == null) {
this.options[k] = v;
}
}
if ((_base = this.options).duration == null) {
_base.duration = DURATION;
}
this.MAX_VALUES =
(this.options.duration / MS_PER_FRAME / FRAMES_PER_VALUE) | 0;
this.resetFormat();
this.value = this.cleanValue(
(_ref1 = this.options.value) != null ? _ref1 : ""
);
this.renderInside();
this.render();
try {
_ref2 = ["innerHTML", "innerText", "textContent"];
for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
property = _ref2[_i];
if (this.el[property] != null) {
(function(property) {
return Object.defineProperty(_this.el, property, {
get: function() {
var _ref3;
if (property === "innerHTML") {
return _this.inside.outerHTML;
} else {
return (_ref3 = _this.inside.innerText) != null
? _ref3
: _this.inside.textContent;
}
},
set: function(val) {
return _this.update(val);
}
});
})(property);
}
}
} catch (_error) {
e = _error;
this.watchForMutations();
}
this;
}
Odometer.prototype.renderInside = function() {
this.inside = document.createElement("div");
this.inside.className = "odometer-inside";
this.el.innerHTML = "";
return this.el.appendChild(this.inside);
};
Odometer.prototype.watchForMutations = function() {
var e,
_this = this;
if (MutationObserver == null) {
return;
}
try {
if (this.observer == null) {
this.observer = new MutationObserver(function(mutations) {
var newVal;
newVal = _this.el.innerText;
_this.renderInside();
_this.render(_this.value);
return _this.update(newVal);
});
}
this.watchMutations = true;
return this.startWatchingMutations();
} catch (_error) {
e = _error;
}
};
Odometer.prototype.startWatchingMutations = function() {
if (this.watchMutations) {
return this.observer.observe(this.el, {
childList: true
});
}
};
Odometer.prototype.stopWatchingMutations = function() {
var _ref;
return (_ref = this.observer) != null ? _ref.disconnect() : void 0;
};
Odometer.prototype.cleanValue = function(val) {
var _ref;
if (typeof val === "string") {
val = val.replace(
(_ref = this.format.radix) != null ? _ref : ".",
"<radix>"
);
val = val.replace(/[.,]/g, "");
val = val.replace("<radix>", ".");
val = parseFloat(val, 10) || 0;
}
return round(val, this.format.precision);
};
Odometer.prototype.bindTransitionEnd = function() {
var event,
renderEnqueued,
_i,
_len,
_ref,
_results,
_this = this;
if (this.transitionEndBound) {
return;
}
this.transitionEndBound = true;
renderEnqueued = false;
_ref = TRANSITION_END_EVENTS.split(" ");
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
event = _ref[_i];
_results.push(
this.el.addEventListener(
event,
function() {
if (renderEnqueued) {
return true;
}
renderEnqueued = true;
setTimeout(function() {
_this.render();
renderEnqueued = false;
return trigger(_this.el, "odometerdone");
}, 0);
return true;
},
false
)
);
}
return _results;
};
Odometer.prototype.resetFormat = function() {
var format, fractional, parsed, precision, radix, repeating, _ref, _ref1;
format = (_ref = this.options.format) != null ? _ref : DIGIT_FORMAT;
format || (format = "d");
parsed = FORMAT_PARSER.exec(format);
if (!parsed) {
throw new Error("Odometer: Unparsable digit format");
}
(_ref1 = parsed.slice(1, 4)),
(repeating = _ref1[0]),
(radix = _ref1[1]),
(fractional = _ref1[2]);
precision = (fractional != null ? fractional.length : void 0) || 0;
return (this.format = {
repeating: repeating,
radix: radix,
precision: precision
});
};
Odometer.prototype.render = function(value) {
var classes, cls, match, newClasses, theme, _i, _len;
if (value == null) {
value = this.value;
}
this.stopWatchingMutations();
this.resetFormat();
this.inside.innerHTML = "";
theme = this.options.theme;
classes = this.el.className.split(" ");
newClasses = [];
for (_i = 0, _len = classes.length; _i < _len; _i++) {
cls = classes[_i];
if (!cls.length) {
continue;
}
if ((match = /^odometer-theme-(.+)$/.exec(cls))) {
theme = match[1];
continue;
}
if (/^odometer(-|$)/.test(cls)) {
continue;
}
newClasses.push(cls);
}
newClasses.push("odometer");
if (!TRANSITION_SUPPORT) {
newClasses.push("odometer-no-transitions");
}
if (theme) {
newClasses.push("odometer-theme-" + theme);
} else {
newClasses.push("odometer-auto-theme");
}
this.el.className = newClasses.join(" ");
this.ribbons = {};
this.formatDigits(value);
return this.startWatchingMutations();
};
Odometer.prototype.formatDigits = function(value) {
var digit,
valueDigit,
valueString,
wholePart,
_i,
_j,
_len,
_len1,
_ref,
_ref1;
this.digits = [];
if (this.options.formatFunction) {
valueString = this.options.formatFunction(value);
_ref = valueString.split("").reverse();
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
valueDigit = _ref[_i];
if (valueDigit.match(/0-9/)) {
digit = this.renderDigit();
digit.querySelector(".odometer-value").innerHTML = valueDigit;
this.digits.push(digit);
this.insertDigit(digit);
} else {
this.addSpacer(valueDigit);
}
}
} else {
wholePart = !this.format.precision || !fractionalPart(value) || false;
_ref1 = value
.toString()
.split("")
.reverse();
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
digit = _ref1[_j];
if (digit === ".") {
wholePart = true;
}
this.addDigit(digit, wholePart);
}
}
};
Odometer.prototype.update = function(newValue) {
var diff,
_this = this;
newValue = this.cleanValue(newValue);
if (!(diff = newValue - this.value)) {
return;
}
removeClass(
this.el,
"odometer-animating-up odometer-animating-down odometer-animating"
);
if (diff > 0) {
addClass(this.el, "odometer-animating-up");
} else {
addClass(this.el, "odometer-animating-down");
}
this.stopWatchingMutations();
this.animate(newValue);
this.startWatchingMutations();
setTimeout(function() {
_this.el.offsetHeight;
return addClass(_this.el, "odometer-animating");
}, 0);
return (this.value = newValue);
};
Odometer.prototype.renderDigit = function() {
return createFromHTML(DIGIT_HTML);
};
Odometer.prototype.insertDigit = function(digit, before) {
if (before != null) {
return this.inside.insertBefore(digit, before);
} else if (!this.inside.children.length) {
return this.inside.appendChild(digit);
} else {
return this.inside.insertBefore(digit, this.inside.children[0]);
}
};
Odometer.prototype.addSpacer = function(chr, before, extraClasses) {
var spacer;
spacer = createFromHTML(FORMAT_MARK_HTML);
spacer.innerHTML = chr;
if (extraClasses) {
addClass(spacer, extraClasses);
}
return this.insertDigit(spacer, before);
};
Odometer.prototype.addDigit = function(value, repeating) {
var chr, digit, resetted, _ref;
if (repeating == null) {
repeating = true;
}
if (value === "-") {
return this.addSpacer(value, null, "odometer-negation-mark");
}
if (value === ".") {
return this.addSpacer(
(_ref = this.format.radix) != null ? _ref : ".",
null,
"odometer-radix-mark"
);
}
if (repeating) {
resetted = false;
while (true) {
if (!this.format.repeating.length) {
if (resetted) {
throw new Error("Bad odometer format without digits");
}
this.resetFormat();
resetted = true;
}
chr = this.format.repeating[this.format.repeating.length - 1];
this.format.repeating = this.format.repeating.substring(
0,
this.format.repeating.length - 1
);
if (chr === "d") {
break;
}
this.addSpacer(chr);
}
}
digit = this.renderDigit();
digit.querySelector(".odometer-value").innerHTML = value;
this.digits.push(digit);
return this.insertDigit(digit);
};
Odometer.prototype.animate = function(newValue) {
if (!TRANSITION_SUPPORT || this.options.animation === "count") {
return this.animateCount(newValue);
} else {
return this.animateSlide(newValue);
}
};
Odometer.prototype.animateCount = function(newValue) {
var cur,
diff,
last,
start,
tick,
_this = this;
if (!(diff = +newValue - this.value)) {
return;
}
start = last = now();
cur = this.value;
return (tick = function() {
var delta, dist, fraction;
if (now() - start > _this.options.duration) {
_this.value = newValue;
_this.render();
trigger(_this.el, "odometerdone");
return;
}
delta = now() - last;
if (delta > COUNT_MS_PER_FRAME) {
last = now();
fraction = delta / _this.options.duration;
dist = diff * fraction;
cur += dist;
_this.render(Math.round(cur));
}
if (requestAnimationFrame != null) {
return requestAnimationFrame(tick);
} else {
return setTimeout(tick, COUNT_MS_PER_FRAME);
}
})();
};
Odometer.prototype.getDigitCount = function() {
var i, max, value, values, _i, _len;
values = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
for (i = _i = 0, _len = values.length; _i < _len; i = ++_i) {
value = values[i];
values[i] = Math.abs(value);
}
max = Math.max.apply(Math, values);
return Math.ceil(Math.log(max + 1) / Math.log(10));
};
Odometer.prototype.getFractionalDigitCount = function() {
var i, parser, parts, value, values, _i, _len;
values = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
parser = /^\-?\d*\.(\d*?)0*$/;
for (i = _i = 0, _len = values.length; _i < _len; i = ++_i) {
value = values[i];
values[i] = value.toString();
parts = parser.exec(values[i]);
if (parts == null) {
values[i] = 0;
} else {
values[i] = parts[1].length;
}
}
return Math.max.apply(Math, values);
};
Odometer.prototype.resetDigits = function() {
this.digits = [];
this.ribbons = [];
this.inside.innerHTML = "";
return this.resetFormat();
};
Odometer.prototype.animateSlide = function(newValue) {
var boosted,
cur,
diff,
digitCount,
digits,
dist,
end,
fractionalCount,
frame,
frames,
i,
incr,
j,
mark,
numEl,
oldValue,
start,
_base,
_i,
_j,
_k,
_l,
_len,
_len1,
_len2,
_m,
_ref,
_results;
oldValue = this.value;
fractionalCount = this.getFractionalDigitCount(oldValue, newValue);
if (fractionalCount) {
newValue = newValue * Math.pow(10, fractionalCount);
oldValue = oldValue * Math.pow(10, fractionalCount);
}
if (!(diff = newValue - oldValue)) {
return;
}
this.bindTransitionEnd();
digitCount = this.getDigitCount(oldValue, newValue);
digits = [];
boosted = 0;
for (
i = _i = 0;
0 <= digitCount ? _i < digitCount : _i > digitCount;
i = 0 <= digitCount ? ++_i : --_i
) {
start = truncate(oldValue / Math.pow(10, digitCount - i - 1));
end = truncate(newValue / Math.pow(10, digitCount - i - 1));
dist = end - start;
if (Math.abs(dist) > this.MAX_VALUES) {
frames = [];
incr =
dist / (this.MAX_VALUES + this.MAX_VALUES * boosted * DIGIT_SPEEDBOOST);
cur = start;
while ((dist > 0 && cur < end) || (dist < 0 && cur > end)) {
frames.push(Math.round(cur));
cur += incr;
}
if (frames[frames.length - 1] !== end) {
frames.push(end);
}
boosted++;
} else {
frames = function() {
_results = [];
for (
var _j = start;
start <= end ? _j <= end : _j >= end;
start <= end ? _j++ : _j--
) {
_results.push(_j);
}
return _results;
}.apply(this);
}
for (i = _k = 0, _len = frames.length; _k < _len; i = ++_k) {
frame = frames[i];
frames[i] = Math.abs(frame % 10);
}
digits.push(frames);
}
this.resetDigits();
_ref = digits.reverse();
for (i = _l = 0, _len1 = _ref.length; _l < _len1; i = ++_l) {
frames = _ref[i];
if (!this.digits[i]) {
this.addDigit(" ", i >= fractionalCount);
}
if ((_base = this.ribbons)[i] == null) {
_base[i] = this.digits[i].querySelector(".odometer-ribbon-inner");
}
this.ribbons[i].innerHTML = "";
if (diff < 0) {
frames = frames.reverse();
}
for (j = _m = 0, _len2 = frames.length; _m < _len2; j = ++_m) {
frame = frames[j];
numEl = document.createElement("div");
numEl.className = "odometer-value";
numEl.innerHTML = frame;
this.ribbons[i].appendChild(numEl);
if (j === frames.length - 1) {
addClass(numEl, "odometer-last-value");
}
if (j === 0) {
addClass(numEl, "odometer-first-value");
}
}
}
if (start < 0) {
this.addDigit("-");
}
mark = this.inside.querySelector(".odometer-radix-mark");
if (mark != null) {
mark.parent.removeChild(mark);
}
if (fractionalCount) {
return this.addSpacer(
this.format.radix,
this.digits[fractionalCount - 1],
"odometer-radix-mark"
);
}
};
return Odometer;
})();
Odometer.options = (_ref = window.odometerOptions) != null ? _ref : {};
setTimeout(function() {
var k, v, _base, _ref1, _results;
if (window.odometerOptions) {
_ref1 = window.odometerOptions;
_results = [];
for (k in _ref1) {
v = _ref1[k];
_results.push(
(_base = Odometer.options)[k] != null
? (_base = Odometer.options)[k]
: (_base[k] = v)
);
}
return _results;
}
}, 0);
Odometer.init = function() {
var el, elements, _i, _len, _ref1, _results;
if (document.querySelectorAll == null) {
return;
}
elements = document.querySelectorAll(
Odometer.options.selector || ".odometer"
);
_results = [];
for (_i = 0, _len = elements.length; _i < _len; _i++) {
el = elements[_i];
_results.push(
(el.odometer = new Odometer({
el: el,
value: (_ref1 = el.innerText) != null ? _ref1 : el.textContent
}))
);
}
return _results;
};
if (
((_ref1 = document.documentElement) != null ? _ref1.doScroll : void 0) !=
null &&
document.createEventObject != null
) {
_old = document.onreadystatechange;
document.onreadystatechange = function() {
if (document.readyState === "complete" && Odometer.options.auto !== false) {
Odometer.init();
}
return _old != null ? _old.apply(this, arguments) : void 0;
};
} else {
document.addEventListener(
"DOMContentLoaded",
function() {
if (Odometer.options.auto !== false) {
return Odometer.init();
}
},
false
);
}
if (typeof define === "function" && define.amd) {
define([], function() {
return Odometer;
});
} else if (typeof exports !== "undefined" && exports !== null) {
module.exports = Odometer;
} else {
window.Odometer = Odometer;
}
}.call(this));
</script>
</body>
</html>
