121 lines
5.5 KiB
HTML
121 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- retire-planner v1 -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="theme-color" content="#f7f9fc">
|
||
<title>Retire Planner — Canadian retirement, modelled properly</title>
|
||
<meta name="description" content="A Canadian retirement calculator with real CPP/OAS/GIS/RRIF mechanics and live 2026 tax rates. 100% client-side — answers never leave your browser.">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<header class="hdr">
|
||
<div class="hdr-in">
|
||
<span class="logo">🍁 <b>Retire Planner</b></span>
|
||
<span class="pill" title="No server, no tracking, no accounts">🔒 100% client-side — answers never leave your browser</span>
|
||
<button id="btn-restart" class="ghost" hidden>Start over</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- INTRO -->
|
||
<section id="scr-intro" class="scr">
|
||
<h1>Will you actually run out of money?</h1>
|
||
<p class="lede">Most Canadian retirement calculators stop at “your RRSP grows at 6%”. This one models <b>real CPP/OAS/GIS/RRIF mechanics</b>, provincial taxes fetched live, and the tax cliff most planners won't show you.</p>
|
||
<ul class="ticks">
|
||
<li>CPP early/late (−0.6%/mo before 65, +0.7% after), OAS deferral, clawback & GIS</li>
|
||
<li>Live 2026 federal + all 13 province/territory tax tables</li>
|
||
<li>RRIF minimums at 71, pension splitting, tax-smart drawdown</li>
|
||
<li>Couples: joint taxes, split pensions, household GIS</li>
|
||
</ul>
|
||
<p class="privacy">🔒 100% client-side — answers never leave your browser. No account, no tracking, nothing is sent anywhere.</p>
|
||
<button id="btn-begin" class="cta">Build my retirement plan →</button>
|
||
<p class="fine">~2 minutes. Works on one screen at a time; you can change anything later.</p>
|
||
</section>
|
||
|
||
<!-- QUESTIONNAIRE -->
|
||
<section id="scr-quiz" class="scr" hidden>
|
||
<div class="quiz-wrap">
|
||
<div class="quiz-main">
|
||
<div class="prog"><div id="prog-bar"></div></div>
|
||
<div class="step-nav">
|
||
<button id="btn-back" class="ghost">← Back</button>
|
||
<span id="step-count" class="step-count"></span>
|
||
</div>
|
||
<div id="step-body"></div>
|
||
<button id="btn-next" class="cta">Next →</button>
|
||
</div>
|
||
<aside class="panel" id="panel">
|
||
<div class="panel-h">Your plan so far</div>
|
||
<div id="panel-chips" class="chips"></div>
|
||
<div id="panel-insight" class="insight"></div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<div id="scrim" hidden></div>
|
||
|
||
<!-- RESULTS -->
|
||
<section id="scr-results" class="scr" hidden>
|
||
<div id="vision-card" class="vision"></div>
|
||
<h2 id="verdict-h">Your plan, in one line</h2>
|
||
<p id="verdict" class="verdict"></p>
|
||
|
||
<div class="cards" id="gap-cards"></div>
|
||
|
||
<h3>Will it last? Projected savings</h3>
|
||
<p class="cap">Total portfolio (RRSP + TFSA + non-registered), in today's dollars. Shaded: money running out.</p>
|
||
<div id="g1" class="chartbox"></div>
|
||
|
||
<h3>Where retirement income comes from</h3>
|
||
<p class="cap">CPP, OAS, GIS and what you must withdraw from savings — stacked, after-tax view.</p>
|
||
<div id="g2" class="chartbox"></div>
|
||
|
||
<h3>Spending vs. what you'll actually have</h3>
|
||
<p class="cap">Annual cash in (income after tax & clawback, plus withdrawals) vs. planned spending.</p>
|
||
<div id="g3" class="chartbox"></div>
|
||
|
||
<h3>Four futures, one number</h3>
|
||
<p class="cap">Sustainable annual spending that lasts to <span id="lifeexp-lbl">95</span> under each scenario.</p>
|
||
<div id="g4" class="chartbox"></div>
|
||
<p id="g4-note" class="cap"></p>
|
||
|
||
<details class="whatif" id="whatif">
|
||
<summary><b>Try a what-if</b> — move a slider, watch the plan update</summary>
|
||
<div class="wi-grid">
|
||
<label>Annual spending <output id="wi-spend-o"></output>
|
||
<input type="range" id="wi-spend" min="20000" max="150000" step="1000"></label>
|
||
<label>Monthly savings <output id="wi-ctrb-o"></output>
|
||
<input type="range" id="wi-ctrb" min="0" max="5000" step="50"></label>
|
||
<label>Retirement age <output id="wi-ret-o"></output>
|
||
<input type="range" id="wi-ret" min="55" max="72" step="1"></label>
|
||
<label>CPP starts at <output id="wi-cpp-o"></output>
|
||
<input type="range" id="wi-cpp" min="60" max="70" step="1"></label>
|
||
</div>
|
||
</details>
|
||
|
||
<details class="yearly">
|
||
<summary>Year-by-year detail (<span id="yr-n">0</span> years)</summary>
|
||
<div class="tbl-wrap"><table id="yr-table"></table></div>
|
||
</details>
|
||
|
||
<div class="disclaimer">
|
||
<p><b>Estimates only — not financial advice.</b> Simplified model: GIS uses a simplified 50% phase-out; Quebec shown with the 16.5% federal abatement (QPP and Quebec payroll taxes not modelled); DB pensions not modelled; returns are constant real rates; Ontario surtax modelled on base tax.</p>
|
||
<p class="stamp" id="stamp">tax rates 2026</p>
|
||
<p class="privacy">🔒 100% client-side — answers never leave your browser. Your answers are saved only in this browser (localStorage).</p>
|
||
<div class="btn-row">
|
||
<button id="btn-print" class="ghost">🖨 Print / save PDF</button>
|
||
<button id="btn-share" class="ghost">🔗 Copy link with my answers</button>
|
||
<button id="btn-edit" class="ghost">✎ Edit answers</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="engine/canada.js"></script>
|
||
<script src="engine/engine.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|