{'role': 'assistant', 'content': '<function_calls>\n<create-file file_path="nexusship/templates/track.html">\n{% extends "base.html" %}\n\n{% block content %}\n<!-- Page Header -->\n<div class="page-header">\n    <div class="container">\n        <h1>Track Your Shipment</h1>\n        <p>Enter your tracking number to get real-time updates on your package</p>\n    </div>\n</div>\n\n<!-- Tracking Section -->\n<section style="padding: 60px 0; background: #F5F5F5;">\n    <div class="container">\n        <div class="tracking-box" style="max-width: 900px; margin: 0 auto;">\n            <h2 style="text-align: center; margin-bottom: 30px;">Track Your Package</h2>\n            <form id="trackingForm">\n                <div class="tracking-form">\n                    <input type="text" id="trackingNumber" class="tracking-input" placeholder="Enter your tracking number (e.g., NS-12345678-1234)" required>\n                    <button type="submit" id="trackButton" class="tracking-button">Track Package</button>\n                </div>\n            </form>\n            \n            <div id="trackingResults" class="tracking-results"></div>\n        </div>\n    </div>\n</section>\n\n<!-- How to Track Section -->\n<section style="padding: 60px 0; background: white;">\n    <div class="container">\n        <div class="section-title">\n            <h2>How to Track Your Package</h2>\n            <p>Follow these simple steps to track your shipment</p>\n        </div>\n        \n        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">\n            <div style="padding: 30px; background: #F5F5F5; border-radius: 10px;">\n                <div style="font-size: 48px; margin-bottom: 15px;">1️⃣</div>\n                <h3 style="margin-bottom: 15px; color: #4D148C;">Enter Tracking Number</h3>\n                <p style="color: #666;">Locate your tracking number on your receipt or email confirmation and enter it in the field above.</p>\n            </div>\n            \n            <div style="padding: 30px; background: #F5F5F5; border-radius: 10px;">\n                <div style="font-size: 48px; margin-bottom: 15px;">2️⃣</div>\n                <h3 style="margin-bottom: 15px; color: #4D148C;">Click Track</h3>\n                <p style="color: #666;">Press the "Track Package" button to retrieve your shipment\'s current status and location.</p>\n            </div>\n            \n            <div style="padding: 30px; background: #F5F5F5; border-radius: 10px;">\n                <div style="font-size: 48px; margin-bottom: 15px;">3️⃣</div>\n                <h3 style="margin-bottom: 15px; color: #4D148C;">View Updates</h3>\n                <p style="color: #666;">See detailed tracking history including timestamps, locations, and delivery estimates.</p>\n            </div>\n        </div>\n    </div>\n</section>\n\n<!-- Tracking Status Meanings -->\n<section style="padding: 60px 0; background: #F5F5F5;">\n    <div class="container">\n        <div class="section-title">\n            <h2>Tracking Status Meanings</h2>\n            <p>Understanding what each status means for your shipment</p>\n        </div>\n        \n        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto;">\n            <div style="display: flex; align-items: center; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">\n                <div style="width: 60px; height: 60px; background: #E3F2FD; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 20px;">📦</div>\n                <div>\n                    <h4 style="margin-bottom: 5px; color: #4D148C;">Processing</h4>\n                    <p style="font-size: 14px; color: #666; margin: 0;">Your shipment has been received and is being prepared for transit.</p>\n                </div>\n            </div>\n            \n            <div style="display: flex; align-items: center; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">\n                <div style="width: 60px; height: 60px; background: #FFF3E0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 20px;">🚚</div>\n                <div>\n                    <h4 style="margin-bottom: 5px; color: #4D148C;">In Transit</h4>\n                    <p style="font-size: 14px; color: #666; margin: 0;">Your package is on its way to the destination.</p>\n                </div>\n            </div>\n            \n            <div style="display: flex; align-items: center; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">\n                <div style="width: 60px; height: 60px; background: #E8F5E9; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 20px;">📬</div>\n                <div>\n                    <h4 style="margin-bottom: 5px; color: #4D148C;">Out for Delivery</h4>\n                    <p style="font-size: 14px; color: #666; margin: 0;">Your package is on the delivery vehicle and will be delivered today.</p>\n                </div>\n            </div>\n            \n            <div style="display: flex; align-items: center; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">\n                <div style="width: 60px; height: 60px; background: #C8E6C9; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 20px;">✅</div>\n                <div>\n                    <h4 style="margin-bottom: 5px; color: #4D148C;">Delivered</h4>\n                    <p style="font-size: 14px; color: #666; margin: 0;">Your package has been successfully delivered.</p>\n                </div>\n            </div>\n            \n            <div style="display: flex; align-items: center; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">\n                <div style="width: 60px; height: 60px; background: #FFEBEE; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 20px;">⏸️</div>\n                <div>\n                    <h4 style="margin-bottom: 5px; color: #4D148C;">On Hold</h4>\n                    <p style="font-size: 14px; color: #666; margin: 0;">Your shipment is temporarily on hold pending further action.</p>\n                </div>\n            </div>\n            \n            <div style="display: flex; align-items: center; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">\n                <div style="width: 60px; height: 60px; background: #FFF3E0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 20px;">⚠️</div>\n                <div>\n                    <h4 style="margin-bottom: 5px; color: #4D148C;">Exception</h4>\n                    <p style="font-size: 14px; color: #666; margin: 0;">There\'s an exception with your shipment. Contact support for details.</p>\n                </div>\n            </div>\n        </div>\n    </div>\n</section>\n{% endblock %}\n</create-file>\n</function_calls>'}