<!DOCTYPE html>

<head>

<title>60% Net Fixed-Cost Calculator</title>

<style>

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

color: #e0e0e0;

min-height: 100vh;

padding: 20px;

line-height: 1.6;

}

.container {

max-width: 600px;

margin: 0 auto;

background: #0f0f23;

border-radius: 12px;

padding: 30px;

box-shadow: 0 10px 40px rgba(0,0,0,0.5);

border: 1px solid #2a2a4a;

}

h1 {

color: #ffffff;

font-size: 1.5rem;

margin-bottom: 0.5rem;

text-align: center;

}

.subtitle {

text-align: center;

color: #888;

font-size: 0.9rem;

margin-bottom: 2rem;

}

.input-group {

margin-bottom: 1.2rem;

}

label {

display: block;

margin-bottom: 0.4rem;

color: #aaa;

font-size: 0.9rem;

font-weight: 500;

}

input[type="number"] {

width: 100%;

padding: 12px;

border: 1px solid #2a2a4a;

border-radius: 6px;

background: #1a1a2e;

color: #fff;

font-size: 1rem;

transition: border-color 0.2s;

}

input[type="number"]:focus {

outline: none;

border-color: #4a9eff;

}

.section-title {

color: #4a9eff;

font-size: 1.1rem;

font-weight: 600;

margin: 1.5rem 0 0.8rem 0;

padding-bottom: 0.5rem;

border-bottom: 1px solid #2a2a4a;

}

.results {

margin-top: 2rem;

padding: 1.5rem;

background: #1a1a2e;

border-radius: 8px;

border: 1px solid #2a2a4a;

}

.result-row {

display: flex;

justify-content: space-between;

align-items: center;

padding: 0.8rem 0;

border-bottom: 1px solid #2a2a4a;

}

.result-row:last-child {

border-bottom: none;

}

.result-label {

color: #aaa;

font-size: 0.95rem;

}

.result-value {

font-weight: 600;

font-size: 1.1rem;

}

.status-safe { color: #4ade80; }

.status-caution { color: #fbbf24; }

.status-danger { color: #f87171; }

.status-badge {

display: inline-block;

padding: 0.4rem 1rem;

border-radius: 20px;

font-weight: 700;

font-size: 0.9rem;

text-transform: uppercase;

letter-spacing: 0.5px;

}

.status-safe .status-badge { background: #4ade80; color: #000; }

.status-caution .status-badge { background: #fbbf24; color: #000; }

.status-danger .status-badge { background: #f87171; color: #fff; }

.recommendation {

margin-top: 1.5rem;

padding: 1rem;

border-radius: 6px;

font-size: 0.95rem;

line-height: 1.5;

}

.rec-safe { background: rgba(74, 222, 128, 0.1); border-left: 4px solid #4ade80; }

.rec-caution { background: rgba(251, 191, 36, 0.1); border-left: 4px solid #fbbf24; }

.rec-danger { background: rgba(248, 113, 113, 0.1); border-left: 4px solid #f87171; }

.footer {

margin-top: 2rem;

text-align: center;

font-size: 0.8rem;

color: #666;

}

.privacy-notice {

background: #1a1a2e;

padding: 0.8rem;

border-radius: 6px;

font-size: 0.85rem;

color: #888;

margin-top: 1rem;

text-align: center;

border: 1px solid #2a2a4a;

}

.privacy-notice strong { color: #4a9eff; }

@media (max-width: 480px) {

.container { padding: 20px; }

h1 { font-size: 1.3rem; }

.result-value { font-size: 1rem; }

}

</style>

</head>

<body>

<h1>🔢 60% Net Fixed-Cost Calculator</h1>

<p class="subtitle">The 30% gross rent rule is broken. Find your real ceiling.</p>

<div class="section-title">💰 Income</div>

<label for="grossSalary">Annual Gross Salary ($)</label>

</div>

<label for="taxRate">Estimated Tax Rate (%)</label>

<small style="color:#666; font-size:0.8rem;">Include federal, state, FICA. Typical: 20-35%</small>

</div>

<div class="section-title">📉 Fixed Monthly Costs</div>

<label for="rent">Rent / Mortgage ($)</label>

</div>

<label for="utilities">Utilities (Avg) ($)</label>

</div>

<label for="insurance">Insurance (Health/Car/Rent) ($)</label>

</div>

<label for="debt">Debt Payments (Min) ($)</label>

</div>

<label for="transport">Transport (Gas/Transit) ($)</label>

</div>

<label for="subscriptions">Subscriptions / Phone ($)</label>

</div>

<span class="result-label">Monthly Net Income</span>

</div>

<span class="result-label">Total Fixed Costs</span>

</div>

<span class="result-label">Fixed Cost Ratio</span>

</div>

<span class="result-label">Status</span>

</div>

</div>

</div>

🔒 <strong>Privacy First:</strong> All calculations happen in your browser.

No data is sent to any server. No cookies. No tracking.

</div>

Based on the 60% Net Fixed-Cost Framework.<br>

Not financial advice. For educational purposes only.

</div>

// Get all input elements

const inputs = {

grossSalary: document.getElementById('grossSalary'),

taxRate: document.getElementById('taxRate'),

rent: document.getElementById('rent'),

utilities: document.getElementById('utilities'),

insurance: document.getElementById('insurance'),

debt: document.getElementById('debt'),

transport: document.getElementById('transport'),

subscriptions: document.getElementById('subscriptions')

};

// Get result elements

const results = {

netIncome: document.getElementById('netIncome'),

totalFixed: document.getElementById('totalFixed'),

fixedRatio: document.getElementById('fixedRatio'),

statusBadge: document.getElementById('statusBadge'),

maxSafeRent: document.getElementById('maxSafeRent'),

recommendation: document.getElementById('recommendation'),

resultsContainer: document.getElementById('results'),

statusRow: document.getElementById('statusRow')

};

// Format currency

function formatCurrency(num) {

return '$' + num.toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});

}

// Format percentage

function formatPercent(num) {

return (num * 100).toFixed(1) + '%';

}

// Calculate and update results

function calculate() {

// Get values (default to 0 if empty)

const grossSalary = parseFloat(inputs.grossSalary.value) || 0;

const taxRate = parseFloat(inputs.taxRate.value) || 0;

const rent = parseFloat(inputs.rent.value) || 0;

const utilities = parseFloat(inputs.utilities.value) || 0;

const insurance = parseFloat(inputs.insurance.value) || 0;

const debt = parseFloat(inputs.debt.value) || 0;

const transport = parseFloat(inputs.transport.value) || 0;

const subscriptions = parseFloat(inputs.subscriptions.value) || 0;

// Only show results if we have income data

if (grossSalary <= 0) {

results.resultsContainer.style.display = 'none';

return;

}

// Calculate monthly net income

const annualNet = grossSalary * (1 - (taxRate / 100));

const monthlyNet = annualNet / 12;

// Calculate total fixed costs

const totalFixed = rent + utilities + insurance + debt + transport + subscriptions;

// Calculate fixed cost ratio

const fixedRatio = monthlyNet > 0 ? totalFixed / monthlyNet : 0;

// Determine status

let status, statusClass, recommendation, recommendationClass;

if (fixedRatio <= 0.60) {

status = 'SAFE ZONE';

statusClass = 'status-safe';

recommendation = '✅ Your fixed costs are below 60% of net income. You have margin for savings, emergency fund building, and investment. This is a healthy financial position.';

recommendationClass = 'rec-safe';

} else if (fixedRatio <= 0.75) {

status = 'CAUTION';

statusClass = 'status-caution';

recommendation = '⚡ Your fixed costs are between 60-75% of net income. You have limited margin for unexpected expenses. Prioritize building an emergency fund before taking on new debt or increasing rent.';

recommendationClass = 'rec-caution';

} else {

status = 'HIGH RISK';

statusClass = 'status-danger';

recommendation = '⚠️ Your fixed costs exceed 75% of net income. You are living paycheck to paycheck with no margin for error. Reduce rent, increase income, or eliminate debt payments immediately to avoid financial instability.';

recommendationClass = 'rec-danger';

}

// Calculate max safe rent (60% of net minus other fixed costs)

const otherFixed = utilities + insurance + debt + transport + subscriptions;

const maxSafeRent = (monthlyNet * 0.60) - otherFixed;

// Update display

results.netIncome.textContent = formatCurrency(monthlyNet);

results.totalFixed.textContent = formatCurrency(totalFixed);

results.fixedRatio.textContent = formatPercent(fixedRatio);

results.maxSafeRent.textContent = formatCurrency(Math.max(0, maxSafeRent));

// Update status badge

results.statusBadge.textContent = status;

results.statusBadge.className = 'status-badge ' + statusClass;

results.statusRow.className = 'result-row ' + statusClass;

// Update recommendation

results.recommendation.textContent = recommendation;

results.recommendation.className = 'recommendation ' + recommendationClass;

// Show results container

results.resultsContainer.style.display = 'block';

}

// Add event listeners to all inputs

Object.values(inputs).forEach(input => {

input.addEventListener('input', calculate);

});

// Initial calculation (will hide results if no data)

calculate();

</script>

</body>

</html>