<!DOCTYPE html>

<head>

<title>Mortgage Options | Executive Summary</title>

<style>

:root {

--bg: #f8fafc;

--card-bg: #ffffff;

--text-main: #0f172a;

--text-sub: #475569;

--border: #cbd5e1;

--border-light: #e2e8f0;

--primary: #1e40af;

--primary-light: #eff6ff;

--green-bg: #f0fdf4;

--green-text: #166534;

--shadow: 0 4px 12px rgba(15, 23, 42, 0.05);

}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

body { background: var(--bg); color: var(--text-main); min-height: 100vh; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; }

.header-bar { width: 100%; max-width: 1200px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 1rem; }

.title { font-size: 1.5rem; font-weight: 700; color: var(--text-main); }

.subtitle { font-size: 0.875rem; color: var(--text-sub); }

.controls { display: flex; gap: 0.5rem; align-items: center; }

select, button { background: var(--card-bg); color: var(--text-main); border: 1px solid var(--border); padding: 0.6rem 1rem; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }

select:hover, button:hover { background: #f1f5f9; }

button.btn-next { background: var(--primary); color: #ffffff; border-color: var(--primary); }

button.btn-next:hover { background: #1d4ed8; }

.nav-tip { width: 100%; max-width: 1200px; background: var(--primary-light); border: 1px solid #bfdbfe; color: #1e3a8a; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.875rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; }

kbd { background: #ffffff; border: 1px solid #93c5fd; padding: 0.15rem 0.4rem; border-radius: 4px; font-weight: 700; font-size: 0.75rem; }

.table-container { width: 100%; max-width: 1200px; background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-light); box-shadow: var(--shadow); overflow-x: auto; }

table { width: 100%; border-collapse: collapse; text-align: left; }

th, td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-light); }

th { background: #f8fafc; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-sub); font-weight: 700; }

/* Columns reveal effect */

.opt-col { opacity: 0; transform: translateY(6px); transition: all 0.3s ease; pointer-events: none; }

.opt-col.revealed { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Financial row styling */

tr.highlight-rate { background: #f8fafc; font-weight: 600; }

tr.highlight-total { background: var(--primary-light); font-weight: 700; }

tr.highlight-total td { color: var(--primary); font-size: 1.05rem; }

tr.highlight-points { background: var(--green-bg); font-weight: 600; }

tr.highlight-points td { color: var(--green-text); }

</style>

</head>

<body>

<div>

<div class="title">Mortgage Financing Options</div>

<div class="subtitle">Monterey Bay Mortgage | Prepared for Fessler</div>

</div>

<option value="$2.0M">$2.0M Purchase Price</option>

<option value="$1.8M">$1.8M Purchase Price</option>

<option value="$1.6M">$1.6M Purchase Price</option>

<option value="$2.2M">$2.2M Purchase Price</option>

</select>

<button class="btn-next" onclick="revealNext()">Next Option <kbd>Space</kbd></button>

<button onclick="resetReveal()">Reset</button>

</div>

<span>Press <kbd>Spacebar</kbd> or <kbd>→</kbd> to reveal options one at a time. Press <kbd>←</kbd> to step back.</span>

<span id="counter" style="font-weight: 700;">Option 1 of 5</span>

</div>

</div>

// Embedded exact values directly from your Google Sheet

const PRESENTATION_DATA = {

"$2.0M": [

["Loan Structure", "Option 1 (Fixed 30)", "Option 2 (Fixed 30)", "Option 3 (ARM 10/6)", "Option 4 (ARM 7/6)", "Option 5 (Fixed 30)"],

["Sales Price", "$2,000,000", "$2,000,000", "$2,000,000", "$2,000,000", "$2,000,000"],

["Loan Amount", "$1,600,000", "$1,500,000", "$1,600,000", "$1,600,000", "$1,200,000"],

["Down Payment", "$400,000 (20%)", "$500,000 (25%)", "$400,000 (20%)", "$400,000 (20%)", "$800,000 (40%)"],

["Interest Rate", "7.375%", "7.375%", "6.875%", "6.750%", "7.000%"],

["APR", "7.503%", "7.501%", "6.947%", "6.896%", "7.000%"],

["Mortgage Pmt", "$11,051", "$10,360", "$10,511", "$10,378", "$7,984"],

["Property Tax", "$2,083", "$2,083", "$2,083", "$2,083", "$2,083"],

["Home Insurance", "$333", "$333", "$333", "$333", "$333"],

["Total Payment", "$13,467", "$12,777", "$12,928", "$12,794", "$10,400"],

["Discount Points (%)", "0.73%", "0.67%", "0.09%", "1.03%", "1.03%"],

["Discount Points ($)", "$11,648", "$10,045", "$1,472", "$16,512", "$12,384"]

"$1.8M": [

["Loan Structure", "Option 1 (Fixed 30)", "Option 2 (Fixed 30)", "Option 3 (ARM 10/6)", "Option 4 (ARM 7/6)", "Option 5 (Fixed 30)"],

["Sales Price", "$1,800,000", "$1,800,000", "$1,800,000", "$1,800,000", "$1,800,000"],

["Loan Amount", "$1,440,000", "$1,350,000", "$1,440,000", "$1,440,000", "$1,080,000"],

["Down Payment", "$360,000", "$450,000", "$360,000", "$360,000", "$720,000"],

["Interest Rate", "7.375%", "7.375%", "6.875%", "6.750%", "7.000%"],

["APR", "7.518%", "7.515%", "6.955%", "6.912%", "7.000%"],

["Mortgage Pmt", "$9,946", "$9,324", "$9,460", "$9,340", "$7,185"],

["Property Tax", "$1,875", "$1,875", "$1,875", "$1,875", "$1,875"],

["Home Insurance", "$300", "$300", "$300", "$300", "$300"],

["Total Payment", "$12,121", "$11,499", "$11,635", "$11,515", "$9,360"],

["Discount Points (%)", "0.80%", "0.74%", "0.16%", "1.10%", "1.10%"],

["Discount Points ($)", "$11,483", "$10,040", "$2,325", "$15,861", "$11,896"]

"$1.6M": [

["Loan Structure", "Option 1 (Fixed 30)", "Option 2 (Fixed 30)", "Option 3 (ARM 10/6)", "Option 4 (ARM 7/6)", "Option 5 (Fixed 30)"],

["Sales Price", "$1,600,000", "$1,600,000", "$1,600,000", "$1,600,000", "$1,600,000"],

["Loan Amount", "$1,280,000", "$1,200,000", "$1,280,000", "$1,280,000", "$960,000"],

["Down Payment", "$320,000", "$400,000", "$320,000", "$320,000", "$640,000"],

["Interest Rate", "7.375%", "7.375%", "6.875%", "6.750%", "7.000%"],

["APR", "7.536%", "7.533%", "6.965%", "6.932%", "7.000%"],

["Mortgage Pmt", "$8,841", "$8,288", "$8,409", "$8,302", "$6,387"],

["Property Tax", "$1,667", "$1,667", "$1,667", "$1,667", "$1,667"],

["Home Insurance", "$267", "$267", "$267", "$267", "$267"],

["Total Payment", "$10,774", "$10,221", "$10,342", "$10,235", "$8,320"],

["Discount Points (%)", "0.88%", "0.84%", "0.25%", "1.19%", "1.19%"],

["Discount Points ($)", "$11,318", "$10,036", "$3,178", "$15,210", "$11,407"]

"$2.2M": [

["Loan Structure", "Option 1 (Fixed 30)", "Option 2 (Fixed 30)", "Option 3 (ARM 10/6)", "Option 4 (ARM 7/6)", "Option 5 (Fixed 30)"],

["Sales Price", "$2,200,000", "$2,200,000", "$2,200,000", "$2,200,000", "$2,200,000"],

["Loan Amount", "$1,760,000", "$1,650,000", "$1,760,000", "$1,760,000", "$1,320,000"],

["Down Payment", "$440,000", "$550,000", "$440,000", "$440,000", "$880,000"],

["Interest Rate", "7.375%", "7.375%", "6.875%", "6.750%", "7.000%"],

["APR", "7.492%", "7.490%", "6.940%", "6.882%", "7.000%"],

["Mortgage Pmt", "$12,156", "$11,396", "$11,562", "$11,415", "$8,782"],

["Property Tax", "$2,292", "$2,292", "$2,292", "$2,292", "$2,292"],

["Home Insurance", "$367", "$367", "$367", "$367", "$367"],

["Total Payment", "$14,814", "$14,054", "$14,220", "$14,074", "$11,440"],

["Discount Points (%)", "0.67%", "0.61%", "0.04%", "0.98%", "0.98%"],

["Discount Points ($)", "$11,813", "$10,049", "$619", "$17,163", "$12,872"]

]

};

let currentStep = 1;

const maxSteps = 5;

function renderTable() {

const selectedKey = document.getElementById('priceSelect').value;

const rows = PRESENTATION_DATA[selectedKey];

const table = document.getElementById('mainTable');

table.innerHTML = '';

rows.forEach((row, rowIndex) => {

const tr = document.createElement('tr');

const label = row[0];

if (label === 'Total Payment') tr.className = 'highlight-total';

else if (label === 'Interest Rate') tr.className = 'highlight-rate';

else if (label === 'Discount Points ($)') tr.className = 'highlight-points';

row.forEach((cellText, colIndex) => {

const cell = rowIndex === 0 ? document.createElement('th') : document.createElement('td');

cell.innerText = cellText;

if (colIndex > 0) {

cell.classList.add('opt-col', `col-${colIndex}`);

}

tr.appendChild(cell);

});

table.appendChild(tr);

});

updateVisibility();

}

function changeTab() {

currentStep = 1;

renderTable();

}

function revealNext() {

if (currentStep < maxSteps) {

currentStep++;

updateVisibility();

}

function revealPrev() {

if (currentStep > 1) {

currentStep--;

updateVisibility();

}

function resetReveal() {

currentStep = 1;

updateVisibility();

}

function updateVisibility() {

for (let i = 1; i <= maxSteps; i++) {

const cols = document.querySelectorAll(`.col-${i}`);

cols.forEach(col => {

if (i <= currentStep) col.classList.add('revealed');

else col.classList.remove('revealed');

});

}

document.getElementById('counter').innerText = `Option 1 to ${currentStep} of ${maxSteps}`;

}

document.addEventListener('keydown', (e) => {

if (e.code === 'Space' || e.code === 'ArrowRight') {

e.preventDefault();

revealNext();

} else if (e.code === 'ArrowLeft') {

e.preventDefault();

revealPrev();

}

});

// Render immediately on boot

renderTable();

</script>

</body>

</html>