Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Schedule Your Visit – Go Chiro Mobile</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #f4f6f9;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      padding: 24px 20px;
      max-width: 480px;
      width: 100%;
      color: #2c3e50;
    }
    h2 {
      text-align: center;
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 16px;
      color: #2c3e50;
    }
    .notice {
      background: #fff8e1;
      border-left: 3px solid #f5a623;
      padding: 12px 14px;
      border-radius: 8px;
      font-size: 0.85rem;
      color: #5c4400;
      line-height: 1.5;
      margin-bottom: 18px;
    }
    .step { display: none; }
    .step.active { display: block; }
    .btn {
      width: 100%;
      padding: 18px 20px;
      border-radius: 12px;
      border: none;
      font-weight: 600;
      cursor: pointer;
      margin-bottom: 12px;
      font-size: 1rem;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
      background: #2c3e50;
      line-height: 1.4;
    }
    .btn small {
      font-weight: 400;
      opacity: 0.8;
      font-size: 0.8rem;
      display: block;
      margin-top: 3px;
    }
    .btn span { margin-left: 10px; flex-shrink: 0; }
    .btn-book {
      width: 100%;
      padding: 20px;
      border-radius: 12px;
      border: none;
      background: #2c3e50;
      color: white;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      margin-top: 8px;
      line-height: 1.4;
    }
    .region-label {
      text-align: center;
      font-size: 1rem;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 16px;
      padding: 12px;
      background: #f0f4f8;
      border-radius: 10px;
    }
    .zip-input {
      padding: 16px;
      width: 100%;
      border: 2px solid #ddd;
      border-radius: 10px;
      text-align: center;
      font-size: 1.3rem;
      margin-bottom: 12px;
      color: #2c3e50;
    }
    .zip-input:focus { outline: none; border-color: #2c3e50; }
    .zip-btn {
      width: 100%;
      background: #2c3e50;
      color: white;
      padding: 16px;
      border-radius: 10px;
      border: none;
      font-weight: 600;
      cursor: pointer;
      font-size: 1rem;
    }
    .zip-label {
      font-size: 0.92rem;
      color: #555;
      margin-bottom: 12px;
      text-align: center;
      line-height: 1.5;
    }
    .zip-error {
      margin-top: 10px;
      font-size: 0.88rem;
      color: #c0392b;
      text-align: center;
    }
    .oor-box {
      background: #f8f8f8;
      border-radius: 10px;
      padding: 16px;
      font-size: 0.9rem;
      color: #555;
      line-height: 1.6;
      margin-bottom: 16px;
      text-align: center;
    }
    .text-btn {
      display: block;
      text-align: center;
      background: #2c3e50;
      color: white;
      padding: 16px;
      border-radius: 12px;
      font-weight: 600;
      text-decoration: none;
      font-size: 1rem;
      margin-bottom: 10px;
    }
    .back-link {
      display: block;
      text-align: center;
      color: #999;
      font-size: 0.85rem;
      cursor: pointer;
      margin-top: 16px;
      text-decoration: none;
    }
    .reset { text-align: center; margin-top: 20px; }
    .reset a { color: #ccc; font-size: 0.8rem; cursor: pointer; }
  </style>
</head>
<body>
<div class="card">

  <div class="step active" id="s1">
    <h2>Schedule Your Visit</h2>
    <button class="btn" onclick="go('s2-new')">
      <div>New Patient / First Visit<small>Initial visit and examination.</small></div>
      <span>→</span>
    </button>
    <button class="btn" onclick="go('s2-return-know')">
      <div>Returning Patient<small>Schedule your next visit.</small></div>
      <span>→</span>
    </button>
  </div>

  <div class="step" id="s2-new">
    <h2>New Patient Visit</h2>
    <p class="zip-label">Enter the ZIP code where the appointment will be held.</p>
    <input class="zip-input" type="number" id="zip-new" maxlength="5" placeholder="ZIP Code">
    <button class="zip-btn" onclick="processZip('new')">Find My Region</button>
    <div class="zip-error" id="zip-new-error"></div>
    <a class="back-link" onclick="go('s1')">← Back</a>
  </div>

  <div class="step" id="s2-return-know">
    <h2>Returning Patient</h2>
    <div class="notice">
      <strong>As of July 1, our service regions have been updated.</strong> Please verify your region before scheduling.
    </div>
    <p class="zip-label">Do you know your region?</p>
    <button class="btn" onclick="go('s2-return-pick')">
      <div>Yes — I know my region</div>
      <span>→</span>
    </button>
    <button class="btn" onclick="go('s2-return-zip')">
      <div>No — check my ZIP code</div>
      <span>→</span>
    </button>
    <a class="back-link" onclick="go('s1')">← Back</a>
  </div>

  <div class="step" id="s2-return-pick">
    <h2>Select Your Region</h2>
    <button class="btn" onclick="pickRegion('East')"><div>East Region</div><span>→</span></button>
    <button class="btn" onclick="pickRegion('West')"><div>West Region</div><span>→</span></button>
    <button class="btn" onclick="pickRegion('Central')"><div>Central Region</div><span>→</span></button>
    <button class="btn" onclick="pickRegion('MainLine')"><div>Main Line Region</div><span>→</span></button>
    <button class="btn" onclick="pickRegion('WestChester')"><div>West Chester Region</div><span>→</span></button>
    <a class="back-link" onclick="go('s2-return-know')">← Back</a>
  </div>

  <div class="step" id="s2-return-zip">
    <h2>Verify Your Region</h2>
    <p class="zip-label">Enter the ZIP code where the appointment will be held.</p>
    <input class="zip-input" type="number" id="zip-return" maxlength="5" placeholder="ZIP Code">
    <button class="zip-btn" onclick="processZip('return')">Find My Region</button>
    <div class="zip-error" id="zip-return-error"></div>
    <a class="back-link" onclick="go('s2-return-know')">← Back</a>
  </div>

  <div class="step" id="s3-new-standard">
    <h2>New Patient Visit</h2>
    <div class="region-label" id="label-new-standard"></div>
    <button class="btn-book" onclick="bookVisit('new-patient')">
      Book Your New Patient Visit — $180
    </button>
    <a class="back-link" onclick="go('s2-new')">← Back</a>
  </div>

  <div class="step" id="s3-new-premium">
    <h2>New Patient Visit</h2>
    <div class="region-label" id="label-new-premium"></div>
    <button class="btn-book" onclick="bookVisit('new-patient')">
      Book Your New Patient Visit — $200
    </button>
    <a class="back-link" onclick="go('s2-new')">← Back</a>
  </div>

  <div class="step" id="s3-return">
    <h2>Select Your Visit Type</h2>
    <div class="region-label" id="label-return"></div>
    <div id="return-buttons"></div>
    <a class="back-link" onclick="go('s2-return-know')">← Back</a>
  </div>

  <div class="step" id="s-oor">
    <h2>Outside Service Area</h2>
    <div class="oor-box">
      Your ZIP code is not currently in one of our service areas. If you are located in Southeastern Pennsylvania, you may still be eligible for a visit.<br><br>
      We do not currently service Delaware or New Jersey.
    </div>
    <a href="sms:6104940412" class="text-btn">Text Us to Check Availability</a>
    <a class="back-link" onclick="go('s1')">← Start Over</a>
  </div>

  <div class="reset"><a onclick="go('s1')">← Reset</a></div>
</div>

<script>
  var activeRegion = '';

  var ZIPS = {
    'East': ['19081','19086','19070','19033','19094','19043','19078','19076','19022','19074'],
    'West': ['19340','19339','19342','19060','19014','19061','19015'],
    'Central': ['19008','19073','19063','19064','19083'],
    'MainLine': ['19003','19096','19085','19041','19087','19333','19312'],
    'WestChester': ['19380','19382','19383','19395','19319','19373']
  };

  var STANDARD = ['East','West'];
  var PREMIUM = ['Central','MainLine','WestChester'];

  var REGION_LABELS = {
    'East': 'East Region',
    'West': 'West Region',
    'Central': 'Central Region',
    'MainLine': 'Main Line Region',
    'WestChester': 'West Chester Region'
  };

  var LINKS = {
    'West': {
      'new-patient':   'https://koalendar.com/e/New-Patient-East',
      'care-plan':     'https://koalendar.com/e/np2cen-2k',
      'comprehensive': 'https://koalendar.com/e/Wellnesswest-2',
      'priority':      'https://koalendar.com/e/centralreset-2x',
      'maintenance':   'https://koalendar.com/e/Wellnesseast-2c-2h'
    },
    'East': {
      'new-patient':   'https://koalendar.com/e/discovery-east',
      'care-plan':     'https://koalendar.com/e/NP-TWE2-e',
      'comprehensive': 'https://koalendar.com/e/centralreset',
      'priority':      'https://koalendar.com/e/RP-SFE',
      'maintenance':   'https://koalendar.com/e/Wellnesseast'
    },
    'Central': {
      'new-patient':   'https://koalendar.com/e/New-Patient-cen',
      'care-plan':     'https://koalendar.com/e/np2cen',
      'comprehensive': 'https://koalendar.com/e/centralreset-2iu',
      'priority':      'https://koalendar.com/e/DiscoveryCentral',
      'maintenance':   'https://koalendar.com/e/Wellnesseast-2c'
    },
    'MainLine': {
      'new-patient':   'https://koalendar.com/e/New-Patient-cen-2',
      'care-plan':     'https://koalendar.com/e/np2cen-2-2',
      'comprehensive': 'https://koalendar.com/e/centralreset-2-2',
      'priority':      'https://koalendar.com/e/RP-SFE-2-2',
      'maintenance':   'https://koalendar.com/e/Wellnesseast-2-2'
    },
    'WestChester': {
      'new-patient':   'https://koalendar.com/e/New-Patient-cen-2-2',
      'care-plan':     'https://koalendar.com/e/np2cen-2',
      'comprehensive': 'https://koalendar.com/e/centralreset-2',
      'priority':      'https://koalendar.com/e/RP-SFE-2',
      'maintenance':   'https://koalendar.com/e/Wellnesseast-2'
    }
  };

  var PRICES = {
    standard: { priority: '$80', comprehensive: '$100', maintenance: '$60' },
    premium:  { priority: '$130', comprehensive: '$150', maintenance: '$110' }
  };

  function go(id) {
    document.querySelectorAll('.step').forEach(function(s){ s.classList.remove('active'); });
    document.getElementById(id).classList.add('active');
  }

  function pickRegion(region) {
    activeRegion = region;
    document.getElementById('label-return').innerText = REGION_LABELS[region];
    buildReturnButtons();
    go('s3-return');
  }

  function processZip(flow) {
    var val = document.getElementById('zip-' + flow).value.trim();
    var errEl = document.getElementById('zip-' + flow + '-error');
    errEl.innerText = '';
    activeRegion = '';

    for (var region in ZIPS) {
      if (ZIPS[region].indexOf(val) !== -1) {
        activeRegion = region;
        break;
      }
    }

    if (activeRegion) {
      if (flow === 'new') {
        if (STANDARD.indexOf(activeRegion) !== -1) {
          document.getElementById('label-new-standard').innerText = REGION_LABELS[activeRegion];
          go('s3-new-standard');
        } else {
          document.getElementById('label-new-premium').innerText = REGION_LABELS[activeRegion];
          go('s3-new-premium');
        }
      } else {
        document.getElementById('label-return').innerText = REGION_LABELS[activeRegion];
        buildReturnButtons();
        go('s3-return');
      }
    } else if (val.length === 5) {
      go('s-oor');
    } else {
      errEl.innerText = 'Please enter a valid 5-digit ZIP code.';
    }
  }

  function buildReturnButtons() {
    var isPremium = PREMIUM.indexOf(activeRegion) !== -1;
    var prices = isPremium ? PRICES.premium : PRICES.standard;
    var html = '';

    html += '<button class="btn" onclick="bookVisit(\'priority\')">' +
      '<div>Priority Visit<small>Same-day care for acute pain or a flare-up.</small></div>' +
      '<span>' + prices.priority + '</span></button>';

    html += '<button class="btn" onclick="bookVisit(\'comprehensive\')">' +
      '<div>Comprehensive Visit<small>Part of an ongoing treatment plan. Next-day booking required.</small></div>' +
      '<span>' + prices.comprehensive + '</span></button>';

    html += '<button class="btn" onclick="bookVisit(\'maintenance\')">' +
      '<div>Maintenance Visit<small>Routine adjustment. 48-hour advance booking required.</small></div>' +
      '<span>' + prices.maintenance + '</span></button>';

    document.getElementById('return-buttons').innerHTML = html;
  }

  function bookVisit(type) {
    var url = LINKS[activeRegion][type];
    if (url) window.open(url, '_top');
  }
</script>
</body>
</html>

David DeFries

Mobile chiropraqctor