Advanced Retirement & Lifestyle Calculator<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n <style>\r\n @media (prefers-color-scheme: light) {\r\n body {\r\n background-color: #0f172a;\r\n color: #e2e8f0;\r\n }\r\n }\r\n body {\r\n background-color: #0f172a;\r\n color: #e2e8f0;\r\n }\r\n .currency-input {\r\n color: #0f172a;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-900 text-slate-200 min-h-screen py-8 px-4\">\r\n <div class=\"max-w-7xl mx-auto\">\r\n <header class=\"text-center mb-8\">\r\n <h1 class=\"text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500 mb-2\">\r\n Advanced Retirement & Lifestyle Calculator\r\n <\/h1>\r\n <p class=\"text-slate-400\">Calculate your financial future with inflation-adjusted projections<\/p>\r\n <\/header>\r\n\r\n \r\n <div class=\"bg-gradient-to-br from-cyan-900\/30 to-blue-900\/30 rounded-xl p-6 mb-8 border border-cyan-700\/30\">\r\n <div class=\"flex items-start gap-3\">\r\n <div class=\"flex-shrink-0 mt-1\">\r\n <svg class=\"w-6 h-6 text-cyan-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-lg font-semibold text-cyan-300 mb-2\">How This Calculator Works<\/h3>\r\n <div class=\"text-sm text-slate-300 space-y-2\">\r\n <p>\r\n <strong class=\"text-cyan-400\">Unlike basic calculators<\/strong>, this tool accounts for realistic growth patterns:\r\n <\/p>\r\n <ul class=\"list-disc list-inside space-y-1 ml-2\">\r\n <li><strong>Progressive Savings:<\/strong> Assumes you'll save more each year as your income grows<\/li>\r\n <li><strong>Inflation Adjustment:<\/strong> Your retirement income needs will increase with inflation<\/li>\r\n <li><strong>Year-by-Year Analysis:<\/strong> See exactly when and if your money runs out<\/li>\r\n <li><strong>Gap Solver:<\/strong> If you're short, we'll calculate exactly how much more to save<\/li>\r\n <\/ul>\r\n <p class=\"pt-2 text-slate-400 italic\">\r\n 💡 Tip: The \"Annual Contribution Increase %\" is key\u2014it reflects that as you earn more over your career, you'll likely save more too.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-gradient-to-br from-amber-900\/30 to-orange-900\/30 rounded-xl p-5 mb-8 border border-amber-700\/40\">\r\n <div class=\"flex items-start gap-3\">\r\n <div class=\"flex-shrink-0 mt-1\">\r\n <svg class=\"w-6 h-6 text-amber-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"flex-1\">\r\n <h3 class=\"text-lg font-semibold text-amber-300 mb-2\">⚠️ Important Tax Considerations<\/h3>\r\n <div class=\"text-sm text-slate-300 space-y-2\">\r\n <p>\r\n <strong class=\"text-amber-400\">This calculator does NOT account for taxes.<\/strong> Your actual spending power may be significantly affected by:\r\n <\/p>\r\n <ul class=\"list-disc list-inside space-y-1 ml-2 text-slate-400\">\r\n <li><strong>Income tax<\/strong> on pension withdrawals (25% tax-free lump sum in UK, then marginal rates)<\/li>\r\n <li><strong>Capital gains tax<\/strong> on investment growth in taxable accounts<\/li>\r\n <li><strong>Government pension taxation<\/strong> (State Pension is taxable income in UK)<\/li>\r\n <li><strong>Tax-advantaged accounts<\/strong> (ISAs in UK are tax-free, SIPPs\/401ks are tax-deferred)<\/li>\r\n <\/ul>\r\n <p class=\"pt-2 text-amber-300 font-medium\">\r\n 💼 Professional Advice: Consider consulting a financial advisor or tax specialist for a comprehensive retirement plan that accounts for your specific tax situation.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8\">\r\n \r\n <div class=\"bg-slate-800 rounded-xl p-6 shadow-2xl border border-slate-700\">\r\n <h2 class=\"text-2xl font-semibold mb-6 text-cyan-400\">Input Parameters<\/h2>\r\n <div class=\"space-y-4\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Currency<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">Select your preferred currency<\/p>\r\n <select id=\"currency\" onchange=\"updateCurrencyDisplay()\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <option value=\"GBP\" selected>🇬🇧 British Pound (GBP)<\/option>\r\n <option value=\"USD\">🇺🇸 US Dollar (USD)<\/option>\r\n <option value=\"EUR\">🇪🇺 Euro (EUR)<\/option>\r\n <option value=\"CAD\">🇨🇦 Canadian Dollar (CAD)<\/option>\r\n <option value=\"AUD\">🇦🇺 Australian Dollar (AUD)<\/option>\r\n <option value=\"JPY\">🇯🇵 Japanese Yen (JPY)<\/option>\r\n <option value=\"INR\">🇮🇳 Indian Rupee (INR)<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Current Age<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">How old are you right now?<\/p>\r\n <input type=\"number\" id=\"currentAge\" value=\"30\" min=\"18\" max=\"100\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Retirement Age<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">When do you plan to stop working?<\/p>\r\n <input type=\"number\" id=\"retirementAge\" value=\"60\" min=\"18\" max=\"100\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Life Expectancy<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">How long do you expect to live? (US avg: 77-80)<\/p>\r\n <input type=\"number\" id=\"lifeExpectancy\" value=\"90\" min=\"50\" max=\"120\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Current Savings Balance<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">Total in retirement accounts (401k, IRA, etc.)<\/p>\r\n <input type=\"text\" id=\"currentSavings\" value=\"\u00a340,000\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none currency-input\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Annual Savings Contribution<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">How much you save per year right now<\/p>\r\n <input type=\"text\" id=\"annualContribution\" value=\"\u00a38,000\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none currency-input\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Annual Contribution Increase %<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">As you earn more, you'll save more each year (e.g., 3%)<\/p>\r\n <input type=\"number\" id=\"contributionIncrease\" value=\"3\" step=\"0.1\" min=\"0\" max=\"20\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Pre-Retirement Return %<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">Expected annual investment return while working (stocks: 8-10%)<\/p>\r\n <input type=\"number\" id=\"preRetirementReturn\" value=\"9\" step=\"0.1\" min=\"0\" max=\"30\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Post-Retirement Return %<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">Lower return after retiring (conservative mix: 5-7%)<\/p>\r\n <input type=\"number\" id=\"postRetirementReturn\" value=\"6\" step=\"0.1\" min=\"0\" max=\"30\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Expected Inflation %<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">Cost of living increases over time (historical avg: 3%)<\/p>\r\n <input type=\"number\" id=\"inflation\" value=\"3\" step=\"0.1\" min=\"0\" max=\"20\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Desired Annual Income (Today's Pounds)<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">Lifestyle you want in retirement, in current purchasing power<\/p>\r\n <input type=\"text\" id=\"desiredIncome\" value=\"\u00a360,000\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none currency-input\">\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-6 pt-6 border-t border-slate-700\">\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <h3 class=\"text-lg font-semibold text-cyan-400\">Government Pension (Optional)<\/h3>\r\n <label class=\"flex items-center cursor-pointer\">\r\n <input type=\"checkbox\" id=\"hasPension\" onchange=\"togglePensionFields()\" class=\"mr-2\">\r\n <span class=\"text-sm text-slate-300\">Enable<\/span>\r\n <\/label>\r\n <\/div>\r\n \r\n <div id=\"pensionFields\" class=\"hidden grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Annual Pension Amount (Today's Value)<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">UK State Pension: ~\u00a311,500\/year, US Social Security: varies<\/p>\r\n <input type=\"text\" id=\"pensionAmount\" value=\"11500\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none currency-input\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Pension Start Age<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">UK: 66-67, US: 62-70 (full at 67)<\/p>\r\n <input type=\"number\" id=\"pensionStartAge\" value=\"67\" min=\"50\" max=\"75\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div class=\"md:col-span-2\">\r\n <label class=\"block text-sm font-medium mb-1\">Annual Pension Increase %<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">How pension adjusts each year: UK Triple Lock (2.5%+), US COLA (~2.5%), or 0% if fixed<\/p>\r\n <input type=\"number\" id=\"pensionIncrease\" value=\"2.5\" step=\"0.1\" min=\"0\" max=\"10\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <p class=\"text-xs text-slate-500 mt-1 italic\">\r\n 💡 Tip: Use inflation rate if pension is inflation-linked, lower if it has fixed increases, or 0% if frozen\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"calculate()\" \r\n class=\"w-full mt-6 px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-semibold rounded-lg shadow-lg transform transition hover:scale-105\">\r\n Calculate Retirement Plan\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-6\">\r\n <div class=\"bg-slate-800 rounded-xl p-6 shadow-2xl border border-slate-700\">\r\n <h2 class=\"text-2xl font-semibold mb-6 text-cyan-400\">Summary<\/h2>\r\n <div id=\"summaryCards\" class=\"space-y-4\">\r\n <div class=\"text-center py-8 text-slate-500\">\r\n Enter your parameters and click \"Calculate Retirement Plan\"\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"gapAnalysis\" class=\"bg-slate-800 rounded-xl p-6 shadow-2xl border border-slate-700 hidden\">\r\n <h2 class=\"text-2xl font-semibold mb-4 text-red-400\">⚠️ Funding Gap Detected<\/h2>\r\n <div id=\"gapContent\" class=\"space-y-2\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-800 rounded-xl p-6 shadow-2xl border border-slate-700 mb-8\">\r\n <h2 class=\"text-2xl font-semibold mb-4 text-cyan-400\">Balance Projection<\/h2>\r\n <div class=\"bg-slate-900 rounded-lg p-4\">\r\n <canvas id=\"balanceChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-800 rounded-xl p-6 shadow-2xl border border-slate-700\">\r\n <h2 class=\"text-2xl font-semibold mb-4 text-cyan-400\">Year-by-Year Breakdown<\/h2>\r\n <div class=\"overflow-x-auto\">\r\n <div class=\"bg-slate-900 rounded-lg overflow-hidden\">\r\n <table id=\"yearlyTable\" class=\"w-full text-sm\">\r\n <thead class=\"bg-slate-700 text-cyan-400\">\r\n <tr>\r\n <th class=\"px-4 py-3 text-left\">Age<\/th>\r\n <th class=\"px-4 py-3 text-right\">Contribution\/Withdrawal<\/th>\r\n <th class=\"px-4 py-3 text-right\">Gov. Pension<\/th>\r\n <th class=\"px-4 py-3 text-right\">Investment Growth<\/th>\r\n <th class=\"px-4 py-3 text-right\">End-of-Year Balance<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"yearlyTableBody\" class=\"text-slate-300\">\r\n <tr>\r\n <td colspan=\"4\" class=\"px-4 py-8 text-center text-slate-500\">\r\n Enter your parameters and click \"Calculate Retirement Plan\"\r\n <\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Currency settings\r\n let currentCurrency = 'GBP';\r\n const currencyLocales = {\r\n 'USD': 'en-US',\r\n 'GBP': 'en-GB',\r\n 'EUR': 'de-DE',\r\n 'CAD': 'en-CA',\r\n 'AUD': 'en-AU',\r\n 'JPY': 'ja-JP',\r\n 'INR': 'en-IN'\r\n };\r\n\r\n \/\/ Currency formatting functions\r\n function formatCurrency(value) {\r\n const locale = currencyLocales[currentCurrency] || 'en-US';\r\n const decimals = currentCurrency === 'JPY' ? 0 : 0; \/\/ JPY doesn't use decimals\r\n return new Intl.NumberFormat(locale, {\r\n style: 'currency',\r\n currency: currentCurrency,\r\n minimumFractionDigits: decimals,\r\n maximumFractionDigits: decimals\r\n }).format(value);\r\n }\r\n\r\n function parseCurrency(value) {\r\n return parseFloat(value.replace(\/[^0-9.-]\/g, '')) || 0;\r\n }\r\n\r\n function updateCurrencyDisplay() {\r\n currentCurrency = document.getElementById('currency').value;\r\n \r\n \/\/ Update all currency input fields with new currency format\r\n document.querySelectorAll('.currency-input').forEach(input => {\r\n const value = parseCurrency(input.value);\r\n if (!isNaN(value) && value !== 0) {\r\n input.value = formatCurrency(value);\r\n }\r\n });\r\n\r\n \/\/ Update default values based on currency\r\n const defaults = {\r\n 'USD': { savings: 50000, contribution: 10000, income: 80000 },\r\n 'GBP': { savings: 40000, contribution: 8000, income: 60000 },\r\n 'EUR': { savings: 45000, contribution: 9000, income: 70000 },\r\n 'CAD': { savings: 65000, contribution: 13000, income: 100000 },\r\n 'AUD': { savings: 75000, contribution: 15000, income: 120000 },\r\n 'JPY': { savings: 5500000, contribution: 1100000, income: 8800000 },\r\n 'INR': { savings: 4000000, contribution: 800000, income: 6500000 }\r\n };\r\n\r\n const currencyDefaults = defaults[currentCurrency];\r\n \r\n \/\/ Only update if fields are at their previous defaults\r\n const currentSavingsInput = document.getElementById('currentSavings');\r\n const currentContributionInput = document.getElementById('annualContribution');\r\n const currentIncomeInput = document.getElementById('desiredIncome');\r\n \r\n if (currentSavingsInput.value === '' || parseCurrency(currentSavingsInput.value) === 0) {\r\n currentSavingsInput.value = formatCurrency(currencyDefaults.savings);\r\n }\r\n if (currentContributionInput.value === '' || parseCurrency(currentContributionInput.value) === 0) {\r\n currentContributionInput.value = formatCurrency(currencyDefaults.contribution);\r\n }\r\n if (currentIncomeInput.value === '' || parseCurrency(currentIncomeInput.value) === 0) {\r\n currentIncomeInput.value = formatCurrency(currencyDefaults.income);\r\n }\r\n }\r\n\r\n function togglePensionFields() {\r\n const checkbox = document.getElementById('hasPension');\r\n const fields = document.getElementById('pensionFields');\r\n \r\n if (checkbox.checked) {\r\n fields.classList.remove('hidden');\r\n fields.classList.add('grid');\r\n \r\n \/\/ Format the pension amount input with current currency if not already formatted\r\n const pensionInput = document.getElementById('pensionAmount');\r\n const value = parseCurrency(pensionInput.value);\r\n if (value > 0) {\r\n pensionInput.value = formatCurrency(value);\r\n } else {\r\n \/\/ Set default based on currency\r\n const defaultPension = currentCurrency === 'GBP' ? 11500 : (currentCurrency === 'USD' ? 18000 : 15000);\r\n pensionInput.value = formatCurrency(defaultPension);\r\n }\r\n } else {\r\n fields.classList.add('hidden');\r\n fields.classList.remove('grid');\r\n }\r\n }\r\n\r\n \/\/ Auto-format currency inputs\r\n document.querySelectorAll('.currency-input').forEach(input => {\r\n input.addEventListener('blur', function() {\r\n const value = parseCurrency(this.value);\r\n if (!isNaN(value)) {\r\n this.value = formatCurrency(value);\r\n }\r\n });\r\n \r\n input.addEventListener('input', function(e) {\r\n let value = e.target.value.replace(\/[^0-9.-]\/g, '');\r\n if (value) {\r\n const numValue = parseFloat(value);\r\n if (!isNaN(numValue)) {\r\n e.target.value = formatCurrency(numValue);\r\n }\r\n }\r\n });\r\n });\r\n\r\n \/\/ Main calculation function\r\n function calculate() {\r\n \/\/ Get inputs\r\n currentCurrency = document.getElementById('currency').value;\r\n const currentAge = parseInt(document.getElementById('currentAge').value) || 30;\r\n const retirementAge = parseInt(document.getElementById('retirementAge').value) || 60;\r\n const lifeExpectancy = parseInt(document.getElementById('lifeExpectancy').value) || 90;\r\n const currentSavings = parseCurrency(document.getElementById('currentSavings').value);\r\n let annualContribution = parseCurrency(document.getElementById('annualContribution').value);\r\n const contributionIncrease = parseFloat(document.getElementById('contributionIncrease').value) \/ 100 || 0;\r\n const preRetirementReturn = parseFloat(document.getElementById('preRetirementReturn').value) \/ 100 || 0;\r\n const postRetirementReturn = parseFloat(document.getElementById('postRetirementReturn').value) \/ 100 || 0;\r\n const inflation = parseFloat(document.getElementById('inflation').value) \/ 100 || 0;\r\n const desiredIncomeToday = parseCurrency(document.getElementById('desiredIncome').value);\r\n \r\n \/\/ Get pension inputs if enabled\r\n const hasPension = document.getElementById('hasPension').checked;\r\n const pensionAmount = hasPension ? parseCurrency(document.getElementById('pensionAmount').value) : 0;\r\n const pensionStartAge = hasPension ? parseInt(document.getElementById('pensionStartAge').value) : 0;\r\n const pensionIncrease = hasPension ? parseFloat(document.getElementById('pensionIncrease').value) \/ 100 : 0;\r\n\r\n \/\/ Validate inputs\r\n if (retirementAge <= currentAge) {\r\n alert('Retirement age must be greater than current age');\r\n return;\r\n }\r\n if (lifeExpectancy <= retirementAge) {\r\n alert('Life expectancy must be greater than retirement age');\r\n return;\r\n }\r\n\r\n \/\/ Calculate future desired income at retirement (inflation-adjusted)\r\n const yearsToRetirement = retirementAge - currentAge;\r\n const futureDesiredIncome = desiredIncomeToday * Math.pow(1 + inflation, yearsToRetirement);\r\n\r\n \/\/ Run simulation\r\n const results = runSimulation(\r\n currentAge, retirementAge, lifeExpectancy,\r\n currentSavings, annualContribution, contributionIncrease,\r\n preRetirementReturn, postRetirementReturn, inflation,\r\n futureDesiredIncome, pensionAmount, pensionStartAge, pensionIncrease\r\n );\r\n\r\n \/\/ Display results\r\n displaySummary(results, futureDesiredIncome, desiredIncomeToday, pensionAmount);\r\n displayChart(results);\r\n displayYearlyTable(results);\r\n \r\n \/\/ Check for gap and calculate additional savings needed\r\n if (results.balanceAtLifeExpectancy < 0) {\r\n const additionalSavings = calculateAdditionalSavings(\r\n currentAge, retirementAge, lifeExpectancy,\r\n currentSavings, annualContribution, contributionIncrease,\r\n preRetirementReturn, postRetirementReturn, inflation,\r\n futureDesiredIncome, pensionAmount, pensionStartAge, pensionIncrease\r\n );\r\n displayGapAnalysis(results, additionalSavings, annualContribution);\r\n } else {\r\n document.getElementById('gapAnalysis').classList.add('hidden');\r\n }\r\n }\r\n\r\n \/\/ Run the full simulation\r\n function runSimulation(\r\n currentAge, retirementAge, lifeExpectancy,\r\n currentSavings, annualContribution, contributionIncrease,\r\n preRetirementReturn, postRetirementReturn, inflation,\r\n futureDesiredIncome, pensionAmount, pensionStartAge, pensionIncrease\r\n ) {\r\n const years = [];\r\n let balance = currentSavings;\r\n let currentContribution = annualContribution;\r\n const retirementYear = retirementAge - currentAge;\r\n\r\n for (let age = currentAge; age <= lifeExpectancy; age++) {\r\n const year = age - currentAge;\r\n let contribution = 0;\r\n let withdrawal = 0;\r\n let pension = 0;\r\n let growth = 0;\r\n let returnRate = preRetirementReturn;\r\n\r\n if (age < retirementAge) {\r\n \/\/ Accumulation phase\r\n contribution = currentContribution;\r\n growth = balance * returnRate;\r\n balance = balance + contribution + growth;\r\n \/\/ Increase contribution for next year\r\n currentContribution = currentContribution * (1 + contributionIncrease);\r\n } else {\r\n \/\/ Withdrawal phase\r\n returnRate = postRetirementReturn;\r\n const yearsInRetirement = age - retirementAge;\r\n \r\n \/\/ Calculate pension if applicable (starts at pensionStartAge)\r\n if (pensionAmount > 0 && age >= pensionStartAge) {\r\n const yearsFromPensionStart = age - pensionStartAge;\r\n \/\/ First adjust pension for inflation from retirement to pension start\r\n const pensionAtStart = pensionAmount * Math.pow(1 + inflation, pensionStartAge - retirementAge);\r\n \/\/ Then apply pension-specific increases from pension start age\r\n pension = pensionAtStart * Math.pow(1 + pensionIncrease, yearsFromPensionStart);\r\n }\r\n \r\n \/\/ Withdrawal increases with inflation each year\r\n const totalNeeded = futureDesiredIncome * Math.pow(1 + inflation, yearsInRetirement);\r\n \/\/ Reduce withdrawal by pension amount (need to withdraw less from savings)\r\n withdrawal = Math.max(0, totalNeeded - pension);\r\n \r\n growth = balance * returnRate;\r\n balance = balance - withdrawal + growth;\r\n }\r\n\r\n years.push({\r\n age,\r\n contribution,\r\n withdrawal,\r\n pension,\r\n growth,\r\n balance: balance \/\/ Show actual balance including negatives\r\n });\r\n\r\n \/\/ Stop if balance goes negative\r\n if (balance < 0) {\r\n break;\r\n }\r\n }\r\n\r\n return {\r\n years,\r\n balanceAtRetirement: years[retirementYear]?.balance || 0,\r\n balanceAtLifeExpectancy: years[years.length - 1]?.balance || 0,\r\n runsOutAt: balance < 0 ? years[years.length - 1].age : null\r\n };\r\n }\r\n\r\n \/\/ Calculate additional savings needed using binary search\r\n function calculateAdditionalSavings(\r\n currentAge, retirementAge, lifeExpectancy,\r\n currentSavings, annualContribution, contributionIncrease,\r\n preRetirementReturn, postRetirementReturn, inflation,\r\n futureDesiredIncome, pensionAmount, pensionStartAge, pensionIncrease\r\n ) {\r\n \/\/ Binary search for the additional amount\r\n let low = 0;\r\n let high = annualContribution * 10; \/\/ Search up to 10x current contribution\r\n let tolerance = 100; \/\/ tolerance\r\n let bestAdditional = 0;\r\n\r\n while (high - low > tolerance) {\r\n const mid = (low + high) \/ 2;\r\n const testContribution = annualContribution + mid;\r\n \r\n const results = runSimulation(\r\n currentAge, retirementAge, lifeExpectancy,\r\n currentSavings, testContribution, contributionIncrease,\r\n preRetirementReturn, postRetirementReturn, inflation,\r\n futureDesiredIncome, pensionAmount, pensionStartAge, pensionIncrease\r\n );\r\n\r\n if (results.balanceAtLifeExpectancy >= 0) {\r\n high = mid;\r\n bestAdditional = mid;\r\n } else {\r\n low = mid;\r\n }\r\n }\r\n\r\n return bestAdditional;\r\n }\r\n\r\n \/\/ Display summary cards\r\n function displaySummary(results, futureDesiredIncome, desiredIncomeToday, pensionAmount) {\r\n const hasPension = document.getElementById('hasPension').checked;\r\n const pensionIncrease = hasPension ? parseFloat(document.getElementById('pensionIncrease').value) : 0;\r\n const pensionCard = hasPension ? `\r\n <div class=\"bg-gradient-to-br from-indigo-900\/50 to-violet-900\/50 rounded-lg p-4 border border-indigo-700\/50\">\r\n <div class=\"text-sm text-indigo-300 mb-1\">Annual Government Pension<\/div>\r\n <div class=\"text-3xl font-bold text-indigo-400\">${formatCurrency(pensionAmount)}<\/div>\r\n <div class=\"text-xs text-indigo-400\/70 mt-1\">Starts at age ${document.getElementById('pensionStartAge').value} (+${pensionIncrease}%\/year)<\/div>\r\n <\/div>\r\n ` : '';\r\n \r\n const cards = `\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-gradient-to-br from-cyan-900\/50 to-blue-900\/50 rounded-lg p-4 border border-cyan-700\/50\">\r\n <div class=\"text-sm text-cyan-300 mb-1\">Total Nest Egg at Retirement<\/div>\r\n <div class=\"text-3xl font-bold text-cyan-400\">${formatCurrency(results.balanceAtRetirement)}<\/div>\r\n <\/div>\r\n <div class=\"bg-gradient-to-br from-purple-900\/50 to-pink-900\/50 rounded-lg p-4 border border-purple-700\/50\">\r\n <div class=\"text-sm text-purple-300 mb-1\">Inflation-Adjusted Income Needed<\/div>\r\n <div class=\"text-3xl font-bold text-purple-400\">${formatCurrency(futureDesiredIncome)}<\/div>\r\n <div class=\"text-xs text-purple-400\/70 mt-1\">(${formatCurrency(desiredIncomeToday)} today)<\/div>\r\n <\/div>\r\n ${pensionCard}\r\n <div class=\"bg-gradient-to-br from-green-900\/50 to-emerald-900\/50 rounded-lg p-4 border border-green-700\/50\">\r\n <div class=\"text-sm text-green-300 mb-1\">Balance at Life Expectancy<\/div>\r\n <div class=\"text-3xl font-bold ${results.balanceAtLifeExpectancy >= 0 ? 'text-green-400' : 'text-red-400'}\">\r\n ${formatCurrency(results.balanceAtLifeExpectancy)}\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-gradient-to-br from-orange-900\/50 to-amber-900\/50 rounded-lg p-4 border border-orange-700\/50\">\r\n <div class=\"text-sm text-orange-300 mb-1\">Years of Retirement<\/div>\r\n <div class=\"text-3xl font-bold text-orange-400\">${parseInt(document.getElementById('lifeExpectancy').value) - parseInt(document.getElementById('retirementAge').value)}<\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n document.getElementById('summaryCards').innerHTML = cards;\r\n }\r\n\r\n \/\/ Display gap analysis\r\n function displayGapAnalysis(results, additionalSavings, currentContribution) {\r\n const gapContent = `\r\n <div class=\"space-y-3\">\r\n <p class=\"text-slate-300\">\r\n Your funds will run out at age <span class=\"font-bold text-red-400\">${results.runsOutAt}<\/span>, \r\n which is <span class=\"font-bold text-red-400\">${parseInt(document.getElementById('lifeExpectancy').value) - results.runsOutAt}<\/span> years before your life expectancy.\r\n <\/p>\r\n <div class=\"bg-red-900\/30 rounded-lg p-4 border border-red-700\/50\">\r\n <div class=\"text-sm text-red-300 mb-2\">Additional Annual Savings Required (Starting Today)<\/div>\r\n <div class=\"text-2xl font-bold text-red-400\">${formatCurrency(additionalSavings)}<\/div>\r\n <div class=\"text-xs text-red-400\/70 mt-1\">\r\n New total: ${formatCurrency(currentContribution + additionalSavings)}\/year\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-sm text-slate-400 italic\">\r\n This calculation assumes you increase this additional amount by the same contribution increase rate each year.\r\n <\/p>\r\n <\/div>\r\n `;\r\n document.getElementById('gapContent').innerHTML = gapContent;\r\n document.getElementById('gapAnalysis').classList.remove('hidden');\r\n }\r\n\r\n \/\/ Display chart\r\n let balanceChart = null;\r\n function displayChart(results) {\r\n const ctx = document.getElementById('balanceChart').getContext('2d');\r\n \r\n if (balanceChart) {\r\n balanceChart.destroy();\r\n }\r\n\r\n const ages = results.years.map(y => y.age);\r\n const balances = results.years.map(y => y.balance);\r\n const retirementAge = parseInt(document.getElementById('retirementAge').value);\r\n\r\n balanceChart = new Chart(ctx, {\r\n type: 'line',\r\n data: {\r\n labels: ages,\r\n datasets: [{\r\n label: 'Portfolio Balance',\r\n data: balances,\r\n borderColor: 'rgb(34, 211, 238)',\r\n backgroundColor: 'rgba(34, 211, 238, 0.1)',\r\n borderWidth: 2,\r\n fill: true,\r\n tension: 0.4,\r\n pointRadius: 0,\r\n pointHoverRadius: 6\r\n }, {\r\n label: 'Retirement Age',\r\n data: balances.map((_, i) => ages[i] === retirementAge ? balances[i] : null),\r\n borderColor: 'rgb(251, 191, 36)',\r\n backgroundColor: 'rgba(251, 191, 36, 0.5)',\r\n borderWidth: 3,\r\n pointRadius: 8,\r\n pointHoverRadius: 10,\r\n showLine: false\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: true,\r\n aspectRatio: 2.5,\r\n plugins: {\r\n legend: {\r\n display: true,\r\n labels: {\r\n color: '#cbd5e1',\r\n font: {\r\n size: 12\r\n }\r\n }\r\n },\r\n tooltip: {\r\n mode: 'index',\r\n intersect: false,\r\n backgroundColor: 'rgba(15, 23, 42, 0.9)',\r\n titleColor: '#cbd5e1',\r\n bodyColor: '#cbd5e1',\r\n borderColor: '#475569',\r\n borderWidth: 1,\r\n callbacks: {\r\n label: function(context) {\r\n if (context.datasetIndex === 1) {\r\n return 'Retirement Age';\r\n }\r\n return 'Balance: ' + formatCurrency(context.parsed.y);\r\n }\r\n }\r\n }\r\n },\r\n scales: {\r\n x: {\r\n title: {\r\n display: true,\r\n text: 'Age',\r\n color: '#94a3b8'\r\n },\r\n ticks: {\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(148, 163, 184, 0.1)'\r\n }\r\n },\r\n y: {\r\n title: {\r\n display: true,\r\n text: 'Balance ($)',\r\n color: '#94a3b8'\r\n },\r\n ticks: {\r\n color: '#94a3b8',\r\n callback: function(value) {\r\n return '$' + (value \/ 1000).toFixed(0) + 'k';\r\n }\r\n },\r\n grid: {\r\n color: 'rgba(148, 163, 184, 0.1)'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n \/\/ Display yearly breakdown table\r\n function displayYearlyTable(results) {\r\n const tbody = document.getElementById('yearlyTableBody');\r\n tbody.innerHTML = '';\r\n\r\n results.years.forEach(year => {\r\n const row = document.createElement('tr');\r\n row.className = 'border-b border-slate-700 hover:bg-slate-800\/50';\r\n \r\n const isRetirement = year.age === parseInt(document.getElementById('retirementAge').value);\r\n const isNegative = year.balance === 0 && results.years[results.years.indexOf(year) - 1]?.balance > 0;\r\n \r\n if (isRetirement) {\r\n row.classList.add('bg-yellow-900\/20');\r\n }\r\n if (isNegative) {\r\n row.classList.add('bg-red-900\/20');\r\n }\r\n\r\n const contributionOrWithdrawal = year.contribution > 0 \r\n ? formatCurrency(year.contribution) \r\n : formatCurrency(-year.withdrawal);\r\n\r\n const pensionDisplay = year.pension > 0 ? formatCurrency(year.pension) : '-';\r\n\r\n row.innerHTML = `\r\n <td class=\"px-4 py-3 ${isRetirement ? 'font-bold text-yellow-400' : ''}\">${year.age}<\/td>\r\n <td class=\"px-4 py-3 text-right ${year.contribution > 0 ? 'text-green-400' : 'text-red-400'}\">\r\n ${contributionOrWithdrawal}\r\n <\/td>\r\n <td class=\"px-4 py-3 text-right ${year.pension > 0 ? 'text-green-400' : 'text-slate-600'}\">\r\n ${pensionDisplay}\r\n <\/td>\r\n <td class=\"px-4 py-3 text-right ${year.growth >= 0 ? 'text-green-400' : 'text-red-400'}\">\r\n ${formatCurrency(year.growth)}\r\n <\/td>\r\n <td class=\"px-4 py-3 text-right font-semibold ${year.balance >= 0 ? 'text-cyan-400' : 'text-red-400'}\">\r\n ${formatCurrency(year.balance)}\r\n <\/td>\r\n `;\r\n \r\n tbody.appendChild(row);\r\n });\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"pagelayer_contact_templates":[],"_pagelayer_content":"","pmpro_default_level":"","footnotes":""},"class_list":["post-215","page","type-page","status-publish","hentry","pmpro-has-access"],"_links":{"self":[{"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=\/wp\/v2\/pages\/215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=215"}],"version-history":[{"count":2,"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=\/wp\/v2\/pages\/215\/revisions"}],"predecessor-version":[{"id":218,"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=\/wp\/v2\/pages\/215\/revisions\/218"}],"wp:attachment":[{"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":215,"date":"2026-01-24T18:12:11","date_gmt":"2026-01-24T18:12:11","guid":{"rendered":"https:\/\/cashflowmindset.cash\/?page_id=215"},"modified":"2026-01-24T18:12:13","modified_gmt":"2026-01-24T18:12:13","slug":"advanced-retirement-calculator","status":"publish","type":"page","link":"https:\/\/cashflowmindset.cash\/?page_id=215","title":{"rendered":"Advanced Retirement Calculator"},"content":{"rendered":"\n\n\n\r\n\r\n\r\n \r\n \r\n Advanced Retirement & Lifestyle Calculator<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n <style>\r\n @media (prefers-color-scheme: light) {\r\n body {\r\n background-color: #0f172a;\r\n color: #e2e8f0;\r\n }\r\n }\r\n body {\r\n background-color: #0f172a;\r\n color: #e2e8f0;\r\n }\r\n .currency-input {\r\n color: #0f172a;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-900 text-slate-200 min-h-screen py-8 px-4\">\r\n <div class=\"max-w-7xl mx-auto\">\r\n <header class=\"text-center mb-8\">\r\n <h1 class=\"text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500 mb-2\">\r\n Advanced Retirement & Lifestyle Calculator\r\n <\/h1>\r\n <p class=\"text-slate-400\">Calculate your financial future with inflation-adjusted projections<\/p>\r\n <\/header>\r\n\r\n \r\n <div class=\"bg-gradient-to-br from-cyan-900\/30 to-blue-900\/30 rounded-xl p-6 mb-8 border border-cyan-700\/30\">\r\n <div class=\"flex items-start gap-3\">\r\n <div class=\"flex-shrink-0 mt-1\">\r\n <svg class=\"w-6 h-6 text-cyan-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-lg font-semibold text-cyan-300 mb-2\">How This Calculator Works<\/h3>\r\n <div class=\"text-sm text-slate-300 space-y-2\">\r\n <p>\r\n <strong class=\"text-cyan-400\">Unlike basic calculators<\/strong>, this tool accounts for realistic growth patterns:\r\n <\/p>\r\n <ul class=\"list-disc list-inside space-y-1 ml-2\">\r\n <li><strong>Progressive Savings:<\/strong> Assumes you'll save more each year as your income grows<\/li>\r\n <li><strong>Inflation Adjustment:<\/strong> Your retirement income needs will increase with inflation<\/li>\r\n <li><strong>Year-by-Year Analysis:<\/strong> See exactly when and if your money runs out<\/li>\r\n <li><strong>Gap Solver:<\/strong> If you're short, we'll calculate exactly how much more to save<\/li>\r\n <\/ul>\r\n <p class=\"pt-2 text-slate-400 italic\">\r\n 💡 Tip: The \"Annual Contribution Increase %\" is key\u2014it reflects that as you earn more over your career, you'll likely save more too.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-gradient-to-br from-amber-900\/30 to-orange-900\/30 rounded-xl p-5 mb-8 border border-amber-700\/40\">\r\n <div class=\"flex items-start gap-3\">\r\n <div class=\"flex-shrink-0 mt-1\">\r\n <svg class=\"w-6 h-6 text-amber-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"flex-1\">\r\n <h3 class=\"text-lg font-semibold text-amber-300 mb-2\">⚠️ Important Tax Considerations<\/h3>\r\n <div class=\"text-sm text-slate-300 space-y-2\">\r\n <p>\r\n <strong class=\"text-amber-400\">This calculator does NOT account for taxes.<\/strong> Your actual spending power may be significantly affected by:\r\n <\/p>\r\n <ul class=\"list-disc list-inside space-y-1 ml-2 text-slate-400\">\r\n <li><strong>Income tax<\/strong> on pension withdrawals (25% tax-free lump sum in UK, then marginal rates)<\/li>\r\n <li><strong>Capital gains tax<\/strong> on investment growth in taxable accounts<\/li>\r\n <li><strong>Government pension taxation<\/strong> (State Pension is taxable income in UK)<\/li>\r\n <li><strong>Tax-advantaged accounts<\/strong> (ISAs in UK are tax-free, SIPPs\/401ks are tax-deferred)<\/li>\r\n <\/ul>\r\n <p class=\"pt-2 text-amber-300 font-medium\">\r\n 💼 Professional Advice: Consider consulting a financial advisor or tax specialist for a comprehensive retirement plan that accounts for your specific tax situation.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8\">\r\n \r\n <div class=\"bg-slate-800 rounded-xl p-6 shadow-2xl border border-slate-700\">\r\n <h2 class=\"text-2xl font-semibold mb-6 text-cyan-400\">Input Parameters<\/h2>\r\n <div class=\"space-y-4\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Currency<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">Select your preferred currency<\/p>\r\n <select id=\"currency\" onchange=\"updateCurrencyDisplay()\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <option value=\"GBP\" selected>🇬🇧 British Pound (GBP)<\/option>\r\n <option value=\"USD\">🇺🇸 US Dollar (USD)<\/option>\r\n <option value=\"EUR\">🇪🇺 Euro (EUR)<\/option>\r\n <option value=\"CAD\">🇨🇦 Canadian Dollar (CAD)<\/option>\r\n <option value=\"AUD\">🇦🇺 Australian Dollar (AUD)<\/option>\r\n <option value=\"JPY\">🇯🇵 Japanese Yen (JPY)<\/option>\r\n <option value=\"INR\">🇮🇳 Indian Rupee (INR)<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Current Age<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">How old are you right now?<\/p>\r\n <input type=\"number\" id=\"currentAge\" value=\"30\" min=\"18\" max=\"100\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Retirement Age<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">When do you plan to stop working?<\/p>\r\n <input type=\"number\" id=\"retirementAge\" value=\"60\" min=\"18\" max=\"100\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Life Expectancy<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">How long do you expect to live? (US avg: 77-80)<\/p>\r\n <input type=\"number\" id=\"lifeExpectancy\" value=\"90\" min=\"50\" max=\"120\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Current Savings Balance<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">Total in retirement accounts (401k, IRA, etc.)<\/p>\r\n <input type=\"text\" id=\"currentSavings\" value=\"\u00a340,000\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none currency-input\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Annual Savings Contribution<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">How much you save per year right now<\/p>\r\n <input type=\"text\" id=\"annualContribution\" value=\"\u00a38,000\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none currency-input\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Annual Contribution Increase %<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">As you earn more, you'll save more each year (e.g., 3%)<\/p>\r\n <input type=\"number\" id=\"contributionIncrease\" value=\"3\" step=\"0.1\" min=\"0\" max=\"20\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Pre-Retirement Return %<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">Expected annual investment return while working (stocks: 8-10%)<\/p>\r\n <input type=\"number\" id=\"preRetirementReturn\" value=\"9\" step=\"0.1\" min=\"0\" max=\"30\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Post-Retirement Return %<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">Lower return after retiring (conservative mix: 5-7%)<\/p>\r\n <input type=\"number\" id=\"postRetirementReturn\" value=\"6\" step=\"0.1\" min=\"0\" max=\"30\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Expected Inflation %<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">Cost of living increases over time (historical avg: 3%)<\/p>\r\n <input type=\"number\" id=\"inflation\" value=\"3\" step=\"0.1\" min=\"0\" max=\"20\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Desired Annual Income (Today's Pounds)<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">Lifestyle you want in retirement, in current purchasing power<\/p>\r\n <input type=\"text\" id=\"desiredIncome\" value=\"\u00a360,000\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none currency-input\">\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-6 pt-6 border-t border-slate-700\">\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <h3 class=\"text-lg font-semibold text-cyan-400\">Government Pension (Optional)<\/h3>\r\n <label class=\"flex items-center cursor-pointer\">\r\n <input type=\"checkbox\" id=\"hasPension\" onchange=\"togglePensionFields()\" class=\"mr-2\">\r\n <span class=\"text-sm text-slate-300\">Enable<\/span>\r\n <\/label>\r\n <\/div>\r\n \r\n <div id=\"pensionFields\" class=\"hidden grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Annual Pension Amount (Today's Value)<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">UK State Pension: ~\u00a311,500\/year, US Social Security: varies<\/p>\r\n <input type=\"text\" id=\"pensionAmount\" value=\"11500\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none currency-input\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium mb-1\">Pension Start Age<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">UK: 66-67, US: 62-70 (full at 67)<\/p>\r\n <input type=\"number\" id=\"pensionStartAge\" value=\"67\" min=\"50\" max=\"75\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <\/div>\r\n <div class=\"md:col-span-2\">\r\n <label class=\"block text-sm font-medium mb-1\">Annual Pension Increase %<\/label>\r\n <p class=\"text-xs text-slate-400 mb-2\">How pension adjusts each year: UK Triple Lock (2.5%+), US COLA (~2.5%), or 0% if fixed<\/p>\r\n <input type=\"number\" id=\"pensionIncrease\" value=\"2.5\" step=\"0.1\" min=\"0\" max=\"10\" \r\n class=\"w-full px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500\/20 outline-none\">\r\n <p class=\"text-xs text-slate-500 mt-1 italic\">\r\n 💡 Tip: Use inflation rate if pension is inflation-linked, lower if it has fixed increases, or 0% if frozen\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"calculate()\" \r\n class=\"w-full mt-6 px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-semibold rounded-lg shadow-lg transform transition hover:scale-105\">\r\n Calculate Retirement Plan\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-6\">\r\n <div class=\"bg-slate-800 rounded-xl p-6 shadow-2xl border border-slate-700\">\r\n <h2 class=\"text-2xl font-semibold mb-6 text-cyan-400\">Summary<\/h2>\r\n <div id=\"summaryCards\" class=\"space-y-4\">\r\n <div class=\"text-center py-8 text-slate-500\">\r\n Enter your parameters and click \"Calculate Retirement Plan\"\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"gapAnalysis\" class=\"bg-slate-800 rounded-xl p-6 shadow-2xl border border-slate-700 hidden\">\r\n <h2 class=\"text-2xl font-semibold mb-4 text-red-400\">⚠️ Funding Gap Detected<\/h2>\r\n <div id=\"gapContent\" class=\"space-y-2\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-800 rounded-xl p-6 shadow-2xl border border-slate-700 mb-8\">\r\n <h2 class=\"text-2xl font-semibold mb-4 text-cyan-400\">Balance Projection<\/h2>\r\n <div class=\"bg-slate-900 rounded-lg p-4\">\r\n <canvas id=\"balanceChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-800 rounded-xl p-6 shadow-2xl border border-slate-700\">\r\n <h2 class=\"text-2xl font-semibold mb-4 text-cyan-400\">Year-by-Year Breakdown<\/h2>\r\n <div class=\"overflow-x-auto\">\r\n <div class=\"bg-slate-900 rounded-lg overflow-hidden\">\r\n <table id=\"yearlyTable\" class=\"w-full text-sm\">\r\n <thead class=\"bg-slate-700 text-cyan-400\">\r\n <tr>\r\n <th class=\"px-4 py-3 text-left\">Age<\/th>\r\n <th class=\"px-4 py-3 text-right\">Contribution\/Withdrawal<\/th>\r\n <th class=\"px-4 py-3 text-right\">Gov. Pension<\/th>\r\n <th class=\"px-4 py-3 text-right\">Investment Growth<\/th>\r\n <th class=\"px-4 py-3 text-right\">End-of-Year Balance<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"yearlyTableBody\" class=\"text-slate-300\">\r\n <tr>\r\n <td colspan=\"4\" class=\"px-4 py-8 text-center text-slate-500\">\r\n Enter your parameters and click \"Calculate Retirement Plan\"\r\n <\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Currency settings\r\n let currentCurrency = 'GBP';\r\n const currencyLocales = {\r\n 'USD': 'en-US',\r\n 'GBP': 'en-GB',\r\n 'EUR': 'de-DE',\r\n 'CAD': 'en-CA',\r\n 'AUD': 'en-AU',\r\n 'JPY': 'ja-JP',\r\n 'INR': 'en-IN'\r\n };\r\n\r\n \/\/ Currency formatting functions\r\n function formatCurrency(value) {\r\n const locale = currencyLocales[currentCurrency] || 'en-US';\r\n const decimals = currentCurrency === 'JPY' ? 0 : 0; \/\/ JPY doesn't use decimals\r\n return new Intl.NumberFormat(locale, {\r\n style: 'currency',\r\n currency: currentCurrency,\r\n minimumFractionDigits: decimals,\r\n maximumFractionDigits: decimals\r\n }).format(value);\r\n }\r\n\r\n function parseCurrency(value) {\r\n return parseFloat(value.replace(\/[^0-9.-]\/g, '')) || 0;\r\n }\r\n\r\n function updateCurrencyDisplay() {\r\n currentCurrency = document.getElementById('currency').value;\r\n \r\n \/\/ Update all currency input fields with new currency format\r\n document.querySelectorAll('.currency-input').forEach(input => {\r\n const value = parseCurrency(input.value);\r\n if (!isNaN(value) && value !== 0) {\r\n input.value = formatCurrency(value);\r\n }\r\n });\r\n\r\n \/\/ Update default values based on currency\r\n const defaults = {\r\n 'USD': { savings: 50000, contribution: 10000, income: 80000 },\r\n 'GBP': { savings: 40000, contribution: 8000, income: 60000 },\r\n 'EUR': { savings: 45000, contribution: 9000, income: 70000 },\r\n 'CAD': { savings: 65000, contribution: 13000, income: 100000 },\r\n 'AUD': { savings: 75000, contribution: 15000, income: 120000 },\r\n 'JPY': { savings: 5500000, contribution: 1100000, income: 8800000 },\r\n 'INR': { savings: 4000000, contribution: 800000, income: 6500000 }\r\n };\r\n\r\n const currencyDefaults = defaults[currentCurrency];\r\n \r\n \/\/ Only update if fields are at their previous defaults\r\n const currentSavingsInput = document.getElementById('currentSavings');\r\n const currentContributionInput = document.getElementById('annualContribution');\r\n const currentIncomeInput = document.getElementById('desiredIncome');\r\n \r\n if (currentSavingsInput.value === '' || parseCurrency(currentSavingsInput.value) === 0) {\r\n currentSavingsInput.value = formatCurrency(currencyDefaults.savings);\r\n }\r\n if (currentContributionInput.value === '' || parseCurrency(currentContributionInput.value) === 0) {\r\n currentContributionInput.value = formatCurrency(currencyDefaults.contribution);\r\n }\r\n if (currentIncomeInput.value === '' || parseCurrency(currentIncomeInput.value) === 0) {\r\n currentIncomeInput.value = formatCurrency(currencyDefaults.income);\r\n }\r\n }\r\n\r\n function togglePensionFields() {\r\n const checkbox = document.getElementById('hasPension');\r\n const fields = document.getElementById('pensionFields');\r\n \r\n if (checkbox.checked) {\r\n fields.classList.remove('hidden');\r\n fields.classList.add('grid');\r\n \r\n \/\/ Format the pension amount input with current currency if not already formatted\r\n const pensionInput = document.getElementById('pensionAmount');\r\n const value = parseCurrency(pensionInput.value);\r\n if (value > 0) {\r\n pensionInput.value = formatCurrency(value);\r\n } else {\r\n \/\/ Set default based on currency\r\n const defaultPension = currentCurrency === 'GBP' ? 11500 : (currentCurrency === 'USD' ? 18000 : 15000);\r\n pensionInput.value = formatCurrency(defaultPension);\r\n }\r\n } else {\r\n fields.classList.add('hidden');\r\n fields.classList.remove('grid');\r\n }\r\n }\r\n\r\n \/\/ Auto-format currency inputs\r\n document.querySelectorAll('.currency-input').forEach(input => {\r\n input.addEventListener('blur', function() {\r\n const value = parseCurrency(this.value);\r\n if (!isNaN(value)) {\r\n this.value = formatCurrency(value);\r\n }\r\n });\r\n \r\n input.addEventListener('input', function(e) {\r\n let value = e.target.value.replace(\/[^0-9.-]\/g, '');\r\n if (value) {\r\n const numValue = parseFloat(value);\r\n if (!isNaN(numValue)) {\r\n e.target.value = formatCurrency(numValue);\r\n }\r\n }\r\n });\r\n });\r\n\r\n \/\/ Main calculation function\r\n function calculate() {\r\n \/\/ Get inputs\r\n currentCurrency = document.getElementById('currency').value;\r\n const currentAge = parseInt(document.getElementById('currentAge').value) || 30;\r\n const retirementAge = parseInt(document.getElementById('retirementAge').value) || 60;\r\n const lifeExpectancy = parseInt(document.getElementById('lifeExpectancy').value) || 90;\r\n const currentSavings = parseCurrency(document.getElementById('currentSavings').value);\r\n let annualContribution = parseCurrency(document.getElementById('annualContribution').value);\r\n const contributionIncrease = parseFloat(document.getElementById('contributionIncrease').value) \/ 100 || 0;\r\n const preRetirementReturn = parseFloat(document.getElementById('preRetirementReturn').value) \/ 100 || 0;\r\n const postRetirementReturn = parseFloat(document.getElementById('postRetirementReturn').value) \/ 100 || 0;\r\n const inflation = parseFloat(document.getElementById('inflation').value) \/ 100 || 0;\r\n const desiredIncomeToday = parseCurrency(document.getElementById('desiredIncome').value);\r\n \r\n \/\/ Get pension inputs if enabled\r\n const hasPension = document.getElementById('hasPension').checked;\r\n const pensionAmount = hasPension ? parseCurrency(document.getElementById('pensionAmount').value) : 0;\r\n const pensionStartAge = hasPension ? parseInt(document.getElementById('pensionStartAge').value) : 0;\r\n const pensionIncrease = hasPension ? parseFloat(document.getElementById('pensionIncrease').value) \/ 100 : 0;\r\n\r\n \/\/ Validate inputs\r\n if (retirementAge <= currentAge) {\r\n alert('Retirement age must be greater than current age');\r\n return;\r\n }\r\n if (lifeExpectancy <= retirementAge) {\r\n alert('Life expectancy must be greater than retirement age');\r\n return;\r\n }\r\n\r\n \/\/ Calculate future desired income at retirement (inflation-adjusted)\r\n const yearsToRetirement = retirementAge - currentAge;\r\n const futureDesiredIncome = desiredIncomeToday * Math.pow(1 + inflation, yearsToRetirement);\r\n\r\n \/\/ Run simulation\r\n const results = runSimulation(\r\n currentAge, retirementAge, lifeExpectancy,\r\n currentSavings, annualContribution, contributionIncrease,\r\n preRetirementReturn, postRetirementReturn, inflation,\r\n futureDesiredIncome, pensionAmount, pensionStartAge, pensionIncrease\r\n );\r\n\r\n \/\/ Display results\r\n displaySummary(results, futureDesiredIncome, desiredIncomeToday, pensionAmount);\r\n displayChart(results);\r\n displayYearlyTable(results);\r\n \r\n \/\/ Check for gap and calculate additional savings needed\r\n if (results.balanceAtLifeExpectancy < 0) {\r\n const additionalSavings = calculateAdditionalSavings(\r\n currentAge, retirementAge, lifeExpectancy,\r\n currentSavings, annualContribution, contributionIncrease,\r\n preRetirementReturn, postRetirementReturn, inflation,\r\n futureDesiredIncome, pensionAmount, pensionStartAge, pensionIncrease\r\n );\r\n displayGapAnalysis(results, additionalSavings, annualContribution);\r\n } else {\r\n document.getElementById('gapAnalysis').classList.add('hidden');\r\n }\r\n }\r\n\r\n \/\/ Run the full simulation\r\n function runSimulation(\r\n currentAge, retirementAge, lifeExpectancy,\r\n currentSavings, annualContribution, contributionIncrease,\r\n preRetirementReturn, postRetirementReturn, inflation,\r\n futureDesiredIncome, pensionAmount, pensionStartAge, pensionIncrease\r\n ) {\r\n const years = [];\r\n let balance = currentSavings;\r\n let currentContribution = annualContribution;\r\n const retirementYear = retirementAge - currentAge;\r\n\r\n for (let age = currentAge; age <= lifeExpectancy; age++) {\r\n const year = age - currentAge;\r\n let contribution = 0;\r\n let withdrawal = 0;\r\n let pension = 0;\r\n let growth = 0;\r\n let returnRate = preRetirementReturn;\r\n\r\n if (age < retirementAge) {\r\n \/\/ Accumulation phase\r\n contribution = currentContribution;\r\n growth = balance * returnRate;\r\n balance = balance + contribution + growth;\r\n \/\/ Increase contribution for next year\r\n currentContribution = currentContribution * (1 + contributionIncrease);\r\n } else {\r\n \/\/ Withdrawal phase\r\n returnRate = postRetirementReturn;\r\n const yearsInRetirement = age - retirementAge;\r\n \r\n \/\/ Calculate pension if applicable (starts at pensionStartAge)\r\n if (pensionAmount > 0 && age >= pensionStartAge) {\r\n const yearsFromPensionStart = age - pensionStartAge;\r\n \/\/ First adjust pension for inflation from retirement to pension start\r\n const pensionAtStart = pensionAmount * Math.pow(1 + inflation, pensionStartAge - retirementAge);\r\n \/\/ Then apply pension-specific increases from pension start age\r\n pension = pensionAtStart * Math.pow(1 + pensionIncrease, yearsFromPensionStart);\r\n }\r\n \r\n \/\/ Withdrawal increases with inflation each year\r\n const totalNeeded = futureDesiredIncome * Math.pow(1 + inflation, yearsInRetirement);\r\n \/\/ Reduce withdrawal by pension amount (need to withdraw less from savings)\r\n withdrawal = Math.max(0, totalNeeded - pension);\r\n \r\n growth = balance * returnRate;\r\n balance = balance - withdrawal + growth;\r\n }\r\n\r\n years.push({\r\n age,\r\n contribution,\r\n withdrawal,\r\n pension,\r\n growth,\r\n balance: balance \/\/ Show actual balance including negatives\r\n });\r\n\r\n \/\/ Stop if balance goes negative\r\n if (balance < 0) {\r\n break;\r\n }\r\n }\r\n\r\n return {\r\n years,\r\n balanceAtRetirement: years[retirementYear]?.balance || 0,\r\n balanceAtLifeExpectancy: years[years.length - 1]?.balance || 0,\r\n runsOutAt: balance < 0 ? years[years.length - 1].age : null\r\n };\r\n }\r\n\r\n \/\/ Calculate additional savings needed using binary search\r\n function calculateAdditionalSavings(\r\n currentAge, retirementAge, lifeExpectancy,\r\n currentSavings, annualContribution, contributionIncrease,\r\n preRetirementReturn, postRetirementReturn, inflation,\r\n futureDesiredIncome, pensionAmount, pensionStartAge, pensionIncrease\r\n ) {\r\n \/\/ Binary search for the additional amount\r\n let low = 0;\r\n let high = annualContribution * 10; \/\/ Search up to 10x current contribution\r\n let tolerance = 100; \/\/ tolerance\r\n let bestAdditional = 0;\r\n\r\n while (high - low > tolerance) {\r\n const mid = (low + high) \/ 2;\r\n const testContribution = annualContribution + mid;\r\n \r\n const results = runSimulation(\r\n currentAge, retirementAge, lifeExpectancy,\r\n currentSavings, testContribution, contributionIncrease,\r\n preRetirementReturn, postRetirementReturn, inflation,\r\n futureDesiredIncome, pensionAmount, pensionStartAge, pensionIncrease\r\n );\r\n\r\n if (results.balanceAtLifeExpectancy >= 0) {\r\n high = mid;\r\n bestAdditional = mid;\r\n } else {\r\n low = mid;\r\n }\r\n }\r\n\r\n return bestAdditional;\r\n }\r\n\r\n \/\/ Display summary cards\r\n function displaySummary(results, futureDesiredIncome, desiredIncomeToday, pensionAmount) {\r\n const hasPension = document.getElementById('hasPension').checked;\r\n const pensionIncrease = hasPension ? parseFloat(document.getElementById('pensionIncrease').value) : 0;\r\n const pensionCard = hasPension ? `\r\n <div class=\"bg-gradient-to-br from-indigo-900\/50 to-violet-900\/50 rounded-lg p-4 border border-indigo-700\/50\">\r\n <div class=\"text-sm text-indigo-300 mb-1\">Annual Government Pension<\/div>\r\n <div class=\"text-3xl font-bold text-indigo-400\">${formatCurrency(pensionAmount)}<\/div>\r\n <div class=\"text-xs text-indigo-400\/70 mt-1\">Starts at age ${document.getElementById('pensionStartAge').value} (+${pensionIncrease}%\/year)<\/div>\r\n <\/div>\r\n ` : '';\r\n \r\n const cards = `\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-gradient-to-br from-cyan-900\/50 to-blue-900\/50 rounded-lg p-4 border border-cyan-700\/50\">\r\n <div class=\"text-sm text-cyan-300 mb-1\">Total Nest Egg at Retirement<\/div>\r\n <div class=\"text-3xl font-bold text-cyan-400\">${formatCurrency(results.balanceAtRetirement)}<\/div>\r\n <\/div>\r\n <div class=\"bg-gradient-to-br from-purple-900\/50 to-pink-900\/50 rounded-lg p-4 border border-purple-700\/50\">\r\n <div class=\"text-sm text-purple-300 mb-1\">Inflation-Adjusted Income Needed<\/div>\r\n <div class=\"text-3xl font-bold text-purple-400\">${formatCurrency(futureDesiredIncome)}<\/div>\r\n <div class=\"text-xs text-purple-400\/70 mt-1\">(${formatCurrency(desiredIncomeToday)} today)<\/div>\r\n <\/div>\r\n ${pensionCard}\r\n <div class=\"bg-gradient-to-br from-green-900\/50 to-emerald-900\/50 rounded-lg p-4 border border-green-700\/50\">\r\n <div class=\"text-sm text-green-300 mb-1\">Balance at Life Expectancy<\/div>\r\n <div class=\"text-3xl font-bold ${results.balanceAtLifeExpectancy >= 0 ? 'text-green-400' : 'text-red-400'}\">\r\n ${formatCurrency(results.balanceAtLifeExpectancy)}\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-gradient-to-br from-orange-900\/50 to-amber-900\/50 rounded-lg p-4 border border-orange-700\/50\">\r\n <div class=\"text-sm text-orange-300 mb-1\">Years of Retirement<\/div>\r\n <div class=\"text-3xl font-bold text-orange-400\">${parseInt(document.getElementById('lifeExpectancy').value) - parseInt(document.getElementById('retirementAge').value)}<\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n document.getElementById('summaryCards').innerHTML = cards;\r\n }\r\n\r\n \/\/ Display gap analysis\r\n function displayGapAnalysis(results, additionalSavings, currentContribution) {\r\n const gapContent = `\r\n <div class=\"space-y-3\">\r\n <p class=\"text-slate-300\">\r\n Your funds will run out at age <span class=\"font-bold text-red-400\">${results.runsOutAt}<\/span>, \r\n which is <span class=\"font-bold text-red-400\">${parseInt(document.getElementById('lifeExpectancy').value) - results.runsOutAt}<\/span> years before your life expectancy.\r\n <\/p>\r\n <div class=\"bg-red-900\/30 rounded-lg p-4 border border-red-700\/50\">\r\n <div class=\"text-sm text-red-300 mb-2\">Additional Annual Savings Required (Starting Today)<\/div>\r\n <div class=\"text-2xl font-bold text-red-400\">${formatCurrency(additionalSavings)}<\/div>\r\n <div class=\"text-xs text-red-400\/70 mt-1\">\r\n New total: ${formatCurrency(currentContribution + additionalSavings)}\/year\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-sm text-slate-400 italic\">\r\n This calculation assumes you increase this additional amount by the same contribution increase rate each year.\r\n <\/p>\r\n <\/div>\r\n `;\r\n document.getElementById('gapContent').innerHTML = gapContent;\r\n document.getElementById('gapAnalysis').classList.remove('hidden');\r\n }\r\n\r\n \/\/ Display chart\r\n let balanceChart = null;\r\n function displayChart(results) {\r\n const ctx = document.getElementById('balanceChart').getContext('2d');\r\n \r\n if (balanceChart) {\r\n balanceChart.destroy();\r\n }\r\n\r\n const ages = results.years.map(y => y.age);\r\n const balances = results.years.map(y => y.balance);\r\n const retirementAge = parseInt(document.getElementById('retirementAge').value);\r\n\r\n balanceChart = new Chart(ctx, {\r\n type: 'line',\r\n data: {\r\n labels: ages,\r\n datasets: [{\r\n label: 'Portfolio Balance',\r\n data: balances,\r\n borderColor: 'rgb(34, 211, 238)',\r\n backgroundColor: 'rgba(34, 211, 238, 0.1)',\r\n borderWidth: 2,\r\n fill: true,\r\n tension: 0.4,\r\n pointRadius: 0,\r\n pointHoverRadius: 6\r\n }, {\r\n label: 'Retirement Age',\r\n data: balances.map((_, i) => ages[i] === retirementAge ? balances[i] : null),\r\n borderColor: 'rgb(251, 191, 36)',\r\n backgroundColor: 'rgba(251, 191, 36, 0.5)',\r\n borderWidth: 3,\r\n pointRadius: 8,\r\n pointHoverRadius: 10,\r\n showLine: false\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: true,\r\n aspectRatio: 2.5,\r\n plugins: {\r\n legend: {\r\n display: true,\r\n labels: {\r\n color: '#cbd5e1',\r\n font: {\r\n size: 12\r\n }\r\n }\r\n },\r\n tooltip: {\r\n mode: 'index',\r\n intersect: false,\r\n backgroundColor: 'rgba(15, 23, 42, 0.9)',\r\n titleColor: '#cbd5e1',\r\n bodyColor: '#cbd5e1',\r\n borderColor: '#475569',\r\n borderWidth: 1,\r\n callbacks: {\r\n label: function(context) {\r\n if (context.datasetIndex === 1) {\r\n return 'Retirement Age';\r\n }\r\n return 'Balance: ' + formatCurrency(context.parsed.y);\r\n }\r\n }\r\n }\r\n },\r\n scales: {\r\n x: {\r\n title: {\r\n display: true,\r\n text: 'Age',\r\n color: '#94a3b8'\r\n },\r\n ticks: {\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(148, 163, 184, 0.1)'\r\n }\r\n },\r\n y: {\r\n title: {\r\n display: true,\r\n text: 'Balance ($)',\r\n color: '#94a3b8'\r\n },\r\n ticks: {\r\n color: '#94a3b8',\r\n callback: function(value) {\r\n return '$' + (value \/ 1000).toFixed(0) + 'k';\r\n }\r\n },\r\n grid: {\r\n color: 'rgba(148, 163, 184, 0.1)'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n \/\/ Display yearly breakdown table\r\n function displayYearlyTable(results) {\r\n const tbody = document.getElementById('yearlyTableBody');\r\n tbody.innerHTML = '';\r\n\r\n results.years.forEach(year => {\r\n const row = document.createElement('tr');\r\n row.className = 'border-b border-slate-700 hover:bg-slate-800\/50';\r\n \r\n const isRetirement = year.age === parseInt(document.getElementById('retirementAge').value);\r\n const isNegative = year.balance === 0 && results.years[results.years.indexOf(year) - 1]?.balance > 0;\r\n \r\n if (isRetirement) {\r\n row.classList.add('bg-yellow-900\/20');\r\n }\r\n if (isNegative) {\r\n row.classList.add('bg-red-900\/20');\r\n }\r\n\r\n const contributionOrWithdrawal = year.contribution > 0 \r\n ? formatCurrency(year.contribution) \r\n : formatCurrency(-year.withdrawal);\r\n\r\n const pensionDisplay = year.pension > 0 ? formatCurrency(year.pension) : '-';\r\n\r\n row.innerHTML = `\r\n <td class=\"px-4 py-3 ${isRetirement ? 'font-bold text-yellow-400' : ''}\">${year.age}<\/td>\r\n <td class=\"px-4 py-3 text-right ${year.contribution > 0 ? 'text-green-400' : 'text-red-400'}\">\r\n ${contributionOrWithdrawal}\r\n <\/td>\r\n <td class=\"px-4 py-3 text-right ${year.pension > 0 ? 'text-green-400' : 'text-slate-600'}\">\r\n ${pensionDisplay}\r\n <\/td>\r\n <td class=\"px-4 py-3 text-right ${year.growth >= 0 ? 'text-green-400' : 'text-red-400'}\">\r\n ${formatCurrency(year.growth)}\r\n <\/td>\r\n <td class=\"px-4 py-3 text-right font-semibold ${year.balance >= 0 ? 'text-cyan-400' : 'text-red-400'}\">\r\n ${formatCurrency(year.balance)}\r\n <\/td>\r\n `;\r\n \r\n tbody.appendChild(row);\r\n });\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"pagelayer_contact_templates":[],"_pagelayer_content":"","pmpro_default_level":"","footnotes":""},"class_list":["post-215","page","type-page","status-publish","hentry","pmpro-has-access"],"_links":{"self":[{"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=\/wp\/v2\/pages\/215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=215"}],"version-history":[{"count":2,"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=\/wp\/v2\/pages\/215\/revisions"}],"predecessor-version":[{"id":218,"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=\/wp\/v2\/pages\/215\/revisions\/218"}],"wp:attachment":[{"href":"https:\/\/cashflowmindset.cash\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}