Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Compression Garment Prescription Form</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body { font-family: 'Inter', sans-serif; background-color: #f7f3ec; }
    .form-container { max-width: 940px; }
    .print-only { display: none; }

    @media print {
      html, body { background: #fff !important; margin: 0; padding: 0; }
      .form-container { max-width: 100% !important; padding: 0.4in !important; }
      * { font-size: 11px !important; line-height: 1.2 !important; }
      .no-print { display: none !important; }
      .print-only { display: block !important; }
      .shadow-xl, .border, .rounded-2xl { box-shadow: none !important; border: none !important; border-radius: 0 !important; }
    }
  </style>
</head>
<body class="bg-[#f7f3ec] text-gray-800">
  <div class="min-h-screen flex items-center justify-center py-4 px-2">
    <div class="form-container w-full bg-white p-6 rounded-2xl shadow-xl border border-gray-200">
      
        <div class="no-print mb-3 flex items-center gap-2 text-sm bg-amber-50 text-amber-900 border border-amber-300 rounded-md p-3 shadow-sm" role="note" aria-label="Print instruction">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5 flex-shrink-0">
            <path d="M6 7V3h12v4H6zm10 10v4H8v-4h8z"/>
            <path fill-rule="evenodd" d="M4 8a2 2 0 00-2 2v5a2 2 0 002 2h2v-3a2 2 0 012-2h8a2 2 0 012 2v3h2a2 2 0 002-2v-5a2 2 0 00-2-2H4zm1.75 2.75a1.25 1.25 0 112.5 0 1.25 1.25 0 01-2.5 0z" clip-rule="evenodd"/>
          </svg>
          <span class="font-medium">Print this form and take it to your physician/NP to sign.</span>
          <span class="hidden sm:inline">The signature and stamp areas are provided below.</span>
        </div>
        
        <div class="no-print mb-3 flex items-center gap-2 text-xs bg-blue-50 text-blue-900 border border-blue-300 rounded-md p-2 shadow-sm" role="note" aria-label="Required fields">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4 flex-shrink-0"><path fill-rule="evenodd" d="M12 2a10 10 0 100 20 10 10 0 000-20zm.75 5.5a.75.75 0 00-1.5 0v6a.75.75 0 001.5 0v-6zm0 9a.75.75 0 10-1.5 0 .75.75 0 001.5 0z" clip-rule="evenodd"/></svg>
          <span><span class="font-medium">Please fill out Name, DOB, and Email</span> — these fields are required.</span>
        </div>
      <header class="mb-4 text-center">
        <h1 class="text-xl font-extrabold text-gray-900">Compression Garment Prescription</h1>
        <p class="text-sm text-gray-500">admin@lymphclinic.ca • www.lymphclinic.ca</p>
      </header>

        <form id="prescriptionForm" class="space-y-4 text-sm">
        <div class="grid grid-cols-2 gap-2">
          <div><label for="name">Name*</label><input id="name" name="Name" class="w-full border p-1 rounded" required></div>
          <div><label for="dob">DOB*</label><input id="dob" type="date" name="DOB" class="w-full border p-1 rounded" required></div>
        </div>
        <div><label for="email">Email*</label><input id="email" type="email" name="Email" class="w-full border p-1 rounded" required></div>

        <div>
          <label class="font-bold">Diagnosis / Indication</label>
          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-1">
            <label><input type="checkbox" name="Diagnosis[]" value="Venous disease (CEAP C3–C6)"> Venous disease (CEAP C3–C6)</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Varicose veins"> Varicose veins</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Post-thrombotic syndrome (PTS)"> PTS</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Post-venous procedure (EVLA/RFA/sclerotherapy)"> Post-venous procedure</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Venous leg ulcer (active/healed)"> Venous leg ulcer</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Chronic venous insufficiency (CVI)"> CVI</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Lymphedema"> Lymphedema</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Phlebolymphedema"> Phlebolymphedema</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Lipoedema"> Lipoedema</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Orthostatic hypotension / POTS"> Orthostatic hypotension / POTS</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Post-operative edema"> Post-operative edema</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Post-trauma edema"> Post-trauma edema</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Pregnancy-related edema"> Pregnancy-related edema</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Occupational/prolonged-standing edema"> Occupational/prolonged-standing edema</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Travel-related VTE risk (long-haul)"> Travel VTE risk</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Hypertrophic burn scar"> Hypertrophic burn scar</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Keloid (post-excision, ear)"> Keloid (post-excision)</label>
            <label><input type="checkbox" name="Diagnosis[]" value="Other"> Other</label>
          </div>
        </div>

        <div>
          <label class="font-bold">Recommended Pressure</label>
          <div class="grid grid-cols-2 sm:grid-cols-5 gap-3 mt-1">
            <label class="inline-flex">
              <input type="radio" name="Pressure" value="8-15" class="peer sr-only">
              <span class="px-3 py-1.5 rounded-full border border-gray-300 text-gray-700 select-none peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600">8–15</span>
            </label>
            <label class="inline-flex">
              <input type="radio" name="Pressure" value="15-20" class="peer sr-only">
              <span class="px-3 py-1.5 rounded-full border border-gray-300 text-gray-700 select-none peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600">15–20</span>
            </label>
            <label class="inline-flex">
              <input type="radio" name="Pressure" value="20-30" class="peer sr-only">
              <span class="px-3 py-1.5 rounded-full border border-gray-300 text-gray-700 select-none peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600">20–30</span>
            </label>
            <label class="inline-flex">
              <input type="radio" name="Pressure" value="30-40" class="peer sr-only">
              <span class="px-3 py-1.5 rounded-full border border-gray-300 text-gray-700 select-none peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600">30–40</span>
            </label>
            <label class="inline-flex">
              <input type="radio" name="Pressure" value="40-50" class="peer sr-only">
              <span class="px-3 py-1.5 rounded-full border border-gray-300 text-gray-700 select-none peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600">40–50</span>
            </label>
          </div>
        </div>

        <div>
          <label class="font-bold">Style</label>
          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-1" id="style-grid">
            <label><input type="checkbox" name="Style[]" value="Socks (below-knee)" data-foot-style> Socks (below‑knee)</label>
            <label><input type="checkbox" name="Style[]" value="Stockings (below-knee)" data-foot-style> Stockings (below‑knee)</label>
            <label><input type="checkbox" name="Style[]" value="Stockings (thigh-high)" data-foot-style> Stockings (thigh‑high)</label>
            <label><input type="checkbox" name="Style[]" value="Pantyhose / tights" data-foot-style> Pantyhose / tights</label>
            <label><input type="checkbox" name="Style[]" value="Maternity pantyhose" data-foot-style> Maternity pantyhose</label>
            <label><input type="checkbox" name="Style[]" value="Capri"> Capri</label>
            <label><input type="checkbox" name="Style[]" value="Bermuda"> Bermuda</label>
            <label><input type="checkbox" name="Style[]" value="Open toe" data-toe-option disabled> Open toe</label>
            <label><input type="checkbox" name="Style[]" value="Closed toe" data-toe-option disabled> Closed toe</label>
            <label><input type="checkbox" name="Style[]" value="Toe cap" data-toe-option disabled> Toe cap</label>
            <label><input type="checkbox" name="Style[]" value="Sleeve"> Sleeve</label>
            <label><input type="checkbox" name="Style[]" value="Glove"> Glove</label>
            <label><input type="checkbox" name="Style[]" value="Gauntlet"> Gauntlet</label>
            <label><input type="checkbox" name="Style[]" value="Vest"> Vest</label>
            <label><input type="checkbox" name="Style[]" value="Bra"> Bra</label>
            <label><input type="checkbox" name="Style[]" value="Custom garment"> Custom garment</label>
            <label><input type="checkbox" name="Style[]" value="Other"> Other</label>
          </div>
        </div>

        <div>
          <label class="font-bold">Wraps</label>
          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-1">
            <label><input type="checkbox" name="Wrap[]" value="Foot"> Foot</label>
            <label><input type="checkbox" name="Wrap[]" value="Calf"> Calf</label>
            <label><input type="checkbox" name="Wrap[]" value="Knee"> Knee</label>
            <label><input type="checkbox" name="Wrap[]" value="Thigh"> Thigh</label>
            <label><input type="checkbox" name="Wrap[]" value="Abdominal Binder"> Abdominal Binder</label>
            <label><input type="checkbox" name="Wrap[]" value="Compression Bandage"> Compression Bandage</label>
            <label><input type="checkbox" name="Wrap[]" value="Arm"> Arm</label>
            <label><input type="checkbox" name="Wrap[]" value="Gauntlet"> Gauntlet</label>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-2">
          <div><label for="refills" class="font-bold">Refills</label><input id="refills" type="number" name="Refills" class="w-full border p-1 rounded"></div>
          <div><label for="pairs" class="font-bold">Pairs</label><input id="pairs" type="number" name="Pairs" class="w-full border p-1 rounded"></div>
        </div>

        

        

        <div>
          <label for="comments">Comments</label>
          <textarea id="comments" name="Comments" rows="2" class="w-full border p-1 rounded"></textarea>
        </div>

        
        <div class="mt-3">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-gray-700">Physician / NP Signature</label>
              <div class="mt-8 h-0 border-t-2 border-gray-600"></div>
            </div>
            <div>
              <label class="block text-gray-700">Clinic Stamp / Address</label>
              <div class="mt-2 h-16 border border-dashed border-gray-300 rounded"></div>
            </div>
          </div>
          <div class="grid grid-cols-2 gap-4 mt-2">
            <div>
              <label class="block text-gray-700">Signed Date</label>
              <div class="mt-6 h-0 border-t border-gray-400"></div>
            </div>
            <div>
              <label class="block text-gray-700">Printed Name (optional)</label>
              <div class="mt-6 h-0 border-t border-gray-400"></div>
            </div>
          </div>
          <div class="print-only mt-2 text-xs text-gray-600">
            Physician: Please confirm the diagnosis/indication, select the recommended pressure & style, add comments if needed, and sign with CPSO number. Thank you.
          </div>
        </div>

        
        <div class="flex justify-end items-center no-print">
          <button type="button" id="saveButton" class="bg-blue-600 text-white px-4 py-1 rounded">Print / Save PDF</button>
        </div>
      </form>
    </div>
  </div>

  <script>
        document.getElementById('saveButton').addEventListener('click', () => {
  const container = document.querySelector('.form-container');
  const clone = container.cloneNode(true);

  // copy current field values into the clone so they appear in print
  const srcEls = container.querySelectorAll('input, select, textarea');
  const dstEls = clone.querySelectorAll('input, select, textarea');
  srcEls.forEach((src, i) => {
    const dst = dstEls[i];
    if (!dst) return;
    if (src.type === 'checkbox' || src.type === 'radio') {
      dst.checked = src.checked;
    } else if (src.tagName === 'SELECT') {
      Array.from(dst.options).forEach((opt, idx) => { opt.selected = src.options[idx] && src.options[idx].selected; });
    } else {
      dst.value = src.value;
      if (src.type === 'date' && src.value) dst.setAttribute('value', src.value);
    }
  });

  const w = window.open('', '_blank');
  const doc = w.document;
  doc.open();
  doc.write(`<!DOCTYPE html><html><head><meta charset="utf-8"><title>Compression Garment Prescription – Print</title>
    <script src="https://cdn.tailwindcss.com"><\/script>
    <style>
      body { background:#ffffff; }
      .print-only { display: none; }
      @page { size: Letter; margin: 0.4in; }
      @media print {
        body { zoom: 0.82; }
        .no-print { display: none !important; }
        .print-only { display: block !important; }
        .form-container { max-width: 100% !important; padding: 0.4in !important; }
        .shadow-xl, .border, .rounded-2xl { box-shadow: none !important; border: none !important; border-radius: 0 !important; }
        * { font-size: 11px !important; line-height: 1.2 !important; }
      }
    </style>
  </head><body></body></html>`);
  doc.close();

  const imported = w.document.importNode(clone, true);
  w.document.body.appendChild(imported);

  // allow Tailwind to load before printing
  w.focus();
  setTimeout(() => { w.print(); }, 600);
});
  </script>
  <script>
    // Enable toe options (Open/Closed/Toe cap) only if a foot/leg style is selected
    (function(){
      const grid = document.getElementById('style-grid');
      if (!grid) return;
      const footStyles = grid.querySelectorAll('input[data-foot-style]');
      const toeOptions = grid.querySelectorAll('input[data-toe-option]');

      const syncToeOptions = () => {
        const anyFootSelected = Array.from(footStyles).some(i => i.checked);
        toeOptions.forEach(t => {
          t.disabled = !anyFootSelected;
          if (!anyFootSelected) t.checked = false;
        });
      };

      footStyles.forEach(i => i.addEventListener('change', syncToeOptions));
      // initialize on load
      syncToeOptions();
    })();
  </script>
</body>
</html>

Limb and Lymph

 Limb & Lymph is a specialized clinic dedicated to the management and support of individuals living with lymphedema, lipedema, and related chronic swelling conditions.
We offer personalized, evidence-based care using a combination of:

Manual Lymphatic Drainage (MLD)

Deep Oscillation Therapy (DOT)

Vacuum-assisted lymphatic drainage

Kinesio taping techniques

Therapeutic exercise programs


In addition to treatment, we provide comprehensive garment support, including:

Personalized fittings for compression sleeves, stockings, wraps, and post-surgical garments

Guidance through the Assistive Devices Program (ADP) to help eligible clients access partial funding for medical compression garments


Whether you're newly diagnosed or looking for long-term management, Limb & Lymph is here to support your journey with care, education, and clinically backed solutions.