Order Tracking
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Track Your Order</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
color: #333;
}
.track-container {
max-width: 600px;
margin: 60px auto;
background: #fff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
text-align: center;
}
.track-container h1 {
font-size: 28px;
margin-bottom: 10px;
color: #222;
}
.track-container p {
font-size: 15px;
color: #666;
margin-bottom: 25px;
}
.input-box {
display: flex;
gap: 10px;
justify-content: center;
}
.input-box input[type="text"] {
flex: 1;
padding: 12px 15px;
font-size: 15px;
border: 1px solid #ccc;
border-radius: 8px;
outline: none;
transition: 0.3s;
}
.input-box input[type="text"]:focus {
border-color: #5a67d8;
box-shadow: 0 0 6px rgba(90,103,216,0.4);
}
.input-box button {
padding: 12px 20px;
font-size: 15px;
border: none;
background: #5a67d8;
color: #fff;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s;
}
.input-box button:hover {
background: #434190;
}
.tracking-result {
margin-top: 25px;
font-size: 16px;
color: #444;
display: none;
}
</style>
</head>
<body>
<div class="track-container">
<h1>Track Your Order</h1>
<p>Enter your tracking number to see the latest status.</p>
<div class="input-box">
<input type="text" id="trackingNum" placeholder="Enter Tracking Number">
<button onclick="track()">Track</button>
</div>
<div class="tracking-result" id="trackingResult"></div>
</div>
<script>
function track() {
const num = document.getElementById('trackingNum').value.trim();
if (!num) {
alert("Please enter a tracking number.");
return;
}
// Open 17TRACK tracking page
const url = "https://www.17track.net/en/track?nums=" + encodeURIComponent(num);
window.open(url, "_blank");
}
</script>
</body>
</html>