153 lines
5.9 KiB
HTML
153 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Take-Home Pay Calculator & Retirement Analyzer</title>
|
|
<link rel="stylesheet" href="../retirement.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<a href="/">
|
|
<h1>💰 Take-Home Pay Calculator</h1>
|
|
</a>
|
|
<p>2026 Federal & State Tax Calculator with Retirement Analysis</p>
|
|
</header>
|
|
|
|
<div class="layout">
|
|
<div>
|
|
<div class="card">
|
|
<h2><span class="icon">⚙️</span> Your Details</h2>
|
|
<div class="input-group" hidden>
|
|
<label>Gross Annual Pay</label>
|
|
<input type="number" id="grossPay" value="75000" step="1000" min="0">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Gross Paycheck</label>
|
|
<input type="number" id="payCheck" value="3000" step="10" min="0">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Pay Frequency</label>
|
|
<select id="payFreq">
|
|
<option value="52">Weekly (52 periods)</option>
|
|
<option value="26" selected>Bi-Weekly (26 periods)</option>
|
|
<option value="24">Semi-Monthly (24 periods)</option>
|
|
<option value="12">Monthly (12 periods)</option>
|
|
<option value="1">Annually (1 period)</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Filing Status</label>
|
|
<select id="filingStatus">
|
|
<option value="single">Single</option>
|
|
<option value="married_joint">Married Filing Jointly</option>
|
|
<option value="head_household">Head of Household</option>
|
|
<option value="married_separate">Married Filing Separately</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>State</label>
|
|
<select id="state">
|
|
<option value="AL">Alabama</option>
|
|
<option value="AK">Alaska</option>
|
|
<option value="AZ">Arizona</option>
|
|
<option value="AR">Arkansas</option>
|
|
<option value="CA">California</option>
|
|
<option value="CO">Colorado</option>
|
|
<option value="CT">Connecticut</option>
|
|
<option value="DE">Delaware</option>
|
|
<option value="FL">Florida</option>
|
|
<option value="GA">Georgia</option>
|
|
<option value="HI">Hawaii</option>
|
|
<option value="ID">Idaho</option>
|
|
<option value="IL">Illinois</option>
|
|
<option value="IN">Indiana</option>
|
|
<option value="IA">Iowa</option>
|
|
<option value="KS">Kansas</option>
|
|
<option value="KY">Kentucky</option>
|
|
<option value="LA">Louisiana</option>
|
|
<option value="ME">Maine</option>
|
|
<option value="MD">Maryland</option>
|
|
<option value="MA">Massachusetts</option>
|
|
<option value="MI">Michigan</option>
|
|
<option value="MN">Minnesota</option>
|
|
<option value="MS">Mississippi</option>
|
|
<option value="MO">Missouri</option>
|
|
<option value="MT">Montana</option>
|
|
<option value="NE">Nebraska</option>
|
|
<option value="NV">Nevada</option>
|
|
<option value="NH">New Hampshire</option>
|
|
<option value="NJ">New Jersey</option>
|
|
<option value="NM">New Mexico</option>
|
|
<option value="NY">New York</option>
|
|
<option value="NC">North Carolina</option>
|
|
<option value="ND">North Dakota</option>
|
|
<option value="OH">Ohio</option>
|
|
<option value="OK">Oklahoma</option>
|
|
<option value="OR">Oregon</option>
|
|
<option value="PA">Pennsylvania</option>
|
|
<option value="RI">Rhode Island</option>
|
|
<option value="SC">South Carolina</option>
|
|
<option value="SD">South Dakota</option>
|
|
<option value="TN">Tennessee</option>
|
|
<option value="TX">Texas</option>
|
|
<option value="UT">Utah</option>
|
|
<option value="VT">Vermont</option>
|
|
<option value="VA">Virginia</option>
|
|
<option value="WA">Washington</option>
|
|
<option value="WV">West Virginia</option>
|
|
<option value="WI">Wisconsin</option>
|
|
<option value="WY">Wyoming</option>
|
|
<option value="DC">Washington D.C.</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>City Tax (%)</label>
|
|
<input type="range" id="cityTax" min= "0" max="10" value="0" step="0.5"></input>
|
|
<span id="cityTaxDisplay" style="font-size:0.8rem; color:var(--accent-light);">0%</span>
|
|
</div>
|
|
<hr style="border-color: var(--border); margin: 18px 0;">
|
|
<div class="two-col">
|
|
<div class="input-group">
|
|
<label>Retirement Contribution (%)</label>
|
|
<input type="range" id="retPct" min="0" max="25" step="0.5" value="10">
|
|
<span id="retPctDisplay" style="font-size:0.8rem; color:var(--accent-light);">10%</span>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Pre-Tax Deductions ($/pay)</label>
|
|
<input type="number" id="preTaxPay" value="0" min="0" step="1">
|
|
</div>
|
|
</div>
|
|
<div class="two-col">
|
|
<div class="input-group">
|
|
<label>Post-Tax Deductions ($/pay)</label>
|
|
<input type="number" id="postTaxPay" value="0" min="0" step="1">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Other Deductions ($/pay)</label>
|
|
<input type="number" id="otherPay" value="0" min="0" step="1">
|
|
</div>
|
|
</div>
|
|
<button class="btn" id="calcBtn">Calculate Take-Home Pay</button>
|
|
<div class="tax-brackets-info">
|
|
<strong>2026 Standard Deduction:</strong> <span id="stdDedLabel">$16,100</span> |
|
|
<strong>FICA Rate:</strong> 7.65% (SS 6.2% + Medicare 1.45%)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-panel" id="rightPanel">
|
|
<div class="empty-state">
|
|
<div class="icon">📊</div>
|
|
<p>Enter your details and click <strong>Calculate</strong> to see your take-home pay breakdown.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../taxes.js"></script>
|
|
<script src="calc.js"></script>
|
|
<script src="../global.js"></script>
|
|
</body>
|
|
</html>
|