added first three mockups
This commit is contained in:
@@ -0,0 +1,184 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Select Electrical Services — 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> Select Electrical Services — 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" checked>
|
||||
<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>
|
||||
Reference in New Issue
Block a user