Track Your Order

<p> </p>
<style>
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  background: #f5f5f5;
  color: #222;
}

.page-wrapper {
  max-width: 900px;
  margin: auto;
  padding: 40px 20px;
}

h1 {
  text-align: center;
  margin-bottom: 5px;
}

.subtitle {
  text-align: center;
  color: #555;
  margin-bottom: 30px;
}

.card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}

.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-button {
  border: none;
  background: #eee;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
}

.tab-button.active {
  background: #064607;
  color: #fff;
}

input {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.btn {
  background: #064607;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 10px;
}

.status {
  margin-top: 10px;
}

.tracking-box {
  margin-top: 30px;
  background: #fff;
  padding: 20px;
  border-radius: 16px;
}

.note {
  font-size: 12px;
  color: #777;
  margin-top: 10px;
}
</style>
<div class="page-wrapper">
<h1>Track your order</h1>
<p class="subtitle">Secure tracking • Real-time updates • 24/7 support</p>
<div class="card">
<div class="tabs">
<button class="tab-button active">Order No.</button> <button class="tab-button">Email</button>
</div>
<div id="orderTab">
<input placeholder="Ex: #1234" id="orderInput" type="text"> <button class="btn">Track Order</button>
</div>
<div style="display: none;" id="emailTab">
<input placeholder="your@email.com" id="emailInput" type="text"> <button class="btn">Track Order</button>
</div>
<div class="status" id="status"></div>
</div>
<div class="tracking-box">
<h3>Shipping status</h3>
<div id="trackingResult"></div>
<p class="note">If it doesn't appear, wait a few minutes after sending..</p>
</div>
</div>
<p><script src="https://www.17track.net/externalcall.js"></script> <script>
function switchTab(tab) {
  document.getElementById("orderTab").style.display = tab === 'order' ? 'block' : 'none';
  document.getElementById("emailTab").style.display = tab === 'email' ? 'block' : 'none';

  document.querySelectorAll(".tab-button").forEach(btn => btn.classList.remove("active"));
  event.target.classList.add("active");

  setStatus("");
}

function setStatus(msg, error=false) {
  const el = document.getElementById("status");
  el.innerText = msg;
  el.style.color = error ? "red" : "green";
}

async function fetchTracking(data) {
  try {
    const res = await fetch("/get-tracking", {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify(data)
    });

    const result = await res.json();

    if (!result.trackingNumber) {
      setStatus("Pedido não encontrado.", true);
      return;
    }

    loadTracking(result.trackingNumber);
    setStatus("Carregando rastreio...");
  } catch {
    setStatus("Erro ao buscar pedido.", true);
  }
}

function trackOrder() {
  const order = document.getElementById("orderInput").value.trim();
  if (!order) return setStatus("Digite o número do pedido.", true);

  fetchTracking({ orderNumber: order });
}

function trackEmail() {
  const email = document.getElementById("emailInput").value.trim();
  if (!email) return setStatus("Digite seu email.", true);

  fetchTracking({ email: email });
}

function loadTracking(code) {
  if (!window.YQV5) {
    setTimeout(() => loadTracking(code), 500);
    return;
  }

  document.getElementById("trackingResult").innerHTML = "";

  window.YQV5.trackSingle({
    YQ_ContainerId: "trackingResult",
    YQ_Height: 600,
    YQ_Lang: "pt",
    YQ_Num: code
  });
}
</script></p>