Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FinWise — Calculators</title> | |
| <link rel="stylesheet" href="shared.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> | |
| <style> | |
| .calc-tabs { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| margin-bottom: 28px; | |
| } | |
| .calc-tab { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 20px; | |
| border-radius: var(--r); | |
| border: 1px solid var(--border); | |
| background: var(--card); | |
| color: var(--text2); | |
| font-family: var(--font-body); | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| white-space: nowrap; | |
| } | |
| .calc-tab:hover { border-color: var(--border2); color: var(--text); transform: translateY(-1px); } | |
| .calc-tab.active { | |
| border-color: var(--cyan); | |
| background: rgba(34,211,238,0.08); | |
| color: var(--cyan); | |
| box-shadow: var(--glow-c); | |
| } | |
| .calc-tab-icon { font-size: 20px; } | |
| .calc-panel { display: none; } | |
| .calc-panel.active { display: block; } | |
| .result-hero { | |
| text-align: center; | |
| padding: 32px 20px; | |
| background: linear-gradient(135deg, rgba(34,211,238,0.06), rgba(16,185,129,0.04)); | |
| border: 1px solid var(--border2); | |
| border-radius: var(--r-lg); | |
| margin-bottom: 24px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .result-hero::before { | |
| content: ''; | |
| position: absolute; | |
| width: 300px; height: 300px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, rgba(34,211,238,0.06) 0%, transparent 70%); | |
| top: -100px; left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .result-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text2); font-weight: 700; } | |
| .result-value { font-family: var(--font-head); font-size: 52px; font-weight: 800; line-height: 1; margin: 12px 0; } | |
| .result-value.positive { color: var(--emerald); } | |
| .result-sub { font-size: 14px; color: var(--text2); } | |
| .result-breakdown { | |
| display: grid; | |
| grid-template-columns: repeat(3,1fr); | |
| gap: 12px; | |
| margin-bottom: 24px; | |
| } | |
| .rb-box { | |
| background: var(--bg3); | |
| border-radius: var(--r-sm); | |
| padding: 14px; | |
| text-align: center; | |
| } | |
| .rb-box-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text2); margin-bottom: 6px; font-weight: 700; } | |
| .rb-box-val { font-family: var(--font-head); font-size: 20px; font-weight: 800; } | |
| .chart-panel { height: 260px; position: relative; } | |
| .input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } | |
| @media (max-width: 600px) { .input-row { grid-template-columns: 1fr; } .result-breakdown { grid-template-columns: 1fr 1fr; } } | |
| .preset-pills { | |
| display: flex; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| margin-bottom: 8px; | |
| } | |
| .preset-pill { | |
| padding: 4px 10px; | |
| border-radius: 100px; | |
| border: 1px solid var(--border2); | |
| background: transparent; | |
| color: var(--text2); | |
| font-size: 12px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| font-family: var(--font-body); | |
| transition: all var(--transition); | |
| } | |
| .preset-pill:hover { border-color: var(--cyan); color: var(--cyan); } | |
| .preset-pill.active { background: rgba(34,211,238,0.1); border-color: var(--cyan); color: var(--cyan); } | |
| .milestone-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); | |
| gap: 10px; | |
| margin-top: 16px; | |
| } | |
| .milestone-card { | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r-sm); | |
| padding: 14px; | |
| text-align: center; | |
| transition: all var(--transition); | |
| } | |
| .milestone-card.reached { | |
| border-color: var(--emerald); | |
| background: rgba(16,185,129,0.07); | |
| } | |
| .milestone-card.reached .ms-icon { filter: none; } | |
| .milestone-icon { font-size: 28px; margin-bottom: 6px; filter: grayscale(0.7); } | |
| .milestone-val { font-family: var(--font-head); font-size: 18px; font-weight: 800; margin-bottom: 4px; } | |
| .milestone-lbl { font-size: 11px; color: var(--text2); } | |
| .milestone-yr { font-size: 10px; color: var(--emerald); margin-top: 4px; font-weight: 700; } | |
| .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top:16px; } | |
| .compare-box { | |
| background: var(--bg3); | |
| border-radius: var(--r-sm); | |
| padding: 16px; | |
| text-align: center; | |
| border: 1px solid var(--border); | |
| } | |
| .cb-label { font-size: 12px; color: var(--text2); margin-bottom: 8px; font-weight: 600; } | |
| .cb-val { font-family: var(--font-head); font-size: 24px; font-weight: 800; } | |
| .sip-frequency { | |
| display: flex; | |
| gap: 8px; | |
| margin-bottom: 16px; | |
| } | |
| .freq-btn { | |
| flex: 1; | |
| padding: 10px; | |
| border-radius: var(--r-sm); | |
| border: 1px solid var(--border); | |
| background: transparent; | |
| color: var(--text2); | |
| font-family: var(--font-body); | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| } | |
| .freq-btn.active { border-color: var(--cyan); background: rgba(34,211,238,0.1); color: var(--cyan); } | |
| .inflation-impact { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 16px; | |
| background: var(--bg3); | |
| border-radius: var(--r-sm); | |
| border-left: 3px solid var(--rose); | |
| margin-bottom: 16px; | |
| } | |
| .inf-icon { font-size: 32px; } | |
| .inf-text { flex: 1; } | |
| .inf-title { font-weight: 700; margin-bottom: 4px; } | |
| .inf-desc { font-size: 13px; color: var(--text2); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-shell"> | |
| <nav class="sidebar"> | |
| <div class="sidebar-logo"> | |
| <div class="logo-mark"> | |
| <div class="logo-icon">📈</div> | |
| <div><div class="logo-text">FinWise</div><div class="logo-sub">Smart Investing</div></div> | |
| </div> | |
| </div> | |
| <div class="nav-section"> | |
| <div class="nav-label">Main</div> | |
| <a href="index.html" class="nav-item"><span class="nav-icon">🏠</span> Dashboard</a> | |
| <a href="portfolio.html" class="nav-item"><span class="nav-icon">📊</span> Portfolio Builder</a> | |
| <a href="risk.html" class="nav-item"><span class="nav-icon">🎯</span> Risk Analyzer</a> | |
| <a href="tracker.html" class="nav-item"><span class="nav-icon">📈</span> Tracker</a> | |
| <div class="nav-label">Tools</div> | |
| <a href="calculators.html" class="nav-item"><span class="nav-icon">🧮</span> Calculators</a> | |
| <a href="insights.html" class="nav-item"><span class="nav-icon">💡</span> Insights</a> | |
| </div> | |
| <div class="sidebar-footer"> | |
| <div class="market-ticker">Live Market</div> | |
| <div id="sidebar-tickers"></div> | |
| </div> | |
| </nav> | |
| <main class="main-content"> | |
| <div class="page-header fade-in"> | |
| <div class="page-title">Financial <span>Calculators</span></div> | |
| <div class="page-subtitle">Interactive tools to plan, project, and optimize your wealth</div> | |
| </div> | |
| <!-- Calculator Tabs --> | |
| <div class="calc-tabs fade-in"> | |
| <button class="calc-tab active" data-calc="growth"> | |
| <span class="calc-tab-icon">📈</span> Investment Growth | |
| </button> | |
| <button class="calc-tab" data-calc="retirement"> | |
| <span class="calc-tab-icon">🏖️</span> Retirement | |
| </button> | |
| <button class="calc-tab" data-calc="sip"> | |
| <span class="calc-tab-icon">🔄</span> SIP / Recurring | |
| </button> | |
| <button class="calc-tab" data-calc="inflation"> | |
| <span class="calc-tab-icon">🔥</span> Inflation Impact | |
| </button> | |
| </div> | |
| <!-- ════════════════════════════════════════════════════════════ | |
| CALCULATOR 1: Investment Growth | |
| ════════════════════════════════════════════════════════════ --> | |
| <div class="calc-panel active fade-in" id="calc-growth"> | |
| <div class="grid-60-40"> | |
| <div> | |
| <div class="card"> | |
| <div class="section-title">📈 Investment Growth Calculator</div> | |
| <div class="text-muted text-sm" style="margin-bottom:20px">See how your one-time investment grows over time with compound returns</div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">💵 Initial Investment</span><span class="slider-val" id="g-init-val">$10,000</span></div> | |
| <div class="preset-pills"> | |
| <button class="preset-pill" onclick="setGrowthPreset('g-init',1000)">$1K</button> | |
| <button class="preset-pill active" onclick="setGrowthPreset('g-init',10000)">$10K</button> | |
| <button class="preset-pill" onclick="setGrowthPreset('g-init',25000)">$25K</button> | |
| <button class="preset-pill" onclick="setGrowthPreset('g-init',50000)">$50K</button> | |
| <button class="preset-pill" onclick="setGrowthPreset('g-init',100000)">$100K</button> | |
| </div> | |
| <input type="range" id="g-init" min="500" max="200000" value="10000" step="500" oninput="calcGrowth()"> | |
| </div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">📅 Time Horizon</span><span class="slider-val" id="g-years-val">20 years</span></div> | |
| <div class="preset-pills"> | |
| <button class="preset-pill" onclick="setGrowthPreset('g-years',5)">5yr</button> | |
| <button class="preset-pill" onclick="setGrowthPreset('g-years',10)">10yr</button> | |
| <button class="preset-pill active" onclick="setGrowthPreset('g-years',20)">20yr</button> | |
| <button class="preset-pill" onclick="setGrowthPreset('g-years',30)">30yr</button> | |
| </div> | |
| <input type="range" id="g-years" min="1" max="50" value="20" step="1" oninput="calcGrowth()"> | |
| </div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">📊 Annual Return Rate</span><span class="slider-val" id="g-rate-val">8%</span></div> | |
| <div class="preset-pills"> | |
| <button class="preset-pill" onclick="setGrowthPreset('g-rate',4,'%')">Bonds 4%</button> | |
| <button class="preset-pill" onclick="setGrowthPreset('g-rate',7,'%')">S&P Avg 7%</button> | |
| <button class="preset-pill active" onclick="setGrowthPreset('g-rate',8,'%')">Moderate 8%</button> | |
| <button class="preset-pill" onclick="setGrowthPreset('g-rate',12,'%')">Aggressive 12%</button> | |
| </div> | |
| <input type="range" id="g-rate" min="1" max="25" value="8" step="0.5" oninput="calcGrowth()"> | |
| </div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">📆 Compound Frequency</span><span class="slider-val" id="g-compound-val">Annually</span></div> | |
| <input type="range" id="g-compound" min="1" max="12" value="1" step="1" oninput="calcGrowth()"> | |
| <div style="display:flex;justify-content:space-between;font-size:11px;color:var(--text3);margin-top:4px"> | |
| <span>Annually</span><span>Quarterly</span><span>Monthly</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="result-hero"> | |
| <div class="result-label">Future Value</div> | |
| <div class="result-value positive" id="g-future">$0</div> | |
| <div class="result-sub" id="g-sub">You'd earn <strong id="g-profit">$0</strong> in profit</div> | |
| </div> | |
| <div class="result-breakdown"> | |
| <div class="rb-box"> | |
| <div class="rb-box-label">Invested</div> | |
| <div class="rb-box-val" id="g-rb-invested">$0</div> | |
| </div> | |
| <div class="rb-box"> | |
| <div class="rb-box-label">Earnings</div> | |
| <div class="rb-box-val" style="color:var(--emerald)" id="g-rb-earn">$0</div> | |
| </div> | |
| <div class="rb-box"> | |
| <div class="rb-box-label">Total Return</div> | |
| <div class="rb-box-val" style="color:var(--cyan)" id="g-rb-pct">0%</div> | |
| </div> | |
| </div> | |
| <div class="card" style="padding:16px"> | |
| <div class="card-title">📊 Growth Over Time</div> | |
| <div class="chart-panel"> | |
| <canvas id="growthChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Milestones --> | |
| <div class="card" style="margin-top:16px;padding:16px"> | |
| <div class="card-title">🏆 Milestones</div> | |
| <div class="milestone-grid" id="milestones-grid"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ════════════════════════════════════════════════════════════ | |
| CALCULATOR 2: Retirement | |
| ════════════════════════════════════════════════════════════ --> | |
| <div class="calc-panel" id="calc-retirement"> | |
| <div class="grid-60-40"> | |
| <div> | |
| <div class="card"> | |
| <div class="section-title">🏖️ Retirement Calculator</div> | |
| <div class="text-muted text-sm" style="margin-bottom:20px">Plan your retirement savings and see if you're on track</div> | |
| <div class="input-row" style="margin-bottom:16px"> | |
| <div class="field-group"> | |
| <label class="field-label">Current Age</label> | |
| <input type="number" id="ret-age" value="30" min="18" max="80" oninput="calcRetirement()"> | |
| </div> | |
| <div class="field-group"> | |
| <label class="field-label">Retirement Age</label> | |
| <input type="number" id="ret-age2" value="65" min="40" max="85" oninput="calcRetirement()"> | |
| </div> | |
| </div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">💰 Current Savings</span><span class="slider-val" id="ret-saved-val">$15,000</span></div> | |
| <input type="range" id="ret-saved" min="0" max="500000" value="15000" step="1000" oninput="calcRetirement()"> | |
| </div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">📅 Monthly Contribution</span><span class="slider-val" id="ret-monthly-val">$500/mo</span></div> | |
| <input type="range" id="ret-monthly" min="50" max="5000" value="500" step="50" oninput="calcRetirement()"> | |
| </div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">📈 Annual Return</span><span class="slider-val" id="ret-rate-val">7%</span></div> | |
| <input type="range" id="ret-rate" min="2" max="15" value="7" step="0.5" oninput="calcRetirement()"> | |
| </div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">🏦 Desired Monthly Income in Retirement</span><span class="slider-val" id="ret-need-val">$4,000/mo</span></div> | |
| <input type="range" id="ret-need" min="1000" max="20000" value="4000" step="500" oninput="calcRetirement()"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="result-hero"> | |
| <div class="result-label">Retirement Nest Egg</div> | |
| <div class="result-value positive" id="ret-future">$0</div> | |
| <div class="result-sub" id="ret-status">—</div> | |
| </div> | |
| <div class="result-breakdown"> | |
| <div class="rb-box"> | |
| <div class="rb-box-label">Years to Retire</div> | |
| <div class="rb-box-val" style="color:var(--amber)" id="ret-rb-years">0</div> | |
| </div> | |
| <div class="rb-box"> | |
| <div class="rb-box-label">Monthly Draw</div> | |
| <div class="rb-box-val" style="color:var(--cyan)" id="ret-rb-draw">$0/mo</div> | |
| </div> | |
| <div class="rb-box"> | |
| <div class="rb-box-label">Fund Duration</div> | |
| <div class="rb-box-val" style="color:var(--emerald)" id="ret-rb-dur">0 yrs</div> | |
| </div> | |
| </div> | |
| <div class="card" style="padding:16px"> | |
| <div class="card-title">📊 Savings Trajectory</div> | |
| <div class="chart-panel"> | |
| <canvas id="retChart"></canvas> | |
| </div> | |
| </div> | |
| <div id="ret-on-track-box" style="margin-top:16px;padding:16px;border-radius:var(--r-sm);border:1px solid"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ════════════════════════════════════════════════════════════ | |
| CALCULATOR 3: SIP / Recurring | |
| ════════════════════════════════════════════════════════════ --> | |
| <div class="calc-panel" id="calc-sip"> | |
| <div class="grid-60-40"> | |
| <div> | |
| <div class="card"> | |
| <div class="section-title">🔄 SIP / Recurring Investment</div> | |
| <div class="text-muted text-sm" style="margin-bottom:16px">How regular investments compound over time</div> | |
| <div style="margin-bottom:16px"> | |
| <div class="field-label" style="margin-bottom:8px">Contribution Frequency</div> | |
| <div class="sip-frequency"> | |
| <button class="freq-btn" onclick="setSipFreq('weekly',this)">Weekly</button> | |
| <button class="freq-btn active" onclick="setSipFreq('monthly',this)">Monthly</button> | |
| <button class="freq-btn" onclick="setSipFreq('quarterly',this)">Quarterly</button> | |
| <button class="freq-btn" onclick="setSipFreq('annually',this)">Annually</button> | |
| </div> | |
| </div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">💵 Contribution Amount</span><span class="slider-val" id="sip-amount-val">$300/mo</span></div> | |
| <div class="preset-pills"> | |
| <button class="preset-pill" onclick="setSipPreset('sip-amount',100)">$100</button> | |
| <button class="preset-pill active" onclick="setSipPreset('sip-amount',300)">$300</button> | |
| <button class="preset-pill" onclick="setSipPreset('sip-amount',500)">$500</button> | |
| <button class="preset-pill" onclick="setSipPreset('sip-amount',1000)">$1K</button> | |
| </div> | |
| <input type="range" id="sip-amount" min="10" max="5000" value="300" step="10" oninput="calcSIP()"> | |
| </div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">📅 Duration</span><span class="slider-val" id="sip-years-val">15 years</span></div> | |
| <input type="range" id="sip-years" min="1" max="40" value="15" step="1" oninput="calcSIP()"> | |
| </div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">📊 Expected Return</span><span class="slider-val" id="sip-rate-val">9%</span></div> | |
| <input type="range" id="sip-rate" min="2" max="20" value="9" step="0.5" oninput="calcSIP()"> | |
| </div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">📈 Annual Step-Up %</span><span class="slider-val" id="sip-stepup-val">0%</span></div> | |
| <input type="range" id="sip-stepup" min="0" max="20" value="0" step="1" oninput="calcSIP()"> | |
| <div class="text-muted text-sm" style="margin-top:4px">Increase contribution amount each year by this %</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="result-hero"> | |
| <div class="result-label">Total Wealth Created</div> | |
| <div class="result-value positive" id="sip-future">$0</div> | |
| <div class="result-sub">Total invested: <strong id="sip-invested">$0</strong></div> | |
| </div> | |
| <div class="result-breakdown"> | |
| <div class="rb-box"> | |
| <div class="rb-box-label">Invested</div> | |
| <div class="rb-box-val" id="sip-rb-inv">$0</div> | |
| </div> | |
| <div class="rb-box"> | |
| <div class="rb-box-label">Gains</div> | |
| <div class="rb-box-val" style="color:var(--emerald)" id="sip-rb-gain">$0</div> | |
| </div> | |
| <div class="rb-box"> | |
| <div class="rb-box-label">Gain %</div> | |
| <div class="rb-box-val" style="color:var(--cyan)" id="sip-rb-pct">0%</div> | |
| </div> | |
| </div> | |
| <div class="card" style="padding:16px"> | |
| <div class="card-title">📊 Contribution vs Growth</div> | |
| <div class="chart-panel"> | |
| <canvas id="sipChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="compare-grid"> | |
| <div class="compare-box"> | |
| <div class="cb-label">💤 Without Investing<br>(under mattress)</div> | |
| <div class="cb-val" id="sip-no-invest" style="color:var(--rose)">$0</div> | |
| </div> | |
| <div class="compare-box"> | |
| <div class="cb-label">📈 With Investing<br>(your strategy)</div> | |
| <div class="cb-val" id="sip-with-invest" style="color:var(--emerald)">$0</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ════════════════════════════════════════════════════════════ | |
| CALCULATOR 4: Inflation Impact | |
| ════════════════════════════════════════════════════════════ --> | |
| <div class="calc-panel" id="calc-inflation"> | |
| <div class="grid-60-40"> | |
| <div> | |
| <div class="card"> | |
| <div class="section-title">🔥 Inflation Impact Calculator</div> | |
| <div class="text-muted text-sm" style="margin-bottom:20px">Understand how inflation erodes your money's purchasing power</div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">💵 Amount Today</span><span class="slider-val" id="inf-amount-val">$10,000</span></div> | |
| <div class="preset-pills"> | |
| <button class="preset-pill" onclick="setInfPreset('inf-amount',5000)">$5K</button> | |
| <button class="preset-pill active" onclick="setInfPreset('inf-amount',10000)">$10K</button> | |
| <button class="preset-pill" onclick="setInfPreset('inf-amount',50000)">$50K</button> | |
| <button class="preset-pill" onclick="setInfPreset('inf-amount',100000)">$100K</button> | |
| </div> | |
| <input type="range" id="inf-amount" min="1000" max="500000" value="10000" step="1000" oninput="calcInflation()"> | |
| </div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">📅 Years Ahead</span><span class="slider-val" id="inf-years-val">20 years</span></div> | |
| <input type="range" id="inf-years" min="1" max="50" value="20" step="1" oninput="calcInflation()"> | |
| </div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">🔥 Annual Inflation Rate</span><span class="slider-val" id="inf-rate-val">3.5%</span></div> | |
| <div class="preset-pills"> | |
| <button class="preset-pill" onclick="setInfPreset('inf-rate',2)">Low 2%</button> | |
| <button class="preset-pill active" onclick="setInfPreset('inf-rate',3.5)">Average 3.5%</button> | |
| <button class="preset-pill" onclick="setInfPreset('inf-rate',6)">High 6%</button> | |
| <button class="preset-pill" onclick="setInfPreset('inf-rate',10)">Crisis 10%</button> | |
| </div> | |
| <input type="range" id="inf-rate" min="0.5" max="15" value="3.5" step="0.5" oninput="calcInflation()"> | |
| </div> | |
| <div class="slider-wrap"> | |
| <div class="slider-header"><span class="slider-label">📈 Investment Return Rate</span><span class="slider-val" id="inf-invest-val">7%</span></div> | |
| <input type="range" id="inf-invest" min="0" max="20" value="7" step="0.5" oninput="calcInflation()"> | |
| <div class="text-muted text-sm" style="margin-top:4px">If you invest vs keep as cash</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="inflation-impact"> | |
| <div class="inf-icon">💸</div> | |
| <div class="inf-text"> | |
| <div class="inf-title">Purchasing Power Loss</div> | |
| <div class="inf-desc">Your money <strong id="inf-today">$10,000</strong> today will only be worth <strong id="inf-future-worth" style="color:var(--rose)">—</strong> in real terms after <span id="inf-years-txt">20</span> years.</div> | |
| </div> | |
| </div> | |
| <div class="result-hero"> | |
| <div class="result-label">Inflation-Adjusted Value</div> | |
| <div class="result-value" id="inf-result" style="color:var(--rose)">$0</div> | |
| <div class="result-sub">Real purchasing power loss: <strong id="inf-loss" style="color:var(--rose)">$0</strong></div> | |
| </div> | |
| <div class="result-breakdown"> | |
| <div class="rb-box"> | |
| <div class="rb-box-label">Nominal Value</div> | |
| <div class="rb-box-val" id="inf-rb-nom">$0</div> | |
| </div> | |
| <div class="rb-box"> | |
| <div class="rb-box-label">Real Value</div> | |
| <div class="rb-box-val" style="color:var(--rose)" id="inf-rb-real">$0</div> | |
| </div> | |
| <div class="rb-box"> | |
| <div class="rb-box-label">If Invested</div> | |
| <div class="rb-box-val" style="color:var(--emerald)" id="inf-rb-inv">$0</div> | |
| </div> | |
| </div> | |
| <div class="card" style="padding:16px"> | |
| <div class="card-title">📊 Cash vs Invested vs Inflation</div> | |
| <div class="chart-panel"> | |
| <canvas id="infChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <nav class="bottom-nav"> | |
| <div class="bottom-nav-inner"> | |
| <a href="index.html" class="bottom-nav-item"><span class="bnav-icon">🏠</span>Home</a> | |
| <a href="portfolio.html" class="bottom-nav-item"><span class="bnav-icon">📊</span>Portfolio</a> | |
| <a href="risk.html" class="bottom-nav-item"><span class="bnav-icon">🎯</span>Risk</a> | |
| <a href="tracker.html" class="bottom-nav-item"><span class="bnav-icon">📈</span>Track</a> | |
| <a href="calculators.html" class="bottom-nav-item"><span class="bnav-icon">🧮</span>Calc</a> | |
| <a href="insights.html" class="bottom-nav-item"><span class="bnav-icon">💡</span>Insights</a> | |
| </div> | |
| </nav> | |
| <script src="shared.js"></script> | |
| <script> | |
| // ══ Tab Switching ═════════════════════════════════════════════════ | |
| document.querySelectorAll('.calc-tab').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| document.querySelectorAll('.calc-tab,.calc-panel').forEach(el => el.classList.remove('active')); | |
| btn.classList.add('active'); | |
| document.getElementById('calc-' + btn.dataset.calc).classList.add('active'); | |
| setTimeout(() => { calcGrowth(); calcRetirement(); calcSIP(); calcInflation(); }, 50); | |
| }); | |
| }); | |
| // ══ Shared helpers ════════════════════════════════════════════════ | |
| let growthChart=null, retChart=null, sipChart=null, infChart=null; | |
| let sipFreq = 'monthly'; // periods per year | |
| const FREQ_MAP = { weekly:52, monthly:12, quarterly:4, annually:1 }; | |
| const FREQ_LABEL = { weekly:'wk', monthly:'mo', quarterly:'qtr', annually:'yr' }; | |
| function sliderSync(id, labelId, prefix='$', suffix='', scale=1, decimals=0) { | |
| const el = document.getElementById(id); | |
| const lbl = document.getElementById(labelId); | |
| const update = () => { | |
| const v = parseFloat(el.value) * scale; | |
| lbl.textContent = prefix + (decimals ? v.toFixed(decimals) : Math.round(v).toLocaleString()) + suffix; | |
| }; | |
| el.addEventListener('input', update); | |
| } | |
| // ══ CALCULATOR 1: Investment Growth ═══════════════════════════════ | |
| function setGrowthPreset(id, val, unit) { | |
| document.getElementById(id).value = val; | |
| calcGrowth(); | |
| } | |
| function setSipPreset(id, val) { document.getElementById(id).value = val; calcSIP(); } | |
| function setInfPreset(id, val) { document.getElementById(id).value = val; calcInflation(); } | |
| function calcGrowth() { | |
| const P = parseFloat(document.getElementById('g-init').value); | |
| const n = parseInt(document.getElementById('g-years').value); | |
| const r = parseFloat(document.getElementById('g-rate').value) / 100; | |
| const c = parseInt(document.getElementById('g-compound').value); | |
| document.getElementById('g-init-val').textContent = '$' + P.toLocaleString(); | |
| document.getElementById('g-years-val').textContent = n + ' year' + (n===1?'':'s'); | |
| const compoundLabels = {1:'Annually',2:'Semi-annually',3:'Tri-annually',4:'Quarterly',6:'Bi-monthly',12:'Monthly'}; | |
| document.getElementById('g-compound-val').textContent = compoundLabels[c] || c + 'x/yr'; | |
| document.getElementById('g-rate-val').textContent = r*100 + '%'; | |
| const FV = P * Math.pow(1 + r/c, c*n); | |
| const profit = FV - P; | |
| const pct = (profit/P)*100; | |
| document.getElementById('g-future').textContent = fmt$(FV); | |
| document.getElementById('g-profit').textContent = fmt$(profit); | |
| document.getElementById('g-rb-invested').textContent = fmt$(P); | |
| document.getElementById('g-rb-earn').textContent = fmt$(profit); | |
| document.getElementById('g-rb-pct').textContent = '+' + pct.toFixed(1) + '%'; | |
| // Chart data | |
| const years = Array.from({length:n+1},(_,i)=>i); | |
| const vals = years.map(y => P * Math.pow(1+r/c, c*y)); | |
| const invested = years.map(() => P); | |
| if (growthChart) growthChart.destroy(); | |
| const ctx = document.getElementById('growthChart').getContext('2d'); | |
| const grad = ctx.createLinearGradient(0,0,0,260); | |
| grad.addColorStop(0,'rgba(16,185,129,0.35)'); grad.addColorStop(1,'rgba(16,185,129,0)'); | |
| growthChart = new Chart(ctx, { | |
| type:'line', | |
| data:{ | |
| labels: years.map(y => 'Yr '+y), | |
| datasets:[ | |
| { label:'Portfolio Value', data:vals, borderColor:'#10b981', backgroundColor:grad, borderWidth:2.5, fill:true, tension:0.4, pointRadius:0 }, | |
| { label:'Amount Invested', data:invested, borderColor:'rgba(34,211,238,0.5)', borderDash:[5,5], borderWidth:1.5, fill:false, pointRadius:0, tension:0 } | |
| ] | |
| }, | |
| options:{ responsive:true, maintainAspectRatio:false, | |
| plugins:{ legend:{ labels:{font:{size:11}} }, | |
| tooltip:{ callbacks:{ label: ctx => ' '+fmt$(ctx.raw) } } }, | |
| scales:{ | |
| x:{ grid:{display:false}, ticks:{maxTicksLimit:8,font:{size:11}} }, | |
| y:{ grid:{color:'rgba(34,211,238,0.06)'}, ticks:{ callback:v=>'$'+(v/1000).toFixed(0)+'K', font:{size:11} } } | |
| } | |
| } | |
| }); | |
| // Milestones | |
| const milestones = [ | |
| { icon:'💯', label:'2× Money', target:P*2 }, | |
| { icon:'🚀', label:'5× Money', target:P*5 }, | |
| { icon:'💎', label:'10× Money', target:P*10 }, | |
| { icon:'🌟', label:'$100K', target:100000 }, | |
| { icon:'🏆', label:'$250K', target:250000 }, | |
| { icon:'👑', label:'$1M', target:1000000 }, | |
| ]; | |
| document.getElementById('milestones-grid').innerHTML = milestones.map(m => { | |
| const reached = FV >= m.target; | |
| const yearsTo = reached ? Math.log(m.target/P) / (c * Math.log(1+r/c)) : null; | |
| return ` | |
| <div class="milestone-card ${reached?'reached':''}"> | |
| <div class="milestone-icon">${m.icon}</div> | |
| <div class="milestone-val">${m.label}</div> | |
| <div class="milestone-lbl">${fmt$(m.target)}</div> | |
| ${reached ? `<div class="milestone-yr">✅ ~Yr ${Math.round(yearsTo)}</div>` : `<div class="milestone-yr" style="color:var(--text3)">Not reached</div>`} | |
| </div>`; | |
| }).join(''); | |
| } | |
| // ══ CALCULATOR 2: Retirement ══════════════════════════════════════ | |
| function calcRetirement() { | |
| const age = parseInt(document.getElementById('ret-age').value) || 30; | |
| const retAge = parseInt(document.getElementById('ret-age2').value) || 65; | |
| const saved = parseFloat(document.getElementById('ret-saved').value); | |
| const mo = parseFloat(document.getElementById('ret-monthly').value); | |
| const r = parseFloat(document.getElementById('ret-rate').value)/100; | |
| const need = parseFloat(document.getElementById('ret-need').value); | |
| document.getElementById('ret-saved-val').textContent = '$'+saved.toLocaleString(); | |
| document.getElementById('ret-monthly-val').textContent = '$'+mo.toLocaleString()+'/mo'; | |
| document.getElementById('ret-rate-val').textContent = r*100 + '%'; | |
| document.getElementById('ret-need-val').textContent = '$'+need.toLocaleString()+'/mo'; | |
| const years = Math.max(retAge - age, 1); | |
| const rMo = r/12; | |
| const FV_existing = saved * Math.pow(1+r, years); | |
| const FV_contrib = mo * ((Math.pow(1+rMo, years*12)-1)/rMo); | |
| const total = FV_existing + FV_contrib; | |
| const annualy = need * 12; | |
| const fundDur = total > 0 ? Math.log(1 - (annualy * (1-(1+r/4))) / (total * (r/4))) / Math.log(1+r/4) * (-1) : 0; | |
| const safeDrawdown = total * 0.04 / 12; | |
| const onTrack = total >= annualy * 25; | |
| document.getElementById('ret-future').textContent = fmt$(total); | |
| document.getElementById('ret-rb-years').textContent = years + ' yrs'; | |
| document.getElementById('ret-rb-draw').textContent = '$' + Math.round(safeDrawdown).toLocaleString() + '/mo'; | |
| document.getElementById('ret-rb-dur').textContent = Math.round(Math.max(fundDur,0)) + ' yrs'; | |
| const box = document.getElementById('ret-on-track-box'); | |
| if (onTrack) { | |
| box.style.cssText = 'padding:16px;border-radius:var(--r-sm);border:1px solid rgba(16,185,129,0.4);background:rgba(16,185,129,0.08)'; | |
| box.innerHTML = `<div style="font-weight:700;color:var(--emerald);margin-bottom:6px">✅ You're on track!</div> | |
| <div style="font-size:13px;color:var(--text2)">Your projected nest egg supports $${Math.round(safeDrawdown).toLocaleString()}/mo using the 4% rule. That's more than your $${need.toLocaleString()}/mo target.</div>`; | |
| } else { | |
| const gap = annualy*25 - total; | |
| box.style.cssText = 'padding:16px;border-radius:var(--r-sm);border:1px solid rgba(245,158,11,0.4);background:rgba(245,158,11,0.08)'; | |
| box.innerHTML = `<div style="font-weight:700;color:var(--amber);margin-bottom:6px">⚠️ Savings Gap Detected</div> | |
| <div style="font-size:13px;color:var(--text2)">You're projected to be <strong style="color:var(--amber)">${fmt$(gap)}</strong> short of your retirement goal. Consider increasing contributions by $${Math.round(gap/(years*12)).toLocaleString()}/mo.</div>`; | |
| } | |
| document.getElementById('ret-status').textContent = onTrack ? '🎉 On track for retirement!' : `Need ${fmt$(annualy*25)} total`; | |
| // Chart | |
| const yrs = Array.from({length:years+1},(_,i)=>i); | |
| const trajectory = yrs.map(y => { | |
| const fe = saved * Math.pow(1+r,y); | |
| const fc = mo * ((Math.pow(1+r/12, y*12)-1)/(r/12)); | |
| return fe+fc; | |
| }); | |
| if (retChart) retChart.destroy(); | |
| const ctx = document.getElementById('retChart').getContext('2d'); | |
| const grad = ctx.createLinearGradient(0,0,0,260); | |
| grad.addColorStop(0,'rgba(34,211,238,0.3)'); grad.addColorStop(1,'rgba(34,211,238,0)'); | |
| retChart = new Chart(ctx, { | |
| type:'line', | |
| data:{ | |
| labels: yrs.map(y => age+y), | |
| datasets:[ | |
| { label:'Projected Savings', data:trajectory, borderColor:'#22d3ee', backgroundColor:grad, borderWidth:2.5, fill:true, tension:0.4, pointRadius:0 }, | |
| { label:'Target', data:yrs.map(()=>annualy*25), borderColor:'rgba(245,158,11,0.6)', borderDash:[6,4], borderWidth:1.5, fill:false, pointRadius:0 } | |
| ] | |
| }, | |
| options:{ responsive:true, maintainAspectRatio:false, | |
| plugins:{ legend:{labels:{font:{size:11}}}, tooltip:{ callbacks:{ label:ctx=>' '+fmt$(ctx.raw) } } }, | |
| scales:{ | |
| x:{ grid:{display:false}, ticks:{maxTicksLimit:8,font:{size:11}} }, | |
| y:{ grid:{color:'rgba(34,211,238,0.06)'}, ticks:{ callback:v=>'$'+(v/1000).toFixed(0)+'K', font:{size:11} } } | |
| } | |
| } | |
| }); | |
| } | |
| // ══ CALCULATOR 3: SIP ═════════════════════════════════════════════ | |
| function setSipFreq(freq, btn) { | |
| sipFreq = freq; | |
| document.querySelectorAll('.freq-btn').forEach(b=>b.classList.remove('active')); | |
| btn.classList.add('active'); | |
| calcSIP(); | |
| } | |
| function calcSIP() { | |
| const amount = parseFloat(document.getElementById('sip-amount').value); | |
| const years = parseInt(document.getElementById('sip-years').value); | |
| const rate = parseFloat(document.getElementById('sip-rate').value)/100; | |
| const stepup = parseFloat(document.getElementById('sip-stepup').value)/100; | |
| const n = FREQ_MAP[sipFreq]; | |
| const lbl = FREQ_LABEL[sipFreq]; | |
| document.getElementById('sip-amount-val').textContent = '$'+amount.toLocaleString()+'/'+lbl; | |
| document.getElementById('sip-years-val').textContent = years + ' year' + (years===1?'':'s'); | |
| document.getElementById('sip-rate-val').textContent = rate*100 + '%'; | |
| document.getElementById('sip-stepup-val').textContent = (stepup*100).toFixed(0) + '%'; | |
| // Step-up SIP calculation | |
| let FV = 0, totalInvested = 0; | |
| let currentAmount = amount; | |
| const yearlyVals = [], yearlyInv = []; | |
| for (let y=1; y<=years; y++) { | |
| if (y>1 && stepup>0) currentAmount *= (1+stepup); | |
| for (let p=0; p<n; p++) { | |
| FV = (FV + currentAmount) * (1 + rate/n); | |
| totalInvested += currentAmount; | |
| } | |
| yearlyVals.push(FV); | |
| yearlyInv.push(totalInvested); | |
| } | |
| const gain = FV - totalInvested; | |
| const gainPct = (gain/totalInvested)*100; | |
| document.getElementById('sip-future').textContent = fmt$(FV); | |
| document.getElementById('sip-invested').textContent = fmt$(totalInvested); | |
| document.getElementById('sip-rb-inv').textContent = fmt$(totalInvested); | |
| document.getElementById('sip-rb-gain').textContent = fmt$(gain); | |
| document.getElementById('sip-rb-pct').textContent = '+'+gainPct.toFixed(1)+'%'; | |
| document.getElementById('sip-no-invest').textContent = fmt$(totalInvested); | |
| document.getElementById('sip-with-invest').textContent = fmt$(FV); | |
| if (sipChart) sipChart.destroy(); | |
| const ctx = document.getElementById('sipChart').getContext('2d'); | |
| const labels = Array.from({length:years},(_,i)=>'Yr '+(i+1)); | |
| sipChart = new Chart(ctx, { | |
| type:'bar', | |
| data:{ | |
| labels, | |
| datasets:[ | |
| { label:'Total Invested', data:yearlyInv, backgroundColor:'rgba(34,211,238,0.4)', borderRadius:4, order:2 }, | |
| { label:'Portfolio Value', data:yearlyVals, type:'line', borderColor:'#10b981', backgroundColor:'rgba(16,185,129,0.15)', borderWidth:2.5, fill:true, tension:0.4, pointRadius:0, order:1 } | |
| ] | |
| }, | |
| options:{ responsive:true, maintainAspectRatio:false, | |
| plugins:{ legend:{labels:{font:{size:11}}}, tooltip:{ callbacks:{ label:ctx=>' '+fmt$(ctx.raw) } } }, | |
| scales:{ | |
| x:{ grid:{display:false}, stacked:false, ticks:{maxTicksLimit:8,font:{size:11}} }, | |
| y:{ grid:{color:'rgba(34,211,238,0.06)'}, ticks:{ callback:v=>'$'+(v/1000).toFixed(0)+'K', font:{size:11} } } | |
| } | |
| } | |
| }); | |
| } | |
| // ══ CALCULATOR 4: Inflation ═══════════════════════════════════════ | |
| function calcInflation() { | |
| const amount = parseFloat(document.getElementById('inf-amount').value); | |
| const years = parseInt(document.getElementById('inf-years').value); | |
| const infRate = parseFloat(document.getElementById('inf-rate').value)/100; | |
| const invRate = parseFloat(document.getElementById('inf-invest').value)/100; | |
| document.getElementById('inf-amount-val').textContent = '$'+amount.toLocaleString(); | |
| document.getElementById('inf-years-val').textContent = years+' year'+(years===1?'':'s'); | |
| document.getElementById('inf-rate-val').textContent = (infRate*100).toFixed(1)+'%'; | |
| document.getElementById('inf-invest-val').textContent = (invRate*100).toFixed(1)+'%'; | |
| const realValue = amount / Math.pow(1+infRate, years); | |
| const nomValue = amount; // cash under mattress, nominal stays same | |
| const invValue = amount * Math.pow(1+invRate, years); | |
| const loss = amount - realValue; | |
| document.getElementById('inf-today').textContent = fmt$(amount); | |
| document.getElementById('inf-future-worth').textContent = fmt$(realValue); | |
| document.getElementById('inf-years-txt').textContent = years; | |
| document.getElementById('inf-result').textContent = fmt$(realValue); | |
| document.getElementById('inf-loss').textContent = fmt$(loss); | |
| document.getElementById('inf-rb-nom').textContent = fmt$(nomValue); | |
| document.getElementById('inf-rb-real').textContent = fmt$(realValue); | |
| document.getElementById('inf-rb-inv').textContent = fmt$(invValue); | |
| // Chart | |
| const yrs = Array.from({length:years+1},(_,i)=>i); | |
| const cash = yrs.map(()=>amount); | |
| const real = yrs.map(y => amount/Math.pow(1+infRate,y)); | |
| const inv = yrs.map(y => amount*Math.pow(1+invRate,y)); | |
| if (infChart) infChart.destroy(); | |
| const ctx = document.getElementById('infChart').getContext('2d'); | |
| infChart = new Chart(ctx, { | |
| type:'line', | |
| data:{ | |
| labels: yrs.map(y=>'Yr '+y), | |
| datasets:[ | |
| { label:'Invested', data:inv, borderColor:'#10b981', backgroundColor:'rgba(16,185,129,0.1)', borderWidth:2.5, fill:true, tension:0.4, pointRadius:0 }, | |
| { label:'Cash (nominal)', data:cash, borderColor:'rgba(34,211,238,0.5)', borderDash:[5,5], borderWidth:1.5, fill:false, pointRadius:0 }, | |
| { label:'Real Value (after inflation)', data:real, borderColor:'#f43f5e', backgroundColor:'rgba(244,63,94,0.1)', borderWidth:2, fill:true, tension:0.4, pointRadius:0 } | |
| ] | |
| }, | |
| options:{ responsive:true, maintainAspectRatio:false, | |
| plugins:{ legend:{labels:{font:{size:11}}}, tooltip:{ callbacks:{ label:ctx=>' '+fmt$(ctx.raw) } } }, | |
| scales:{ | |
| x:{ grid:{display:false}, ticks:{maxTicksLimit:8,font:{size:11}} }, | |
| y:{ grid:{color:'rgba(34,211,238,0.06)'}, ticks:{ callback:v=>'$'+(v/1000).toFixed(0)+'K', font:{size:11} } } | |
| } | |
| } | |
| }); | |
| } | |
| document.addEventListener('DOMContentLoaded', () => { | |
| applyChartDefaults(); | |
| calcGrowth(); | |
| calcRetirement(); | |
| calcSIP(); | |
| calcInflation(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |