Hugging Face's logo

Spaces:
demonsom
/
globalship-logistics
Running

App Files Community
globalship-logistics
File size: 4,910 Bytes 
c6eec55
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
// Form step navigation
function nextStep(step) {
    document.getElementById(`step${step}`).classList.remove('active');
    document.getElementById(`step${step + 1}`).classList.add('active');
    
    // Update progress bar
    const progress = (step + 1) * 25;
    document.getElementById('formProgress').style.width = `${progress}%`;
}

function prevStep(step) {
    document.getElementById(`step${step}`).classList.remove('active');
    document.getElementById(`step${step - 1}`).classList.add('active');
    
    // Update progress bar
    const progress = (step - 1) * 25;
    document.getElementById('formProgress').style.width = `${progress}%`;
}

// Service selection
document.querySelectorAll('.service-option').forEach(option => {
    option.addEventListener('click', function() {
        document.querySelectorAll('.service-option').forEach(el => {
            el.classList.remove('selected');
            el.classList.remove('border-blue-500');
            el.classList.remove('bg-blue-50');
            el.classList.add('border-gray-300');
        });
        this.classList.add('selected');
        this.classList.remove('border-gray-300');
        this.classList.add('border-blue-500');
        this.classList.add('bg-blue-50');
    });
});

// Shipment tracking simulation
function trackShipment() {
    const trackingNumber = document.getElementById('trackingNumber').value;
    
    if (!trackingNumber) {
        alert('Please enter a tracking number');
        return;
    }
    
    // Show tracking result
    document.getElementById('trackingResult').classList.remove('hidden');
    
    // Populate with sample data
    document.getElementById('resultTrackingNumber').textContent = trackingNumber;
    document.getElementById('resultStatus').textContent = 'In Transit';
    document.getElementById('resultDeliveryDate').textContent = 'May 25, 2023';
    document.getElementById('resultOrigin').textContent = 'New York, USA';
    document.getElementById('resultDestination').textContent = 'London, UK';
    document.getElementById('resultCurrentLocation').textContent = 'Amsterdam, Netherlands';
    
    // Populate timeline
    const timeline = document.getElementById('shipmentTimeline');
    timeline.innerHTML = `
        <div class="timeline-item active">
            <h4 class="font-bold">Shipment Picked Up</h4>
            <p class="text-gray-600">May 15, 2023 - 10:30 AM</p>
            <p class="text-gray-600">New York, USA</p>
        </div>
        <div class="timeline-item active">
            <h4 class="font-bold">Arrived at Sorting Facility</h4>
            <p class="text-gray-600">May 15, 2023 - 4:45 PM</p>
            <p class="text-gray-600">New York, USA</p>
        </div>
        <div class="timeline-item active">
            <h4 class="font-bold">Departed from Sorting Facility</h4>
            <p class="text-gray-600">May 16, 2023 - 6:00 AM</p>
            <p class="text-gray-600">New York, USA</p>
        </div>
        <div class="timeline-item active">
            <h4 class="font-bold">Arrived at International Hub</h4>
            <p class="text-gray-600">May 17, 2023 - 3:30 PM</p>
            <p class="text-gray-600">Amsterdam, Netherlands</p>
        </div>
        <div class="timeline-item">
            <h4 class="font-bold">Departed from International Hub</h4>
            <p class="text-gray-600">Expected: May 18, 2023</p>
            <p class="text-gray-600">Amsterdam, Netherlands</p>
        </div>
        <div class="timeline-item">
            <h4 class="font-bold">Arrival at Destination Hub</h4>
            <p class="text-gray-600">Expected: May 24, 2023</p>
            <p class="text-gray-600">London, UK</p>
        </div>
        <div class="timeline-item">
            <h4 class="font-bold">Out for Delivery</h4>
            <p class="text-gray-600">Expected: May 25, 2023</p>
            <p class="text-gray-600">London, UK</p>
        </div>
        <div class="timeline-item">
            <h4 class="font-bold">Delivered</h4>
            <p class="text-gray-600">Expected: May 25, 2023</p>
            <p class="text-gray-600">London, UK</p>
        </div>
    `;
}

// Form submission
function submitForm() {
    alert('Shipment registered successfully! Your tracking number is GS123456789');
    // Reset form
    document.getElementById('step4').classList.remove('active');
    document.getElementById('step1').classList.add('active');
    document.getElementById('formProgress').style.width = '20%';
}

// Mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuButton = document.querySelector('[data-mobile-menu]');
    const mobileMenu = document.querySelector('[data-mobile-menu-items]');
    
    if (mobileMenuButton && mobileMenu) {
        mobileMenuButton.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
        });
    }
});