<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Order Status - Track Your Order</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .container { background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-width: 500px; width: 100%; padding: 40px; } .icon { width: 80px; height: 80px; margin: 0 auto 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; } h1 { text-align: center; color: #1a1a1a; font-size: 28px; margin-bottom: 12px; font-weight: 700; } .subtitle { text-align: center; color: #666; margin-bottom: 32px; font-size: 15px; line-height: 1.6; } .form-group { margin-bottom: 24px; } label { display: block; margin-bottom: 8px; color: #333; font-weight: 600; font-size: 14px; } input { width: 100%; padding: 14px 16px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 15px; transition: all 0.3s; font-family: inherit; } input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } input::placeholder { color: #aaa; } .btn-track { width: 100%; padding: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; margin-top: 8px; } .btn-track:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4); } .btn-track:active { transform: translateY(0); } .divider { text-align: center; margin: 32px 0; color: #999; font-size: 14px; position: relative; } .divider:before, .divider:after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: #e0e0e0; } .divider:before { left: 0; } .divider:after { right: 0; } .help-links { text-align: center; margin-top: 24px; } .help-links a { color: #667eea; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.3s; } .help-links a:hover { color: #764ba2; text-decoration: underline; } .info-box { background: #f8f9fa; border-left: 4px solid #667eea; padding: 16px; border-radius: 8px; margin-top: 24px; font-size: 13px; color: #555; line-height: 1.6; } .info-box strong { color: #333; } .result { display: none; margin-top: 24px; padding: 20px; background: #f0f9ff; border: 2px solid #667eea; border-radius: 8px; } .result.show { display: block; animation: fadeIn 0.5s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .result h3 { color: #667eea; margin-bottom: 12px; font-size: 18px; } .result-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #ddd; } .result-item:last-child { border-bottom: none; } .result-label { color: #666; font-weight: 500; } .result-value { color: #333; font-weight: 600; } .error { display: none; margin-top: 16px; padding: 12px 16px; background: #fee; border: 1px solid #fcc; border-radius: 8px; color: #c33; font-size: 14px; } .error.show { display: block; animation: fadeIn 0.5s; } @media (max-width: 480px) { .container { padding: 28px 20px; } h1 { font-size: 24px; } .icon { width: 60px; height: 60px; font-size: 30px; } } </style> </head> <body> <div class="container"> <div class="icon">?</div> <h1>Track Your Order</h1> <p class="subtitle">Enter your order details below to check the status and shipping information</p> <form id="trackingForm"> <div class="form-group"> <label for="orderNumber">Order Number</label> <input type="text" id="orderNumber" placeholder="e.g., 12345 or #12345" required > </div> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" placeholder="email@example.com" required > </div> <button type="submit" class="btn-track">Track Order</button> </form> <div class="error" id="error"> Order not found. Please check your order number and email address. </div> <div class="result" id="result"> <h3>Order Details</h3> <div class="result-item"> <span class="result-label">Order Number:</span> <span class="result-value" id="resultOrderNum">-</span> </div> <div class="result-item"> <span class="result-label">Status:</span> <span class="result-value" id="resultStatus">-</span> </div> <div class="result-item"> <span class="result-label">Tracking Number:</span> <span class="result-value" id="resultTracking">-</span> </div> <div class="result-item"> <span class="result-label">Estimated Delivery:</span> <span class="result-value" id="resultDelivery">-</span> </div> </div> <div class="divider">OR</div> <div class="help-links"> <a href="/account.php?action=account_details">Sign in to view all orders</a> </div> <div class="info-box"> <strong>? Where to find your order number?</strong><br> Check your order confirmation email sent to your inbox. The order number is usually in the subject line or at the top of the email. </div> </div> <script> document.getElementById('trackingForm').addEventListener('submit', function(e) { e.preventDefault(); const orderNumber = document.getElementById('orderNumber').value.trim(); const email = document.getElementById('email').value.trim(); // Hide previous results/errors document.getElementById('result').classList.remove('show'); document.getElementById('error').classList.remove('show'); // In production, this would make an API call to BigCommerce // For now, simulate a lookup setTimeout(() => { // Example: Check if order exists (you'd replace this with actual API call) if (orderNumber && email) { // Simulate found order document.getElementById('resultOrderNum').textContent = orderNumber.replace('#', ''); document.getElementById('resultStatus').textContent = 'Shipped'; document.getElementById('resultTracking').textContent = '1Z999AA10123456784'; document.getElementById('resultDelivery').textContent = 'Nov 15, 2025'; document.getElementById('result').classList.add('show'); // In reality, redirect to BigCommerce order status page: // window.location.href = `/account.php?action=view_order&order_id=${orderNumber}`; } else { document.getElementById('error').classList.add('show'); } }, 800); }); // Clear error when user starts typing document.getElementById('orderNumber').addEventListener('input', function() { document.getElementById('error').classList.remove('show'); }); document.getElementById('email').addEventListener('input', function() { document.getElementById('error').classList.remove('show'); }); </script> </body> </html>