185 lines
7.2 KiB
HTML
185 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Bob Bollweg Plumbing — Feature pricing</title>
|
|
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
|
</head>
|
|
<body>
|
|
<div class="proposal-banner">
|
|
<div><span class="tag">Proposal mockup</span> Bob Bollweg Plumbing — pricing picker (not a quote)</div>
|
|
<div>
|
|
<a href="ux-gallery.html">All screens</a> ·
|
|
<a href="index.html">Marketing home</a>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="hub-hero">
|
|
<h1>Build your package</h1>
|
|
<p>Base public site + client portal (with UTM) always included. Toggle add-ons to see one-time build and monthly totals. Stripe / SMS / postage usage billed separately.</p>
|
|
</section>
|
|
|
|
<div class="pricing-layout">
|
|
<div class="price-panel">
|
|
<h2>Features</h2>
|
|
|
|
<div class="feat-row locked">
|
|
<input type="checkbox" checked disabled id="f-public" data-build="300" data-month="10" data-base>
|
|
<div class="feat-text">
|
|
<label for="f-public">Public site</label>
|
|
<div class="desc">Landing, about, contact (+ your service pages).</div>
|
|
</div>
|
|
<div class="amt"><strong>$300</strong> build</div>
|
|
<div class="amt"><strong>$10</strong> /mo</div>
|
|
</div>
|
|
|
|
<div class="feat-row locked">
|
|
<input type="checkbox" checked disabled id="f-portal" data-build="300" data-month="30" data-base>
|
|
<div class="feat-text">
|
|
<label for="f-portal">Client portal + UTM</label>
|
|
<div class="desc">Login, dashboard, leads, UTM analytics — every client.</div>
|
|
</div>
|
|
<div class="amt"><strong>$300</strong> build</div>
|
|
<div class="amt"><strong>$30</strong> /mo</div>
|
|
</div>
|
|
|
|
<div class="feat-row">
|
|
<input type="checkbox" id="f-email" data-build="500" data-month="10" checked>
|
|
<div class="feat-text">
|
|
<label for="f-email">Email & SMS</label>
|
|
<div class="desc">Campaigns, mailing list, engagement reports.</div>
|
|
</div>
|
|
<div class="amt"><strong>$500</strong> build</div>
|
|
<div class="amt"><strong>$10</strong> /mo</div>
|
|
</div>
|
|
|
|
<div class="feat-row">
|
|
<input type="checkbox" id="f-mail" data-build="500" data-month="5">
|
|
<div class="feat-text">
|
|
<label for="f-mail">Direct mail</label>
|
|
<div class="desc">Postcard designer + print/send. Postage separate.</div>
|
|
</div>
|
|
<div class="amt"><strong>$500</strong> build</div>
|
|
<div class="amt"><strong>$5</strong> /mo</div>
|
|
</div>
|
|
|
|
<div class="feat-row">
|
|
<input type="checkbox" id="f-blog" data-build="500" data-month="10">
|
|
<div class="feat-text">
|
|
<label for="f-blog">Blog</label>
|
|
<div class="desc">Public blog + portal post management.</div>
|
|
</div>
|
|
<div class="amt"><strong>$500</strong> build</div>
|
|
<div class="amt"><strong>$10</strong> /mo</div>
|
|
</div>
|
|
|
|
<div class="feat-row">
|
|
<input type="checkbox" id="f-pay" data-build="500" data-month="20" data-requires="f-email" checked>
|
|
<div class="feat-text">
|
|
<label for="f-pay">Payments (Stripe)</label>
|
|
<div class="desc">Invoices + pay links. Requires Email & SMS.</div>
|
|
<div class="dep-note" id="dep-pay" hidden>Requires Email & SMS — auto-selected.</div>
|
|
</div>
|
|
<div class="amt"><strong>$500</strong> build</div>
|
|
<div class="amt"><strong>$20</strong> /mo</div>
|
|
</div>
|
|
|
|
<div class="feat-row">
|
|
<input type="checkbox" id="f-social" data-build="500" data-month="20">
|
|
<div class="feat-text">
|
|
<label for="f-social">Social consolidation</label>
|
|
<div class="desc">Accounts, composer, scheduling.</div>
|
|
</div>
|
|
<div class="amt"><strong>$500</strong> build</div>
|
|
<div class="amt"><strong>$20</strong> /mo</div>
|
|
</div>
|
|
|
|
<div class="feat-row">
|
|
<input type="checkbox" id="f-ai" data-build="300" data-month="20" data-requires="f-social">
|
|
<div class="feat-text">
|
|
<label for="f-ai">AI social generator</label>
|
|
<div class="desc">Ollama drafts. Requires Social consolidation.</div>
|
|
<div class="dep-note" id="dep-ai" hidden>Requires Social — auto-selected.</div>
|
|
</div>
|
|
<div class="amt"><strong>$300</strong> build</div>
|
|
<div class="amt"><strong>$20</strong> /mo</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="price-summary">
|
|
<h2>Estimate</h2>
|
|
<div class="line"><span>One-time build</span><strong id="sum-build">$0</strong></div>
|
|
<div class="line"><span>Monthly</span><strong id="sum-month">$0</strong></div>
|
|
<div class="line total"><span>Selected</span><span id="sum-count">0 features</span></div>
|
|
<p class="disclaimer">Draft catalog pricing from platform <code>features.md</code>. Not a formal quote. Third-party usage (Stripe fees, SMS, postage) not included.</p>
|
|
<p class="disclaimer"><a href="ux-gallery.html">← Back to UX gallery</a></p>
|
|
</aside>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
const boxes = [...document.querySelectorAll('.price-panel input[type=checkbox]')];
|
|
const sumBuild = document.getElementById('sum-build');
|
|
const sumMonth = document.getElementById('sum-month');
|
|
const sumCount = document.getElementById('sum-count');
|
|
|
|
function enforceDeps(changed) {
|
|
const pay = document.getElementById('f-pay');
|
|
const email = document.getElementById('f-email');
|
|
const ai = document.getElementById('f-ai');
|
|
const social = document.getElementById('f-social');
|
|
const depPay = document.getElementById('dep-pay');
|
|
const depAi = document.getElementById('dep-ai');
|
|
|
|
if (pay.checked && !email.checked) {
|
|
email.checked = true;
|
|
depPay.hidden = false;
|
|
} else if (!pay.checked) {
|
|
depPay.hidden = true;
|
|
}
|
|
|
|
if (ai.checked && !social.checked) {
|
|
social.checked = true;
|
|
depAi.hidden = false;
|
|
} else if (!ai.checked) {
|
|
depAi.hidden = true;
|
|
}
|
|
|
|
if (changed === email && !email.checked && pay.checked) {
|
|
pay.checked = false;
|
|
depPay.hidden = true;
|
|
}
|
|
if (changed === social && !social.checked && ai.checked) {
|
|
ai.checked = false;
|
|
depAi.hidden = true;
|
|
}
|
|
}
|
|
|
|
function totals() {
|
|
let build = 0, month = 0, n = 0;
|
|
boxes.forEach((el) => {
|
|
if (!el.checked) return;
|
|
build += Number(el.dataset.build || 0);
|
|
month += Number(el.dataset.month || 0);
|
|
n += 1;
|
|
});
|
|
sumBuild.textContent = '$' + build.toLocaleString();
|
|
sumMonth.textContent = '$' + month.toLocaleString();
|
|
sumCount.textContent = n + (n === 1 ? ' feature' : ' features');
|
|
}
|
|
|
|
boxes.forEach((el) => {
|
|
el.addEventListener('change', () => {
|
|
enforceDeps(el);
|
|
totals();
|
|
});
|
|
});
|
|
enforceDeps(null);
|
|
totals();
|
|
})();
|
|
</script>
|
|
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
|
</body>
|
|
</html>
|