<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Child Support Estimator · Free Legal Tool</title>
<style>
* { box-sizing:border-box; margin:0; padding:0; }
body { background:#f2f5f9; font-family:system-ui, sans-serif; padding:12px; }
.card { background:white; border-radius:28px; padding:20px; }
.row { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
label { font-weight:500; }
input, select { padding:14px; border-radius:30px; border:1px solid #cbd6e4; font-size:1rem; }
.reveal-btn { background:#eaf1fb; border:1px solid #c2d5ea; border-radius:40px; padding:16px; text-align:center; font-size:1.2rem; cursor:pointer; }
.result-card { background:#eaf1fb; border-radius:28px; padding:18px; margin-top:18px; display:none; flex-direction:column; gap:14px; }
.result-card.show { display:flex; }
.result-value { background:white; border-radius:40px; padding:12px; font-size:2rem; text-align:center; }
.consult-btn { background:#1f4a7c; color:white; border:none; padding:16px; border-radius:50px; font-size:1.2rem; cursor:pointer; }
.footer { margin-top:20px; text-align:center; font-size:0.8rem; color:#4f6072; border-top:1px solid #dee9f2; padding-top:12px; }
.footer a { color:#1f4a7c; text-decoration:none; }
</style>
</head>
<body>
<div class="card">
<h3>⚖️ Child Support Estimator</h3>
<div class="row"><label>Father's income (¥)</label><input id="f" value="12000"></div>
<div class="row"><label>Mother's income (¥)</label><input id="m" value="8000"></div>
<div class="row"><label>Number of children</label><input id="kids" value="2"></div>
<div class="row"><label>Custodian</label><select id="cust"><option value="mother">Mother</option><option value="father">Father</option><option value="shared">Shared</option></select></div>
<div class="reveal-btn" id="reveal">🔎 Reveal Calculation</div>
<div class="result-card" id="result">
<div class="result-value" id="val">3,250¥</div>
<button class="consult-btn""alert('Contact a family lawyer for legal advice')">👩⚖️ Ask a Lawyer</button>
</div>
<div class="footer">
⚡ Powered by <a href="https://costoflaw.com" target="_blank">costoflaw.com</a> · Child support only · No legal fee estimate
</div>
</div>
<script>
(function(){
const f=document.getElementById('f'), m=document.getElementById('m'), k=document.getElementById('kids'), c=document.getElementById('cust'), res=document.getElementById('val'), card=document.getElementById('result'), rev=document.getElementById('reveal');
function update(){ let fv=+f.value||0, mv=+m.value||0, kv=Math.min(6,Math.max(1, +k.value||1)); let ratio=[0.17,0.22,0.26,0.30][kv-1]||0.30; let base=(fv+mv)*ratio; if(c.value=='father') base*=0.95; else if(c.value=='shared') base*=0.9; res.innerText=Math.round(base).toLocaleString()+'¥'; }
f.addEventListener('input',update); m.addEventListener('input',update); k.addEventListener('input',update); c.addEventListener('change',update); update();
rev.addEventListener('click',()=> card.classList.toggle('show'));
})();
</script>
</body>
</html>
📋 Copy code
💾 Save as .html
⚡ Hidden Result UX
Tap to reveal — keeps interface clean, adds engagement.
👩⚖️ Lawyer CTA
Every result includes an "Ask a Lawyer" button.
📊 Income-Based Formula
Combined income × child factor (17–30%) + custodian adjustment.
💰 Child Support ONLY
This tool does NOT estimate attorney fees or legal costs.
❓ FAQs
Is this legally binding?
No, demonstration only. Actual support depends on jurisdiction. Not legal advice.
Does it estimate lawyer fees?
No — child support calculation only. Safe for law firm websites.
Free for attorneys?
Yes, completely free. Powered by costoflaw.com
Mobile optimized?
Absolutely, designed with large touch targets.