<!DOCTYPE html>
<html>
<head>
<title>Social Security Optimization Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
}
form div {
margin-bottom: 10px;
}
label {
display:
block;
margin-bottom: 5px;
}
input[type="text"],
input[type="number"] {
width:
100%;
padding:
8px;
box-sizing: border-box;
}
button {
padding:
10px 20px;
background-color: #4CAF50;
color:
white;
border:
none;
cursor:
pointer;
}
button:hover {
background-color: #45a049;
}
#results {
margin-top: 20px;
padding:
20px;
border:
1px solid #ddd;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>Social
Security Optimization Calculator</h1>
<form
id="calculatorForm">
<div>
<label
for="clientName">Client Name:</label>
<input
type="text" id="clientName" name="clientName"
required>
</div>
<div>
<label
for="equityAllocation">Equity Allocation:</label>
<input
type="text" id="equityAllocation"
name="equityAllocation" required>
</div>
<div>
<label
for="timeRequired">Time Required (years):</label>
<input
type="number" id="timeRequired"
name="timeRequired" required>
</div>
<div>
<label
for="probabilityOfSuccess">Probability of Success
(%):</label>
<input
type="number" id="probabilityOfSuccess"
name="probabilityOfSuccess" required>
</div>
<button
type="button"
onclick="calculateResults()">Calculate</button>
</form>
<div
id="results">
<!--
Results will be displayed here -->
</div>
<script>
function
calculateResults() {
// Get
input values
const
clientName = document.getElementById('clientName').value;
const
equityAllocation = document.getElementById('equityAllocation').value;
const
timeRequired = parseFloat(document.getElementById('timeRequired').value);
const
probabilityOfSuccess =
parseFloat(document.getElementById('probabilityOfSuccess').value);
// Sample
data from SWRTable (replace with actual data)
const
swrTable = [
{
allocation: "20/80", timeframe: 15, success: 99, fee: 0.0025, rate:
5.39 },
// Add
more data rows here as needed
];
// Find
the matching row in the SWR table
const
match = swrTable.find(row =>
row.allocation === equityAllocation &&
row.timeframe === timeRequired &&
row.success === probabilityOfSuccess
);
//
Calculate results based on the matching row
const
safeWithdrawalRate = match ? match.rate : 0;
const
guaranteedLifetimeIncome = 10000; // Example placeholder value
// Display
results
const
resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = `<h2>Results:</h2>
<p>Client Name: ${clientName}</p>
<p>Equity Allocation: ${equityAllocation}</p>
<p>Time Required: ${timeRequired} years</p>
<p>Probability of Success: ${probabilityOfSuccess}%</p>
<p>Safe Withdrawal Rate: ${safeWithdrawalRate}%</p>
<p>Guaranteed Lifetime Income:
$${guaranteedLifetimeIncome}</p>`;
}
</script>
</body>
</html>