SOURCE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多少钱才能财富自由</title>
<style>
  body { background: #2c1b3d; color: white; text-align: center; font-family: sans-serif; padding-top: 40px; }
  input { padding: 10px; margin: 5px; font-size: 16px; width: 80px; border-radius: 5px; border: none; text-align: center; color: #e5d164; font-weight: bold; }
  .box { background: #3d2b52; padding: 30px; border-radius: 15px; display: inline-block; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
  h1 { color: #e5d164; font-size: 24px; }
  .result { font-size: 36px; color: #e5d164; font-weight: bold; margin-top: 20px; }
  label { font-size: 14px; color: #b3a0c6; }
</style>
</head>
<body>
  <div class="box">
    <h1>多少钱才能财富自由</h1>
    <p style="color:#e5d164; font-weight:bold;">480X + K * n + M + H</p>
    <div>
      <label>月开销X(万)<input type="number" id="x" value="5"></label>
      <label>每孩成本K(万)<input type="number" id="k" value="80"></label>
    </div>
    <div style="margin-top: 10px;">
      <label>小孩数n<input type="number" id="n" value="2"></label>
      <label>健康开销M(万)<input type="number" id="m" value="100"></label>
      <label>重大投入H(万)<input type="number" id="h" value="300"></label>
    </div>
    <div class="result" id="res">2960 万</div>
  </div>
  <script>
    function calc() {
      let x = parseFloat(document.getElementById('x').value) || 0;
      let k = parseFloat(document.getElementById('k').value) || 0;
      let n = parseFloat(document.getElementById('n').value) || 0;
      let m = parseFloat(document.getElementById('m').value) || 0;
      let h = parseFloat(document.getElementById('h').value) || 0;
      document.getElementById('res').innerText = (480*x + k*n + m + h) + " 万";
    }
    document.querySelectorAll('input').forEach(i => i.addEventListener('input', calc));
  </script>
</body>
</html>