Last active
February 27, 2026 09:43
-
-
Save kachar/4aef292ca9793d3e450ab6e4cf956155 to your computer and use it in GitHub Desktop.
Juma.ai — Sample Pricing Page (3-column usage-based)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"/> | |
| <title>Juma.ai - Pricing</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/> | |
| <style> | |
| *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} | |
| :root{ | |
| --bg:#f4feff; --white:#ffffff; --card-bg:#ebfbfc; --card-border:#cdf4f7; | |
| --teal:#9aedf7; --teal-dark:#5dd8e8; --teal-deep:#007a8a; | |
| --ink:#001819; --ink-60:#001819aa; --ink-30:#00181950; --ink-10:#0018190f; | |
| --purple:#9c5aee; --green:#d4f8d2; --green-text:#1a7a30; | |
| --r-card:16px; --r-btn:32px; --r-pill:999px; | |
| --font:'Inter',Arial,sans-serif; | |
| } | |
| body{font-family:var(--font);background:var(--bg);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;} | |
| /* NAV */ | |
| nav{display:flex;align-items:center;justify-content:space-between;padding:18px 40px;background:var(--white);border-bottom:1px solid var(--card-border);} | |
| .logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;color:var(--ink);text-decoration:none;} | |
| .logo-icon{width:34px;height:34px;background:var(--teal);border-radius:9px;display:grid;place-items:center;} | |
| .logo-icon svg{width:20px;height:20px;} | |
| .nav-cta{background:var(--teal);color:var(--ink);font-size:14px;font-weight:600;padding:9px 20px;border-radius:var(--r-btn);border:none;cursor:pointer;text-decoration:none;} | |
| /* HERO */ | |
| .hero{text-align:center;padding:64px 24px 48px;} | |
| .eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);background:var(--teal);border-radius:var(--r-pill);padding:4px 14px;margin-bottom:20px;} | |
| .hero h1{font-size:clamp(28px,4vw,52px);font-weight:700;letter-spacing:-.025em;line-height:1.12;color:var(--ink);max-width:580px;margin:0 auto 14px;} | |
| .hero h1 em{font-style:normal;color:var(--purple);} | |
| .hero p{font-size:16px;color:var(--ink-60);max-width:440px;margin:0 auto 12px;line-height:1.65;} | |
| .credit-def{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-60);background:var(--white);border:1px solid var(--card-border);border-radius:var(--r-pill);padding:6px 16px;margin-bottom:36px;} | |
| .credit-def .dot{width:7px;height:7px;border-radius:50%;background:var(--purple);flex-shrink:0;} | |
| /* BILLING TOGGLE */ | |
| .billing-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:44px;} | |
| .blabel{font-size:14px;color:var(--ink-60);cursor:pointer;font-weight:500;} | |
| .blabel.active{color:var(--ink);font-weight:600;} | |
| .btoggle{position:relative;width:42px;height:23px;cursor:pointer;} | |
| .btoggle input{opacity:0;width:0;height:0;} | |
| .bslider{position:absolute;inset:0;background:var(--teal);border-radius:var(--r-pill);transition:background .2s;} | |
| .bslider::before{content:'';position:absolute;width:17px;height:17px;left:3px;top:3px;background:var(--white);border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.15);} | |
| .btoggle input:checked + .bslider::before{transform:translateX(19px);} | |
| .save-badge{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green-text);background:var(--green);border-radius:var(--r-pill);padding:3px 9px;} | |
| /* SLIDER */ | |
| .slider-wrap{max-width:660px;margin:0 auto 52px;padding:0 20px;} | |
| .slider-section{padding:32px 36px;background:var(--white);border:1px solid var(--card-border);border-radius:var(--r-card);text-align:center;} | |
| .slider-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);margin-bottom:8px;} | |
| .slider-price-display{font-size:52px;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1;margin-bottom:4px;} | |
| .slider-price-display span{font-size:20px;font-weight:500;color:var(--ink-60);} | |
| .slider-credits-display{font-size:15px;color:var(--ink-60);margin-bottom:24px;} | |
| .slider-credits-display strong{color:var(--ink);font-weight:600;} | |
| input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:linear-gradient(to right,var(--teal) 0%,var(--teal) var(--pct,35%),var(--card-border) var(--pct,35%),var(--card-border) 100%);border-radius:var(--r-pill);outline:none;cursor:pointer;margin-bottom:10px;} | |
| input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--white);border:3px solid var(--teal-dark);box-shadow:0 2px 8px rgba(0,0,0,.12);cursor:pointer;} | |
| input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--white);border:3px solid var(--teal-dark);cursor:pointer;} | |
| .slider-ticks{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-30);padding:0 2px;} | |
| .slider-breakdown{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;justify-content:center;} | |
| .breakdown-pill{display:flex;align-items:center;gap:7px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-pill);padding:7px 14px;font-size:13px;font-weight:500;} | |
| .breakdown-pill .num{font-weight:700;color:var(--teal-deep);} | |
| /* PLANS GRID */ | |
| .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1360px;margin:0 auto;padding:0 24px 60px;} | |
| .card{background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:var(--r-card);padding:24px 18px 28px;display:flex;flex-direction:column;position:relative;transition:border-color .2s,box-shadow .2s;} | |
| .card:hover{border-color:var(--teal-dark);box-shadow:0 8px 32px rgba(0,120,138,.1);} | |
| .card.popular{background:var(--white);border-color:var(--purple);box-shadow:0 8px 40px rgba(156,90,238,.12);} | |
| .card.free-card{background:var(--white);border:1.5px dashed var(--card-border);} | |
| .card.enterprise-card{background:var(--ink);border-color:var(--ink);} | |
| .card.enterprise-card:hover{border-color:var(--ink);box-shadow:0 8px 32px rgba(0,24,25,.2);} | |
| .pop-badge,.free-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 14px;border-radius:var(--r-pill);white-space:nowrap;} | |
| .pop-badge{background:var(--purple);color:#fff;} | |
| .free-badge{background:var(--green);color:var(--green-text);} | |
| .plan-name{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);margin-bottom:12px;} | |
| .card.popular .plan-name{color:var(--purple);} | |
| .card.free-card .plan-name{color:var(--green-text);} | |
| .card.enterprise-card .plan-name{color:rgba(255,255,255,0.5);} | |
| .credit-vol{font-size:38px;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1;margin-bottom:2px;} | |
| .credit-unit{font-size:13px;color:var(--ink-60);margin-bottom:14px;} | |
| .price-block{display:flex;align-items:center;gap:6px;background:var(--ink-10);border:1px solid var(--card-border);border-radius:10px;padding:9px 12px;margin-bottom:16px;} | |
| .price-amount{font-size:20px;font-weight:700;color:var(--ink);} | |
| .price-per{font-size:13px;color:var(--ink-60);} | |
| .per-credit{font-size:11px;color:var(--ink-60);margin-left:auto;} | |
| /* Enterprise custom price block */ | |
| .enterprise-price{margin-bottom:16px;} | |
| .enterprise-price-text{font-size:28px;font-weight:700;color:#fff;line-height:1.1;margin-bottom:4px;} | |
| .enterprise-price-sub{font-size:13px;color:rgba(255,255,255,0.55);} | |
| .cta{display:block;width:100%;padding:11px;border-radius:var(--r-btn);font-size:14px;font-weight:600;text-align:center;cursor:pointer;border:none;margin-bottom:20px;text-decoration:none;transition:opacity .15s;} | |
| .cta:hover{opacity:.85;} | |
| .cta-ghost{background:var(--white);color:var(--ink);border:1.5px solid var(--card-border);} | |
| .cta-free{background:var(--green);color:var(--green-text);} | |
| .cta-primary{background:var(--teal);color:var(--ink);box-shadow:0 4px 16px rgba(90,216,232,.3);} | |
| .cta-enterprise{background:var(--teal);color:var(--ink);box-shadow:0 4px 20px rgba(154,237,247,.25);} | |
| hr.div{border:none;border-top:1px solid var(--card-border);margin-bottom:16px;} | |
| .card.enterprise-card hr.div{border-top-color:rgba(255,255,255,0.1);} | |
| .use-label,.feat-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-30);margin-bottom:10px;} | |
| .card.enterprise-card .use-label,.card.enterprise-card .feat-label{color:rgba(255,255,255,0.3);} | |
| .use-cases{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;} | |
| .use-case{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-60);} | |
| .use-case .ico{font-size:13px;flex-shrink:0;width:18px;text-align:center;} | |
| .feats{list-style:none;display:flex;flex-direction:column;gap:7px;} | |
| .feats li{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--ink-60);} | |
| .feats li.on{color:var(--ink);} | |
| .card.enterprise-card .feats li{color:rgba(255,255,255,0.5);} | |
| .card.enterprise-card .feats li.on{color:#fff;} | |
| .feats li .ck{color:var(--teal-deep);flex-shrink:0;margin-top:1px;font-size:11px;} | |
| .card.enterprise-card .feats li .ck{color:var(--teal);} | |
| .feats li .ck-off{color:var(--ink-30);flex-shrink:0;margin-top:1px;font-size:11px;} | |
| /* EXPLAINER */ | |
| .explainer{max-width:1360px;margin:0 auto;padding:0 24px 52px;} | |
| .explainer-inner{background:var(--white);border:1px solid var(--card-border);border-radius:var(--r-card);padding:22px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} | |
| .exp-col{display:flex;flex-direction:column;gap:7px;} | |
| .exp-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);} | |
| .exp-items{display:flex;flex-direction:column;gap:5px;} | |
| .exp-item{font-size:13px;color:var(--ink-60);display:flex;align-items:center;gap:8px;} | |
| .exp-item::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--teal-dark);flex-shrink:0;} | |
| /* FOOTER */ | |
| footer{text-align:center;font-size:13px;color:var(--ink-60);padding:20px 24px 48px;border-top:1px solid var(--card-border);background:var(--white);margin-top:0;} | |
| footer a{color:var(--purple);text-decoration:none;} | |
| /* RESPONSIVE */ | |
| @media(max-width:1100px){ | |
| .plans{grid-template-columns:repeat(2,1fr);max-width:700px;} | |
| .explainer-inner{grid-template-columns:repeat(2,1fr);} | |
| } | |
| @media(max-width:600px){ | |
| nav{padding:14px 20px;} | |
| .plans{grid-template-columns:1fr;max-width:420px;} | |
| .explainer-inner{grid-template-columns:1fr;} | |
| .slider-section{padding:24px 18px;} | |
| .card.popular{order:-1;} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav> | |
| <a href="#" class="logo"> | |
| <div class="logo-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="#001819" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/> | |
| </svg> | |
| </div> | |
| Juma | |
| </a> | |
| <a href="#" class="nav-cta">Start for Free</a> | |
| </nav> | |
| <section class="hero"> | |
| <span class="eyebrow">Simple, transparent pricing</span> | |
| <h1>Pay for what you use.<br><em>Invite everyone.</em></h1> | |
| <p>One workspace. Unlimited seats. Credits that scale with your real usage — no per-seat fees, ever.</p> | |
| <div class="credit-def"> | |
| <span class="dot"></span> | |
| <strong>1 credit = 1 AI action</strong> — one generation, one reply, one workflow run | |
| </div> | |
| <div class="billing-row"> | |
| <span class="blabel active" id="lbl-mo">Monthly</span> | |
| <label class="btoggle"> | |
| <input type="checkbox" id="billing-tog" onchange="switchBilling(this)"/> | |
| <span class="bslider"></span> | |
| </label> | |
| <span class="blabel" id="lbl-yr">Annual <span class="save-badge">Save 17%</span></span> | |
| </div> | |
| </section> | |
| <div class="slider-wrap"> | |
| <div class="slider-section"> | |
| <div class="slider-label">How many credits do you need?</div> | |
| <div class="slider-price-display" id="disp-price">$49<span>/mo</span></div> | |
| <div class="slider-credits-display"> | |
| <strong id="disp-credits">5,100</strong> credits / month · <span id="disp-ppc">~$0.0096 / credit</span> | |
| </div> | |
| <input type="range" id="credit-slider" min="0" max="20" value="7" oninput="onSlider(this)" style="--pct:35%"/> | |
| <div class="slider-ticks"> | |
| <span>Free</span><span>$19</span><span>$49</span><span>$99</span> | |
| <span>$199</span><span>$399</span><span>$599</span><span>$799</span><span>$1,000</span> | |
| </div> | |
| <div class="slider-breakdown"> | |
| <div class="breakdown-pill"><span>✍️</span><span class="num" id="bp-drafts">510</span> AI drafts</div> | |
| <div class="breakdown-pill"><span>💬</span><span class="num" id="bp-replies">1,020</span> chatbot replies</div> | |
| <div class="breakdown-pill"><span>⚡</span><span class="num" id="bp-runs">5,100</span> workflow runs</div> | |
| </div> | |
| </div> | |
| </div> | |
| <section class="plans"> | |
| <!-- FREE --> | |
| <div class="card free-card"> | |
| <div class="free-badge">Free forever</div> | |
| <div class="plan-name">Free</div> | |
| <div class="credit-vol">200</div> | |
| <div class="credit-unit">credits / month</div> | |
| <div class="price-block"> | |
| <span class="price-amount">$0</span> | |
| <span class="price-per">/mo</span> | |
| <span class="per-credit">no credit card</span> | |
| </div> | |
| <a href="#" class="cta cta-free">Get started free</a> | |
| <hr class="div"/> | |
| <div class="use-label">Good for</div> | |
| <div class="use-cases"> | |
| <div class="use-case"><span class="ico">✍️</span>~20 AI content pieces / mo</div> | |
| <div class="use-case"><span class="ico">💬</span>~40 chatbot replies / mo</div> | |
| <div class="use-case"><span class="ico">⚡</span>~200 workflow runs / mo</div> | |
| </div> | |
| <hr class="div"/> | |
| <div class="feat-label">What's included</div> | |
| <ul class="feats"> | |
| <li class="on"><span class="ck">✓</span>Unlimited workspace seats</li> | |
| <li class="on"><span class="ck">✓</span>Core AI features</li> | |
| <li class="on"><span class="ck">✓</span>Usage dashboard</li> | |
| <li class="on"><span class="ck">✓</span>Zero data retention</li> | |
| <li><span class="ck-off">✓</span>Credit top-ups</li> | |
| <li><span class="ck-off">✓</span>Priority support</li> | |
| <li><span class="ck-off">✓</span>No rate limits</li> | |
| </ul> | |
| </div> | |
| <!-- STARTER --> | |
| <div class="card"> | |
| <div class="plan-name">Starter</div> | |
| <div class="credit-vol" id="cv-s">2,000</div> | |
| <div class="credit-unit">credits / month</div> | |
| <div class="price-block"> | |
| <span class="price-amount" id="pa-s">$19</span> | |
| <span class="price-per">/mo</span> | |
| <span class="per-credit" id="pc-s">~$0.0095/cr</span> | |
| </div> | |
| <a href="#" class="cta cta-ghost">Get started</a> | |
| <hr class="div"/> | |
| <div class="use-label">Good for</div> | |
| <div class="use-cases"> | |
| <div class="use-case"><span class="ico">✍️</span>~200 AI content pieces / mo</div> | |
| <div class="use-case"><span class="ico">💬</span>~400 chatbot replies / mo</div> | |
| <div class="use-case"><span class="ico">⚡</span>~2,000 workflow runs / mo</div> | |
| </div> | |
| <hr class="div"/> | |
| <div class="feat-label">What's included</div> | |
| <ul class="feats"> | |
| <li class="on"><span class="ck">✓</span>Unlimited workspace seats</li> | |
| <li class="on"><span class="ck">✓</span>All AI models & features</li> | |
| <li class="on"><span class="ck">✓</span>Usage dashboard</li> | |
| <li class="on"><span class="ck">✓</span>Zero data retention</li> | |
| <li class="on"><span class="ck">✓</span>Credit top-ups anytime</li> | |
| <li class="on"><span class="ck">✓</span>Priority support</li> | |
| <li class="on"><span class="ck">✓</span>No rate limits</li> | |
| </ul> | |
| </div> | |
| <!-- PRO --> | |
| <div class="card popular"> | |
| <div class="pop-badge">Most popular</div> | |
| <div class="plan-name">Pro</div> | |
| <div class="credit-vol" id="cv-p">15,000</div> | |
| <div class="credit-unit">credits / month</div> | |
| <div class="price-block"> | |
| <span class="price-amount" id="pa-p">$99</span> | |
| <span class="price-per">/mo</span> | |
| <span class="per-credit" id="pc-p">~$0.0066/cr</span> | |
| </div> | |
| <a href="#" class="cta cta-primary">Get started</a> | |
| <hr class="div"/> | |
| <div class="use-label">Good for</div> | |
| <div class="use-cases"> | |
| <div class="use-case"><span class="ico">✍️</span>~1,500 AI content pieces / mo</div> | |
| <div class="use-case"><span class="ico">💬</span>~3,000 chatbot replies / mo</div> | |
| <div class="use-case"><span class="ico">⚡</span>~15,000 workflow runs / mo</div> | |
| </div> | |
| <hr class="div"/> | |
| <div class="feat-label">Everything in Starter, plus</div> | |
| <ul class="feats"> | |
| <li class="on"><span class="ck">✓</span>Unlimited workspace seats</li> | |
| <li class="on"><span class="ck">✓</span>All AI models & features</li> | |
| <li class="on"><span class="ck">✓</span>Usage dashboard</li> | |
| <li class="on"><span class="ck">✓</span>Zero data retention</li> | |
| <li class="on"><span class="ck">✓</span>Credit top-ups anytime</li> | |
| <li class="on"><span class="ck">✓</span>Priority support</li> | |
| <li class="on"><span class="ck">✓</span>No rate limits</li> | |
| </ul> | |
| </div> | |
| <!-- ENTERPRISE --> | |
| <div class="card enterprise-card"> | |
| <div class="plan-name">Enterprise</div> | |
| <div class="enterprise-price"> | |
| <div class="enterprise-price-text">Custom pricing</div> | |
| <div class="enterprise-price-sub">Volume credits · flexible billing</div> | |
| </div> | |
| <a href="#" class="cta cta-enterprise">Contact sales</a> | |
| <hr class="div"/> | |
| <div class="use-label">Built for</div> | |
| <div class="use-cases" style="color:rgba(255,255,255,0.55);"> | |
| <div class="use-case" style="color:rgba(255,255,255,0.55);"><span class="ico">🏢</span>Large orgs & agencies</div> | |
| <div class="use-case" style="color:rgba(255,255,255,0.55);"><span class="ico">🔒</span>Compliance & security teams</div> | |
| <div class="use-case" style="color:rgba(255,255,255,0.55);"><span class="ico">⚙️</span>Custom infrastructure needs</div> | |
| </div> | |
| <hr class="div"/> | |
| <div class="feat-label">Everything in Pro, plus</div> | |
| <ul class="feats"> | |
| <li class="on"><span class="ck">✓</span>Unlimited workspace seats</li> | |
| <li class="on"><span class="ck">✓</span>All AI models & features</li> | |
| <li class="on"><span class="ck">✓</span>Usage dashboard</li> | |
| <li class="on"><span class="ck">✓</span>Zero data retention</li> | |
| <li class="on"><span class="ck">✓</span>Priority support</li> | |
| <li class="on"><span class="ck">✓</span>No rate limits</li> | |
| <li class="on"><span class="ck">✓</span>SSO / SAML</li> | |
| <li class="on"><span class="ck">✓</span>Private deployment</li> | |
| <li class="on"><span class="ck">✓</span>Platform administration</li> | |
| <li class="on"><span class="ck">✓</span>Custom contract & SLA</li> | |
| </ul> | |
| </div> | |
| </section> | |
| <div class="explainer"> | |
| <div class="explainer-inner"> | |
| <div class="exp-col"> | |
| <div class="exp-title">Free — 200 credits</div> | |
| <div class="exp-items"> | |
| <div class="exp-item">~20 long-form AI drafts</div> | |
| <div class="exp-item">~40 customer support replies</div> | |
| <div class="exp-item">~200 simple automations</div> | |
| <div class="exp-item">No credit card required</div> | |
| </div> | |
| </div> | |
| <div class="exp-col"> | |
| <div class="exp-title">Starter — 2,000 credits</div> | |
| <div class="exp-items"> | |
| <div class="exp-item">~200 long-form AI drafts</div> | |
| <div class="exp-item">~400 customer support replies</div> | |
| <div class="exp-item">~2,000 simple automations</div> | |
| <div class="exp-item">Solo teams & side projects</div> | |
| </div> | |
| </div> | |
| <div class="exp-col"> | |
| <div class="exp-title">Pro — 15,000 credits</div> | |
| <div class="exp-items"> | |
| <div class="exp-item">~1,500 long-form AI drafts</div> | |
| <div class="exp-item">~3,000 customer support replies</div> | |
| <div class="exp-item">~15,000 simple automations</div> | |
| <div class="exp-item">Growing teams (5–20 people)</div> | |
| </div> | |
| </div> | |
| <div class="exp-col"> | |
| <div class="exp-title">Enterprise — Custom volume</div> | |
| <div class="exp-items"> | |
| <div class="exp-item">Private deployment options</div> | |
| <div class="exp-item">Platform administration tools</div> | |
| <div class="exp-item">Dedicated account manager</div> | |
| <div class="exp-item">Custom SLA & compliance</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| Free plan includes 200 credits/month — no credit card needed. · | |
| All plans include <strong>zero data retention</strong>. · | |
| <a href="#">Talk to us</a> · <a href="#">Full feature comparison</a> | |
| </footer> | |
| <script> | |
| const STEPS = [ | |
| {price:0, credits:200, label:'Free'}, | |
| {price:1, credits:300, label:'$1'}, | |
| {price:2, credits:410, label:'$2'}, | |
| {price:5, credits:720, label:'$5'}, | |
| {price:10, credits:1250, label:'$10'}, | |
| {price:19, credits:2000, label:'$19'}, | |
| {price:29, credits:3050, label:'$29'}, | |
| {price:49, credits:5100, label:'$49'}, | |
| {price:79, credits:8300, label:'$79'}, | |
| {price:99, credits:10500, label:'$99'}, | |
| {price:149, credits:16000, label:'$149'}, | |
| {price:199, credits:22000, label:'$199'}, | |
| {price:299, credits:34000, label:'$299'}, | |
| {price:399, credits:47000, label:'$399'}, | |
| {price:499, credits:60000, label:'$499'}, | |
| {price:599, credits:74000, label:'$599'}, | |
| {price:699, credits:89000, label:'$699'}, | |
| {price:799, credits:104000, label:'$799'}, | |
| {price:899, credits:120000, label:'$899'}, | |
| {price:999, credits:137000, label:'$999'}, | |
| {price:1000, credits:138000, label:'$1,000'} | |
| ]; | |
| const plans = { | |
| monthly:{ | |
| s: {price:'$19', credits:'2,000', pc:'~$0.0095/cr'}, | |
| p: {price:'$99', credits:'15,000',pc:'~$0.0066/cr'} | |
| }, | |
| annual:{ | |
| s: {price:'$16', credits:'2,000', pc:'~$0.0080/cr'}, | |
| p: {price:'$82', credits:'15,000',pc:'~$0.0055/cr'} | |
| } | |
| }; | |
| function fmt(n){return n.toLocaleString();} | |
| function onSlider(el){ | |
| const idx=parseInt(el.value); | |
| const s=STEPS[idx]; | |
| const pct=(idx/(STEPS.length-1)*100).toFixed(1)+'%'; | |
| el.style.setProperty('--pct',pct); | |
| document.getElementById('disp-price').innerHTML= | |
| s.price===0?'Free':('$'+s.price+'<span>/mo</span>'); | |
| document.getElementById('disp-credits').textContent=fmt(s.credits); | |
| document.getElementById('disp-ppc').textContent= | |
| s.price>0?('~$'+(s.price/s.credits).toFixed(4)+' / credit'):'included free'; | |
| document.getElementById('bp-drafts').textContent=fmt(Math.round(s.credits/10)); | |
| document.getElementById('bp-replies').textContent=fmt(Math.round(s.credits/5)); | |
| document.getElementById('bp-runs').textContent=fmt(s.credits); | |
| } | |
| function switchBilling(el){ | |
| const d=el.checked?plans.annual:plans.monthly; | |
| document.getElementById('lbl-mo').classList.toggle('active',!el.checked); | |
| document.getElementById('lbl-yr').classList.toggle('active',el.checked); | |
| ['s','p'].forEach(k=>{ | |
| document.getElementById('pa-'+k).textContent=d[k].price; | |
| document.getElementById('cv-'+k).textContent=d[k].credits; | |
| document.getElementById('pc-'+k).textContent=d[k].pc; | |
| }); | |
| } | |
| window.addEventListener('DOMContentLoaded',()=>{ | |
| const sl=document.getElementById('credit-slider'); | |
| sl.value=7; | |
| onSlider(sl); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment