Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Acorn Home Care Rate Calculator</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root{
    --ink:#22332C;
    --ink-soft:#4A5A52;
    --bg:#F2F0E6;
    --card:#FFFFFF;
    --line:#DCD6C4;
    --rust:#B85C38;
    --gold:#C9974C;
    --sage:#5C7A6B;
    --danger:#A8432D;
    --radius:14px;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}

  body{
    background:var(--bg);
    background-image:
      radial-gradient(circle at 1px 1px, rgba(34,51,44,0.05) 1px, transparent 0);
    background-size:22px 22px;
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    min-height:100vh;
    padding:48px 20px 80px;
  }

  .wrap{
    max-width:920px;
    margin:0 auto;
  }

  header{
    margin-bottom:36px;
  }

  .eyebrow{
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--sage);
    font-weight:600;
    margin-bottom:10px;
  }

  h1{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:clamp(28px, 4vw, 40px);
    line-height:1.15;
    margin:0 0 12px;
    color:var(--ink);
  }

  header p{
    font-size:15.5px;
    color:var(--ink-soft);
    max-width:56ch;
    line-height:1.55;
    margin:0;
  }

  .grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:28px;
    align-items:start;
  }

  @media (max-width: 760px){
    .grid{grid-template-columns:1fr;}
  }

  .card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px 26px;
  }

  fieldset{
    border:none;
    margin:0 0 26px;
    padding:0;
  }
  fieldset:last-of-type{margin-bottom:0;}

  legend{
    font-family:'Fraunces', serif;
    font-size:17px;
    font-weight:500;
    margin-bottom:14px;
    padding:0;
  }

  .field{
    margin-bottom:16px;
  }

  label.number-label{
    display:block;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink-soft);
    margin-bottom:6px;
  }

  .hint{
    font-size:12.5px;
    color:#7C8A82;
    margin-top:6px;
    line-height:1.4;
  }

  input[type="number"]{
    width:100%;
    padding:11px 13px;
    font-size:16px;
    font-family:'Work Sans', sans-serif;
    border:1.5px solid var(--line);
    border-radius:9px;
    background:#FCFBF8;
    color:var(--ink);
    transition:border-color .15s ease;
  }
  input[type="number"]:focus{
    outline:none;
    border-color:var(--sage);
    box-shadow:0 0 0 3px rgba(92,122,107,0.15);
  }

  .checklist{
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  .check-row{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:10px 8px;
    border-radius:9px;
    cursor:pointer;
    transition:background .12s ease;
  }
  .check-row:hover{background:#F6F4EC;}

  .check-row input[type="checkbox"]{
    appearance:none;
    -webkit-appearance:none;
    width:19px;
    height:19px;
    min-width:19px;
    border:1.5px solid #B9B196;
    border-radius:5px;
    margin-top:2px;
    position:relative;
    cursor:pointer;
    background:#fff;
    transition:background .12s ease, border-color .12s ease;
  }
  .check-row input[type="checkbox"]:checked{
    background:var(--sage);
    border-color:var(--sage);
  }
  .check-row input[type="checkbox"]:checked::after{
    content:"";
    position:absolute;
    left:5.5px;
    top:2px;
    width:5px;
    height:9px;
    border:solid white;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
  }
  .check-row input[type="checkbox"]:focus-visible{
    outline:2px solid var(--sage);
    outline-offset:2px;
  }

  .check-copy .title{
    font-size:14.5px;
    font-weight:600;
    color:var(--ink);
  }
  .check-copy .desc{
    font-size:12.5px;
    color:#7C8A82;
    margin-top:1px;
  }
  .check-copy .plus{
    color:#6B7A3A;
    font-weight:600;
  }
  #occasionalRow .plus{
    color:#4E5A28;
  }

  /* --- Receipt / signature element --- */
  .receipt-shell{
    position:sticky;
    top:28px;
  }

  .receipt{
    background:#FFFFFF;
    border:1px solid var(--line);
    border-radius:10px;
    padding:0;
    position:relative;
    box-shadow:0 18px 40px -22px rgba(34,51,44,0.35);
  }

  .receipt-head{
    padding:22px 24px 16px;
    text-align:center;
    border-bottom:1px dashed var(--line);
  }

  .receipt-head .label{
    font-size:13.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--sage);
    font-weight:700;
  }

  .receipt-head .rate{
    font-family:'Fraunces', serif;
    font-size:46px;
    font-weight:600;
    color:var(--ink);
    margin:6px 0 0;
    line-height:1;
  }
  .receipt-head .rate .dollar{
    font-size:26px;
    font-weight:500;
    vertical-align:6px;
  }
  .receipt-head .rate span.unit{
    font-size:16px;
    font-weight:500;
    color:var(--ink-soft);
  }

  .receipt-body{
    padding:18px 24px 6px;
  }

  .line-item{
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:13.5px;
    padding:7px 0;
    color:var(--ink-soft);
  }
  .line-item.total{
    border-top:1px dashed var(--line);
    margin-top:6px;
    padding-top:12px;
    font-weight:700;
    color:var(--ink);
    font-size:14.5px;
  }
  .line-item .amt{
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .line-item .amt.add{ color:var(--rust); }
  .line-item .amt.sub{ color:var(--sage); }

  .receipt-foot{
    padding:14px 24px 22px;
    text-align:center;
  }

  .perforation{
    height:14px;
    background:
      radial-gradient(circle 7px at 0 7px, var(--bg) 99%, transparent 100%) -7px 0,
      radial-gradient(circle 7px at 100% 7px, var(--bg) 99%, transparent 100%) 0 0;
    background-size:14px 14px;
    background-repeat:repeat-x;
    margin-top:-1px;
  }

  .note{
    font-size:11.5px;
    color:#9AA69C;
    margin-top:16px;
    line-height:1.5;
    text-align:center;
    padding:0 8px;
  }

  .warn{
    display:none;
    background:#FBEDE7;
    border:1px solid #E7C3AE;
    color:var(--danger);
    font-size:13px;
    padding:10px 13px;
    border-radius:8px;
    margin-bottom:18px;
    line-height:1.4;
  }
  .warn.show{display:block;}

  @media (prefers-reduced-motion: no-preference){
    .card, .receipt{
      animation:rise .5s ease both;
    }
    .card{animation-delay:.03s;}
    @keyframes rise{
      from{opacity:0; transform:translateY(8px);}
      to{opacity:1; transform:translateY(0);}
    }
  }
</style>
</head>
<body>
<div class="wrap">

  <header>
    <h1>Acorn Home Care Rate Calculator</h1>
    <p>Enter the shift length and weekly hours, add any extra care tasks, and see the rate build up in real time.</p>
  </header>

  <div class="grid">
    <div class="card">
      <div class="warn" id="warnBox"></div>

      <fieldset>
        <legend>Shift details</legend>
        <div class="field">
          <label class="number-label" for="shiftHours">Length of one shift (hours)</label>
          <input type="number" id="shiftHours" min="4" step="0.5" value="8" inputmode="decimal">
          <div class="hint">4–5 hrs → $40/hr · 6–7 hrs → $39/hr · 8–9 hrs → $37/hr · 10–11 hrs → $36/hr · 12+ hrs → $35/hr</div>
        </div>
        <div class="field">
          <label class="number-label" for="weeklyHours">Total hours requested per week</label>
          <input type="number" id="weeklyHours" min="0" step="0.5" value="12" inputmode="decimal">
          <div class="hint">24+ hrs/week → −$1/hr · 36+ hrs/week → −$2/hr (does not stack)</div>
        </div>
      </fieldset>

      <fieldset>
        <legend>Additional care tasks</legend>
        <div class="checklist">
          <label class="check-row">
            <input type="checkbox" id="mealPrep" data-amount="1">
            <span class="check-copy">
              <div class="title">Meal preparation for client <span class="plus">+$1/hr</span></div>
              <div class="desc">Planning and preparing meals for client during the shift</div>
            </span>
          </label>
          <label class="check-row">
            <input type="checkbox" id="housekeeping" data-amount="1">
            <span class="check-copy">
              <div class="title">Light housekeeping for client <span class="plus">+$1/hr</span></div>
              <div class="desc">Tidying, laundry, and general upkeep for client area</div>
            </span>
          </label>
          <label class="check-row">
            <input type="checkbox" id="transport" data-amount="1">
            <span class="check-copy">
              <div class="title">Appointments / transportation <span class="plus">+$1/hr</span></div>
              <div class="desc">Driving to or accompanying to appointments</div>
            </span>
          </label>
          <label class="check-row">
            <input type="checkbox" id="bathing" data-amount="1">
            <span class="check-copy">
              <div class="title">Bathing/Toileting assistance <span class="plus">+$1/hr</span></div>
              <div class="desc">Hands-on personal care support</div>
            </span>
          </label>
          <label class="check-row">
            <input type="checkbox" id="incontinence" data-amount="1">
            <span class="check-copy">
              <div class="title">Incontinence/Hygiene assistance <span class="plus">+$1/hr</span></div>
              <div class="desc">Hands-on personal care support</div>
            </span>
          </label>
          <label class="check-row" id="occasionalRow">
            <input type="checkbox" id="occasional" data-amount="2">
            <span class="check-copy">
              <div class="title">Occasional shift, no recurring schedule <span class="plus">+$2/hr</span></div>
              <div class="desc">One-off or irregular booking rather than a set weekly schedule</div>
            </span>
          </label>
        </div>
      </fieldset>
    </div>

    <div class="receipt-shell">
      <div class="receipt">
        <div class="receipt-head">
          <div class="label">Hourly Rate</div>
          <div class="rate"><span class="dollar">$</span><span id="finalRate">37</span><span class="unit">/hr</span></div>
        </div>
        <div class="receipt-body" id="lineItems">
          
        </div>
        <div class="perforation"></div>
        <div class="receipt-foot">
          <div class="note" id="footNote">Based on an 8 hr shift, 12 hrs/week, no add-ons.</div>
        </div>
      </div>
    </div>
  </div>

</div>

<script>
  const shiftHoursEl = document.getElementById('shiftHours');
  const weeklyHoursEl = document.getElementById('weeklyHours');
  const checkboxes = Array.from(document.querySelectorAll('.check-row input[type="checkbox"]'));
  const finalRateEl = document.getElementById('finalRate');
  const lineItemsEl = document.getElementById('lineItems');
  const footNoteEl = document.getElementById('footNote');
  const warnBox = document.getElementById('warnBox');

  const addonLabels = {
    mealPrep: 'Meal preparation for client',
    housekeeping: 'Light housekeeping for client',
    transport: 'Appointments / transportation',
    bathing: 'Bathing/Toileting assistance',
    incontinence: 'Incontinence/Hygiene assistance',
    occasional: 'Occasional shift (no recurring schedule)'
  };

  function fmt(n){
    const sign = n < 0 ? '−' : (n > 0 ? '+' : '');
    return sign + '$' + Math.abs(n).toFixed(2).replace(/\.00$/, '');
  }

  function calculate(){
    let shiftHours = parseFloat(shiftHoursEl.value);
    let weeklyHours = parseFloat(weeklyHoursEl.value);

    if(isNaN(shiftHours) || shiftHours <= 0){
      shiftHours = 0;
    }
    if(isNaN(weeklyHours) || weeklyHours < 0){
      weeklyHours = 0;
    }

    // Shifts under 4 hours aren't handled by this calculator
    if(shiftHours > 0 && shiftHours < 4){
      warnBox.classList.add('show');
      warnBox.textContent = 'Shifts under 4 hours are handled as a special, fixed-amount visit rather than an hourly rate. Please call us at (858) 800-2272 to discuss your situation and get a quote.';
      finalRateEl.textContent = '—';
      lineItemsEl.innerHTML = '';
      footNoteEl.textContent = 'Call (858) 800-2272 for shifts under 4 hours.';
      return;
    }
    warnBox.classList.remove('show');
    warnBox.textContent = '';

    // Weekly hours can't be less than a single shift's length
    if(weeklyHours > 0 && shiftHours > 0 && weeklyHours < shiftHours){
      warnBox.classList.add('show');
      warnBox.textContent = `Total weekly hours (${weeklyHours}) can't be less than the length of one shift (${shiftHours} hrs). Please adjust one of these values.`;
      finalRateEl.textContent = '—';
      lineItemsEl.innerHTML = '';
      footNoteEl.textContent = 'Fix the hours above to see the rate.';
      return;
    }

    // Base rate by shift length
    let base, baseLabel;
    if(shiftHours <= 5){
      base = 40; baseLabel = 'Base rate (4–5 hr shift)';
    } else if(shiftHours <= 7){
      base = 39; baseLabel = 'Base rate (6–7 hr shift)';
    } else if(shiftHours <= 9){
      base = 37; baseLabel = 'Base rate (8–9 hr shift)';
    } else if(shiftHours <= 11){
      base = 36; baseLabel = 'Base rate (10–11 hr shift)';
    } else {
      base = 35; baseLabel = 'Base rate (12+ hr shift)';
    }

    // Weekly volume discount
    let discount = 0, discountLabel = '';
    if(weeklyHours >= 36){
      discount = 2; discountLabel = 'Weekly volume discount (36+ hrs/wk)';
    } else if(weeklyHours >= 24){
      discount = 1; discountLabel = 'Weekly volume discount (24+ hrs/wk)';
    }

    // Add-ons
    const addonLines = [];
    let addonTotal = 0;
    checkboxes.forEach(cb => {
      if(cb.checked){
        const amt = parseFloat(cb.dataset.amount);
        addonTotal += amt;
        addonLines.push({label: addonLabels[cb.id], amt});
      }
    });

    let finalRate = base - discount + addonTotal;
    if(finalRate < 0) finalRate = 0;

    // Render line items
    let html = '';
    html += `<div class="line-item"><span>${baseLabel}</span><span class="amt">$${base.toFixed(2).replace(/\.00$/, '')}</span></div>`;
    if(discount > 0){
      html += `<div class="line-item"><span>${discountLabel}</span><span class="amt sub">${fmt(-discount)}</span></div>`;
    }
    addonLines.forEach(item => {
      html += `<div class="line-item"><span>${item.label}</span><span class="amt add">${fmt(item.amt)}</span></div>`;
    });
    html += `<div class="line-item total"><span>Final rate</span><span class="amt">$${finalRate.toFixed(2).replace(/\.00$/, '')}/hr</span></div>`;
    lineItemsEl.innerHTML = html;

    finalRateEl.textContent = finalRate.toFixed(2).replace(/\.00$/, '');

    const addonCount = addonLines.length;
    footNoteEl.textContent = `Based on a ${shiftHours} hr shift, ${weeklyHours} hrs/week` +
      (addonCount ? `, ${addonCount} add-on${addonCount > 1 ? 's' : ''}.` : ', no add-ons.');
  }

  [shiftHoursEl, weeklyHoursEl, ...checkboxes].forEach(el => {
    el.addEventListener('input', calculate);
    el.addEventListener('change', calculate);
  });

  calculate();
</script>
</body>
</html>

Acorn Home Care