homepage/templates/shortcodes/fund_comparison.html

<div class="fund-comparison-container">
    <noscript>
        <div class="noscript-warning">
            This calculator requires JavaScript to function.
        </div>
    </noscript>

    <form id="fund-comparison-form" class="fund-comparison-form">
        <div class="form-section">
            <h3>S&P 500 Index Fund</h3>
            <div class="form-group">
                <label for="sp500-return">Expected yearly return (%)</label>
                <input type="number" id="sp500-return" value="10" step="0.1" required>
            </div>
            <div class="form-group">
                <label for="sp500-volatility">Volatility / std dev (%)</label>
                <input type="number" id="sp500-volatility" value="15" step="0.1" required>
            </div>
            <div class="form-group">
                <label for="sp500-expense">Expense ratio (%)</label>
                <input type="number" id="sp500-expense" value="0.03" step="0.01" required>
            </div>
        </div>

        <div class="form-section">
            <h3>Compared Fund</h3>
            <div class="form-group">
                <label for="compared-return">Expected yearly return (%)</label>
                <input type="number" id="compared-return" value="7" step="0.1" required>
            </div>
            <div class="form-group">
                <label for="compared-volatility">Volatility / std dev (%)</label>
                <input type="number" id="compared-volatility" value="10" step="0.1" required>
            </div>
            <div class="form-group">
                <label for="compared-admin-fee">Admin fee (% yearly)</label>
                <input type="number" id="compared-admin-fee" value="1" step="0.01">
            </div>
            <div class="form-group">
                <label for="compared-capital-gains">Capital gains tax at withdrawal (%)</label>
                <input type="number" id="compared-capital-gains" value="0" step="0.1">
            </div>
        </div>

        <div class="form-section form-section-full">
            <h3>Investment Parameters</h3>
            <div class="form-row">
                <div class="form-group">
                    <label for="time-frame">Time frame (years)</label>
                    <input type="number" id="time-frame" value="20" min="1" max="50" required>
                </div>
                <div class="form-group">
                    <label for="monthly-deposit">Monthly deposit ($)</label>
                    <input type="number" id="monthly-deposit" value="500" min="1" required>
                </div>
            </div>
            <div class="checkbox-group">
                <input type="checkbox" id="use-monte-carlo" checked>
                <label for="use-monte-carlo">Use Monte Carlo simulation (1000 runs)</label>
            </div>
            <button type="submit" class="calculate-btn">Calculate</button>
        </div>
    </form>

    <div class="chart-container">
        <canvas id="fund-comparison-chart"></canvas>
    </div>

    <div class="summary-section">
        <h3>Summary</h3>
        <table class="summary-table">
            <thead>
                <tr>
                    <th></th>
                    <th>S&P 500 Fund</th>
                    <th>Compared Fund</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Total Deposits</td>
                    <td colspan="2" id="total-deposits">-</td>
                </tr>
                <tr>
                    <td>Final Value (median)</td>
                    <td id="sp500-final">-</td>
                    <td id="compared-final">-</td>
                </tr>
                <tr>
                    <td>Total Gain</td>
                    <td id="sp500-gain">-</td>
                    <td id="compared-gain">-</td>
                </tr>
                <tr>
                    <td>Return Multiple</td>
                    <td id="sp500-multiple">-</td>
                    <td id="compared-multiple">-</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="percentiles-section" class="summary-section">
        <details class="percentiles-details">
            <summary>Percentile Breakdown</summary>
            <table class="summary-table percentiles-table">
                <thead>
                    <tr>
                        <th>Percentile</th>
                        <th>S&P 500 Fund</th>
                        <th>Compared Fund</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>10th (pessimistic)</td>
                        <td id="sp500-p10">-</td>
                        <td id="compared-p10">-</td>
                    </tr>
                    <tr>
                        <td>25th</td>
                        <td id="sp500-p25">-</td>
                        <td id="compared-p25">-</td>
                    </tr>
                    <tr>
                        <td>50th (median)</td>
                        <td id="sp500-p50">-</td>
                        <td id="compared-p50">-</td>
                    </tr>
                    <tr>
                        <td>75th</td>
                        <td id="sp500-p75">-</td>
                        <td id="compared-p75">-</td>
                    </tr>
                    <tr>
                        <td>90th (optimistic)</td>
                        <td id="sp500-p90">-</td>
                        <td id="compared-p90">-</td>
                    </tr>
                </tbody>
            </table>
        </details>
    </div>
</div>

<script src="{{ get_url(path='js/fundComparison.js') | safe }}"></script>