Initial commit
This commit is contained in:
256
calc.html
Normal file
256
calc.html
Normal file
@ -0,0 +1,256 @@
|
||||
<!-- SCD Bond Calculator — WordPress Custom HTML Block -->
|
||||
|
||||
<div id="scd-calc" style="max-width:640px;margin:0 auto;padding:28px 24px;font-family:inherit;color:#2d2d2d;line-height:1.7;">
|
||||
|
||||
<h3 style="margin-bottom:12px;font-size:22px;">🧮 Estimate Your Bond Return</h3>
|
||||
|
||||
<p style="margin-bottom:28px;font-size:16px;line-height:1.7;color:#2d2d2d;"><em>Illustrative only — not financial advice. Bonds are not FSCS-protected. You may lose some or all of your investment.</em></p>
|
||||
|
||||
<!-- Inputs -->
|
||||
<div style="display:flex;gap:16px;flex-wrap:wrap;margin-bottom:32px;">
|
||||
|
||||
<div style="flex:1;min-width:180px;">
|
||||
<label for="scd-amt" style="font-size:16px;font-weight:600;display:block;margin-bottom:8px;color:#2d2d2d;">💰 Amount (£)</label>
|
||||
<input type="number" id="scd-amt" min="20000" max="10000000" step="1000" value="75000"
|
||||
style="width:100%;padding:12px 14px;border:2px solid #9a9a9a;border-radius:8px;font-size:18px;font-family:monospace;background:#fff;box-sizing:border-box;color:#2d2d2d;" />
|
||||
<span style="font-size:14px;color:#595959;display:block;margin-top:6px;">Min £20,000</span>
|
||||
</div>
|
||||
|
||||
<div style="flex:1;min-width:140px;">
|
||||
<label for="scd-rate" style="font-size:16px;font-weight:600;display:block;margin-bottom:8px;color:#2d2d2d;">💹 Rate (%)</label>
|
||||
<input type="number" id="scd-rate" min="0" max="3.5" step="0.25" value="2.75"
|
||||
style="width:100%;padding:12px 14px;border:2px solid #9a9a9a;border-radius:8px;font-size:18px;font-family:monospace;background:#fff;box-sizing:border-box;color:#2d2d2d;" />
|
||||
<span style="font-size:14px;color:#595959;display:block;margin-top:6px;">0 – 3.5%</span>
|
||||
</div>
|
||||
|
||||
<div style="flex:1;min-width:120px;">
|
||||
<label for="scd-term" style="font-size:16px;font-weight:600;display:block;margin-bottom:8px;color:#2d2d2d;">📅 Term (yrs)</label>
|
||||
<input type="number" id="scd-term" min="5" max="30" step="1" value="10"
|
||||
style="width:100%;padding:12px 14px;border:2px solid #9a9a9a;border-radius:8px;font-size:18px;font-family:monospace;background:#fff;box-sizing:border-box;color:#2d2d2d;" />
|
||||
<span style="font-size:14px;color:#595959;display:block;margin-top:6px;">Min 5</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Interest method -->
|
||||
<p style="font-size:16px;font-weight:600;margin-bottom:12px;color:#2d2d2d;">📈 Interest payout</p>
|
||||
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px;">
|
||||
<label style="cursor:pointer;padding:12px 18px;border:2px solid #9a9a9a;border-radius:8px;font-size:16px;background:#fff;display:flex;align-items:center;gap:8px;color:#2d2d2d;">
|
||||
<input type="radio" name="scd-m" value="cm" checked style="accent-color:#e66d00;width:20px;height:20px;flex-shrink:0;" />
|
||||
<span>Compound at maturity</span>
|
||||
</label>
|
||||
<label style="cursor:pointer;padding:12px 18px;border:2px solid #9a9a9a;border-radius:8px;font-size:16px;background:#fff;display:flex;align-items:center;gap:8px;color:#2d2d2d;">
|
||||
<input type="radio" name="scd-m" value="ca" style="accent-color:#e66d00;width:20px;height:20px;flex-shrink:0;" />
|
||||
<span>Compound paid yearly</span>
|
||||
</label>
|
||||
<label style="cursor:pointer;padding:12px 18px;border:2px solid #9a9a9a;border-radius:8px;font-size:16px;background:#fff;display:flex;align-items:center;gap:8px;color:#2d2d2d;">
|
||||
<input type="radio" name="scd-m" value="sm" style="accent-color:#e66d00;width:20px;height:20px;flex-shrink:0;" />
|
||||
<span>Simple at maturity</span>
|
||||
</label>
|
||||
<label style="cursor:pointer;padding:12px 18px;border:2px solid #9a9a9a;border-radius:8px;font-size:16px;background:#fff;display:flex;align-items:center;gap:8px;color:#2d2d2d;">
|
||||
<input type="radio" name="scd-m" value="sa" style="accent-color:#e66d00;width:20px;height:20px;flex-shrink:0;" />
|
||||
<span>Simple paid yearly</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Button -->
|
||||
<button id="scd-btn"
|
||||
style="display:block;width:100%;padding:18px;background:#e66d00;color:#fff;font-size:20px;font-weight:700;border:none;border-radius:10px;cursor:pointer;margin-bottom:8px;letter-spacing:0.3px;">
|
||||
Calculate
|
||||
</button>
|
||||
|
||||
<!-- Error -->
|
||||
<div id="scd-err" style="display:none;margin-top:20px;padding:16px 20px;background:#fff8f0;border:2px solid #c45500;border-radius:8px;font-size:16px;color:#3d1f00;line-height:1.7;"></div>
|
||||
|
||||
<!-- Results -->
|
||||
<div id="scd-out" style="display:none;">
|
||||
|
||||
<hr style="margin:36px 0;border:none;border-top:2px solid #d9d5cc;" />
|
||||
|
||||
<h4 style="margin-bottom:20px;font-size:20px;color:#2d2d2d;">📊 Your Estimated Return</h4>
|
||||
|
||||
<!-- Key figures -->
|
||||
<div style="display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:24px;">
|
||||
|
||||
<div style="padding:20px 24px;background:#fff8f0;border-left:4px solid #e66d00;border-radius:10px;text-align:center;">
|
||||
<div style="font-size:14px;color:#6b3500;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;">Total Repayment</div>
|
||||
<div id="scd-r-total" style="font-size:30px;font-weight:700;color:#5a2c00;margin-top:8px;">—</div>
|
||||
</div>
|
||||
|
||||
<div style="padding:20px 24px;background:#fff8f0;border-left:4px solid #e66d00;border-radius:10px;text-align:center;">
|
||||
<div style="font-size:14px;color:#6b3500;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;">Total Interest</div>
|
||||
<div id="scd-r-interest" style="font-size:30px;font-weight:700;color:#5a2c00;margin-top:8px;">—</div>
|
||||
</div>
|
||||
|
||||
<div style="padding:20px 24px;background:#fff8f0;border-left:4px solid #e66d00;border-radius:10px;text-align:center;">
|
||||
<div style="font-size:14px;color:#6b3500;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;">Per-Year Income</div>
|
||||
<div id="scd-r-annual" style="font-size:30px;font-weight:700;color:#5a2c00;margin-top:8px;">—</div>
|
||||
</div>
|
||||
|
||||
<div style="padding:20px 24px;background:#eaf2ec;border-left:4px solid #2d6a4f;border-radius:10px;text-align:center;">
|
||||
<div style="font-size:14px;color:#1a3c2e;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;">Effective Rate</div>
|
||||
<div id="scd-r-eff" style="font-size:30px;font-weight:700;color:#1a3c2e;margin-top:8px;">—</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Security -->
|
||||
<div id="scd-r-sec" style="margin:24px 0;padding:16px 20px;border-radius:8px;font-size:16px;line-height:1.7;color:#2d2d2d;">
|
||||
<strong>🔒 Security:</strong> <span id="scd-r-sec-text">—</span>
|
||||
</div>
|
||||
|
||||
<!-- UK Tax note -->
|
||||
<blockquote style="margin:24px 0;padding:16px 20px;background:#f5f5f0;border-left:4px solid #e66d00;font-size:15px;color:#595959;line-height:1.7;">
|
||||
<strong style="color:#2d2d2d;">🇬🇧 UK tax:</strong> Interest is your responsibility to report. SCD notifies HMRC if any investor receives >£250 interest in a year. <span id="scd-r-tax"></span>
|
||||
</blockquote>
|
||||
|
||||
<!-- Year-by-year -->
|
||||
<details style="margin:28px 0;font-size:16px;color:#2d2d2d;">
|
||||
<summary style="cursor:pointer;font-weight:700;color:#6b3500;padding:10px 0;font-size:16px;">▾ Year-by-year breakdown</summary>
|
||||
<div style="overflow-x:auto;margin-top:14px;-webkit-overflow-scrolling:touch;">
|
||||
<table style="width:100%;border-collapse:collapse;font-size:15px;min-width:400px;">
|
||||
<thead>
|
||||
<tr style="background:#f5f5f0;">
|
||||
<th style="padding:12px 14px;text-align:left;border-bottom:2px solid #9a9a9a;color:#2d2d2d;">Year</th>
|
||||
<th style="padding:12px 14px;text-align:right;border-bottom:2px solid #9a9a9a;color:#2d2d2d;">Balance</th>
|
||||
<th style="padding:12px 14px;text-align:right;border-bottom:2px solid #9a9a9a;color:#2d2d2d;">Interest</th>
|
||||
<th style="padding:12px 14px;text-align:right;border-bottom:2px solid #9a9a9a;color:#2d2d2d;">Paid Out</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="scd-r-table"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Context -->
|
||||
<hr style="margin:32px 0;border:none;border-top:2px solid #d9d5cc;" />
|
||||
<div style="font-size:15px;color:#595959;line-height:1.8;">
|
||||
<p style="margin-bottom:8px;">🏠 At <strong style="color:#2d2d2d;">0%</strong> — a pure solidarity loan, maximising SCD's impact.</p>
|
||||
<p style="margin-bottom:8px;">📈 At <strong style="color:#2d2d2d;">3.5%</strong> — a competitive return while supporting community housing.</p>
|
||||
<p style="margin-bottom:8px;">🏦 Best Cash ISA rates (~4.0–4.7%) are FSCS-protected and instantly accessible — bonds are neither.</p>
|
||||
<p style="margin-bottom:8px;">🔒 Bonds are non-transferable; early repayment possible but not guaranteed.</p>
|
||||
<p style="margin-bottom:0;">💷 Denominated in GBP — international investors bear FX risk.</p>
|
||||
</div>
|
||||
|
||||
<p style="font-size:15px;color:#595959;margin-top:24px;line-height:1.7;">
|
||||
Refer to the <a href="https://www.stirchley.coop/wp-content/uploads/2026/05/SCD-Bond-Offer-2026-25-May-2026.pdf" style="color:#9c4d00;font-weight:600;text-decoration:underline;">Bond Offer Document</a> for full terms and risks. SCD is a Co-operative & Community Benefit Society (Reg. 4496), regulated by the Regulator of Social Housing.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Responsive override -->
|
||||
<style>
|
||||
@media(min-width:480px){
|
||||
#scd-out>div:first-of-type{grid-template-columns:1fr 1fr !important;}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
function g(n){return'\u00a3'+n.toLocaleString('en-GB',{minimumFractionDigits:0,maximumFractionDigits:0});}
|
||||
|
||||
function run(){
|
||||
var a=parseFloat(document.getElementById('scd-amt').value),
|
||||
r=parseFloat(document.getElementById('scd-rate').value),
|
||||
t=parseInt(document.getElementById('scd-term').value),
|
||||
mEl=document.querySelector('input[name="scd-m"]:checked'),
|
||||
m=mEl?mEl.value:'cm',
|
||||
e=document.getElementById('scd-err'),
|
||||
o=document.getElementById('scd-out');
|
||||
e.style.display='none';e.textContent='';o.style.display='none';
|
||||
if(isNaN(a)||a<20000){e.textContent='\u26a0 Minimum investment is \u00a320,000.';e.style.display='block';return;}
|
||||
if(isNaN(r)||r<0||r>3.5){e.textContent='\u26a0 Rate must be 0\u20133.5%.';e.style.display='block';return;}
|
||||
if(isNaN(t)||t<5){e.textContent='\u26a0 Minimum term is 5 years.';e.style.display='block';return;}
|
||||
|
||||
var cmp=m[0]==='c',ann=m[1]==='a',
|
||||
bal=a,totI=0,totP=0,rows=[];
|
||||
|
||||
for(var y=1;y<=t;y++){
|
||||
var i=cmp?bal*(r/100):a*(r/100);
|
||||
totI+=i;
|
||||
|
||||
var p=0;
|
||||
if(ann){
|
||||
/* Yearly payout: interest paid each year */
|
||||
p=i;
|
||||
}else if(y===t){
|
||||
/* At-maturity: entire balance paid in final year */
|
||||
p=cmp?bal+i:bal+i;
|
||||
}
|
||||
totP+=p;
|
||||
|
||||
/* Accumulate balance for compound modes */
|
||||
if(cmp){
|
||||
bal+=i;
|
||||
}
|
||||
|
||||
rows.push({
|
||||
y:y,
|
||||
i:i,
|
||||
p:p,
|
||||
/* Balance column: running balance before any payout */
|
||||
cb:cmp?bal:(ann?a:bal)
|
||||
});
|
||||
}
|
||||
|
||||
if(!cmp&&!ann) bal=a;
|
||||
|
||||
var total=ann?a+totP:(cmp?bal:a+totI),
|
||||
netI=ann?totP:(cmp?bal-a:totI),
|
||||
yrInc=ann?a*(r/100):netI/t,
|
||||
eff=r===0?0:(ann?r:(Math.pow(total/a,1/t)-1)*100);
|
||||
|
||||
var sec=a<150000?'<strong>Unsecured</strong> \u2014 no legal charge (under \u00a3150,000)'
|
||||
:a<500000?'<strong>Tertiary charge</strong> \u2014 behind primary & secondary (\u00a3150k\u2013\u00a3500k)'
|
||||
:'<strong>Secondary charge</strong> \u2014 behind primary mortgage only (over \u00a3500,000)',
|
||||
secBg=a<150000?'#fff8f0':a<500000?'#eaf2ec':'#eaf2ec',
|
||||
secBd=a<150000?'#c45500':a<500000?'#2d6a4f':'#2d6a4f';
|
||||
|
||||
document.getElementById('scd-r-total').textContent=g(total);
|
||||
document.getElementById('scd-r-interest').textContent=g(netI);
|
||||
document.getElementById('scd-r-annual').textContent=(ann?'':'~')+g(yrInc)+(ann?'/yr':'/yr avg');
|
||||
document.getElementById('scd-r-eff').textContent=eff.toFixed(2)+'%';
|
||||
|
||||
var sb=document.getElementById('scd-r-sec');
|
||||
sb.style.background=secBg;sb.style.border='2px solid '+secBd;sb.style.color='#2d2d2d';
|
||||
document.getElementById('scd-r-sec-text').innerHTML=sec;
|
||||
|
||||
var taxI=ann?yrInc:netI;
|
||||
document.getElementById('scd-r-tax').textContent='On '+g(taxI)+' interest: ~'+g(taxI*0.2)+' (basic), ~'+g(taxI*0.4)+' (higher), ~'+g(taxI*0.45)+' (additional rate) \u2014 before Personal Savings Allowance.';
|
||||
|
||||
var tb=document.getElementById('scd-r-table');tb.innerHTML='';
|
||||
for(var j=0;j<rows.length;j++){
|
||||
var d=rows[j],
|
||||
isFinal=(j===rows.length-1),
|
||||
tr=document.createElement('tr');
|
||||
tr.style.background=isFinal?'#fff8f0':(j%2?'#f5f5f0':'#fff');
|
||||
tr.innerHTML='<td style="padding:10px 14px;border-bottom:1px solid #d9d5cc;color:#2d2d2d;font-weight:'+(isFinal?'700':'400')+';">'+d.y+(isFinal?' (maturity)':'')+'</td>'
|
||||
+'<td style="padding:10px 14px;border-bottom:1px solid #d9d5cc;text-align:right;font-family:monospace;color:#2d2d2d;">'+g(d.cb)+'</td>'
|
||||
+'<td style="padding:10px 14px;border-bottom:1px solid #d9d5cc;text-align:right;font-family:monospace;color:#2d2d2d;">'+g(d.i)+'</td>'
|
||||
+'<td style="padding:10px 14px;border-bottom:1px solid #d9d5cc;text-align:right;font-family:monospace;color:#2d2d2d;font-weight:'+(d.p>0?'700':'400')+';">'+(d.p>0?g(d.p):'\u2014')+'</td>';
|
||||
tb.appendChild(tr);
|
||||
}
|
||||
|
||||
/* Add a totals row */
|
||||
var ttr=document.createElement('tr');
|
||||
ttr.style.background='#f5f5f0';
|
||||
ttr.innerHTML='<td style="padding:10px 14px;border-top:2px solid #9a9a9a;font-weight:700;color:#2d2d2d;">Total</td>'
|
||||
+'<td style="padding:10px 14px;border-top:2px solid #9a9a9a;text-align:right;font-family:monospace;color:#2d2d2d;">\u2014</td>'
|
||||
+'<td style="padding:10px 14px;border-top:2px solid #9a9a9a;text-align:right;font-family:monospace;font-weight:700;color:#2d2d2d;">'+g(totI)+'</td>'
|
||||
+'<td style="padding:10px 14px;border-top:2px solid #9a9a9a;text-align:right;font-family:monospace;font-weight:700;color:#2d2d2d;">'+g(totP)+'</td>';
|
||||
tb.appendChild(ttr);
|
||||
|
||||
o.style.display='block';
|
||||
}
|
||||
|
||||
if(document.readyState==='loading'){
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('scd-btn').addEventListener('click',run);
|
||||
});
|
||||
}else{
|
||||
document.getElementById('scd-btn').addEventListener('click',run);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user