Embed

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>JJS In Home Tech — Repair Form</title>
  <style>
    :root{
      --max-width:980px;
      --accent:#0b74de;
      --muted:#6b7280;
      --bg:#f4f6f8;
      --card:#ffffff;
      --radius:12px;
      --gap:14px;
      --pad: clamp(12px, 2.5vw, 28px);
      --field-min: 220px;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    }

    html,body{height:100%;margin:0;}
    body{
      background:var(--bg);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:var(--pad);
      color:#0f1724;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      box-sizing:border-box;
    }
    *,*::before,*::after{box-sizing:inherit;}

    /* Card */
    .card{
      width:100%;
      max-width:var(--max-width);
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:0 10px 30px rgba(15,23,42,0.06);
      padding:clamp(16px, 3vw, 36px);
      position:relative;
      z-index:99999; /* high z-index to avoid overlays */
      -webkit-tap-highlight-color: transparent;
    }

    h1{margin:0 0 8px 0;font-size:clamp(18px,2.2vw,22px);}
    p.lead{margin:0 0 12px 0;color:var(--muted);font-size:clamp(13px,1.6vw,15px);}

    .grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(var(--field-min), 1fr));
      gap:var(--gap);
      align-items:start;
    }
    .full{grid-column:1/-1;}

    label{display:block;margin-top:8px;font-weight:600;font-size:clamp(13px,1.6vw,14px);}
    input[type="text"], input[type="email"], select, textarea{
      width:100%;
      padding:12px;
      border:1px solid #e6e9ee;
      border-radius:10px;
      font-size:clamp(14px,1.8vw,16px);
      background:#fff;
      -webkit-appearance:none;
      appearance:none;
      /* Force interactive cursor and pointer events even if other CSS tries to block */
      cursor:pointer !important;
      pointer-events:auto !important;
    }
    /* Extra specificity to override global rules */
    .card select, .card select option { cursor: pointer !important; pointer-events: auto !important; }
    textarea{min-height:110px;resize:vertical;}

    .actions{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap;}
    button.primary{
      background:var(--accent);
      color:#fff;
      border:none;
      padding:12px 18px;
      border-radius:10px;
      font-weight:700;
      cursor:pointer;
      font-size:clamp(14px,1.8vw,16px);
    }
    button.ghost{
      background:transparent;
      border:1px solid #e6e9ee;
      padding:10px 14px;
      border-radius:10px;
      cursor:pointer;
      font-size:clamp(13px,1.6vw,14px);
    }

    .visually-hidden{
      position:absolute !important;height:1px;width:1px;overflow:hidden;
      clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px;
    }

    @media (max-width:420px){
      :root{--field-min:160px;}
      .card{padding:16px;}
      input[type="text"], select, textarea{padding:10px;}
    }
  </style>
</head>
<body>
  <main class="card" role="form" aria-labelledby="formTitle">
    <h1 id="formTitle">JJS In Home Tech — Repair Form</h1>

    <div class="visually-hidden" aria-hidden="true">Admin: replace YOUR_FORMSPREE_ENDPOINT with your endpoint</div>

    <form id="repairForm" action="https://formspree.io/f/xeelvppa" method="POST" novalidate>
      <input type="hidden" name="_replyto" id="hiddenReplyTo" value="">

      <div class="grid" role="group" aria-label="Repair form fields">
        <div class="full">
          <label for="fullName">Full Name</label>
          <input id="fullName" name="fullName" type="text" required placeholder="Jane Doe">
        </div>

        <div>
          <label for="phone">Phone Number</label>
          <input id="phone" name="phone" type="text" required placeholder="(555) 555-5555">
        </div>

        <div>
          <label for="email">Email Address</label>
          <input id="email" name="email" type="email" required placeholder="you@example.com"
                 oninput="document.getElementById('hiddenReplyTo').value = this.value">
        </div>

        <div>
          <label for="contactMethod">Preferred Contact Method</label>
          <select id="contactMethod" name="contactMethod" required>
            <option value="Call">Call</option>
            <option value="Text">Text</option>
            <option value="Email">Email</option>
          </select>
        </div>

        <div class="full">
          <label for="deviceCategory">Device Category</label>
          <select id="deviceCategory" name="deviceCategory" required>
            <option value="">Select Device Type</option>
            <option value="iPhone">iPhone</option>
            <option value="Samsung Galaxy">Samsung Galaxy</option>
            <option value="Google Pixel">Google Pixel</option>
            <option value="iPad / Tablet">iPad / Tablet</option>
            <option value="Other">Other</option>
          </select>
        </div>

        <div class="full">
          <label for="deviceModel">Device Model</label>
          <select id="deviceModel" name="deviceModel" required>
            <option value="">Choose a category first</option>
          </select>
        </div>

        <div id="otherModelWrap" class="full" style="display:none;">
          <label for="otherModel">Other Model (please specify)</label>
          <input id="otherModel" name="otherModel" type="text" placeholder="e.g., Moto G Power (2023)">
        </div>

        <div>
          <label for="repairType">Repair Needed</label>
          <select id="repairType" name="repairType" required>
            <option value="">Select Repair</option>
            <option>Screen Replacement</option>
            <option>Battery Replacement</option>
            <option>Charging Port Repair</option>
            <option>Back Glass Replacement</option>
            <option>Camera Repair</option>
            <option>Water Damage</option>
            <option>Diagnostic Only</option>
            <option>Other</option>
          </select>
        </div>

        <div>
          <label for="turnsOn">Does the device turn on?</label>
          <select id="turnsOn" name="turnsOn" required>
            <option>Yes</option>
            <option>No</option>
          </select>
        </div>

        <div>
          <label for="screenResponsive">Is the screen responsive?</label>
          <select id="screenResponsive" name="screenResponsive" required>
            <option>Yes</option>
            <option>No</option>
            <option>Partially</option>
          </select>
        </div>

        <div>
          <label for="previousRepairs">Any previous repairs?</label>
          <select id="previousRepairs" name="previousRepairs" required>
            <option>No</option>
            <option>Yes</option>
          </select>
        </div>

        <div>
          <label for="serialOrIMEI">Serial / IMEI (optional)</label>
          <input id="serialOrIMEI" name="serialOrIMEI" type="text" placeholder="e.g., 35 123456 789012 3">
        </div>

        <div class="full">
          <label for="notes">Additional Notes</label>
          <textarea id="notes" name="notes" rows="4" placeholder="Any extra details, visible damage, or requests"></textarea>
        </div>
      </div>

      <div class="actions" style="margin-top:18px;">
        <button type="submit" class="primary">Send to JJS In Home Tech</button>
        <button type="button" class="ghost" onclick="resetForm()">Clear</button>
      </div>

      <div id="result" aria-live="polite" style="margin-top:12px;display:none;"></div>
    </form>
  </main>

  <script>
    const models = {
      "iPhone":[
        "iPhone 16","iPhone 16 Plus","iPhone 16 Pro","iPhone 16 Pro Max",
        "iPhone 15","iPhone 15 Plus","iPhone 15 Pro","iPhone 15 Pro Max",
        "iPhone 14","iPhone 14 Plus","iPhone 14 Pro","iPhone 14 Pro Max",
        "iPhone 13","iPhone 13 mini","iPhone 13 Pro","iPhone 13 Pro Max",
        "iPhone 12","iPhone 12 mini","iPhone 12 Pro","iPhone 12 Pro Max",
        "iPhone 11","iPhone 11 Pro","iPhone 11 Pro Max",
        "iPhone XS","iPhone XS Max","iPhone XR","iPhone X",
        "iPhone 8","iPhone 8 Plus","iPhone SE (2nd Gen)","iPhone SE (3rd Gen)",
        "Other"
      ],
      "Samsung Galaxy":[
        "Galaxy S24","Galaxy S24+","Galaxy S24 Ultra",
        "Galaxy S23","Galaxy S23+","Galaxy S23 Ultra",
        "Galaxy S22","Galaxy S22+","Galaxy S22 Ultra",
        "Galaxy S21","Galaxy S21+","Galaxy S21 Ultra",
        "Galaxy S20","Galaxy S20+","Galaxy S20 Ultra",
        "Galaxy S10","Galaxy S10+","Galaxy S10e",
        "Galaxy A54","Galaxy A53","Galaxy A52",
        "Galaxy A14","Galaxy A13","Galaxy A12",
        "Other"
      ],
      "Google Pixel":[
        "Pixel 9","Pixel 9 Pro","Pixel 8","Pixel 8 Pro",
        "Pixel 7","Pixel 7 Pro","Pixel 7a","Pixel 6","Pixel 6 Pro","Pixel 6a",
        "Pixel 5","Pixel 5a","Pixel 4","Pixel 4a","Other"
      ],
      "iPad / Tablet":[
        "iPad Pro 12.9\"","iPad Pro 11\"","iPad Air","iPad (5th–10th gen)","iPad mini",
        "Samsung Galaxy Tab S","Samsung Galaxy Tab A","Other"
      ],
      "Other":["Other"]
    };

    const categoryEl = document.getElementById('deviceCategory');
    const modelEl = document.getElementById('deviceModel');
    const otherModelWrap = document.getElementById('otherModelWrap');

    // Start with model disabled and a helpful placeholder
    modelEl.disabled = true;
    modelEl.innerHTML = '<option value="">Choose a category first</option>';

    function populateModels(category){
      modelEl.innerHTML = '<option value="">Select Model</option>';
      if(!category || !models[category]) {
        modelEl.disabled = true;
        modelEl.style.pointerEvents = 'none';
        modelEl.style.cursor = 'default';
        return;
      }
      models[category].forEach(m=>{
        const opt = document.createElement('option');
        opt.value = m;
        opt.textContent = m;
        modelEl.appendChild(opt);
      });
      modelEl.disabled = false;
      modelEl.style.pointerEvents = 'auto';
      modelEl.style.cursor = 'pointer';
    }

    function handleModelChange(){
      if(modelEl.value === 'Other'){
        otherModelWrap.style.display = '';
        document.getElementById('otherModel').required = true;
      } else {
        otherModelWrap.style.display = 'none';
        document.getElementById('otherModel').required = false;
      }
    }

    // Wire events
    categoryEl.addEventListener('change', ()=>{ populateModels(categoryEl.value); });
    modelEl.addEventListener('change', handleModelChange);

    // Defensive: override any external CSS/JS that might disable selects
    document.addEventListener('DOMContentLoaded', ()=>{
      document.querySelectorAll('.card select').forEach(s=>{
        s.disabled = s === modelEl ? s.disabled : false;
        s.style.pointerEvents = 'auto';
        s.style.cursor = 'pointer';
      });
    });

    function resetForm(){
      document.getElementById('repairForm').reset();
      modelEl.innerHTML = '<option value="">Choose a category first</option>';
      modelEl.disabled = true;
      otherModelWrap.style.display = 'none';
      const r = document.getElementById('result');
      r.style.display = 'none';
      r.innerHTML = '';
    }

    document.getElementById('repairForm').addEventListener('submit', ()=>{
      const r = document.getElementById('result');
      r.style.display = '';
      r.innerHTML = '<div style="background:#ecfdf5;border:1px solid #bbf0d6;padding:10px;border-radius:8px;color:#065f46;">Sending…</div>';
    });
  </script>
</body>
</html>

JJS In Home Tech