Calculator Paywall 🔒

A fully functional scientific calculator with a twist: every time you press "=", a paywall modal blocks the result.

The user picks one of three "unlock" tiers — Premium (fake payment flow with progress bar and stage transitions), Watch an Ad (5-second countdown banner with skip button, Indonesian style), or Free Trial (3 free calculations, then the option disables itself).

Built as a satire on modern SaaS UX patterns — feature gates, artificial friction, and dark patterns disguised as choice. The disclaimer in the modal footer reminds users they can always close the modal to skip.

index.html    # Calculator UI + 3 modals (paywall, ad player, payment)
style.css     # Dark theme · gradient accents · animated transitions
script.js     # Expression parser · safe evaluator · state machine · paywall flow

-> Safe expression evaluator (regex-validated, no eval() of user input)
-> State machine for pending results (locked until unlocked)
-> Non-blocking modal flows using setInterval for countdowns
-> Toast notifications for unlock confirmations
-> Persistent trial counter via in-memory state

// Pre-validate first so we don't show paywall on syntax errors
function evaluateExpr() {
  if (state.expr === '') return;
  let result;
  try {
    result = evaluate(state.expr);
    if (!isFinite(result)) { setError('Math Error'); return; }
  } catch { setError('Syntax Error'); return; }

  // Stash result and show paywall — actual reveal waits for unlock
  pending.result = result;
  pending.exprDisplay = state.exprDisplay;
  showPaywall();
}

function evaluate(expr) {
  // Whitelist: only digits, operators, parens, dot
  if (!/^[\d+\-*/().%^ ]+$/.test(expr)) throw new Error('bad chars');
  // Convert ^ to ** for JavaScript exponentiation
  const js = expr.replace(/\^/g, '**');
  return Function(`"use strict"; return (${js});`)();
}

function unlockWithAd() {
  const TOTAL = 5000, TICK = 100;
  let elapsed = 0;
  paywall.adInterval = setInterval(() => {
    elapsed += TICK;
    fill.style.width = (elapsed / TOTAL) * 100 + '%';
    counter.textContent = Math.ceil((TOTAL - elapsed) / 1000);
    if (elapsed >= TOTAL) {
      clearInterval(paywall.adInterval);
      skipBtn.disabled = false;
    }
  }, TICK);
}

# Clone or download the three files
cd kalkulator-web/
ls
# index.html  style.css  script.js

# No build step. No npm install. Just open the file.
start index.html       # Windows
open index.html        # macOS
xdg-open index.html    # Linux

# Type any expression: 2 + 2
# Press = (or Enter)
# See the paywall
# Pick a tier — or close the modal to give up