Embeddable freelance rate calculator widget

widget.js

(function() {
  const container = document.getElementById('freelance-rate-calc');
  if (!container) return;
  
  container.innerHTML = `
    <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 320px; padding: 20px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;">
      <h3 style="margin: 0 0 16px; font-size: 18px; color: #111;">Freelance Rate Calculator</h3>
      <label style="display: block; margin-bottom: 8px; font-size: 14px; color: #374151;">Desired annual take-home:</label>
      <input type="number" id="frc-income" placeholder="80000" style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 16px; box-sizing: border-box;">
      <button onclick="(function(){
        var income = parseFloat(document.getElementById('frc-income').value) || 80000;
        var tax = income * 0.153;
        var incTax = income * 0.25;
        var health = 8000;
        var total = income + tax + incTax + health;
        var hours = 2080 * 0.6;
        var rate = Math.round(total / hours);
        document.getElementById('frc-result').innerHTML = '<strong>Minimum rate: $' + rate + '/hr</strong>';
      })()" style="width: 100%; margin-top: 12px; padding: 10px; background: #2563eb; color: white; border: none; border-radius: 4px; font-size: 14px; cursor: pointer;">Calculate</button>
      <div id="frc-result" style="margin-top: 12px; font-size: 16px; color: #059669;"></div>
      <a href="https://hourly-rate-calculator.tp-business.workers.dev" target="_blank" style="display: block; margin-top: 16px; font-size: 12px; color: #6b7280; text-decoration: none;">Full calculator with tax breakdown & PDF export →</a>
    </div>
  `;
})();