Track Orders

<!-- Tracking Section -->
<div class="tracking-wrapper">
  <div class="tracking-box">
    <label for="YQNum" class="visually-hidden">Enter Tracking Number:</label>
    <input type="text" id="YQNum" maxlength="50" placeholder="Enter your tracking number" class="tracking-input">
    <button id="trackBtn" class="btn">Track</button>
  </div>

  <!-- Container to display the tracking result -->
  <div id="YQContainer" class="tracking-result"></div>
</div>

<!-- Script -->
<script src="//www.17track.net/externalcall.js"></script>
<script>
  const input = document.getElementById("YQNum");
  const button = document.getElementById("trackBtn");

  button.addEventListener("click", doTrack);
  input.addEventListener("keypress", function (e) {
    if (e.key === "Enter") {
      doTrack();
    }
  });

  function doTrack() {
    const num = input.value.trim();
    if (!num) {
      alert("Please enter your tracking number.");
      return;
    }

    YQV5.trackSingle({
      YQ_ContainerId: "YQContainer",
      YQ_Height: 560,
      YQ_Fc: "0",
      YQ_Lang: "en",
      YQ_Num: num
    });
  }
</script>

<!-- Minimal CSS -->
<style>
  .tracking-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 30px auto;
    max-width: 600px; /* keeps it neat */
    width: 100%;
  }
  .tracking-box {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
  }
  .tracking-input {
    flex: 1;
    max-width: 350px; /* prevents super-wide input */
  }
  .tracking-result {
    margin-top: 20px;
    width: 100%;
  }
  .visually-hidden {
    position: absolute;
    left: -9999px;
  }
</style>