Federated_Computer/hammerfest
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes to the calculator

Browse Source
This commit is contained in:
david
2026-10-20 08:32:39 -06:00
parent a9cccf4226
commit 99bf23ecf1
15 changed files with 155 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/pricing/index.html
+50 -44
View File
@@ -6,6 +6,9 @@
<title>Pricing · Federated Computer</title>
<meta name="description" content="Run Federated Computer on your own infrastructure or let us host it. Self-hosted plans start free; hosted plans start at $70/month with unlimited users.">
<meta name="theme-color" content="#001a2b">
<link rel="icon" href="../favicon.ico" sizes="32x32">
<link rel="icon" href="../favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="../apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
@@ -615,8 +618,8 @@
<li class="bar-row is-highlight">
<span class="bar-name">Federated</span>
<span class="bar-track"><span class="bar-fill" style="width: 8.275862068965518%"></span></span>
<span class="bar-value">$120</span>
<span class="bar-track"><span class="bar-fill" style="width: 10.96551724137931%"></span></span>
<span class="bar-value">$159</span>
</li>
<li class="bar-row">
@@ -645,223 +648,223 @@
<form class="savings-calc" id="savings-calc" data-annual="2900" onsubmit="return false">
<form class="savings-calc" id="savings-calc" data-plans="[{&#34;annual&#34;:700,&#34;name&#34;:&#34;Good&#34;,&#34;tier&#34;:&#34;good&#34;},{&#34;annual&#34;:1450,&#34;name&#34;:&#34;Better&#34;,&#34;tier&#34;:&#34;better&#34;},{&#34;annual&#34;:2900,&#34;name&#34;:&#34;Best&#34;,&#34;tier&#34;:&#34;best&#34;}]" onsubmit="return false">
<fieldset class="calc-apps">
<legend class="plan-subhead">Which apps do you pay for today?</legend>
<div class="calc-app-grid">
<label class="calc-app">
<input type="checkbox" value="8" data-per-seat="true">
<input type="checkbox" value="8" data-tier="good" data-per-seat="true">
<span class="calc-app-name">1Password</span>
<span class="calc-app-cost">$8/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="20" data-per-seat="true">
<input type="checkbox" value="20" data-tier="best" data-per-seat="true">
<span class="calc-app-name">Airtable</span>
<span class="calc-app-cost">$20/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="15" data-per-seat="true">
<input type="checkbox" value="15" data-tier="best" data-per-seat="true">
<span class="calc-app-name">Asana</span>
<span class="calc-app-cost">$15/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="15" data-per-seat="true">
<input type="checkbox" value="15" data-tier="good" data-per-seat="true">
<span class="calc-app-name">Box</span>
<span class="calc-app-cost">$15/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="10" data-per-seat="true">
<input type="checkbox" value="10" data-tier="better" data-per-seat="true">
<span class="calc-app-name">Calendly</span>
<span class="calc-app-cost">$10/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="12" data-per-seat="true">
<input type="checkbox" value="12" data-tier="best" data-per-seat="true">
<span class="calc-app-name">ClickUp</span>
<span class="calc-app-cost">$12/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="9" data-per-seat="true">
<input type="checkbox" value="9" data-tier="best" data-per-seat="true">
<span class="calc-app-name">Confluence</span>
<span class="calc-app-cost">$9/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="80" data-per-seat="false">
<input type="checkbox" value="80" data-tier="good" data-per-seat="false">
<span class="calc-app-name">Constant Contact</span>
<span class="calc-app-cost">$80 flat</span>
</label>
<label class="calc-app">
<input type="checkbox" value="7" data-per-seat="true">
<input type="checkbox" value="7" data-tier="better" data-per-seat="true">
<span class="calc-app-name">Doodle</span>
<span class="calc-app-cost">$7/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="10" data-per-seat="true">
<input type="checkbox" value="10" data-tier="good" data-per-seat="true">
<span class="calc-app-name">Dropbox</span>
<span class="calc-app-cost">$10/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="5" data-per-seat="true">
<input type="checkbox" value="5" data-tier="good" data-per-seat="true">
<span class="calc-app-name">Fastmail</span>
<span class="calc-app-cost">$5/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="15" data-per-seat="true">
<input type="checkbox" value="15" data-tier="best" data-per-seat="true">
<span class="calc-app-name">Freshdesk</span>
<span class="calc-app-cost">$15/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="29" data-per-seat="true">
<input type="checkbox" value="29" data-tier="best" data-per-seat="true">
<span class="calc-app-name">Front</span>
<span class="calc-app-cost">$29/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="4" data-per-seat="true">
<input type="checkbox" value="4" data-tier="good" data-per-seat="true">
<span class="calc-app-name">GitHub</span>
<span class="calc-app-cost">$4/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="29" data-per-seat="true">
<input type="checkbox" value="29" data-tier="good" data-per-seat="true">
<span class="calc-app-name">GitLab</span>
<span class="calc-app-cost">$29/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="13" data-per-seat="true" checked>
<input type="checkbox" value="13" data-tier="good" data-per-seat="true" checked>
<span class="calc-app-name">Google Workspace</span>
<span class="calc-app-cost">$13/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="20" data-per-seat="true">
<input type="checkbox" value="20" data-tier="better" data-per-seat="true">
<span class="calc-app-name">HubSpot</span>
<span class="calc-app-cost">$20/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="29" data-per-seat="true">
<input type="checkbox" value="29" data-tier="better" data-per-seat="true">
<span class="calc-app-name">Intercom</span>
<span class="calc-app-cost">$29/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="12" data-per-seat="true">
<input type="checkbox" value="12" data-tier="best" data-per-seat="true">
<span class="calc-app-name">Jira</span>
<span class="calc-app-cost">$12/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="135" data-per-seat="false">
<input type="checkbox" value="135" data-tier="good" data-per-seat="false">
<span class="calc-app-name">Mailchimp</span>
<span class="calc-app-cost">$135 flat</span>
</label>
<label class="calc-app">
<input type="checkbox" value="14" data-per-seat="true">
<input type="checkbox" value="14" data-tier="good" data-per-seat="true">
<span class="calc-app-name">Microsoft 365</span>
<span class="calc-app-cost">$14/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="8" data-per-seat="true">
<input type="checkbox" value="8" data-tier="better" data-per-seat="true">
<span class="calc-app-name">Microsoft Teams</span>
<span class="calc-app-cost">$8/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="12" data-per-seat="true">
<input type="checkbox" value="12" data-tier="best" data-per-seat="true">
<span class="calc-app-name">Monday.com</span>
<span class="calc-app-cost">$12/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="12" data-per-seat="true">
<input type="checkbox" value="12" data-tier="best" data-per-seat="true">
<span class="calc-app-name">Notion</span>
<span class="calc-app-cost">$12/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="25" data-per-seat="true">
<input type="checkbox" value="25" data-tier="best" data-per-seat="true">
<span class="calc-app-name">Odoo</span>
<span class="calc-app-cost">$25/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="13" data-per-seat="true">
<input type="checkbox" value="13" data-tier="good" data-per-seat="true">
<span class="calc-app-name">Proton</span>
<span class="calc-app-cost">$13/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="25" data-per-seat="true">
<input type="checkbox" value="25" data-tier="better" data-per-seat="true">
<span class="calc-app-name">Salesforce</span>
<span class="calc-app-cost">$25/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="79" data-per-seat="false">
<input type="checkbox" value="79" data-tier="good" data-per-seat="false">
<span class="calc-app-name">Shopify</span>
<span class="calc-app-cost">$79 flat</span>
</label>
<label class="calc-app">
<input type="checkbox" value="9" data-per-seat="true" checked>
<input type="checkbox" value="9" data-tier="better" data-per-seat="true" checked>
<span class="calc-app-name">Slack</span>
<span class="calc-app-cost">$9/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="65" data-per-seat="false" checked>
<input type="checkbox" value="65" data-tier="good" data-per-seat="false" checked>
<span class="calc-app-name">Squarespace</span>
<span class="calc-app-cost">$65 flat</span>
</label>
<label class="calc-app">
<input type="checkbox" value="6" data-per-seat="true">
<input type="checkbox" value="6" data-tier="good" data-per-seat="true">
<span class="calc-app-name">Tailscale</span>
<span class="calc-app-cost">$6/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="11" data-per-seat="true">
<input type="checkbox" value="11" data-tier="best" data-per-seat="true">
<span class="calc-app-name">Trello</span>
<span class="calc-app-cost">$11/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="36" data-per-seat="false">
<input type="checkbox" value="36" data-tier="good" data-per-seat="false">
<span class="calc-app-name">Wix</span>
<span class="calc-app-cost">$36 flat</span>
</label>
<label class="calc-app">
<input type="checkbox" value="19" data-per-seat="true">
<input type="checkbox" value="19" data-tier="best" data-per-seat="true">
<span class="calc-app-name">Zendesk</span>
<span class="calc-app-cost">$19/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="29" data-per-seat="true">
<input type="checkbox" value="29" data-tier="good" data-per-seat="true">
<span class="calc-app-name">Zoho</span>
<span class="calc-app-cost">$29/person</span>
</label>
<label class="calc-app">
<input type="checkbox" value="13" data-per-seat="true">
<input type="checkbox" value="13" data-tier="better" data-per-seat="true">
<span class="calc-app-name">Zoom</span>
<span class="calc-app-cost">$13/person</span>
</label>
@@ -882,16 +885,16 @@
<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>
<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>
<div class="calc-stat is-highlight"><span class="calc-stat-label">You save</span><span class="calc-stat-value" data-out="savings">$0</span><span class="calc-stat-unit">/year on the <span data-out="plan">Good</span> plan</span></div>
</div>
<p class="plan-note">Savings compare the retail price of the apps you pick with our Best plan billed annually ($2,900/year). Prices are typical list prices per person per month, or per month for flat-fee apps.</p>
<p class="plan-note">Savings compare the retail price of the apps you pick with the smallest hosted plan that replaces all of them, billed annually (Good $700, Better $1,450, or Best $2,900 a year). Prices are typical list prices per person per month, or per month for flat-fee apps.</p>
</form>
<script>
(function () {
var form = document.getElementById('savings-calc');
if (!form) return;
var annual = +form.dataset.annual || 0;
var plans = JSON.parse(form.dataset.plans || '[]');
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'); };
@@ -904,16 +907,19 @@
return 1000 + (step - 20) * 500;
}
function update() {
var n = users(+range.value), count = 0, cost = 0;
var n = users(+range.value), count = 0, cost = 0, need = 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++;
need = Math.max(need, plans.findIndex(function (p) { return p.tier === box.dataset.tier; }));
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)));
var plan = plans[need] || plans[plans.length - 1] || { name: '', annual: 0 };
out('savings', fmt(Math.max(0, cost - plan.annual)));
out('plan', plan.name);
}
form.addEventListener('input', update);
update();