Skip to content

Instantly share code, notes, and snippets.

@VashonG

VashonG/index.html

Created May 29, 2024 17:30
Show Gist options
  • Save VashonG/2982042bc6f1f65408a3cd975ce36e19 to your computer and use it in GitHub Desktop.
Save VashonG/2982042bc6f1f65408a3cd975ce36e19 to your computer and use it in GitHub Desktop.
Download ZIP
Rev Share Calculator
Raw
index.html
<!-- Exported with SnipCSS extension (Ver 1.8.7) -->
<div class="row snipcss-PeFPW">
<div class="col-12 container-small mb-5">
<h2 class="text-center container-small">Revenue Potential</h2>
<p class="slogan text-center container-small">Every time your users swipe their card, you will receive <strong><span data-toggle="tooltip" data-html="true" data-placement="top" title="" data-original-title="<p>Earn the following rates based on total spending across your program.</p>$0-$99,999k/mo: 0.50%<br/>$100,000-$999,999/mo: 0.75%<br/>$1,000,000/mo or more: 1.0%" id="style-vJOwn" class="style-vJOwn">up to 1%</span></strong> on all transactions!<br> Use the interactive model below to estimate your revenue potential.</p>
<input type="hidden" id="interchange" value=".01">
</div>
<div class="col-12 d-flex flex-wrap align-items-center justify-content-md-center">
<div class="col-12 mb-5 mb-md-0 col-lg-5 d-flex flex-column">
<form id="cardRevenueForm">
<div class="form-group">
<label for="totalUsersRange">Total Users</label>
<p id="totalUsersRangeSum" class="sum">
<span class="value">2,410</span>
</p>
<div class="range style-KNQ53" id="style-KNQ53">
<input type="range" min="10" max="1000000" step="100" id="totalUsersRange" value="100">
</div>
</div>
<div class="form-group">
<label for="cardSwipesRange">Average Annual Transactions per User</label>
<p class="sum">
<span class="value">25</span>
</p>
<div class="range style-NMUqT" id="style-NMUqT">
<input type="range" min="1" max="1000" step="1" id="cardSwipesRange" value="100">
</div>
</div>
<div class="form-group">
<label for="averageTransactionRange">Average Transaction Size</label>
<p class="sum">
<span>$</span>
<span class="value">53</span>
</p>
<div class="range style-s4U3b" id="style-s4U3b">
<input type="range" min="10" max="1000" step="1" id="averageTransactionRange" value="100">
</div>
</div>
</form>
</div>
<div class="col-12 col-lg-5 d-flex flex-column justify-content-around results">
<div class="item">
<p>Additional Revenue Per User</p>
<p class="sum">
<span>$</span>
<span id="annualRevenuePerUser">13.25</span>
</p>
</div>
<div class="item">
<p>Total Annual Revenue</p>
<p class="sum">
<span>$</span>
<span id="totalAnnualRevenues">31,932.5</span>
</p>
</div>
</div>
</div>
</div>
Raw
script.js
/*Range slider*/
var RangeSlider = (function() {
var elRangeInputs = document.querySelectorAll(".range");
function setProgress(elTarget) {
var elRangeBar = elTarget.parentElement;
var intThumbWidth = elRangeBar.clientHeight * 3;
var intRangeBarWidth = elRangeBar.clientWidth - intThumbWidth;
var intThumbWidthOffset = intThumbWidth / 2;
var intProgressPosition = (elTarget.value - elTarget.min) / (elTarget.max - elTarget.min);
var intRangePosition = (intRangeBarWidth * intProgressPosition) + intThumbWidthOffset;
elRangeBar.style.background =
"linear-gradient(to right, #095FD9 " +
intRangePosition + "px, #F0F5FA " +
intRangePosition + "px";
}
for (var i = 0; i < elRangeInputs.length; i++) {
elRangeInputs[i].firstElementChild.addEventListener("input", function() {
setProgress(this);
});
setProgress(elRangeInputs[i].firstElementChild);
}
})();
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
$(document).on('input', '#cardRevenueForm .range input[type=range]', function() {
let cardType = $('#cardType').val();
let totalUsers = $('#totalUsersRange').val();
let cardSwipes = $('#cardSwipesRange').val();
let averageTransactionSize = $('#averageTransactionRange').val();
let interchange = $('#interchange').val();
let totalMonthlyVolume = (averageTransactionSize*cardSwipes*totalUsers)/12;
if(cardType=="business"){
if(totalMonthlyVolume >= 1000000)
{
$('#interchange').val('.02');
} else if(totalMonthlyVolume < 1000000 && totalMonthlyVolume >= 100000)
{
$('#interchange').val('.015');
} else {
$('#interchange').val('.01');
}
} else if(cardType=="consumer"){
if(totalMonthlyVolume >= 1000000)
{
$('#interchange').val('.01');
} else if(totalMonthlyVolume < 1000000 && totalMonthlyVolume >= 100000)
{
$('#interchange').val('.0075');
} else {
$('#interchange').val('.005');
}
}
let totalAnnualRevenues = totalUsers*cardSwipes*averageTransactionSize*interchange;
let annualRevenuePerUser = totalAnnualRevenues/totalUsers;
$(this).parents('.form-group').find('.sum').find(' .value').html( numberWithCommas($(this).val()) );
$('#annualRevenuePerUser').html(numberWithCommas(annualRevenuePerUser));
$('#totalAnnualRevenues').html(numberWithCommas(totalAnnualRevenues));
});
/*pricing calculator*/
let costPrice = {
cards: {
firstPeriod: 114477,
secondPeriod: 79477,
thirdPeriod: 23259,
},
money: {
firstPeriod: 49968,
secondPeriod: 39768,
thirdPeriod: 14259,
},
banking: {
firstPeriod: 136722,
secondPeriod: 81722,
thirdPeriod: 38259,
},
payments: {
firstPeriod: 46214,
secondPeriod: 31044,
thirdPeriod: 18259,
},
advice: {
firstPeriod: 49968,
secondPeriod: 39768,
thirdPeriod: 14259,
},
brokerage: {
firstPeriod: 126722,
secondPeriod: 71722,
thirdPeriod: 28259,
}
};
if($('.cost-savings #cards:checked').length) {
//$('.saving-result .value').html(numberWithCommas(costPrice.cards.firstPeriod + costPrice.payments.firstPeriod));
$('.saving-result .value').html(numberWithCommas(costPrice.cards.firstPeriod + costPrice.money.firstPeriod));
}
function calculation() {
let monthsWithUs = $('#monthsWithUs').val();
let cardsTotal;
//let moneyTotal;
//let bankingTotal;
//let paymentsTotal;
let adviceTotal;
//let brokerageTotal;
$('#monthsWithUs').parents('.cost-savings-form').find('.month-sum').html(monthsWithUs);
if($('.cost-savings #cards').length) {
if($('.cost-savings #cards').is(':checked')) {
switch (true) {
case monthsWithUs === '1':
cardsTotal = costPrice.cards.firstPeriod;
break;
case monthsWithUs >= 2 && monthsWithUs <= 3:
cardsTotal = costPrice.cards.firstPeriod + costPrice.cards.secondPeriod * (monthsWithUs - 1);
break;
default:
cardsTotal = costPrice.cards.firstPeriod + costPrice.cards.secondPeriod * 2 + costPrice.cards.thirdPeriod * (monthsWithUs - 3);
break;
}
} else {
cardsTotal = 0;
}
}
/*
if($('.cost-savings #money').length) {
if($('.cost-savings #money').is(':checked')) {
switch (true) {
case monthsWithUs === '1':
moneyTotal = costPrice.money.firstPeriod;
break;
case monthsWithUs >= 2 && monthsWithUs <= 3:
moneyTotal = costPrice.money.firstPeriod + costPrice.money.secondPeriod * (monthsWithUs - 1);
break;
default:
moneyTotal = costPrice.money.firstPeriod + costPrice.money.secondPeriod * 2 + costPrice.money.thirdPeriod * (monthsWithUs - 3);
break;
}
} else {
moneyTotal = 0;
}
}
*/
/*
if($('.cost-savings #banking').length) {
if($('.cost-savings #banking').is(':checked')) {
switch (true) {
case monthsWithUs === '1':
bankingTotal = costPrice.banking.firstPeriod;
break;
case monthsWithUs >= 2 && monthsWithUs <= 3:
bankingTotal = costPrice.banking.firstPeriod + costPrice.banking.secondPeriod * (monthsWithUs - 1);
break;
default:
bankingTotal = costPrice.banking.firstPeriod + costPrice.banking.secondPeriod * 2 + costPrice.banking.thirdPeriod * (monthsWithUs - 3);
break;
}
} else {
bankingTotal = 0;
}
}
*/
/*
if($('.cost-savings #payments').length) {
if($('.cost-savings #payments').is(':checked')) {
switch (true) {
case monthsWithUs === '1':
paymentsTotal = costPrice.payments.firstPeriod;
break;
case monthsWithUs >= 2 && monthsWithUs <= 3:
paymentsTotal = costPrice.payments.firstPeriod + costPrice.payments.secondPeriod * (monthsWithUs - 1);
break;
default:
paymentsTotal = costPrice.payments.firstPeriod + costPrice.payments.secondPeriod * 2 + costPrice.payments.thirdPeriod * (monthsWithUs - 3);
break;
}
} else {
paymentsTotal = 0;
}
}
*/
if($('.cost-savings #advice').length) {
if($('.cost-savings #advice').is(':checked')) {
switch (true) {
case monthsWithUs === '1':
adviceTotal = costPrice.advice.firstPeriod;
break;
case monthsWithUs >= 2 && monthsWithUs <= 3:
adviceTotal = costPrice.advice.firstPeriod + costPrice.advice.secondPeriod * (monthsWithUs - 1);
break;
default:
adviceTotal = costPrice.advice.firstPeriod + costPrice.advice.secondPeriod * 2 + costPrice.advice.thirdPeriod * (monthsWithUs - 3);
break;
}
} else {
adviceTotal = 0;
}
}
/*
if($('.cost-savings #brokerage').length) {
if($('.cost-savings #brokerage').is(':checked')) {
switch (true) {
case monthsWithUs === '1':
brokerageTotal = costPrice.brokerage.firstPeriod;
break;
case monthsWithUs >= 2 && monthsWithUs <= 3:
brokerageTotal = costPrice.brokerage.firstPeriod + costPrice.brokerage.secondPeriod * (monthsWithUs - 1);
break;
default:
brokerageTotal = costPrice.brokerage.firstPeriod + costPrice.brokerage.secondPeriod * 2 + costPrice.brokerage.thirdPeriod * (monthsWithUs - 3);
break;
}
} else {
brokerageTotal = 0;
}
}
*/
//$('.saving-result .value').html(numberWithCommas(cardsTotal + moneyTotal + bankingTotal + paymentsTotal + adviceTotal + brokerageTotal));
$('.saving-result .value').html(numberWithCommas(cardsTotal + adviceTotal));
}
$('.cost-list .custom-checkbox-big' ).on( 'click', calculation );
$(document).on('input', '#monthsWithUs', calculation);
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
Raw
style.css
/* Exported with SnipCSS extension (Ver 1.8.7) */
@import url('https://fonts.googleapis.com/css?family=Inter:100,200,300,400,500,600,700,800,900&display=swap');
body {
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size:1rem;
font-weight:normal;
line-height:1.5;
color:#212529;
}
* {
box-sizing: inherit;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
.mb-5 {
margin-bottom: 3rem !important;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
color: #212529;
background-color: #fff;
}
body {
margin: 0;
}
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
body {
font-family: 'Inter', sans-serif;
}
body {
color: #676F7A;
font-family: 'Inter', sans-serif;
}
html {
box-sizing: border-box;
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
*,:before,:after {
box-sizing: inherit;
}
*,:before,:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,:before,:after {
box-sizing: border-box;
}
.col-12 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.container-small {
width: 100%;
max-width: 936px;
margin-left: auto;
margin-right: auto;
}
.d-flex {
display: -ms-flexbox !important;
display: flex !important;
}
.flex-wrap {
-ms-flex-wrap: wrap !important;
flex-wrap: wrap !important;
}
.align-items-center {
-ms-flex-align: center !important;
align-items: center !important;
}
@media (min-width: 768px){
.justify-content-md-center {
-ms-flex-pack: center !important;
justify-content: center !important;
}
}
h2 {
margin-top: 0;
margin-bottom: .5rem;
}
h2 {
margin-bottom: 0.5rem;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h2 {
font-size: 2rem;
}
h2 {
margin-bottom: 1rem;
}
h2 {
font-size: 24px;
font-weight: 600;
line-height: 32px;
color: #1E2229;
margin-bottom: 16px;
}
@media (min-width: 768px){
h2 {
font-size: 32px;
line-height: 38px;
letter-spacing: -.1px;
}
}
.text-center {
text-align: center !important;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
p {
margin-bottom: 1rem;
}
h2 + p.slogan {
font-size: 16px;
font-weight: 500;
line-height: 24px;
}
@media (min-width: 992px){
h2 + p.slogan {
font-size: 18px;
line-height: 26px;
}
}
.slogan {
margin-bottom: 56px;
}
input {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
input {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input {
overflow: visible;
}
input {
font: inherit;
}
input {
font-size: 11px;
}
.col-12,.col-lg-5 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 992px){
.col-lg-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
}
.flex-column {
-ms-flex-direction: column !important;
flex-direction: column !important;
}
@media (min-width: 768px){
.mb-md-0 {
margin-bottom: 0 !important;
}
}
.justify-content-around {
-ms-flex-pack: distribute !important;
justify-content: space-around !important;
}
.results {
border-radius: 8px;
background-color: #FAFBFC;
-webkit-box-shadow: 0 2px 8px 0 rgba(31, 35, 41, 0.16);
box-shadow: 0 2px 8px 0 rgba(31, 35, 41, 0.16);
padding: 40px;
}
@media (min-width: 768px){
.results {
margin-left: 35px;
}
}
@media (min-width: 992px){
.results {
padding: 50px;
margin-left: 96px;
}
}
strong {
font-weight: bolder;
}
.results .item:not(:last-of-type) {
margin-bottom: 30px;
}
@media (min-width: 768px){
.results .item:not(:last-of-type) {
margin-bottom: 65px;
}
}
.form-group {
margin-bottom: 1rem;
}
.form-group:not(:last-of-type) {
margin-bottom: 48px;
}
.sum {
font-size: 24px;
font-weight: 600;
letter-spacing: 0;
line-height: 32px;
color: #1E2229;
margin-bottom: 16px;
}
.results .sum {
color: #095FD9;
font-size: 44px;
font-weight: 600;
letter-spacing: -0.2px;
line-height: 52px;
margin-bottom: 0;
width: 100%;
}
label {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
label {
display: inline-block;
margin-bottom: .5rem;
}
label {
font-size: 14px;
line-height: 20px;
}
.range {
background: -webkit-gradient(linear, right top, left top, color-stop(100%, #F0F3F7), color-stop(0%, #095FD9));
background: linear-gradient(to left, #F0F3F7 100%, #095FD9 0%);
height: 10px;
max-width: 100%;
width: 100%;
position: relative;
border: none;
border-radius: 20px;
margin: 13.3333333333px 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.range [type="range"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 20px;
}
.range [type="range"]:focus {
outline: none;
}
/* These were inline style tags. Uses id+class to override almost everything */
#style-vJOwn.style-vJOwn {
color:blue;
cursor:pointer;
}
#style-KNQ53.style-KNQ53 {
background: linear-gradient(to right, rgb(9, 95, 217) 15.9672px, rgb(240, 245, 250) 15.9672px);
}
#style-NMUqT.style-NMUqT {
background: linear-gradient(to right, rgb(9, 95, 217) 24.6817px, rgb(240, 245, 250) 24.6817px);
}
#style-s4U3b.style-s4U3b {
background: linear-gradient(to right, rgb(9, 95, 217) 32.504px, rgb(240, 245, 250) 32.504px);
}
.range {
$track-height: 10px;
$track-color-fill: $blue-medium;
$track-color-background: $gray-light;
$thumb-color: #fff;
$thumb-size: $track-height * 2;
@mixin rangeThumb {
appearance: none;
width: $thumb-size;
height: $thumb-size;
border-radius: 50%;
background: $thumb-color;
cursor: pointer;
border: none;
box-shadow: 0 2px 8px 0 rgba(31,35,41,0.16);
}
@mixin rangeTrack {
background: linear-gradient(to left,
$track-color-background 100%,
$track-color-fill 0%);
height: $track-height;
max-width: 100%;
width: 100%;
position: relative;
border: none;
border-radius: 20px;
margin: $thumb-size / 1.5 0;
appearance: none;
}
@include rangeTrack;
[type="range"] {
appearance: none;
background: transparent;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: $thumb-size;
&:focus {
outline: none;
} // Track
&::-webkit-slider-runnable-track {
background: transparent;
}
&::-moz-range-track {
background: transparent;
} // Thumb
&::-webkit-slider-thumb {
@include rangeThumb;
}
&::-moz-range-thumb {
@include rangeThumb;
}
&::-ms-thumb {
@include rangeThumb;
} // IE Styles
&::-ms-fill-lower {
background: $track-color-fill;
}
&::-ms-fill-upper {
background: $track-color-background;
}
&::-ms-track {
color: transparent;
border: 0 solid transparent;
background: transparent;
}
&::-ms-tooltip {
display: none;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment