Track My Order

<!-- 容器 -->
<div class="tracking-page-container">
  
  <div class="tracking-tabs">
    <button type="button" class="tab-link active" data-tab="order-tab">Order Number</button>
    <button type="button" class="tab-link" data-tab="tracking-tab">Tracking Number</button>
  </div>

  <div id="order-tab" class="tab-content" style="display: block;">
    <div class="form-group">
      <label>Order Number</label>
      <input type="text" id="order-input" placeholder="Enter your Order Number">
    </div>
    <div class="form-group">
      <label>Email or Phone Number</label>
      <input type="text" id="email-input" placeholder="Enter the Email or Phone Number used at checkout">
    </div>
  </div>

  <div id="tracking-tab" class="tab-content" style="display: none;">
    <div class="form-group">
      <label>Tracking Number</label>
      <input type="text" id="tracking-input" placeholder="Enter your Tracking Number">
    </div>
  </div>

  <div class="button-group">
    <button type="button" class="btn-secondary" onclick="window.location.href='/pages/contact'">My Order</button>
    <button type="button" class="btn-primary" onclick="redirectTo17Track()">Track</button>
  </div>

  <p class="note">Please note: Shipping status updates may take 1–3 business days to appear. If you have any questions, feel free to contact our customer service team at support@Elysva.com.</p>
</div>

<style>
  .tracking-page-container { max-width: 500px; margin: 40px auto; font-family: sans-serif; }
  .tracking-tabs { display: flex; border-bottom: 2px solid #eee; margin-bottom: 20px; }
  .tab-link { flex: 1; padding: 15px; border: none; background: none; font-weight: bold; cursor: pointer; color: #888; transition: 0.3s; }
  .tab-link.active { color: #000; border-bottom: 2px solid #000; }
  .tab-content { display: none; }
  .form-group { margin-bottom: 15px; }
  .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
  .form-group input { width: 100%; padding: 12px; border: 1px solid #ccc; box-sizing: border-box; }
  .button-group { display: flex; gap: 10px; margin-top: 20px; }
  .button-group button { flex: 1; padding: 15px; cursor: pointer; border: 1px solid #000; font-weight: bold; }
  .btn-primary { background: #000; color: #fff; }
  .btn-secondary { background: #fff; color: #000; }
  .note { margin-top: 20px; font-size: 12px; color: #666; text-align: center; line-height: 1.5; }
</style>

<script>
  // Tab 切换逻辑
  document.querySelectorAll('.tab-link').forEach(tab => {
    tab.addEventListener('click', function() {
      document.querySelectorAll('.tab-link').forEach(t => t.classList.remove('active'));
      document.querySelectorAll('.tab-content').forEach(c => c.style.display = 'none');
      this.classList.add('active');
      document.getElementById(this.getAttribute('data-tab')).style.display = 'block';
    });
  });

  // 17Track 跳转逻辑
  function redirectTo17Track() {
    let trackingNum = "";
    
    // 判断当前是在哪个 Tab
    if (document.getElementById('tracking-tab').style.display === 'block') {
      trackingNum = document.getElementById('tracking-input').value.trim();
    } else {
      // 这里的逻辑可以自定义：如果用户只提供了订单号，你可能需要后台查询
      // 此处简单处理为：提示用户使用运单号查询
      alert("请切换至 Tracking Number 标签使用运单号查询。");
      return;
    }

    if (trackingNum) {
      window.open('https://t.17track.net/en#nums=' + trackingNum, '_blank');
    } else {
      alert("请输入运单号");
    }
  }
</script>