Ethix Shipping - Track Your Shipment<\/title>\r\n <style>\r\n :root {\r\n --primary: #175179;\r\n --secondary: #47b9b8;\r\n --accent: #f37f58;\r\n }\r\n\r\n .hero-section {\r\n background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n padding: 4rem 2rem;\r\n text-align: center;\r\n color: white;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .hero-title {\r\n font-size: 2.5rem;\r\n margin-bottom: 1rem;\r\n font-weight: 700;\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 1.2rem;\r\n opacity: 0.9;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n .features-section {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 2rem;\r\n padding: 2rem;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .feature-card {\r\n background: white;\r\n padding: 1.5rem;\r\n border-radius: 12px;\r\n text-align: center;\r\n transition: transform 0.3s ease;\r\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\r\n }\r\n\r\n .feature-card:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n .feature-icon {\r\n font-size: 2.5rem;\r\n color: var(--primary);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .feature-title {\r\n color: var(--primary);\r\n font-weight: 600;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .feature-description {\r\n color: #666;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .contact-section {\r\n background: #f8fafc;\r\n padding: 2rem;\r\n border-radius: 12px;\r\n margin-top: 3rem;\r\n text-align: center;\r\n }\r\n\r\n .contact-title {\r\n color: var(--primary);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .contact-info {\r\n display: flex;\r\n justify-content: center;\r\n gap: 2rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .contact-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n color: #666;\r\n }\r\n\r\n .contact-item ion-icon {\r\n color: var(--secondary);\r\n font-size: 1.2rem;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .hero-title {\r\n font-size: 2rem;\r\n }\r\n \r\n .features-section {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .contact-info {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"hero-section\">\r\n <h1 class=\"hero-title\">Track Your Shipment<\/h1>\r\n <p class=\"hero-subtitle\">Get real-time updates on your cargo's journey across the globe with Ethix Shipping's advanced tracking system<\/p>\r\n <\/div>\r\n\r\n <!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Ethix Shipping Tracker<\/title>\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/unpkg.com\/ionicons@5.5.2\/dist\/ionicons\/ionicons.css\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root {\r\n --primary: #175179;\r\n --secondary: #47b9b8;\r\n --accent: #f37f58;\r\n }\r\n\r\n body {\r\n background: #f8fafc;\r\n font-family: 'Inter', sans-serif;\r\n }\r\n\r\n .container {\r\n max-width: 800px;\r\n margin: 4rem auto;\r\n padding: 2rem;\r\n background: white;\r\n border-radius: 1.5rem;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.05);\r\n }\r\n\r\n .track-input {\r\n padding: 1.5rem;\r\n border: 2px solid var(--primary);\r\n border-radius: 12px;\r\n font-size: 1.1rem;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .track-input:focus {\r\n border-color: var(--secondary);\r\n box-shadow: 0 0 0 3px rgba(71,185,184,0.2);\r\n }\r\n\r\n .track-btn {\r\n background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n border: none;\r\n padding: 1rem 2rem;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n transition: transform 0.2s ease;\r\n }\r\n\r\n .track-btn:hover {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .timeline {\r\n position: relative;\r\n padding: 2rem 0;\r\n }\r\n\r\n .timeline-item {\r\n position: relative;\r\n padding-left: 3rem;\r\n margin-bottom: 3rem;\r\n border-left: 2px solid #e2e8f0;\r\n }\r\n\r\n .timeline-item:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n .timeline-icon {\r\n position: absolute;\r\n left: -1.5rem;\r\n top: 0;\r\n width: 3rem;\r\n height: 3rem;\r\n border-radius: 50%;\r\n background: var(--primary);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: white;\r\n box-shadow: 0 2px 8px rgba(23,81,121,0.2);\r\n }\r\n\r\n .timeline-content {\r\n background: #f8fafc;\r\n padding: 1.5rem;\r\n border-radius: 12px;\r\n position: relative;\r\n transform: translateY(0);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .timeline-content:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n }\r\n\r\n .status-badge {\r\n background: var(--secondary);\r\n color: white;\r\n padding: 0.25rem 0.75rem;\r\n border-radius: 20px;\r\n font-size: 0.9rem;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .loading-dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n padding: 2rem;\r\n }\r\n\r\n .loading-dots div {\r\n width: 12px;\r\n height: 12px;\r\n background: var(--secondary);\r\n border-radius: 50%;\r\n animation: bounce 1.4s infinite ease-in-out;\r\n }\r\n\r\n .loading-dots div:nth-child(2) { animation-delay: 0.2s; }\r\n .loading-dots div:nth-child(3) { animation-delay: 0.4s; }\r\n\r\n @keyframes bounce {\r\n 0%, 80%, 100% { transform: translateY(0); }\r\n 40% { transform: translateY(-15px); }\r\n }\r\n\r\n .error-card {\r\n background: #fff0f0;\r\n border: 1px solid #ffcccc;\r\n padding: 1.5rem;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n color: #dc3545;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"container\">\r\n <h1 class=\"text-center mb-4 fw-bold\" style=\"color: var(--primary);\">\r\n <ion-icon name=\"rocket-outline\" class=\"me-2\"><\/ion-icon>\r\n Ethix Shipping Tracker\r\n <\/h1>\r\n\r\n <div class=\"input-group mb-5 shadow-sm\">\r\n <input type=\"text\" id=\"shipmentId\" class=\"form-control track-input\" \r\n placeholder=\"Enter Tracking Number\" required>\r\n <button class=\"btn track-btn text-white\" onclick=\"trackShipment()\">\r\n Track Shipment\r\n <\/button>\r\n <\/div>\r\n\r\n <div id=\"loading\" class=\"d-none\">\r\n <div class=\"loading-dots\">\r\n <div><\/div>\r\n <div><\/div>\r\n <div><\/div>\r\n <\/div>\r\n <p class=\"text-center text-muted\">Fetching real-time tracking data...<\/p>\r\n <\/div>\r\n\r\n <div id=\"result\"><\/div>\r\n <\/div>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha1\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\r\n <script type=\"module\" src=\"https:\/\/unpkg.com\/ionicons@5.5.2\/dist\/ionicons\/ionicons.esm.js\"><\/script>\r\n\r\n <script>\r\n function trackShipment() {\r\n const shipmentId = document.getElementById(\"shipmentId\").value.trim();\r\n const resultDiv = document.getElementById(\"result\");\r\n const loadingDiv = document.getElementById(\"loading\");\r\n const trackButton = document.querySelector(\"button\");\r\n\r\n if (!shipmentId) {\r\n resultDiv.innerHTML = `\r\n <div class=\"error-card\">\r\n <ion-icon name=\"warning-outline\" style=\"font-size: 2rem\"><\/ion-icon>\r\n <div>Please enter a valid tracking number<\/div>\r\n <\/div>`;\r\n return;\r\n }\r\n\r\n resultDiv.innerHTML = \"\";\r\n loadingDiv.classList.remove(\"d-none\");\r\n trackButton.disabled = true;\r\n\r\n const url = `https:\/\/script.google.com\/macros\/s\/AKfycbwl0wjMlvobpqxb4r8-4sc0iXfq3_GONYh2XAkF_iTxSEzDoTCns6tTJZo_juM1GKu3QA\/exec?shipmentId=${shipmentId}`;\r\n\r\n fetch(url)\r\n .then(response => response.json())\r\n .then(data => {\r\n setTimeout(() => { \/\/ Simulated delay for animation\r\n loadingDiv.classList.add(\"d-none\");\r\n trackButton.disabled = false;\r\n\r\n if (data.error) {\r\n resultDiv.innerHTML = `\r\n <div class=\"error-card\">\r\n <ion-icon name=\"close-circle-outline\" style=\"font-size: 2rem\"><\/ion-icon>\r\n <div>${data.error}<\/div>\r\n <\/div>`;\r\n } else if (data.length > 0) {\r\n let html = `<div class=\"timeline\">`;\r\n data.forEach((point, index) => {\r\n html += `\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-icon\">\r\n ${index === 0 ? '<ion-icon name=\"checkmark-done-outline\"><\/ion-icon>' : \r\n index === data.length - 1 ? '<ion-icon name=\"location-outline\"><\/ion-icon>' : \r\n '<ion-icon name=\"time-outline\"><\/ion-icon>'}\r\n <\/div>\r\n <div class=\"timeline-content\">\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <div class=\"fw-bold\" style=\"color: var(--primary);\">${point.location}<\/div>\r\n <div class=\"text-muted small\">${point.timestamp}<\/div>\r\n <\/div>\r\n <div class=\"status-badge\">\r\n <ion-icon name=\"${getStatusIcon(point.status)}\"><\/ion-icon>\r\n ${point.status}\r\n <\/div>\r\n <\/div>\r\n <\/div>`;\r\n });\r\n html += `<\/div>`;\r\n resultDiv.innerHTML = html;\r\n } else {\r\n resultDiv.innerHTML = `\r\n <div class=\"error-card\">\r\n <ion-icon name=\"help-circle-outline\" style=\"font-size: 2rem\"><\/ion-icon>\r\n <div>No tracking history found for this shipment<\/div>\r\n <\/div>`;\r\n }\r\n }, 500);\r\n })\r\n .catch(error => {\r\n loadingDiv.classList.add(\"d-none\");\r\n resultDiv.innerHTML = `\r\n <div class=\"error-card\">\r\n <ion-icon name=\"cloud-offline-outline\" style=\"font-size: 2rem\"><\/ion-icon>\r\n <div>Unable to connect to tracking service. Please try again later.<\/div>\r\n <\/div>`;\r\n trackButton.disabled = false;\r\n });\r\n }\r\n\r\n function getStatusIcon(status) {\r\n const icons = {\r\n 'Shipped': 'cube-outline',\r\n 'In Transit': 'car-outline',\r\n 'Out for Delivery': 'bicycle-outline',\r\n 'Delivered': 'checkmark-circle-outline'\r\n };\r\n return icons[status] || 'alert-circle-outline';\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n <\/div>\r\n\r\n <div class=\"features-section\">\r\n <div class=\"feature-card\">\r\n <ion-icon name=\"globe-outline\" class=\"feature-icon\"><\/ion-icon>\r\n <h3 class=\"feature-title\">Global Coverage<\/h3>\r\n <p class=\"feature-description\">Track your shipments anywhere in the world with our comprehensive network<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <ion-icon name=\"time-outline\" class=\"feature-icon\"><\/ion-icon>\r\n <h3 class=\"feature-title\">Real-Time Updates<\/h3>\r\n <p class=\"feature-description\">Stay informed with instant notifications and status updates<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <ion-icon name=\"shield-checkmark-outline\" class=\"feature-icon\"><\/ion-icon>\r\n <h3 class=\"feature-title\">Secure Tracking<\/h3>\r\n <p class=\"feature-description\">Your shipment information is protected with advanced security measures<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact-section\">\r\n <h2 class=\"contact-title\">Need Assistance?<\/h2>\r\n <div class=\"contact-info\">\r\n <div class=\"contact-item\">\r\n <ion-icon name=\"call-outline\"><\/ion-icon>\r\n <span>+971 42564748<\/span>\r\n <\/div>\r\n <div class=\"contact-item\">\r\n <ion-icon name=\"mail-outline\"><\/ion-icon>\r\n <span>services@ethixshipping.com<\/span>\r\n <\/div>\r\n <div class=\"contact-item\">\r\n <ion-icon name=\"location-outline\"><\/ion-icon>\r\n <span>Suite #307 Al Fajer Complex, Oud Metha Dubai, UAE<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ethix Shipping – Track Your Shipment Track Your Shipment Get real-time updates on your cargo’s journey across the globe with Ethix Shipping’s advanced tracking system Ethix Shipping Tracker Ethix Shipping Tracker Track Shipment Fetching real-time tracking data… Global Coverage Track your shipments anywhere in the world with our comprehensive network Real-Time Updates Stay informed with […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-681","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/pages\/681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/comments?post=681"}],"version-history":[{"count":61,"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/pages\/681\/revisions"}],"predecessor-version":[{"id":750,"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/pages\/681\/revisions\/750"}],"wp:attachment":[{"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/media?parent=681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Ethix Shipping - Track Your Shipment<\/title>\r\n <style>\r\n :root {\r\n --primary: #175179;\r\n --secondary: #47b9b8;\r\n --accent: #f37f58;\r\n }\r\n\r\n .hero-section {\r\n background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n padding: 4rem 2rem;\r\n text-align: center;\r\n color: white;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .hero-title {\r\n font-size: 2.5rem;\r\n margin-bottom: 1rem;\r\n font-weight: 700;\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 1.2rem;\r\n opacity: 0.9;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n .features-section {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 2rem;\r\n padding: 2rem;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .feature-card {\r\n background: white;\r\n padding: 1.5rem;\r\n border-radius: 12px;\r\n text-align: center;\r\n transition: transform 0.3s ease;\r\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\r\n }\r\n\r\n .feature-card:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n .feature-icon {\r\n font-size: 2.5rem;\r\n color: var(--primary);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .feature-title {\r\n color: var(--primary);\r\n font-weight: 600;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .feature-description {\r\n color: #666;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .contact-section {\r\n background: #f8fafc;\r\n padding: 2rem;\r\n border-radius: 12px;\r\n margin-top: 3rem;\r\n text-align: center;\r\n }\r\n\r\n .contact-title {\r\n color: var(--primary);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .contact-info {\r\n display: flex;\r\n justify-content: center;\r\n gap: 2rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .contact-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n color: #666;\r\n }\r\n\r\n .contact-item ion-icon {\r\n color: var(--secondary);\r\n font-size: 1.2rem;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .hero-title {\r\n font-size: 2rem;\r\n }\r\n \r\n .features-section {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .contact-info {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"hero-section\">\r\n <h1 class=\"hero-title\">Track Your Shipment<\/h1>\r\n <p class=\"hero-subtitle\">Get real-time updates on your cargo's journey across the globe with Ethix Shipping's advanced tracking system<\/p>\r\n <\/div>\r\n\r\n <!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Ethix Shipping Tracker<\/title>\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/unpkg.com\/ionicons@5.5.2\/dist\/ionicons\/ionicons.css\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root {\r\n --primary: #175179;\r\n --secondary: #47b9b8;\r\n --accent: #f37f58;\r\n }\r\n\r\n body {\r\n background: #f8fafc;\r\n font-family: 'Inter', sans-serif;\r\n }\r\n\r\n .container {\r\n max-width: 800px;\r\n margin: 4rem auto;\r\n padding: 2rem;\r\n background: white;\r\n border-radius: 1.5rem;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.05);\r\n }\r\n\r\n .track-input {\r\n padding: 1.5rem;\r\n border: 2px solid var(--primary);\r\n border-radius: 12px;\r\n font-size: 1.1rem;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .track-input:focus {\r\n border-color: var(--secondary);\r\n box-shadow: 0 0 0 3px rgba(71,185,184,0.2);\r\n }\r\n\r\n .track-btn {\r\n background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n border: none;\r\n padding: 1rem 2rem;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n transition: transform 0.2s ease;\r\n }\r\n\r\n .track-btn:hover {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .timeline {\r\n position: relative;\r\n padding: 2rem 0;\r\n }\r\n\r\n .timeline-item {\r\n position: relative;\r\n padding-left: 3rem;\r\n margin-bottom: 3rem;\r\n border-left: 2px solid #e2e8f0;\r\n }\r\n\r\n .timeline-item:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n .timeline-icon {\r\n position: absolute;\r\n left: -1.5rem;\r\n top: 0;\r\n width: 3rem;\r\n height: 3rem;\r\n border-radius: 50%;\r\n background: var(--primary);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: white;\r\n box-shadow: 0 2px 8px rgba(23,81,121,0.2);\r\n }\r\n\r\n .timeline-content {\r\n background: #f8fafc;\r\n padding: 1.5rem;\r\n border-radius: 12px;\r\n position: relative;\r\n transform: translateY(0);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .timeline-content:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n }\r\n\r\n .status-badge {\r\n background: var(--secondary);\r\n color: white;\r\n padding: 0.25rem 0.75rem;\r\n border-radius: 20px;\r\n font-size: 0.9rem;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .loading-dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n padding: 2rem;\r\n }\r\n\r\n .loading-dots div {\r\n width: 12px;\r\n height: 12px;\r\n background: var(--secondary);\r\n border-radius: 50%;\r\n animation: bounce 1.4s infinite ease-in-out;\r\n }\r\n\r\n .loading-dots div:nth-child(2) { animation-delay: 0.2s; }\r\n .loading-dots div:nth-child(3) { animation-delay: 0.4s; }\r\n\r\n @keyframes bounce {\r\n 0%, 80%, 100% { transform: translateY(0); }\r\n 40% { transform: translateY(-15px); }\r\n }\r\n\r\n .error-card {\r\n background: #fff0f0;\r\n border: 1px solid #ffcccc;\r\n padding: 1.5rem;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n color: #dc3545;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"container\">\r\n <h1 class=\"text-center mb-4 fw-bold\" style=\"color: var(--primary);\">\r\n <ion-icon name=\"rocket-outline\" class=\"me-2\"><\/ion-icon>\r\n Ethix Shipping Tracker\r\n <\/h1>\r\n\r\n <div class=\"input-group mb-5 shadow-sm\">\r\n <input type=\"text\" id=\"shipmentId\" class=\"form-control track-input\" \r\n placeholder=\"Enter Tracking Number\" required>\r\n <button class=\"btn track-btn text-white\" onclick=\"trackShipment()\">\r\n Track Shipment\r\n <\/button>\r\n <\/div>\r\n\r\n <div id=\"loading\" class=\"d-none\">\r\n <div class=\"loading-dots\">\r\n <div><\/div>\r\n <div><\/div>\r\n <div><\/div>\r\n <\/div>\r\n <p class=\"text-center text-muted\">Fetching real-time tracking data...<\/p>\r\n <\/div>\r\n\r\n <div id=\"result\"><\/div>\r\n <\/div>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha1\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\r\n <script type=\"module\" src=\"https:\/\/unpkg.com\/ionicons@5.5.2\/dist\/ionicons\/ionicons.esm.js\"><\/script>\r\n\r\n <script>\r\n function trackShipment() {\r\n const shipmentId = document.getElementById(\"shipmentId\").value.trim();\r\n const resultDiv = document.getElementById(\"result\");\r\n const loadingDiv = document.getElementById(\"loading\");\r\n const trackButton = document.querySelector(\"button\");\r\n\r\n if (!shipmentId) {\r\n resultDiv.innerHTML = `\r\n <div class=\"error-card\">\r\n <ion-icon name=\"warning-outline\" style=\"font-size: 2rem\"><\/ion-icon>\r\n <div>Please enter a valid tracking number<\/div>\r\n <\/div>`;\r\n return;\r\n }\r\n\r\n resultDiv.innerHTML = \"\";\r\n loadingDiv.classList.remove(\"d-none\");\r\n trackButton.disabled = true;\r\n\r\n const url = `https:\/\/script.google.com\/macros\/s\/AKfycbwl0wjMlvobpqxb4r8-4sc0iXfq3_GONYh2XAkF_iTxSEzDoTCns6tTJZo_juM1GKu3QA\/exec?shipmentId=${shipmentId}`;\r\n\r\n fetch(url)\r\n .then(response => response.json())\r\n .then(data => {\r\n setTimeout(() => { \/\/ Simulated delay for animation\r\n loadingDiv.classList.add(\"d-none\");\r\n trackButton.disabled = false;\r\n\r\n if (data.error) {\r\n resultDiv.innerHTML = `\r\n <div class=\"error-card\">\r\n <ion-icon name=\"close-circle-outline\" style=\"font-size: 2rem\"><\/ion-icon>\r\n <div>${data.error}<\/div>\r\n <\/div>`;\r\n } else if (data.length > 0) {\r\n let html = `<div class=\"timeline\">`;\r\n data.forEach((point, index) => {\r\n html += `\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-icon\">\r\n ${index === 0 ? '<ion-icon name=\"checkmark-done-outline\"><\/ion-icon>' : \r\n index === data.length - 1 ? '<ion-icon name=\"location-outline\"><\/ion-icon>' : \r\n '<ion-icon name=\"time-outline\"><\/ion-icon>'}\r\n <\/div>\r\n <div class=\"timeline-content\">\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <div class=\"fw-bold\" style=\"color: var(--primary);\">${point.location}<\/div>\r\n <div class=\"text-muted small\">${point.timestamp}<\/div>\r\n <\/div>\r\n <div class=\"status-badge\">\r\n <ion-icon name=\"${getStatusIcon(point.status)}\"><\/ion-icon>\r\n ${point.status}\r\n <\/div>\r\n <\/div>\r\n <\/div>`;\r\n });\r\n html += `<\/div>`;\r\n resultDiv.innerHTML = html;\r\n } else {\r\n resultDiv.innerHTML = `\r\n <div class=\"error-card\">\r\n <ion-icon name=\"help-circle-outline\" style=\"font-size: 2rem\"><\/ion-icon>\r\n <div>No tracking history found for this shipment<\/div>\r\n <\/div>`;\r\n }\r\n }, 500);\r\n })\r\n .catch(error => {\r\n loadingDiv.classList.add(\"d-none\");\r\n resultDiv.innerHTML = `\r\n <div class=\"error-card\">\r\n <ion-icon name=\"cloud-offline-outline\" style=\"font-size: 2rem\"><\/ion-icon>\r\n <div>Unable to connect to tracking service. Please try again later.<\/div>\r\n <\/div>`;\r\n trackButton.disabled = false;\r\n });\r\n }\r\n\r\n function getStatusIcon(status) {\r\n const icons = {\r\n 'Shipped': 'cube-outline',\r\n 'In Transit': 'car-outline',\r\n 'Out for Delivery': 'bicycle-outline',\r\n 'Delivered': 'checkmark-circle-outline'\r\n };\r\n return icons[status] || 'alert-circle-outline';\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n <\/div>\r\n\r\n <div class=\"features-section\">\r\n <div class=\"feature-card\">\r\n <ion-icon name=\"globe-outline\" class=\"feature-icon\"><\/ion-icon>\r\n <h3 class=\"feature-title\">Global Coverage<\/h3>\r\n <p class=\"feature-description\">Track your shipments anywhere in the world with our comprehensive network<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <ion-icon name=\"time-outline\" class=\"feature-icon\"><\/ion-icon>\r\n <h3 class=\"feature-title\">Real-Time Updates<\/h3>\r\n <p class=\"feature-description\">Stay informed with instant notifications and status updates<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <ion-icon name=\"shield-checkmark-outline\" class=\"feature-icon\"><\/ion-icon>\r\n <h3 class=\"feature-title\">Secure Tracking<\/h3>\r\n <p class=\"feature-description\">Your shipment information is protected with advanced security measures<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact-section\">\r\n <h2 class=\"contact-title\">Need Assistance?<\/h2>\r\n <div class=\"contact-info\">\r\n <div class=\"contact-item\">\r\n <ion-icon name=\"call-outline\"><\/ion-icon>\r\n <span>+971 42564748<\/span>\r\n <\/div>\r\n <div class=\"contact-item\">\r\n <ion-icon name=\"mail-outline\"><\/ion-icon>\r\n <span>services@ethixshipping.com<\/span>\r\n <\/div>\r\n <div class=\"contact-item\">\r\n <ion-icon name=\"location-outline\"><\/ion-icon>\r\n <span>Suite #307 Al Fajer Complex, Oud Metha Dubai, UAE<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ethix Shipping – Track Your Shipment Track Your Shipment Get real-time updates on your cargo’s journey across the globe with Ethix Shipping’s advanced tracking system Ethix Shipping Tracker Ethix Shipping Tracker Track Shipment Fetching real-time tracking data… Global Coverage Track your shipments anywhere in the world with our comprehensive network Real-Time Updates Stay informed with […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-681","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/pages\/681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/comments?post=681"}],"version-history":[{"count":61,"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/pages\/681\/revisions"}],"predecessor-version":[{"id":750,"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/pages\/681\/revisions\/750"}],"wp:attachment":[{"href":"https:\/\/ethixshipping.com\/index.php\/wp-json\/wp\/v2\/media?parent=681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}