| 1 |
{% extends "base.html" %} |
| 2 |
|
| 3 |
{% block title %}Pricing Calculator - Makenot.work{% endblock %} |
| 4 |
|
| 5 |
{% block body_attrs %} class="centered-page"{% endblock %} |
| 6 |
|
| 7 |
{% block content %} |
| 8 |
<div class="landing-hero pricing-page"> |
| 9 |
<h1 class="page-title">Pricing Calculator<span class="dot">.</span></h1> |
| 10 |
<p class="tagline">See what you keep on every sale<span class="dot">.</span></p> |
| 11 |
|
| 12 |
{# The calculator recomputes server-side: on revenue/tier change HTMX |
| 13 |
GETs /pricing/compare and swaps #comparison-panel. No fee math runs |
| 14 |
in the browser — it all lives in `pricing_comparison.rs`, sourced |
| 15 |
from `assumptions.toml`. The inputs sit outside the swap target so |
| 16 |
focus and the typed value survive each recompute. #} |
| 17 |
<div id="pricing-calculator" |
| 18 |
hx-get="/pricing/compare" |
| 19 |
hx-trigger="input changed delay:300ms from:#revenue, change from:input[name='tier']" |
| 20 |
hx-include="#revenue, input[name='tier']:checked" |
| 21 |
hx-target="#comparison-panel" |
| 22 |
hx-swap="innerHTML"> |
| 23 |
|
| 24 |
<div class="tier-section"> |
| 25 |
<h2 class="section-label">Monthly revenue</h2> |
| 26 |
<div class="pricing-input-wrap"> |
| 27 |
<span class="pricing-currency">$</span> |
| 28 |
<input type="number" id="revenue" name="revenue" class="pricing-input" value="1000" min="0" max="999999" step="50" aria-label="Monthly revenue in dollars"> |
| 29 |
<span class="pricing-period">/mo</span> |
| 30 |
</div> |
| 31 |
</div> |
| 32 |
|
| 33 |
<div class="tier-section"> |
| 34 |
<h2 class="section-label">Your content tier</h2> |
| 35 |
<p class="tier-intro">Every tier is the complete platform: profile, project pages, forum, discovery, memberships, analytics, full data export. The tier picks the file-size envelope, not the feature set.</p> |
| 36 |
<div class="tier-selector" role="radiogroup" aria-label="Content tier"> |
| 37 |
<label class="tier-card tier-option"> |
| 38 |
<input type="radio" name="tier" value="{{ tier_prices.basic_std }}" checked> |
| 39 |
<div class="tier-name">Basic</div> |
| 40 |
<div class="tier-price">${{ tier_prices.basic_std }}/mo</div> |
| 41 |
<div class="tier-desc">{{ tier_prices.basic_per_file }}/file, {{ tier_prices.basic_total }} total. Fits text, blogs, newsletters.</div> |
| 42 |
</label> |
| 43 |
<label class="tier-card tier-option"> |
| 44 |
<input type="radio" name="tier" value="{{ tier_prices.small_files_std }}"> |
| 45 |
<div class="tier-name">Small Files</div> |
| 46 |
<div class="tier-price">${{ tier_prices.small_files_std }}/mo</div> |
| 47 |
<div class="tier-desc">{{ tier_prices.small_files_per_file }}/file, {{ tier_prices.small_files_total }} total. Fits audio, plugins, binaries.</div> |
| 48 |
</label> |
| 49 |
<label class="tier-card tier-option"> |
| 50 |
<input type="radio" name="tier" value="{{ tier_prices.big_files_std }}"> |
| 51 |
<div class="tier-name">Big Files</div> |
| 52 |
<div class="tier-price">${{ tier_prices.big_files_std }}/mo</div> |
| 53 |
<div class="tier-desc">{{ tier_prices.big_files_per_file }}/file, {{ tier_prices.big_files_total }} total. Fits video, games, large software.</div> |
| 54 |
</label> |
| 55 |
<label class="tier-card tier-option"> |
| 56 |
<input type="radio" name="tier" value="{{ tier_prices.everything_std }}"> |
| 57 |
<div class="tier-name">Everything</div> |
| 58 |
<div class="tier-price">${{ tier_prices.everything_std }}/mo</div> |
| 59 |
<div class="tier-desc">Big Files envelope plus first access to high-cost features as they ship.</div> |
| 60 |
</label> |
| 61 |
</div> |
| 62 |
</div> |
| 63 |
|
| 64 |
<div id="comparison-panel"> |
| 65 |
{% include "partials/pricing_comparison.html" %} |
| 66 |
</div> |
| 67 |
</div> |
| 68 |
|
| 69 |
<div class="landing-cta"> |
| 70 |
<a class="btn-primary btn--large" href="/join">Join the Alpha</a> |
| 71 |
</div> |
| 72 |
|
| 73 |
<div class="secondary-links"> |
| 74 |
<a href="/">Home</a> |
| 75 |
<a href="/discover">Browse as guest</a> |
| 76 |
</div> |
| 77 |
</div> |
| 78 |
{% endblock %} |
| 79 |
|