74 lines
3.7 KiB
HTML
74 lines
3.7 KiB
HTML
{{/*
|
||
The savings calculator: pick the apps you pay for today and your team
|
||
size, and compare their yearly retail cost with Federated's annual price.
|
||
Input: dict with "key" (unique id), "apps" (name, cost, perSeat, selected),
|
||
"annual", optional "note", "compact" (one result, no cost breakdown) and
|
||
"more" (a link to the full calculator). The totals need JS; without it,
|
||
the app list still shows each app's retail price.
|
||
*/}}
|
||
{{ $key := .key }}
|
||
<form class="savings-calc{{ if .compact }} is-compact{{ end }}" id="{{ $key }}-calc" data-annual="{{ .annual }}" onsubmit="return false">
|
||
<fieldset class="calc-apps">
|
||
<legend class="plan-subhead">{{ if .compact }}Which of these do you pay for?{{ else }}Which apps do you pay for today?{{ end }}</legend>
|
||
<div class="calc-app-grid">
|
||
{{ range .apps }}
|
||
<label class="calc-app">
|
||
<input type="checkbox" value="{{ .cost }}" data-per-seat="{{ .perSeat }}"{{ if .selected }} checked{{ end }}>
|
||
<span class="calc-app-name">{{ .name }}</span>
|
||
<span class="calc-app-cost">${{ .cost }}{{ if .perSeat }}/person{{ else }} flat{{ end }}</span>
|
||
</label>
|
||
{{ end }}
|
||
</div>
|
||
</fieldset>
|
||
|
||
<div class="calc-users">
|
||
<label class="plan-subhead" for="{{ $key }}-users">How many people work at your company?</label>
|
||
<div class="calc-users-row">
|
||
<input type="range" id="{{ $key }}-users" min="1" max="28" step="1" value="2">
|
||
<output class="calc-users-value" for="{{ $key }}-users">10</output>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="calc-result" aria-live="polite">
|
||
{{ if not .compact }}
|
||
<div class="calc-stat"><span class="calc-stat-label">Apps replaced</span><span class="calc-stat-value" data-out="count">0</span></div>
|
||
<div class="calc-stat"><span class="calc-stat-label">Their retail cost</span><span class="calc-stat-value" data-out="cost">$0</span><span class="calc-stat-unit">/year</span></div>
|
||
{{ end }}
|
||
<div class="calc-stat is-highlight"><span class="calc-stat-label">You'd save</span><span class="calc-stat-value" data-out="savings">$0</span><span class="calc-stat-unit">/year</span></div>
|
||
{{ with .more }}<a class="more calc-more" href="{{ .url | relURL }}">{{ .label }}<span class="arrow" aria-hidden="true">→</span></a>{{ end }}
|
||
</div>
|
||
{{ with .note }}<p class="plan-note">{{ . | markdownify }}</p>{{ end }}
|
||
</form>
|
||
<script>
|
||
(function () {
|
||
var form = document.getElementById('{{ $key }}-calc');
|
||
if (!form) return;
|
||
var annual = +form.dataset.annual || 0;
|
||
var range = form.querySelector('input[type=range]');
|
||
var shown = form.querySelector('.calc-users-value');
|
||
var fmt = function (n) { return '$' + Math.round(n).toLocaleString('en-US'); };
|
||
function out(name, text) { var el = form.querySelector('[data-out=' + name + ']'); if (el) el.textContent = text; }
|
||
// The slider's 28 steps: 1, then 10–100 by 10, 200–1,000 by 100, 1,500–5,000 by 500.
|
||
function users(step) {
|
||
if (step <= 1) return 1;
|
||
if (step <= 11) return (step - 1) * 10;
|
||
if (step <= 20) return (step - 10) * 100;
|
||
return 1000 + (step - 20) * 500;
|
||
}
|
||
function update() {
|
||
var n = users(+range.value), count = 0, cost = 0;
|
||
shown.textContent = n.toLocaleString('en-US') + (+range.value === +range.max ? '+' : '');
|
||
range.setAttribute('aria-valuetext', shown.textContent + ' people');
|
||
form.querySelectorAll('.calc-app input:checked').forEach(function (box) {
|
||
count++;
|
||
cost += +box.value * (box.dataset.perSeat === 'true' ? n : 1) * 12;
|
||
});
|
||
out('count', count);
|
||
out('cost', fmt(cost));
|
||
out('savings', fmt(Math.max(0, cost - annual)));
|
||
}
|
||
form.addEventListener('input', update);
|
||
update();
|
||
})();
|
||
</script>
|