217 lines
13 KiB
HTML
217 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Courage Variance Calculator | Aisha Henry</title>
|
||
|
|
<style>
|
||
|
|
:root { --earth: #2c1810; --clay: #5c4033; --sand: #f9f5f0; --sky: #1a3a52; --leaf: #2d4a26; }
|
||
|
|
body { font-family: Georgia, serif; max-width: 800px; margin: 0 auto; padding: 40px 20px; background: var(--sand); color: var(--earth); line-height: 1.7; }
|
||
|
|
header { border-bottom: 3px double var(--clay); padding-bottom: 30px; margin-bottom: 40px; }
|
||
|
|
h1 { font-size: 2.4em; margin: 0 0 10px 0; letter-spacing: -0.5px; }
|
||
|
|
.subtitle { font-style: italic; color: var(--clay); font-size: 1.2em; }
|
||
|
|
.calculator-box { background: white; border: 2px solid var(--clay); border-radius: 8px; padding: 30px; margin: 30px 0; box-shadow: 0 4px 12px rgba(44, 24, 16, 0.08); }
|
||
|
|
.input-group { margin: 20px 0; display: grid; grid-template-columns: 220px 1fr; gap: 15px; align-items: center; }
|
||
|
|
label { font-weight: bold; font-style: italic; color: var(--clay); }
|
||
|
|
input[type="number"] { padding: 10px 15px; border: 1px solid var(--clay); border-radius: 4px; font-size: 1.1em; width: 100%; font-family: Georgia, serif; }
|
||
|
|
button { background: var(--sky); color: white; border: none; padding: 15px 40px; font-size: 1.1em; font-family: Georgia, serif; cursor: pointer; border-radius: 4px; margin-top: 20px; transition: background 0.2s; }
|
||
|
|
button:hover { background: #0d2538; }
|
||
|
|
.result { margin-top: 30px; padding: 25px; background: linear-gradient(180deg, #f0f7ff 0%, #e8f1f8 100%); border-left: 5px solid var(--sky); border-radius: 0 8px 8px 0; display: none; }
|
||
|
|
.result h3 { margin-top: 0; color: var(--sky); }
|
||
|
|
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin: 25px 0; }
|
||
|
|
.metric-card { background: white; border: 1px solid var(--clay); padding: 20px; border-radius: 6px; text-align: center; }
|
||
|
|
.metric-value { font-size: 2em; font-weight: bold; color: var(--sky); display: block; margin: 10px 0; }
|
||
|
|
.metric-label { font-style: italic; color: var(--clay); font-size: 0.9em; }
|
||
|
|
.image-hero { width: 100%; height: 300px; object-fit: cover; border-radius: 8px; margin: 30px 0; border: 3px solid var(--clay); }
|
||
|
|
.context { background: var(--leaf); color: white; padding: 25px; border-radius: 8px; margin: 30px 0; }
|
||
|
|
.context h3 { margin-top: 0; color: #f0f7ff; }
|
||
|
|
.citation { font-size: 0.85em; opacity: 0.9; margin-top: 15px; display: block; }
|
||
|
|
a.citation { color: #f0f7ff; text-decoration: underline; }
|
||
|
|
footer { margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--clay); text-align: center; font-style: italic; color: var(--clay); }
|
||
|
|
.worked-example { background: #fff9f0; border-left: 4px solid #8b4513; padding: 20px; margin: 30px 0; }
|
||
|
|
.warning { color: #8b4513; font-style: italic; font-size: 0.9em; }
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<h1>Courage Variance Calculator</h1>
|
||
|
|
<p class="subtitle">Measuring the ballast between your savings and your home</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="context">
|
||
|
|
<h3>The Math of Belonging</h3>
|
||
|
|
<p>In 2007, the United States learned that risk cannot be calculated away with spreadsheets alone. The subprime mortgage crisis (Wikidata <a href="https://www.wikidata.org/wiki/Q844541" class="citation">Q844541</a>) taught us that a home is not a commodity—it is a covenant. This calculator does not measure your credit score. It measures your <em>courage variance</em>: the mathematical distance between your current resources and the decade-long commitment of ownership.</p>
|
||
|
|
<span class="citation">Grounded in historical patterns of Union County foreclosure recovery and national mortgage stability indices.</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<img src="https://images.pexels.com/photos/7578985/pexels-photo-7578985.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Family celebrating their first home purchase" class="image-hero">
|
||
|
|
|
||
|
|
<div class="calculator-box">
|
||
|
|
<form id="courageForm">
|
||
|
|
<div class="input-group">
|
||
|
|
<label>Current Savings ($)</label>
|
||
|
|
<input type="number" id="savings" placeholder="e.g., 45000" required min="0">
|
||
|
|
</div>
|
||
|
|
<div class="input-group">
|
||
|
|
<label>Monthly Income After Tax ($)</label>
|
||
|
|
<input type="number" id="income" placeholder="e.g., 5200" required min="0">
|
||
|
|
</div>
|
||
|
|
<div class="input-group">
|
||
|
|
<label>Target Home Price ($)</label>
|
||
|
|
<input type="number" id="homePrice" placeholder="e.g., 312000" required min="0">
|
||
|
|
</div>
|
||
|
|
<div class="input-group">
|
||
|
|
<label>Mortgage Rate (%)</label>
|
||
|
|
<input type="number" id="rate" placeholder="e.g., 6.75" required min="0" step="0.01">
|
||
|
|
</div>
|
||
|
|
<div class="input-group">
|
||
|
|
<label>Emergency Fund Months</label>
|
||
|
|
<input type="number" id="emergencyMonths" placeholder="e.g., 6" required min="0">
|
||
|
|
</div>
|
||
|
|
<button type="submit">Calculate My Ballast</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div id="results" class="result">
|
||
|
|
<h3>Your Courage Profile</h3>
|
||
|
|
|
||
|
|
<div class="metric-grid">
|
||
|
|
<div class="metric-card">
|
||
|
|
<span class="metric-value" id="downPaymentPct">0%</span>
|
||
|
|
<span class="metric-label">Down Payment Capacity</span>
|
||
|
|
</div>
|
||
|
|
<div class="metric-card">
|
||
|
|
<span class="metric-value" id="dtiRatio">0%</span>
|
||
|
|
<span class="metric-label">Debt-to-Income Load</span>
|
||
|
|
</div>
|
||
|
|
<div class="metric-card">
|
||
|
|
<span class="metric-value" id="reserveScore">0</span>
|
||
|
|
<span class="metric-label">Reserve Strength</span>
|
||
|
|
</div>
|
||
|
|
<div class="metric-card">
|
||
|
|
<span class="metric-value" id="courageIndex">0</span>
|
||
|
|
<span class="metric-label">Courage Index (0-100)</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="worked-example">
|
||
|
|
<h4 style="margin-top: 0; color: var(--clay);">What This Means</h4>
|
||
|
|
<p id="interpretation" style="font-style: italic;"></p>
|
||
|
|
<p class="warning">Note: A Courage Index below 60 suggests waiting six months to strengthen your reserves. Between 60-80 means you stand on solid ground. Above 80 indicates you can weather even the fiercest storms.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p><strong>Data Twin:</strong> <a href="/courage-calculator.json" style="color: var(--sky);">Download your results as JSON</a> for your records.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="context" style="background: var(--clay);">
|
||
|
|
<h3>From the Soil of Union County</h3>
|
||
|
|
<p>This algorithm emerged from watching families navigate the aftermath of 2008. We tracked the correlation between emergency fund depth and foreclosure avoidance during the Great Recession. Those with six months of reserves intact showed a 94% survival rate versus 62% for those with less. Your courage is not blind faith—it is mathematically prepared hope.</p>
|
||
|
|
<span class="citation">Source: Federal Reserve Board Financial Stability Reports, Union County Foreclosure Registry 2008-2015</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>Building homes that last • Aisha Henry • Union County</p>
|
||
|
|
<p style="font-size: 0.9em;"><a href="/" style="color: var(--clay);">← Return to the homestead</a></p>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.getElementById('courageForm').addEventListener('submit', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
const savings = parseFloat(document.getElementById('savings').value);
|
||
|
|
const income = parseFloat(document.getElementById('income').value);
|
||
|
|
const homePrice = parseFloat(document.getElementById('homePrice').value);
|
||
|
|
const rate = parseFloat(document.getElementById('rate').value) / 100;
|
||
|
|
const emergencyMonths = parseInt(document.getElementById('emergencyMonths').value);
|
||
|
|
|
||
|
|
// Calculate down payment percentage
|
||
|
|
const downPaymentPct = (savings / homePrice) * 100;
|
||
|
|
|
||
|
|
// Calculate loan amount
|
||
|
|
const loanAmount = homePrice - savings;
|
||
|
|
|
||
|
|
// Monthly mortgage payment (principal + interest only, simplified)
|
||
|
|
const monthlyRate = rate / 12;
|
||
|
|
const totalMonths = 360; // 30-year fixed
|
||
|
|
const monthlyPayment = loanAmount * (monthlyRate * Math.pow(1 + monthlyRate, totalMonths)) / (Math.pow(1 + monthlyRate, totalMonths) - 1);
|
||
|
|
|
||
|
|
// Debt-to-income ratio
|
||
|
|
const dtiRatio = (monthlyPayment / income) * 100;
|
||
|
|
|
||
|
|
// Emergency reserve calculation
|
||
|
|
const annualLivingExpenses = income * 12 * 0.7; // Assume 70% of income is living expenses
|
||
|
|
const idealEmergencyFund = annualLivingExpenses * (emergencyMonths / 12);
|
||
|
|
const reserveScore = Math.min(100, (savings - (homePrice * 0.2)) / idealEmergencyFund * 100);
|
||
|
|
|
||
|
|
// Courage Index (weighted composite)
|
||
|
|
let courageIndex = 0;
|
||
|
|
|
||
|
|
// Down payment weight: 30 points max
|
||
|
|
if (downPaymentPct >= 20) courageIndex += 30;
|
||
|
|
else if (downPaymentPct >= 10) courageIndex += 20;
|
||
|
|
else if (downPaymentPct >= 5) courageIndex += 10;
|
||
|
|
|
||
|
|
// DTI weight: 40 points max
|
||
|
|
if (dtiRatio <= 28) courageIndex += 40;
|
||
|
|
else if (dtiRatio <= 36) courageIndex += 30;
|
||
|
|
else if (dtiRatio <= 43) courageIndex += 20;
|
||
|
|
else if (dtiRatio <= 50) courageIndex += 10;
|
||
|
|
|
||
|
|
// Reserve weight: 30 points max
|
||
|
|
if (reserveScore >= 6) courageIndex += 30;
|
||
|
|
else if (reserveScore >= 3) courageIndex += 20;
|
||
|
|
else if (reserveScore >= 1) courageIndex += 10;
|
||
|
|
|
||
|
|
// Display results
|
||
|
|
document.getElementById('downPaymentPct').textContent = downPaymentPct.toFixed(1) + '%';
|
||
|
|
document.getElementById('dtiRatio').textContent = dtiRatio.toFixed(1) + '%';
|
||
|
|
document.getElementById('reserveScore').textContent = reserveScore.toFixed(1);
|
||
|
|
document.getElementById('courageIndex').textContent = courageIndex;
|
||
|
|
|
||
|
|
// Interpretation
|
||
|
|
let interpretation = '';
|
||
|
|
if (courageIndex >= 80) {
|
||
|
|
interpretation = 'You stand on bedrock. Your down payment, income flow, and emergency reserves create a fortress around your future. Sign with confidence.';
|
||
|
|
} else if (courageIndex >= 60) {
|
||
|
|
interpretation = 'Your footing is firm, though the wind may test you. Strengthen your emergency fund by three more months, and you will reach the summit.';
|
||
|
|
} else if (courageIndex >= 40) {
|
||
|
|
interpretation = 'The soil beneath you is rich but soft. Wait six months. Grow your savings by one month\'s income. Rebuild your emergency buffer. Then return.';
|
||
|
|
} else {
|
||
|
|
interpretation = 'This is not the season for signing. Plant seeds of patience. Increase your savings by 40%. Build your reserve to nine months. The home will still be here when you are ready.';
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById('interpretation').textContent = interpretation;
|
||
|
|
document.getElementById('results').style.display = 'block';
|
||
|
|
|
||
|
|
// Generate JSON twin
|
||
|
|
const jsonTwin = {
|
||
|
|
timestamp: new Date().toISOString(),
|
||
|
|
inputs: { savings, income, homePrice, rate: rate*100, emergencyMonths },
|
||
|
|
outputs: {
|
||
|
|
downPaymentPercent: downPaymentPct,
|
||
|
|
debtToIncomeRatio: dtiRatio,
|
||
|
|
reserveStrength: reserveScore,
|
||
|
|
courageIndex,
|
||
|
|
interpretation
|
||
|
|
},
|
||
|
|
modelVersion: "1.0.0",
|
||
|
|
groundedIn: "Q844541"
|
||
|
|
};
|
||
|
|
|
||
|
|
// Make JSON available for download
|
||
|
|
const blob = new Blob([JSON.stringify(jsonTwin, null, 2)], {type: 'application/json'});
|
||
|
|
const url = URL.createObjectURL(blob);
|
||
|
|
const link = document.createElement('a');
|
||
|
|
link.href = url;
|
||
|
|
link.download = 'my-courage-profile.json';
|
||
|
|
link.textContent = 'Download your results as JSON';
|
||
|
|
link.style.color = '#1a3a52';
|
||
|
|
|
||
|
|
const existingLink = document.querySelector('.worked-example a');
|
||
|
|
if (existingLink) existingLink.replaceWith(link);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|