<!DOCTYPE html>



    <title>Social Security Optimization Calculator</title>


        body {

            font-family: Arial, sans-serif;


        form div {

            margin-bottom: 10px;


        label {

            display: block;

            margin-bottom: 5px;



        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;





    <h1>Social Security Optimization Calculator</h1>

    <form id="calculatorForm">


            <label for="clientName">Client Name:</label>

            <input type="text" id="clientName" name="clientName" required>



            <label for="equityAllocation">Equity Allocation:</label>

            <input type="text" id="equityAllocation" name="equityAllocation" required>



            <label for="timeRequired">Time Required (years):</label>

            <input type="number" id="timeRequired" name="timeRequired" required>



            <label for="probabilityOfSuccess">Probability of Success (%):</label>

            <input type="number" id="probabilityOfSuccess" name="probabilityOfSuccess" required>


        <button type="button" onclick="calculateResults()">Calculate</button>



    <div id="results">

        <!-- Results will be displayed here -->




        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>`;