https://thenullpointer.net/tools/ Recent content in Tools on thenullpointer.net Hugo en-us All Rights Reserved https://thenullpointer.net/tools/battery-tool-comparisons/ Mon, 01 Jan 0001 00:00:00 +0000 https://thenullpointer.net/tools/battery-tool-comparisons/ <div id="tool-comparison" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 800px; margin: 0 auto;"> <style> #tool-comparison { --green: #4CAF50; --yellow: #F5C518; --cyan: #00ACC1; --red: #E53935; --bg: #0f1117; --card: #1a1d27; --card2: #2a2f3e; --card3: #222639; color: #e0e0e0; background: var(--bg); padding: 20px 12px; border-radius: 12px; } #tool-comparison * { box-sizing: border-box; } #tool-comparison h2 { font-size: 20px; font-weight: 700; text-align: center; margin: 0 0 4px; color: #fff; } #tool-comparison .subtitle { text-align: center; font-size: 11px; color: #888; margin: 0 0 16px; } #tool-comparison .tabs { display: flex; gap: 3px; margin-bottom: 16px; background: var(--card); border-radius: 10px; padding: 3px; } #tool-comparison .tabs button { flex: 1; padding: 10px 0; border: none; border-radius: 8px; cursor: pointer; background: transparent; color: #666; font-weight: 400; font-size: 13px; font-family: inherit; transition: all 0.2s; } #tool-comparison .tabs button.active { background: var(--card2); color: #fff; font-weight: 700; } #tool-comparison .tool-card { background: var(--card); border-radius: 10px; padding: 12px; margin-bottom: 8px; } #tool-comparison .tool-card h3 { font-size: 13px; font-weight: 700; color: #fff; margin: 0 0 8px; } #tool-comparison .brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } #tool-comparison .brand-cell { background: var(--bg); border-radius: 8px; padding: 7px 9px; border-left: 3px solid; } #tool-comparison .brand-cell .brand-name { font-size: 11px; font-weight: 700; } #tool-comparison .brand-cell .model { font-size: 10px; color: #999; margin-top: 1px; } #tool-comparison .brand-cell .price { font-size: 13px; font-weight: 700; color: #fff; margin-top: 2px; } #tool-comparison .battery-card { border: 1px dashed #444; } #tool-comparison .battery-card .model { font-size: 9px; line-height: 1.3; } #tool-comparison .totals { background: var(--card3); border-radius: 10px; padding: 14px 12px; margin-top: 4px; } #tool-comparison .totals h3 { font-size: 13px; font-weight: 700; color: #fff; margin: 0 0 10px; } #tool-comparison .total-cell { background: var(--bg); border-radius: 8px; padding: 10px; border-left: 3px solid; } #tool-comparison .total-cell.lowest { outline: 2px solid; } #tool-comparison .total-cell .total-price { font-size: 18px; font-weight: 700; color: #fff; margin-top: 2px; } #tool-comparison .total-cell .coverage { font-size: 9px; color: var(--green); margin-top: 2px; } #tool-comparison .total-cell .lowest-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; } #tool-comparison .footnote { font-size: 10px; color: #555; margin-top: 8px; line-height: 1.5; } #tool-comparison .tab-content { display: none; } #tool-comparison .tab-content.active { display: block; } #tool-comparison .pc-card { background: var(--card); border-radius: 12px; padding: 14px; margin-bottom: 16px; border-left: 3px solid; } #tool-comparison .pc-card h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; } #tool-comparison .pc-card h3 span { font-size: 11px; font-weight: 400; color: #666; } #tool-comparison .pc-label { font-size: 10px; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; } #tool-comparison .pc-label.pro { color: var(--green); } #tool-comparison .pc-label.con { color: var(--red); } #tool-comparison .pc-item { font-size: 12px; padding: 3px 0; line-height: 1.5; } #tool-comparison .pc-item.pro { color: #ccc; } #tool-comparison .pc-item.con { color: #999; } #tool-comparison .pc-section { margin-bottom: 10px; } #tool-comparison .slider-group { background: var(--card); border-radius: 12px; padding: 14px; margin-bottom: 16px; } #tool-comparison .slider-row { margin-bottom: 12px; } #tool-comparison .slider-header { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 3px; } #tool-comparison .slider-header span:first-child { font-weight: 500; } #tool-comparison .slider-header span:last-child { color: #888; } #tool-comparison input[type=range] { width: 100%; accent-color: #6C63FF; } #tool-comparison .score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #tool-comparison .score-card { background: var(--card); border-radius: 12px; padding: 14px; border: 1px solid var(--card2); position: relative; } #tool-comparison .score-card.best { border-width: 2px; } #tool-comparison .score-card .best-tag { position: absolute; top: -8px; right: 10px; color: #000; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; } #tool-comparison .score-card .score-val { font-size: 26px; font-weight: 700; } #tool-comparison .score-card .score-name { font-size: 13px; font-weight: 600; color: #fff; margin-top: 2px; } #tool-comparison .score-card .score-sub { font-size: 10px; color: #666; } #tool-comparison .score-bar-row { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; } #tool-comparison .score-bar-label { font-size: 10px; color: #666; width: 56px; } #tool-comparison .score-bar-track { flex: 1; background: var(--bg); border-radius: 3px; height: 5px; } #tool-comparison .score-bar-fill { height: 100%; border-radius: 3px; opacity: 0.7; } #tool-comparison .score-bar-val { font-size: 10px; color: #888; width: 14px; text-align: right; } #tool-comparison .score-note { font-size: 12px; color: #888; margin-bottom: 14px; line-height: 1.5; } </style> <h2>Power Tool Brand Comparison</h2> <p class="subtitle">Upgrading your primary home toolkit · old Ryobi set goes to vacation property</p> https://thenullpointer.net/tools/mortgage-large-payments-amortization/ Mon, 01 Jan 0001 00:00:00 +0000 https://thenullpointer.net/tools/mortgage-large-payments-amortization/ <style> :root { --accent: #e85d26; --bg: #0f1117; --card: #181b24; --border: #262a36; --text: #d4d4d8; --muted: #71717a; --green: #22c55e; --input-bg: #12151e; --indigo: #6366f1; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: 'DM Sans', 'Segoe UI', sans-serif; padding: 24px 16px; } .wrap { max-width: 860px; margin: 0 auto; } h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; } .subtitle { color: var(--muted); font-size: 13px; margin-top: 4px; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 24px; } .section-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .dot-indigo { background: var(--indigo); } .dot-accent { background: var(--accent); } .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; } .row + .row { margin-top: 12px; } .field { flex: 1 1 90px; min-width: 70px; } .field label { font-size: 11px; color: var(--muted); display: block; margin-bottom: 3px; } .field input { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 8px 10px; font-size: 14px; outline: none; width: 100%; font-family: inherit; } .info { margin-top: 10px; font-size: 13px; color: var(--muted); } .info span { color: var(--text); font-family: 'JetBrains Mono', monospace; } .btn { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-pill { border-radius: 20px; padding: 6px 18px; font-size: 13px; } .btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 20px; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; } .stat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } .stat-value { font-size: 20px; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .stat-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .divider { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; } .divider-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; } .pills { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; } .pill { background: #1e2330; border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; font-size: 12px; font-family: 'JetBrains Mono', monospace; display: inline-flex; align-items: center; gap: 6px; } .pill-x { cursor: pointer; color: var(--muted); font-weight: 700; font-size: 14px; line-height: 1; } .tabs { display: flex; gap: 4px; margin-bottom: 16px; } table { width: 100%; border-collapse: collapse; font-size: 13px; font-family: 'JetBrains Mono', monospace; } th { padding: 10px 12px; text-align: right; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 500; white-space: nowrap; border-bottom: 1px solid var(--border); } td { padding: 7px 12px; text-align: right; } tr.extra-row { background: #162016; } .tbl-wrap { overflow-x: auto; } .tbl-footer { padding: 12px; text-align: center; } svg text { font-family: 'JetBrains Mono', monospace; } </style> </head> <body> <div class="wrap"> <div style="margin-bottom:20px"> <h1>Amortization Calculator</h1> <p class="subtitle" id="subtitle"></p> https://thenullpointer.net/tools/mortgage-points-amortization/ Mon, 01 Jan 0001 00:00:00 +0000 https://thenullpointer.net/tools/mortgage-points-amortization/ <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f2; color: #1a1a18; padding: 2rem 1rem; min-height: 100vh; } h1 { font-size: 22px; font-weight: 500; margin-bottom: 1.5rem; } .calc-wrap { max-width: 640px; margin: 0 auto; } .section { background: #ffffff; border: 0.5px solid rgba(0,0,0,0.15); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; } .row { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; } .row:last-child { margin-bottom: 0; } .row label { font-size: 13px; color: #5f5e5a; width: 160px; flex-shrink: 0; } .row input[type=range] { flex: 1; accent-color: #1D9E75; } .row .val { font-size: 14px; font-weight: 500; min-width: 90px; text-align: right; } .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 1rem; } .metric { background: #f1efe8; border-radius: 8px; padding: 0.85rem 1rem; } .metric-label { font-size: 12px; color: #5f5e5a; margin-bottom: 4px; } .metric-value { font-size: 20px; font-weight: 500; color: #1a1a18; } .metric-value.good { color: #0f6e56; } .metric-value.bad { color: #a32d2d; } .verdict { border-radius: 8px; padding: 0.85rem 1rem; font-size: 14px; font-weight: 500; margin-bottom: 1rem; } .verdict.good { background: #e1f5ee; color: #0f6e56; } .verdict.bad { background: #fcebeb; color: #a32d2d; } .chart-label { font-size: 12px; color: #5f5e5a; margin-bottom: 6px; } .legend { display: flex; gap: 16px; margin-bottom: 8px; font-size: 12px; color: #5f5e5a; } .legend span { display: flex; align-items: center; gap: 4px; } .legend-dot { width: 10px; height: 10px; border-radius: 2px; } @media (prefers-color-scheme: dark) { body { background: #1a1a18; color: #e8e6df; } .section { background: #2c2c2a; border-color: rgba(255,255,255,0.12); } .metric { background: #3a3a38; } .metric-label { color: #a0a09a; } .metric-value { color: #e8e6df; } .metric-value.good { color: #5dcaa5; } .metric-value.bad { color: #f09595; } .verdict.good { background: #085041; color: #9fe1cb; } .verdict.bad { background: #501313; color: #f7c1c1; } .chart-label { color: #a0a09a; } .legend { color: #a0a09a; } .row label { color: #a0a09a; } } </style> </head> <body> <div class="calc-wrap"> <h1>Mortgage points calculator</h1> <div class="section"> <div class="row"> <label>Loan amount</label> <input type="range" id="loanAmt" min="50000" max="1000000" step="1000" value="168000"> <span class="val" id="loanAmtVal">$168,000</span> </div> <div class="row"> <label>Default rate</label> <input type="range" id="baseRate" min="3" max="12" step="0.05" value="7.1"> <span class="val" id="baseRateVal">7.10%</span> </div> <div class="row"> <label>Buydown rate</label> <input type="range" id="buyRate" min="3" max="12" step="0.05" value="6.625"> <span class="val" id="buyRateVal">6.625%</span> </div> <div class="row"> <label>Cost of points</label> <input type="range" id="pointCost" min="500" max="20000" step="100" value="2940"> <span class="val" id="pointCostVal">$2,940</span> </div> <div class="row"> <label>Planned payoff (mo.)</label> <input type="range" id="payoff" min="6" max="360" step="1" value="36"> <span class="val" id="payoffVal">36 mo.</span> </div> </div> <div class="metrics"> <div class="metric"><div class="metric-label">Default payment</div><div class="metric-value" id="mBase">—</div></div> <div class="metric"><div class="metric-label">Buydown payment</div><div class="metric-value" id="mBuy">—</div></div> <div class="metric"><div class="metric-label">Monthly savings</div><div class="metric-value" id="mSave">—</div></div> <div class="metric"><div class="metric-label">Break-even</div><div class="metric-value" id="mBE">—</div></div> <div class="metric"><div class="metric-label">Savings at payoff</div><div class="metric-value" id="mSaveAt">—</div></div> <div class="metric"><div class="metric-label">Net gain / loss</div><div class="metric-value" id="mNet">—</div></div> </div> <div class="verdict" id="verdict"></div> <div class="section"> <div class="chart-label">Cumulative savings vs. cost of points over time</div> <div class="legend"> <span><span class="legend-dot" style="background:#1D9E75;"></span> Cumulative savings</span> <span><span class="legend-dot" style="background:#E24B4A; opacity:0.7;"></span> Cost of points</span> </div> <div style="position: relative; width: 100%; height: 220px;"> <canvas id="chart" role="img" aria-label="Line chart showing cumulative savings versus cost of points over time"></canvas> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script> <script> function monthlyPayment(principal, annualRate) { const r = annualRate / 100 / 12; const n = 360; if (r === 0) return principal / n; return principal * r * Math.pow(1 + r, n) / (Math.pow(1 + r, n) - 1); } function fmt$(n) { return '$' + Math.abs(n).toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0}); } function fmtSigned(n) { return (n >= 0 ? '+' : '-') + '$' + Math.abs(n).toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0}); } let chart; function compute() { const loan = +document.getElementById('loanAmt').value; const base = +document.getElementById('baseRate').value; const buy = +document.getElementById('buyRate').value; const cost = +document.getElementById('pointCost').value; const payoff = +document.getElementById('payoff').value; const pmtBase = monthlyPayment(loan, base); const pmtBuy = monthlyPayment(loan, buy); const savingPerMonth = pmtBase - pmtBuy; const breakEven = savingPerMonth > 0 ? Math.ceil(cost / savingPerMonth) : Infinity; const savingsAtPayoff = savingPerMonth * payoff; const net = savingsAtPayoff - cost; document.getElementById('mBase').textContent = fmt$(pmtBase); document.getElementById('mBuy').textContent = fmt$(pmtBuy); document.getElementById('mSave').textContent = fmt$(savingPerMonth) + '/mo'; document.getElementById('mBE').textContent = isFinite(breakEven) ? breakEven + ' mo.' : '—'; const saveEl = document.getElementById('mSaveAt'); saveEl.textContent = fmt$(savingsAtPayoff); const netEl = document.getElementById('mNet'); netEl.textContent = fmtSigned(net); netEl.className = 'metric-value ' + (net >= 0 ? 'good' : 'bad'); const verdictEl = document.getElementById('verdict'); if (!isFinite(breakEven) || savingPerMonth <= 0) { verdictEl.textContent = 'Buydown rate is not lower — no benefit to buying points.'; verdictEl.className = 'verdict bad'; } else if (net >= 0) { verdictEl.textContent = `Worth it. You break even at ${breakEven} months and net ${fmtSigned(net)} by your planned payoff.`; verdictEl.className = 'verdict good'; } else { verdictEl.textContent = `Not worth it. Break-even is ${breakEven} months — ${breakEven - payoff} months past your planned payoff. You'd be ${fmt$(Math.abs(net))} short.`; verdictEl.className = 'verdict bad'; } const maxMo = Math.max(payoff + 12, isFinite(breakEven) ? breakEven + 12 : payoff + 12, 60); const labels = []; const cumSavings = []; const costLine = []; for (let m = 0; m <= maxMo; m += Math.ceil(maxMo / 48)) { labels.push('Mo ' + m); cumSavings.push(+(savingPerMonth * m).toFixed(0)); costLine.push(cost); } const isDark = matchMedia('(prefers-color-scheme: dark)').matches; const gridColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.07)'; const textColor = isDark ? '#a0a09a' : '#888780'; if (chart) { chart.data.labels = labels; chart.data.datasets[0].data = cumSavings; chart.data.datasets[1].data = costLine; chart.update(); } else { chart = new Chart(document.getElementById('chart'), { type: 'line', data: { labels, datasets: [ { label: 'Cumulative savings', data: cumSavings, borderColor: '#1D9E75', backgroundColor: 'rgba(29,158,117,0.08)', borderWidth: 2, pointRadius: 0, fill: true, tension: 0.3 }, { label: 'Cost of points', data: costLine, borderColor: '#E24B4A', borderWidth: 2, borderDash: [6, 4], pointRadius: 0, fill: false } ] }, options: { responsive: true, maintainAspectRatio: false, interaction: { mode: 'index', intersect: false }, plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => ' ' + ctx.dataset.label + ': $' + ctx.parsed.y.toLocaleString() } } }, scales: { x: { ticks: { color: textColor, font: { size: 11 }, maxTicksLimit: 8 }, grid: { color: gridColor } }, y: { ticks: { color: textColor, font: { size: 11 }, callback: v => '$' + (v / 1000).toFixed(1) + 'k' }, grid: { color: gridColor } } } } }); } } ['loanAmt', 'baseRate', 'buyRate', 'pointCost', 'payoff'].forEach(id => { const el = document.getElementById(id); el.addEventListener('input', () => { const v = +el.value; const labels = { loanAmt: v => '$' + v.toLocaleString(), baseRate: v => v.toFixed(2) + '%', buyRate: v => v.toFixed(3) + '%', pointCost: v => '$' + v.toLocaleString(), payoff: v => v + ' mo.' }; document.getElementById(id + 'Val').textContent = labels[id](v); compute(); }); }); compute(); </script>