🌊 Shipping Container Tracker

A visually stunning website that tracks a single cargo ship on its journey across the ocean using a 3D globe with compelling narrative and key milestones.

✨ Features

🌍 3D Globe Visualization

• Interactive 3D Earth globe using Three.js
• Real-time ship tracking with smooth animations
• Atmospheric effects and star field background
• Zoom, rotate, and pan controls

🚢 Ship Tracking

• Real-time ship position updates
• Animated ship movement along journey path
• Ship trail visualization
• Speed, course, and ETA information

📍 Journey Timeline

• Interactive timeline with key milestones
• Progress tracking with visual indicators
• Detailed port information and arrival times
• Milestone notifications with modal popups

🎨 Modern UI/UX

• Responsive design for all devices
• Dark theme with ocean-inspired colors
• Smooth animations and transitions
• Loading screen with maritime theme

🎮 Interactive Controls

• Play/Pause journey animation
• Reset to beginning
• Fullscreen mode
• Keyboard shortcuts (Space, R, F)

🚀 Quick Start

Option 1: Direct Browser Opening

1. Simply open index.html in your web browser
2. The application will load automatically

Option 2: Local Server (Recommended)

1. Install dependencies:

   npm install

2. Start the development server:

   npm start

   or

   npm run dev

3. Open your browser to http://localhost:3000

🗺️ Journey Route

The MV Ocean Explorer follows this route:

1. Tokyo Port - Journey begins in Japan
2. Busan Port - First stop in South Korea
3. Hong Kong Port - Major Asian hub
4. Singapore Port - Southeast Asia gateway
5. Jakarta Port - Indonesia connection
6. Cape Town Port - African stopover
7. London Port - Final destination in the UK

🎯 Key Milestones

• Departure: Journey begins from Tokyo
• First Stop: Arrival in Busan
• Major Hub: Hong Kong port call
• Southeast Asia: Singapore connection
• Indonesia: Jakarta port visit
• Africa: Cape Town arrival
• Final Destination: London completion

🛠️ Technical Stack

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• 3D Graphics: Three.js
• Styling: Custom CSS with modern features
• Fonts: Inter (Google Fonts)
• Icons: Unicode emojis and symbols

📱 Responsive Design

The application is fully responsive and works on:

• Desktop computers
• Tablets
• Mobile phones
• Various screen orientations

⌨️ Keyboard Shortcuts

• Spacebar: Play/Pause journey
• R: Reset to beginning
• F: Toggle fullscreen mode

🔧 Customization

Adding Real Maritime Data

To integrate with real maritime APIs:

1. Replace the simulated data in script.js
2. Update the loadJourneyData() method
3. Connect to APIs like:
   • MarineTraffic API
   • VesselFinder API
   • AIS (Automatic Identification System) data

Modifying the Route

Edit the journeyData.route array in script.js to change:

• Port locations (lat/lng coordinates)
• Journey timeline
• Milestone descriptions
• Ship information

Styling Customization

Modify styles.css to change:

• Color scheme
• Typography
• Layout dimensions
• Animation effects

🌐 Browser Compatibility

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

📄 License

MIT License - feel free to use this project for personal or commercial purposes.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

If you encounter any issues or have questions, please open an issue on GitHub.

---

Made with ❤️ for maritime enthusiasts and data visualization lovers